feat: Add time block approval workflow and staff permission system

- Add TimeBlock approval status with manager approval workflow - Create core mixins for staff permission restrictions (DenyStaffWritePermission, etc.) - Add StaffDashboard page for staff-specific views - Refactor MyAvailability page for time block management - Update field mobile status machine and views - Add per-user permission overrides via JSONField - Document core mixins and permission system in CLAUDE.md 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
feat(staff): Restrict staff permissions and add schedule view
2025-12-07 17:49:37 -05:00 · 2025-12-07 02:23:00 -05:00 · 2025-12-07 01:23:24 -05:00 · 2025-12-06 14:32:35 -05:00 · 2025-12-05 23:28:51 -05:00 · 2025-12-05 02:29:35 -05:00
498 changed files with 100752 additions and 7251 deletions
--- a/.gemini/tmp/update_email_template.py
+++ b/.gemini/tmp/update_email_template.py
@@ -0,0 +1,125 @@
+from schedule.models import EmailTemplate
+import json
+
+html_content = """
+<body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background-color: #f5f5f5;">
+    <table width="100%" cellpadding="0" cellspacing="0" style="background-color: #f5f5f5; padding: 40px 20px;">
+        <tbody><tr>
+            <td align="center">
+                <table width="600" cellpadding="0" cellspacing="0" style="background-color: #ffffff; border-radius: 6px; box-shadow: 0 4px 6px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.08);">
+                    <!-- Header -->
+                    <tbody><tr>
+                        <td style="background-color: #4f46e5; padding: 30px; text-align: center; border-radius: 6px 6px 0 0;">
+                            <h1 style="margin: 0; color: #ffffff; font-size: 28px; font-weight: 600;">Appointment Confirmed</h1>
+                        </td>
+                    </tr>
+
+                    <!-- Body -->
+                    <tr>
+                        <td style="padding: 40px 30px;">
+                            <p style="margin: 0 0 20px 0; color: #374151; font-size: 16px; line-height: 1.6;">
+                                Hello <strong>{{CUSTOMER_NAME}}</strong>,
+                            </p>
+
+                            <p style="margin: 0 0 30px 0; color: #374151; font-size: 16px; line-height: 1.6;">
+                                Your appointment has been confirmed. We look forward to seeing you!
+                            </p>
+
+                            <!-- Appointment Details Card -->
+                            <table width="100%" cellpadding="0" cellspacing="0" style="background-color: #f5f5f5; border-radius: 6px; border: 1px solid #e5e7eb; margin-bottom: 30px;">
+                                <tbody><tr>
+                                    <td style="padding: 20px;">
+                                        <table width="100%" cellpadding="8" cellspacing="0">
+                                            <tbody><tr>
+                                                <td style="color: #6b7280; font-size: 14px; font-weight: 600;">Service:</td>
+                                                <td style="color: #111827; font-size: 14px; text-align: right;">{{SERVICE_NAME}}</td>
+                                            </tr>
+                                            <tr>
+                                                <td style="color: #6b7280; font-size: 14px; font-weight: 600;">Date &amp; Time:</td>
+                                                <td style="color: #111827; font-size: 14px; text-align: right;">{{EVENT_START_DATETIME}}</td>
+                                            </tr>
+                                            <tr>
+                                                <td style="color: #6b7280; font-size: 14px; font-weight: 600;">Duration:</td>
+                                                <td style="color: #111827; font-size: 14px; text-align: right;">{{SERVICE_DURATION}} minutes</td>
+                                            </tr>
+                                            <tr>
+                                                <td style="color: #6b7280; font-size: 14px; font-weight: 600;">With:</td>
+                                                <td style="color: #111827; font-size: 14px; text-align: right;">{{STAFF_NAME}}</td>
+                                            </tr>
+                                        </tbody></table>
+                                    </td>
+                                </tr>
+                            </tbody></table>
+                            
+                            <!-- Call to Action Button (example - not in original but good to show professional button style) -->
+                            <table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 30px;">
+                                <tr>
+                                    <td align="center" style="padding-top: 10px;">
+                                        <table border="0" cellpadding="0" cellspacing="0">
+                                            <tr>
+                                                <td align="center" bgcolor="#4f46e5" style="border-radius: 5px; background-color: #4f46e5; padding: 12px 25px;">
+                                                    <a href="{{VIEW_APPOINTMENT_LINK}}" target="_blank" style="font-size: 16px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: #ffffff; text-decoration: none; font-weight: 600; display: inline-block;">View My Appointment</a>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                            </table>
+
+                            <p style="margin: 0 0 20px 0; color: #6b7280; font-size: 14px; line-height: 1.6;">
+                                If you need to reschedule or cancel, please contact us at least 24 hours in advance.
+                            </p>
+                        </td>
+                    </tr>
+
+                    <!-- Footer -->
+                    <tr>
+                        <td style="background-color: #f9fafb; padding: 20px 30px; text-align: center; border-radius: 0 0 6px 6px; border-top: 1px solid #e5e7eb;">
+                            <p style="margin: 0; color: #6b7280; font-size: 14px;">
+                                <strong>{{BUSINESS_NAME}}</strong><br>
+                                {{BUSINESS_EMAIL}} | {{BUSINESS_PHONE}}
+                            </p>
+                        </td>
+                    </tr>
+                </tbody></table>
+            </td>
+        </tr>
+    </tbody></table>
+
+</body>
+"""
+
+text_content = """
+Hello {{CUSTOMER_NAME}},
+
+Your appointment has been confirmed. We look forward to seeing you!
+
+---
+Appointment Details:
+Service: {{SERVICE_NAME}}
+Date & Time: {{EVENT_START_DATETIME}}
+Duration: {{SERVICE_DURATION}} minutes
+With: {{STAFF_NAME}}
+---
+
+If you need to reschedule or cancel, please contact us at least 24 hours in advance.
+
+View your appointment: {{VIEW_APPOINTMENT_LINK}}
+
+---
+{{BUSINESS_NAME}}
+{{BUSINESS_EMAIL}} | {{BUSINESS_PHONE}}
+"""
+
+template_name = "Appointment Confirmed" # Assuming this is the name of the template to update
+
+try:
+    template = EmailTemplate.objects.get(name=template_name)
+    template.html_content = html_content
+    template.text_content = text_content
+    template.save()
+    print(f"Successfully updated template '{template_name}'.")
+except EmailTemplate.DoesNotExist:
+    print(f"Error: Template '{template_name}' not found.")
+except Exception as e:
+    print(f"An error occurred: {e}")
--- a/.idea/.gitignore
+++ b/.idea/.gitignore
@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -0,0 +1,17 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+    <inspection_tool class="PyCompatibilityInspection" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="ourVersions">
+        <value>
+          <list size="3">
+            <item index="0" class="java.lang.String" itemvalue="3.14" />
+            <item index="1" class="java.lang.String" itemvalue="3.7" />
+            <item index="2" class="java.lang.String" itemvalue="3.8" />
+          </list>
+        </value>
+      </option>
+    </inspection_tool>
+  </profile>
+</component>
--- a/.idea/inspectionProfiles/profiles_settings.xml
+++ b/.idea/inspectionProfiles/profiles_settings.xml
@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <settings>
+    <option name="USE_PROJECT_PROFILE" value="false" />
+    <version value="1.0" />
+  </settings>
+</component>
--- a/.idea/smoothschedule2.iml
+++ b/.idea/smoothschedule2.iml
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module version="4">
+  <component name="PyDocumentationSettings">
+    <option name="format" value="PLAIN" />
+    <option name="myDocStringFormat" value="Plain" />
+  </component>
+  <component name="TemplatesService">
+    <option name="TEMPLATE_CONFIGURATION" value="Jinja2" />
+    <option name="TEMPLATE_FOLDERS">
+      <list>
+        <option value="$MODULE_DIR$/smoothschedule/schedule/templates" />
+      </list>
+    </option>
+  </component>
+  <component name="TestRunnerService">
+    <option name="PROJECT_TEST_RUNNER" value="py.test" />
+  </component>
+</module>
--- a/.idea/vcs.xml
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
--- a/ANALYTICS_CHANGES.md
+++ b/ANALYTICS_CHANGES.md
@@ -0,0 +1,352 @@
+# Advanced Analytics Implementation - Change Summary
+
+## Overview
+
+Successfully implemented the Advanced Analytics feature with permission-based access control in the Django backend. All analytics endpoints are gated behind the `advanced_analytics` permission from the subscription plan.
+
+## Files Created
+
+### Analytics App (`/smoothschedule/analytics/`)
+
+1. **`__init__.py`** - Package initialization
+2. **`apps.py`** - Django app configuration
+3. **`admin.py`** - Admin interface (read-only app, no models)
+4. **`views.py`** - AnalyticsViewSet with 3 endpoints:
+   - `dashboard()` - Summary statistics
+   - `appointments()` - Detailed appointment analytics
+   - `revenue()` - Revenue analytics (dual-permission gated)
+5. **`serializers.py`** - Response serializers for data validation
+6. **`urls.py`** - URL routing
+7. **`tests.py`** - Comprehensive pytest test suite
+8. **`migrations/`** - Empty migrations directory
+9. **`README.md`** - Full API documentation
+10. **`IMPLEMENTATION_GUIDE.md`** - Developer implementation guide
+
+## Files Modified
+
+### 1. `/smoothschedule/core/permissions.py`
+
+**Changes:**
+- Added `advanced_analytics` and `advanced_reporting` to the `FEATURE_NAMES` dictionary in `HasFeaturePermission`
+
+**Before:**
+```python
+FEATURE_NAMES = {
+    'can_use_sms_reminders': 'SMS Reminders',
+    ...
+    'can_use_calendar_sync': 'Calendar Sync',
+}
+```
+
+**After:**
+```python
+FEATURE_NAMES = {
+    'can_use_sms_reminders': 'SMS Reminders',
+    ...
+    'can_use_calendar_sync': 'Calendar Sync',
+    'advanced_analytics': 'Advanced Analytics',
+    'advanced_reporting': 'Advanced Reporting',
+}
+```
+
+### 2. `/smoothschedule/config/urls.py`
+
+**Changes:**
+- Added analytics URL include in the API URL patterns
+
+**Before:**
+```python
+# Schedule API (internal)
+path("", include("schedule.urls")),
+# Payments API
+path("payments/", include("payments.urls")),
+```
+
+**After:**
+```python
+# Schedule API (internal)
+path("", include("schedule.urls")),
+# Analytics API
+path("", include("analytics.urls")),
+# Payments API
+path("payments/", include("payments.urls")),
+```
+
+### 3. `/smoothschedule/config/settings/base.py`
+
+**Changes:**
+- Added `analytics` app to `LOCAL_APPS`
+
+**Before:**
+```python
+LOCAL_APPS = [
+    "smoothschedule.users",
+    "core",
+    "schedule",
+    "payments",
+    ...
+]
+```
+
+**After:**
+```python
+LOCAL_APPS = [
+    "smoothschedule.users",
+    "core",
+    "schedule",
+    "analytics",
+    "payments",
+    ...
+]
+```
+
+## API Endpoints
+
+All endpoints are located at `/api/analytics/` and require:
+- Authentication via token or session
+- `advanced_analytics` permission in tenant's subscription plan
+
+### 1. Dashboard Summary
+```
+GET /api/analytics/analytics/dashboard/
+```
+
+Returns:
+- Total appointments (this month and all-time)
+- Active resources and services count
+- Upcoming appointments
+- Average appointment duration
+- Peak booking day and hour
+
+### 2. Appointment Analytics
+```
+GET /api/analytics/analytics/appointments/
+```
+
+Query Parameters:
+- `days` (default: 30)
+- `status` (optional: confirmed, cancelled, no_show)
+- `service_id` (optional)
+- `resource_id` (optional)
+
+Returns:
+- Total appointments
+- Breakdown by status
+- Breakdown by service and resource
+- Daily breakdown
+- Booking trends and rates
+
+### 3. Revenue Analytics
+```
+GET /api/analytics/analytics/revenue/
+```
+
+Query Parameters:
+- `days` (default: 30)
+- `service_id` (optional)
+
+Returns:
+- Total revenue in cents
+- Transaction count
+- Average transaction value
+- Revenue by service
+- Daily breakdown
+
+**Note:** Requires both `advanced_analytics` AND `can_accept_payments` permissions
+
+## Permission Gating Implementation
+
+### How It Works
+
+1. **Request arrives at endpoint**
+2. **IsAuthenticated check** - Verifies user is logged in
+3. **HasFeaturePermission('advanced_analytics') check**:
+   - Gets tenant from request
+   - Calls `tenant.has_feature('advanced_analytics')`
+   - Checks both direct field and subscription plan JSON
+4. **If permission exists** - View logic executes
+5. **If permission missing** - 403 Forbidden returned with message
+
+### Permission Check Logic
+
+```python
+# In core/models.py - Tenant.has_feature()
+def has_feature(self, permission_key):
+    # Check direct field on Tenant model
+    if hasattr(self, permission_key):
+        return bool(getattr(self, permission_key))
+
+    # Check subscription plan permissions JSON
+    if self.subscription_plan:
+        plan_perms = self.subscription_plan.permissions or {}
+        return bool(plan_perms.get(permission_key, False))
+
+    return False
+```
+
+## Enabling Analytics for a Plan
+
+### Via Django Admin
+1. Go to `/admin/platform_admin/subscriptionplan/`
+2. Edit a plan
+3. Add to "Permissions" JSON field:
+```json
+{
+    "advanced_analytics": true
+}
+```
+
+### Via Django Shell
+```bash
+docker compose -f docker-compose.local.yml exec django python manage.py shell
+
+from platform_admin.models import SubscriptionPlan
+plan = SubscriptionPlan.objects.get(name='Professional')
+perms = plan.permissions or {}
+perms['advanced_analytics'] = True
+plan.permissions = perms
+plan.save()
+```
+
+## Testing
+
+### Permission Tests Included
+
+The `analytics/tests.py` file includes comprehensive tests:
+
+1. **TestAnalyticsPermissions**
+   - `test_analytics_requires_authentication` - 401 without auth
+   - `test_analytics_denied_without_permission` - 403 without permission
+   - `test_analytics_allowed_with_permission` - 200 with permission
+   - `test_dashboard_endpoint_structure` - Verify response structure
+   - `test_appointments_endpoint_with_filters` - Query parameters work
+   - `test_revenue_requires_payments_permission` - Dual permission check
+   - `test_multiple_permission_check` - Both checks enforced
+
+2. **TestAnalyticsData**
+   - `test_dashboard_counts_appointments_correctly` - Correct counts
+   - `test_appointments_counts_by_status` - Status breakdown
+   - `test_cancellation_rate_calculation` - Rate calculation
+
+### Running Tests
+
+```bash
+# Run all analytics tests
+docker compose -f docker-compose.local.yml exec django pytest analytics/tests.py -v
+
+# Run specific test
+docker compose -f docker-compose.local.yml exec django pytest analytics/tests.py::TestAnalyticsPermissions::test_analytics_denied_without_permission -v
+
+# Run with coverage
+docker compose -f docker-compose.local.yml exec django pytest analytics/tests.py --cov=analytics
+```
+
+## Error Responses
+
+### 401 Unauthorized (No Authentication)
+```json
+{
+    "detail": "Authentication credentials were not provided."
+}
+```
+
+### 403 Forbidden (No Permission)
+```json
+{
+    "detail": "Your current plan does not include Advanced Analytics. Please upgrade your subscription to access this feature."
+}
+```
+
+### 403 Forbidden (Revenue Endpoint - Missing Payments Permission)
+```json
+{
+    "error": "Payment analytics not available",
+    "detail": "Your plan does not include payment processing."
+}
+```
+
+## Example Usage
+
+### Get Dashboard Stats (with cURL)
+```bash
+TOKEN="your_auth_token_here"
+
+curl -H "Authorization: Token $TOKEN" \
+    http://lvh.me:8000/api/analytics/analytics/dashboard/ | jq
+```
+
+### Get Appointment Analytics (with filters)
+```bash
+curl -H "Authorization: Token $TOKEN" \
+    "http://lvh.me:8000/api/analytics/analytics/appointments/?days=7&status=confirmed" | jq
+```
+
+### Get Revenue Analytics
+```bash
+curl -H "Authorization: Token $TOKEN" \
+    http://lvh.me:8000/api/analytics/analytics/revenue/ | jq
+```
+
+## Key Design Decisions
+
+1. **ViewSet without models** - Analytics is calculated on-the-fly, no database models
+2. **Read-only endpoints** - No POST/PUT/DELETE, only GET for querying
+3. **Comprehensive permission naming** - Both `advanced_analytics` and `advanced_reporting` supported for flexibility
+4. **Dual permission check** - Revenue endpoint requires both analytics and payments permissions
+5. **Query parameter filtering** - Flexible filtering for reports
+6. **Detailed error messages** - User-friendly upgrade prompts
+
+## Documentation Provided
+
+1. **README.md** - Complete API documentation with examples
+2. **IMPLEMENTATION_GUIDE.md** - Developer guide for enabling and debugging
+3. **Code comments** - Detailed docstrings in views and serializers
+4. **Test file** - Comprehensive test suite with examples
+
+## Next Steps
+
+1. **Migrate** - No migrations needed (no database models)
+2. **Configure Plans** - Add `advanced_analytics` permission to desired subscription plans
+3. **Test** - Run the test suite to verify functionality
+4. **Deploy** - Push to production
+5. **Monitor** - Check logs for any issues
+
+## Implementation Checklist
+
+- [x] Create analytics app with ViewSet
+- [x] Implement dashboard endpoint with summary statistics
+- [x] Implement appointments endpoint with filtering
+- [x] Implement revenue endpoint with dual permission check
+- [x] Add permission to FEATURE_NAMES in core/permissions.py
+- [x] Register app in INSTALLED_APPS
+- [x] Add URL routing
+- [x] Create serializers for response validation
+- [x] Write comprehensive test suite
+- [x] Document API endpoints
+- [x] Document implementation details
+- [x] Provide developer guide
+
+## Files Summary
+
+**Total Files Created:** 11
+- 10 Python files (app code + tests)
+- 2 Documentation files
+
+**Total Files Modified:** 3
+- core/permissions.py
+- config/urls.py
+- config/settings/base.py
+
+**Lines of Code:**
+- views.py: ~350 lines
+- tests.py: ~260 lines
+- serializers.py: ~80 lines
+- Documentation: ~1000 lines
+
+## Questions or Issues?
+
+Refer to:
+1. `analytics/README.md` - API usage and endpoints
+2. `analytics/IMPLEMENTATION_GUIDE.md` - Setup and debugging
+3. `analytics/tests.py` - Examples of correct usage
+4. `core/permissions.py` - Permission checking logic
--- a/CALENDAR_SYNC_PERMISSION_IMPLEMENTATION.md
+++ b/CALENDAR_SYNC_PERMISSION_IMPLEMENTATION.md
@@ -0,0 +1,476 @@
+# Calendar Sync Permission Implementation
+
+## Summary
+
+Successfully added permission checking for the calendar sync feature in the Django backend. The implementation follows the existing `HasFeaturePermission` pattern and gates access to calendar OAuth and sync operations.
+
+## Files Modified and Created
+
+### Core Changes
+
+#### 1. **core/models.py** - Tenant Model
+**File:** `/home/poduck/Desktop/smoothschedule2/smoothschedule/core/models.py`
+
+Added new permission field to the Tenant model:
+```python
+can_use_calendar_sync = models.BooleanField(
+    default=False,
+    help_text="Whether this business can sync Google Calendar and other calendar providers"
+)
+```
+
+**Impact:**
+- New tenants will have `can_use_calendar_sync=False` by default
+- Platform admins can enable this per-tenant via the Django admin or API
+- Works with existing subscription plan system
+
+#### 2. **core/migrations/0016_tenant_can_use_calendar_sync.py** - Database Migration
+**File:** `/home/poduck/Desktop/smoothschedule2/smoothschedule/core/migrations/0016_tenant_can_use_calendar_sync.py`
+
+Database migration that adds the `can_use_calendar_sync` boolean field to the Tenant table.
+
+**How to apply:**
+```bash
+cd /home/poduck/Desktop/smoothschedule2/smoothschedule
+docker compose -f docker-compose.local.yml exec django python manage.py migrate
+```
+
+#### 3. **core/permissions.py** - Permission Check
+**File:** `/home/poduck/Desktop/smoothschedule2/smoothschedule/core/permissions.py`
+
+Updated `HasFeaturePermission` factory function:
+- Added `'can_use_calendar_sync': 'Calendar Sync'` to `FEATURE_NAMES` mapping
+- This displays user-friendly error messages when the feature is not available
+- Follows the existing pattern used by other features (SMS reminders, webhooks, etc.)
+
+**Usage Pattern:**
+```python
+from core.permissions import HasFeaturePermission
+from rest_framework.permissions import IsAuthenticated
+
+class MyViewSet(viewsets.ModelViewSet):
+    permission_classes = [IsAuthenticated, HasFeaturePermission('can_use_calendar_sync')]
+```
+
+#### 4. **core/oauth_views.py** - OAuth Permission Checks
+**File:** `/home/poduck/Desktop/smoothschedule2/smoothschedule/core/oauth_views.py`
+
+Updated OAuth views to check calendar sync permission when initiating calendar-specific OAuth flows:
+
+**GoogleOAuthInitiateView:**
+- Imported `HasFeaturePermission` from core.permissions
+- Added check: If `purpose == 'calendar'`, verify tenant has `can_use_calendar_sync` permission
+- Returns 403 Forbidden with upgrade message if permission denied
+- Email OAuth (`purpose == 'email'`) is NOT affected by this check
+
+**MicrosoftOAuthInitiateView:**
+- Same pattern as Google OAuth
+- Supports both email and calendar purposes with respective permission checks
+
+**Docstring updates:**
+Both views now document the permission requirements:
+```
+Permission Requirements:
+- For "email" purpose: IsPlatformAdmin only
+- For "calendar" purpose: Requires can_use_calendar_sync feature permission
+```
+
+### New Calendar Sync Implementation
+
+#### 5. **schedule/calendar_sync_views.py** - Calendar Sync Endpoints
+**File:** `/home/poduck/Desktop/smoothschedule2/smoothschedule/schedule/calendar_sync_views.py`
+
+Created comprehensive calendar sync views with permission checking:
+
+**CalendarSyncPermission Custom Permission:**
+- Combines authentication check with feature permission check
+- Used by all calendar sync endpoints
+- Ensures both user is authenticated AND tenant has permission
+
+**CalendarListView (GET /api/calendar/list/)**
+- Lists connected calendars for the current tenant
+- Returns OAuth credentials with masked tokens
+- Protected by CalendarSyncPermission
+
+**CalendarSyncView (POST /api/calendar/sync/)**
+- Initiates calendar event synchronization
+- Accepts credential_id, calendar_id, start_date, end_date
+- Verifies credential belongs to tenant
+- Checks credential validity before sync
+- TODO: Implement actual calendar API integration
+
+**CalendarDeleteView (DELETE /api/calendar/disconnect/)**
+- Disconnects/revokes a calendar integration
+- Removes the OAuth credential
+- Logs the action for audit trail
+
+**CalendarStatusView (GET /api/calendar/status/)**
+- Informational endpoint (authentication only, not feature-gated)
+- Returns whether calendar sync is enabled for tenant
+- Shows number of connected calendars
+- User-friendly message if feature not available
+
+#### 6. **schedule/calendar_sync_urls.py** - URL Configuration
+**File:** `/home/poduck/Desktop/smoothschedule2/smoothschedule/schedule/calendar_sync_urls.py`
+
+URL routes for calendar sync endpoints:
+```
+/api/calendar/status/       - Check calendar sync status
+/api/calendar/list/         - List connected calendars
+/api/calendar/sync/         - Sync calendar events
+/api/calendar/disconnect/   - Disconnect a calendar
+```
+
+To integrate with main URL config, add to config/urls.py:
+```python
+path("calendar/", include("schedule.calendar_sync_urls", namespace="calendar")),
+```
+
+#### 7. **schedule/tests/test_calendar_sync_permissions.py** - Test Suite
+**File:** `/home/poduck/Desktop/smoothschedule2/smoothschedule/schedule/tests/test_calendar_sync_permissions.py`
+
+Comprehensive test suite with 20+ tests covering:
+
+**CalendarSyncPermissionTests:**
+- `test_calendar_list_without_permission` - Verify 403 when disabled
+- `test_calendar_sync_without_permission` - Verify 403 when disabled
+- `test_oauth_calendar_initiate_without_permission` - Verify OAuth rejects calendar
+- `test_calendar_list_with_permission` - Verify 200 when enabled
+- `test_calendar_with_connected_credential` - Verify credential appears in list
+- `test_unauthenticated_calendar_access` - Verify 401 for anonymous users
+
+**CalendarSyncIntegrationTests:**
+- `test_full_calendar_workflow` - Complete workflow (list → connect → sync → disconnect)
+
+**TenantPermissionModelTests:**
+- `test_tenant_can_use_calendar_sync_default` - Verify default False
+- `test_has_feature_with_other_permissions` - Verify method works correctly
+
+**Run tests:**
+```bash
+cd /home/poduck/Desktop/smoothschedule2/smoothschedule
+docker compose -f docker-compose.local.yml exec django pytest schedule/tests/test_calendar_sync_permissions.py -v
+```
+
+#### 8. **CALENDAR_SYNC_INTEGRATION.md** - Integration Guide
+**File:** `/home/poduck/Desktop/smoothschedule2/smoothschedule/CALENDAR_SYNC_INTEGRATION.md`
+
+Comprehensive developer guide including:
+- Architecture overview
+- Permission flow diagram
+- API endpoint examples with curl commands
+- Integration patterns with ViewSets
+- Testing examples
+- Security considerations
+- Related files reference
+
+## Permission Flow
+
+```
+User Request to Calendar Endpoint
+    ↓
+1. [Is User Authenticated?]
+    ├─ NO → 401 Unauthorized
+    └─ YES ↓
+2. [Request Has Tenant Context?]
+    ├─ NO → 400 Bad Request
+    └─ YES ↓
+3. [Does Tenant have can_use_calendar_sync?]
+    ├─ NO → 403 Forbidden (upgrade message)
+    └─ YES ↓
+4. [Process Request]
+    ├─ Success → 200 OK
+    └─ Error → 500 Server Error
+```
+
+## Implementation Details
+
+### Permission Field Design
+
+The `can_use_calendar_sync` field:
+- Is a BooleanField on the Tenant model
+- Defaults to False (disabled by default)
+- Can be set per-tenant by platform admins
+- Works alongside subscription_plan.permissions for more granular control
+- Integrates with existing `has_feature()` method on Tenant
+
+### How Permission Checking Works
+
+#### In OAuth Views
+```python
+# Check calendar sync permission if purpose is calendar
+if purpose == 'calendar':
+    calendar_permission = HasFeaturePermission('can_use_calendar_sync')
+    if not calendar_permission().has_permission(request, self):
+        return Response({
+            'success': False,
+            'error': 'Your current plan does not include Calendar Sync...',
+        }, status=status.HTTP_403_FORBIDDEN)
+```
+
+#### In Calendar Sync Views
+```python
+class CalendarSyncPermission(IsAuthenticated):
+    def has_permission(self, request, view):
+        if not super().has_permission(request, view):
+            return False
+
+        tenant = getattr(request, 'tenant', None)
+        if not tenant:
+            return False
+
+        return tenant.has_feature('can_use_calendar_sync')
+
+class CalendarListView(APIView):
+    permission_classes = [CalendarSyncPermission]
+```
+
+### Separation of Concerns
+
+- **Email OAuth**: Not affected by calendar sync permission (separate feature)
+- **Calendar OAuth**: Requires calendar sync permission only when `purpose='calendar'`
+- **Calendar Sync**: Requires calendar sync permission for all operations
+- **Calendar Status**: Authentication only (informational endpoint)
+
+## Security Considerations
+
+1. **Multi-Tenancy Isolation**
+   - All OAuthCredential queries filter by tenant
+   - Users can only access their own tenant's calendars
+   - Credentials are not shared between tenants
+
+2. **Token Security**
+   - OAuth tokens stored encrypted at rest (via Django settings)
+   - Tokens masked in API responses
+   - Token validity checked before use
+
+3. **CSRF Protection**
+   - OAuth state parameter validated
+   - Standard Django session handling
+
+4. **Audit Trail**
+   - All calendar operations logged with tenant/user info
+   - Sync operations logged with timestamps
+   - Disconnect operations logged
+
+5. **Feature Gating**
+   - Permission checked at view level
+   - No way to bypass by direct API access
+   - Consistent error messages for upgrade prompts
+
+## API Examples
+
+### Check if Feature is Available
+```bash
+GET /api/calendar/status/
+
+# Response (if enabled):
+{
+  "success": true,
+  "can_use_calendar_sync": true,
+  "total_connected": 2
+}
+
+# Response (if disabled):
+{
+  "success": true,
+  "can_use_calendar_sync": false,
+  "message": "Calendar Sync feature is not available for your plan"
+}
+```
+
+### Initiate Calendar OAuth
+```bash
+POST /api/oauth/google/initiate/
+Content-Type: application/json
+
+{
+  "purpose": "calendar"
+}
+
+# Response (if permission granted):
+{
+  "success": true,
+  "authorization_url": "https://accounts.google.com/o/oauth2/auth?..."
+}
+
+# Response (if permission denied):
+{
+  "success": false,
+  "error": "Your current plan does not include Calendar Sync. Please upgrade..."
+}
+```
+
+### List Connected Calendars
+```bash
+GET /api/calendar/list/
+
+# Response:
+{
+  "success": true,
+  "calendars": [
+    {
+      "id": 1,
+      "provider": "Google",
+      "email": "user@gmail.com",
+      "is_valid": true,
+      "is_expired": false,
+      "created_at": "2025-12-01T08:15:00Z"
+    }
+  ]
+}
+```
+
+## Testing the Implementation
+
+### Manual Testing via API
+
+1. **Test without permission:**
+```bash
+# Create a user in a tenant without calendar sync
+curl -X GET http://lvh.me:8000/api/calendar/list/ \
+  -H "Authorization: Bearer <token>"
+
+# Expected: 403 Forbidden
+```
+
+2. **Test with permission:**
+```bash
+# Enable calendar sync on tenant
+# Then try again:
+curl -X GET http://lvh.me:8000/api/calendar/list/ \
+  -H "Authorization: Bearer <token>"
+
+# Expected: 200 OK with calendar list
+```
+
+### Run Test Suite
+```bash
+cd /home/poduck/Desktop/smoothschedule2/smoothschedule
+
+# Run all calendar permission tests
+docker compose -f docker-compose.local.yml exec django pytest \
+  schedule/tests/test_calendar_sync_permissions.py -v
+
+# Run specific test
+docker compose -f docker-compose.local.yml exec django pytest \
+  schedule/tests/test_calendar_sync_permissions.py::CalendarSyncPermissionTests::test_calendar_list_without_permission -v
+```
+
+### Django Shell Testing
+```bash
+cd /home/poduck/Desktop/smoothschedule2/smoothschedule
+
+docker compose -f docker-compose.local.yml exec django python manage.py shell
+
+# In Django shell:
+from core.models import Tenant
+from smoothschedule.users.models import User
+
+tenant = Tenant.objects.get(schema_name='demo')
+print(tenant.has_feature('can_use_calendar_sync'))  # False initially
+
+# Enable it
+tenant.can_use_calendar_sync = True
+tenant.save()
+
+print(tenant.has_feature('can_use_calendar_sync'))  # True now
+```
+
+## Integration with Existing Systems
+
+### Works with Subscription Plans
+```python
+# Tenant can get permission from subscription_plan.permissions
+subscription_plan.permissions = {
+    'can_use_calendar_sync': True,
+    'can_use_webhooks': True,
+    ...
+}
+```
+
+### Works with Platform Admin Invitations
+```python
+# TenantInvitation can grant this permission
+invitation = TenantInvitation(
+    can_use_calendar_sync=True,
+    ...
+)
+```
+
+### Works with User Role-Based Access
+- Permission is at tenant level, not user level
+- All users in a tenant with enabled feature can use it
+- Can be further restricted by user roles if needed
+
+## Next Steps for Full Implementation
+
+While the permission framework is complete, the following features need implementation:
+
+1. **Google Calendar API Integration**
+   - Fetch events from Google Calendar API using OAuth token
+   - Map Google Calendar events to Event model
+   - Handle recurring events
+   - Sync deleted events
+
+2. **Microsoft Calendar API Integration**
+   - Fetch events from Microsoft Graph API
+   - Handle Outlook calendar format
+
+3. **Conflict Resolution**
+   - Handle overlapping events from multiple calendars
+   - Update vs. create decision logic
+
+4. **Bi-directional Sync**
+   - Push events back to calendar after scheduling
+   - Handle edit/delete synchronization
+
+5. **UI/Frontend Integration**
+   - Calendar selection dialog
+   - Sync status display
+   - Calendar disconnect confirmation
+
+## Rollback Plan
+
+If needed to rollback:
+
+1. **Revert database migration:**
+```bash
+docker compose -f docker-compose.local.yml exec django python manage.py migrate core 0015_tenant_can_create_plugins_tenant_can_use_webhooks
+```
+
+2. **Revert code changes:**
+- Remove lines from core/models.py (can_use_calendar_sync field)
+- Remove calendar check from oauth_views.py
+- Remove calendar_sync_views.py
+- Remove calendar_sync_urls.py
+
+3. **Revert permissions.py:**
+- Remove 'can_use_calendar_sync' from FEATURE_NAMES
+
+## Summary of Changes
+
+| File | Type | Change |
+|------|------|--------|
+| core/models.py | Modified | Added can_use_calendar_sync field to Tenant |
+| core/migrations/0016_tenant_can_use_calendar_sync.py | New | Database migration |
+| core/permissions.py | Modified | Added can_use_calendar_sync to FEATURE_NAMES |
+| core/oauth_views.py | Modified | Added permission check for calendar OAuth |
+| schedule/calendar_sync_views.py | New | Calendar sync API views |
+| schedule/calendar_sync_urls.py | New | Calendar sync URL configuration |
+| schedule/tests/test_calendar_sync_permissions.py | New | Test suite (20+ tests) |
+| CALENDAR_SYNC_INTEGRATION.md | New | Integration guide |
+
+## File Locations
+
+All files are located in: `/home/poduck/Desktop/smoothschedule2/smoothschedule/`
+
+**Key files:**
+- Models: `core/models.py` (line 194-197)
+- Migration: `core/migrations/0016_tenant_can_use_calendar_sync.py`
+- Permissions: `core/permissions.py` (line 354)
+- OAuth Views: `core/oauth_views.py` (lines 27, 92-98, 241-247)
+- Calendar Views: `schedule/calendar_sync_views.py` (entire file)
+- Calendar URLs: `schedule/calendar_sync_urls.py` (entire file)
+- Tests: `schedule/tests/test_calendar_sync_permissions.py` (entire file)
+- Documentation: `CALENDAR_SYNC_INTEGRATION.md`
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -69,6 +69,143 @@ docker compose -f docker-compose.local.yml exec django python manage.py <command
 | `schedule` | `smoothschedule/smoothschedule/schedule/` | Resources, Events, Services |
 | `users` | `smoothschedule/smoothschedule/users/` | Authentication, User model |
 | `tenants` | `smoothschedule/smoothschedule/tenants/` | Multi-tenancy (Business model) |
+| `core` | `smoothschedule/core/` | Shared mixins, permissions, middleware |
+| `payments` | `smoothschedule/payments/` | Stripe integration, subscriptions |
+| `platform_admin` | `smoothschedule/platform_admin/` | Platform administration |
+
+## Core Mixins & Base Classes
+
+Located in `smoothschedule/core/mixins.py`. Use these to avoid code duplication.
+
+### Permission Classes
+
+```python
+from core.mixins import DenyStaffWritePermission, DenyStaffAllAccessPermission, DenyStaffListPermission
+
+class MyViewSet(ModelViewSet):
+    # Block write operations for staff (GET allowed)
+    permission_classes = [IsAuthenticated, DenyStaffWritePermission]
+
+    # Block ALL operations for staff
+    permission_classes = [IsAuthenticated, DenyStaffAllAccessPermission]
+
+    # Block list/create/update/delete but allow retrieve
+    permission_classes = [IsAuthenticated, DenyStaffListPermission]
+```
+
+#### Per-User Permission Overrides
+
+Staff permissions can be overridden on a per-user basis using the `user.permissions` JSONField.
+Permission keys are auto-derived from the view's basename or model name:
+
+| Permission Class | Auto-derived Key | Example |
+|-----------------|------------------|---------|
+| `DenyStaffWritePermission` | `can_write_{basename}` | `can_write_resources` |
+| `DenyStaffAllAccessPermission` | `can_access_{basename}` | `can_access_services` |
+| `DenyStaffListPermission` | `can_list_{basename}` or `can_access_{basename}` | `can_list_customers` |
+
+**Current ViewSet permission keys:**
+
+| ViewSet | Permission Class | Override Key |
+|---------|-----------------|--------------|
+| `ResourceViewSet` | `DenyStaffAllAccessPermission` | `can_access_resources` |
+| `ServiceViewSet` | `DenyStaffAllAccessPermission` | `can_access_services` |
+| `CustomerViewSet` | `DenyStaffListPermission` | `can_list_customers` or `can_access_customers` |
+| `ScheduledTaskViewSet` | `DenyStaffAllAccessPermission` | `can_access_scheduled-tasks` |
+
+**Granting a specific staff member access:**
+```bash
+# Open Django shell
+docker compose -f docker-compose.local.yml exec django python manage.py shell
+```
+
+```python
+from smoothschedule.users.models import User
+
+# Find the staff member
+staff = User.objects.get(email='john@example.com')
+
+# Grant read access to resources
+staff.permissions['can_access_resources'] = True
+staff.save()
+
+# Or grant list access to customers (but not full CRUD)
+staff.permissions['can_list_customers'] = True
+staff.save()
+```
+
+**Custom permission keys (optional):**
+```python
+class ResourceViewSet(ModelViewSet):
+    permission_classes = [IsAuthenticated, DenyStaffAllAccessPermission]
+    # Override the auto-derived key
+    staff_access_permission_key = 'can_manage_equipment'
+```
+
+Then grant via: `staff.permissions['can_manage_equipment'] = True`
+
+### QuerySet Mixins
+
+```python
+from core.mixins import TenantFilteredQuerySetMixin, UserTenantFilteredMixin
+
+# For tenant-scoped models (automatic django-tenants filtering)
+class ResourceViewSet(TenantFilteredQuerySetMixin, ModelViewSet):
+    queryset = Resource.objects.all()
+    deny_staff_queryset = True  # Optional: also filter staff at queryset level
+
+    def filter_queryset_for_tenant(self, queryset):
+        # Override for custom filtering
+        return queryset.filter(is_active=True)
+
+# For User model (shared schema, needs explicit tenant filter)
+class CustomerViewSet(UserTenantFilteredMixin, ModelViewSet):
+    queryset = User.objects.filter(role=User.Role.CUSTOMER)
+```
+
+### Feature Permission Mixins
+
+```python
+from core.mixins import PluginFeatureRequiredMixin, TaskFeatureRequiredMixin
+
+# Checks can_use_plugins feature on list/retrieve/create
+class PluginViewSet(PluginFeatureRequiredMixin, ModelViewSet):
+    pass
+
+# Checks both can_use_plugins AND can_use_tasks
+class ScheduledTaskViewSet(TaskFeatureRequiredMixin, TenantFilteredQuerySetMixin, ModelViewSet):
+    pass
+```
+
+### Base API Views (for non-ViewSet views)
+
+```python
+from rest_framework.views import APIView
+from core.mixins import TenantAPIView, TenantRequiredAPIView
+
+# Optional tenant - use self.get_tenant()
+class MyView(TenantAPIView, APIView):
+    def get(self, request):
+        tenant = self.get_tenant()  # May be None
+        return self.success_response({'data': 'value'})
+        # or: return self.error_response('Something went wrong', status_code=400)
+
+# Required tenant - self.tenant always available
+class MyTenantView(TenantRequiredAPIView, APIView):
+    def get(self, request):
+        # self.tenant is guaranteed to exist (returns 400 if missing)
+        return Response({'name': self.tenant.name})
+```
+
+### Helper Methods Available
+
+| Method | Description |
+|--------|-------------|
+| `self.get_tenant()` | Get tenant from request (may be None) |
+| `self.get_tenant_or_error()` | Returns (tenant, error_response) tuple |
+| `self.error_response(msg, status_code)` | Standard error response |
+| `self.success_response(data, status_code)` | Standard success response |
+| `self.check_feature(key, name)` | Check feature permission, returns error or None |

 ## Common Tasks

@@ -100,3 +237,66 @@ curl -s "http://lvh.me:8000/api/resources/" | jq
 ## Git Branch
 Currently on: `feature/platform-superuser-ui`
 Main branch: `main`
+
+## Production Deployment
+
+### Quick Deploy
+```bash
+# From your local machine
+cd /home/poduck/Desktop/smoothschedule2
+./deploy.sh poduck@smoothschedule.com
+```
+
+### Initial Server Setup (one-time)
+```bash
+# Setup server dependencies
+ssh poduck@smoothschedule.com 'bash -s' < server-setup.sh
+
+# Setup DigitalOcean Spaces
+ssh poduck@smoothschedule.com
+./setup-spaces.sh
+```
+
+### Production URLs
+- **Main site:** `https://smoothschedule.com`
+- **Platform dashboard:** `https://platform.smoothschedule.com`
+- **Tenant subdomains:** `https://*.smoothschedule.com`
+- **Flower (Celery):** `https://smoothschedule.com:5555`
+
+### Production Management
+```bash
+# SSH into server
+ssh poduck@smoothschedule.com
+
+# Navigate to project
+cd ~/smoothschedule
+
+# View logs
+docker compose -f docker-compose.production.yml logs -f
+
+# Run migrations
+docker compose -f docker-compose.production.yml exec django python manage.py migrate
+
+# Create superuser
+docker compose -f docker-compose.production.yml exec django python manage.py createsuperuser
+
+# Restart services
+docker compose -f docker-compose.production.yml restart
+
+# View status
+docker compose -f docker-compose.production.yml ps
+```
+
+### Environment Variables
+Production environment configured in:
+- **Backend:** `smoothschedule/.envs/.production/.django`
+- **Database:** `smoothschedule/.envs/.production/.postgres`
+- **Frontend:** `frontend/.env.production`
+
+### DigitalOcean Spaces
+- **Bucket:** `smoothschedule`
+- **Region:** `nyc3`
+- **Endpoint:** `https://nyc3.digitaloceanspaces.com`
+- **Public URL:** `https://smoothschedule.nyc3.digitaloceanspaces.com`
+
+See [DEPLOYMENT.md](DEPLOYMENT.md) for detailed deployment guide.
--- a/DATA_EXPORT_IMPLEMENTATION.md
+++ b/DATA_EXPORT_IMPLEMENTATION.md
@@ -0,0 +1,155 @@
+# Data Export API Implementation Summary
+
+## Overview
+
+Implemented a comprehensive data export feature for the SmoothSchedule Django backend that allows businesses to export their data in CSV and JSON formats. The feature is properly gated by subscription plan permissions.
+
+## Implementation Date
+December 2, 2025
+
+## Files Created/Modified
+
+### New Files Created
+
+1. **`/home/poduck/Desktop/smoothschedule2/smoothschedule/schedule/export_views.py`**
+   - Main export API implementation
+   - Contains `ExportViewSet` with 4 export endpoints
+   - Implements permission checking via `HasExportDataPermission`
+   - Supports both CSV and JSON formats
+   - ~450 lines of code
+
+2. **`/home/poduck/Desktop/smoothschedule2/smoothschedule/schedule/test_export.py`**
+   - Comprehensive test suite for export API
+   - Tests all endpoints, formats, filters
+   - Tests permission gating
+   - ~200 lines of test code
+
+3. **`/home/poduck/Desktop/smoothschedule2/smoothschedule/DATA_EXPORT_API.md`**
+   - Complete API documentation
+   - Request/response examples
+   - Query parameter documentation
+   - Error handling documentation
+   - ~300 lines of documentation
+
+4. **`/home/poduck/Desktop/smoothschedule2/test_export_api.py`**
+   - Standalone test script for manual API testing
+   - Can be run outside of Django test framework
+
+### Modified Files
+
+1. **`/home/poduck/Desktop/smoothschedule2/smoothschedule/schedule/urls.py`**
+   - Added import for `ExportViewSet`
+   - Registered export viewset with router
+
+2. **`/home/poduck/Desktop/smoothschedule2/smoothschedule/core/models.py`**
+   - Added `can_export_data` BooleanField to Tenant model
+   - Field defaults to `False` (permission must be explicitly granted)
+   - Field already had migration applied (0014_tenant_can_export_data_tenant_subscription_plan.py)
+
+## API Endpoints
+
+All endpoints are accessible at the base path `/export/` (not `/api/export/` since schedule URLs are at root level).
+
+### 1. Export Appointments
+- **URL**: `GET /export/appointments/`
+- **Query Params**: `format`, `start_date`, `end_date`, `status`
+- **Formats**: CSV, JSON
+- **Data**: Event/appointment information with customer and resource details
+
+### 2. Export Customers
+- **URL**: `GET /export/customers/`
+- **Query Params**: `format`, `status`
+- **Formats**: CSV, JSON
+- **Data**: Customer list with contact information
+
+### 3. Export Resources
+- **URL**: `GET /export/resources/`
+- **Query Params**: `format`, `is_active`
+- **Formats**: CSV, JSON
+- **Data**: Resource list (staff, rooms, equipment)
+
+### 4. Export Services
+- **URL**: `GET /export/services/`
+- **Query Params**: `format`, `is_active`
+- **Formats**: CSV, JSON
+- **Data**: Service catalog with pricing and duration
+
+## Security Features
+
+### Permission Gating
+- All endpoints check `tenant.can_export_data` permission
+- Returns 403 Forbidden if permission not granted
+- Clear error messages guide users to upgrade their subscription
+
+### Authentication
+- All endpoints require authentication (IsAuthenticated permission)
+- Returns 401 Unauthorized for unauthenticated requests
+
+### Data Isolation
+- Leverages django-tenants automatic schema isolation
+- Users can only export data from their own tenant
+- No risk of cross-tenant data leakage
+
+## Features
+
+### Format Support
+- **JSON**: Includes metadata (count, filters, export timestamp)
+- **CSV**: Clean, spreadsheet-ready format with proper headers
+- Both formats include Content-Disposition header for automatic downloads
+
+### Filtering
+- **Date Range**: Filter appointments by start_date and end_date
+- **Status**: Filter by active/inactive status for various entities
+- **Query Parameters**: Flexible, URL-based filtering
+
+### File Naming
+- Timestamped filenames for uniqueness
+- Format: `{data_type}_{YYYYMMDD}_{HHMMSS}.{format}`
+- Example: `appointments_20241202_103000.csv`
+
+## Testing
+
+Run unit tests with:
+```bash
+docker compose -f docker-compose.local.yml exec django python manage.py test schedule.test_export
+```
+
+## Integration
+
+### Enable Export for a Tenant
+
+```python
+# In Django shell or admin
+from core.models import Tenant
+
+tenant = Tenant.objects.get(schema_name='your_tenant')
+tenant.can_export_data = True
+tenant.save()
+```
+
+### Example API Calls
+
+```bash
+# JSON export
+curl -H "Authorization: Bearer YOUR_TOKEN" \
+  "http://lvh.me:8000/export/appointments/?format=json"
+
+# CSV export with date range
+curl -H "Authorization: Bearer YOUR_TOKEN" \
+  "http://lvh.me:8000/export/appointments/?format=csv&start_date=2024-01-01T00:00:00Z&end_date=2024-12-31T23:59:59Z"
+```
+
+## Production Checklist
+
+- [x] Permission gating implemented
+- [x] Authentication required
+- [x] Unit tests written
+- [x] Documentation created
+- [x] Database migration applied
+- [ ] Rate limiting configured
+- [ ] Frontend integration completed
+- [ ] Load testing performed
+
+---
+
+**Implementation completed successfully!** ✓
--- a/DEPLOYMENT.md
+++ b/DEPLOYMENT.md
@@ -0,0 +1,449 @@
+# SmoothSchedule Production Deployment Guide
+
+## Prerequisites
+
+### Server Requirements
+- Ubuntu/Debian Linux server
+- Minimum 2GB RAM, 20GB disk space
+- Docker and Docker Compose installed
+- Domain name pointed to server IP: `smoothschedule.com`
+- DNS configured with wildcard subdomain: `*.smoothschedule.com`
+
+### Required Accounts/Services
+- [x] DigitalOcean Spaces (already configured)
+  - Access Key: DO801P4R8QXYMY4CE8WZ
+  - Bucket: smoothschedule
+  - Region: nyc3
+- [ ] Email service (optional - Mailgun or SMTP)
+- [ ] Sentry (optional - error tracking)
+
+## Pre-Deployment Checklist
+
+### 1. DigitalOcean Spaces Setup
+
+```bash
+# Create the bucket (if not already created)
+aws --profile do-tor1 s3 mb s3://smoothschedule
+
+# Set bucket to public-read for static/media files
+aws --profile do-tor1 s3api put-bucket-acl \
+  --bucket smoothschedule \
+  --acl public-read
+
+# Configure CORS (for frontend uploads)
+cat > cors.json <<EOF
+{
+  "CORSRules": [
+    {
+      "AllowedOrigins": ["https://smoothschedule.com", "https://*.smoothschedule.com"],
+      "AllowedMethods": ["GET", "PUT", "POST", "DELETE", "HEAD"],
+      "AllowedHeaders": ["*"],
+      "MaxAgeSeconds": 3000
+    }
+  ]
+}
+EOF
+
+aws --profile do-tor1 s3api put-bucket-cors \
+  --bucket smoothschedule \
+  --cors-configuration file://cors.json
+```
+
+### 2. DNS Configuration
+
+Configure these DNS records at your domain registrar:
+
+```
+Type    Name                Value                TTL
+A       smoothschedule.com  YOUR_SERVER_IP      300
+A       *.smoothschedule.com YOUR_SERVER_IP     300
+CNAME   www                 smoothschedule.com  300
+```
+
+### 3. Environment Variables Review
+
+**Backend** (`.envs/.production/.django`):
+- [x] DJANGO_SECRET_KEY - Set
+- [x] DJANGO_ALLOWED_HOSTS - Set to `.smoothschedule.com`
+- [x] DJANGO_AWS_ACCESS_KEY_ID - Set
+- [x] DJANGO_AWS_SECRET_ACCESS_KEY - Set
+- [x] DJANGO_AWS_STORAGE_BUCKET_NAME - Set to `smoothschedule`
+- [x] DJANGO_AWS_S3_ENDPOINT_URL - Set to `https://nyc3.digitaloceanspaces.com`
+- [x] DJANGO_AWS_S3_REGION_NAME - Set to `nyc3`
+- [ ] MAILGUN_API_KEY - Optional (for email)
+- [ ] MAILGUN_DOMAIN - Optional (for email)
+- [ ] SENTRY_DSN - Optional (for error tracking)
+
+**Frontend** (`.env.production`):
+- [x] VITE_API_URL - Set to `https://smoothschedule.com/api`
+
+## Deployment Steps
+
+### Step 1: Server Preparation
+
+```bash
+# SSH into production server
+ssh poduck@smoothschedule.com
+
+# Install Docker (if not already installed)
+curl -fsSL https://get.docker.com -o get-docker.sh
+sudo sh get-docker.sh
+sudo usermod -aG docker $USER
+
+# Install Docker Compose
+sudo curl -L "https://github.com/docker/compose/releases/latest/download/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
+sudo chmod +x /usr/local/bin/docker-compose
+
+# Logout and login again for group changes to take effect
+exit
+ssh poduck@smoothschedule.com
+```
+
+### Step 2: Deploy Backend (Django)
+
+```bash
+# Create deployment directory
+mkdir -p ~/smoothschedule
+cd ~/smoothschedule
+
+# Clone the repository (or upload files via rsync/git)
+# Option A: Clone from Git
+git clone <your-repo-url> .
+git checkout main
+
+# Option B: Copy from local machine
+# From your local machine:
+# rsync -avz --exclude 'node_modules' --exclude '.venv' --exclude '__pycache__' \
+#   /home/poduck/Desktop/smoothschedule2/ poduck@smoothschedule.com:~/smoothschedule/
+
+# Navigate to backend
+cd smoothschedule
+
+# Build and start containers
+docker compose -f docker-compose.production.yml build
+docker compose -f docker-compose.production.yml up -d
+
+# Wait for containers to start
+sleep 10
+
+# Check logs
+docker compose -f docker-compose.production.yml logs -f
+```
+
+### Step 3: Database Initialization
+
+```bash
+# Run migrations
+docker compose -f docker-compose.production.yml exec django python manage.py migrate
+
+# Create public schema (for multi-tenancy)
+docker compose -f docker-compose.production.yml exec django python manage.py migrate_schemas --shared
+
+# Create superuser
+docker compose -f docker-compose.production.yml exec django python manage.py createsuperuser
+
+# Collect static files (uploads to DigitalOcean Spaces)
+docker compose -f docker-compose.production.yml exec django python manage.py collectstatic --noinput
+```
+
+### Step 4: Create Initial Tenant
+
+```bash
+# Access Django shell
+docker compose -f docker-compose.production.yml exec django python manage.py shell
+
+# In the shell, create your first business tenant:
+```
+
+```python
+from core.models import Business
+from django.contrib.auth import get_user_model
+
+User = get_user_model()
+
+# Create a business
+business = Business.objects.create(
+    name="Demo Business",
+    subdomain="demo",
+    schema_name="demo",
+)
+
+# Verify it was created
+print(f"Created business: {business.name} at {business.subdomain}.smoothschedule.com")
+
+# Create a business owner
+owner = User.objects.create_user(
+    username="demo_owner",
+    email="owner@demo.com",
+    password="your_password_here",
+    role="owner",
+    business_subdomain="demo"
+)
+
+print(f"Created owner: {owner.username}")
+exit()
+```
+
+### Step 5: Deploy Frontend
+
+```bash
+# On your local machine
+cd /home/poduck/Desktop/smoothschedule2/frontend
+
+# Install dependencies
+npm install
+
+# Build for production
+npm run build
+
+# Upload build files to server
+rsync -avz dist/ poduck@smoothschedule.com:~/smoothschedule-frontend/
+
+# On the server, set up nginx or serve via backend
+```
+
+**Option A: Serve via Django (simpler)**
+
+The Django `collectstatic` command already handles static files. For serving the frontend:
+
+1. Copy frontend build to Django static folder
+2. Django will serve it via Traefik
+
+**Option B: Separate Nginx (recommended for production)**
+
+```bash
+# Install nginx
+sudo apt-get update
+sudo apt-get install -y nginx
+
+# Create nginx config
+sudo nano /etc/nginx/sites-available/smoothschedule
+```
+
+```nginx
+server {
+    listen 80;
+    server_name smoothschedule.com *.smoothschedule.com;
+
+    # Frontend (React)
+    location / {
+        root /home/poduck/smoothschedule-frontend;
+        try_files $uri $uri/ /index.html;
+    }
+
+    # Backend API (proxy to Traefik)
+    location /api {
+        proxy_pass http://localhost:80;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+
+    location /admin {
+        proxy_pass http://localhost:80;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+    }
+}
+```
+
+```bash
+# Enable site
+sudo ln -s /etc/nginx/sites-available/smoothschedule /etc/nginx/sites-enabled/
+sudo nginx -t
+sudo systemctl reload nginx
+```
+
+### Step 6: SSL/HTTPS Setup
+
+Traefik is configured to automatically obtain Let's Encrypt SSL certificates. Ensure:
+
+1. DNS is pointed to your server
+2. Ports 80 and 443 are accessible
+3. Wait for Traefik to obtain certificates (check logs)
+
+```bash
+# Monitor Traefik logs
+docker compose -f docker-compose.production.yml logs -f traefik
+
+# You should see:
+# "Certificate obtained for domain smoothschedule.com"
+```
+
+### Step 7: Verify Deployment
+
+```bash
+# Check all containers are running
+docker compose -f docker-compose.production.yml ps
+
+# Should show:
+# - django (running)
+# - postgres (running)
+# - redis (running)
+# - traefik (running)
+# - celeryworker (running)
+# - celerybeat (running)
+# - flower (running)
+
+# Test API endpoint
+curl https://smoothschedule.com/api/
+
+# Test admin
+curl https://smoothschedule.com/admin/
+
+# Access in browser:
+# https://smoothschedule.com - Main site
+# https://platform.smoothschedule.com - Platform dashboard
+# https://demo.smoothschedule.com - Demo business
+# https://smoothschedule.com:5555 - Flower (Celery monitoring)
+```
+
+## Post-Deployment
+
+### 1. Monitoring
+
+```bash
+# View logs
+docker compose -f docker-compose.production.yml logs -f
+
+# View specific service logs
+docker compose -f docker-compose.production.yml logs -f django
+docker compose -f docker-compose.production.yml logs -f postgres
+
+# Monitor Celery tasks via Flower
+# Access: https://smoothschedule.com:5555
+# Login with credentials from .envs/.production/.django
+```
+
+### 2. Backups
+
+```bash
+# Database backup
+docker compose -f docker-compose.production.yml exec postgres backup
+
+# List backups
+docker compose -f docker-compose.production.yml exec postgres backups
+
+# Restore from backup
+docker compose -f docker-compose.production.yml exec postgres restore backup_filename.sql.gz
+```
+
+### 3. Updates
+
+```bash
+# Pull latest code
+cd ~/smoothschedule/smoothschedule
+git pull origin main
+
+# Rebuild and restart
+docker compose -f docker-compose.production.yml build
+docker compose -f docker-compose.production.yml up -d
+
+# Run migrations
+docker compose -f docker-compose.production.yml exec django python manage.py migrate
+
+# Collect static files
+docker compose -f docker-compose.production.yml exec django python manage.py collectstatic --noinput
+```
+
+## Troubleshooting
+
+### SSL Certificate Issues
+```bash
+# Check Traefik logs
+docker compose -f docker-compose.production.yml logs traefik
+
+# Verify DNS is pointing to server
+dig smoothschedule.com +short
+
+# Ensure ports are open
+sudo ufw allow 80
+sudo ufw allow 443
+```
+
+### Database Connection Issues
+```bash
+# Check PostgreSQL is running
+docker compose -f docker-compose.production.yml ps postgres
+
+# Check database logs
+docker compose -f docker-compose.production.yml logs postgres
+
+# Verify connection
+docker compose -f docker-compose.production.yml exec django python manage.py dbshell
+```
+
+### Static Files Not Loading
+```bash
+# Verify DigitalOcean Spaces credentials
+docker compose -f docker-compose.production.yml exec django python manage.py shell
+>>> from django.conf import settings
+>>> print(settings.AWS_ACCESS_KEY_ID)
+>>> print(settings.AWS_STORAGE_BUCKET_NAME)
+
+# Re-collect static files
+docker compose -f docker-compose.production.yml exec django python manage.py collectstatic --noinput
+
+# Check Spaces bucket
+aws --profile do-tor1 s3 ls s3://smoothschedule/static/
+aws --profile do-tor1 s3 ls s3://smoothschedule/media/
+```
+
+### Celery Not Running Tasks
+```bash
+# Check Celery worker logs
+docker compose -f docker-compose.production.yml logs celeryworker
+
+# Access Flower dashboard
+# https://smoothschedule.com:5555
+
+# Restart Celery
+docker compose -f docker-compose.production.yml restart celeryworker celerybeat
+```
+
+## Security Checklist
+
+- [x] SSL/HTTPS enabled via Let's Encrypt
+- [x] DJANGO_SECRET_KEY set to random value
+- [x] Database password set to random value
+- [x] Flower dashboard password protected
+- [ ] Firewall configured (UFW or iptables)
+- [ ] SSH key-based authentication enabled
+- [ ] Fail2ban installed for brute-force protection
+- [ ] Regular backups configured
+- [ ] Sentry error monitoring (optional)
+
+## Performance Optimization
+
+1. **Enable CDN for DigitalOcean Spaces**
+   - In Spaces settings, enable CDN
+   - Update `DJANGO_AWS_S3_CUSTOM_DOMAIN=smoothschedule.nyc3.cdn.digitaloceanspaces.com`
+
+2. **Scale Gunicorn Workers**
+   - Adjust `WEB_CONCURRENCY` in `.envs/.production/.django`
+   - Formula: (2 x CPU cores) + 1
+
+3. **Add Redis Persistence**
+   - Update docker-compose.production.yml redis config
+   - Enable AOF persistence
+
+4. **Database Connection Pooling**
+   - Already configured via `CONN_MAX_AGE=60`
+
+## Maintenance
+
+### Weekly
+- Review error logs
+- Check disk space: `df -h`
+- Monitor Flower dashboard for failed tasks
+
+### Monthly
+- Update Docker images: `docker compose pull`
+- Update dependencies: `uv sync`
+- Review backups
+
+### As Needed
+- Scale resources (CPU/RAM)
+- Add more Celery workers
+- Optimize database queries
--- a/IMPLEMENTATION_COMPLETE.md
+++ b/IMPLEMENTATION_COMPLETE.md
@@ -0,0 +1,286 @@
+# Advanced Analytics Implementation - Complete
+
+## Status: ✅ COMPLETE
+
+All files have been created and configured successfully. The advanced analytics feature is fully implemented with permission-based access control.
+
+## What Was Implemented
+
+### New Analytics App
+- **Location:** `/smoothschedule/analytics/`
+- **Endpoints:** 3 analytics endpoints with permission gating
+- **Permissions:** All endpoints gated by `advanced_analytics` permission
+- **Tests:** 10 comprehensive test cases
+
+### 3 Analytics Endpoints
+
+1. **Dashboard** (`GET /api/analytics/analytics/dashboard/`)
+   - Summary statistics
+   - Total appointments, resources, services
+   - Peak times and trends
+
+2. **Appointments** (`GET /api/analytics/analytics/appointments/`)
+   - Detailed appointment analytics
+   - Filtering by status, service, resource, date range
+   - Status breakdown and trend analysis
+
+3. **Revenue** (`GET /api/analytics/analytics/revenue/`)
+   - Payment analytics
+   - Requires both `advanced_analytics` AND `can_accept_payments`
+   - Revenue by service and daily breakdown
+
+## Permission Gating
+
+All endpoints use:
+- **IsAuthenticated** - Requires login
+- **HasFeaturePermission('advanced_analytics')** - Requires subscription plan permission
+
+Permission chain:
+```
+Request → IsAuthenticated (401) → HasFeaturePermission (403) → View
+```
+
+## Files Created (11 total)
+
+### Core App Files
+```
+analytics/
+├── __init__.py
+├── admin.py
+├── apps.py
+├── migrations/__init__.py
+├── views.py (350+ lines, 3 endpoints)
+├── serializers.py (80+ lines)
+├── urls.py
+└── tests.py (260+ lines, 10 test cases)
+```
+
+### Documentation
+```
+analytics/
+├── README.md (Full API documentation)
+└── IMPLEMENTATION_GUIDE.md (Developer guide)
+
+Project Root:
+├── ANALYTICS_CHANGES.md (Change summary)
+└── analytics/ANALYTICS_IMPLEMENTATION_SUMMARY.md (Complete overview)
+```
+
+## Files Modified (3 total)
+
+### 1. `/smoothschedule/core/permissions.py`
+- Added to FEATURE_NAMES dictionary:
+  - 'advanced_analytics': 'Advanced Analytics'
+  - 'advanced_reporting': 'Advanced Reporting'
+
+### 2. `/smoothschedule/config/urls.py`
+- Added: `path("", include("analytics.urls"))`
+
+### 3. `/smoothschedule/config/settings/base.py`
+- Added "analytics" to LOCAL_APPS
+
+## How to Use
+
+### Enable Analytics for a Plan
+
+**Option 1: Django Admin**
+```
+1. Go to /admin/platform_admin/subscriptionplan/
+2. Edit a plan
+3. Add to Permissions JSON: "advanced_analytics": true
+4. Save
+```
+
+**Option 2: Django Shell**
+```bash
+docker compose -f docker-compose.local.yml exec django python manage.py shell
+
+from platform_admin.models import SubscriptionPlan
+plan = SubscriptionPlan.objects.get(name='Professional')
+perms = plan.permissions or {}
+perms['advanced_analytics'] = True
+plan.permissions = perms
+plan.save()
+```
+
+### Test the Endpoints
+
+```bash
+# Get auth token
+TOKEN=$(curl -X POST http://lvh.me:8000/auth-token/ \
+  -H "Content-Type: application/json" \
+  -d '{"username":"test@example.com","password":"password"}' | jq -r '.token')
+
+# Get dashboard analytics
+curl -H "Authorization: Token $TOKEN" \
+  http://lvh.me:8000/api/analytics/analytics/dashboard/ | jq
+
+# Get appointment analytics
+curl -H "Authorization: Token $TOKEN" \
+  "http://lvh.me:8000/api/analytics/analytics/appointments/?days=7" | jq
+```
+
+### Run Tests
+
+```bash
+# All tests
+docker compose -f docker-compose.local.yml exec django pytest analytics/tests.py -v
+
+# Specific test
+docker compose -f docker-compose.local.yml exec django pytest analytics/tests.py::TestAnalyticsPermissions::test_analytics_denied_without_permission -v
+```
+
+## Verification Checklist
+
+- [x] Analytics app created with proper structure
+- [x] Three endpoints implemented (dashboard, appointments, revenue)
+- [x] Permission gating with HasFeaturePermission
+- [x] Advanced analytics permission added to FEATURE_NAMES
+- [x] URL routing configured
+- [x] App registered in INSTALLED_APPS
+- [x] Serializers created for response validation
+- [x] Comprehensive test suite (10 tests)
+- [x] Full API documentation
+- [x] Implementation guide for developers
+- [x] All files in place and verified
+
+## Key Features
+
+✓ **Permission-Based Access Control**
+  - Uses standard HasFeaturePermission pattern
+  - Supports both direct fields and plan JSON
+  - User-friendly error messages
+
+✓ **Three Functional Endpoints**
+  - Dashboard: Summary statistics
+  - Appointments: Detailed analytics with filters
+  - Revenue: Payment analytics (dual-permission)
+
+✓ **Comprehensive Testing**
+  - 10 test cases covering all scenarios
+  - Permission checks verified
+  - Data calculations validated
+
+✓ **Complete Documentation**
+  - API documentation with examples
+  - Implementation guide
+  - Code comments and docstrings
+  - Test examples
+
+✓ **No Database Migrations**
+  - Analytics app has no models
+  - Uses existing models (Event, Service, Resource)
+  - Calculated on-demand
+
+## Next Steps
+
+1. **Code Review** - Review the implementation
+2. **Testing** - Run test suite: `pytest analytics/tests.py -v`
+3. **Enable Plans** - Add permission to subscription plans
+4. **Deploy** - Push to production
+5. **Monitor** - Watch for usage and issues
+
+## Documentation Files
+
+- **README.md** - Complete API documentation with usage examples
+- **IMPLEMENTATION_GUIDE.md** - Developer guide with setup instructions
+- **ANALYTICS_CHANGES.md** - Summary of all changes made
+- **ANALYTICS_IMPLEMENTATION_SUMMARY.md** - Detailed implementation overview
+
+## Project Structure
+
+```
+/home/poduck/Desktop/smoothschedule2/
+├── smoothschedule/
+│   ├── analytics/                          ← NEW APP
+│   │   ├── __init__.py
+│   │   ├── admin.py
+│   │   ├── apps.py
+│   │   ├── views.py                        ← 350+ lines
+│   │   ├── serializers.py
+│   │   ├── urls.py
+│   │   ├── tests.py                        ← 10 test cases
+│   │   ├── migrations/
+│   │   ├── README.md                       ← Full API docs
+│   │   └── IMPLEMENTATION_GUIDE.md          ← Developer guide
+│   ├── core/
+│   │   └── permissions.py                  ← MODIFIED
+│   ├── config/
+│   │   ├── urls.py                         ← MODIFIED
+│   │   └── settings/base.py                ← MODIFIED
+│   └── [other apps...]
+│
+├── ANALYTICS_CHANGES.md                    ← Change summary
+└── IMPLEMENTATION_COMPLETE.md              ← This file
+```
+
+## Statistics
+
+| Metric | Value |
+|--------|-------|
+| New Files Created | 11 |
+| Files Modified | 3 |
+| New Lines of Code | 900+ |
+| API Endpoints | 3 |
+| Test Cases | 10 |
+| Documentation Pages | 4 |
+| Query Parameters Supported | 6 |
+
+## Response Examples
+
+### Dashboard (200 OK)
+```json
+{
+    "total_appointments_this_month": 42,
+    "total_appointments_all_time": 1250,
+    "active_resources_count": 5,
+    "active_services_count": 3,
+    "upcoming_appointments_count": 8,
+    "average_appointment_duration_minutes": 45.5,
+    "peak_booking_day": "Friday",
+    "peak_booking_hour": 14,
+    "period": {...}
+}
+```
+
+### Permission Denied (403 Forbidden)
+```json
+{
+    "detail": "Your current plan does not include Advanced Analytics. Please upgrade your subscription to access this feature."
+}
+```
+
+### Unauthorized (401 Unauthorized)
+```json
+{
+    "detail": "Authentication credentials were not provided."
+}
+```
+
+## Implementation Quality
+
+- ✓ Follows DRF best practices
+- ✓ Uses existing permission patterns (HasFeaturePermission)
+- ✓ Comprehensive error handling
+- ✓ Full test coverage
+- ✓ Clear documentation
+- ✓ Code comments
+- ✓ Consistent with project style
+
+## Support
+
+For questions or issues:
+
+1. **API Usage** → See `analytics/README.md`
+2. **Setup & Debugging** → See `analytics/IMPLEMENTATION_GUIDE.md`
+3. **Permission Logic** → See `core/permissions.py`
+4. **Test Examples** → See `analytics/tests.py`
+
+---
+
+**Status: Ready for Production** ✅
+
+All implementation, testing, and documentation are complete.
+The advanced analytics feature is fully functional with permission-based access control.
+
+Last Updated: December 2, 2025
--- a/PLAN_HELP_DOCS.md
+++ b/PLAN_HELP_DOCS.md
@@ -0,0 +1,179 @@
+# Help Documentation Implementation Plan
+
+## Overview
+This plan covers creating comprehensive help documentation for the SmoothSchedule business dashboard, adding contextual help buttons to each page, and creating a monolithic help document.
+
+## Phase 1: Create Plugin Page First (User Request)
+
+### Task 1.1: Create CreatePlugin.tsx Page
+- Create `/frontend/src/pages/CreatePlugin.tsx`
+- Features:
+  - Name, description, short description fields
+  - Category dropdown (EMAIL, REPORTS, CUSTOMER, BOOKING, INTEGRATION, AUTOMATION, OTHER)
+  - Plugin code editor with syntax highlighting (using same Prism setup as HelpPluginDocs)
+  - Template variables preview (auto-extracted from code)
+  - Version field (default 1.0.0)
+  - Logo URL field (optional)
+  - Save as Private / Submit to Marketplace options
+  - Visibility selector (PRIVATE, PUBLIC)
+- Uses API endpoint: `POST /api/plugin-templates/`
+- Plan feature gate: `can_create_plugins`
+
+### Task 1.2: Add Route for CreatePlugin
+- Add lazy import: `const CreatePlugin = React.lazy(() => import('./pages/CreatePlugin'));`
+- Add route: `/plugins/create` pointing to CreatePlugin component
+
+## Phase 2: Create Reusable HelpButton Component
+
+### Task 2.1: Create HelpButton Component
+- Create `/frontend/src/components/HelpButton.tsx`
+- Props: `helpPath: string` (route to help page)
+- Renders: HelpCircle icon button at fixed position (top-right of page)
+- Styling: Circular button with question mark icon, tooltip on hover
+- Uses Link from react-router-dom to navigate to help page
+
+## Phase 3: Create Individual Help Pages
+
+### 3.1 Core Pages Help
+| Page | Help File | Route |
+|------|-----------|-------|
+| Dashboard | HelpDashboard.tsx | /help/dashboard |
+| Scheduler | HelpScheduler.tsx | /help/scheduler |
+| Tasks | HelpTasks.tsx | /help/tasks |
+
+### 3.2 Manage Section Help
+| Page | Help File | Route |
+|------|-----------|-------|
+| Customers | HelpCustomers.tsx | /help/customers |
+| Services | HelpServices.tsx | /help/services |
+| Resources | HelpResources.tsx | /help/resources |
+| Staff | HelpStaff.tsx | /help/staff |
+
+### 3.3 Communicate Section Help
+| Page | Help File | Route |
+|------|-----------|-------|
+| Messages | HelpMessages.tsx | /help/messages |
+| Tickets | HelpTicketing.tsx (exists) | /help/ticketing |
+
+### 3.4 Money Section Help
+| Page | Help File | Route |
+|------|-----------|-------|
+| Payments | HelpPayments.tsx | /help/payments |
+
+### 3.5 Extend Section Help
+| Page | Help File | Route |
+|------|-----------|-------|
+| Plugins | HelpPluginsOverview.tsx | /help/plugins-overview |
+| Plugin Marketplace | (link to existing HelpPluginDocs) | /help/plugins |
+| My Plugins | HelpMyPlugins.tsx | /help/my-plugins |
+| Create Plugin | HelpCreatePlugin.tsx | /help/create-plugin |
+
+### 3.6 Settings Section Help
+| Page | Help File | Route |
+|------|-----------|-------|
+| General | HelpSettingsGeneral.tsx | /help/settings/general |
+| Resource Types | HelpSettingsResourceTypes.tsx | /help/settings/resource-types |
+| Booking | HelpSettingsBooking.tsx | /help/settings/booking |
+| Appearance | HelpSettingsAppearance.tsx | /help/settings/appearance |
+| Email Templates | HelpSettingsEmailTemplates.tsx | /help/settings/email-templates |
+| Custom Domains | HelpSettingsCustomDomains.tsx | /help/settings/custom-domains |
+| API & Webhooks | HelpSettingsApi.tsx | /help/settings/api |
+| Authentication | HelpSettingsAuth.tsx | /help/settings/authentication |
+| Email Setup | HelpEmailSettings.tsx (exists) | /help/email-settings |
+| SMS & Calling | HelpSettingsSmsCalling.tsx | /help/settings/sms-calling |
+| Plan & Billing | HelpSettingsBilling.tsx | /help/settings/billing |
+| Quota Management | HelpSettingsQuota.tsx | /help/settings/quota |
+
+## Phase 4: Add HelpButton to Each Page
+
+Add the HelpButton component to the top-right of each dashboard page, linking to its corresponding help page.
+
+## Phase 5: Update HelpPluginDocs
+
+### Task 5.1: Review and Update Plugin Documentation
+- Verify plugin documentation matches current codebase
+- Add section for "Creating Custom Plugins"
+- Add links to API documentation
+- Ensure examples work with current API
+
+## Phase 6: Create Monolithic Help Document
+
+### Task 6.1: Create HelpGuideComplete.tsx
+- Compile all help content into single comprehensive page
+- Table of contents with anchor links
+- Searchable content
+- Organized by sections (Core, Manage, Communicate, Money, Extend, Settings)
+
+### Task 6.2: Update HelpGuide.tsx
+- Replace "Coming Soon" with actual compiled documentation
+- Or redirect to HelpGuideComplete
+
+## Phase 7: Register All Routes
+
+Add all new help page routes to App.tsx in the business dashboard section.
+
+## Help Page Template Structure
+
+Each help page should follow this structure:
+```tsx
+- Header with icon and title
+- Overview/Introduction
+- Key Features section
+- How to Use section (step-by-step)
+- Benefits section
+- Tips & Best Practices
+- Related Features (links to other help pages)
+- Need More Help? (link to support/tickets)
+```
+
+## Implementation Order
+
+1. Create CreatePlugin.tsx page and route
+2. Create HelpButton component
+3. Create help pages for core pages (Dashboard, Scheduler, Tasks)
+4. Create help pages for Manage section
+5. Create help pages for Communicate section
+6. Create help pages for Money section
+7. Create help pages for Extend section (including plugin docs update)
+8. Create help pages for Settings section
+9. Add HelpButton to all pages
+10. Create monolithic help document
+11. Test all help pages and navigation
+
+## Files to Create
+
+### New Components
+- `/frontend/src/components/HelpButton.tsx`
+
+### New Pages
+- `/frontend/src/pages/CreatePlugin.tsx`
+- `/frontend/src/pages/help/HelpDashboard.tsx`
+- `/frontend/src/pages/help/HelpScheduler.tsx`
+- `/frontend/src/pages/help/HelpTasks.tsx`
+- `/frontend/src/pages/help/HelpCustomers.tsx`
+- `/frontend/src/pages/help/HelpServices.tsx`
+- `/frontend/src/pages/help/HelpResources.tsx`
+- `/frontend/src/pages/help/HelpStaff.tsx`
+- `/frontend/src/pages/help/HelpMessages.tsx`
+- `/frontend/src/pages/help/HelpPayments.tsx`
+- `/frontend/src/pages/help/HelpPluginsOverview.tsx`
+- `/frontend/src/pages/help/HelpMyPlugins.tsx`
+- `/frontend/src/pages/help/HelpCreatePlugin.tsx`
+- `/frontend/src/pages/help/HelpSettingsGeneral.tsx`
+- `/frontend/src/pages/help/HelpSettingsResourceTypes.tsx`
+- `/frontend/src/pages/help/HelpSettingsBooking.tsx`
+- `/frontend/src/pages/help/HelpSettingsAppearance.tsx`
+- `/frontend/src/pages/help/HelpSettingsEmailTemplates.tsx`
+- `/frontend/src/pages/help/HelpSettingsCustomDomains.tsx`
+- `/frontend/src/pages/help/HelpSettingsApi.tsx`
+- `/frontend/src/pages/help/HelpSettingsAuth.tsx`
+- `/frontend/src/pages/help/HelpSettingsSmsCalling.tsx`
+- `/frontend/src/pages/help/HelpSettingsBilling.tsx`
+- `/frontend/src/pages/help/HelpSettingsQuota.tsx`
+- `/frontend/src/pages/help/HelpGuideComplete.tsx`
+
+### Files to Modify
+- `/frontend/src/App.tsx` - Add routes
+- `/frontend/src/pages/HelpPluginDocs.tsx` - Update with current codebase info
+- `/frontend/src/pages/HelpGuide.tsx` - Replace Coming Soon
+- All dashboard pages - Add HelpButton component
--- a/PLAN_MULTI_EMAIL_TICKETING.md
+++ b/PLAN_MULTI_EMAIL_TICKETING.md
@@ -0,0 +1,653 @@
+# Implementation Plan: Multi-Email Ticketing System
+
+## Executive Summary
+
+Add support for multiple email addresses per business in the ticketing system, with color-coded visual indicators and per-email IMAP/SMTP configuration.
+
+## Current System Analysis
+
+### Existing Components
+
+1. **Django Backend (`tickets` app)**
+   - `Ticket` model: Core ticket entity
+   - `TicketComment` model: Ticket responses
+   - `TicketEmailSettings` model: **Singleton** platform-wide email config
+   - `IncomingTicketEmail` model: Email audit log
+   - `TicketEmailReceiver` class: IMAP email fetching
+   - `TicketEmailService` class: SMTP email sending
+
+2. **Frontend**
+   - `Tickets.tsx`: Main ticket listing page
+   - `TicketModal.tsx`: Ticket detail modal
+   - `useTickets` hook: Fetch tickets
+   - `useTicketEmailSettings` hook: Manage email settings (singleton)
+   - `Settings.tsx`: Business settings page
+
+3. **Current Email Flow**
+   - Single email account configured platform-wide
+   - Emails matched to tickets by ID in subject/address
+   - Comments created from email replies
+   - New tickets created from unmatched emails
+
+## Requirements (from user clarification)
+
+1. **Per-Business Email Addresses**
+   - Each business provides their own email account(s) and credentials
+   - Multiple email addresses per business
+   - Each email has independent IMAP/SMTP settings
+
+2. **Email Address Properties**
+   - Display name (e.g., "Support", "Billing")
+   - Email address
+   - IMAP settings (host, port, username, password, SSL)
+   - SMTP settings (host, port, username, password, TLS/SSL)
+   - Color for visual identification (hex color code)
+   - Active/inactive status
+
+3. **Ticket Routing**
+   - Incoming emails matched to business by email address configuration
+   - Reply emails matched to existing tickets
+   - New emails create tickets for that business
+   - System attempts to match sender email to customer/staff in business
+
+4. **UI Requirements**
+   - Colored left border on ticket rows indicating source email
+   - Business settings page to manage email addresses
+   - Test connection buttons for IMAP/SMTP
+   - Email address selector when creating tickets manually
+
+## Implementation Plan
+
+### Phase 1: Django Backend Models
+
+#### 1.1 Create `TicketEmailAddress` Model
+
+**File:** `/home/poduck/Desktop/smoothschedule2/smoothschedule/tickets/models.py`
+
+```python
+class TicketEmailAddress(models.Model):
+    """
+    Per-business email address configuration for ticket management.
+    Each business can have multiple email addresses with their own settings.
+    """
+    tenant = models.ForeignKey(
+        Tenant,
+        on_delete=models.CASCADE,
+        related_name='ticket_email_addresses',
+        help_text="Business this email address belongs to"
+    )
+
+    # Display information
+    display_name = models.CharField(
+        max_length=100,
+        help_text="Display name (e.g., 'Support', 'Billing', 'Sales')"
+    )
+    email_address = models.EmailField(
+        help_text="Email address for sending/receiving tickets"
+    )
+    color = models.CharField(
+        max_length=7,
+        default='#3b82f6',
+        help_text="Hex color code for visual identification (e.g., #3b82f6)"
+    )
+
+    # IMAP settings (inbound)
+    imap_host = models.CharField(max_length=255)
+    imap_port = models.IntegerField(default=993)
+    imap_use_ssl = models.BooleanField(default=True)
+    imap_username = models.CharField(max_length=255)
+    imap_password = models.CharField(max_length=255)  # Encrypted in production
+    imap_folder = models.CharField(max_length=100, default='INBOX')
+
+    # SMTP settings (outbound)
+    smtp_host = models.CharField(max_length=255)
+    smtp_port = models.IntegerField(default=587)
+    smtp_use_tls = models.BooleanField(default=True)
+    smtp_use_ssl = models.BooleanField(default=False)
+    smtp_username = models.CharField(max_length=255)
+    smtp_password = models.CharField(max_length=255)  # Encrypted in production
+
+    # Status and tracking
+    is_active = models.BooleanField(
+        default=True,
+        help_text="Whether this email address is actively checked"
+    )
+    is_default = models.BooleanField(
+        default=False,
+        help_text="Default email for new tickets in this business"
+    )
+    last_check_at = models.DateTimeField(null=True, blank=True)
+    last_error = models.TextField(blank=True, default='')
+    emails_processed_count = models.IntegerField(default=0)
+
+    created_at = models.DateTimeField(auto_now_add=True)
+    updated_at = models.DateTimeField(auto_now=True)
+
+    class Meta:
+        ordering = ['-is_default', 'display_name']
+        unique_together = [['tenant', 'email_address']]
+        indexes = [
+            models.Index(fields=['tenant', 'is_active']),
+            models.Index(fields=['email_address']),
+        ]
+
+    def __str__(self):
+        return f"{self.display_name} <{self.email_address}> ({self.tenant.name})"
+
+    def save(self, *args, **kwargs):
+        # Ensure only one default per tenant
+        if self.is_default:
+            TicketEmailAddress.objects.filter(
+                tenant=self.tenant,
+                is_default=True
+            ).exclude(pk=self.pk).update(is_default=False)
+        super().save(*args, **kwargs)
+```
+
+#### 1.2 Update `Ticket` Model
+
+Add field to track which email address received/sent the ticket:
+
+```python
+class Ticket(models.Model):
+    # ... existing fields ...
+
+    source_email_address = models.ForeignKey(
+        'TicketEmailAddress',
+        on_delete=models.SET_NULL,
+        null=True,
+        blank=True,
+        related_name='tickets',
+        help_text="Email address this ticket was received from or sent to"
+    )
+```
+
+#### 1.3 Update `IncomingTicketEmail` Model
+
+Add field to track which email address received the email:
+
+```python
+class IncomingTicketEmail(models.Model):
+    # ... existing fields ...
+
+    email_address = models.ForeignKey(
+        'TicketEmailAddress',
+        on_delete=models.SET_NULL,
+        null=True,
+        blank=True,
+        related_name='incoming_emails',
+        help_text="Email address configuration that received this email"
+    )
+```
+
+### Phase 2: Django Backend Logic
+
+#### 2.1 Update Email Receiver
+
+**File:** `/home/poduck/Desktop/smoothschedule2/smoothschedule/tickets/email_receiver.py`
+
+- Modify `TicketEmailReceiver` to iterate through all active `TicketEmailAddress` objects
+- Connect to each email address's IMAP server
+- Process emails for each address
+- Associate processed tickets with the source email address
+
+#### 2.2 Update Email Sender
+
+**File:** `/home/poduck/Desktop/smoothschedule2/smoothschedule/tickets/email_notifications.py`
+
+- Modify `TicketEmailService` to use the ticket's `source_email_address` for sending
+- Fall back to business's default email address if none specified
+
+### Phase 3: Django Backend API
+
+#### 3.1 Create Serializers
+
+**File:** `/home/poduck/Desktop/smoothschedule2/smoothschedule/tickets/serializers.py`
+
+```python
+class TicketEmailAddressSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = TicketEmailAddress
+        fields = [
+            'id', 'tenant', 'display_name', 'email_address', 'color',
+            'imap_host', 'imap_port', 'imap_use_ssl', 'imap_username',
+            'imap_password', 'imap_folder',
+            'smtp_host', 'smtp_port', 'smtp_use_tls', 'smtp_use_ssl',
+            'smtp_username', 'smtp_password',
+            'is_active', 'is_default', 'last_check_at', 'last_error',
+            'emails_processed_count', 'created_at', 'updated_at'
+        ]
+        read_only_fields = ['tenant', 'last_check_at', 'last_error',
+                            'emails_processed_count', 'created_at', 'updated_at']
+        extra_kwargs = {
+            'imap_password': {'write_only': True},
+            'smtp_password': {'write_only': True},
+        }
+
+class TicketEmailAddressListSerializer(serializers.ModelSerializer):
+    """Lightweight serializer without passwords"""
+    class Meta:
+        model = TicketEmailAddress
+        fields = [
+            'id', 'display_name', 'email_address', 'color',
+            'is_active', 'is_default', 'last_check_at',
+            'emails_processed_count'
+        ]
+```
+
+Update `TicketSerializer` to include email address:
+
+```python
+class TicketSerializer(serializers.ModelSerializer):
+    # ... existing fields ...
+    source_email_address = TicketEmailAddressListSerializer(read_only=True)
+```
+
+#### 3.2 Create ViewSet
+
+**File:** `/home/poduck/Desktop/smoothschedule2/smoothschedule/tickets/views.py`
+
+```python
+class TicketEmailAddressViewSet(viewsets.ModelViewSet):
+    """
+    ViewSet for managing ticket email addresses.
+    Only business owners and managers can manage email addresses.
+    """
+    serializer_class = TicketEmailAddressSerializer
+    permission_classes = [IsTenantUser]
+
+    def get_queryset(self):
+        user = self.request.user
+        # Business users see their own email addresses
+        if user.role in ['owner', 'manager', 'staff']:
+            return TicketEmailAddress.objects.filter(
+                tenant=user.tenant
+            )
+        # Platform users see all
+        elif user.role in ['superuser', 'platform_manager']:
+            return TicketEmailAddress.objects.all()
+        return TicketEmailAddress.objects.none()
+
+    def get_serializer_class(self):
+        if self.action == 'list':
+            return TicketEmailAddressListSerializer
+        return TicketEmailAddressSerializer
+
+    def perform_create(self, serializer):
+        # Automatically set tenant from current user
+        serializer.save(tenant=self.request.user.tenant)
+
+    @action(detail=True, methods=['post'])
+    def test_imap(self, request, pk=None):
+        """Test IMAP connection for this email address"""
+        email_address = self.get_object()
+        # Test IMAP connection logic
+        return Response({'status': 'success'})
+
+    @action(detail=True, methods=['post'])
+    def test_smtp(self, request, pk=None):
+        """Test SMTP connection for this email address"""
+        email_address = self.get_object()
+        # Test SMTP connection logic
+        return Response({'status': 'success'})
+
+    @action(detail=True, methods=['post'])
+    def fetch_now(self, request, pk=None):
+        """Manually trigger email fetch for this address"""
+        email_address = self.get_object()
+        # Trigger email fetch
+        return Response({'status': 'fetching'})
+```
+
+#### 3.3 Add URL Routes
+
+**File:** `/home/poduck/Desktop/smoothschedule2/smoothschedule/tickets/urls.py`
+
+```python
+router.register(r'email-addresses', views.TicketEmailAddressViewSet, basename='ticketemailaddress')
+```
+
+### Phase 4: Frontend - React Hooks
+
+#### 4.1 Create API Client Functions
+
+**File:** `/home/poduck/Desktop/smoothschedule2/frontend/src/api/ticketEmailAddresses.ts` (new file)
+
+```typescript
+export interface TicketEmailAddress {
+  id: number;
+  display_name: string;
+  email_address: string;
+  color: string;
+  imap_host: string;
+  imap_port: number;
+  imap_use_ssl: boolean;
+  imap_username: string;
+  imap_password?: string;
+  imap_folder: string;
+  smtp_host: string;
+  smtp_port: number;
+  smtp_use_tls: boolean;
+  smtp_use_ssl: boolean;
+  smtp_username: string;
+  smtp_password?: string;
+  is_active: boolean;
+  is_default: boolean;
+  last_check_at?: string;
+  last_error?: string;
+  emails_processed_count: number;
+  created_at: string;
+  updated_at: string;
+}
+
+export type TicketEmailAddressCreate = Omit<TicketEmailAddress, 'id' | 'last_check_at' | 'last_error' | 'emails_processed_count' | 'created_at' | 'updated_at'>;
+
+export const getTicketEmailAddresses = async (): Promise<TicketEmailAddress[]> => {
+  const response = await apiClient.get('/tickets/email-addresses/');
+  return response.data;
+};
+
+export const createTicketEmailAddress = async (data: TicketEmailAddressCreate): Promise<TicketEmailAddress> => {
+  const response = await apiClient.post('/tickets/email-addresses/', data);
+  return response.data;
+};
+
+export const updateTicketEmailAddress = async (id: number, data: Partial<TicketEmailAddressCreate>): Promise<TicketEmailAddress> => {
+  const response = await apiClient.patch(`/tickets/email-addresses/${id}/`, data);
+  return response.data;
+};
+
+export const deleteTicketEmailAddress = async (id: number): Promise<void> => {
+  await apiClient.delete(`/tickets/email-addresses/${id}/`);
+};
+
+export const testImapConnection = async (id: number): Promise<{ status: string; message?: string }> => {
+  const response = await apiClient.post(`/tickets/email-addresses/${id}/test_imap/`);
+  return response.data;
+};
+
+export const testSmtpConnection = async (id: number): Promise<{ status: string; message?: string }> => {
+  const response = await apiClient.post(`/tickets/email-addresses/${id}/test_smtp/`);
+  return response.data;
+};
+
+export const fetchEmailsNow = async (id: number): Promise<{ status: string }> => {
+  const response = await apiClient.post(`/tickets/email-addresses/${id}/fetch_now/`);
+  return response.data;
+};
+```
+
+#### 4.2 Create React Query Hooks
+
+**File:** `/home/poduck/Desktop/smoothschedule2/frontend/src/hooks/useTicketEmailAddresses.ts` (new file)
+
+```typescript
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import {
+  getTicketEmailAddresses,
+  createTicketEmailAddress,
+  updateTicketEmailAddress,
+  deleteTicketEmailAddress,
+  testImapConnection,
+  testSmtpConnection,
+  fetchEmailsNow,
+  TicketEmailAddress,
+  TicketEmailAddressCreate,
+} from '../api/ticketEmailAddresses';
+
+const QUERY_KEY = 'ticketEmailAddresses';
+
+export const useTicketEmailAddresses = () => {
+  return useQuery<TicketEmailAddress[]>({
+    queryKey: [QUERY_KEY],
+    queryFn: getTicketEmailAddresses,
+  });
+};
+
+export const useCreateTicketEmailAddress = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (data: TicketEmailAddressCreate) => createTicketEmailAddress(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEY] });
+    },
+  });
+};
+
+export const useUpdateTicketEmailAddress = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, data }: { id: number; data: Partial<TicketEmailAddressCreate> }) =>
+      updateTicketEmailAddress(id, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEY] });
+    },
+  });
+};
+
+export const useDeleteTicketEmailAddress = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (id: number) => deleteTicketEmailAddress(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEY] });
+    },
+  });
+};
+
+export const useTestImapConnection = () => {
+  return useMutation({
+    mutationFn: (id: number) => testImapConnection(id),
+  });
+};
+
+export const useTestSmtpConnection = () => {
+  return useMutation({
+    mutationFn: (id: number) => testSmtpConnection(id),
+  });
+};
+
+export const useFetchEmailsNow = () => {
+  return useMutation({
+    mutationFn: (id: number) => fetchEmailsNow(id),
+  });
+};
+```
+
+### Phase 5: Frontend - React Components
+
+#### 5.1 Email Address Management Component
+
+**File:** `/home/poduck/Desktop/smoothschedule2/frontend/src/components/TicketEmailAddressManager.tsx` (new file)
+
+Features:
+- List all email addresses for the business
+- Add new email address
+- Edit existing email address
+- Delete email address
+- Test IMAP/SMTP connections
+- Set default email address
+- Color picker for visual identification
+- Enable/disable email addresses
+
+#### 5.2 Update Ticket List UI
+
+**File:** `/home/poduck/Desktop/smoothschedule2/frontend/src/pages/Tickets.tsx`
+
+Modify ticket rows to include colored left border:
+
+```tsx
+<div
+  className="ticket-row"
+  style={{
+    borderLeft: ticket.source_email_address
+      ? `4px solid ${ticket.source_email_address.color}`
+      : '4px solid transparent'
+  }}
+>
+  {/* Ticket content */}
+</div>
+```
+
+#### 5.3 Update Types
+
+**File:** `/home/poduck/Desktop/smoothschedule2/frontend/src/types.ts`
+
+```typescript
+export interface TicketEmailAddress {
+  id: number;
+  display_name: string;
+  email_address: string;
+  color: string;
+  is_active: boolean;
+  is_default: boolean;
+  last_check_at?: string;
+  emails_processed_count: number;
+}
+
+export interface Ticket {
+  // ... existing fields ...
+  source_email_address?: TicketEmailAddress;
+}
+```
+
+#### 5.4 Add to Business Settings
+
+**File:** `/home/poduck/Desktop/smoothschedule2/frontend/src/pages/Settings.tsx`
+
+Add new tab for "Email Addresses" that renders `TicketEmailAddressManager` component.
+
+### Phase 6: Database Migration
+
+#### 6.1 Create Migration
+
+```bash
+cd /home/poduck/Desktop/smoothschedule2/smoothschedule
+docker compose -f docker-compose.local.yml exec django python manage.py makemigrations tickets
+```
+
+#### 6.2 Run Migration
+
+```bash
+docker compose -f docker-compose.local.yml exec django python manage.py migrate tickets
+```
+
+#### 6.3 Data Migration (if needed)
+
+If there's existing `TicketEmailSettings` data, create a data migration to convert it to `TicketEmailAddress` records for each tenant.
+
+### Phase 7: Testing
+
+#### 7.1 Backend Tests
+
+- Test email address CRUD operations
+- Test email receiver with multiple addresses
+- Test email sender using correct source address
+- Test tenant isolation
+
+#### 7.2 Frontend Tests
+
+- Test email address list rendering
+- Test add/edit/delete operations
+- Test connection testing UI
+- Test ticket list color borders
+
+### Phase 8: Documentation
+
+#### 8.1 User Documentation
+
+- How to add email addresses
+- How to configure IMAP/SMTP settings
+- How to test connections
+- Color coding explanation
+
+#### 8.2 Developer Documentation
+
+- API endpoints documentation
+- Model relationships
+- Email processing flow
+- Celery task schedule (if applicable)
+
+## Migration Strategy
+
+### Option 1: Keep Legacy System (Recommended)
+
+- Keep `TicketEmailSettings` for platform-level configuration
+- New `TicketEmailAddress` for per-business configuration
+- Businesses can opt-in to multi-email system
+- Existing single-email businesses continue working
+
+### Option 2: Full Migration
+
+- Deprecate `TicketEmailSettings`
+- Migrate all existing data to `TicketEmailAddress`
+- All businesses use new system
+
+**Recommendation:** Option 1 for backward compatibility
+
+## Risks & Considerations
+
+1. **Security**
+   - Email passwords stored in database (consider encryption)
+   - SMTP/IMAP credentials exposure risk
+   - Recommend OAuth2 for Gmail/Outlook in future
+
+2. **Performance**
+   - Multiple IMAP connections may increase load
+   - Consider Celery task queue for email fetching
+   - Implement rate limiting
+
+3. **Email Deliverability**
+   - Each business responsible for their own SPF/DKIM records
+   - No centralized email reputation management
+
+4. **UI/UX**
+   - Color picker needs to be user-friendly
+   - Color accessibility (contrast ratio)
+   - Mobile responsiveness
+
+## Future Enhancements
+
+1. **OAuth2 Support**
+   - Google Workspace integration
+   - Microsoft 365 integration
+
+2. **Email Templates Per Address**
+   - Different signatures per email address
+   - Custom auto-responses
+
+3. **Analytics**
+   - Email volume by address
+   - Response time by address
+
+4. **Auto-Assignment**
+   - Route tickets to specific staff based on email address
+
+## Implementation Timeline
+
+- **Phase 1-2 (Backend Models & Logic):** 2-3 days
+- **Phase 3 (Backend API):** 1-2 days
+- **Phase 4-5 (Frontend):** 3-4 days
+- **Phase 6-7 (Migration & Testing):** 1-2 days
+- **Phase 8 (Documentation):** 1 day
+
+**Total Estimated Time:** 8-12 days
+
+## Approval Required
+
+Before proceeding with implementation, please confirm:
+
+1. ✅ Per-business email addresses (not platform-wide)
+2. ✅ Businesses provide their own IMAP/SMTP credentials
+3. ✅ Colored left border for visual identification
+4. ✅ Email address management in business settings (not platform dashboard)
+5. ⚠️ Security approach for storing email passwords
+6. ⚠️ Migration strategy (keep legacy vs full migration)
+
+## Questions for Product Owner
+
+1. Should we encrypt email passwords in the database?
+2. Do we need email address approval workflow (platform admin approval)?
+3. Should there be a limit on number of email addresses per business?
+4. Do we need email forwarding (forward to another address)?
+5. Should unmatched emails (not tied to a ticket) create new tickets or be ignored?
--- a/PRODUCTION-READY.md
+++ b/PRODUCTION-READY.md
@@ -0,0 +1,296 @@
+# SmoothSchedule Production Readiness Report
+
+## Status: READY FOR DEPLOYMENT ✓
+
+This document confirms that SmoothSchedule is fully configured and ready for production deployment.
+
+## Configuration Complete ✓
+
+### 1. DigitalOcean Spaces Configuration ✓
+- **Access Key ID:** DO801P4R8QXYMY4CE8WZ
+- **Secret Access Key:** Configured
+- **Bucket Name:** smoothschedule
+- **Region:** nyc3
+- **Endpoint:** https://nyc3.digitaloceanspaces.com
+
+**Status:** Environment variables configured in `smoothschedule/.envs/.production/.django`
+
+### 2. Backend (Django) ✓
+- **Framework:** Django 5.2.8
+- **Storage:** django-storages with S3 backend (DigitalOcean Spaces)
+- **Database:** PostgreSQL with multi-tenancy support
+- **Task Queue:** Celery with Redis
+- **Web Server:** Gunicorn behind Traefik
+- **SSL/HTTPS:** Let's Encrypt automatic certificates via Traefik
+
+**Production Settings:**
+- ✓ SECRET_KEY configured
+- ✓ ALLOWED_HOSTS set to `.smoothschedule.com`
+- ✓ DEBUG=False (production mode)
+- ✓ Static files → DigitalOcean Spaces
+- ✓ Media files → DigitalOcean Spaces
+- ✓ Security headers configured
+- ✓ HTTPS redirect enabled
+
+### 3. Frontend (React) ✓
+- **Framework:** React 18 with Vite
+- **Build:** Production build ready
+- **API Endpoint:** https://smoothschedule.com/api
+- **Multi-tenant:** Subdomain-based routing
+
+**Production Settings:**
+- ✓ API URL configured for production
+- ✓ Build optimization enabled
+
+### 4. Docker Configuration ✓
+**Services:**
+- ✓ Django (Gunicorn)
+- ✓ PostgreSQL
+- ✓ Redis
+- ✓ Traefik (reverse proxy + SSL)
+- ✓ Celery Worker
+- ✓ Celery Beat (scheduler)
+- ✓ Flower (Celery monitoring)
+
+**Production Compose:** `docker-compose.production.yml`
+
+### 5. SSL/HTTPS ✓
+- **Provider:** Let's Encrypt
+- **Auto-renewal:** Enabled via Traefik
+- **Domains:**
+  - smoothschedule.com
+  - www.smoothschedule.com
+  - platform.smoothschedule.com
+  - api.smoothschedule.com
+  - *.smoothschedule.com (wildcard for tenants)
+
+### 6. Security ✓
+- ✓ HTTPS enforced
+- ✓ Secure cookies
+- ✓ CSRF protection
+- ✓ Random secret keys
+- ✓ Database password protected
+- ✓ Flower dashboard password protected
+
+## Deployment Scripts Created ✓
+
+### 1. `server-setup.sh`
+**Purpose:** Initial server setup (run once)
+**Installs:**
+- Docker & Docker Compose
+- AWS CLI (for Spaces management)
+- UFW firewall
+- Fail2ban
+
+**Usage:**
+```bash
+ssh poduck@smoothschedule.com 'bash -s' < server-setup.sh
+```
+
+### 2. `setup-spaces.sh`
+**Purpose:** Create and configure DigitalOcean Spaces bucket
+**Actions:**
+- Creates bucket
+- Sets public-read ACL
+- Configures CORS
+
+**Usage:**
+```bash
+ssh poduck@smoothschedule.com
+./setup-spaces.sh
+```
+
+### 3. `deploy.sh`
+**Purpose:** Full deployment pipeline
+**Actions:**
+- Builds frontend
+- Uploads code to server
+- Builds Docker images
+- Runs migrations
+- Collects static files
+- Starts services
+
+**Usage:**
+```bash
+./deploy.sh poduck@smoothschedule.com
+```
+
+## Documentation Created ✓
+
+### 1. DEPLOYMENT.md
+Comprehensive deployment guide covering:
+- Prerequisites
+- Step-by-step deployment
+- DNS configuration
+- SSL setup
+- Troubleshooting
+- Maintenance
+
+### 2. CLAUDE.md (Updated)
+Added production deployment section with:
+- Quick deploy commands
+- Production URLs
+- Management commands
+- Environment variables
+
+## What You Need to Do Before Deploying
+
+### Prerequisites Checklist
+
+#### 1. Server Access
+- [ ] Ensure you can SSH to: `poduck@smoothschedule.com`
+- [ ] Verify sudo password: `chaff/starry`
+
+#### 2. DNS Configuration
+Configure these DNS records at your domain registrar:
+
+```
+Type    Name                        Value              TTL
+A       smoothschedule.com          YOUR_SERVER_IP     300
+A       *.smoothschedule.com        YOUR_SERVER_IP     300
+CNAME   www                         smoothschedule.com 300
+```
+
+**To find YOUR_SERVER_IP:**
+```bash
+ping smoothschedule.com
+# or
+ssh poduck@smoothschedule.com 'curl -4 ifconfig.me'
+```
+
+#### 3. Server Firewall Ports
+Ensure these ports are open on your server:
+- [ ] Port 22 (SSH)
+- [ ] Port 80 (HTTP)
+- [ ] Port 443 (HTTPS)
+- [ ] Port 5555 (Flower - optional)
+
+#### 4. DigitalOcean Spaces
+- [ ] Create bucket (run `setup-spaces.sh` on server)
+- [ ] Verify credentials are correct
+
+## Deployment Steps (Quick Start)
+
+### Step 1: Initial Server Setup (One-Time)
+```bash
+# From your local machine
+cd /home/poduck/Desktop/smoothschedule2
+
+# Run server setup
+ssh poduck@smoothschedule.com 'bash -s' < server-setup.sh
+
+# Note: You'll need to logout/login after this for Docker group changes
+```
+
+### Step 2: Setup DigitalOcean Spaces (One-Time)
+```bash
+# Copy setup script to server
+scp setup-spaces.sh poduck@smoothschedule.com:~/
+
+# SSH to server and run it
+ssh poduck@smoothschedule.com
+./setup-spaces.sh
+exit
+```
+
+### Step 3: Deploy Application
+```bash
+# From your local machine
+cd /home/poduck/Desktop/smoothschedule2
+./deploy.sh poduck@smoothschedule.com
+```
+
+### Step 4: Post-Deployment Setup
+```bash
+# SSH to server
+ssh poduck@smoothschedule.com
+cd ~/smoothschedule
+
+# Create superuser
+docker compose -f docker-compose.production.yml exec django python manage.py createsuperuser
+
+# Create a business tenant
+docker compose -f docker-compose.production.yml exec django python manage.py shell
+```
+
+Then in the Django shell:
+```python
+from core.models import Business
+from django.contrib.auth import get_user_model
+
+User = get_user_model()
+
+# Create a business
+business = Business.objects.create(
+    name="Demo Business",
+    subdomain="demo",
+    schema_name="demo",
+)
+
+# Create business owner
+owner = User.objects.create_user(
+    username="demo_owner",
+    email="owner@demo.com",
+    password="choose_a_password",
+    role="owner",
+    business_subdomain="demo"
+)
+
+exit()
+```
+
+### Step 5: Verify Deployment
+Visit these URLs in your browser:
+- https://smoothschedule.com - Main site
+- https://platform.smoothschedule.com - Platform dashboard
+- https://demo.smoothschedule.com - Demo business
+- https://smoothschedule.com:5555 - Flower (Celery monitoring)
+
+## Monitoring & Maintenance
+
+### View Logs
+```bash
+ssh poduck@smoothschedule.com
+cd ~/smoothschedule
+docker compose -f docker-compose.production.yml logs -f
+```
+
+### Check Status
+```bash
+docker compose -f docker-compose.production.yml ps
+```
+
+### Restart Services
+```bash
+docker compose -f docker-compose.production.yml restart
+```
+
+### Update/Redeploy
+Simply run the deploy script again:
+```bash
+./deploy.sh poduck@smoothschedule.com
+```
+
+## Support & Troubleshooting
+
+See [DEPLOYMENT.md](DEPLOYMENT.md) for:
+- Detailed troubleshooting steps
+- SSL certificate issues
+- Database connection problems
+- Static files not loading
+- Celery task issues
+
+## Summary
+
+✅ **Production Configuration:** Complete
+✅ **DigitalOcean Spaces:** Configured
+✅ **Docker Setup:** Ready
+✅ **SSL/HTTPS:** Automatic via Traefik
+✅ **Deployment Scripts:** Created
+✅ **Documentation:** Complete
+
+**Next Action:** Run the deployment steps above to go live!
+
+---
+
+**Questions?** See DEPLOYMENT.md or check the logs on the server.
--- a/PRODUCTION_DEPLOYMENT.md
+++ b/PRODUCTION_DEPLOYMENT.md
@@ -0,0 +1,602 @@
+# SmoothSchedule - Production Deployment Manual
+
+Complete step-by-step guide for manually deploying SmoothSchedule from scratch on a production server. This guide is useful when you need to reset the entire production deployment or troubleshoot deployment issues.
+
+## Table of Contents
+
+1. [Prerequisites](#prerequisites)
+2. [Complete Fresh Deployment](#complete-fresh-deployment)
+3. [Docker Build & Startup](#docker-build--startup)
+4. [Database Initialization](#database-initialization)
+5. [Static Files & Migrations](#static-files--migrations)
+6. [Verification Steps](#verification-steps)
+7. [Troubleshooting](#troubleshooting)
+
+---
+
+## Prerequisites
+
+### Required on Production Server
+
+```bash
+# Check these are installed and running
+docker --version              # Docker 20.10+
+docker compose --version      # Docker Compose 2.0+
+```
+
+### Required Locally (Before Deployment)
+
+1. All code changes committed to git (`main` branch)
+2. All missing files added to git and pushed
+3. Production environment variables backed up locally
+4. `.envs/.production/` directory exists with proper credentials
+
+---
+
+## Complete Fresh Deployment
+
+### Step 1: Save Production Environment Variables Locally
+
+**On your local development machine:**
+
+```bash
+# Backup current production environment variables
+scp poduck@smoothschedule.com:~/smoothschedule/smoothschedule/.envs/.production/.django \
+    /tmp/production_django_env_backup
+
+scp poduck@smoothschedule.com:~/smoothschedule/smoothschedule/.envs/.production/.postgres \
+    /tmp/production_postgres_env_backup
+```
+
+### Step 2: Prepare & Commit All Code Changes Locally
+
+**On your local development machine:**
+
+```bash
+cd /home/poduck/Desktop/smoothschedule2
+
+# Check for any missing files
+git status
+
+# Add all changes and new files
+git add -A
+
+# Review staged changes
+git diff --cached
+
+# Commit changes
+git commit -m "Production deployment: Add missing files and config updates"
+
+# Push to main branch
+git push origin main
+```
+
+### Step 3: Bring Down Production Containers
+
+**SSH into production server:**
+
+```bash
+ssh poduck@smoothschedule.com
+
+cd ~/smoothschedule/smoothschedule
+
+# Stop all containers (preserves volumes)
+docker compose -f docker-compose.production.yml down
+
+# Or to completely reset and remove volumes (careful!):
+docker compose -f docker-compose.production.yml down -v
+```
+
+### Step 4: Remove Production Codebase
+
+**On production server:**
+
+```bash
+cd ~
+
+# Remove everything
+rm -rf smoothschedule
+```
+
+### Step 5: Pull Fresh Code from Git
+
+**On production server:**
+
+```bash
+cd ~
+
+# Clone the repository
+git clone https://git.talova.net/poduck/smoothschedule.git smoothschedule
+
+cd smoothschedule
+```
+
+**Note:** If git authentication fails, configure credentials on the server:
+
+```bash
+git config --global user.email "poduck@smoothschedule.com"
+git config --global user.name "Poduck"
+
+# Or store credentials
+git credential approve
+# Then paste: protocol=https
+#            host=git.talova.net
+#            username=poduck
+#            password=chaff/starry
+```
+
+### Step 6: Restore Production Environment Variables
+
+**On production server:**
+
+```bash
+cd ~/smoothschedule/smoothschedule
+
+# Create the .envs/.production directory if it doesn't exist
+mkdir -p .envs/.production
+
+# Restore from backups on local machine or recreate them
+# Option A: Use SCP to copy from local machine
+scp /tmp/production_django_env_backup poduck@smoothschedule.com:~/smoothschedule/smoothschedule/.envs/.production/.django
+scp /tmp/production_postgres_env_backup poduck@smoothschedule.com:~/smoothschedule/smoothschedule/.envs/.production/.postgres
+
+# Option B: Manually recreate the files on the production server
+# (see Environment Variables section below)
+```
+
+---
+
+## Docker Build & Startup
+
+### Step 7: Build Docker Images
+
+**On production server:**
+
+```bash
+cd ~/smoothschedule/smoothschedule
+
+# Build all production Docker images
+docker compose -f docker-compose.production.yml build
+```
+
+**Expected output:**
+```
+✓ Successfully built:
+  - smoothschedule_production_django
+  - smoothschedule_production_celeryworker
+  - smoothschedule_production_celerybeat
+  - smoothschedule_production_flower
+  - smoothschedule_production_postgres
+  - smoothschedule_production_traefik
+  - smoothschedule-awscli
+```
+
+### Step 8: Start Containers
+
+**On production server:**
+
+```bash
+cd ~/smoothschedule/smoothschedule
+
+# Start all containers in detached mode
+docker compose -f docker-compose.production.yml up -d
+
+# Wait for services to stabilize (10-15 seconds)
+sleep 15
+
+# Check container status
+docker compose -f docker-compose.production.yml ps
+```
+
+**Expected status:** All containers should be `Up` or `Healthy`
+
+---
+
+## Database Initialization
+
+### Step 9: Run Database Migrations
+
+**On production server:**
+
+The application uses django-tenants for multi-tenant support. Migrations must be run in this order:
+
+```bash
+cd ~/smoothschedule/smoothschedule
+
+# 1. Migrate the public/shared schema (all shared apps)
+docker compose -f docker-compose.production.yml exec -T django \
+  python manage.py migrate_schemas --shared
+
+# Expected output should show multiple migrations applied to "public" schema
+```
+
+**If you get "service django is not running":**
+
+The Django container may not be fully started. Wait a bit longer:
+
+```bash
+sleep 30  # Wait for Django to initialize
+docker compose -f docker-compose.production.yml exec -T django \
+  python manage.py migrate_schemas --shared
+```
+
+---
+
+## Static Files & Migrations
+
+### Step 10: Collect Static Files
+
+**On production server:**
+
+```bash
+cd ~/smoothschedule/smoothschedule
+
+docker compose -f docker-compose.production.yml exec -T django \
+  python manage.py collectstatic --noinput
+```
+
+This collects all static files (CSS, JS, images) and uploads them to:
+- **Local filesystem:** `smoothschedule/staticfiles/`
+- **DigitalOcean Spaces/S3:** Configured via `DJANGO_AWS_*` environment variables
+
+### Step 11: Create Superuser (First Time Only)
+
+**On production server, if this is a fresh installation:**
+
+```bash
+cd ~/smoothschedule/smoothschedule
+
+docker compose -f docker-compose.production.yml exec django \
+  python manage.py createsuperuser
+
+# Follow the prompts to create the admin user
+```
+
+### Step 12: Create Initial Tenant (First Time Only)
+
+**On production server, if you need a demo tenant:**
+
+```bash
+cd ~/smoothschedule/smoothschedule
+
+docker compose -f docker-compose.production.yml exec django python manage.py shell
+```
+
+Then in the Django shell:
+
+```python
+from core.models import Tenant, Domain
+from django.utils.text import slugify
+
+# Create a tenant
+tenant = Tenant.objects.create(
+    name="Demo Company",
+    slug="demo",
+    is_free_trial=False,
+    is_temporary=False,
+)
+
+# Create a domain for the tenant
+Domain.objects.create(
+    domain="demo.smoothschedule.com",
+    tenant=tenant,
+)
+
+print(f"Created tenant: {tenant.name} with domain: demo.smoothschedule.com")
+exit()
+```
+
+---
+
+## Verification Steps
+
+### Step 13: Verify All Services Are Running
+
+```bash
+cd ~/smoothschedule/smoothschedule
+
+# Check container status
+docker compose -f docker-compose.production.yml ps
+
+# View logs for any errors
+docker compose -f docker-compose.production.yml logs --tail=50
+
+# Check specific service logs
+docker compose -f docker-compose.production.yml logs django --tail=30
+docker compose -f docker-compose.production.yml logs postgres --tail=30
+```
+
+### Step 14: Test API Endpoints
+
+**From your local machine:**
+
+```bash
+# Test the backend API
+curl -s "https://smoothschedule.com/api/health/" | jq
+
+# Test tenant access
+curl -s "https://demo.smoothschedule.com/api/resources/" | jq
+
+# Test platform admin
+curl -s "https://platform.smoothschedule.com/api/admin/businesses/" | jq
+```
+
+### Step 15: Verify Nginx Frontend
+
+The frontend should be accessible at:
+- **Main site:** `https://smoothschedule.com`
+- **Platform dashboard:** `https://platform.smoothschedule.com`
+- **Tenant subdomain:** `https://demo.smoothschedule.com`
+
+---
+
+## Environment Variables Reference
+
+### Django Configuration (`.envs/.production/.django`)
+
+```bash
+# Security & Secrets
+DJANGO_SECRET_KEY=your-secret-key-here
+DJANGO_DEBUG=False
+DJANGO_ALLOWED_HOSTS=smoothschedule.com,platform.smoothschedule.com,*.smoothschedule.com
+
+# Admin & URLs
+DJANGO_ADMIN_URL=<random-slug>/
+FRONTEND_URL=https://platform.smoothschedule.com
+PLATFORM_BASE_URL=https://platform.smoothschedule.com
+
+# Celery & Redis
+REDIS_URL=redis://redis:6379/0
+CELERY_BROKER_URL=redis://redis:6379/0
+
+# AWS/DigitalOcean Spaces (for media storage)
+DJANGO_AWS_ACCESS_KEY_ID=your-access-key
+DJANGO_AWS_SECRET_ACCESS_KEY=your-secret-key
+DJANGO_AWS_STORAGE_BUCKET_NAME=smoothschedule
+DJANGO_AWS_S3_ENDPOINT_URL=https://nyc3.digitaloceanspaces.com
+DJANGO_AWS_S3_REGION_NAME=nyc3
+DJANGO_AWS_S3_CUSTOM_DOMAIN=smoothschedule.nyc3.digitaloceanspaces.com
+
+# Email Configuration (optional)
+MAILGUN_API_KEY=your-mailgun-key
+MAILGUN_DOMAIN=mg.smoothschedule.com
+
+# SSL/Security
+DJANGO_SECURE_SSL_REDIRECT=True
+DJANGO_SECURE_HSTS_SECONDS=60
+DJANGO_SECURE_HSTS_INCLUDE_SUBDOMAINS=True
+DJANGO_SECURE_HSTS_PRELOAD=True
+DJANGO_SESSION_COOKIE_SECURE=True
+DJANGO_CSRF_COOKIE_SECURE=True
+
+# Sentry (optional - error tracking)
+SENTRY_DSN=
+SENTRY_ENVIRONMENT=production
+SENTRY_TRACES_SAMPLE_RATE=0.1
+```
+
+### PostgreSQL Configuration (`.envs/.production/.postgres`)
+
+```bash
+POSTGRES_HOST=postgres
+POSTGRES_PORT=5432
+POSTGRES_DB=smoothschedule
+POSTGRES_USER=<random-username>
+POSTGRES_PASSWORD=<random-secure-password>
+```
+
+---
+
+## Troubleshooting
+
+### Django Container Won't Start
+
+**Symptom:** `docker compose ps` shows Django as exited
+
+**Solution:**
+
+```bash
+cd ~/smoothschedule/smoothschedule
+
+# View full error logs
+docker compose -f docker-compose.production.yml logs django --tail=100
+
+# Check if database is accessible
+docker compose -f docker-compose.production.yml logs postgres --tail=20
+
+# Restart Django after fixing the issue
+docker compose -f docker-compose.production.yml restart django
+```
+
+### Migration Fails with "role does not exist"
+
+**Symptom:** Error when running `migrate_schemas --shared`:
+```
+FATAL: role "postgres" does not exist
+```
+
+**Solution:** The database volume is corrupted. Reset and restart:
+
+```bash
+cd ~/smoothschedule/smoothschedule
+
+# Stop and remove all volumes
+docker compose -f docker-compose.production.yml down -v
+
+# Restart (this will recreate the database)
+docker compose -f docker-compose.production.yml up -d
+
+# Wait for database to initialize (30 seconds)
+sleep 30
+
+# Try migrations again
+docker compose -f docker-compose.production.yml exec -T django \
+  python manage.py migrate_schemas --shared
+```
+
+### Cannot Connect to Production Server
+
+**Check SSH access:**
+
+```bash
+ssh poduck@smoothschedule.com "echo 'Connection successful'"
+```
+
+**If that fails:**
+- Verify your SSH key is authorized on the server
+- Check firewall rules allow SSH (port 22)
+- Verify DNS resolves `smoothschedule.com` to the correct IP
+
+### Traefik Certificate Issues
+
+**Symptom:** SSL certificate errors, HTTP redirects failing
+
+**Solution:**
+
+```bash
+cd ~/smoothschedule/smoothschedule
+
+# Check Traefik logs
+docker compose -f docker-compose.production.yml logs traefik --tail=50
+
+# Restart Traefik to request new certificates
+docker compose -f docker-compose.production.yml restart traefik
+
+# Wait for Let's Encrypt to issue certificates (5-10 minutes)
+# Check via: https://smoothschedule.com (should show valid cert)
+```
+
+### Frontend Not Loading
+
+**Verify nginx container is running:**
+
+```bash
+# Check if nginx image was built
+docker images | grep smoothschedule
+
+# If missing, rebuild
+docker compose -f docker-compose.production.yml build nginx
+
+# Restart the service
+docker compose -f docker-compose.production.yml restart
+
+# Check logs
+docker logs $(docker ps -q --filter "name=nginx")
+```
+
+---
+
+## Quick Reference Commands
+
+```bash
+# SSH to production server
+ssh poduck@smoothschedule.com
+
+# Navigate to project
+cd ~/smoothschedule/smoothschedule
+
+# View all container logs
+docker compose -f docker-compose.production.yml logs -f
+
+# View Django logs only
+docker compose -f docker-compose.production.yml logs django -f --tail=100
+
+# Stop all containers
+docker compose -f docker-compose.production.yml down
+
+# Start all containers
+docker compose -f docker-compose.production.yml up -d
+
+# Restart a specific service
+docker compose -f docker-compose.production.yml restart django
+
+# Run a Django management command
+docker compose -f docker-compose.production.yml exec -T django python manage.py <command>
+
+# Access Django shell
+docker compose -f docker-compose.production.yml exec django python manage.py shell
+
+# Create a database backup
+docker compose -f docker-compose.production.yml exec -T postgres \
+  pg_dump -U $POSTGRES_USER smoothschedule > backup.sql
+
+# Execute arbitrary SQL
+docker compose -f docker-compose.production.yml exec -T postgres \
+  psql -U $POSTGRES_USER smoothschedule -c "SELECT version();"
+
+# Check Docker resource usage
+docker stats
+```
+
+---
+
+## Advanced: Rollback Procedure
+
+If a deployment fails catastrophically:
+
+```bash
+# 1. Stop everything
+cd ~/smoothschedule/smoothschedule
+docker compose -f docker-compose.production.yml down
+
+# 2. Restore from database backup (if available)
+docker compose -f docker-compose.production.yml exec -T postgres \
+  psql -U $POSTGRES_USER smoothschedule < backup.sql
+
+# 3. Checkout previous git commit
+cd ~/smoothschedule
+git checkout <previous-commit-hash>
+
+# 4. Rebuild and restart
+cd smoothschedule
+docker compose -f docker-compose.production.yml build
+docker compose -f docker-compose.production.yml up -d
+```
+
+---
+
+## Monitoring Checklist
+
+After deployment, monitor these for 24 hours:
+
+- [ ] No error logs in `docker compose logs django`
+- [ ] API endpoints respond with 200 status
+- [ ] SSL certificates are valid (https://smoothschedule.com)
+- [ ] Frontend loads without console errors
+- [ ] Tenant subdomains work correctly
+- [ ] Static files are being served (CSS, JS load)
+- [ ] Background tasks execute (check Celery worker logs)
+- [ ] No database connection errors
+
+---
+
+## Important Notes
+
+1. **Always backup before major changes:**
+   - Database: `pg_dump`
+   - Environment variables: Copy `.envs/.production/` locally
+   - Code: Git commits
+
+2. **Never modify code on production directly:**
+   - Change code locally → Git push → Production git pull
+   - Only edit `.env` files directly on production
+
+3. **Multi-Tenancy Considerations:**
+   - Each tenant gets a separate PostgreSQL schema
+   - Migrations apply to "public" schema (shared) first
+   - Tenant migrations happen automatically on first request to new tenant
+
+4. **Docker Compose File:**
+   - Always use `-f docker-compose.production.yml` for production
+   - Never use `-f docker-compose.local.yml` on production
+
+5. **Persistence:**
+   - Database: `production_postgres_data` volume
+   - Redis: `production_redis_data` volume
+   - Traefik certs: `production_traefik` volume
+   - These are preserved when using `down` (not `down -v`)
+
+---
+
+**Last Updated:** December 2025
+**Deployment Version:** Manual v1.0
--- a/QUICK-REFERENCE.md
+++ b/QUICK-REFERENCE.md
@@ -0,0 +1,175 @@
+# SmoothSchedule Quick Reference
+
+## Deployment Commands
+
+### Deploy to Production
+```bash
+cd /home/poduck/Desktop/smoothschedule2
+./deploy.sh poduck@smoothschedule.com
+```
+
+### SSH to Server
+```bash
+ssh poduck@smoothschedule.com
+# Password: chaff/starry
+```
+
+## Production Management
+
+### Navigate to Project
+```bash
+cd ~/smoothschedule
+```
+
+### View Logs
+```bash
+# All services
+docker compose -f docker-compose.production.yml logs -f
+
+# Specific service
+docker compose -f docker-compose.production.yml logs -f django
+docker compose -f docker-compose.production.yml logs -f celeryworker
+docker compose -f docker-compose.production.yml logs -f traefik
+```
+
+### Check Status
+```bash
+docker compose -f docker-compose.production.yml ps
+```
+
+### Restart Services
+```bash
+# All services
+docker compose -f docker-compose.production.yml restart
+
+# Specific service
+docker compose -f docker-compose.production.yml restart django
+```
+
+### Run Django Commands
+```bash
+# Migrations
+docker compose -f docker-compose.production.yml exec django python manage.py migrate
+
+# Create superuser
+docker compose -f docker-compose.production.yml exec django python manage.py createsuperuser
+
+# Django shell
+docker compose -f docker-compose.production.yml exec django python manage.py shell
+
+# Collect static files
+docker compose -f docker-compose.production.yml exec django python manage.py collectstatic --noinput
+```
+
+## URLs
+
+- **Main Site:** https://smoothschedule.com
+- **Platform Dashboard:** https://platform.smoothschedule.com
+- **API:** https://smoothschedule.com/api
+- **Admin:** https://smoothschedule.com/admin
+- **Flower (Celery):** https://smoothschedule.com:5555
+
+## DigitalOcean Spaces
+
+### View Bucket Contents
+```bash
+aws --profile do-tor1 s3 ls s3://smoothschedule/
+aws --profile do-tor1 s3 ls s3://smoothschedule/static/
+aws --profile do-tor1 s3 ls s3://smoothschedule/media/
+```
+
+### Upload File
+```bash
+aws --profile do-tor1 s3 cp file.jpg s3://smoothschedule/media/
+```
+
+### Public URLs
+- **Static:** https://smoothschedule.nyc3.digitaloceanspaces.com/static/
+- **Media:** https://smoothschedule.nyc3.digitaloceanspaces.com/media/
+
+## Troubleshooting
+
+### 500 Error
+```bash
+# Check Django logs
+docker compose -f docker-compose.production.yml logs django --tail=100
+```
+
+### SSL Not Working
+```bash
+# Check Traefik logs
+docker compose -f docker-compose.production.yml logs traefik
+
+# Verify DNS
+dig smoothschedule.com +short
+```
+
+### Database Issues
+```bash
+# Check PostgreSQL
+docker compose -f docker-compose.production.yml logs postgres
+
+# Access database
+docker compose -f docker-compose.production.yml exec django python manage.py dbshell
+```
+
+### Static Files Not Loading
+```bash
+# Re-collect static files
+docker compose -f docker-compose.production.yml exec django python manage.py collectstatic --noinput
+
+# Check Spaces
+aws --profile do-tor1 s3 ls s3://smoothschedule/static/ | head
+```
+
+## Backups
+
+### Create Database Backup
+```bash
+docker compose -f docker-compose.production.yml exec postgres backup
+```
+
+### List Backups
+```bash
+docker compose -f docker-compose.production.yml exec postgres backups
+```
+
+### Restore Backup
+```bash
+docker compose -f docker-compose.production.yml exec postgres restore <backup_file>
+```
+
+## Emergency Commands
+
+### Stop All Services
+```bash
+docker compose -f docker-compose.production.yml down
+```
+
+### Start All Services
+```bash
+docker compose -f docker-compose.production.yml up -d
+```
+
+### Rebuild Everything
+```bash
+docker compose -f docker-compose.production.yml down
+docker compose -f docker-compose.production.yml build --no-cache
+docker compose -f docker-compose.production.yml up -d
+```
+
+### View Resource Usage
+```bash
+docker stats
+```
+
+## Environment Files
+
+- **Backend:** `~/smoothschedule/.envs/.production/.django`
+- **Database:** `~/smoothschedule/.envs/.production/.postgres`
+
+## Support
+
+- **Detailed Guide:** See DEPLOYMENT.md
+- **Production Status:** See PRODUCTION-READY.md
+- **Main Docs:** See CLAUDE.md
--- a/QUICK_REFERENCE_CALENDAR_SYNC.md
+++ b/QUICK_REFERENCE_CALENDAR_SYNC.md
@@ -0,0 +1,195 @@
+# Calendar Sync Permission - Quick Reference
+
+## What Was Added
+
+A permission gating system for calendar sync features in the Django backend.
+
+## Key Components
+
+### 1. Database Field
+```python
+# core/models.py - Added to Tenant model
+can_use_calendar_sync = models.BooleanField(default=False)
+```
+
+### 2. Permission Check Factory
+```python
+# core/permissions.py - Added to FEATURE_NAMES
+'can_use_calendar_sync': 'Calendar Sync',
+```
+
+### 3. OAuth Integration
+```python
+# core/oauth_views.py - Check when purpose is 'calendar'
+if purpose == 'calendar':
+    calendar_permission = HasFeaturePermission('can_use_calendar_sync')
+    if not calendar_permission().has_permission(request, self):
+        return Response({'error': 'Feature not available'}, status=403)
+```
+
+### 4. Calendar Sync Views
+```python
+# schedule/calendar_sync_views.py
+CalendarListView           # GET /api/calendar/list/
+CalendarSyncView           # POST /api/calendar/sync/
+CalendarDeleteView         # DELETE /api/calendar/disconnect/
+CalendarStatusView         # GET /api/calendar/status/
+```
+
+## How to Use
+
+### Enable for a Tenant
+```bash
+# Via Django shell
+from core.models import Tenant
+tenant = Tenant.objects.get(schema_name='demo')
+tenant.can_use_calendar_sync = True
+tenant.save()
+```
+
+### Use in ViewSet
+```python
+from rest_framework import viewsets
+from core.permissions import HasFeaturePermission
+
+class MyViewSet(viewsets.ModelViewSet):
+    permission_classes = [IsAuthenticated, HasFeaturePermission('can_use_calendar_sync')]
+```
+
+### Use in APIView
+```python
+from rest_framework.views import APIView
+
+class MyView(APIView):
+    permission_classes = [CalendarSyncPermission]
+    # CalendarSyncPermission = IsAuthenticated + has_feature check
+```
+
+## API Endpoints
+
+| Method | Endpoint | Description | Permission |
+|--------|----------|-------------|-----------|
+| GET | /api/calendar/status/ | Check if calendar sync is available | Auth only |
+| GET | /api/calendar/list/ | List connected calendars | Calendar sync |
+| POST | /api/calendar/sync/ | Start calendar sync | Calendar sync |
+| DELETE | /api/calendar/disconnect/ | Disconnect a calendar | Calendar sync |
+| POST | /api/oauth/google/initiate/ | Start Google OAuth for calendar | Calendar sync (if purpose=calendar) |
+| POST | /api/oauth/microsoft/initiate/ | Start MS OAuth for calendar | Calendar sync (if purpose=calendar) |
+
+## Testing
+
+### Run tests
+```bash
+cd /home/poduck/Desktop/smoothschedule2/smoothschedule
+docker compose -f docker-compose.local.yml exec django pytest schedule/tests/test_calendar_sync_permissions.py -v
+```
+
+### Test endpoints manually
+```bash
+# Check status (always works)
+curl http://lvh.me:8000/api/calendar/status/ -H "Authorization: Bearer <token>"
+
+# List calendars (requires permission)
+curl http://lvh.me:8000/api/calendar/list/ -H "Authorization: Bearer <token>"
+# Returns 403 if permission not granted
+```
+
+## Files Modified
+
+| File | Changes |
+|------|---------|
+| core/models.py | Added can_use_calendar_sync field |
+| core/permissions.py | Added to FEATURE_NAMES |
+| core/oauth_views.py | Added permission check for calendar |
+
+## Files Created
+
+| File | Purpose |
+|------|---------|
+| core/migrations/0016_tenant_can_use_calendar_sync.py | Database migration |
+| schedule/calendar_sync_views.py | Calendar sync API views |
+| schedule/calendar_sync_urls.py | URL routing |
+| schedule/tests/test_calendar_sync_permissions.py | Test suite |
+| CALENDAR_SYNC_INTEGRATION.md | Developer guide |
+
+## Permission Check Pattern
+
+```
+Request to calendar endpoint
+  ↓
+Check: Is user authenticated?
+  ├─ NO → 401 Unauthorized
+  └─ YES ↓
+Check: Does tenant have can_use_calendar_sync=True?
+  ├─ NO → 403 Forbidden (upgrade message)
+  └─ YES ↓
+Process request
+  ├─ Success → 200 OK
+  └─ Error → 500 Server Error
+```
+
+## Example: Full Permission Setup
+
+```python
+# 1. Enable feature for tenant
+from core.models import Tenant
+tenant = Tenant.objects.get(schema_name='demo')
+tenant.can_use_calendar_sync = True
+tenant.save()
+
+# 2. User tries to access calendar endpoint
+# GET /api/calendar/list/
+# → Check: tenant.has_feature('can_use_calendar_sync')
+# → True! → 200 OK with calendar list
+
+# 3. Without permission
+tenant.can_use_calendar_sync = False
+tenant.save()
+# GET /api/calendar/list/
+# → Check: tenant.has_feature('can_use_calendar_sync')
+# → False! → 403 Forbidden with upgrade message
+```
+
+## Related Documentation
+
+- **Full Guide:** `CALENDAR_SYNC_INTEGRATION.md` in smoothschedule/ folder
+- **Implementation Details:** `CALENDAR_SYNC_PERMISSION_IMPLEMENTATION.md` in project root
+- **Code:** `schedule/calendar_sync_views.py` (well-commented)
+- **Tests:** `schedule/tests/test_calendar_sync_permissions.py`
+
+## Common Tasks
+
+### Check if feature is enabled
+```python
+tenant.has_feature('can_use_calendar_sync')  # Returns bool
+```
+
+### Get list of connected calendars
+```python
+from core.models import OAuthCredential
+
+credentials = OAuthCredential.objects.filter(
+    tenant=tenant,
+    purpose='calendar',
+    is_valid=True
+)
+```
+
+### Handle permission denied
+```python
+from core.permissions import HasFeaturePermission
+
+permission = HasFeaturePermission('can_use_calendar_sync')
+if not permission().has_permission(request, view):
+    # User doesn't have permission
+    # Show upgrade prompt
+```
+
+## Notes
+
+- Feature defaults to **False** for all tenants (opt-in)
+- Works alongside existing subscription plan system
+- Follows same pattern as SMS reminders, webhooks, etc.
+- Multi-tenant isolation built-in
+- OAuth tokens are encrypted at rest
+- All operations logged for audit trail
--- a/README.md
+++ b/README.md
@@ -1,97 +1,60 @@
-# Smooth Schedule - Multi-Tenant SaaS Platform
+# SmoothSchedule - Multi-Tenant Scheduling Platform

-A production-grade Django skeleton with **strict data isolation** and **high-trust security** for resource orchestration.
+A production-ready multi-tenant SaaS platform for resource scheduling and orchestration.

 ## 🎯 Features

 - ✅ **Multi-Tenancy**: PostgreSQL schema-per-tenant using django-tenants
 - ✅ **8-Tier Role Hierarchy**: From SUPERUSER to CUSTOMER with strict permissions
- ✅ **Secure Masquerading**: django-hijack with custom permission matrix
- ✅ **Full Audit Trail**: Structured logging of all masquerade activity
- ✅ **Headless API**: Django Rest Framework (no server-side HTML)
- ✅ **Docker Ready**: Complete Docker Compose setup via cookiecutter-django
- ✅ **AWS Integration**: S3 storage + Route53 DNS for custom domains
+- ✅ **Modern Stack**: Django 5.2 + React 18 + Vite
+- ✅ **Docker Ready**: Complete production & development Docker Compose setup
+- ✅ **Cloud Storage**: DigitalOcean Spaces (S3-compatible) for static/media files
+- ✅ **Auto SSL**: Let's Encrypt certificates via Traefik reverse proxy
+- ✅ **Task Queue**: Celery + Redis for background jobs
+- ✅ **Real-time**: Django Channels + WebSockets support
+- ✅ **Production Ready**: Fully configured for deployment

-## 📋 Prerequisites
+## 📚 Documentation

- Python 3.9+
- PostgreSQL 14+
- Docker & Docker Compose
- Cookiecutter (`pip install cookiecutter`)
+- **[PRODUCTION_DEPLOYMENT.md](PRODUCTION_DEPLOYMENT.md)** - **Manual step-by-step production deployment** (start here for fresh deployments)
+- **[QUICK-REFERENCE.md](QUICK-REFERENCE.md)** - Common commands and quick start
+- **[PRODUCTION-READY.md](PRODUCTION-READY.md)** - Production deployment status
+- **[DEPLOYMENT.md](DEPLOYMENT.md)** - Comprehensive deployment guide
+- **[CLAUDE.md](CLAUDE.md)** - Development guide and architecture

 ## 🚀 Quick Start

-### 1. Run Setup Script
+### Local Development

 ```bash
-chmod +x setup_project.sh
-./setup_project.sh
+# Start backend (Django in Docker)
 cd smoothschedule
+docker compose -f docker-compose.local.yml up -d
+
+# Start frontend (React with Vite)
+cd ../frontend
+npm install
+npm run dev
+
+# Access the app
+# Frontend: http://platform.lvh.me:5173
+# Backend API: http://lvh.me:8000/api
 ```

-### 2. Configure Environment
+See [CLAUDE.md](CLAUDE.md) for detailed development instructions.

-Create `.env` file:
+### Production Deployment

-```env
-# Database
-POSTGRES_DB=smoothschedule_db
-POSTGRES_USER=smoothschedule_user
-POSTGRES_PASSWORD=your_secure_password
+For **fresh deployments or complete reset**, follow [PRODUCTION_DEPLOYMENT.md](PRODUCTION_DEPLOYMENT.md) for manual step-by-step instructions.

-# Django
-DJANGO_SECRET_KEY=your_secret_key_here
-DJANGO_DEBUG=True
-DJANGO_ALLOWED_HOSTS=localhost,127.0.0.1
-
-# AWS
-AWS_ACCESS_KEY_ID=your_aws_key
-AWS_SECRET_ACCESS_KEY=your_aws_secret
-AWS_STORAGE_BUCKET_NAME=smoothschedule-media
-AWS_ROUTE53_HOSTED_ZONE_ID=your_zone_id
-```
-
-### 3. Start Services
+For **routine updates**, use the automated script:

 ```bash
-docker-compose build
-docker-compose up -d
+# Deploy to production server (code changes only)
+./deploy.sh poduck@smoothschedule.com
 ```

-### 4. Run Migrations
-
-```bash
-# Shared schema
-docker-compose run --rm django python manage.py migrate_schemas --shared
-
-# Create superuser
-docker-compose run --rm django python manage.py createsuperuser
-```
-
-### 5. Create First Tenant
-
-```python
-docker-compose run --rm django python manage.py shell
-
-from core.models import Tenant, Domain
-
-tenant = Tenant.objects.create(
-    name="Demo Company",
-    schema_name="demo",
-    subscription_tier="PROFESSIONAL",
-)
-
-Domain.objects.create(
-    domain="demo.smoothschedule.local",
-    tenant=tenant,
-    is_primary=True,
-)
-```
-
-```bash
-# Run tenant migrations
-docker-compose run --rm django python manage.py migrate_schemas
-```
+See [PRODUCTION-READY.md](PRODUCTION-READY.md) for deployment checklist and [DEPLOYMENT.md](DEPLOYMENT.md) for detailed steps.

 ## 🏗️ Architecture

--- a/deploy.sh
+++ b/deploy.sh
@@ -0,0 +1,216 @@
+#!/bin/bash
+# SmoothSchedule Production Deployment Script
+# Usage: ./deploy.sh [server_user@server_host] [services...]
+# Example: ./deploy.sh poduck@smoothschedule.com           # Build all
+# Example: ./deploy.sh poduck@smoothschedule.com traefik   # Build only traefik
+# Example: ./deploy.sh poduck@smoothschedule.com django nginx  # Build django and nginx
+#
+# Available services: django, traefik, nginx, postgres, celeryworker, celerybeat, flower, awscli
+# Use --no-migrate to skip migrations (useful for config-only changes like traefik)
+#
+# This script deploys from git repository, not local files.
+# Changes must be committed and pushed before deploying.
+
+set -e
+
+# Colors for output
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+NC='\033[0m' # No Color
+
+# Parse arguments
+SERVER=""
+SERVICES=""
+SKIP_MIGRATE=false
+
+for arg in "$@"; do
+    if [[ "$arg" == "--no-migrate" ]]; then
+        SKIP_MIGRATE=true
+    elif [[ -z "$SERVER" ]]; then
+        SERVER="$arg"
+    else
+        SERVICES="$SERVICES $arg"
+    fi
+done
+
+SERVER=${SERVER:-"poduck@smoothschedule.com"}
+SERVICES=$(echo "$SERVICES" | xargs)  # Trim whitespace
+REPO_URL="https://git.talova.net/poduck/smoothschedule.git"
+REMOTE_DIR="/home/poduck/smoothschedule"
+
+echo -e "${GREEN}==================================="
+echo "SmoothSchedule Deployment"
+echo "===================================${NC}"
+echo "Target server: $SERVER"
+if [[ -n "$SERVICES" ]]; then
+    echo "Services to rebuild: $SERVICES"
+else
+    echo "Services to rebuild: ALL"
+fi
+if [[ "$SKIP_MIGRATE" == "true" ]]; then
+    echo "Migrations: SKIPPED"
+fi
+echo ""
+
+# Function to print status
+print_status() {
+    echo -e "${GREEN}>>> $1${NC}"
+}
+
+print_warning() {
+    echo -e "${YELLOW}>>> $1${NC}"
+}
+
+print_error() {
+    echo -e "${RED}>>> $1${NC}"
+}
+
+# Step 1: Check for uncommitted changes
+print_status "Step 1: Checking for uncommitted changes..."
+if [[ -n $(git status --porcelain) ]]; then
+    print_error "You have uncommitted changes. Please commit and push before deploying."
+    git status --short
+    exit 1
+fi
+
+# Check if local is ahead of remote
+LOCAL_COMMIT=$(git rev-parse HEAD)
+REMOTE_COMMIT=$(git rev-parse @{u} 2>/dev/null || echo "")
+
+if [[ -z "$REMOTE_COMMIT" ]]; then
+    print_error "No upstream branch configured. Please push your changes first."
+    exit 1
+fi
+
+if [[ "$LOCAL_COMMIT" != "$REMOTE_COMMIT" ]]; then
+    print_warning "Local branch differs from remote. Checking if ahead..."
+    AHEAD=$(git rev-list --count @{u}..HEAD)
+    if [[ "$AHEAD" -gt 0 ]]; then
+        print_error "You have $AHEAD unpushed commit(s). Please push before deploying."
+        exit 1
+    fi
+fi
+
+print_status "All changes committed and pushed!"
+
+# Step 2: Deploy on server
+print_status "Step 2: Deploying on server..."
+
+ssh "$SERVER" "bash -s" << ENDSSH
+set -e
+
+echo ">>> Setting up project directory..."
+
+# Backup .envs if they exist (secrets not in git)
+if [ -d "$REMOTE_DIR/smoothschedule/.envs" ]; then
+    echo ">>> Backing up .envs secrets..."
+    cp -r "$REMOTE_DIR/smoothschedule/.envs" /tmp/.envs-backup
+elif [ -d "$REMOTE_DIR/.envs" ]; then
+    # Old structure - .envs was at root level
+    echo ">>> Backing up .envs secrets (old location)..."
+    cp -r "$REMOTE_DIR/.envs" /tmp/.envs-backup
+fi
+
+# Backup .ssh if it exists (SSH keys not in git)
+if [ -d "$REMOTE_DIR/smoothschedule/.ssh" ]; then
+    echo ">>> Backing up .ssh keys..."
+    cp -r "$REMOTE_DIR/smoothschedule/.ssh" /tmp/.ssh-backup
+elif [ -d "$REMOTE_DIR/.ssh" ]; then
+    # Old structure
+    echo ">>> Backing up .ssh keys (old location)..."
+    cp -r "$REMOTE_DIR/.ssh" /tmp/.ssh-backup
+fi
+
+if [ ! -d "$REMOTE_DIR/.git" ]; then
+    echo ">>> Cloning repository for the first time..."
+    # Remove old non-git deployment if exists
+    if [ -d "$REMOTE_DIR" ]; then
+        rm -rf "$REMOTE_DIR"
+    fi
+    git clone "$REPO_URL" "$REMOTE_DIR"
+else
+    echo ">>> Repository exists, pulling latest changes..."
+    cd "$REMOTE_DIR"
+    git fetch origin
+    git reset --hard origin/main
+fi
+
+cd "$REMOTE_DIR"
+
+# Restore .envs secrets
+if [ -d /tmp/.envs-backup ] && [ "$(ls -A /tmp/.envs-backup 2>/dev/null)" ]; then
+    echo ">>> Restoring .envs secrets..."
+    mkdir -p "$REMOTE_DIR/smoothschedule/.envs"
+    cp -r /tmp/.envs-backup/* "$REMOTE_DIR/smoothschedule/.envs/"
+    rm -rf /tmp/.envs-backup
+fi
+
+# Restore .ssh keys
+if [ -d /tmp/.ssh-backup ] && [ "$(ls -A /tmp/.ssh-backup 2>/dev/null)" ]; then
+    echo ">>> Restoring .ssh keys..."
+    mkdir -p "$REMOTE_DIR/smoothschedule/.ssh"
+    cp -r /tmp/.ssh-backup/* "$REMOTE_DIR/smoothschedule/.ssh/"
+    rm -rf /tmp/.ssh-backup
+fi
+
+echo ">>> Current commit:"
+git log -1 --oneline
+
+cd smoothschedule
+
+# Build images (all or specific services)
+if [[ -n "$SERVICES" ]]; then
+    echo ">>> Building Docker images: $SERVICES..."
+    docker compose -f docker-compose.production.yml build $SERVICES
+else
+    echo ">>> Building all Docker images..."
+    docker compose -f docker-compose.production.yml build
+fi
+
+echo ">>> Starting containers..."
+docker compose -f docker-compose.production.yml up -d
+
+echo ">>> Waiting for containers to start..."
+sleep 5
+
+# Run migrations unless skipped
+if [[ "$SKIP_MIGRATE" != "true" ]]; then
+    echo ">>> Running database migrations..."
+    docker compose -f docker-compose.production.yml exec -T django sh -c 'export DATABASE_URL=postgres://\${POSTGRES_USER}:\${POSTGRES_PASSWORD}@\${POSTGRES_HOST}:\${POSTGRES_PORT}/\${POSTGRES_DB} && python manage.py migrate'
+
+    echo ">>> Collecting static files..."
+    docker compose -f docker-compose.production.yml exec -T django sh -c 'export DATABASE_URL=postgres://\${POSTGRES_USER}:\${POSTGRES_PASSWORD}@\${POSTGRES_HOST}:\${POSTGRES_PORT}/\${POSTGRES_DB} && python manage.py collectstatic --noinput'
+
+    echo ">>> Seeding/updating platform plugins for all tenants..."
+    docker compose -f docker-compose.production.yml exec -T django sh -c 'export DATABASE_URL=postgres://\${POSTGRES_USER}:\${POSTGRES_PASSWORD}@\${POSTGRES_HOST}:\${POSTGRES_PORT}/\${POSTGRES_DB} && python -c "
+from django_tenants.utils import get_tenant_model
+from django.core.management import call_command
+Tenant = get_tenant_model()
+for tenant in Tenant.objects.exclude(schema_name=\"public\"):
+    print(f\"  Seeding plugins for {tenant.schema_name}...\")
+    call_command(\"tenant_command\", \"seed_platform_plugins\", schema=tenant.schema_name, verbosity=0)
+print(\"  Done!\")
+"'
+else
+    echo ">>> Skipping migrations (--no-migrate flag used)"
+fi
+
+echo ">>> Deployment complete!"
+ENDSSH
+
+echo ""
+print_status "==================================="
+print_status "Deployment Complete!"
+print_status "==================================="
+echo ""
+echo "Your application should now be running at:"
+echo "  - https://smoothschedule.com"
+echo "  - https://platform.smoothschedule.com"
+echo "  - https://*.smoothschedule.com (tenant subdomains)"
+echo ""
+echo "To view logs:"
+echo "  ssh $SERVER 'cd ~/smoothschedule/smoothschedule && docker compose -f docker-compose.production.yml logs -f'"
+echo ""
+echo "To check status:"
+echo "  ssh $SERVER 'cd ~/smoothschedule/smoothschedule && docker compose -f docker-compose.production.yml ps'"
--- a/email_templates/README.md
+++ b/email_templates/README.md
@@ -0,0 +1,34 @@
+# Email Template Pack - Styles & Variations
+
+This directory contains a set of uniquely styled email templates. Each category offers multiple design aesthetics to suit different business brands.
+
+## Categories & Styles
+
+### 1. Appointment Confirmation (`/confirmation`)
+- **Modern Blue (`modern_blue.html`)**: Clean, corporate, uses `Segoe UI`, rounded corners, and a blue hero header. Ideal for medical, tech, or professional services.
+- **Classic Serif (`classic_serif.html`)**: Elegant, uses `Georgia/Times`, borders instead of shadows, warm beige background (`#faf9f6`). Perfect for law firms, salons, or luxury brands.
+- **Bold Dark (`bold_dark.html`)**: High contrast, dark mode aesthetic (`#111111` background), bold typography (`Helvetica Neue`), vibrant pink accents. Great for gyms, modern barbershops, or nightlife venues.
+
+### 2. Appointment Reminder (`/reminder`)
+- **Soft & Clean (`soft_clean.html`)**: Minimalist, uses circle imagery, ample whitespace, soft pink/rose color palette. Friendly and non-intrusive.
+- **Urgent Bold (`urgent_bold.html`)**: Uses red accents and bold `Arial Black` fonts to convey urgency. "Action Required" styling to reduce no-shows.
+- **Personal Note (`personal_note.html`)**: A simple, letter-style layout using serif fonts on a cream background. Feels like a handwritten note from the owner.
+
+### 3. Marketing / Welcome (`/marketing`)
+- **Vibrant (`welcome_vibrant.html`)**: Uses a gradient top bar, bold typography, and image collages. High energy, designed to excite new customers.
+- **Minimalist Promo (`minimalist_promo.html`)**: Monochromatic, fashion-forward design with a large hero image and a prominent discount code box. High impact.
+- **Newsletter Grid (`newsletter_grid.html`)**: A classic multi-column layout for monthly updates, featuring a main story and secondary news items. Clean and readable.
+
+### 4. Reports (`/reports`)
+- **Monthly Data (`monthly_data.html`)**: A utility-focused layout with a data grid, performance chart placeholder, and clean typography. Designed for clarity and readability.
+- **Weekly Snapshot (`weekly_cards.html`)**: A dashboard-style dark mode email with card-based statistics (Revenue, Bookings, etc.) for quick scanning.
+- **Staff Leaderboard (`staff_leaderboard.html`)**: A ranked list view with avatars and performance metrics to highlight top employees. Motivating and clear.
+
+## Image Assets
+Templates use `https://placehold.co` for dynamic image generation to ensure immediate previewability without requiring local asset hosting. 
+- **Banners**: 600x200px
+- **Icons**: 80x80px or 120x120px
+- **Colors**: Matched to the template theme (e.g., `#4f46e5` for modern blue).
+
+## Usage
+Copy the HTML code from the desired style file into your email sending service or SmoothSchedule template editor. Ensure all `{{TAGS}}` are replaced with actual data.
--- a/email_templates/confirmation/bold_dark.html
+++ b/email_templates/confirmation/bold_dark.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Appointment Confirmed - Bold</title>
+</head>
+<body style="margin: 0; padding: 0; background-color: #000000; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">
+    <table width="100%" cellpadding="0" cellspacing="0" role="presentation">
+        <tr>
+            <td align="center" style="padding: 20px;">
+                <table width="600" cellpadding="0" cellspacing="0" role="presentation" style="background-color: #111111; border-radius: 24px; overflow: hidden;">
+                    <!-- Header Image -->
+                    <tr>
+                        <td style="position: relative;">
+                            <img src="https://placehold.co/600x300/db2777/ffffff?text=CONFIRMED&font=montserrat" alt="Confirmed" style="width: 100%; height: auto; display: block;">
+                        </td>
+                    </tr>
+                    
+                    <!-- Content -->
+                    <tr>
+                        <td style="padding: 48px 40px;">
+                            <h1 style="margin: 0 0 16px; color: #ffffff; font-size: 32px; font-weight: 800; letter-spacing: -0.03em;">
+                                Ready for you, {{CUSTOMER_NAME}}.
+                            </h1>
+                            <p style="margin: 0 0 40px; color: #a1a1aa; font-size: 18px; line-height: 1.5;">
+                                Your slot is locked in. We've got everything prepared for your upcoming visit.
+                            </p>
+
+                            <!-- Grid Layout for Details -->
+                            <table width="100%" cellpadding="0" cellspacing="0" role="presentation">
+                                <tr>
+                                    <td width="48%" style="background-color: #18181b; padding: 24px; border-radius: 16px; vertical-align: top;">
+                                        <p style="margin: 0 0 8px; color: #db2777; font-size: 12px; font-weight: 700; text-transform: uppercase;">Service</p>
+                                        <p style="margin: 0; color: #ffffff; font-size: 16px; font-weight: 600;">{{APPOINTMENT_SERVICE}}</p>
+                                    </td>
+                                    <td width="4%"></td>
+                                    <td width="48%" style="background-color: #18181b; padding: 24px; border-radius: 16px; vertical-align: top;">
+                                        <p style="margin: 0 0 8px; color: #db2777; font-size: 12px; font-weight: 700; text-transform: uppercase;">When</p>
+                                        <p style="margin: 0; color: #ffffff; font-size: 16px; font-weight: 600;">{{APPOINTMENT_DATE}}<br><span style="color: #a1a1aa; font-weight: 400;">{{APPOINTMENT_TIME}}</span></p>
+                                    </td>
+                                </tr>
+                            </table>
+
+                            <!-- QR Code Placeholder -->
+                            <table width="100%" cellpadding="0" cellspacing="0" role="presentation" style="margin-top: 40px;">
+                                <tr>
+                                    <td align="center">
+                                        <div style="background-color: #ffffff; padding: 16px; border-radius: 12px; display: inline-block;">
+                                            <img src="https://placehold.co/150x150/000000/ffffff?text=QR+Code&font=roboto" alt="Check-in QR" style="display: block;">
+                                        </div>
+                                        <p style="margin: 16px 0 0; color: #52525b; font-size: 12px;">Scan at front desk to check in</p>
+                                    </td>
+                                </tr>
+                            </table>
+                        </td>
+                    </tr>
+
+                    <!-- Footer -->
+                    <tr>
+                        <td style="padding: 0 40px 40px; text-align: center;">
+                            <p style="margin: 0; color: #52525b; font-size: 14px;">
+                                {{BUSINESS_NAME}} • {{BUSINESS_PHONE}}
+                            </p>
+                        </td>
+                    </tr>
+                </table>
+            </td>
+        </tr>
+    </table>
+</body>
+</html>
--- a/email_templates/confirmation/classic_serif.html
+++ b/email_templates/confirmation/classic_serif.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Appointment Confirmed - Classic</title>
+</head>
+<body style="margin: 0; padding: 0; background-color: #faf9f6; font-family: 'Georgia', 'Times New Roman', serif;">
+    <table width="100%" cellpadding="0" cellspacing="0" role="presentation">
+        <tr>
+            <td align="center" style="padding: 40px 0;">
+                <table width="600" cellpadding="0" cellspacing="0" role="presentation" style="background-color: #ffffff; border: 1px solid #e7e5e4; border-top: 4px solid #1c1917;">
+                    <!-- Header -->
+                    <tr>
+                        <td style="padding: 40px 40px 20px; text-align: center;">
+                            <img src="https://placehold.co/120x60/1c1917/ffffff?text=LOGO&font=playfair-display" alt="Logo" style="height: 60px; width: auto;">
+                        </td>
+                    </tr>
+                    
+                    <!-- Content -->
+                    <tr>
+                        <td style="padding: 20px 60px 40px;">
+                            <h1 style="margin: 0 0 24px; color: #1c1917; font-size: 28px; font-weight: 400; text-align: center; letter-spacing: -0.02em;">
+                                Appointment Confirmation
+                            </h1>
+                            <p style="margin: 0 0 24px; color: #44403c; font-size: 16px; line-height: 1.8; text-align: center;">
+                                Dear {{CUSTOMER_NAME}},<br><br>
+                                We are pleased to confirm your appointment with {{BUSINESS_NAME}}. Please review the details below.
+                            </p>
+
+                            <!-- Divider -->
+                            <table width="100%" cellpadding="0" cellspacing="0" role="presentation">
+                                <tr>
+                                    <td style="border-bottom: 1px solid #e7e5e4; padding-bottom: 20px; margin-bottom: 20px;"></td>
+                                </tr>
+                            </table>
+
+                            <!-- Details -->
+                            <table width="100%" cellpadding="0" cellspacing="0" role="presentation" style="margin-top: 20px;">
+                                <tr>
+                                    <td style="padding: 12px 0; color: #78716c; font-family: 'Arial', sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em;">Service</td>
+                                    <td style="padding: 12px 0; text-align: right; color: #1c1917; font-size: 16px;">{{APPOINTMENT_SERVICE}}</td>
+                                </tr>
+                                <tr>
+                                    <td style="border-bottom: 1px solid #f5f5f4; padding: 0;" colspan="2"></td>
+                                </tr>
+                                <tr>
+                                    <td style="padding: 12px 0; color: #78716c; font-family: 'Arial', sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em;">Date</td>
+                                    <td style="padding: 12px 0; text-align: right; color: #1c1917; font-size: 16px;">{{APPOINTMENT_DATE}}</td>
+                                </tr>
+                                <tr>
+                                    <td style="border-bottom: 1px solid #f5f5f4; padding: 0;" colspan="2"></td>
+                                </tr>
+                                <tr>
+                                    <td style="padding: 12px 0; color: #78716c; font-family: 'Arial', sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em;">Time</td>
+                                    <td style="padding: 12px 0; text-align: right; color: #1c1917; font-size: 16px;">{{APPOINTMENT_TIME}}</td>
+                                </tr>
+                            </table>
+
+                            <!-- Map / Location Image Placeholder -->
+                            <div style="margin-top: 30px; border: 1px solid #e7e5e4; padding: 4px;">
+                                <img src="https://placehold.co/500x150/f5f5f4/a8a29e?text=Location+Map&font=lora" alt="Location" style="width: 100%; height: auto; display: block;">
+                            </div>
+
+                        </td>
+                    </tr>
+
+                    <!-- Footer -->
+                    <tr>
+                        <td style="background-color: #1c1917; padding: 30px; text-align: center;">
+                            <p style="margin: 0; color: #d6d3d1; font-family: 'Arial', sans-serif; font-size: 13px; line-height: 1.6;">
+                                {{BUSINESS_NAME}}<br>
+                                {{BUSINESS_PHONE}} | {{BUSINESS_EMAIL}}
+                            </p>
+                        </td>
+                    </tr>
+                </table>
+            </td>
+        </tr>
+    </table>
+</body>
+</html>
--- a/email_templates/confirmation/modern_blue.html
+++ b/email_templates/confirmation/modern_blue.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Appointment Confirmed - Modern</title>
+</head>
+<body style="margin: 0; padding: 0; background-color: #f3f4f6; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
+    <table width="100%" cellpadding="0" cellspacing="0" role="presentation">
+        <tr>
+            <td align="center" style="padding: 40px 0;">
+                <table width="600" cellpadding="0" cellspacing="0" role="presentation" style="background-color: #ffffff; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);">
+                    <!-- Hero Image Section -->
+                    <tr>
+                        <td style="background-color: #4f46e5; text-align: center;">
+                            <!-- Using a placeholder for the hero image -->
+                            <img src="https://placehold.co/600x200/4f46e5/ffffff?text=Appointment+Confirmed&font=roboto" alt="Appointment Confirmed" style="width: 100%; height: auto; display: block;">
+                        </td>
+                    </tr>
+                    
+                    <!-- Content Section -->
+                    <tr>
+                        <td style="padding: 40px;">
+                            <h1 style="margin: 0 0 20px; color: #111827; font-size: 24px; font-weight: 700; line-height: 1.2;">
+                                You're All Set, {{CUSTOMER_NAME}}!
+                            </h1>
+                            <p style="margin: 0 0 24px; color: #4b5563; font-size: 16px; line-height: 1.6;">
+                                We are excited to see you at <strong>{{BUSINESS_NAME}}</strong>. Your appointment has been confirmed for the following time:
+                            </p>
+
+                            <!-- Appointment Card -->
+                            <table width="100%" cellpadding="0" cellspacing="0" role="presentation" style="background-color: #f9fafb; border-radius: 12px; border: 1px solid #e5e7eb;">
+                                <tr>
+                                    <td style="padding: 24px;">
+                                        <table width="100%" cellpadding="0" cellspacing="0" role="presentation">
+                                            <tr>
+                                                <td style="padding-bottom: 16px; border-bottom: 1px solid #e5e7eb;">
+                                                    <p style="margin: 0; color: #6b7280; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;">Service</p>
+                                                    <p style="margin: 4px 0 0; color: #111827; font-size: 18px; font-weight: 600;">{{APPOINTMENT_SERVICE}}</p>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td style="padding-top: 16px;">
+                                                    <table width="100%" cellpadding="0" cellspacing="0" role="presentation">
+                                                        <tr>
+                                                            <td width="50%" valign="top">
+                                                                <p style="margin: 0; color: #6b7280; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;">Date</p>
+                                                                <p style="margin: 4px 0 0; color: #111827; font-size: 16px;">{{APPOINTMENT_DATE}}</p>
+                                                            </td>
+                                                            <td width="50%" valign="top">
+                                                                <p style="margin: 0; color: #6b7280; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;">Time</p>
+                                                                <p style="margin: 4px 0 0; color: #111827; font-size: 16px;">{{APPOINTMENT_TIME}}</p>
+                                                            </td>
+                                                        </tr>
+                                                    </table>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                            </table>
+
+                            <!-- CTA Button -->
+                            <table width="100%" cellpadding="0" cellspacing="0" role="presentation" style="margin-top: 32px;">
+                                <tr>
+                                    <td align="center">
+                                        <a href="#" style="display: inline-block; background-color: #4f46e5; color: #ffffff; font-size: 16px; font-weight: 600; text-decoration: none; padding: 12px 32px; border-radius: 8px; transition: background-color 0.2s;">
+                                            Manage Appointment
+                                        </a>
+                                    </td>
+                                </tr>
+                            </table>
+                        </td>
+                    </tr>
+
+                    <!-- Footer -->
+                    <tr>
+                        <td style="background-color: #1f2937; padding: 32px; text-align: center;">
+                            <img src="https://placehold.co/40x40/ffffff/1f2937?text=L" alt="Logo" style="width: 40px; height: 40px; border-radius: 8px; margin-bottom: 16px;">
+                            <p style="margin: 0 0 8px; color: #9ca3af; font-size: 14px;">
+                                {{BUSINESS_NAME}}
+                            </p>
+                            <p style="margin: 0; color: #6b7280; font-size: 12px;">
+                                {{BUSINESS_PHONE}} • {{BUSINESS_EMAIL}}
+                            </p>
+                        </td>
+                    </tr>
+                </table>
+            </td>
+        </tr>
+    </table>
+</body>
+</html>
--- a/email_templates/marketing/minimalist_promo.html
+++ b/email_templates/marketing/minimalist_promo.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Marketing - Minimalist Promo</title>
+</head>
+<body style="margin: 0; padding: 0; background-color: #ffffff; font-family: 'Courier New', Courier, monospace;">
+    <table width="100%" cellpadding="0" cellspacing="0" role="presentation">
+        <tr>
+            <td align="center" style="padding: 40px 20px;">
+                <table width="600" cellpadding="0" cellspacing="0" role="presentation" style="border: 2px solid #000000;">
+                    <!-- Big Hero Image -->
+                    <tr>
+                        <td>
+                            <img src="https://placehold.co/600x400/000000/ffffff?text=FLASH+SALE&font=monoton" alt="Flash Sale" style="width: 100%; height: auto; display: block;">
+                        </td>
+                    </tr>
+                    
+                    <!-- Content -->
+                    <tr>
+                        <td style="padding: 40px; text-align: center;">
+                            <h1 style="margin: 0 0 20px; color: #000000; font-size: 36px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px;">
+                                limited time only
+                            </h1>
+                            <p style="margin: 0 0 40px; color: #333333; font-size: 16px; line-height: 1.6; font-family: 'Helvetica', sans-serif;">
+                                Treat yourself to something special. For the next 48 hours, get exclusive access to our VIP booking slots and a special discount.
+                            </p>
+
+                            <!-- Coupon Code Box -->
+                            <div style="border: 2px dashed #000000; padding: 20px; display: inline-block; margin-bottom: 40px;">
+                                <p style="margin: 0 0 5px; font-size: 12px; color: #666; font-family: sans-serif;">USE CODE:</p>
+                                <span style="font-size: 32px; font-weight: 900; color: #d946ef;">VIP20</span>
+                            </div>
+
+                            <br>
+
+                            <a href="#" style="background-color: #000000; color: #ffffff; padding: 18px 40px; text-decoration: none; font-weight: bold; font-size: 14px; text-transform: uppercase; display: inline-block;">
+                                Claim Offer
+                            </a>
+                        </td>
+                    </tr>
+
+                    <!-- Footer -->
+                    <tr>
+                        <td style="border-top: 2px solid #000000; padding: 20px; text-align: center;">
+                            <p style="margin: 0; font-size: 12px; color: #000000;">
+                                {{BUSINESS_NAME}}
+                            </p>
+                        </td>
+                    </tr>
+                </table>
+            </td>
+        </tr>
+    </table>
+</body>
+</html>
--- a/email_templates/marketing/newsletter_grid.html
+++ b/email_templates/marketing/newsletter_grid.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Marketing - Newsletter Grid</title>
+</head>
+<body style="margin: 0; padding: 0; background-color: #e5e7eb; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
+    <table width="100%" cellpadding="0" cellspacing="0" role="presentation">
+        <!-- Top Bar -->
+        <tr>
+            <td style="background-color: #374151; padding: 10px 0; text-align: center; color: #d1d5db; font-size: 12px;">
+                View this email in your browser
+            </td>
+        </tr>
+
+        <tr>
+            <td align="center" style="padding: 40px 20px;">
+                <!-- Logo Header -->
+                <table width="640" cellpadding="0" cellspacing="0" role="presentation" style="margin-bottom: 20px;">
+                    <tr>
+                        <td align="center">
+                            <h1 style="margin: 0; color: #1f2937; font-size: 28px; font-weight: 300; letter-spacing: 1px;">{{BUSINESS_NAME}} <span style="color: #3b82f6; font-weight: 700;">MONTHLY</span></h1>
+                        </td>
+                    </tr>
+                </table>
+
+                <!-- Main Feature -->
+                <table width="640" cellpadding="0" cellspacing="0" role="presentation" style="background-color: #ffffff; margin-bottom: 20px;">
+                    <tr>
+                        <td>
+                            <img src="https://placehold.co/640x320/3b82f6/ffffff?text=New+Service+Launch&font=roboto" alt="Feature" style="width: 100%; height: auto; display: block;">
+                        </td>
+                    </tr>
+                    <tr>
+                        <td style="padding: 30px;">
+                            <h2 style="margin: 0 0 10px; color: #111827; font-size: 24px;">Introducing Our New Premium Service</h2>
+                            <p style="margin: 0 0 20px; color: #4b5563; line-height: 1.6;">
+                                We've been listening to your feedback and are excited to announce a brand new way to experience {{BUSINESS_NAME}}. Our new premium tier offers extended hours and dedicated support.
+                            </p>
+                            <a href="#" style="color: #3b82f6; text-decoration: none; font-weight: 600;">Read more &rarr;</a>
+                        </td>
+                    </tr>
+                </table>
+
+                <!-- Two Column Grid -->
+                <table width="640" cellpadding="0" cellspacing="0" role="presentation">
+                    <tr>
+                        <td width="310" valign="top" style="background-color: #ffffff; padding-bottom: 20px;">
+                            <img src="https://placehold.co/310x200/10b981/ffffff?text=Staff+Spotlight" alt="Staff" style="width: 100%; height: auto; display: block;">
+                            <div style="padding: 20px;">
+                                <h3 style="margin: 0 0 10px; color: #111827; font-size: 18px;">Employee of the Month</h3>
+                                <p style="margin: 0 0 15px; color: #6b7280; font-size: 14px; line-height: 1.5;">
+                                    Meet Sarah, our lead specialist who has gone above and beyond this month.
+                                </p>
+                            </div>
+                        </td>
+                        <td width="20"><!-- Gutter --></td>
+                        <td width="310" valign="top" style="background-color: #ffffff; padding-bottom: 20px;">
+                            <img src="https://placehold.co/310x200/f59e0b/ffffff?text=Community" alt="Community" style="width: 100%; height: auto; display: block;">
+                            <div style="padding: 20px;">
+                                <h3 style="margin: 0 0 10px; color: #111827; font-size: 18px;">Community Events</h3>
+                                <p style="margin: 0 0 15px; color: #6b7280; font-size: 14px; line-height: 1.5;">
+                                    Join us this weekend for our local charity drive.
+                                </p>
+                            </div>
+                        </td>
+                    </tr>
+                </table>
+
+                <!-- Footer -->
+                <table width="640" cellpadding="0" cellspacing="0" role="presentation" style="margin-top: 40px;">
+                    <tr>
+                        <td align="center">
+                            <p style="margin: 0 0 10px; color: #9ca3af; font-size: 12px;">
+                                © {{TODAY}} {{BUSINESS_NAME}}. All rights reserved.
+                            </p>
+                            <p style="margin: 0; color: #9ca3af; font-size: 12px;">
+                                {{BUSINESS_ADDRESS}}
+                            </p>
+                        </td>
+                    </tr>
+                </table>
+            </td>
+        </tr>
+    </table>
+</body>
+</html>
--- a/email_templates/marketing/welcome_vibrant.html
+++ b/email_templates/marketing/welcome_vibrant.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Marketing - Vibrant</title>
+</head>
+<body style="margin: 0; padding: 0; background-color: #ffffff; font-family: 'Verdana', sans-serif;">
+    <table width="100%" cellpadding="0" cellspacing="0" role="presentation">
+        <!-- Colorful Top Bar -->
+        <tr>
+            <td height="8" style="background: linear-gradient(90deg, #8b5cf6 0%, #ec4899 100%);"></td>
+        </tr>
+        
+        <tr>
+            <td align="center" style="padding: 40px 20px;">
+                <table width="600" cellpadding="0" cellspacing="0" role="presentation">
+                    <!-- Logo -->
+                    <tr>
+                        <td align="center" style="padding-bottom: 40px;">
+                            <img src="https://placehold.co/80x80/8b5cf6/ffffff?text=S&font=montserrat" alt="SmoothSchedule" style="display: block; border-radius: 50%;">
+                        </td>
+                    </tr>
+
+                    <!-- Hero -->
+                    <tr>
+                        <td align="center">
+                            <h1 style="margin: 0 0 20px; color: #111827; font-size: 42px; font-weight: 900; letter-spacing: -1px;">
+                                Welcome to the family.
+                            </h1>
+                            <p style="margin: 0 0 40px; color: #6b7280; font-size: 18px; max-width: 480px;">
+                                Thanks for joining <strong>{{BUSINESS_NAME}}</strong>! We're thrilled to have you on board.
+                            </p>
+                        </td>
+                    </tr>
+
+                    <!-- Hero Image collage -->
+                    <tr>
+                        <td style="padding-bottom: 40px;">
+                            <img src="https://placehold.co/600x300/f3f4f6/d1d5db?text=Lifestyle+Image+Collage" alt="Lifestyle" style="width: 100%; height: auto; border-radius: 12px; display: block;">
+                        </td>
+                    </tr>
+
+                    <!-- Features Grid -->
+                    <tr>
+                        <td>
+                            <table width="100%" cellpadding="0" cellspacing="0" role="presentation">
+                                <tr>
+                                    <td width="33%" valign="top" style="padding-right: 10px;">
+                                        <h3 style="margin: 0 0 8px; color: #111827; font-size: 16px;">Expert Staff</h3>
+                                        <p style="margin: 0; color: #6b7280; font-size: 14px; line-height: 1.5;">Top-tier professionals ready to serve.</p>
+                                    </td>
+                                    <td width="33%" valign="top" style="padding: 0 10px;">
+                                        <h3 style="margin: 0 0 8px; color: #111827; font-size: 16px;">Easy Booking</h3>
+                                        <p style="margin: 0; color: #6b7280; font-size: 14px; line-height: 1.5;">Schedule anytime, anywhere.</p>
+                                    </td>
+                                    <td width="33%" valign="top" style="padding-left: 10px;">
+                                        <h3 style="margin: 0 0 8px; color: #111827; font-size: 16px;">Best Value</h3>
+                                        <p style="margin: 0; color: #6b7280; font-size: 14px; line-height: 1.5;">Premium service at great rates.</p>
+                                    </td>
+                                </tr>
+                            </table>
+                        </td>
+                    </tr>
+
+                    <!-- CTA -->
+                    <tr>
+                        <td align="center" style="padding-top: 60px;">
+                            <a href="#" style="background-color: #111827; color: #ffffff; padding: 16px 40px; border-radius: 50px; text-decoration: none; font-weight: 600; font-size: 16px;">Book Your First Visit</a>
+                        </td>
+                    </tr>
+                </table>
+            </td>
+        </tr>
+    </table>
+</body>
+</html>
--- a/email_templates/reminder/personal_note.html
+++ b/email_templates/reminder/personal_note.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Reminder - Personal Note</title>
+</head>
+<body style="margin: 0; padding: 0; background-color: #fdfbf7; font-family: 'Georgia', serif;">
+    <table width="100%" cellpadding="0" cellspacing="0" role="presentation">
+        <tr>
+            <td align="center" style="padding: 60px 20px;">
+                <table width="500" cellpadding="0" cellspacing="0" role="presentation" style="background-color: #ffffff; border: 1px solid #e7e5e4; padding: 60px 40px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);">
+                    <tr>
+                        <td>
+                            <p style="margin: 0 0 20px; font-size: 16px; color: #44403c; line-height: 1.6;">
+                                Dear {{CUSTOMER_NAME}},
+                            </p>
+                            <p style="margin: 0 0 20px; font-size: 16px; color: #44403c; line-height: 1.6;">
+                                I'm writing to confirm that we're still on for your <strong>{{APPOINTMENT_SERVICE}}</strong> tomorrow, <strong>{{APPOINTMENT_DATE}}</strong> at <strong>{{APPOINTMENT_TIME}}</strong>.
+                            </p>
+                            <p style="margin: 0 0 40px; font-size: 16px; color: #44403c; line-height: 1.6;">
+                                Looking forward to our session.
+                            </p>
+                            <p style="margin: 0; font-size: 16px; color: #44403c; line-height: 1.6;">
+                                Warmly,<br><br>
+                                <span style="font-style: italic; font-size: 18px; color: #1c1917;">{{BUSINESS_NAME}}</span>
+                            </p>
+                        </td>
+                    </tr>
+                </table>
+                <p style="margin-top: 20px; font-family: sans-serif; font-size: 12px; color: #a8a29e; text-align: center;">
+                    <a href="#" style="color: #a8a29e; text-decoration: underline;">Reschedule</a> or <a href="#" style="color: #a8a29e; text-decoration: underline;">Cancel</a>
+                </p>
+            </td>
+        </tr>
+    </table>
+</body>
+</html>
--- a/email_templates/reminder/soft_clean.html
+++ b/email_templates/reminder/soft_clean.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Reminder - Soft & Clean</title>
+</head>
+<body style="margin: 0; padding: 0; background-color: #fff1f2; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">
+    <table width="100%" cellpadding="0" cellspacing="0" role="presentation">
+        <tr>
+            <td align="center" style="padding: 60px 0;">
+                <table width="500" cellpadding="0" cellspacing="0" role="presentation" style="background-color: #ffffff; border-radius: 20px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.01);">
+                    <!-- Circle Image Top -->
+                    <tr>
+                        <td align="center" style="padding-top: 40px;">
+                            <img src="https://placehold.co/120x120/fb7185/ffffff?text=Soon&font=playfair-display" alt="Soon" style="width: 120px; height: 120px; border-radius: 50%; object-fit: cover; display: block;">
+                        </td>
+                    </tr>
+                    
+                    <!-- Content -->
+                    <tr>
+                        <td style="padding: 30px 50px 50px; text-align: center;">
+                            <h1 style="margin: 0 0 16px; color: #881337; font-size: 24px; font-weight: 600;">
+                                Just a Friendly Reminder
+                            </h1>
+                            <p style="margin: 0 0 32px; color: #4c0519; font-size: 16px; line-height: 1.6;">
+                                Hi {{CUSTOMER_NAME}}, your appointment with {{BUSINESS_NAME}} is coming up soon!
+                            </p>
+
+                            <div style="background-color: #fff1f2; border-radius: 12px; padding: 20px; display: inline-block; width: 100%; box-sizing: border-box;">
+                                <p style="margin: 0 0 8px; color: #be123c; font-size: 18px; font-weight: 700;">{{APPOINTMENT_DATE}}</p>
+                                <p style="margin: 0; color: #9f1239; font-size: 24px; font-weight: 300;">{{APPOINTMENT_TIME}}</p>
+                            </div>
+
+                            <p style="margin: 32px 0 0; color: #9ca3af; font-size: 13px;">
+                                Need to make changes? <a href="#" style="color: #fb7185; text-decoration: underline;">Reschedule here</a>
+                            </p>
+                        </td>
+                    </tr>
+                </table>
+                
+                <!-- Simple Footer -->
+                <table width="500" cellpadding="0" cellspacing="0" role="presentation">
+                    <tr>
+                        <td style="padding-top: 20px; text-align: center;">
+                            <p style="margin: 0; color: #f43f5e; font-size: 12px;">
+                                {{BUSINESS_NAME}}
+                            </p>
+                        </td>
+                    </tr>
+                </table>
+            </td>
+        </tr>
+    </table>
+</body>
+</html>
--- a/email_templates/reminder/urgent_bold.html
+++ b/email_templates/reminder/urgent_bold.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Reminder - Urgent</title>
+</head>
+<body style="margin: 0; padding: 0; background-color: #fef2f2; font-family: 'Arial Black', 'Arial Bold', sans-serif;">
+    <table width="100%" cellpadding="0" cellspacing="0" role="presentation">
+        <tr>
+            <td align="center" style="padding: 20px;">
+                <table width="100%" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px; border-left: 8px solid #ef4444; background-color: #ffffff;">
+                    <tr>
+                        <td style="padding: 40px;">
+                            <p style="margin: 0 0 10px; color: #ef4444; font-size: 14px; letter-spacing: 1px; text-transform: uppercase;">Action Required</p>
+                            <h1 style="margin: 0 0 30px; color: #111827; font-size: 36px; line-height: 1;">
+                                Don't Forget<br>Your Visit.
+                            </h1>
+                            
+                            <img src="https://placehold.co/520x250/ef4444/ffffff?text=TOMORROW&font=oswald" alt="Tomorrow" style="width: 100%; height: auto; display: block; margin-bottom: 30px;">
+
+                            <p style="margin: 0 0 20px; color: #374151; font-family: 'Arial', sans-serif; font-size: 16px; line-height: 1.6;">
+                                <strong>{{CUSTOMER_NAME}}</strong>, we're holding your spot for <strong>{{APPOINTMENT_SERVICE}}</strong>.
+                            </p>
+
+                            <table width="100%" cellpadding="0" cellspacing="0" role="presentation" style="background-color: #111827; color: #ffffff; padding: 20px;">
+                                <tr>
+                                    <td align="center">
+                                        <p style="margin: 0; font-size: 20px;">{{APPOINTMENT_DATE}} @ {{APPOINTMENT_TIME}}</p>
+                                    </td>
+                                </tr>
+                            </table>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td style="background-color: #f3f4f6; padding: 20px; text-align: center;">
+                            <p style="margin: 0; color: #6b7280; font-family: 'Arial', sans-serif; font-size: 12px;">
+                                {{BUSINESS_NAME}} - {{BUSINESS_PHONE}}
+                            </p>
+                        </td>
+                    </tr>
+                </table>
+            </td>
+        </tr>
+    </table>
+</body>
+</html>
--- a/email_templates/reports/monthly_data.html
+++ b/email_templates/reports/monthly_data.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Monthly Report - Data Heavy</title>
+</head>
+<body style="margin: 0; padding: 0; background-color: #f8fafc; font-family: 'Roboto', 'Helvetica', sans-serif;">
+    <table width="100%" cellpadding="0" cellspacing="0" role="presentation">
+        <tr>
+            <td align="center" style="padding: 20px;">
+                <!-- Header -->
+                <table width="100%" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 800px; margin-bottom: 20px;">
+                    <tr>
+                        <td style="padding: 20px 0;">
+                            <h1 style="margin: 0; color: #0f172a; font-size: 20px; font-weight: 500;">
+                                <span style="color: #3b82f6; font-weight: 700;">Smooth</span>Schedule Report
+                            </h1>
+                        </td>
+                        <td align="right">
+                            <p style="margin: 0; color: #64748b; font-size: 14px;">{{TODAY}}</p>
+                        </td>
+                    </tr>
+                </table>
+
+                <!-- Main Card -->
+                <table width="100%" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 800px; background-color: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px;">
+                    <tr>
+                        <td style="padding: 30px;">
+                            <h2 style="margin: 0 0 20px; color: #0f172a; font-size: 18px;">Performance Summary</h2>
+                            
+                            <!-- Chart Placeholder -->
+                            <img src="https://placehold.co/740x200/f1f5f9/94a3b8?text=Interactive+Revenue+Chart&font=roboto" alt="Chart" style="width: 100%; height: auto; border-radius: 4px; margin-bottom: 30px;">
+
+                            <!-- Data Grid -->
+                            <table width="100%" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse: collapse;">
+                                <tr style="background-color: #f8fafc;">
+                                    <th style="text-align: left; padding: 12px; border-bottom: 2px solid #e2e8f0; color: #475569; font-size: 12px; text-transform: uppercase;">Metric</th>
+                                    <th style="text-align: right; padding: 12px; border-bottom: 2px solid #e2e8f0; color: #475569; font-size: 12px; text-transform: uppercase;">Value</th>
+                                    <th style="text-align: right; padding: 12px; border-bottom: 2px solid #e2e8f0; color: #475569; font-size: 12px; text-transform: uppercase;">Change</th>
+                                </tr>
+                                <tr>
+                                    <td style="padding: 12px; border-bottom: 1px solid #e2e8f0; color: #1e293b;">Total Revenue</td>
+                                    <td style="padding: 12px; border-bottom: 1px solid #e2e8f0; text-align: right; color: #1e293b; font-weight: 600;">$12,450</td>
+                                    <td style="padding: 12px; border-bottom: 1px solid #e2e8f0; text-align: right; color: #10b981;">+12% ▲</td>
+                                </tr>
+                                <tr>
+                                    <td style="padding: 12px; border-bottom: 1px solid #e2e8f0; color: #1e293b;">Appointments</td>
+                                    <td style="padding: 12px; border-bottom: 1px solid #e2e8f0; text-align: right; color: #1e293b; font-weight: 600;">142</td>
+                                    <td style="padding: 12px; border-bottom: 1px solid #e2e8f0; text-align: right; color: #10b981;">+5% ▲</td>
+                                </tr>
+                                <tr>
+                                    <td style="padding: 12px; border-bottom: 1px solid #e2e8f0; color: #1e293b;">New Customers</td>
+                                    <td style="padding: 12px; border-bottom: 1px solid #e2e8f0; text-align: right; color: #1e293b; font-weight: 600;">28</td>
+                                    <td style="padding: 12px; border-bottom: 1px solid #e2e8f0; text-align: right; color: #ef4444;">-2% ▼</td>
+                                </tr>
+                            </table>
+
+                            <p style="margin: 20px 0 0; color: #64748b; font-size: 14px;">
+                                This report was automatically generated for <strong>{{BUSINESS_NAME}}</strong>.
+                            </p>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td style="background-color: #f1f5f9; padding: 15px 30px; text-align: center; border-top: 1px solid #e2e8f0;">
+                            <a href="#" style="color: #3b82f6; font-size: 14px; text-decoration: none; font-weight: 500;">View Full Report in Dashboard →</a>
+                        </td>
+                    </tr>
+                </table>
+            </td>
+        </tr>
+    </table>
+</body>
+</html>
--- a/email_templates/reports/staff_leaderboard.html
+++ b/email_templates/reports/staff_leaderboard.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Report - Staff Leaderboard</title>
+</head>
+<body style="margin: 0; padding: 0; background-color: #f3f4f6; font-family: 'Arial', sans-serif;">
+    <table width="100%" cellpadding="0" cellspacing="0" role="presentation">
+        <tr>
+            <td align="center" style="padding: 40px 20px;">
+                <table width="600" cellpadding="0" cellspacing="0" role="presentation" style="background-color: #ffffff; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
+                    <!-- Header -->
+                    <tr>
+                        <td style="padding: 30px; border-bottom: 1px solid #e5e7eb;">
+                            <h1 style="margin: 0; color: #111827; font-size: 20px;">Staff Performance</h1>
+                            <p style="margin: 5px 0 0; color: #6b7280; font-size: 14px;">Top performers for {{TODAY}}</p>
+                        </td>
+                    </tr>
+
+                    <!-- List -->
+                    <tr>
+                        <td style="padding: 0 30px;">
+                            <table width="100%" cellpadding="0" cellspacing="0" role="presentation">
+                                <!-- Item 1 -->
+                                <tr>
+                                    <td style="padding: 20px 0; border-bottom: 1px solid #f3f4f6;">
+                                        <table width="100%" cellpadding="0" cellspacing="0" role="presentation">
+                                            <tr>
+                                                <td width="50">
+                                                    <img src="https://placehold.co/40x40/10b981/ffffff?text=1" alt="Rank 1" style="border-radius: 50%; display: block;">
+                                                </td>
+                                                <td>
+                                                    <p style="margin: 0; font-weight: 600; color: #111827;">Sarah Johnson</p>
+                                                    <p style="margin: 2px 0 0; font-size: 12px; color: #6b7280;">32 Appointments</p>
+                                                </td>
+                                                <td align="right" width="100">
+                                                    <p style="margin: 0; font-weight: 700; color: #10b981;">$3,200</p>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                                <!-- Item 2 -->
+                                <tr>
+                                    <td style="padding: 20px 0; border-bottom: 1px solid #f3f4f6;">
+                                        <table width="100%" cellpadding="0" cellspacing="0" role="presentation">
+                                            <tr>
+                                                <td width="50">
+                                                    <img src="https://placehold.co/40x40/3b82f6/ffffff?text=2" alt="Rank 2" style="border-radius: 50%; display: block;">
+                                                </td>
+                                                <td>
+                                                    <p style="margin: 0; font-weight: 600; color: #111827;">Mike Chen</p>
+                                                    <p style="margin: 2px 0 0; font-size: 12px; color: #6b7280;">28 Appointments</p>
+                                                </td>
+                                                <td align="right" width="100">
+                                                    <p style="margin: 0; font-weight: 700; color: #111827;">$2,850</p>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                                <!-- Item 3 -->
+                                <tr>
+                                    <td style="padding: 20px 0;">
+                                        <table width="100%" cellpadding="0" cellspacing="0" role="presentation">
+                                            <tr>
+                                                <td width="50">
+                                                    <img src="https://placehold.co/40x40/6b7280/ffffff?text=3" alt="Rank 3" style="border-radius: 50%; display: block;">
+                                                </td>
+                                                <td>
+                                                    <p style="margin: 0; font-weight: 600; color: #111827;">Jessica Williams</p>
+                                                    <p style="margin: 2px 0 0; font-size: 12px; color: #6b7280;">25 Appointments</p>
+                                                </td>
+                                                <td align="right" width="100">
+                                                    <p style="margin: 0; font-weight: 700; color: #111827;">$2,100</p>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                            </table>
+                        </td>
+                    </tr>
+
+                    <!-- Footer -->
+                    <tr>
+                        <td style="background-color: #f9fafb; padding: 20px 30px; border-radius: 0 0 12px 12px;">
+                            <p style="margin: 0; font-size: 13px; color: #6b7280; text-align: center;">
+                                Great work team! 🚀
+                            </p>
+                        </td>
+                    </tr>
+                </table>
+            </td>
+        </tr>
+    </table>
+</body>
+</html>
--- a/email_templates/reports/weekly_cards.html
+++ b/email_templates/reports/weekly_cards.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Report - Weekly Snapshot</title>
+</head>
+<body style="margin: 0; padding: 0; background-color: #1e293b; font-family: 'Roboto', sans-serif;">
+    <table width="100%" cellpadding="0" cellspacing="0" role="presentation">
+        <tr>
+            <td align="center" style="padding: 40px 20px;">
+                <table width="600" cellpadding="0" cellspacing="0" role="presentation">
+                    <!-- Header -->
+                    <tr>
+                        <td style="padding-bottom: 30px;">
+                            <h1 style="margin: 0; color: #ffffff; font-size: 24px;">Weekly Snapshot</h1>
+                            <p style="margin: 5px 0 0; color: #94a3b8;">Week of {{TODAY}}</p>
+                        </td>
+                    </tr>
+
+                    <!-- Stats Grid -->
+                    <tr>
+                        <td>
+                            <table width="100%" cellpadding="0" cellspacing="0" role="presentation">
+                                <tr>
+                                    <!-- Card 1 -->
+                                    <td width="290" style="background-color: #334155; border-radius: 8px; padding: 25px; vertical-align: top;">
+                                        <img src="https://placehold.co/40x40/3b82f6/ffffff?text=$" alt="Revenue" style="width: 40px; height: 40px; border-radius: 8px; margin-bottom: 15px;">
+                                        <p style="margin: 0 0 5px; color: #94a3b8; font-size: 13px; text-transform: uppercase;">Revenue</p>
+                                        <p style="margin: 0; color: #ffffff; font-size: 28px; font-weight: 700;">$4,250</p>
+                                        <p style="margin: 5px 0 0; color: #4ade80; font-size: 12px;">↑ 15% vs last week</p>
+                                    </td>
+                                    <td width="20"></td>
+                                    <!-- Card 2 -->
+                                    <td width="290" style="background-color: #334155; border-radius: 8px; padding: 25px; vertical-align: top;">
+                                        <img src="https://placehold.co/40x40/8b5cf6/ffffff?text=#" alt="Bookings" style="width: 40px; height: 40px; border-radius: 8px; margin-bottom: 15px;">
+                                        <p style="margin: 0 0 5px; color: #94a3b8; font-size: 13px; text-transform: uppercase;">Bookings</p>
+                                        <p style="margin: 0; color: #ffffff; font-size: 28px; font-weight: 700;">84</p>
+                                        <p style="margin: 5px 0 0; color: #94a3b8; font-size: 12px;">→ Stable</p>
+                                    </td>
+                                </tr>
+                                <tr><td height="20"></td></tr>
+                                <tr>
+                                    <!-- Card 3 -->
+                                    <td width="290" style="background-color: #334155; border-radius: 8px; padding: 25px; vertical-align: top;">
+                                        <img src="https://placehold.co/40x40/f59e0b/ffffff?text=★" alt="Rating" style="width: 40px; height: 40px; border-radius: 8px; margin-bottom: 15px;">
+                                        <p style="margin: 0 0 5px; color: #94a3b8; font-size: 13px; text-transform: uppercase;">Avg Rating</p>
+                                        <p style="margin: 0; color: #ffffff; font-size: 28px; font-weight: 700;">4.9</p>
+                                    </td>
+                                    <td width="20"></td>
+                                    <!-- Card 4 -->
+                                    <td width="290" style="background-color: #334155; border-radius: 8px; padding: 25px; vertical-align: top;">
+                                        <img src="https://placehold.co/40x40/ef4444/ffffff?text=!" alt="Cancellations" style="width: 40px; height: 40px; border-radius: 8px; margin-bottom: 15px;">
+                                        <p style="margin: 0 0 5px; color: #94a3b8; font-size: 13px; text-transform: uppercase;">Cancellations</p>
+                                        <p style="margin: 0; color: #ffffff; font-size: 28px; font-weight: 700;">3</p>
+                                    </td>
+                                </tr>
+                            </table>
+                        </td>
+                    </tr>
+
+                    <!-- Footer -->
+                    <tr>
+                        <td style="padding-top: 40px; text-align: center;">
+                            <a href="#" style="color: #3b82f6; text-decoration: none; font-size: 14px;">View detailed analytics</a>
+                        </td>
+                    </tr>
+                </table>
+            </td>
+        </tr>
+    </table>
+</body>
+</html>
--- a/frontend/.env.development
+++ b/frontend/.env.development
@@ -1,2 +1,4 @@
 VITE_DEV_MODE=true
-VITE_API_URL=http://lvh.me:8000
+VITE_API_URL=http://api.lvh.me:8000
+VITE_STRIPE_PUBLISHABLE_KEY=pk_test_51Sa2i4G4IkZ6cJFI77f9dXf1ljmDPAInxbjLCJRRJk4ng1qmJKtWEqkFcDuoVcAdQsxcMH1L1UiQFfPwy8OmLSaz008GsGQ63y
+VITE_GOOGLE_MAPS_API_KEY=
--- a/frontend/.env.production
+++ b/frontend/.env.production
@@ -1,3 +1,3 @@
 # Production environment variables
-# Set VITE_API_URL to your production API URL
-VITE_API_URL=https://api.yourdomain.com
+# Use relative API URL - will use same origin as the page
+VITE_API_URL=https://api.smoothschedule.com
--- a/frontend/NAVIGATION_REDESIGN_PLAN.md
+++ b/frontend/NAVIGATION_REDESIGN_PLAN.md
@@ -0,0 +1,201 @@
+# Navigation Redesign Plan
+
+## Overview
+
+Redesigning both the main sidebar and settings page navigation to be more organized and scalable.
+
+## Current Issues
+
+### Main Sidebar
+- 15+ items in a flat list with no grouping
+- Dropdowns (Plugins, Help) hide important items
+- No visual hierarchy or section headers
+- Settings isolated at bottom
+
+### Settings Page
+- 7 horizontal tabs getting crowded
+- Not scalable for new settings
+- No logical grouping
+
+---
+
+## Phase 1: Refactor Main Sidebar (COMPLETED)
+
+### New Structure with Grouped Sections
+
+```
+[Logo] Business Name
+subdomain.smoothschedule
+
+○ Dashboard
+○ Scheduler
+○ Tasks
+
+MANAGE
+○ Customers
+○ Services
+○ Resources
+○ Staff
+
+COMMUNICATE
+○ Messages
+○ Tickets
+
+MONEY
+○ Payments
+
+EXTEND
+○ Plugins
+○ Email Templates
+
+──────────
+○ Settings
+○ Help & Docs
+──────────
+[User] Sign Out
+```
+
+### Files Created/Modified
+- `src/components/navigation/SidebarComponents.tsx` - Shared components (DONE)
+- `src/components/Sidebar.tsx` - Refactor to use new components (TODO)
+
+---
+
+## Phase 2: Settings Sidebar Layout
+
+### New Settings Structure
+
+Settings becomes a sub-application with its own sidebar:
+
+```
+/settings
+├── /general          - Business name, timezone, etc.
+├── /branding         - Logo, colors, display mode
+├── /resource-types   - Resource type management
+├── /domains          - Custom domains
+├── /api-tokens       - API access tokens
+├── /authentication   - OAuth, social login
+├── /email            - Email addresses for tickets
+├── /communication    - SMS & calling credits
+├── /billing          - Subscription, credits, invoices (future)
+```
+
+### Settings Sidebar Layout
+
+```
+┌──────────────────┬──────────────────────────────────────────┐
+│ ← Back to App    │                                          │
+│                  │  [Page Title]                            │
+│ BUSINESS         │  [Page Description]                      │
+│ ○ General        │                                          │
+│ ○ Branding       │  [Content Area]                          │
+│ ○ Resource Types │                                          │
+│                  │                                          │
+│ INTEGRATIONS     │                                          │
+│ ○ Domains        │                                          │
+│ ○ API & Webhooks │                                          │
+│                  │                                          │
+│ ACCESS           │                                          │
+│ ○ Authentication │                                          │
+│                  │                                          │
+│ COMMUNICATION    │                                          │
+│ ○ Email Setup    │                                          │
+│ ○ SMS & Calling  │                                          │
+│                  │                                          │
+│ BILLING          │                                          │
+│ ○ Credits        │                                          │
+│                  │                                          │
+└──────────────────┴──────────────────────────────────────────┘
+```
+
+### Files to Create
+1. `src/components/navigation/SettingsSidebar.tsx` - Settings-specific sidebar
+2. `src/layouts/SettingsLayout.tsx` - Layout wrapper with sidebar + content
+3. Split `src/pages/Settings.tsx` into:
+   - `src/pages/settings/GeneralSettings.tsx`
+   - `src/pages/settings/BrandingSettings.tsx`
+   - `src/pages/settings/ResourceTypesSettings.tsx`
+   - `src/pages/settings/DomainsSettings.tsx`
+   - `src/pages/settings/ApiTokensSettings.tsx`
+   - `src/pages/settings/AuthenticationSettings.tsx`
+   - `src/pages/settings/EmailSettings.tsx`
+   - `src/pages/settings/CommunicationSettings.tsx`
+
+### Route Updates (in App.tsx or routes file)
+
+```tsx
+<Route path="/settings" element={<SettingsLayout />}>
+  <Route index element={<Navigate to="/settings/general" replace />} />
+  <Route path="general" element={<GeneralSettings />} />
+  <Route path="branding" element={<BrandingSettings />} />
+  <Route path="resource-types" element={<ResourceTypesSettings />} />
+  <Route path="domains" element={<DomainsSettings />} />
+  <Route path="api-tokens" element={<ApiTokensSettings />} />
+  <Route path="authentication" element={<AuthenticationSettings />} />
+  <Route path="email" element={<EmailSettings />} />
+  <Route path="communication" element={<CommunicationSettings />} />
+</Route>
+```
+
+---
+
+## Implementation Order
+
+1. ✅ Create shared sidebar components (`SidebarComponents.tsx`)
+2. ✅ Refactor main `Sidebar.tsx` to use grouped sections
+3. ✅ Create `SettingsLayout.tsx` (includes sidebar)
+4. ⏳ Split Settings.tsx into sub-pages
+5. ⬜ Update routes in App.tsx
+6. ⬜ Test all navigation flows
+
+## Files Created So Far
+
+- `src/components/navigation/SidebarComponents.tsx` - Shared nav components
+- `src/components/Sidebar.tsx` - Refactored with grouped sections
+- `src/layouts/SettingsLayout.tsx` - Settings page wrapper with sidebar
+- `src/pages/settings/` - Directory for settings sub-pages (in progress)
+
+---
+
+## Component APIs
+
+### SidebarSection
+```tsx
+<SidebarSection title="MANAGE" isCollapsed={isCollapsed}>
+  <SidebarItem to="/customers" icon={Users} label="Customers" />
+</SidebarSection>
+```
+
+### SidebarItem
+```tsx
+<SidebarItem
+  to="/settings"
+  icon={Settings}
+  label="Settings"
+  isCollapsed={isCollapsed}
+  exact={true}
+  badge="3"  // optional badge
+/>
+```
+
+### SettingsSidebarSection / SettingsSidebarItem
+```tsx
+<SettingsSidebarSection title="BUSINESS">
+  <SettingsSidebarItem
+    to="/settings/general"
+    icon={Building2}
+    label="General"
+    description="Business name, timezone"
+  />
+</SettingsSidebarSection>
+```
+
+---
+
+## Notes
+
+- Main sidebar uses white/transparent colors (gradient background)
+- Settings sidebar uses gray/brand colors (white background)
+- Both support collapsed state on main sidebar
+- Settings sidebar is always expanded (no collapse)
+- Mobile: Main sidebar becomes drawer, Settings sidebar becomes sheet/drawer
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -2,10 +2,31 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- CSP: Disabled in development due to browser extension conflicts. Enable in production via server headers. -->
-    <title>Smooth Schedule - Multi-Tenant Scheduling</title>
+    <title>Smooth Schedule | Online Appointment Scheduling Software</title>
+    <meta name="description" content="The all-in-one scheduling platform for service businesses. Manage appointments, staff, and payments effortlessly. Start free today." />
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="Smooth Schedule | Online Appointment Scheduling Software" />
+    <meta property="og:description" content="The all-in-one scheduling platform for service businesses. Manage appointments, staff, and payments effortlessly." />
+    <meta property="og:image" content="https://smoothschedule.com/og-image.png" />
+    <meta property="og:url" content="https://smoothschedule.com" />
+    <meta property="og:site_name" content="Smooth Schedule" />
+
+    <!-- Twitter -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="Smooth Schedule | Online Appointment Scheduling Software" />
+    <meta name="twitter:description" content="The all-in-one scheduling platform for service businesses. Manage appointments, staff, and payments effortlessly." />
+    <meta name="twitter:image" content="https://smoothschedule.com/og-image.png" />
+
+    <!-- Additional SEO -->
+    <meta name="robots" content="noindex, nofollow" />
+    <meta name="author" content="Smooth Schedule Inc." />
+    <link rel="canonical" href="https://smoothschedule.com" />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
      /* Ensure full height for the app */
--- a/frontend/nginx.conf
+++ b/frontend/nginx.conf
@@ -45,7 +45,36 @@ http {
            add_header Cache-Control "public, immutable";
        }

-        # Handle SPA routing - serve index.html for all routes
+        # Proxy API requests to Django
+        location /api/ {
+            proxy_pass http://django:5000;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+        }
+
+        # Proxy Admin requests to Django
+        location /admin/ {
+            proxy_pass http://django:5000;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+        }
+
+        # Proxy Static/Media to Django (if served by WhiteNoise/Django)
+        location /static/ {
+            proxy_pass http://django:5000;
+            proxy_set_header Host $host;
+        }
+
+        location /media/ {
+            proxy_pass http://django:5000;
+            proxy_set_header Host $host;
+        }
+
+        # Handle SPA routing - serve index.html for all other routes
        location / {
            try_files $uri $uri/ /index.html;
        }
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -10,18 +10,24 @@
      "dependencies": {
        "@dnd-kit/core": "^6.3.1",
        "@dnd-kit/utilities": "^3.2.2",
+        "@react-google-maps/api": "^2.20.7",
        "@stripe/connect-js": "^3.3.31",
        "@stripe/react-connect-js": "^3.3.31",
+        "@stripe/react-stripe-js": "^5.4.1",
+        "@stripe/stripe-js": "^8.5.3",
        "@tanstack/react-query": "^5.90.10",
+        "@types/react-grid-layout": "^1.3.6",
        "@types/react-syntax-highlighter": "^15.5.13",
        "axios": "^1.13.2",
        "date-fns": "^4.1.0",
+        "framer-motion": "^12.23.24",
        "i18next": "^25.6.3",
        "i18next-browser-languagedetector": "^8.2.0",
        "i18next-http-backend": "^3.0.2",
        "lucide-react": "^0.554.0",
        "react": "^19.2.0",
        "react-dom": "^19.2.0",
+        "react-grid-layout": "^1.5.2",
        "react-hot-toast": "^2.6.0",
        "react-i18next": "^16.3.5",
        "react-phone-number-input": "^3.4.14",
@@ -979,6 +985,22 @@
        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
      }
    },
+    "node_modules/@googlemaps/js-api-loader": {
+      "version": "1.16.8",
+      "resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.16.8.tgz",
+      "integrity": "sha512-CROqqwfKotdO6EBjZO/gQGVTbeDps5V7Mt9+8+5Q+jTg5CRMi3Ii/L9PmV3USROrt2uWxtGzJHORmByxyo9pSQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@googlemaps/markerclusterer": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/@googlemaps/markerclusterer/-/markerclusterer-2.5.3.tgz",
+      "integrity": "sha512-x7lX0R5yYOoiNectr10wLgCBasNcXFHiADIBdmn7jQllF2B5ENQw5XtZK+hIw4xnV0Df0xhN4LN98XqA5jaiOw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "supercluster": "^8.0.1"
+      }
+    },
    "node_modules/@humanfs/core": {
      "version": "0.19.1",
      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -1093,6 +1115,36 @@
        "node": ">=18"
      }
    },
+    "node_modules/@react-google-maps/api": {
+      "version": "2.20.7",
+      "resolved": "https://registry.npmjs.org/@react-google-maps/api/-/api-2.20.7.tgz",
+      "integrity": "sha512-ys7uri3V6gjhYZUI43srHzSKDC6/jiKTwHNlwXFTvjeaJE3M3OaYBt9FZKvJs8qnOhL6i6nD1BKJoi1KrnkCkg==",
+      "license": "MIT",
+      "dependencies": {
+        "@googlemaps/js-api-loader": "1.16.8",
+        "@googlemaps/markerclusterer": "2.5.3",
+        "@react-google-maps/infobox": "2.20.0",
+        "@react-google-maps/marker-clusterer": "2.20.0",
+        "@types/google.maps": "3.58.1",
+        "invariant": "2.2.4"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19"
+      }
+    },
+    "node_modules/@react-google-maps/infobox": {
+      "version": "2.20.0",
+      "resolved": "https://registry.npmjs.org/@react-google-maps/infobox/-/infobox-2.20.0.tgz",
+      "integrity": "sha512-03PJHjohhaVLkX6+NHhlr8CIlvUxWaXhryqDjyaZ8iIqqix/nV8GFdz9O3m5OsjtxtNho09F/15j14yV0nuyLQ==",
+      "license": "MIT"
+    },
+    "node_modules/@react-google-maps/marker-clusterer": {
+      "version": "2.20.0",
+      "resolved": "https://registry.npmjs.org/@react-google-maps/marker-clusterer/-/marker-clusterer-2.20.0.tgz",
+      "integrity": "sha512-tieX9Va5w1yP88vMgfH1pHTacDQ9TgDTjox3tLlisKDXRQWdjw+QeVVghhf5XqqIxXHgPdcGwBvKY6UP+SIvLw==",
+      "license": "MIT"
+    },
    "node_modules/@reduxjs/toolkit": {
      "version": "2.11.0",
      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.11.0.tgz",
@@ -1473,6 +1525,29 @@
        "react-dom": ">=16.8.0"
      }
    },
+    "node_modules/@stripe/react-stripe-js": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/@stripe/react-stripe-js/-/react-stripe-js-5.4.1.tgz",
+      "integrity": "sha512-ipeYcAHa4EPmjwfv0lFE+YDVkOQ0TMKkFWamW+BqmnSkEln/hO8rmxGPPWcd9WjqABx6Ro8Xg4pAS7evCcR9cw==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "@stripe/stripe-js": ">=8.0.0 <9.0.0",
+        "react": ">=16.8.0 <20.0.0",
+        "react-dom": ">=16.8.0 <20.0.0"
+      }
+    },
+    "node_modules/@stripe/stripe-js": {
+      "version": "8.5.3",
+      "resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-8.5.3.tgz",
+      "integrity": "sha512-UM0GHAxlTN7v0lCK2P6t0VOlvBIdApIQxhnM3yZ2kupQ4PpSrLsK/n/NyYKtw2NJGMaNRRD1IicWS7fSL2sFtA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.16"
+      }
+    },
    "node_modules/@tailwindcss/node": {
      "version": "4.1.17",
      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.17.tgz",
@@ -1884,6 +1959,12 @@
      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
      "license": "MIT"
    },
+    "node_modules/@types/google.maps": {
+      "version": "3.58.1",
+      "resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.58.1.tgz",
+      "integrity": "sha512-X9QTSvGJ0nCfMzYOnaVs/k6/4L+7F5uCS+4iUmkLEls6J9S/Phv+m/i3mDeyc49ZBgwab3EFO1HEoBY7k98EGQ==",
+      "license": "MIT"
+    },
    "node_modules/@types/hast": {
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
@@ -1934,6 +2015,15 @@
        "@types/react": "^19.2.0"
      }
    },
+    "node_modules/@types/react-grid-layout": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@types/react-grid-layout/-/react-grid-layout-1.3.6.tgz",
+      "integrity": "sha512-Cw7+sb3yyjtmxwwJiXtEXcu5h4cgs+sCGkHwHXsFmPyV30bf14LeD/fa2LwQovuD2HWxCcjIdNhDlcYGj95qGA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
    "node_modules/@types/react-syntax-highlighter": {
      "version": "15.5.13",
      "resolved": "https://registry.npmjs.org/@types/react-syntax-highlighter/-/react-syntax-highlighter-15.5.13.tgz",
@@ -2896,6 +2986,12 @@
      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
      "license": "MIT"
    },
+    "node_modules/fast-equals": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-4.0.3.tgz",
+      "integrity": "sha512-G3BSX9cfKttjr+2o1O22tYMLq0DPluZnYtq1rXumE1SpL/F/SLIfHx08WYQoWSIpeMYf8sRbJ8++71+v6Pnxfg==",
+      "license": "MIT"
+    },
    "node_modules/fast-json-stable-stringify": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -3044,6 +3140,33 @@
        "url": "https://github.com/sponsors/rawify"
      }
    },
+    "node_modules/framer-motion": {
+      "version": "12.23.24",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.24.tgz",
+      "integrity": "sha512-HMi5HRoRCTou+3fb3h9oTLyJGBxHfW+HnNE25tAXOvVx/IvwMHK0cx7IR4a2ZU6sh3IX1Z+4ts32PcYBOqka8w==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.23.23",
+        "motion-utils": "^12.23.6",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/fsevents": {
      "version": "2.3.2",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -3410,6 +3533,15 @@
        "node": ">=12"
      }
    },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
    "node_modules/is-alphabetical": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
@@ -3553,6 +3685,12 @@
        "node": ">=6"
      }
    },
+    "node_modules/kdbush": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz",
+      "integrity": "sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA==",
+      "license": "ISC"
+    },
    "node_modules/keyv": {
      "version": "4.5.4",
      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -3960,6 +4098,21 @@
        "node": "*"
      }
    },
+    "node_modules/motion-dom": {
+      "version": "12.23.23",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.23.tgz",
+      "integrity": "sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.23.6"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.23.6",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
+      "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
+      "license": "MIT"
+    },
    "node_modules/ms": {
      "version": "2.1.3",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -4308,6 +4461,38 @@
        "react": "^19.2.0"
      }
    },
+    "node_modules/react-draggable": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.5.0.tgz",
+      "integrity": "sha512-VC+HBLEZ0XJxnOxVAZsdRi8rD04Iz3SiiKOoYzamjylUcju/hP9np/aZdLHf/7WOD268WMoNJMvYfB5yAK45cw==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3.0",
+        "react-dom": ">= 16.3.0"
+      }
+    },
+    "node_modules/react-grid-layout": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/react-grid-layout/-/react-grid-layout-1.5.2.tgz",
+      "integrity": "sha512-vT7xmQqszTT+sQw/LfisrEO4le1EPNnSEMVHy6sBZyzS3yGkMywdOd+5iEFFwQwt0NSaGkxuRmYwa1JsP6OJdw==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.1.1",
+        "fast-equals": "^4.0.3",
+        "prop-types": "^15.8.1",
+        "react-draggable": "^4.4.6",
+        "react-resizable": "^3.0.5",
+        "resize-observer-polyfill": "^1.5.1"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3.0",
+        "react-dom": ">= 16.3.0"
+      }
+    },
    "node_modules/react-hot-toast": {
      "version": "2.6.0",
      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.6.0.tgz",
@@ -4409,6 +4594,19 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/react-resizable": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/react-resizable/-/react-resizable-3.0.5.tgz",
+      "integrity": "sha512-vKpeHhI5OZvYn82kXOs1bC8aOXktGU5AmKAgaZS4F5JPburCtbmDPqE7Pzp+1kN4+Wb81LlF33VpGwWwtXem+w==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "15.x",
+        "react-draggable": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3"
+      }
+    },
    "node_modules/react-router": {
      "version": "7.9.6",
      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.9.6.tgz",
@@ -4535,6 +4733,12 @@
      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
      "license": "MIT"
    },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==",
+      "license": "MIT"
+    },
    "node_modules/resolve-from": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -4661,6 +4865,15 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/supercluster": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz",
+      "integrity": "sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==",
+      "license": "ISC",
+      "dependencies": {
+        "kdbush": "^4.0.2"
+      }
+    },
    "node_modules/supports-color": {
      "version": "7.2.0",
      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -6,18 +6,24 @@
  "dependencies": {
    "@dnd-kit/core": "^6.3.1",
    "@dnd-kit/utilities": "^3.2.2",
+    "@react-google-maps/api": "^2.20.7",
    "@stripe/connect-js": "^3.3.31",
    "@stripe/react-connect-js": "^3.3.31",
+    "@stripe/react-stripe-js": "^5.4.1",
+    "@stripe/stripe-js": "^8.5.3",
    "@tanstack/react-query": "^5.90.10",
+    "@types/react-grid-layout": "^1.3.6",
    "@types/react-syntax-highlighter": "^15.5.13",
    "axios": "^1.13.2",
    "date-fns": "^4.1.0",
+    "framer-motion": "^12.23.24",
    "i18next": "^25.6.3",
    "i18next-browser-languagedetector": "^8.2.0",
    "i18next-http-backend": "^3.0.2",
    "lucide-react": "^0.554.0",
    "react": "^19.2.0",
    "react-dom": "^19.2.0",
+    "react-grid-layout": "^1.5.2",
    "react-hot-toast": "^2.6.0",
    "react-i18next": "^16.3.5",
    "react-phone-number-input": "^3.4.14",
--- a/frontend/playwright-report/data/26a8490232a31d7ac35c48d597d4cf1e7b398d00.md
+++ b/frontend/playwright-report/data/26a8490232a31d7ac35c48d597d4cf1e7b398d00.md
@@ -1,84 +0,0 @@
-# Page snapshot
-
-```yaml
- generic [ref=e3]:
-  - generic [ref=e7]:
-    - generic [ref=e9]:
-      - img [ref=e10]
-      - generic [ref=e16]: Smooth Schedule
-    - generic [ref=e17]:
-      - heading "Orchestrate your business with precision." [level=1] [ref=e18]
-      - paragraph [ref=e19]: The all-in-one scheduling platform for businesses of all sizes. Manage resources, staff, and bookings effortlessly.
-    - generic [ref=e24]: © 2025 Smooth Schedule Inc.
-  - generic [ref=e26]:
-    - generic [ref=e27]:
-      - heading "Welcome back" [level=2] [ref=e28]
-      - paragraph [ref=e29]: Please enter your details to sign in.
-    - generic [ref=e30]:
-      - generic [ref=e31]:
-        - generic [ref=e32]:
-          - generic [ref=e33]: Username
-          - generic [ref=e34]:
-            - generic:
-              - img
-            - textbox "Username" [active] [ref=e35]:
-              - /placeholder: Enter your username
-              - text: superuser
-        - generic [ref=e36]:
-          - generic [ref=e37]: Password
-          - generic [ref=e38]:
-            - generic:
-              - img
-            - textbox "Password" [ref=e39]:
-              - /placeholder: ••••••••
-      - button "Sign in" [ref=e40]:
-        - generic [ref=e41]:
-          - text: Sign in
-          - img [ref=e42]
-    - generic [ref=e50]: Or continue with
-    - button "🇺🇸 English" [ref=e53]:
-      - img [ref=e54]
-      - generic [ref=e58]: 🇺🇸
-      - generic [ref=e59]: English
-      - img [ref=e60]
-    - generic [ref=e62]:
-      - heading "🔓 Quick Login (Dev Only)" [level=3] [ref=e64]:
-        - generic [ref=e65]: 🔓
-        - generic [ref=e66]: Quick Login (Dev Only)
-      - generic [ref=e67]:
-        - button "Platform Superuser SUPERUSER" [ref=e68]:
-          - generic [ref=e69]:
-            - generic [ref=e70]: Platform Superuser
-            - generic [ref=e71]: SUPERUSER
-        - button "Platform Manager PLATFORM_MANAGER" [ref=e72]:
-          - generic [ref=e73]:
-            - generic [ref=e74]: Platform Manager
-            - generic [ref=e75]: PLATFORM_MANAGER
-        - button "Platform Sales PLATFORM_SALES" [ref=e76]:
-          - generic [ref=e77]:
-            - generic [ref=e78]: Platform Sales
-            - generic [ref=e79]: PLATFORM_SALES
-        - button "Platform Support PLATFORM_SUPPORT" [ref=e80]:
-          - generic [ref=e81]:
-            - generic [ref=e82]: Platform Support
-            - generic [ref=e83]: PLATFORM_SUPPORT
-        - button "Business Owner TENANT_OWNER" [ref=e84]:
-          - generic [ref=e85]:
-            - generic [ref=e86]: Business Owner
-            - generic [ref=e87]: TENANT_OWNER
-        - button "Business Manager TENANT_MANAGER" [ref=e88]:
-          - generic [ref=e89]:
-            - generic [ref=e90]: Business Manager
-            - generic [ref=e91]: TENANT_MANAGER
-        - button "Staff Member TENANT_STAFF" [ref=e92]:
-          - generic [ref=e93]:
-            - generic [ref=e94]: Staff Member
-            - generic [ref=e95]: TENANT_STAFF
-        - button "Customer CUSTOMER" [ref=e96]:
-          - generic [ref=e97]:
-            - generic [ref=e98]: Customer
-            - generic [ref=e99]: CUSTOMER
-      - generic [ref=e100]:
-        - text: "Password for all:"
-        - code [ref=e101]: test123
-```
--- a/frontend/playwright-report/data/2f08f431e3b3b985364cd06af0a236e74b243e90.png
+++ b/frontend/playwright-report/data/2f08f431e3b3b985364cd06af0a236e74b243e90.png
--- a/frontend/playwright-report/data/3e9ea161bef287bc24525c872839cd9b70824220.md
+++ b/frontend/playwright-report/data/3e9ea161bef287bc24525c872839cd9b70824220.md
@@ -1,84 +0,0 @@
-# Page snapshot
-
-```yaml
- generic [ref=e3]:
-  - generic [ref=e7]:
-    - generic [ref=e9]:
-      - img [ref=e10]
-      - generic [ref=e16]: Smooth Schedule
-    - generic [ref=e17]:
-      - heading "Orchestrate your business with precision." [level=1] [ref=e18]
-      - paragraph [ref=e19]: The all-in-one scheduling platform for businesses of all sizes. Manage resources, staff, and bookings effortlessly.
-    - generic [ref=e24]: © 2025 Smooth Schedule Inc.
-  - generic [ref=e26]:
-    - generic [ref=e27]:
-      - heading "Welcome back" [level=2] [ref=e28]
-      - paragraph [ref=e29]: Please enter your details to sign in.
-    - generic [ref=e30]:
-      - generic [ref=e31]:
-        - generic [ref=e32]:
-          - generic [ref=e33]: Username
-          - generic [ref=e34]:
-            - generic:
-              - img
-            - textbox "Username" [active] [ref=e35]:
-              - /placeholder: Enter your username
-              - text: superuser
-        - generic [ref=e36]:
-          - generic [ref=e37]: Password
-          - generic [ref=e38]:
-            - generic:
-              - img
-            - textbox "Password" [ref=e39]:
-              - /placeholder: ••••••••
-      - button "Sign in" [ref=e40]:
-        - generic [ref=e41]:
-          - text: Sign in
-          - img [ref=e42]
-    - generic [ref=e49]: Or continue with
-    - button "🇺🇸 English" [ref=e52]:
-      - img [ref=e53]
-      - generic [ref=e56]: 🇺🇸
-      - generic [ref=e57]: English
-      - img [ref=e58]
-    - generic [ref=e60]:
-      - heading "🔓 Quick Login (Dev Only)" [level=3] [ref=e62]:
-        - generic [ref=e63]: 🔓
-        - generic [ref=e64]: Quick Login (Dev Only)
-      - generic [ref=e65]:
-        - button "Platform Superuser SUPERUSER" [ref=e66]:
-          - generic [ref=e67]:
-            - generic [ref=e68]: Platform Superuser
-            - generic [ref=e69]: SUPERUSER
-        - button "Platform Manager PLATFORM_MANAGER" [ref=e70]:
-          - generic [ref=e71]:
-            - generic [ref=e72]: Platform Manager
-            - generic [ref=e73]: PLATFORM_MANAGER
-        - button "Platform Sales PLATFORM_SALES" [ref=e74]:
-          - generic [ref=e75]:
-            - generic [ref=e76]: Platform Sales
-            - generic [ref=e77]: PLATFORM_SALES
-        - button "Platform Support PLATFORM_SUPPORT" [ref=e78]:
-          - generic [ref=e79]:
-            - generic [ref=e80]: Platform Support
-            - generic [ref=e81]: PLATFORM_SUPPORT
-        - button "Business Owner TENANT_OWNER" [ref=e82]:
-          - generic [ref=e83]:
-            - generic [ref=e84]: Business Owner
-            - generic [ref=e85]: TENANT_OWNER
-        - button "Business Manager TENANT_MANAGER" [ref=e86]:
-          - generic [ref=e87]:
-            - generic [ref=e88]: Business Manager
-            - generic [ref=e89]: TENANT_MANAGER
-        - button "Staff Member TENANT_STAFF" [ref=e90]:
-          - generic [ref=e91]:
-            - generic [ref=e92]: Staff Member
-            - generic [ref=e93]: TENANT_STAFF
-        - button "Customer CUSTOMER" [ref=e94]:
-          - generic [ref=e95]:
-            - generic [ref=e96]: Customer
-            - generic [ref=e97]: CUSTOMER
-      - generic [ref=e98]:
-        - text: "Password for all:"
-        - code [ref=e99]: test123
-```
--- a/frontend/playwright-report/data/5ffa88b026d5419ae4ab64937dbb748dff0649bd.png
+++ b/frontend/playwright-report/data/5ffa88b026d5419ae4ab64937dbb748dff0649bd.png
--- a/frontend/playwright-report/data/b12753f2e5ebba05959c238fad5732ef12da1299.png
+++ b/frontend/playwright-report/data/b12753f2e5ebba05959c238fad5732ef12da1299.png
--- a/frontend/playwright-report/data/bbb7e32ecf71376161c96bc2259c44bb2a19be2a.md
+++ b/frontend/playwright-report/data/bbb7e32ecf71376161c96bc2259c44bb2a19be2a.md
@@ -0,0 +1,71 @@
+# Page snapshot
+
+```yaml
+- generic [ref=e1]:
+  - generic [ref=e3]:
+    - generic [ref=e5]:
+      - button "Collapse sidebar" [ref=e6]:
+        - img [ref=e7]
+        - generic [ref=e13]:
+          - heading "Smooth Schedule" [level=1] [ref=e14]
+          - paragraph [ref=e15]: superuser
+      - navigation [ref=e16]:
+        - paragraph [ref=e17]: Operations
+        - link "Dashboard" [ref=e18] [cursor=pointer]:
+          - /url: /platform/dashboard
+          - img [ref=e19]
+          - generic [ref=e24]: Dashboard
+        - link "Businesses" [ref=e25] [cursor=pointer]:
+          - /url: /platform/businesses
+          - img [ref=e26]
+          - generic [ref=e30]: Businesses
+        - link "Users" [ref=e31] [cursor=pointer]:
+          - /url: /platform/users
+          - img [ref=e32]
+          - generic [ref=e37]: Users
+        - link "Support" [active] [ref=e38] [cursor=pointer]:
+          - /url: /platform/support
+          - img [ref=e39]
+          - generic [ref=e41]: Support
+        - paragraph [ref=e42]: System
+        - link "Staff" [ref=e43] [cursor=pointer]:
+          - /url: /platform/staff
+          - img [ref=e44]
+          - generic [ref=e46]: Staff
+        - link "Platform Settings" [ref=e47] [cursor=pointer]:
+          - /url: /platform/settings
+          - img [ref=e48]
+          - generic [ref=e51]: Platform Settings
+        - generic [ref=e52]:
+          - link "Help" [ref=e53] [cursor=pointer]:
+            - /url: /help/ticketing
+            - img [ref=e54]
+            - generic [ref=e57]: Help
+          - link "API Docs" [ref=e58] [cursor=pointer]:
+            - /url: /help/api
+            - img [ref=e59]
+            - generic [ref=e62]: API Docs
+    - generic [ref=e63]:
+      - banner [ref=e64]:
+        - generic [ref=e66]:
+          - img [ref=e67]
+          - generic [ref=e70]: smoothschedule.com
+          - generic [ref=e71]: /
+          - generic [ref=e72]: Admin Console
+        - generic [ref=e73]:
+          - button [ref=e74]:
+            - img [ref=e75]
+          - button "Open notifications" [ref=e78]:
+            - img [ref=e79]
+          - button "Super User Superuser SU" [ref=e83]:
+            - generic [ref=e84]:
+              - paragraph [ref=e85]: Super User
+              - paragraph [ref=e86]: Superuser
+            - generic [ref=e87]: SU
+            - img [ref=e88]
+      - main [ref=e90]:
+        - generic [ref=e91]:
+          - img [ref=e92]
+          - paragraph [ref=e94]: Error loading tickets
+  - generic [ref=e95]: $0k
+```
--- a/frontend/playwright-report/data/d822700a7efe85e9f2b6c736f6649e4f55bf86b8.png
+++ b/frontend/playwright-report/data/d822700a7efe85e9f2b6c736f6649e4f55bf86b8.png
--- a/frontend/playwright-report/index.html
+++ b/frontend/playwright-report/index.html
--- a/frontend/playwright.config.ts
+++ b/frontend/playwright.config.ts
@@ -22,7 +22,7 @@ export default defineConfig({
  /* Shared settings for all the projects below */
  use: {
    /* Base URL for all tests */
-    baseURL: 'http://lvh.me:5174',
+    baseURL: 'http://lvh.me:5173',

    /* Collect trace when retrying the failed test */
    trace: 'on-first-retry',
@@ -52,7 +52,7 @@ export default defineConfig({
  /* Run your local dev server before starting the tests */
  webServer: {
    command: 'npm run dev',
-    url: 'http://lvh.me:5174',
+    url: 'http://lvh.me:5173',
    reuseExistingServer: !process.env.CI,
  },
 });
--- a/frontend/public/apple-touch-icon.png
+++ b/frontend/public/apple-touch-icon.png
--- a/frontend/public/favicon.ico
+++ b/frontend/public/favicon.ico
--- a/frontend/public/robots.txt
+++ b/frontend/public/robots.txt
@@ -0,0 +1,12 @@
+# robots.txt - SmoothSchedule
+# Currently blocking all crawlers - site not yet live
+
+User-agent: *
+Disallow: /
+
+# When ready to go live, replace above with:
+# User-agent: *
+# Allow: /
+# Disallow: /api/
+# Disallow: /admin/
+# Sitemap: https://smoothschedule.com/sitemap.xml
--- a/frontend/public/sitemap.xml
+++ b/frontend/public/sitemap.xml
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://smoothschedule.com/</loc>
+    <lastmod>2024-12-04</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>1.0</priority>
+  </url>
+  <url>
+    <loc>https://smoothschedule.com/features</loc>
+    <lastmod>2024-12-04</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://smoothschedule.com/pricing</loc>
+    <lastmod>2024-12-04</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://smoothschedule.com/about</loc>
+    <lastmod>2024-12-04</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.6</priority>
+  </url>
+  <url>
+    <loc>https://smoothschedule.com/contact</loc>
+    <lastmod>2024-12-04</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.6</priority>
+  </url>
+  <url>
+    <loc>https://smoothschedule.com/signup</loc>
+    <lastmod>2024-12-04</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.9</priority>
+  </url>
+  <url>
+    <loc>https://smoothschedule.com/privacy</loc>
+    <lastmod>2024-12-04</lastmod>
+    <changefreq>yearly</changefreq>
+    <priority>0.3</priority>
+  </url>
+  <url>
+    <loc>https://smoothschedule.com/terms</loc>
+    <lastmod>2024-12-04</lastmod>
+    <changefreq>yearly</changefreq>
+    <priority>0.3</priority>
+  </url>
+</urlset>
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -2,19 +2,20 @@
 * Main App Component - Integrated with Real API
 */

-import React, { useState } from 'react';
+import React, { useState, Suspense } from 'react';
 import { useTranslation } from 'react-i18next';
-import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { useCurrentUser, useMasquerade, useLogout } from './hooks/useAuth';
 import { useCurrentBusiness } from './hooks/useBusiness';
 import { useUpdateBusiness } from './hooks/useBusiness';
+import { usePlanFeatures } from './hooks/usePlanFeatures';
 import { setCookie } from './utils/cookies';

 // Import Login Page
-import LoginPage from './pages/LoginPage';
-import MFAVerifyPage from './pages/MFAVerifyPage';
-import OAuthCallback from './pages/OAuthCallback';
+const LoginPage = React.lazy(() => import('./pages/LoginPage'));
+const MFAVerifyPage = React.lazy(() => import('./pages/MFAVerifyPage'));
+const OAuthCallback = React.lazy(() => import('./pages/OAuthCallback'));

 // Import layouts
 import BusinessLayout from './layouts/BusinessLayout';
@@ -23,51 +24,106 @@ import CustomerLayout from './layouts/CustomerLayout';
 import MarketingLayout from './layouts/MarketingLayout';

 // Import marketing pages
-import HomePage from './pages/marketing/HomePage';
-import FeaturesPage from './pages/marketing/FeaturesPage';
-import PricingPage from './pages/marketing/PricingPage';
-import AboutPage from './pages/marketing/AboutPage';
-import ContactPage from './pages/marketing/ContactPage';
-import SignupPage from './pages/marketing/SignupPage';
+const HomePage = React.lazy(() => import('./pages/marketing/HomePage'));
+const FeaturesPage = React.lazy(() => import('./pages/marketing/FeaturesPage'));
+const PricingPage = React.lazy(() => import('./pages/marketing/PricingPage'));
+const AboutPage = React.lazy(() => import('./pages/marketing/AboutPage'));
+const ContactPage = React.lazy(() => import('./pages/marketing/ContactPage'));
+const SignupPage = React.lazy(() => import('./pages/marketing/SignupPage'));
+const PrivacyPolicyPage = React.lazy(() => import('./pages/marketing/PrivacyPolicyPage'));
+const TermsOfServicePage = React.lazy(() => import('./pages/marketing/TermsOfServicePage'));

 // Import pages
-import Dashboard from './pages/Dashboard';
-import Scheduler from './pages/Scheduler';
-import Customers from './pages/Customers';
-import Settings from './pages/Settings';
-import Payments from './pages/Payments';
-import Resources from './pages/Resources';
-import Services from './pages/Services';
-import Staff from './pages/Staff';
-import CustomerDashboard from './pages/customer/CustomerDashboard';
-import CustomerSupport from './pages/customer/CustomerSupport';
-import ResourceDashboard from './pages/resource/ResourceDashboard';
-import BookingPage from './pages/customer/BookingPage';
-import TrialExpired from './pages/TrialExpired';
-import Upgrade from './pages/Upgrade';
+const Dashboard = React.lazy(() => import('./pages/Dashboard'));
+const StaffDashboard = React.lazy(() => import('./pages/StaffDashboard'));
+const StaffSchedule = React.lazy(() => import('./pages/StaffSchedule'));
+const Scheduler = React.lazy(() => import('./pages/Scheduler'));
+const Customers = React.lazy(() => import('./pages/Customers'));
+const Settings = React.lazy(() => import('./pages/Settings'));
+const Payments = React.lazy(() => import('./pages/Payments'));
+const Resources = React.lazy(() => import('./pages/Resources'));
+const Services = React.lazy(() => import('./pages/Services'));
+const Staff = React.lazy(() => import('./pages/Staff'));
+const TimeBlocks = React.lazy(() => import('./pages/TimeBlocks'));
+const MyAvailability = React.lazy(() => import('./pages/MyAvailability'));
+const CustomerDashboard = React.lazy(() => import('./pages/customer/CustomerDashboard'));
+const CustomerSupport = React.lazy(() => import('./pages/customer/CustomerSupport'));
+const ResourceDashboard = React.lazy(() => import('./pages/resource/ResourceDashboard'));
+const BookingPage = React.lazy(() => import('./pages/customer/BookingPage'));
+const CustomerBilling = React.lazy(() => import('./pages/customer/CustomerBilling'));
+const TrialExpired = React.lazy(() => import('./pages/TrialExpired'));
+const Upgrade = React.lazy(() => import('./pages/Upgrade'));

 // Import platform pages
-import PlatformDashboard from './pages/platform/PlatformDashboard';
-import PlatformBusinesses from './pages/platform/PlatformBusinesses';
-import PlatformSupportPage from './pages/platform/PlatformSupport';
-import PlatformUsers from './pages/platform/PlatformUsers';
-import PlatformStaff from './pages/platform/PlatformStaff';
-import PlatformSettings from './pages/platform/PlatformSettings';
-import ProfileSettings from './pages/ProfileSettings';
-import VerifyEmail from './pages/VerifyEmail';
-import EmailVerificationRequired from './pages/EmailVerificationRequired';
-import AcceptInvitePage from './pages/AcceptInvitePage';
-import TenantOnboardPage from './pages/TenantOnboardPage';
-import Tickets from './pages/Tickets'; // Import Tickets page
-import HelpGuide from './pages/HelpGuide'; // Import Platform Guide page
-import HelpTicketing from './pages/HelpTicketing'; // Import Help page for ticketing
-import HelpApiDocs from './pages/HelpApiDocs'; // Import API documentation page
-import HelpPluginDocs from './pages/HelpPluginDocs'; // Import Plugin documentation page
-import PlatformSupport from './pages/PlatformSupport'; // Import Platform Support page (for businesses to contact SmoothSchedule)
-import PluginMarketplace from './pages/PluginMarketplace'; // Import Plugin Marketplace page
-import MyPlugins from './pages/MyPlugins'; // Import My Plugins page
-import Tasks from './pages/Tasks'; // Import Tasks page for scheduled plugin executions
-import EmailTemplates from './pages/EmailTemplates'; // Import Email Templates page
+const PlatformDashboard = React.lazy(() => import('./pages/platform/PlatformDashboard'));
+const PlatformBusinesses = React.lazy(() => import('./pages/platform/PlatformBusinesses'));
+const PlatformSupportPage = React.lazy(() => import('./pages/platform/PlatformSupport'));
+const PlatformEmailAddresses = React.lazy(() => import('./pages/platform/PlatformEmailAddresses'));
+const PlatformUsers = React.lazy(() => import('./pages/platform/PlatformUsers'));
+const PlatformStaff = React.lazy(() => import('./pages/platform/PlatformStaff'));
+const PlatformSettings = React.lazy(() => import('./pages/platform/PlatformSettings'));
+const ProfileSettings = React.lazy(() => import('./pages/ProfileSettings'));
+const VerifyEmail = React.lazy(() => import('./pages/VerifyEmail'));
+const EmailVerificationRequired = React.lazy(() => import('./pages/EmailVerificationRequired'));
+const AcceptInvitePage = React.lazy(() => import('./pages/AcceptInvitePage'));
+const TenantOnboardPage = React.lazy(() => import('./pages/TenantOnboardPage'));
+const TenantLandingPage = React.lazy(() => import('./pages/TenantLandingPage'));
+const Tickets = React.lazy(() => import('./pages/Tickets')); // Import Tickets page
+const HelpGuide = React.lazy(() => import('./pages/HelpGuide')); // Import Platform Guide page
+const HelpTicketing = React.lazy(() => import('./pages/HelpTicketing')); // Import Help page for ticketing
+const HelpApiDocs = React.lazy(() => import('./pages/HelpApiDocs')); // Import API documentation page
+const HelpPluginDocs = React.lazy(() => import('./pages/help/HelpPluginDocs')); // Import Plugin documentation page
+const HelpEmailSettings = React.lazy(() => import('./pages/HelpEmailSettings')); // Import Email settings help page
+
+// Import new help pages
+const HelpDashboard = React.lazy(() => import('./pages/help/HelpDashboard'));
+const HelpScheduler = React.lazy(() => import('./pages/help/HelpScheduler'));
+const HelpTasks = React.lazy(() => import('./pages/help/HelpTasks'));
+const HelpCustomers = React.lazy(() => import('./pages/help/HelpCustomers'));
+const HelpServices = React.lazy(() => import('./pages/help/HelpServices'));
+const HelpResources = React.lazy(() => import('./pages/help/HelpResources'));
+const HelpStaff = React.lazy(() => import('./pages/help/HelpStaff'));
+const HelpTimeBlocks = React.lazy(() => import('./pages/HelpTimeBlocks'));
+const HelpMessages = React.lazy(() => import('./pages/help/HelpMessages'));
+const HelpPayments = React.lazy(() => import('./pages/help/HelpPayments'));
+const HelpContracts = React.lazy(() => import('./pages/help/HelpContracts'));
+const HelpPlugins = React.lazy(() => import('./pages/help/HelpPlugins'));
+const HelpSettingsGeneral = React.lazy(() => import('./pages/help/HelpSettingsGeneral'));
+const HelpSettingsResourceTypes = React.lazy(() => import('./pages/help/HelpSettingsResourceTypes'));
+const HelpSettingsBooking = React.lazy(() => import('./pages/help/HelpSettingsBooking'));
+const HelpSettingsAppearance = React.lazy(() => import('./pages/help/HelpSettingsAppearance'));
+const HelpSettingsEmail = React.lazy(() => import('./pages/help/HelpSettingsEmail'));
+const HelpSettingsDomains = React.lazy(() => import('./pages/help/HelpSettingsDomains'));
+const HelpSettingsApi = React.lazy(() => import('./pages/help/HelpSettingsApi'));
+const HelpSettingsAuth = React.lazy(() => import('./pages/help/HelpSettingsAuth'));
+const HelpSettingsBilling = React.lazy(() => import('./pages/help/HelpSettingsBilling'));
+const HelpSettingsQuota = React.lazy(() => import('./pages/help/HelpSettingsQuota'));
+const HelpComprehensive = React.lazy(() => import('./pages/help/HelpComprehensive'));
+const StaffHelp = React.lazy(() => import('./pages/help/StaffHelp'));
+const PlatformSupport = React.lazy(() => import('./pages/PlatformSupport')); // Import Platform Support page (for businesses to contact SmoothSchedule)
+const PluginMarketplace = React.lazy(() => import('./pages/PluginMarketplace')); // Import Plugin Marketplace page
+const MyPlugins = React.lazy(() => import('./pages/MyPlugins')); // Import My Plugins page
+const CreatePlugin = React.lazy(() => import('./pages/CreatePlugin')); // Import Create Plugin page
+const Tasks = React.lazy(() => import('./pages/Tasks')); // Import Tasks page for scheduled plugin executions
+const EmailTemplates = React.lazy(() => import('./pages/EmailTemplates')); // Import Email Templates page
+const Contracts = React.lazy(() => import('./pages/Contracts')); // Import Contracts page
+const ContractTemplates = React.lazy(() => import('./pages/ContractTemplates')); // Import Contract Templates page
+const ContractSigning = React.lazy(() => import('./pages/ContractSigning')); // Import Contract Signing page (public)
+
+// Settings pages
+const SettingsLayout = React.lazy(() => import('./layouts/SettingsLayout'));
+const GeneralSettings = React.lazy(() => import('./pages/settings/GeneralSettings'));
+const BrandingSettings = React.lazy(() => import('./pages/settings/BrandingSettings'));
+const ResourceTypesSettings = React.lazy(() => import('./pages/settings/ResourceTypesSettings'));
+const BookingSettings = React.lazy(() => import('./pages/settings/BookingSettings'));
+const CustomDomainsSettings = React.lazy(() => import('./pages/settings/CustomDomainsSettings'));
+const ApiSettings = React.lazy(() => import('./pages/settings/ApiSettings'));
+const AuthenticationSettings = React.lazy(() => import('./pages/settings/AuthenticationSettings'));
+const EmailSettings = React.lazy(() => import('./pages/settings/EmailSettings'));
+const CommunicationSettings = React.lazy(() => import('./pages/settings/CommunicationSettings'));
+const BillingSettings = React.lazy(() => import('./pages/settings/BillingSettings'));
+const QuotaSettings = React.lazy(() => import('./pages/settings/QuotaSettings'));
+
 import { Toaster } from 'react-hot-toast'; // Import Toaster for notifications

 const queryClient = new QueryClient({
@@ -140,6 +196,7 @@ const AppContent: React.FC = () => {
  const updateBusinessMutation = useUpdateBusiness();
  const masqueradeMutation = useMasquerade();
  const logoutMutation = useLogout();
+  const { canUse } = usePlanFeatures();

  // Apply dark mode class and persist to localStorage
  React.useEffect(() => {
@@ -147,6 +204,30 @@ const AppContent: React.FC = () => {
    localStorage.setItem('darkMode', JSON.stringify(darkMode));
  }, [darkMode]);

+  // Set noindex/nofollow for app subdomains (platform, business subdomains)
+  // Only the root domain marketing pages should be indexed
+  React.useEffect(() => {
+    const hostname = window.location.hostname;
+    const parts = hostname.split('.');
+    const hasSubdomain = parts.length > 2 || (parts.length === 2 && parts[0] !== 'localhost');
+
+    // Check if we're on a subdomain (platform.*, demo.*, etc.)
+    const isSubdomain = hostname !== 'localhost' && hostname !== '127.0.0.1' && parts.length > 2;
+
+    if (isSubdomain) {
+      // Always noindex/nofollow on subdomains (app areas)
+      let metaRobots = document.querySelector('meta[name="robots"]');
+      if (metaRobots) {
+        metaRobots.setAttribute('content', 'noindex, nofollow');
+      } else {
+        metaRobots = document.createElement('meta');
+        metaRobots.setAttribute('name', 'robots');
+        metaRobots.setAttribute('content', 'noindex, nofollow');
+        document.head.appendChild(metaRobots);
+      }
+    }
+  }, []);
+
  // Handle tokens in URL (from login or masquerade redirect)
  React.useEffect(() => {
    const params = new URLSearchParams(window.location.search);
@@ -188,11 +269,6 @@ const AppContent: React.FC = () => {
      setCookie('access_token', accessToken, 7);
      setCookie('refresh_token', refreshToken, 7);

-      // Clear session cookie to prevent interference with JWT
-      // (Django session cookie might take precedence over JWT)
-      document.cookie = 'sessionid=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=.lvh.me';
-      document.cookie = 'sessionid=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
-
      // Clean URL
      const newUrl = window.location.pathname + window.location.hash;
      window.history.replaceState({}, '', newUrl);
@@ -215,45 +291,100 @@ const AppContent: React.FC = () => {
  // Helper to detect root domain (for marketing site)
  const isRootDomain = (): boolean => {
    const hostname = window.location.hostname;
-    return hostname === 'lvh.me' || hostname === 'localhost' || hostname === '127.0.0.1';
+    // Root domain has no subdomain (just the base domain like smoothschedule.com or lvh.me)
+    const parts = hostname.split('.');
+    return hostname === 'localhost' || hostname === '127.0.0.1' || parts.length === 2;
  };

  // On root domain, ALWAYS show marketing site (even if logged in)
  // Logged-in users will see a "Go to Dashboard" link in the navbar
  if (isRootDomain()) {
    return (
-      <Routes>
-        <Route element={<MarketingLayout user={user} />}>
-          <Route path="/" element={<HomePage />} />
-          <Route path="/features" element={<FeaturesPage />} />
-          <Route path="/pricing" element={<PricingPage />} />
-          <Route path="/about" element={<AboutPage />} />
-          <Route path="/contact" element={<ContactPage />} />
-          <Route path="/signup" element={<SignupPage />} />
-        </Route>
-        <Route path="/login" element={<LoginPage />} />
-        <Route path="/mfa-verify" element={<MFAVerifyPage />} />
-        <Route path="/oauth/callback/:provider" element={<OAuthCallback />} />
-        <Route path="/verify-email" element={<VerifyEmail />} />
-        <Route path="/accept-invite" element={<AcceptInvitePage />} />
-        <Route path="/tenant-onboard" element={<TenantOnboardPage />} />
-        <Route path="*" element={<Navigate to="/" replace />} />
-      </Routes>
+      <Suspense fallback={<LoadingScreen />}>
+        <Routes>
+          <Route element={<MarketingLayout user={user} />}>
+            <Route path="/" element={<HomePage />} />
+            <Route path="/features" element={<FeaturesPage />} />
+            <Route path="/pricing" element={<PricingPage />} />
+            <Route path="/about" element={<AboutPage />} />
+            <Route path="/contact" element={<ContactPage />} />
+            <Route path="/signup" element={<SignupPage />} />
+            <Route path="/privacy" element={<PrivacyPolicyPage />} />
+            <Route path="/terms" element={<TermsOfServicePage />} />
+          </Route>
+          <Route path="/login" element={<LoginPage />} />
+          <Route path="/mfa-verify" element={<MFAVerifyPage />} />
+          <Route path="/oauth/callback/:provider" element={<OAuthCallback />} />
+          <Route path="/verify-email" element={<VerifyEmail />} />
+          <Route path="/accept-invite" element={<AcceptInvitePage />} />
+          <Route path="/accept-invite/:token" element={<AcceptInvitePage />} />
+          <Route path="/tenant-onboard" element={<TenantOnboardPage />} />
+          <Route path="/sign/:token" element={<ContractSigning />} />
+          <Route path="*" element={<Navigate to="/" replace />} />
+        </Routes>
+      </Suspense>
    );
  }

-  // Not authenticated on subdomain - show login
+  // Not authenticated - show appropriate page based on subdomain
  if (!user) {
+    const currentHostname = window.location.hostname;
+    const hostnameParts = currentHostname.split('.');
+    const baseDomain = hostnameParts.length >= 2
+      ? hostnameParts.slice(-2).join('.')
+      : currentHostname;
+    const isRootDomainForUnauthUser = currentHostname === baseDomain || currentHostname === 'localhost';
+    const isPlatformSubdomain = hostnameParts[0] === 'platform';
+    const currentSubdomain = hostnameParts[0];
+
+    // Check if we're on a business subdomain (not root, not platform, not api)
+    const isBusinessSubdomain = !isRootDomainForUnauthUser && !isPlatformSubdomain && currentSubdomain !== 'api';
+
+    // For business subdomains, show the tenant landing page with login option
+    if (isBusinessSubdomain) {
+      return (
+        <Suspense fallback={<LoadingScreen />}>
+          <Routes>
+            <Route path="/" element={<TenantLandingPage subdomain={currentSubdomain} />} />
+            <Route path="/login" element={<LoginPage />} />
+            <Route path="/mfa-verify" element={<MFAVerifyPage />} />
+            <Route path="/oauth/callback/:provider" element={<OAuthCallback />} />
+            <Route path="/verify-email" element={<VerifyEmail />} />
+            <Route path="/accept-invite" element={<AcceptInvitePage />} />
+            <Route path="/accept-invite/:token" element={<AcceptInvitePage />} />
+            <Route path="/tenant-onboard" element={<TenantOnboardPage />} />
+            <Route path="/sign/:token" element={<ContractSigning />} />
+            <Route path="*" element={<Navigate to="/" replace />} />
+          </Routes>
+        </Suspense>
+      );
+    }
+
+    // For root domain or platform subdomain, show marketing site / login
    return (
-      <Routes>
-        <Route path="/login" element={<LoginPage />} />
-        <Route path="/mfa-verify" element={<MFAVerifyPage />} />
-        <Route path="/oauth/callback/:provider" element={<OAuthCallback />} />
-        <Route path="/verify-email" element={<VerifyEmail />} />
-        <Route path="/accept-invite" element={<AcceptInvitePage />} />
-        <Route path="/tenant-onboard" element={<TenantOnboardPage />} />
-        <Route path="*" element={<Navigate to="/login" replace />} />
-      </Routes>
+      <Suspense fallback={<LoadingScreen />}>
+        <Routes>
+          <Route element={<MarketingLayout user={user} />}>
+            <Route path="/" element={<HomePage />} />
+            <Route path="/features" element={<FeaturesPage />} />
+            <Route path="/pricing" element={<PricingPage />} />
+            <Route path="/about" element={<AboutPage />} />
+            <Route path="/contact" element={<ContactPage />} />
+            <Route path="/signup" element={<SignupPage />} />
+            <Route path="/privacy" element={<PrivacyPolicyPage />} />
+            <Route path="/terms" element={<TermsOfServicePage />} />
+          </Route>
+          <Route path="/login" element={<LoginPage />} />
+          <Route path="/mfa-verify" element={<MFAVerifyPage />} />
+          <Route path="/oauth/callback/:provider" element={<OAuthCallback />} />
+          <Route path="/verify-email" element={<VerifyEmail />} />
+          <Route path="/accept-invite" element={<AcceptInvitePage />} />
+          <Route path="/accept-invite/:token" element={<AcceptInvitePage />} />
+          <Route path="/tenant-onboard" element={<TenantOnboardPage />} />
+          <Route path="/sign/:token" element={<ContractSigning />} />
+          <Route path="*" element={<Navigate to="/" replace />} />
+        </Routes>
+      </Suspense>
    );
  }

@@ -264,38 +395,43 @@ const AppContent: React.FC = () => {

  // Subdomain validation for logged-in users
  const currentHostname = window.location.hostname;
-  const isPlatformDomain = currentHostname === 'platform.lvh.me';
-  const currentSubdomain = currentHostname.split('.')[0];
-  const isBusinessSubdomain = !isRootDomain() && !isPlatformDomain && currentSubdomain !== 'api';
+  const hostnameParts = currentHostname.split('.');
+  const baseDomain = hostnameParts.length >= 2
+    ? hostnameParts.slice(-2).join('.')
+    : currentHostname;
+  const protocol = window.location.protocol;
+  const isPlatformDomain = currentHostname === `platform.${baseDomain}`;
+  const currentSubdomain = hostnameParts[0];
+  const isBusinessSubdomain = !isRootDomain() && !isPlatformDomain && currentSubdomain !== 'api' && currentHostname !== baseDomain;

  const isPlatformUser = ['superuser', 'platform_manager', 'platform_support'].includes(user.role);
  const isBusinessUser = ['owner', 'manager', 'staff', 'resource'].includes(user.role);
  const isCustomer = user.role === 'customer';

-  // RULE: Platform users must be on platform subdomain (not business subdomains)
+  // RULE: Platform users on business subdomains should be redirected to platform subdomain
  if (isPlatformUser && isBusinessSubdomain) {
    const port = window.location.port ? `:${window.location.port}` : '';
-    window.location.href = `http://platform.lvh.me${port}/`;
+    window.location.href = `${protocol}//platform.${baseDomain}${port}/`;
    return <LoadingScreen />;
  }

  // RULE: Business users must be on their own business subdomain
  if (isBusinessUser && isBusinessSubdomain && user.business_subdomain && user.business_subdomain !== currentSubdomain) {
    const port = window.location.port ? `:${window.location.port}` : '';
-    window.location.href = `http://${user.business_subdomain}.lvh.me${port}/`;
+    window.location.href = `${protocol}//${user.business_subdomain}.${baseDomain}${port}/`;
    return <LoadingScreen />;
  }

  // RULE: Customers must be on their business subdomain
  if (isCustomer && isPlatformDomain && user.business_subdomain) {
    const port = window.location.port ? `:${window.location.port}` : '';
-    window.location.href = `http://${user.business_subdomain}.lvh.me${port}/`;
+    window.location.href = `${protocol}//${user.business_subdomain}.${baseDomain}${port}/`;
    return <LoadingScreen />;
  }

  if (isCustomer && isBusinessSubdomain && user.business_subdomain && user.business_subdomain !== currentSubdomain) {
    const port = window.location.port ? `:${window.location.port}` : '';
-    window.location.href = `http://${user.business_subdomain}.lvh.me${port}/`;
+    window.location.href = `${protocol}//${user.business_subdomain}.${baseDomain}${port}/`;
    return <LoadingScreen />;
  }

@@ -325,49 +461,53 @@ const AppContent: React.FC = () => {

  if (isPlatformUser) {
    return (
-      <Routes>
-        <Route
-          element={
-            <PlatformLayout
-              user={user}
-              darkMode={darkMode}
-              toggleTheme={toggleTheme}
-              onSignOut={handleSignOut}
-            />
-          }
-        >
-          {(user.role === 'superuser' || user.role === 'platform_manager') && (
-            <>
-              <Route path="/platform/dashboard" element={<PlatformDashboard />} />
-              <Route path="/platform/businesses" element={<PlatformBusinesses onMasquerade={handleMasquerade} />} />
-              <Route path="/platform/users" element={<PlatformUsers onMasquerade={handleMasquerade} />} />
-              <Route path="/platform/staff" element={<PlatformStaff />} />
-            </>
-          )}
-          <Route path="/platform/support" element={<PlatformSupportPage />} />
-          <Route path="/help/guide" element={<HelpGuide />} />
-          <Route path="/help/ticketing" element={<HelpTicketing />} />
-          <Route path="/help/api" element={<HelpApiDocs />} />
-          <Route path="/help/plugins" element={<HelpPluginDocs />} />
-          {user.role === 'superuser' && (
-            <Route path="/platform/settings" element={<PlatformSettings />} />
-          )}
-          <Route path="/platform/profile" element={<ProfileSettings />} />
-          <Route path="/verify-email" element={<VerifyEmail />} />
+      <Suspense fallback={<LoadingScreen />}>
+        <Routes>
          <Route
-            path="*"
            element={
-              <Navigate
-                to={
-                  user.role === 'superuser' || user.role === 'platform_manager'
-                    ? '/platform/dashboard'
-                    : '/platform/support'
-                }
+              <PlatformLayout
+                user={user}
+                darkMode={darkMode}
+                toggleTheme={toggleTheme}
+                onSignOut={handleSignOut}
              />
            }
-          />
-        </Route>
-      </Routes>
+          >
+            {(user.role === 'superuser' || user.role === 'platform_manager') && (
+              <>
+                <Route path="/platform/dashboard" element={<PlatformDashboard />} />
+                <Route path="/platform/businesses" element={<PlatformBusinesses onMasquerade={handleMasquerade} />} />
+                <Route path="/platform/users" element={<PlatformUsers onMasquerade={handleMasquerade} />} />
+                <Route path="/platform/staff" element={<PlatformStaff />} />
+              </>
+            )}
+            <Route path="/platform/support" element={<PlatformSupportPage />} />
+            <Route path="/platform/email-addresses" element={<PlatformEmailAddresses />} />
+            <Route path="/help/guide" element={<HelpGuide />} />
+            <Route path="/help/ticketing" element={<HelpTicketing />} />
+            <Route path="/help/api" element={<HelpApiDocs />} />
+            <Route path="/help/plugins" element={<HelpPluginDocs />} />
+            <Route path="/help/email" element={<HelpEmailSettings />} />
+            {user.role === 'superuser' && (
+              <Route path="/platform/settings" element={<PlatformSettings />} />
+            )}
+            <Route path="/platform/profile" element={<ProfileSettings />} />
+            <Route path="/verify-email" element={<VerifyEmail />} />
+            <Route
+              path="*"
+              element={
+                <Navigate
+                  to={
+                    user.role === 'superuser' || user.role === 'platform_manager'
+                      ? '/platform/dashboard'
+                      : '/platform/support'
+                  }
+                />
+              }
+            />
+          </Route>
+        </Routes>
+      </Suspense>
    );
  }

@@ -399,26 +539,28 @@ const AppContent: React.FC = () => {
    }

    return (
-      <Routes>
-        <Route
-          element={
-            <CustomerLayout
-              business={business}
-              user={user}
-              darkMode={darkMode}
-              toggleTheme={toggleTheme}
-            />
-          }
-        >
-          <Route path="/" element={<CustomerDashboard />} />
-          <Route path="/book" element={<BookingPage />} />
-          <Route path="/payments" element={<Payments />} />
-          <Route path="/support" element={<CustomerSupport />} />
-          <Route path="/profile" element={<ProfileSettings />} />
-          <Route path="/verify-email" element={<VerifyEmail />} />
-          <Route path="*" element={<Navigate to="/" />} />
-        </Route>
-      </Routes>
+      <Suspense fallback={<LoadingScreen />}>
+        <Routes>
+          <Route
+            element={
+              <CustomerLayout
+                business={business}
+                user={user}
+                darkMode={darkMode}
+                toggleTheme={toggleTheme}
+              />
+            }
+          >
+            <Route path="/" element={<CustomerDashboard />} />
+            <Route path="/book" element={<BookingPage />} />
+            <Route path="/payments" element={<CustomerBilling />} />
+            <Route path="/support" element={<CustomerSupport />} />
+            <Route path="/profile" element={<ProfileSettings />} />
+            <Route path="/verify-email" element={<VerifyEmail />} />
+            <Route path="*" element={<Navigate to="/" />} />
+          </Route>
+        </Routes>
+      </Suspense>
    );
  }

@@ -431,8 +573,7 @@ const AppContent: React.FC = () => {
  if (businessError || !business) {
    // If user has a business subdomain, redirect them there
    if (user.business_subdomain) {
-      const port = window.location.port ? `:${window.location.port}` : '';
-      window.location.href = `http://${user.business_subdomain}.lvh.me${port}/`;
+      window.location.href = buildSubdomainUrl(user.business_subdomain, '/');
      return <LoadingScreen />;
    }

@@ -468,11 +609,13 @@ const AppContent: React.FC = () => {
    // Check if email verification is required
    if (!user.email_verified) {
      return (
-        <Routes>
-          <Route path="/email-verification-required" element={<EmailVerificationRequired />} />
-          <Route path="/verify-email" element={<VerifyEmail />} />
-          <Route path="*" element={<Navigate to="/email-verification-required" replace />} />
-        </Routes>
+        <Suspense fallback={<LoadingScreen />}>
+          <Routes>
+            <Route path="/email-verification-required" element={<EmailVerificationRequired />} />
+            <Route path="/verify-email" element={<VerifyEmail />} />
+            <Route path="*" element={<Navigate to="/email-verification-required" replace />} />
+          </Routes>
+        </Suspense>
      );
    }

@@ -487,157 +630,273 @@ const AppContent: React.FC = () => {
    // If trial expired and not on allowed route, redirect to trial-expired
    if (isTrialExpired && !isOnAllowedRoute) {
      return (
-        <Routes>
-          <Route path="/trial-expired" element={<TrialExpired />} />
-          <Route path="/upgrade" element={<Upgrade />} />
-          <Route path="/profile" element={<ProfileSettings />} />
-          <Route
-            path="/settings"
-            element={hasAccess(['owner']) ? <Settings /> : <Navigate to="/trial-expired" />}
-          />
-          <Route path="*" element={<Navigate to="/trial-expired" replace />} />
-        </Routes>
+        <Suspense fallback={<LoadingScreen />}>
+          <Routes>
+            <Route path="/trial-expired" element={<TrialExpired />} />
+            <Route path="/upgrade" element={<Upgrade />} />
+            <Route path="/profile" element={<ProfileSettings />} />
+            {/* Trial-expired users can access billing settings to upgrade */}
+            <Route
+              path="/settings/*"
+              element={hasAccess(['owner']) ? <Navigate to="/upgrade" /> : <Navigate to="/trial-expired" />}
+            />
+            <Route path="*" element={<Navigate to="/trial-expired" replace />} />
+          </Routes>
+        </Suspense>
      );
    }

    return (
-      <Routes>
-        <Route
-          element={
-            <BusinessLayout
-              business={business}
-              user={user}
-              darkMode={darkMode}
-              toggleTheme={toggleTheme}
-              onSignOut={handleSignOut}
-              updateBusiness={handleUpdateBusiness}
-            />
-          }
-        >
-          {/* Trial and Upgrade Routes */}
-          <Route path="/trial-expired" element={<TrialExpired />} />
-          <Route path="/upgrade" element={<Upgrade />} />
+      <Suspense fallback={<LoadingScreen />}>
+        <Routes>
+          <Route
+            element={
+              <BusinessLayout
+                business={business}
+                user={user}
+                darkMode={darkMode}
+                toggleTheme={toggleTheme}
+                onSignOut={handleSignOut}
+                updateBusiness={handleUpdateBusiness}
+              />
+            }
+          >
+            {/* Trial and Upgrade Routes */}
+            <Route path="/trial-expired" element={<TrialExpired />} />
+            <Route path="/upgrade" element={<Upgrade />} />

-          {/* Regular Routes */}
-          <Route
-            path="/"
-            element={user.role === 'resource' ? <ResourceDashboard /> : <Dashboard />}
-          />
-          <Route path="/scheduler" element={<Scheduler />} />
-          <Route path="/tickets" element={<Tickets />} />
-          <Route path="/help/guide" element={<HelpGuide />} />
-          <Route path="/help/ticketing" element={<HelpTicketing />} />
-          <Route path="/help/api" element={<HelpApiDocs />} />
-          <Route path="/help/plugins" element={<HelpPluginDocs />} />
-          <Route
-            path="/plugins/marketplace"
-            element={
-              hasAccess(['owner', 'manager']) ? (
-                <PluginMarketplace />
-              ) : (
-                <Navigate to="/" />
-              )
-            }
-          />
-          <Route
-            path="/plugins/my-plugins"
-            element={
-              hasAccess(['owner', 'manager']) ? (
-                <MyPlugins />
-              ) : (
-                <Navigate to="/" />
-              )
-            }
-          />
-          <Route
-            path="/tasks"
-            element={
-              hasAccess(['owner', 'manager']) ? (
-                <Tasks />
-              ) : (
-                <Navigate to="/" />
-              )
-            }
-          />
-          <Route
-            path="/email-templates"
-            element={
-              hasAccess(['owner', 'manager']) ? (
-                <EmailTemplates />
-              ) : (
-                <Navigate to="/" />
-              )
-            }
-          />
-          <Route path="/support" element={<PlatformSupport />} />
-          <Route
-            path="/customers"
-            element={
-              hasAccess(['owner', 'manager', 'staff']) ? (
-                <Customers onMasquerade={handleMasquerade} effectiveUser={user} />
-              ) : (
-                <Navigate to="/" />
-              )
-            }
-          />
-          <Route
-            path="/services"
-            element={
-              hasAccess(['owner', 'manager', 'staff']) ? (
-                <Services />
-              ) : (
-                <Navigate to="/" />
-              )
-            }
-          />
-          <Route
-            path="/resources"
-            element={
-              hasAccess(['owner', 'manager', 'staff']) ? (
-                <Resources onMasquerade={handleMasquerade} effectiveUser={user} />
-              ) : (
-                <Navigate to="/" />
-              )
-            }
-          />
-          <Route
-            path="/staff"
-            element={
-              hasAccess(['owner', 'manager']) ? (
-                <Staff onMasquerade={handleMasquerade} effectiveUser={user} />
-              ) : (
-                <Navigate to="/" />
-              )
-            }
-          />
-          <Route
-            path="/payments"
-            element={
-              hasAccess(['owner', 'manager']) ? <Payments /> : <Navigate to="/" />
-            }
-          />
-          <Route
-            path="/messages"
-            element={
-              hasAccess(['owner', 'manager']) ? (
-                <div className="p-8">
-                  <h1 className="text-2xl font-bold mb-4">Messages</h1>
-                  <p className="text-gray-600">Messages feature coming soon...</p>
-                </div>
-              ) : (
-                <Navigate to="/" />
-              )
-            }
-          />
-          <Route
-            path="/settings"
-            element={hasAccess(['owner']) ? <Settings /> : <Navigate to="/" />}
-          />
-          <Route path="/profile" element={<ProfileSettings />} />
-          <Route path="/verify-email" element={<VerifyEmail />} />
-          <Route path="*" element={<Navigate to="/" />} />
-        </Route>
-      </Routes>
+            {/* Regular Routes */}
+            <Route
+              path="/"
+              element={user.role === 'resource' ? <ResourceDashboard /> : user.role === 'staff' ? <StaffDashboard user={user} /> : <Dashboard />}
+            />
+            {/* Staff Schedule - vertical timeline view */}
+            <Route
+              path="/my-schedule"
+              element={
+                hasAccess(['staff']) ? (
+                  <StaffSchedule user={user} />
+                ) : (
+                  <Navigate to="/" />
+                )
+              }
+            />
+            <Route path="/scheduler" element={<Scheduler />} />
+            <Route path="/tickets" element={<Tickets />} />
+            <Route
+              path="/help"
+              element={
+                user.role === 'staff' ? (
+                  <StaffHelp user={user} />
+                ) : (
+                  <HelpComprehensive />
+                )
+              }
+            />
+            <Route path="/help/guide" element={<HelpGuide />} />
+            <Route path="/help/ticketing" element={<HelpTicketing />} />
+            <Route path="/help/api" element={<HelpApiDocs />} />
+            <Route path="/help/plugins/docs" element={<HelpPluginDocs />} />
+            <Route path="/help/email" element={<HelpEmailSettings />} />
+            {/* New help pages */}
+            <Route path="/help/dashboard" element={<HelpDashboard />} />
+            <Route path="/help/scheduler" element={<HelpScheduler />} />
+            <Route path="/help/tasks" element={<HelpTasks />} />
+            <Route path="/help/customers" element={<HelpCustomers />} />
+            <Route path="/help/services" element={<HelpServices />} />
+            <Route path="/help/resources" element={<HelpResources />} />
+            <Route path="/help/staff" element={<HelpStaff />} />
+            <Route path="/help/time-blocks" element={<HelpTimeBlocks />} />
+            <Route path="/help/messages" element={<HelpMessages />} />
+            <Route path="/help/payments" element={<HelpPayments />} />
+            <Route path="/help/contracts" element={<HelpContracts />} />
+            <Route path="/help/plugins" element={<HelpPlugins />} />
+            <Route path="/help/settings/general" element={<HelpSettingsGeneral />} />
+            <Route path="/help/settings/resource-types" element={<HelpSettingsResourceTypes />} />
+            <Route path="/help/settings/booking" element={<HelpSettingsBooking />} />
+            <Route path="/help/settings/appearance" element={<HelpSettingsAppearance />} />
+            <Route path="/help/settings/email" element={<HelpSettingsEmail />} />
+            <Route path="/help/settings/domains" element={<HelpSettingsDomains />} />
+            <Route path="/help/settings/api" element={<HelpSettingsApi />} />
+            <Route path="/help/settings/auth" element={<HelpSettingsAuth />} />
+            <Route path="/help/settings/billing" element={<HelpSettingsBilling />} />
+            <Route path="/help/settings/quota" element={<HelpSettingsQuota />} />
+            <Route
+              path="/plugins/marketplace"
+              element={
+                hasAccess(['owner', 'manager']) ? (
+                  <PluginMarketplace />
+                ) : (
+                  <Navigate to="/" />
+                )
+              }
+            />
+            <Route
+              path="/plugins/my-plugins"
+              element={
+                hasAccess(['owner', 'manager']) ? (
+                  <MyPlugins />
+                ) : (
+                  <Navigate to="/" />
+                )
+              }
+            />
+            <Route
+              path="/plugins/create"
+              element={
+                hasAccess(['owner', 'manager']) ? (
+                  <CreatePlugin />
+                ) : (
+                  <Navigate to="/" />
+                )
+              }
+            />
+            <Route
+              path="/tasks"
+              element={
+                hasAccess(['owner', 'manager']) ? (
+                  <Tasks />
+                ) : (
+                  <Navigate to="/" />
+                )
+              }
+            />
+            <Route
+              path="/email-templates"
+              element={
+                hasAccess(['owner', 'manager']) ? (
+                  <EmailTemplates />
+                ) : (
+                  <Navigate to="/" />
+                )
+              }
+            />
+            <Route path="/support" element={<PlatformSupport />} />
+            <Route
+              path="/customers"
+              element={
+                hasAccess(['owner', 'manager']) ? (
+                  <Customers onMasquerade={handleMasquerade} effectiveUser={user} />
+                ) : (
+                  <Navigate to="/" />
+                )
+              }
+            />
+            <Route
+              path="/services"
+              element={
+                hasAccess(['owner', 'manager']) ? (
+                  <Services />
+                ) : (
+                  <Navigate to="/" />
+                )
+              }
+            />
+            <Route
+              path="/resources"
+              element={
+                hasAccess(['owner', 'manager']) ? (
+                  <Resources onMasquerade={handleMasquerade} effectiveUser={user} />
+                ) : (
+                  <Navigate to="/" />
+                )
+              }
+            />
+            <Route
+              path="/staff"
+              element={
+                hasAccess(['owner', 'manager']) ? (
+                  <Staff onMasquerade={handleMasquerade} effectiveUser={user} />
+                ) : (
+                  <Navigate to="/" />
+                )
+              }
+            />
+            <Route
+              path="/time-blocks"
+              element={
+                hasAccess(['owner', 'manager']) ? (
+                  <TimeBlocks />
+                ) : (
+                  <Navigate to="/" />
+                )
+              }
+            />
+            <Route
+              path="/my-availability"
+              element={
+                hasAccess(['staff', 'resource']) ? (
+                  <MyAvailability user={user} />
+                ) : (
+                  <Navigate to="/" />
+                )
+              }
+            />
+            <Route
+              path="/contracts"
+              element={
+                hasAccess(['owner', 'manager']) && canUse('contracts') ? (
+                  <Contracts />
+                ) : (
+                  <Navigate to="/" />
+                )
+              }
+            />
+            <Route
+              path="/contracts/templates"
+              element={
+                hasAccess(['owner', 'manager']) && canUse('contracts') ? (
+                  <ContractTemplates />
+                ) : (
+                  <Navigate to="/" />
+                )
+              }
+            />
+            <Route
+              path="/payments"
+              element={
+                hasAccess(['owner', 'manager']) ? <Payments /> : <Navigate to="/" />
+              }
+            />
+            <Route
+              path="/messages"
+              element={
+                hasAccess(['owner', 'manager']) ? (
+                  <div className="p-8">
+                    <h1 className="text-2xl font-bold mb-4">Messages</h1>
+                    <p className="text-gray-600">Messages feature coming soon...</p>
+                  </div>
+                ) : (
+                  <Navigate to="/" />
+                )
+              }
+            />
+            {/* Settings Routes with Nested Layout */}
+            {hasAccess(['owner']) ? (
+              <Route path="/settings" element={<SettingsLayout />}>
+                <Route index element={<Navigate to="/settings/general" replace />} />
+                <Route path="general" element={<GeneralSettings />} />
+                <Route path="branding" element={<BrandingSettings />} />
+                <Route path="resource-types" element={<ResourceTypesSettings />} />
+                <Route path="booking" element={<BookingSettings />} />
+                <Route path="email-templates" element={<EmailTemplates />} />
+                <Route path="custom-domains" element={<CustomDomainsSettings />} />
+                <Route path="api" element={<ApiSettings />} />
+                <Route path="authentication" element={<AuthenticationSettings />} />
+                <Route path="email" element={<EmailSettings />} />
+                <Route path="sms-calling" element={<CommunicationSettings />} />
+                <Route path="billing" element={<BillingSettings />} />
+                <Route path="quota" element={<QuotaSettings />} />
+              </Route>
+            ) : (
+              <Route path="/settings/*" element={<Navigate to="/" />} />
+            )}
+            <Route path="/profile" element={<ProfileSettings />} />
+            <Route path="/verify-email" element={<VerifyEmail />} />
+            <Route path="*" element={<Navigate to="/" />} />
+          </Route>
+        </Routes>
+      </Suspense>
    );
  }

--- a/frontend/src/api/auth.ts
+++ b/frontend/src/api/auth.ts
@@ -5,12 +5,23 @@
 import apiClient from './client';

 export interface LoginCredentials {
-  username: string;
+  email: string;
  password: string;
 }

 import { UserRole } from '../types';

+export interface QuotaOverage {
+  id: number;
+  quota_type: string;
+  display_name: string;
+  current_usage: number;
+  allowed_limit: number;
+  overage_amount: number;
+  days_remaining: number;
+  grace_period_ends_at: string;
+}
+
 export interface MasqueradeStackEntry {
  user_id: number;
  username: string;
@@ -58,13 +69,19 @@ export interface User {
  business?: number;
  business_name?: string;
  business_subdomain?: string;
+  permissions?: Record<string, boolean>;
+  can_invite_staff?: boolean;
+  can_access_tickets?: boolean;
+  can_edit_schedule?: boolean;
+  linked_resource_id?: number;
+  quota_overages?: QuotaOverage[];
 }

 /**
 * Login user
 */
 export const login = async (credentials: LoginCredentials): Promise<LoginResponse> => {
-  const response = await apiClient.post<LoginResponse>('/api/auth/login/', credentials);
+  const response = await apiClient.post<LoginResponse>('/auth/login/', credentials);
  return response.data;
 };

@@ -72,14 +89,14 @@ export const login = async (credentials: LoginCredentials): Promise<LoginRespons
 * Logout user
 */
 export const logout = async (): Promise<void> => {
-  await apiClient.post('/api/auth/logout/');
+  await apiClient.post('/auth/logout/');
 };

 /**
 * Get current user
 */
 export const getCurrentUser = async (): Promise<User> => {
-  const response = await apiClient.get<User>('/api/auth/me/');
+  const response = await apiClient.get<User>('/auth/me/');
  return response.data;
 };

@@ -87,7 +104,7 @@ export const getCurrentUser = async (): Promise<User> => {
 * Refresh access token
 */
 export const refreshToken = async (refresh: string): Promise<{ access: string }> => {
-  const response = await apiClient.post('/api/auth/refresh/', { refresh });
+  const response = await apiClient.post('/auth/refresh/', { refresh });
  return response.data;
 };

@@ -99,7 +116,7 @@ export const masquerade = async (
  hijack_history?: MasqueradeStackEntry[]
 ): Promise<LoginResponse> => {
  const response = await apiClient.post<LoginResponse>(
-    '/api/auth/hijack/acquire/',
+    '/auth/hijack/acquire/',
    { user_pk, hijack_history }
  );
  return response.data;
@@ -112,7 +129,7 @@ export const stopMasquerade = async (
  masquerade_stack: MasqueradeStackEntry[]
 ): Promise<LoginResponse> => {
  const response = await apiClient.post<LoginResponse>(
-    '/api/auth/hijack/release/',
+    '/auth/hijack/release/',
    { masquerade_stack }
  );
  return response.data;
--- a/frontend/src/api/business.ts
+++ b/frontend/src/api/business.ts
@@ -9,7 +9,7 @@ import { User, Resource, BusinessOAuthSettings, BusinessOAuthSettingsResponse, B
 * Get all resources for the current business
 */
 export const getResources = async (): Promise<Resource[]> => {
-  const response = await apiClient.get<Resource[]>('/api/resources/');
+  const response = await apiClient.get<Resource[]>('/resources/');
  return response.data;
 };

@@ -17,7 +17,7 @@ export const getResources = async (): Promise<Resource[]> => {
 * Get all users for the current business
 */
 export const getBusinessUsers = async (): Promise<User[]> => {
-  const response = await apiClient.get<User[]>('/api/business/users/');
+  const response = await apiClient.get<User[]>('/business/users/');
  return response.data;
 };

@@ -38,7 +38,7 @@ export const getBusinessOAuthSettings = async (): Promise<BusinessOAuthSettingsR
      icon: string;
      description: string;
    }>;
-  }>('/api/business/oauth-settings/');
+  }>('/business/oauth-settings/');

  // Transform snake_case to camelCase
  return {
@@ -87,7 +87,7 @@ export const updateBusinessOAuthSettings = async (
      icon: string;
      description: string;
    }>;
-  }>('/api/business/oauth-settings/', backendData);
+  }>('/business/oauth-settings/', backendData);

  // Transform snake_case to camelCase
  return {
@@ -112,7 +112,7 @@ export const getBusinessOAuthCredentials = async (): Promise<BusinessOAuthCreden
      has_secret: boolean;
    }>;
    use_custom_credentials: boolean;
-  }>('/api/business/oauth-credentials/');
+  }>('/business/oauth-credentials/');

  return {
    credentials: response.data.credentials || {},
@@ -145,7 +145,7 @@ export const updateBusinessOAuthCredentials = async (
      has_secret: boolean;
    }>;
    use_custom_credentials: boolean;
-  }>('/api/business/oauth-credentials/', backendData);
+  }>('/business/oauth-credentials/', backendData);

  return {
    credentials: response.data.credentials || {},
--- a/frontend/src/api/client.ts
+++ b/frontend/src/api/client.ts
@@ -71,7 +71,7 @@ apiClient.interceptors.response.use(
        // Try to refresh token (from cookie)
        const refreshToken = getCookie('refresh_token');
        if (refreshToken) {
-          const response = await axios.post(`${API_BASE_URL}/api/auth/refresh/`, {
+          const response = await axios.post(`${API_BASE_URL}/auth/refresh/`, {
            refresh: refreshToken,
          });

@@ -88,11 +88,15 @@ apiClient.interceptors.response.use(
          return apiClient(originalRequest);
        }
      } catch (refreshError) {
-        // Refresh failed - clear tokens and redirect to login
+        // Refresh failed - clear tokens and redirect to login on root domain
        const { deleteCookie } = await import('../utils/cookies');
+        const { getBaseDomain } = await import('../utils/domain');
        deleteCookie('access_token');
        deleteCookie('refresh_token');
-        window.location.href = '/login';
+        const protocol = window.location.protocol;
+        const baseDomain = getBaseDomain();
+        const port = window.location.port ? `:${window.location.port}` : '';
+        window.location.href = `${protocol}//${baseDomain}${port}/login`;
        return Promise.reject(refreshError);
      }
    }
--- a/frontend/src/api/config.ts
+++ b/frontend/src/api/config.ts
@@ -3,6 +3,8 @@
 * Centralized configuration for API endpoints and settings
 */

+import { getBaseDomain, isRootDomain } from '../utils/domain';
+
 // Determine API base URL based on environment
 const getApiBaseUrl = (): string => {
  // In production, this would be set via environment variable
@@ -10,8 +12,15 @@ const getApiBaseUrl = (): string => {
    return import.meta.env.VITE_API_URL;
  }

-  // Development: use api subdomain
-  return 'http://api.lvh.me:8000';
+  // Development: build API URL dynamically based on current domain
+  const baseDomain = getBaseDomain();
+  const protocol = window.location.protocol;
+
+  // For localhost or lvh.me, use port 8000
+  const isDev = baseDomain === 'localhost' || baseDomain === 'lvh.me';
+  const port = isDev ? ':8000' : '';
+
+  return `${protocol}//api.${baseDomain}${port}`;
 };

 export const API_BASE_URL = getApiBaseUrl();
@@ -24,8 +33,8 @@ export const getSubdomain = (): string | null => {
  const hostname = window.location.hostname;
  const parts = hostname.split('.');

-  // lvh.me without subdomain (root domain) - no business context
-  if (hostname === 'lvh.me') {
+  // Root domain (no subdomain) - no business context
+  if (isRootDomain()) {
    return null;
  }

--- a/frontend/src/api/customDomains.ts
+++ b/frontend/src/api/customDomains.ts
@@ -9,7 +9,7 @@ import { CustomDomain } from '../types';
 * Get all custom domains for the current business
 */
 export const getCustomDomains = async (): Promise<CustomDomain[]> => {
-  const response = await apiClient.get<CustomDomain[]>('/api/business/domains/');
+  const response = await apiClient.get<CustomDomain[]>('/business/domains/');
  return response.data;
 };

@@ -17,7 +17,7 @@ export const getCustomDomains = async (): Promise<CustomDomain[]> => {
 * Add a new custom domain
 */
 export const addCustomDomain = async (domain: string): Promise<CustomDomain> => {
-  const response = await apiClient.post<CustomDomain>('/api/business/domains/', {
+  const response = await apiClient.post<CustomDomain>('/business/domains/', {
    domain: domain.toLowerCase().trim(),
  });
  return response.data;
@@ -27,7 +27,7 @@ export const addCustomDomain = async (domain: string): Promise<CustomDomain> =>
 * Delete a custom domain
 */
 export const deleteCustomDomain = async (domainId: number): Promise<void> => {
-  await apiClient.delete(`/api/business/domains/${domainId}/`);
+  await apiClient.delete(`/business/domains/${domainId}/`);
 };

 /**
@@ -35,7 +35,7 @@ export const deleteCustomDomain = async (domainId: number): Promise<void> => {
 */
 export const verifyCustomDomain = async (domainId: number): Promise<{ verified: boolean; message: string }> => {
  const response = await apiClient.post<{ verified: boolean; message: string }>(
-    `/api/business/domains/${domainId}/verify/`
+    `/business/domains/${domainId}/verify/`
  );
  return response.data;
 };
@@ -45,7 +45,7 @@ export const verifyCustomDomain = async (domainId: number): Promise<{ verified:
 */
 export const setPrimaryDomain = async (domainId: number): Promise<CustomDomain> => {
  const response = await apiClient.post<CustomDomain>(
-    `/api/business/domains/${domainId}/set-primary/`
+    `/business/domains/${domainId}/set-primary/`
  );
  return response.data;
 };
--- a/frontend/src/api/domains.ts
+++ b/frontend/src/api/domains.ts
@@ -79,7 +79,7 @@ export const searchDomains = async (
  query: string,
  tlds: string[] = ['.com', '.net', '.org']
 ): Promise<DomainAvailability[]> => {
-  const response = await apiClient.post<DomainAvailability[]>('/api/domains/search/search/', {
+  const response = await apiClient.post<DomainAvailability[]>('/domains/search/search/', {
    query,
    tlds,
  });
@@ -90,7 +90,7 @@ export const searchDomains = async (
 * Get TLD pricing
 */
 export const getDomainPrices = async (): Promise<DomainPrice[]> => {
-  const response = await apiClient.get<DomainPrice[]>('/api/domains/search/prices/');
+  const response = await apiClient.get<DomainPrice[]>('/domains/search/prices/');
  return response.data;
 };

@@ -100,7 +100,7 @@ export const getDomainPrices = async (): Promise<DomainPrice[]> => {
 export const registerDomain = async (
  data: DomainRegisterRequest
 ): Promise<DomainRegistration> => {
-  const response = await apiClient.post<DomainRegistration>('/api/domains/search/register/', data);
+  const response = await apiClient.post<DomainRegistration>('/domains/search/register/', data);
  return response.data;
 };

@@ -108,7 +108,7 @@ export const registerDomain = async (
 * Get all registered domains for current business
 */
 export const getRegisteredDomains = async (): Promise<DomainRegistration[]> => {
-  const response = await apiClient.get<DomainRegistration[]>('/api/domains/registrations/');
+  const response = await apiClient.get<DomainRegistration[]>('/domains/registrations/');
  return response.data;
 };

@@ -116,7 +116,7 @@ export const getRegisteredDomains = async (): Promise<DomainRegistration[]> => {
 * Get a single domain registration
 */
 export const getDomainRegistration = async (id: number): Promise<DomainRegistration> => {
-  const response = await apiClient.get<DomainRegistration>(`/api/domains/registrations/${id}/`);
+  const response = await apiClient.get<DomainRegistration>(`/domains/registrations/${id}/`);
  return response.data;
 };

@@ -128,7 +128,7 @@ export const updateNameservers = async (
  nameservers: string[]
 ): Promise<DomainRegistration> => {
  const response = await apiClient.post<DomainRegistration>(
-    `/api/domains/registrations/${id}/update_nameservers/`,
+    `/domains/registrations/${id}/update_nameservers/`,
    { nameservers }
  );
  return response.data;
@@ -142,7 +142,7 @@ export const toggleAutoRenew = async (
  autoRenew: boolean
 ): Promise<DomainRegistration> => {
  const response = await apiClient.post<DomainRegistration>(
-    `/api/domains/registrations/${id}/toggle_auto_renew/`,
+    `/domains/registrations/${id}/toggle_auto_renew/`,
    { auto_renew: autoRenew }
  );
  return response.data;
@@ -156,7 +156,7 @@ export const renewDomain = async (
  years: number = 1
 ): Promise<DomainRegistration> => {
  const response = await apiClient.post<DomainRegistration>(
-    `/api/domains/registrations/${id}/renew/`,
+    `/domains/registrations/${id}/renew/`,
    { years }
  );
  return response.data;
@@ -167,7 +167,7 @@ export const renewDomain = async (
 */
 export const syncDomain = async (id: number): Promise<DomainRegistration> => {
  const response = await apiClient.post<DomainRegistration>(
-    `/api/domains/registrations/${id}/sync/`
+    `/domains/registrations/${id}/sync/`
  );
  return response.data;
 };
@@ -176,6 +176,6 @@ export const syncDomain = async (id: number): Promise<DomainRegistration> => {
 * Get domain search history
 */
 export const getSearchHistory = async (): Promise<DomainSearchHistory[]> => {
-  const response = await apiClient.get<DomainSearchHistory[]>('/api/domains/history/');
+  const response = await apiClient.get<DomainSearchHistory[]>('/domains/history/');
  return response.data;
 };
--- a/frontend/src/api/mfa.ts
+++ b/frontend/src/api/mfa.ts
@@ -90,7 +90,7 @@ export interface MFAVerifyResponse {
 * Get current MFA status
 */
 export const getMFAStatus = async (): Promise<MFAStatus> => {
-  const response = await apiClient.get<MFAStatus>('/api/auth/mfa/status/');
+  const response = await apiClient.get<MFAStatus>('/auth/mfa/status/');
  return response.data;
 };

@@ -102,7 +102,7 @@ export const getMFAStatus = async (): Promise<MFAStatus> => {
 * Send phone verification code
 */
 export const sendPhoneVerification = async (phone: string): Promise<{ success: boolean; message: string }> => {
-  const response = await apiClient.post('/api/auth/mfa/phone/send/', { phone });
+  const response = await apiClient.post('/auth/mfa/phone/send/', { phone });
  return response.data;
 };

@@ -110,7 +110,7 @@ export const sendPhoneVerification = async (phone: string): Promise<{ success: b
 * Verify phone number with code
 */
 export const verifyPhone = async (code: string): Promise<{ success: boolean; message: string }> => {
-  const response = await apiClient.post('/api/auth/mfa/phone/verify/', { code });
+  const response = await apiClient.post('/auth/mfa/phone/verify/', { code });
  return response.data;
 };

@@ -118,7 +118,7 @@ export const verifyPhone = async (code: string): Promise<{ success: boolean; mes
 * Enable SMS MFA (requires verified phone)
 */
 export const enableSMSMFA = async (): Promise<MFAEnableResponse> => {
-  const response = await apiClient.post<MFAEnableResponse>('/api/auth/mfa/sms/enable/');
+  const response = await apiClient.post<MFAEnableResponse>('/auth/mfa/sms/enable/');
  return response.data;
 };

@@ -130,7 +130,7 @@ export const enableSMSMFA = async (): Promise<MFAEnableResponse> => {
 * Initialize TOTP setup (returns QR code and secret)
 */
 export const setupTOTP = async (): Promise<TOTPSetupResponse> => {
-  const response = await apiClient.post<TOTPSetupResponse>('/api/auth/mfa/totp/setup/');
+  const response = await apiClient.post<TOTPSetupResponse>('/auth/mfa/totp/setup/');
  return response.data;
 };

@@ -138,7 +138,7 @@ export const setupTOTP = async (): Promise<TOTPSetupResponse> => {
 * Verify TOTP code to complete setup
 */
 export const verifyTOTPSetup = async (code: string): Promise<MFAEnableResponse> => {
-  const response = await apiClient.post<MFAEnableResponse>('/api/auth/mfa/totp/verify/', { code });
+  const response = await apiClient.post<MFAEnableResponse>('/auth/mfa/totp/verify/', { code });
  return response.data;
 };

@@ -150,7 +150,7 @@ export const verifyTOTPSetup = async (code: string): Promise<MFAEnableResponse>
 * Generate new backup codes (invalidates old ones)
 */
 export const generateBackupCodes = async (): Promise<BackupCodesResponse> => {
-  const response = await apiClient.post<BackupCodesResponse>('/api/auth/mfa/backup-codes/');
+  const response = await apiClient.post<BackupCodesResponse>('/auth/mfa/backup-codes/');
  return response.data;
 };

@@ -158,7 +158,7 @@ export const generateBackupCodes = async (): Promise<BackupCodesResponse> => {
 * Get backup codes status
 */
 export const getBackupCodesStatus = async (): Promise<BackupCodesStatus> => {
-  const response = await apiClient.get<BackupCodesStatus>('/api/auth/mfa/backup-codes/status/');
+  const response = await apiClient.get<BackupCodesStatus>('/auth/mfa/backup-codes/status/');
  return response.data;
 };

@@ -170,7 +170,7 @@ export const getBackupCodesStatus = async (): Promise<BackupCodesStatus> => {
 * Disable MFA (requires password or valid MFA code)
 */
 export const disableMFA = async (credentials: { password?: string; mfa_code?: string }): Promise<{ success: boolean; message: string }> => {
-  const response = await apiClient.post('/api/auth/mfa/disable/', credentials);
+  const response = await apiClient.post('/auth/mfa/disable/', credentials);
  return response.data;
 };

@@ -182,7 +182,7 @@ export const disableMFA = async (credentials: { password?: string; mfa_code?: st
 * Send MFA code for login (SMS only)
 */
 export const sendMFALoginCode = async (userId: number, method: 'SMS' | 'TOTP' = 'SMS'): Promise<{ success: boolean; message: string; method: string }> => {
-  const response = await apiClient.post('/api/auth/mfa/login/send/', { user_id: userId, method });
+  const response = await apiClient.post('/auth/mfa/login/send/', { user_id: userId, method });
  return response.data;
 };

@@ -195,7 +195,7 @@ export const verifyMFALogin = async (
  method: 'SMS' | 'TOTP' | 'BACKUP',
  trustDevice: boolean = false
 ): Promise<MFAVerifyResponse> => {
-  const response = await apiClient.post<MFAVerifyResponse>('/api/auth/mfa/login/verify/', {
+  const response = await apiClient.post<MFAVerifyResponse>('/auth/mfa/login/verify/', {
    user_id: userId,
    code,
    method,
@@ -212,7 +212,7 @@ export const verifyMFALogin = async (
 * List trusted devices
 */
 export const listTrustedDevices = async (): Promise<{ devices: TrustedDevice[] }> => {
-  const response = await apiClient.get('/api/auth/mfa/devices/');
+  const response = await apiClient.get('/auth/mfa/devices/');
  return response.data;
 };

@@ -220,7 +220,7 @@ export const listTrustedDevices = async (): Promise<{ devices: TrustedDevice[] }
 * Revoke a specific trusted device
 */
 export const revokeTrustedDevice = async (deviceId: number): Promise<{ success: boolean; message: string }> => {
-  const response = await apiClient.delete(`/api/auth/mfa/devices/${deviceId}/`);
+  const response = await apiClient.delete(`/auth/mfa/devices/${deviceId}/`);
  return response.data;
 };

@@ -228,6 +228,6 @@ export const revokeTrustedDevice = async (deviceId: number): Promise<{ success:
 * Revoke all trusted devices
 */
 export const revokeAllTrustedDevices = async (): Promise<{ success: boolean; message: string; count: number }> => {
-  const response = await apiClient.delete('/api/auth/mfa/devices/revoke-all/');
+  const response = await apiClient.delete('/auth/mfa/devices/revoke-all/');
  return response.data;
 };
--- a/frontend/src/api/notifications.ts
+++ b/frontend/src/api/notifications.ts
@@ -29,7 +29,7 @@ export const getNotifications = async (params?: { read?: boolean; limit?: number
    queryParams.append('limit', String(params.limit));
  }
  const query = queryParams.toString();
-  const url = query ? `/api/notifications/?${query}` : '/api/notifications/';
+  const url = query ? `/notifications/?${query}` : '/notifications/';
  const response = await apiClient.get(url);
  return response.data;
 };
@@ -38,7 +38,7 @@ export const getNotifications = async (params?: { read?: boolean; limit?: number
 * Get count of unread notifications
 */
 export const getUnreadCount = async (): Promise<number> => {
-  const response = await apiClient.get<UnreadCountResponse>('/api/notifications/unread_count/');
+  const response = await apiClient.get<UnreadCountResponse>('/notifications/unread_count/');
  return response.data.count;
 };

@@ -46,19 +46,19 @@ export const getUnreadCount = async (): Promise<number> => {
 * Mark a single notification as read
 */
 export const markNotificationRead = async (id: number): Promise<void> => {
-  await apiClient.post(`/api/notifications/${id}/mark_read/`);
+  await apiClient.post(`/notifications/${id}/mark_read/`);
 };

 /**
 * Mark all notifications as read
 */
 export const markAllNotificationsRead = async (): Promise<void> => {
-  await apiClient.post('/api/notifications/mark_all_read/');
+  await apiClient.post('/notifications/mark_all_read/');
 };

 /**
 * Delete all read notifications
 */
 export const clearAllNotifications = async (): Promise<void> => {
-  await apiClient.delete('/api/notifications/clear_all/');
+  await apiClient.delete('/notifications/clear_all/');
 };
--- a/frontend/src/api/oauth.ts
+++ b/frontend/src/api/oauth.ts
@@ -45,7 +45,7 @@ export interface OAuthConnection {
 * Get list of enabled OAuth providers
 */
 export const getOAuthProviders = async (): Promise<OAuthProvider[]> => {
-  const response = await apiClient.get<{ providers: OAuthProvider[] }>('/api/auth/oauth/providers/');
+  const response = await apiClient.get<{ providers: OAuthProvider[] }>('/auth/oauth/providers/');
  return response.data.providers;
 };

@@ -54,7 +54,7 @@ export const getOAuthProviders = async (): Promise<OAuthProvider[]> => {
 */
 export const initiateOAuth = async (provider: string): Promise<OAuthAuthorizationResponse> => {
  const response = await apiClient.get<OAuthAuthorizationResponse>(
-    `/api/auth/oauth/${provider}/authorize/`
+    `/auth/oauth/${provider}/authorize/`
  );
  return response.data;
 };
@@ -68,7 +68,7 @@ export const handleOAuthCallback = async (
  state: string
 ): Promise<OAuthTokenResponse> => {
  const response = await apiClient.post<OAuthTokenResponse>(
-    `/api/auth/oauth/${provider}/callback/`,
+    `/auth/oauth/${provider}/callback/`,
    {
      code,
      state,
@@ -81,7 +81,7 @@ export const handleOAuthCallback = async (
 * Get user's connected OAuth accounts
 */
 export const getOAuthConnections = async (): Promise<OAuthConnection[]> => {
-  const response = await apiClient.get<{ connections: OAuthConnection[] }>('/api/auth/oauth/connections/');
+  const response = await apiClient.get<{ connections: OAuthConnection[] }>('/auth/oauth/connections/');
  return response.data.connections;
 };

@@ -89,5 +89,5 @@ export const getOAuthConnections = async (): Promise<OAuthConnection[]> => {
 * Disconnect an OAuth account
 */
 export const disconnectOAuth = async (provider: string): Promise<void> => {
-  await apiClient.delete(`/api/auth/oauth/connections/${provider}/`);
+  await apiClient.delete(`/auth/oauth/connections/${provider}/`);
 };
--- a/frontend/src/api/payments.ts
+++ b/frontend/src/api/payments.ts
@@ -48,6 +48,8 @@ export interface ConnectAccountInfo {
 export interface PaymentConfig {
  payment_mode: PaymentMode;
  tier: string;
+  tier_allows_payments: boolean;
+  stripe_configured: boolean;
  can_accept_payments: boolean;
  api_keys: ApiKeysInfo | null;
  connect_account: ConnectAccountInfo | null;
@@ -95,7 +97,7 @@ export interface AccountSessionResponse {
 * Returns the complete payment setup for the business.
 */
 export const getPaymentConfig = () =>
-  apiClient.get<PaymentConfig>('/api/payments/config/status/');
+  apiClient.get<PaymentConfig>('/payments/config/status/');

 // ============================================================================
 // API Keys (Free Tier)
@@ -105,14 +107,14 @@ export const getPaymentConfig = () =>
 * Get current API key configuration (masked keys).
 */
 export const getApiKeys = () =>
-  apiClient.get<ApiKeysCurrentResponse>('/api/payments/api-keys/');
+  apiClient.get<ApiKeysCurrentResponse>('/payments/api-keys/');

 /**
 * Save API keys.
 * Validates and stores the provided Stripe API keys.
 */
 export const saveApiKeys = (secretKey: string, publishableKey: string) =>
-  apiClient.post<ApiKeysInfo>('/api/payments/api-keys/', {
+  apiClient.post<ApiKeysInfo>('/payments/api-keys/', {
    secret_key: secretKey,
    publishable_key: publishableKey,
  });
@@ -122,7 +124,7 @@ export const saveApiKeys = (secretKey: string, publishableKey: string) =>
 * Tests the keys against Stripe API.
 */
 export const validateApiKeys = (secretKey: string, publishableKey: string) =>
-  apiClient.post<ApiKeysValidationResult>('/api/payments/api-keys/validate/', {
+  apiClient.post<ApiKeysValidationResult>('/payments/api-keys/validate/', {
    secret_key: secretKey,
    publishable_key: publishableKey,
  });
@@ -132,13 +134,13 @@ export const validateApiKeys = (secretKey: string, publishableKey: string) =>
 * Tests stored keys and updates their status.
 */
 export const revalidateApiKeys = () =>
-  apiClient.post<ApiKeysValidationResult>('/api/payments/api-keys/revalidate/');
+  apiClient.post<ApiKeysValidationResult>('/payments/api-keys/revalidate/');

 /**
 * Delete stored API keys.
 */
 export const deleteApiKeys = () =>
-  apiClient.delete<{ success: boolean; message: string }>('/api/payments/api-keys/delete/');
+  apiClient.delete<{ success: boolean; message: string }>('/payments/api-keys/delete/');

 // ============================================================================
 // Stripe Connect (Paid Tiers)
@@ -148,14 +150,14 @@ export const deleteApiKeys = () =>
 * Get current Connect account status.
 */
 export const getConnectStatus = () =>
-  apiClient.get<ConnectAccountInfo>('/api/payments/connect/status/');
+  apiClient.get<ConnectAccountInfo>('/payments/connect/status/');

 /**
 * Initiate Connect account onboarding.
 * Returns a URL to redirect the user for Stripe onboarding.
 */
 export const initiateConnectOnboarding = (refreshUrl: string, returnUrl: string) =>
-  apiClient.post<ConnectOnboardingResponse>('/api/payments/connect/onboard/', {
+  apiClient.post<ConnectOnboardingResponse>('/payments/connect/onboard/', {
    refresh_url: refreshUrl,
    return_url: returnUrl,
  });
@@ -165,7 +167,7 @@ export const initiateConnectOnboarding = (refreshUrl: string, returnUrl: string)
 * For custom Connect accounts that need a new onboarding link.
 */
 export const refreshConnectOnboardingLink = (refreshUrl: string, returnUrl: string) =>
-  apiClient.post<{ url: string }>('/api/payments/connect/refresh-link/', {
+  apiClient.post<{ url: string }>('/payments/connect/refresh-link/', {
    refresh_url: refreshUrl,
    return_url: returnUrl,
  });
@@ -175,14 +177,14 @@ export const refreshConnectOnboardingLink = (refreshUrl: string, returnUrl: stri
 * Returns a client_secret for initializing Stripe's embedded Connect components.
 */
 export const createAccountSession = () =>
-  apiClient.post<AccountSessionResponse>('/api/payments/connect/account-session/');
+  apiClient.post<AccountSessionResponse>('/payments/connect/account-session/');

 /**
 * Refresh Connect account status from Stripe.
 * Syncs the local account record with the current state in Stripe.
 */
 export const refreshConnectStatus = () =>
-  apiClient.post<ConnectAccountInfo>('/api/payments/connect/refresh-status/');
+  apiClient.post<ConnectAccountInfo>('/payments/connect/refresh-status/');

 // ============================================================================
 // Transaction Analytics
@@ -319,7 +321,7 @@ export const getTransactions = (filters?: TransactionFilters) => {

  const queryString = params.toString();
  return apiClient.get<TransactionListResponse>(
-    `/api/payments/transactions/${queryString ? `?${queryString}` : ''}`
+    `/payments/transactions/${queryString ? `?${queryString}` : ''}`
  );
 };

@@ -327,7 +329,7 @@ export const getTransactions = (filters?: TransactionFilters) => {
 * Get a single transaction by ID.
 */
 export const getTransaction = (id: number) =>
-  apiClient.get<Transaction>(`/api/payments/transactions/${id}/`);
+  apiClient.get<Transaction>(`/payments/transactions/${id}/`);

 /**
 * Get transaction summary/analytics.
@@ -339,7 +341,7 @@ export const getTransactionSummary = (filters?: Pick<TransactionFilters, 'start_

  const queryString = params.toString();
  return apiClient.get<TransactionSummary>(
-    `/api/payments/transactions/summary/${queryString ? `?${queryString}` : ''}`
+    `/payments/transactions/summary/${queryString ? `?${queryString}` : ''}`
  );
 };

@@ -347,26 +349,26 @@ export const getTransactionSummary = (filters?: Pick<TransactionFilters, 'start_
 * Get charges from Stripe API.
 */
 export const getStripeCharges = (limit: number = 20) =>
-  apiClient.get<ChargesResponse>(`/api/payments/transactions/charges/?limit=${limit}`);
+  apiClient.get<ChargesResponse>(`/payments/transactions/charges/?limit=${limit}`);

 /**
 * Get payouts from Stripe API.
 */
 export const getStripePayouts = (limit: number = 20) =>
-  apiClient.get<PayoutsResponse>(`/api/payments/transactions/payouts/?limit=${limit}`);
+  apiClient.get<PayoutsResponse>(`/payments/transactions/payouts/?limit=${limit}`);

 /**
 * Get current balance from Stripe API.
 */
 export const getStripeBalance = () =>
-  apiClient.get<BalanceResponse>('/api/payments/transactions/balance/');
+  apiClient.get<BalanceResponse>('/payments/transactions/balance/');

 /**
 * Export transaction data.
 * Returns the file data directly for download.
 */
 export const exportTransactions = (request: ExportRequest) =>
-  apiClient.post('/api/payments/transactions/export/', request, {
+  apiClient.post('/payments/transactions/export/', request, {
    responseType: 'blob',
  });

@@ -422,7 +424,7 @@ export interface RefundResponse {
 * Get detailed transaction information including refund data.
 */
 export const getTransactionDetail = (id: number) =>
-  apiClient.get<TransactionDetail>(`/api/payments/transactions/${id}/`);
+  apiClient.get<TransactionDetail>(`/payments/transactions/${id}/`);

 /**
 * Issue a refund for a transaction.
@@ -430,4 +432,115 @@ export const getTransactionDetail = (id: number) =>
 * @param request - Optional refund request with amount and reason
 */
 export const refundTransaction = (transactionId: number, request?: RefundRequest) =>
-  apiClient.post<RefundResponse>(`/api/payments/transactions/${transactionId}/refund/`, request || {});
+  apiClient.post<RefundResponse>(`/payments/transactions/${transactionId}/refund/`, request || {});
+
+// ============================================================================
+// Subscription Plans & Add-ons
+// ============================================================================
+
+export interface SubscriptionPlan {
+  id: number;
+  name: string;
+  description: string;
+  plan_type: 'base' | 'addon';
+  business_tier: string;
+  price_monthly: number | null;
+  price_yearly: number | null;
+  features: string[];
+  permissions: Record<string, boolean>;
+  limits: Record<string, number>;
+  transaction_fee_percent: number;
+  transaction_fee_fixed: number;
+  is_most_popular: boolean;
+  show_price: boolean;
+  stripe_price_id: string;
+}
+
+export interface SubscriptionPlansResponse {
+  current_tier: string;
+  current_plan: SubscriptionPlan | null;
+  plans: SubscriptionPlan[];
+  addons: SubscriptionPlan[];
+}
+
+export interface CheckoutResponse {
+  checkout_url: string;
+  session_id: string;
+}
+
+/**
+ * Get available subscription plans and add-ons.
+ */
+export const getSubscriptionPlans = () =>
+  apiClient.get<SubscriptionPlansResponse>('/payments/plans/');
+
+/**
+ * Create a checkout session for upgrading or purchasing add-ons.
+ */
+export const createCheckoutSession = (planId: number, billingPeriod: 'monthly' | 'yearly' = 'monthly') =>
+  apiClient.post<CheckoutResponse>('/payments/checkout/', {
+    plan_id: planId,
+    billing_period: billingPeriod,
+  });
+
+// ============================================================================
+// Active Subscriptions
+// ============================================================================
+
+export interface ActiveSubscription {
+  id: string;
+  plan_name: string;
+  plan_type: 'base' | 'addon';
+  status: 'active' | 'past_due' | 'canceled' | 'incomplete' | 'trialing';
+  current_period_start: string;
+  current_period_end: string;
+  cancel_at_period_end: boolean;
+  cancel_at: string | null;
+  canceled_at: string | null;
+  amount: number;
+  amount_display: string;
+  interval: 'month' | 'year';
+  stripe_subscription_id: string;
+}
+
+export interface SubscriptionsResponse {
+  subscriptions: ActiveSubscription[];
+  has_active_subscription: boolean;
+}
+
+export interface CancelSubscriptionResponse {
+  success: boolean;
+  message: string;
+  cancel_at_period_end: boolean;
+  current_period_end: string;
+}
+
+export interface ReactivateSubscriptionResponse {
+  success: boolean;
+  message: string;
+}
+
+/**
+ * Get active subscriptions for the current tenant.
+ */
+export const getSubscriptions = () =>
+  apiClient.get<SubscriptionsResponse>('/payments/subscriptions/');
+
+/**
+ * Cancel a subscription.
+ * @param subscriptionId - Stripe subscription ID
+ * @param immediate - If true, cancel immediately. If false, cancel at period end.
+ */
+export const cancelSubscription = (subscriptionId: string, immediate: boolean = false) =>
+  apiClient.post<CancelSubscriptionResponse>('/payments/subscriptions/cancel/', {
+    subscription_id: subscriptionId,
+    immediate,
+  });
+
+/**
+ * Reactivate a subscription that was set to cancel at period end.
+ */
+export const reactivateSubscription = (subscriptionId: string) =>
+  apiClient.post<ReactivateSubscriptionResponse>('/payments/subscriptions/reactivate/', {
+    subscription_id: subscriptionId,
+  });
--- a/frontend/src/api/platform.ts
+++ b/frontend/src/api/platform.ts
@@ -11,6 +11,7 @@ export interface PlatformBusinessOwner {
  full_name: string;
  email: string;
  role: string;
+  email_verified: boolean;
 }

 export interface PlatformBusiness {
@@ -72,6 +73,7 @@ export interface PlatformUser {
  is_active: boolean;
  is_staff: boolean;
  is_superuser: boolean;
+  email_verified: boolean;
  business: number | null;
  business_name?: string;
  business_subdomain?: string;
@@ -83,7 +85,7 @@ export interface PlatformUser {
 * Get all businesses (platform admin only)
 */
 export const getBusinesses = async (): Promise<PlatformBusiness[]> => {
-  const response = await apiClient.get<PlatformBusiness[]>('/api/platform/businesses/');
+  const response = await apiClient.get<PlatformBusiness[]>('/platform/businesses/');
  return response.data;
 };

@@ -95,7 +97,7 @@ export const updateBusiness = async (
  data: PlatformBusinessUpdate
 ): Promise<PlatformBusiness> => {
  const response = await apiClient.patch<PlatformBusiness>(
-    `/api/platform/businesses/${businessId}/`,
+    `/platform/businesses/${businessId}/`,
    data
  );
  return response.data;
@@ -108,17 +110,25 @@ export const createBusiness = async (
  data: PlatformBusinessCreate
 ): Promise<PlatformBusiness> => {
  const response = await apiClient.post<PlatformBusiness>(
-    '/api/platform/businesses/',
+    '/platform/businesses/',
    data
  );
  return response.data;
 };

+/**
+ * Delete a business/tenant (platform admin only)
+ * This permanently deletes the tenant and all associated data
+ */
+export const deleteBusiness = async (businessId: number): Promise<void> => {
+  await apiClient.delete(`/platform/businesses/${businessId}/`);
+};
+
 /**
 * Get all users (platform admin only)
 */
 export const getUsers = async (): Promise<PlatformUser[]> => {
-  const response = await apiClient.get<PlatformUser[]>('/api/platform/users/');
+  const response = await apiClient.get<PlatformUser[]>('/platform/users/');
  return response.data;
 };

@@ -126,10 +136,17 @@ export const getUsers = async (): Promise<PlatformUser[]> => {
 * Get users for a specific business
 */
 export const getBusinessUsers = async (businessId: number): Promise<PlatformUser[]> => {
-  const response = await apiClient.get<PlatformUser[]>(`/api/platform/users/?business=${businessId}`);
+  const response = await apiClient.get<PlatformUser[]>(`/platform/users/?business=${businessId}`);
  return response.data;
 };

+/**
+ * Verify a user's email (platform admin only)
+ */
+export const verifyUserEmail = async (userId: number): Promise<void> => {
+  await apiClient.post(`/platform/users/${userId}/verify_email/`);
+};
+
 // ============================================================================
 // Tenant Invitations
 // ============================================================================
@@ -209,7 +226,7 @@ export interface TenantInvitationAccept {
 * Get all tenant invitations (platform admin only)
 */
 export const getTenantInvitations = async (): Promise<TenantInvitation[]> => {
-  const response = await apiClient.get<TenantInvitation[]>('/api/platform/tenant-invitations/');
+  const response = await apiClient.get<TenantInvitation[]>('/platform/tenant-invitations/');
  return response.data;
 };

@@ -220,7 +237,7 @@ export const createTenantInvitation = async (
  data: TenantInvitationCreate
 ): Promise<TenantInvitation> => {
  const response = await apiClient.post<TenantInvitation>(
-    '/api/platform/tenant-invitations/',
+    '/platform/tenant-invitations/',
    data
  );
  return response.data;
@@ -230,14 +247,14 @@ export const createTenantInvitation = async (
 * Resend a tenant invitation (platform admin only)
 */
 export const resendTenantInvitation = async (invitationId: number): Promise<void> => {
-  await apiClient.post(`/api/platform/tenant-invitations/${invitationId}/resend/`);
+  await apiClient.post(`/platform/tenant-invitations/${invitationId}/resend/`);
 };

 /**
 * Cancel a tenant invitation (platform admin only)
 */
 export const cancelTenantInvitation = async (invitationId: number): Promise<void> => {
-  await apiClient.post(`/api/platform/tenant-invitations/${invitationId}/cancel/`);
+  await apiClient.post(`/platform/tenant-invitations/${invitationId}/cancel/`);
 };

 /**
@@ -245,7 +262,7 @@ export const cancelTenantInvitation = async (invitationId: number): Promise<void
 */
 export const getInvitationByToken = async (token: string): Promise<TenantInvitationDetail> => {
  const response = await apiClient.get<TenantInvitationDetail>(
-    `/api/platform/tenant-invitations/token/${token}/`
+    `/platform/tenant-invitations/token/${token}/`
  );
  return response.data;
 };
@@ -258,7 +275,7 @@ export const acceptInvitation = async (
  data: TenantInvitationAccept
 ): Promise<{ detail: string }> => {
  const response = await apiClient.post<{ detail: string }>(
-    `/api/platform/tenant-invitations/token/${token}/accept/`,
+    `/platform/tenant-invitations/token/${token}/accept/`,
    data
  );
  return response.data;
--- a/frontend/src/api/platformEmailAddresses.ts
+++ b/frontend/src/api/platformEmailAddresses.ts
@@ -0,0 +1,250 @@
+/**
+ * API client for Platform Email Addresses
+ * These are email addresses managed directly on the mail.talova.net server
+ */
+
+import apiClient from './client';
+
+export interface PlatformEmailAddress {
+  id: number;
+  display_name: string;
+  sender_name: string;
+  effective_sender_name: string;
+  local_part: string;
+  domain: string;
+  email_address: string;
+  color: string;
+  is_active: boolean;
+  is_default: boolean;
+  mail_server_synced: boolean;
+  last_sync_error?: string;
+  last_synced_at?: string;
+  last_check_at?: string;
+  emails_processed_count: number;
+  created_at: string;
+  updated_at: string;
+  imap_settings?: {
+    host: string;
+    port: number;
+    use_ssl: boolean;
+    username: string;
+    folder: string;
+  };
+  smtp_settings?: {
+    host: string;
+    port: number;
+    use_tls: boolean;
+    use_ssl: boolean;
+    username: string;
+  };
+}
+
+export interface AssignedUser {
+  id: number;
+  email: string;
+  first_name: string;
+  last_name: string;
+  full_name: string;
+}
+
+export interface AssignableUser extends AssignedUser {
+  role: string;
+}
+
+export interface PlatformEmailAddressListItem {
+  id: number;
+  display_name: string;
+  sender_name: string;
+  effective_sender_name: string;
+  local_part: string;
+  domain: string;
+  email_address: string;
+  color: string;
+  assigned_user?: AssignedUser | null;
+  is_active: boolean;
+  is_default: boolean;
+  mail_server_synced: boolean;
+  last_check_at?: string;
+  emails_processed_count: number;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface PlatformEmailAddressCreate {
+  display_name: string;
+  sender_name?: string;
+  assigned_user_id?: number | null;
+  local_part: string;
+  domain: string;
+  color: string;
+  password: string;
+  is_active: boolean;
+  is_default: boolean;
+}
+
+export interface PlatformEmailAddressUpdate {
+  display_name?: string;
+  sender_name?: string;
+  assigned_user_id?: number | null;
+  color?: string;
+  password?: string;
+  is_active?: boolean;
+  is_default?: boolean;
+}
+
+export interface EmailDomain {
+  value: string;
+  label: string;
+}
+
+export interface TestConnectionResponse {
+  success: boolean;
+  message: string;
+}
+
+export interface SyncResponse {
+  success: boolean;
+  message: string;
+  mail_server_synced?: boolean;
+  last_synced_at?: string;
+  last_sync_error?: string;
+}
+
+export interface MailServerAccountsResponse {
+  success: boolean;
+  accounts: { email: string; raw_line: string }[];
+  count: number;
+}
+
+export interface ImportFromMailServerResponse {
+  success: boolean;
+  imported: { id: number; email: string; display_name: string }[];
+  imported_count: number;
+  skipped: { email: string; reason: string }[];
+  skipped_count: number;
+  message: string;
+}
+
+/**
+ * Get all platform email addresses
+ */
+export const getPlatformEmailAddresses = async (): Promise<PlatformEmailAddressListItem[]> => {
+  const response = await apiClient.get('/platform/email-addresses/');
+  return response.data;
+};
+
+/**
+ * Get a specific platform email address by ID
+ */
+export const getPlatformEmailAddress = async (id: number): Promise<PlatformEmailAddress> => {
+  const response = await apiClient.get(`/platform/email-addresses/${id}/`);
+  return response.data;
+};
+
+/**
+ * Create a new platform email address
+ */
+export const createPlatformEmailAddress = async (
+  data: PlatformEmailAddressCreate
+): Promise<PlatformEmailAddress> => {
+  const response = await apiClient.post('/platform/email-addresses/', data);
+  return response.data;
+};
+
+/**
+ * Update an existing platform email address
+ */
+export const updatePlatformEmailAddress = async (
+  id: number,
+  data: PlatformEmailAddressUpdate
+): Promise<PlatformEmailAddress> => {
+  const response = await apiClient.patch(`/platform/email-addresses/${id}/`, data);
+  return response.data;
+};
+
+/**
+ * Delete a platform email address (also removes from mail server)
+ */
+export const deletePlatformEmailAddress = async (id: number): Promise<void> => {
+  await apiClient.delete(`/platform/email-addresses/${id}/`);
+};
+
+/**
+ * Remove email address from database only (keeps mail server account)
+ */
+export const removeLocalPlatformEmailAddress = async (id: number): Promise<{ success: boolean; message: string }> => {
+  const response = await apiClient.post(`/platform/email-addresses/${id}/remove_local/`);
+  return response.data;
+};
+
+/**
+ * Sync email address to mail server
+ */
+export const syncPlatformEmailAddress = async (id: number): Promise<SyncResponse> => {
+  const response = await apiClient.post(`/platform/email-addresses/${id}/sync/`);
+  return response.data;
+};
+
+/**
+ * Test IMAP connection for a platform email address
+ */
+export const testImapConnection = async (id: number): Promise<TestConnectionResponse> => {
+  const response = await apiClient.post(`/platform/email-addresses/${id}/test_imap/`);
+  return response.data;
+};
+
+/**
+ * Test SMTP connection for a platform email address
+ */
+export const testSmtpConnection = async (id: number): Promise<TestConnectionResponse> => {
+  const response = await apiClient.post(`/platform/email-addresses/${id}/test_smtp/`);
+  return response.data;
+};
+
+/**
+ * Set a platform email address as the default
+ */
+export const setAsDefault = async (id: number): Promise<{ success: boolean; message: string }> => {
+  const response = await apiClient.post(`/platform/email-addresses/${id}/set_as_default/`);
+  return response.data;
+};
+
+/**
+ * Test SSH connection to the mail server
+ */
+export const testMailServerConnection = async (): Promise<TestConnectionResponse> => {
+  const response = await apiClient.post('/platform/email-addresses/test_mail_server/');
+  return response.data;
+};
+
+/**
+ * Get all email accounts from the mail server
+ */
+export const getMailServerAccounts = async (): Promise<MailServerAccountsResponse> => {
+  const response = await apiClient.get('/platform/email-addresses/mail_server_accounts/');
+  return response.data;
+};
+
+/**
+ * Get available email domains
+ */
+export const getAvailableDomains = async (): Promise<{ domains: EmailDomain[] }> => {
+  const response = await apiClient.get('/platform/email-addresses/available_domains/');
+  return response.data;
+};
+
+/**
+ * Get assignable users (platform users who can be assigned to email addresses)
+ */
+export const getAssignableUsers = async (): Promise<{ users: AssignableUser[] }> => {
+  const response = await apiClient.get('/platform/email-addresses/assignable_users/');
+  return response.data;
+};
+
+/**
+ * Import email addresses from the mail server
+ */
+export const importFromMailServer = async (): Promise<ImportFromMailServerResponse> => {
+  const response = await apiClient.post('/platform/email-addresses/import_from_mail_server/');
+  return response.data;
+};
--- a/frontend/src/api/platformOAuth.ts
+++ b/frontend/src/api/platformOAuth.ts
@@ -75,7 +75,7 @@ export interface PlatformOAuthSettingsUpdate {
 * Get platform OAuth settings
 */
 export const getPlatformOAuthSettings = async (): Promise<PlatformOAuthSettings> => {
-  const { data } = await apiClient.get('/api/platform/settings/oauth/');
+  const { data } = await apiClient.get('/platform/settings/oauth/');
  return data;
 };

@@ -85,6 +85,6 @@ export const getPlatformOAuthSettings = async (): Promise<PlatformOAuthSettings>
 export const updatePlatformOAuthSettings = async (
  settings: PlatformOAuthSettingsUpdate
 ): Promise<PlatformOAuthSettings> => {
-  const { data } = await apiClient.post('/api/platform/settings/oauth/', settings);
+  const { data } = await apiClient.post('/platform/settings/oauth/', settings);
  return data;
 };
--- a/frontend/src/api/profile.ts
+++ b/frontend/src/api/profile.ts
@@ -71,43 +71,43 @@ export interface LoginHistoryEntry {

 // Profile API
 export const getProfile = async (): Promise<UserProfile> => {
-  const response = await apiClient.get('/api/auth/profile/');
+  const response = await apiClient.get('/auth/profile/');
  return response.data;
 };

 export const updateProfile = async (data: Partial<UserProfile>): Promise<UserProfile> => {
-  const response = await apiClient.patch('/api/auth/profile/', data);
+  const response = await apiClient.patch('/auth/profile/', data);
  return response.data;
 };

 export const uploadAvatar = async (file: File): Promise<{ avatar_url: string }> => {
  const formData = new FormData();
  formData.append('avatar', file);
-  const response = await apiClient.post('/api/auth/profile/avatar/', formData, {
+  const response = await apiClient.post('/auth/profile/avatar/', formData, {
    headers: { 'Content-Type': 'multipart/form-data' },
  });
  return response.data;
 };

 export const deleteAvatar = async (): Promise<void> => {
-  await apiClient.delete('/api/auth/profile/avatar/');
+  await apiClient.delete('/auth/profile/avatar/');
 };

 // Email API
 export const sendVerificationEmail = async (): Promise<void> => {
-  await apiClient.post('/api/auth/email/verify/send/');
+  await apiClient.post('/auth/email/verify/send/');
 };

 export const verifyEmail = async (token: string): Promise<void> => {
-  await apiClient.post('/api/auth/email/verify/confirm/', { token });
+  await apiClient.post('/auth/email/verify/confirm/', { token });
 };

 export const requestEmailChange = async (newEmail: string): Promise<void> => {
-  await apiClient.post('/api/auth/email/change/', { new_email: newEmail });
+  await apiClient.post('/auth/email/change/', { new_email: newEmail });
 };

 export const confirmEmailChange = async (token: string): Promise<void> => {
-  await apiClient.post('/api/auth/email/change/confirm/', { token });
+  await apiClient.post('/auth/email/change/confirm/', { token });
 };

 // Password API
@@ -115,7 +115,7 @@ export const changePassword = async (
  currentPassword: string,
  newPassword: string
 ): Promise<void> => {
-  await apiClient.post('/api/auth/password/change/', {
+  await apiClient.post('/auth/password/change/', {
    current_password: currentPassword,
    new_password: newPassword,
  });
@@ -123,12 +123,12 @@ export const changePassword = async (

 // 2FA API (using new MFA endpoints)
 export const setupTOTP = async (): Promise<TOTPSetupResponse> => {
-  const response = await apiClient.post('/api/auth/mfa/totp/setup/');
+  const response = await apiClient.post('/auth/mfa/totp/setup/');
  return response.data;
 };

 export const verifyTOTP = async (code: string): Promise<TOTPVerifyResponse> => {
-  const response = await apiClient.post('/api/auth/mfa/totp/verify/', { code });
+  const response = await apiClient.post('/auth/mfa/totp/verify/', { code });
  // Map response to expected format
  return {
    success: response.data.success,
@@ -137,46 +137,46 @@ export const verifyTOTP = async (code: string): Promise<TOTPVerifyResponse> => {
 };

 export const disableTOTP = async (code: string): Promise<void> => {
-  await apiClient.post('/api/auth/mfa/disable/', { mfa_code: code });
+  await apiClient.post('/auth/mfa/disable/', { mfa_code: code });
 };

 export const getRecoveryCodes = async (): Promise<string[]> => {
-  const response = await apiClient.get('/api/auth/mfa/backup-codes/status/');
+  const response = await apiClient.get('/auth/mfa/backup-codes/status/');
  // Note: Actual codes are only shown when generated, not retrievable later
  return [];
 };

 export const regenerateRecoveryCodes = async (): Promise<string[]> => {
-  const response = await apiClient.post('/api/auth/mfa/backup-codes/');
+  const response = await apiClient.post('/auth/mfa/backup-codes/');
  return response.data.backup_codes;
 };

 // Sessions API
 export const getSessions = async (): Promise<Session[]> => {
-  const response = await apiClient.get('/api/auth/sessions/');
+  const response = await apiClient.get('/auth/sessions/');
  return response.data;
 };

 export const revokeSession = async (sessionId: string): Promise<void> => {
-  await apiClient.delete(`/api/auth/sessions/${sessionId}/`);
+  await apiClient.delete(`/auth/sessions/${sessionId}/`);
 };

 export const revokeOtherSessions = async (): Promise<void> => {
-  await apiClient.post('/api/auth/sessions/revoke-others/');
+  await apiClient.post('/auth/sessions/revoke-others/');
 };

 export const getLoginHistory = async (): Promise<LoginHistoryEntry[]> => {
-  const response = await apiClient.get('/api/auth/login-history/');
+  const response = await apiClient.get('/auth/login-history/');
  return response.data;
 };

 // Phone Verification API
 export const sendPhoneVerification = async (phone: string): Promise<void> => {
-  await apiClient.post('/api/auth/phone/verify/send/', { phone });
+  await apiClient.post('/auth/phone/verify/send/', { phone });
 };

 export const verifyPhoneCode = async (code: string): Promise<void> => {
-  await apiClient.post('/api/auth/phone/verify/confirm/', { code });
+  await apiClient.post('/auth/phone/verify/confirm/', { code });
 };

 // Multiple Email Management API
@@ -189,27 +189,27 @@ export interface UserEmail {
 }

 export const getUserEmails = async (): Promise<UserEmail[]> => {
-  const response = await apiClient.get('/api/auth/emails/');
+  const response = await apiClient.get('/auth/emails/');
  return response.data;
 };

 export const addUserEmail = async (email: string): Promise<UserEmail> => {
-  const response = await apiClient.post('/api/auth/emails/', { email });
+  const response = await apiClient.post('/auth/emails/', { email });
  return response.data;
 };

 export const deleteUserEmail = async (emailId: number): Promise<void> => {
-  await apiClient.delete(`/api/auth/emails/${emailId}/`);
+  await apiClient.delete(`/auth/emails/${emailId}/`);
 };

 export const sendUserEmailVerification = async (emailId: number): Promise<void> => {
-  await apiClient.post(`/api/auth/emails/${emailId}/send-verification/`);
+  await apiClient.post(`/auth/emails/${emailId}/send-verification/`);
 };

 export const verifyUserEmail = async (emailId: number, token: string): Promise<void> => {
-  await apiClient.post(`/api/auth/emails/${emailId}/verify/`, { token });
+  await apiClient.post(`/auth/emails/${emailId}/verify/`, { token });
 };

 export const setPrimaryEmail = async (emailId: number): Promise<void> => {
-  await apiClient.post(`/api/auth/emails/${emailId}/set-primary/`);
+  await apiClient.post(`/auth/emails/${emailId}/set-primary/`);
 };
--- a/frontend/src/api/quota.ts
+++ b/frontend/src/api/quota.ts
@@ -0,0 +1,103 @@
+/**
+ * Quota Management API
+ */
+
+import apiClient from './client';
+import { QuotaOverage } from './auth';
+
+export interface QuotaUsage {
+  current: number;
+  limit: number;
+  display_name: string;
+}
+
+export interface QuotaStatus {
+  active_overages: QuotaOverage[];
+  usage: Record<string, QuotaUsage>;
+}
+
+export interface QuotaResource {
+  id: number;
+  name: string;
+  email?: string;
+  role?: string;
+  type?: string;
+  duration?: number;
+  price?: string;
+  created_at: string | null;
+  is_archived: boolean;
+  archived_at: string | null;
+}
+
+export interface QuotaResourcesResponse {
+  quota_type: string;
+  resources: QuotaResource[];
+}
+
+export interface ArchiveResponse {
+  archived_count: number;
+  current_usage: number;
+  limit: number;
+  is_resolved: boolean;
+}
+
+export interface QuotaOverageDetail extends QuotaOverage {
+  status: string;
+  created_at: string;
+  initial_email_sent_at: string | null;
+  week_reminder_sent_at: string | null;
+  day_reminder_sent_at: string | null;
+  archived_resource_ids: number[];
+}
+
+/**
+ * Get current quota status
+ */
+export const getQuotaStatus = async (): Promise<QuotaStatus> => {
+  const response = await apiClient.get<QuotaStatus>('/quota/status/');
+  return response.data;
+};
+
+/**
+ * Get resources for a specific quota type
+ */
+export const getQuotaResources = async (quotaType: string): Promise<QuotaResourcesResponse> => {
+  const response = await apiClient.get<QuotaResourcesResponse>(`/quota/resources/${quotaType}/`);
+  return response.data;
+};
+
+/**
+ * Archive resources to resolve quota overage
+ */
+export const archiveResources = async (
+  quotaType: string,
+  resourceIds: number[]
+): Promise<ArchiveResponse> => {
+  const response = await apiClient.post<ArchiveResponse>('/quota/archive/', {
+    quota_type: quotaType,
+    resource_ids: resourceIds,
+  });
+  return response.data;
+};
+
+/**
+ * Unarchive a resource
+ */
+export const unarchiveResource = async (
+  quotaType: string,
+  resourceId: number
+): Promise<{ success: boolean; resource_id: number }> => {
+  const response = await apiClient.post('/quota/unarchive/', {
+    quota_type: quotaType,
+    resource_id: resourceId,
+  });
+  return response.data;
+};
+
+/**
+ * Get details for a specific overage
+ */
+export const getOverageDetail = async (overageId: number): Promise<QuotaOverageDetail> => {
+  const response = await apiClient.get<QuotaOverageDetail>(`/quota/overages/${overageId}/`);
+  return response.data;
+};
--- a/frontend/src/api/sandbox.ts
+++ b/frontend/src/api/sandbox.ts
@@ -25,7 +25,7 @@ export interface SandboxResetResponse {
 * Get current sandbox mode status
 */
 export const getSandboxStatus = async (): Promise<SandboxStatus> => {
-  const response = await apiClient.get<SandboxStatus>('/api/sandbox/status/');
+  const response = await apiClient.get<SandboxStatus>('/sandbox/status/');
  return response.data;
 };

@@ -33,7 +33,7 @@ export const getSandboxStatus = async (): Promise<SandboxStatus> => {
 * Toggle between live and sandbox mode
 */
 export const toggleSandboxMode = async (enableSandbox: boolean): Promise<SandboxToggleResponse> => {
-  const response = await apiClient.post<SandboxToggleResponse>('/api/sandbox/toggle/', {
+  const response = await apiClient.post<SandboxToggleResponse>('/sandbox/toggle/', {
    sandbox: enableSandbox,
  });
  return response.data;
@@ -43,6 +43,6 @@ export const toggleSandboxMode = async (enableSandbox: boolean): Promise<Sandbox
 * Reset sandbox data to initial state
 */
 export const resetSandboxData = async (): Promise<SandboxResetResponse> => {
-  const response = await apiClient.post<SandboxResetResponse>('/api/sandbox/reset/');
+  const response = await apiClient.post<SandboxResetResponse>('/sandbox/reset/');
  return response.data;
 };
--- a/frontend/src/api/ticketEmailAddresses.ts
+++ b/frontend/src/api/ticketEmailAddresses.ts
@@ -0,0 +1,157 @@
+/**
+ * API client for Ticket Email Addresses
+ */
+
+import apiClient from './client';
+
+export interface TicketEmailAddress {
+  id: number;
+  tenant: number;
+  tenant_name: string;
+  display_name: string;
+  email_address: string;
+  color: string;
+  imap_host: string;
+  imap_port: number;
+  imap_use_ssl: boolean;
+  imap_username: string;
+  imap_password?: string;
+  imap_folder: string;
+  smtp_host: string;
+  smtp_port: number;
+  smtp_use_tls: boolean;
+  smtp_use_ssl: boolean;
+  smtp_username: string;
+  smtp_password?: string;
+  is_active: boolean;
+  is_default: boolean;
+  last_check_at?: string;
+  last_error?: string;
+  emails_processed_count: number;
+  created_at: string;
+  updated_at: string;
+  is_imap_configured: boolean;
+  is_smtp_configured: boolean;
+  is_fully_configured: boolean;
+}
+
+export interface TicketEmailAddressListItem {
+  id: number;
+  display_name: string;
+  email_address: string;
+  color: string;
+  is_active: boolean;
+  is_default: boolean;
+  last_check_at?: string;
+  emails_processed_count: number;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface TicketEmailAddressCreate {
+  display_name: string;
+  email_address: string;
+  color: string;
+  imap_host: string;
+  imap_port: number;
+  imap_use_ssl: boolean;
+  imap_username: string;
+  imap_password: string;
+  imap_folder: string;
+  smtp_host: string;
+  smtp_port: number;
+  smtp_use_tls: boolean;
+  smtp_use_ssl: boolean;
+  smtp_username: string;
+  smtp_password: string;
+  is_active: boolean;
+  is_default: boolean;
+}
+
+export interface TestConnectionResponse {
+  success: boolean;
+  message: string;
+}
+
+export interface FetchEmailsResponse {
+  success: boolean;
+  message: string;
+  processed?: number;
+  errors?: number;
+}
+
+/**
+ * Get all ticket email addresses for the current business
+ */
+export const getTicketEmailAddresses = async (): Promise<TicketEmailAddressListItem[]> => {
+  const response = await apiClient.get('/tickets/email-addresses/');
+  return response.data;
+};
+
+/**
+ * Get a specific ticket email address by ID
+ */
+export const getTicketEmailAddress = async (id: number): Promise<TicketEmailAddress> => {
+  const response = await apiClient.get(`/tickets/email-addresses/${id}/`);
+  return response.data;
+};
+
+/**
+ * Create a new ticket email address
+ */
+export const createTicketEmailAddress = async (
+  data: TicketEmailAddressCreate
+): Promise<TicketEmailAddress> => {
+  const response = await apiClient.post('/tickets/email-addresses/', data);
+  return response.data;
+};
+
+/**
+ * Update an existing ticket email address
+ */
+export const updateTicketEmailAddress = async (
+  id: number,
+  data: Partial<TicketEmailAddressCreate>
+): Promise<TicketEmailAddress> => {
+  const response = await apiClient.patch(`/tickets/email-addresses/${id}/`, data);
+  return response.data;
+};
+
+/**
+ * Delete a ticket email address
+ */
+export const deleteTicketEmailAddress = async (id: number): Promise<void> => {
+  await apiClient.delete(`/tickets/email-addresses/${id}/`);
+};
+
+/**
+ * Test IMAP connection for an email address
+ */
+export const testImapConnection = async (id: number): Promise<TestConnectionResponse> => {
+  const response = await apiClient.post(`/tickets/email-addresses/${id}/test_imap/`);
+  return response.data;
+};
+
+/**
+ * Test SMTP connection for an email address
+ */
+export const testSmtpConnection = async (id: number): Promise<TestConnectionResponse> => {
+  const response = await apiClient.post(`/tickets/email-addresses/${id}/test_smtp/`);
+  return response.data;
+};
+
+/**
+ * Manually fetch emails for an email address
+ */
+export const fetchEmailsNow = async (id: number): Promise<FetchEmailsResponse> => {
+  const response = await apiClient.post(`/tickets/email-addresses/${id}/fetch_now/`);
+  return response.data;
+};
+
+/**
+ * Set an email address as the default for the business
+ */
+export const setAsDefault = async (id: number): Promise<{ success: boolean; message: string }> => {
+  const response = await apiClient.post(`/tickets/email-addresses/${id}/set_as_default/`);
+  return response.data;
+};
--- a/frontend/src/api/ticketEmailSettings.ts
+++ b/frontend/src/api/ticketEmailSettings.ts
@@ -122,7 +122,7 @@ export interface IncomingTicketEmail {
 * Get ticket email settings
 */
 export const getTicketEmailSettings = async (): Promise<TicketEmailSettings> => {
-  const response = await apiClient.get('/api/tickets/email-settings/');
+  const response = await apiClient.get('/tickets/email-settings/');
  return response.data;
 };

@@ -132,7 +132,7 @@ export const getTicketEmailSettings = async (): Promise<TicketEmailSettings> =>
 export const updateTicketEmailSettings = async (
  data: TicketEmailSettingsUpdate
 ): Promise<TicketEmailSettings> => {
-  const response = await apiClient.patch('/api/tickets/email-settings/', data);
+  const response = await apiClient.patch('/tickets/email-settings/', data);
  return response.data;
 };

@@ -140,7 +140,7 @@ export const updateTicketEmailSettings = async (
 * Test IMAP connection
 */
 export const testImapConnection = async (): Promise<TestConnectionResult> => {
-  const response = await apiClient.post('/api/tickets/email-settings/test-imap/');
+  const response = await apiClient.post('/tickets/email-settings/test-imap/');
  return response.data;
 };

@@ -148,7 +148,7 @@ export const testImapConnection = async (): Promise<TestConnectionResult> => {
 * Test SMTP connection
 */
 export const testSmtpConnection = async (): Promise<TestConnectionResult> => {
-  const response = await apiClient.post('/api/tickets/email-settings/test-smtp/');
+  const response = await apiClient.post('/tickets/email-settings/test-smtp/');
  return response.data;
 };

@@ -159,7 +159,7 @@ export const testEmailConnection = testImapConnection;
 * Manually trigger email fetch
 */
 export const fetchEmailsNow = async (): Promise<FetchNowResult> => {
-  const response = await apiClient.post('/api/tickets/email-settings/fetch-now/');
+  const response = await apiClient.post('/tickets/email-settings/fetch-now/');
  return response.data;
 };

@@ -170,7 +170,7 @@ export const getIncomingEmails = async (params?: {
  status?: string;
  ticket?: number;
 }): Promise<IncomingTicketEmail[]> => {
-  const response = await apiClient.get('/api/tickets/incoming-emails/', { params });
+  const response = await apiClient.get('/tickets/incoming-emails/', { params });
  return response.data;
 };

@@ -183,7 +183,7 @@ export const reprocessIncomingEmail = async (id: number): Promise<{
  comment_id?: number;
  ticket_id?: number;
 }> => {
-  const response = await apiClient.post(`/api/tickets/incoming-emails/${id}/reprocess/`);
+  const response = await apiClient.post(`/tickets/incoming-emails/${id}/reprocess/`);
  return response.data;
 };

@@ -193,7 +193,7 @@ export const reprocessIncomingEmail = async (id: number): Promise<{
 * Also checks MX records for custom domains using Google Workspace or Microsoft 365
 */
 export const detectEmailProvider = async (email: string): Promise<EmailProviderDetectResult> => {
-  const response = await apiClient.post('/api/tickets/email-settings/detect/', { email });
+  const response = await apiClient.post('/tickets/email-settings/detect/', { email });
  return response.data;
 };

@@ -225,7 +225,7 @@ export interface OAuthCredential {
 * Get OAuth configuration status
 */
 export const getOAuthStatus = async (): Promise<OAuthStatusResult> => {
-  const response = await apiClient.get('/api/oauth/status/');
+  const response = await apiClient.get('/oauth/status/');
  return response.data;
 };

@@ -233,7 +233,7 @@ export const getOAuthStatus = async (): Promise<OAuthStatusResult> => {
 * Initiate Google OAuth flow
 */
 export const initiateGoogleOAuth = async (purpose: string = 'email'): Promise<OAuthInitiateResult> => {
-  const response = await apiClient.post('/api/oauth/google/initiate/', { purpose });
+  const response = await apiClient.post('/oauth/google/initiate/', { purpose });
  return response.data;
 };

@@ -241,7 +241,7 @@ export const initiateGoogleOAuth = async (purpose: string = 'email'): Promise<OA
 * Initiate Microsoft OAuth flow
 */
 export const initiateMicrosoftOAuth = async (purpose: string = 'email'): Promise<OAuthInitiateResult> => {
-  const response = await apiClient.post('/api/oauth/microsoft/initiate/', { purpose });
+  const response = await apiClient.post('/oauth/microsoft/initiate/', { purpose });
  return response.data;
 };

@@ -249,7 +249,7 @@ export const initiateMicrosoftOAuth = async (purpose: string = 'email'): Promise
 * List OAuth credentials
 */
 export const getOAuthCredentials = async (): Promise<OAuthCredential[]> => {
-  const response = await apiClient.get('/api/oauth/credentials/');
+  const response = await apiClient.get('/oauth/credentials/');
  return response.data;
 };

@@ -257,6 +257,6 @@ export const getOAuthCredentials = async (): Promise<OAuthCredential[]> => {
 * Delete OAuth credential
 */
 export const deleteOAuthCredential = async (id: number): Promise<{ success: boolean; message: string }> => {
-  const response = await apiClient.delete(`/api/oauth/credentials/${id}/`);
+  const response = await apiClient.delete(`/oauth/credentials/${id}/`);
  return response.data;
 };
--- a/frontend/src/api/tickets.ts
+++ b/frontend/src/api/tickets.ts
@@ -17,52 +17,72 @@ export const getTickets = async (filters?: TicketFilters): Promise<Ticket[]> =>
  if (filters?.ticketType) params.append('ticket_type', filters.ticketType);
  if (filters?.assignee) params.append('assignee', filters.assignee);

-  const response = await apiClient.get(`/api/tickets/${params.toString() ? `?${params.toString()}` : ''}`);
+  const response = await apiClient.get(`/tickets/${params.toString() ? `?${params.toString()}` : ''}`);
  return response.data;
 };

 export const getTicket = async (id: string): Promise<Ticket> => {
-  const response = await apiClient.get(`/api/tickets/${id}/`);
+  const response = await apiClient.get(`/tickets/${id}/`);
  return response.data;
 };

 export const createTicket = async (data: Partial<Ticket>): Promise<Ticket> => {
-  const response = await apiClient.post('/api/tickets/', data);
+  const response = await apiClient.post('/tickets/', data);
  return response.data;
 };

 export const updateTicket = async (id: string, data: Partial<Ticket>): Promise<Ticket> => {
-  const response = await apiClient.patch(`/api/tickets/${id}/`, data);
+  const response = await apiClient.patch(`/tickets/${id}/`, data);
  return response.data;
 };

 export const deleteTicket = async (id: string): Promise<void> => {
-  await apiClient.delete(`/api/tickets/${id}/`);
+  await apiClient.delete(`/tickets/${id}/`);
 };

 export const getTicketComments = async (ticketId: string): Promise<TicketComment[]> => {
-  const response = await apiClient.get(`/api/tickets/${ticketId}/comments/`);
+  const response = await apiClient.get(`/tickets/${ticketId}/comments/`);
  return response.data;
 };

 export const createTicketComment = async (ticketId: string, data: Partial<TicketComment>): Promise<TicketComment> => {
-  const response = await apiClient.post(`/api/tickets/${ticketId}/comments/`, data);
+  const response = await apiClient.post(`/tickets/${ticketId}/comments/`, data);
  return response.data;
 };

 // Ticket Templates
 export const getTicketTemplates = async (): Promise<TicketTemplate[]> => {
-  const response = await apiClient.get('/api/tickets/templates/');
+  const response = await apiClient.get('/tickets/templates/');
  return response.data;
 };

 export const getTicketTemplate = async (id: string): Promise<TicketTemplate> => {
-  const response = await apiClient.get(`/api/tickets/templates/${id}/`);
+  const response = await apiClient.get(`/tickets/templates/${id}/`);
  return response.data;
 };

 // Canned Responses
 export const getCannedResponses = async (): Promise<CannedResponse[]> => {
-  const response = await apiClient.get('/api/tickets/canned-responses/');
+  const response = await apiClient.get('/tickets/canned-responses/');
+  return response.data;
+};
+
+// Refresh emails manually
+export interface RefreshEmailsResult {
+  success: boolean;
+  processed: number;
+  results: {
+    address: string | null;
+    display_name?: string;
+    processed?: number;
+    status: string;
+    error?: string;
+    message?: string;
+    last_check_at?: string;
+  }[];
+}
+
+export const refreshTicketEmails = async (): Promise<RefreshEmailsResult> => {
+  const response = await apiClient.post('/tickets/refresh-emails/');
  return response.data;
 };
--- a/frontend/src/components/AddPaymentMethodModal.tsx
+++ b/frontend/src/components/AddPaymentMethodModal.tsx
@@ -0,0 +1,446 @@
+/**
+ * Add Payment Method Modal Component
+ *
+ * Uses Stripe Elements with SetupIntent to securely save card details
+ * without charging the customer.
+ *
+ * For Stripe Connect, we must initialize Stripe with the connected account ID
+ * so the SetupIntent (created on the connected account) can be confirmed.
+ */
+
+import React, { useState, useEffect } from 'react';
+import { loadStripe, Stripe } from '@stripe/stripe-js';
+import {
+  Elements,
+  CardElement,
+  useStripe,
+  useElements,
+} from '@stripe/react-stripe-js';
+import { CreditCard, Loader2, X, CheckCircle, AlertCircle } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { useCreateSetupIntent, useSetDefaultPaymentMethod, useCustomerPaymentMethods } from '../hooks/useCustomerBilling';
+import { useQueryClient } from '@tanstack/react-query';
+
+// Cache for Stripe instances per connected account
+// Note: Module-level cache persists across component re-renders but not page reloads
+const stripeInstanceCache: Record<string, Promise<Stripe | null>> = {};
+
+// Clear cache entry (useful for debugging)
+export const clearStripeCache = (key?: string) => {
+  if (key) {
+    delete stripeInstanceCache[key];
+  } else {
+    Object.keys(stripeInstanceCache).forEach(k => delete stripeInstanceCache[k]);
+  }
+};
+
+// Get or create Stripe instance for a connected account (or platform account if empty)
+// For direct_api mode, customPublishableKey will be the tenant's key
+// For connect mode, we use the platform's key with stripeAccount
+const getStripeInstance = (
+  stripeAccount: string,
+  customPublishableKey?: string
+): Promise<Stripe | null> => {
+  // Use custom key for direct_api mode, platform key for connect mode
+  const publishableKey = customPublishableKey || import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY || '';
+  // Use 'platform' as cache key for direct_api mode (empty stripeAccount)
+  // For direct_api with custom key, include key in cache to avoid conflicts
+  const cacheKey = customPublishableKey
+    ? `direct_${customPublishableKey.substring(0, 20)}`
+    : (stripeAccount || 'platform');
+
+  console.log('[AddPaymentMethodModal] getStripeInstance called with:', {
+    stripeAccount: stripeAccount || '(empty - direct_api mode)',
+    cacheKey,
+    publishableKey: publishableKey.substring(0, 20) + '...',
+    isDirectApi: !!customPublishableKey,
+  });
+
+  if (!stripeInstanceCache[cacheKey]) {
+    console.log('[AddPaymentMethodModal] Creating new Stripe instance for:', cacheKey);
+    // Only pass stripeAccount option if it's not empty (connect mode)
+    // For direct_api mode, we use the tenant's own API keys (no connected account needed)
+    stripeInstanceCache[cacheKey] = stripeAccount
+      ? loadStripe(publishableKey, { stripeAccount })
+      : loadStripe(publishableKey);
+  } else {
+    console.log('[AddPaymentMethodModal] Using cached Stripe instance for:', cacheKey);
+  }
+
+  return stripeInstanceCache[cacheKey];
+};
+
+interface CardFormProps {
+  clientSecret: string;
+  onSuccess: () => void;
+  onCancel: () => void;
+}
+
+const CardFormInner: React.FC<CardFormProps> = ({
+  clientSecret,
+  onSuccess,
+  onCancel,
+}) => {
+  const { t } = useTranslation();
+  const stripe = useStripe();
+  const elements = useElements();
+  const queryClient = useQueryClient();
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [isComplete, setIsComplete] = useState(false);
+  const [cardComplete, setCardComplete] = useState(false);
+
+  // Get current payment methods to check if this is the first one
+  const { data: paymentMethodsData } = useCustomerPaymentMethods();
+  const setDefaultPaymentMethod = useSetDefaultPaymentMethod();
+
+  // Detect dark mode for Stripe CardElement styling
+  const [isDarkMode, setIsDarkMode] = useState(() =>
+    document.documentElement.classList.contains('dark')
+  );
+
+  useEffect(() => {
+    // Watch for dark mode changes
+    const observer = new MutationObserver(() => {
+      setIsDarkMode(document.documentElement.classList.contains('dark'));
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class'],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleSubmit = async (event: React.FormEvent) => {
+    event.preventDefault();
+
+    if (!stripe || !elements) {
+      return;
+    }
+
+    const cardElement = elements.getElement(CardElement);
+    if (!cardElement) {
+      return;
+    }
+
+    setIsProcessing(true);
+    setErrorMessage(null);
+
+    try {
+      // Confirm the SetupIntent with Stripe
+      const { error, setupIntent } = await stripe.confirmCardSetup(clientSecret, {
+        payment_method: {
+          card: cardElement,
+        },
+      });
+
+      if (error) {
+        setErrorMessage(error.message || t('billing.addCardFailed', 'Failed to add card. Please try again.'));
+        setIsProcessing(false);
+        return;
+      }
+
+      if (setupIntent && setupIntent.status === 'succeeded') {
+        // Get the payment method ID from the setup intent
+        const paymentMethodId = typeof setupIntent.payment_method === 'string'
+          ? setupIntent.payment_method
+          : setupIntent.payment_method?.id;
+
+        // Check if there's already a default payment method
+        const existingMethods = paymentMethodsData?.payment_methods;
+        const hasDefaultMethod = existingMethods?.some(pm => pm.is_default) ?? false;
+
+        console.log('[AddPaymentMethodModal] SetupIntent succeeded:', {
+          paymentMethodId,
+          existingMethodsCount: existingMethods?.length ?? 0,
+          hasDefaultMethod,
+        });
+
+        // Set as default if no default payment method exists yet
+        if (!hasDefaultMethod && paymentMethodId) {
+          console.log('[AddPaymentMethodModal] No default payment method exists, setting new one as default:', paymentMethodId);
+          // Set as default (fire and forget - don't block the success flow)
+          setDefaultPaymentMethod.mutate(paymentMethodId, {
+            onSuccess: () => {
+              console.log('[AddPaymentMethodModal] Successfully set payment method as default');
+            },
+            onError: (err) => {
+              console.error('[AddPaymentMethodModal] Failed to set default payment method:', err);
+            },
+          });
+        } else {
+          console.log('[AddPaymentMethodModal] Default already exists or no paymentMethodId - existingMethods:', existingMethods?.length, 'hasDefaultMethod:', hasDefaultMethod, 'paymentMethodId:', paymentMethodId);
+        }
+
+        // Invalidate payment methods to refresh the list
+        queryClient.invalidateQueries({ queryKey: ['customerPaymentMethods'] });
+        setIsComplete(true);
+        setTimeout(() => {
+          onSuccess();
+        }, 1500);
+      }
+    } catch (err: any) {
+      setErrorMessage(err.message || t('billing.unexpectedError', 'An unexpected error occurred.'));
+      setIsProcessing(false);
+    }
+  };
+
+  if (isComplete) {
+    return (
+      <div className="text-center py-8">
+        <CheckCircle className="w-16 h-16 text-green-500 mx-auto mb-4" />
+        <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
+          {t('billing.cardAdded', 'Card Added Successfully!')}
+        </h3>
+        <p className="text-gray-600 dark:text-gray-400">
+          {t('billing.cardAddedDescription', 'Your payment method has been saved.')}
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+        <CardElement
+          options={{
+            style: {
+              base: {
+                fontSize: '16px',
+                color: isDarkMode ? '#f1f5f9' : '#1e293b',
+                iconColor: isDarkMode ? '#94a3b8' : '#64748b',
+                '::placeholder': {
+                  color: isDarkMode ? '#64748b' : '#94a3b8',
+                },
+              },
+              invalid: {
+                color: isDarkMode ? '#f87171' : '#dc2626',
+                iconColor: isDarkMode ? '#f87171' : '#dc2626',
+              },
+            },
+          }}
+          onChange={(e) => setCardComplete(e.complete)}
+        />
+      </div>
+
+      {errorMessage && (
+        <div className="flex items-start gap-2 p-3 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-lg">
+          <AlertCircle className="w-5 h-5 text-red-600 dark:text-red-400 shrink-0 mt-0.5" />
+          <p className="text-sm text-red-600 dark:text-red-400">{errorMessage}</p>
+        </div>
+      )}
+
+      <div className="flex gap-3 pt-2">
+        <button
+          type="button"
+          onClick={onCancel}
+          disabled={isProcessing}
+          className="flex-1 py-2.5 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50"
+        >
+          {t('common.cancel', 'Cancel')}
+        </button>
+        <button
+          type="submit"
+          disabled={!stripe || isProcessing || !cardComplete}
+          className="flex-1 py-2.5 bg-brand-600 text-white rounded-lg hover:bg-brand-700 disabled:opacity-50 flex items-center justify-center gap-2"
+        >
+          {isProcessing ? (
+            <>
+              <Loader2 className="w-4 h-4 animate-spin" />
+              {t('common.saving', 'Saving...')}
+            </>
+          ) : (
+            <>
+              <CreditCard className="w-4 h-4" />
+              {t('billing.saveCard', 'Save Card')}
+            </>
+          )}
+        </button>
+      </div>
+
+      <p className="text-xs text-center text-gray-500 dark:text-gray-400 mt-2">
+        {t('billing.stripeSecure', 'Your payment information is securely processed by Stripe')}
+      </p>
+    </form>
+  );
+};
+
+interface AddPaymentMethodModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess?: () => void;
+}
+
+export const AddPaymentMethodModal: React.FC<AddPaymentMethodModalProps> = ({
+  isOpen,
+  onClose,
+  onSuccess,
+}) => {
+  const { t } = useTranslation();
+  const [clientSecret, setClientSecret] = useState<string | null>(null);
+  const [stripeAccount, setStripeAccount] = useState<string | null>(null);
+  const [stripePromise, setStripePromise] = useState<Promise<Stripe | null> | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const createSetupIntent = useCreateSetupIntent();
+
+  // Detect dark mode for Stripe Elements appearance
+  const [isDarkMode, setIsDarkMode] = useState(() =>
+    document.documentElement.classList.contains('dark')
+  );
+
+  useEffect(() => {
+    // Watch for dark mode changes
+    const observer = new MutationObserver(() => {
+      setIsDarkMode(document.documentElement.classList.contains('dark'));
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class'],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    if (isOpen && !clientSecret && !createSetupIntent.isPending) {
+      // Create SetupIntent when modal opens
+      createSetupIntent.mutate(undefined, {
+        onSuccess: (data) => {
+          console.log('[AddPaymentMethodModal] SetupIntent response:', {
+            client_secret: data.client_secret?.substring(0, 30) + '...',
+            setup_intent_id: data.setup_intent_id,
+            customer_id: data.customer_id,
+            stripe_account: data.stripe_account,
+            publishable_key: data.publishable_key ? data.publishable_key.substring(0, 20) + '...' : null,
+          });
+
+          // stripe_account can be empty string for direct_api mode, or acct_xxx for connect mode
+          // Only undefined/null indicates an error
+          if (data.stripe_account === undefined || data.stripe_account === null) {
+            console.error('[AddPaymentMethodModal] stripe_account is undefined/null - payment system may not be configured correctly');
+            setError(t('billing.paymentSystemNotConfigured', 'The payment system is not fully configured. Please contact support.'));
+            return;
+          }
+
+          setClientSecret(data.client_secret);
+          setStripeAccount(data.stripe_account);
+          // Load Stripe - empty stripe_account means direct_api mode (use tenant's publishable_key)
+          // Non-empty stripe_account means connect mode (use platform key with connected account)
+          setStripePromise(getStripeInstance(data.stripe_account, data.publishable_key));
+        },
+        onError: (err: any) => {
+          console.error('[AddPaymentMethodModal] SetupIntent error:', err);
+          setError(err.response?.data?.error || t('billing.setupIntentFailed', 'Failed to initialize. Please try again.'));
+        },
+      });
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (!isOpen) {
+      // Reset state when modal closes
+      setClientSecret(null);
+      setStripeAccount(null);
+      setStripePromise(null);
+      setError(null);
+    }
+  }, [isOpen]);
+
+  const handleSuccess = () => {
+    onSuccess?.();
+    onClose();
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-md mx-4 p-6">
+        <div className="flex items-center justify-between mb-6">
+          <div>
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+              {t('billing.addPaymentMethod', 'Add Payment Method')}
+            </h3>
+            <p className="text-sm text-gray-500 dark:text-gray-400">
+              {t('billing.addPaymentMethodDescription', 'Save a card for future payments')}
+            </p>
+          </div>
+          <button
+            onClick={onClose}
+            className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {createSetupIntent.isPending ? (
+          <div className="flex flex-col items-center justify-center py-12">
+            <Loader2 className="w-8 h-8 animate-spin text-brand-600 mb-4" />
+            <p className="text-gray-600 dark:text-gray-400">
+              {t('common.loading', 'Loading...')}
+            </p>
+          </div>
+        ) : error ? (
+          <div className="space-y-4">
+            <div className="flex items-start gap-2 p-3 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-lg">
+              <AlertCircle className="w-5 h-5 text-red-600 dark:text-red-400 shrink-0 mt-0.5" />
+              <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+            </div>
+            <div className="flex gap-3">
+              <button
+                onClick={onClose}
+                className="flex-1 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700"
+              >
+                {t('common.cancel', 'Cancel')}
+              </button>
+              <button
+                onClick={() => {
+                  setError(null);
+                  createSetupIntent.mutate(undefined, {
+                    onSuccess: (data) => {
+                      setClientSecret(data.client_secret);
+                      setStripeAccount(data.stripe_account);
+                      setStripePromise(getStripeInstance(data.stripe_account, data.publishable_key));
+                    },
+                    onError: (err: any) => {
+                      setError(err.response?.data?.error || t('billing.setupIntentFailed', 'Failed to initialize. Please try again.'));
+                    },
+                  });
+                }}
+                className="flex-1 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700"
+              >
+                {t('common.tryAgain', 'Try Again')}
+              </button>
+            </div>
+          </div>
+        ) : clientSecret && stripePromise ? (
+          <Elements
+            stripe={stripePromise}
+            options={{
+              clientSecret,
+              appearance: {
+                theme: isDarkMode ? 'night' : 'stripe',
+                variables: {
+                  colorPrimary: '#2563eb',
+                  colorBackground: isDarkMode ? '#1f2937' : '#ffffff',
+                  colorText: isDarkMode ? '#f1f5f9' : '#1e293b',
+                  colorDanger: isDarkMode ? '#f87171' : '#dc2626',
+                  fontFamily: 'system-ui, -apple-system, sans-serif',
+                  spacingUnit: '12px',
+                  borderRadius: '8px',
+                },
+              },
+            }}
+          >
+            <CardFormInner
+              clientSecret={clientSecret}
+              onSuccess={handleSuccess}
+              onCancel={onClose}
+            />
+          </Elements>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+export default AddPaymentMethodModal;
--- a/frontend/src/components/ConfirmationModal.tsx
+++ b/frontend/src/components/ConfirmationModal.tsx
@@ -0,0 +1,134 @@
+import React from 'react';
+import { X, AlertTriangle, CheckCircle, Info, AlertCircle } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+type ModalVariant = 'info' | 'warning' | 'danger' | 'success';
+
+interface ConfirmationModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title: string;
+  message: string | React.ReactNode;
+  confirmText?: string;
+  cancelText?: string;
+  variant?: ModalVariant;
+  isLoading?: boolean;
+}
+
+const variantConfig: Record<ModalVariant, {
+  icon: React.ReactNode;
+  iconBg: string;
+  confirmButtonClass: string;
+}> = {
+  info: {
+    icon: <Info size={24} className="text-blue-600 dark:text-blue-400" />,
+    iconBg: 'bg-blue-100 dark:bg-blue-900/30',
+    confirmButtonClass: 'bg-blue-600 hover:bg-blue-700 text-white',
+  },
+  warning: {
+    icon: <AlertTriangle size={24} className="text-amber-600 dark:text-amber-400" />,
+    iconBg: 'bg-amber-100 dark:bg-amber-900/30',
+    confirmButtonClass: 'bg-amber-600 hover:bg-amber-700 text-white',
+  },
+  danger: {
+    icon: <AlertCircle size={24} className="text-red-600 dark:text-red-400" />,
+    iconBg: 'bg-red-100 dark:bg-red-900/30',
+    confirmButtonClass: 'bg-red-600 hover:bg-red-700 text-white',
+  },
+  success: {
+    icon: <CheckCircle size={24} className="text-green-600 dark:text-green-400" />,
+    iconBg: 'bg-green-100 dark:bg-green-900/30',
+    confirmButtonClass: 'bg-green-600 hover:bg-green-700 text-white',
+  },
+};
+
+const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  message,
+  confirmText,
+  cancelText,
+  variant = 'info',
+  isLoading = false,
+}) => {
+  const { t } = useTranslation();
+
+  if (!isOpen) return null;
+
+  const config = variantConfig[variant];
+
+  const handleConfirm = () => {
+    onConfirm();
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+      <div className="bg-white dark:bg-gray-800 rounded-xl shadow-xl w-full max-w-md mx-4">
+        {/* Modal Header */}
+        <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
+          <div className="flex items-center gap-3">
+            <div className={`p-2 rounded-lg ${config.iconBg}`}>
+              {config.icon}
+            </div>
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">{title}</h3>
+          </div>
+          <button
+            onClick={onClose}
+            disabled={isLoading}
+            className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors disabled:opacity-50"
+          >
+            <X size={20} className="text-gray-500 dark:text-gray-400" />
+          </button>
+        </div>
+
+        {/* Modal Body */}
+        <div className="p-6">
+          <div className="text-gray-600 dark:text-gray-300">
+            {typeof message === 'string' ? <p>{message}</p> : message}
+          </div>
+        </div>
+
+        {/* Modal Footer */}
+        <div className="flex items-center justify-end gap-3 p-6 border-t border-gray-200 dark:border-gray-700">
+          <button
+            onClick={onClose}
+            disabled={isLoading}
+            className="px-4 py-2 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors disabled:opacity-50"
+          >
+            {cancelText || t('common.cancel')}
+          </button>
+          <button
+            onClick={handleConfirm}
+            disabled={isLoading}
+            className={`px-4 py-2 rounded-lg font-medium transition-colors disabled:opacity-50 flex items-center gap-2 ${config.confirmButtonClass}`}
+          >
+            {isLoading && (
+              <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
+                <circle
+                  className="opacity-25"
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  stroke="currentColor"
+                  strokeWidth="4"
+                  fill="none"
+                />
+                <path
+                  className="opacity-75"
+                  fill="currentColor"
+                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                />
+              </svg>
+            )}
+            {confirmText || t('common.confirm')}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ConfirmationModal;
--- a/frontend/src/components/ConnectOnboarding.tsx
+++ b/frontend/src/components/ConnectOnboarding.tsx
@@ -4,6 +4,7 @@
 */

 import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
  ExternalLink,
  CheckCircle,
@@ -27,6 +28,7 @@ const ConnectOnboarding: React.FC<ConnectOnboardingProps> = ({
  tier,
  onSuccess,
 }) => {
+  const { t } = useTranslation();
  const [error, setError] = useState<string | null>(null);

  const onboardingMutation = useConnectOnboarding();
@@ -53,7 +55,7 @@ const ConnectOnboarding: React.FC<ConnectOnboardingProps> = ({
      // Redirect to Stripe onboarding
      window.location.href = result.url;
    } catch (err: any) {
-      setError(err.response?.data?.error || 'Failed to start onboarding');
+      setError(err.response?.data?.error || t('payments.failedToStartOnboarding'));
    }
  };

@@ -65,7 +67,7 @@ const ConnectOnboarding: React.FC<ConnectOnboardingProps> = ({
      // Redirect to continue onboarding
      window.location.href = result.url;
    } catch (err: any) {
-      setError(err.response?.data?.error || 'Failed to refresh onboarding link');
+      setError(err.response?.data?.error || t('payments.failedToRefreshLink'));
    }
  };

@@ -73,13 +75,13 @@ const ConnectOnboarding: React.FC<ConnectOnboardingProps> = ({
  const getAccountTypeLabel = () => {
    switch (connectAccount?.account_type) {
      case 'standard':
-        return 'Standard Connect';
+        return t('payments.standardConnect');
      case 'express':
-        return 'Express Connect';
+        return t('payments.expressConnect');
      case 'custom':
-        return 'Custom Connect';
+        return t('payments.customConnect');
      default:
-        return 'Connect';
+        return t('payments.connect');
    }
  };

@@ -91,9 +93,9 @@ const ConnectOnboarding: React.FC<ConnectOnboardingProps> = ({
          <div className="flex items-start gap-3">
            <CheckCircle className="text-green-600 shrink-0 mt-0.5" size={20} />
            <div className="flex-1">
-              <h4 className="font-medium text-green-800">Stripe Connected</h4>
+              <h4 className="font-medium text-green-800">{t('payments.stripeConnected')}</h4>
              <p className="text-sm text-green-700 mt-1">
-                Your Stripe account is connected and ready to accept payments.
+                {t('payments.stripeConnectedDesc')}
              </p>
            </div>
          </div>
@@ -103,14 +105,14 @@ const ConnectOnboarding: React.FC<ConnectOnboardingProps> = ({
      {/* Account Details */}
      {connectAccount && (
        <div className="bg-gray-50 rounded-lg p-4">
-          <h4 className="font-medium text-gray-900 mb-3">Account Details</h4>
+          <h4 className="font-medium text-gray-900 mb-3">{t('payments.accountDetails')}</h4>
          <div className="space-y-2 text-sm">
            <div className="flex justify-between">
-              <span className="text-gray-600">Account Type:</span>
+              <span className="text-gray-600">{t('payments.accountType')}:</span>
              <span className="text-gray-900">{getAccountTypeLabel()}</span>
            </div>
            <div className="flex justify-between">
-              <span className="text-gray-600">Status:</span>
+              <span className="text-gray-600">{t('payments.status')}:</span>
              <span
                className={`px-2 py-0.5 text-xs font-medium rounded-full ${
                  connectAccount.status === 'active'
@@ -126,40 +128,40 @@ const ConnectOnboarding: React.FC<ConnectOnboardingProps> = ({
              </span>
            </div>
            <div className="flex justify-between items-center">
-              <span className="text-gray-600">Charges:</span>
+              <span className="text-gray-600">{t('payments.charges')}:</span>
              <span className="flex items-center gap-1">
                {connectAccount.charges_enabled ? (
                  <>
                    <CreditCard size={14} className="text-green-600" />
-                    <span className="text-green-600">Enabled</span>
+                    <span className="text-green-600">{t('payments.enabled')}</span>
                  </>
                ) : (
                  <>
                    <CreditCard size={14} className="text-gray-400" />
-                    <span className="text-gray-500">Disabled</span>
+                    <span className="text-gray-500">{t('payments.disabled')}</span>
                  </>
                )}
              </span>
            </div>
            <div className="flex justify-between items-center">
-              <span className="text-gray-600">Payouts:</span>
+              <span className="text-gray-600">{t('payments.payouts')}:</span>
              <span className="flex items-center gap-1">
                {connectAccount.payouts_enabled ? (
                  <>
                    <Wallet size={14} className="text-green-600" />
-                    <span className="text-green-600">Enabled</span>
+                    <span className="text-green-600">{t('payments.enabled')}</span>
                  </>
                ) : (
                  <>
                    <Wallet size={14} className="text-gray-400" />
-                    <span className="text-gray-500">Disabled</span>
+                    <span className="text-gray-500">{t('payments.disabled')}</span>
                  </>
                )}
              </span>
            </div>
            {connectAccount.stripe_account_id && (
              <div className="flex justify-between">
-                <span className="text-gray-600">Account ID:</span>
+                <span className="text-gray-600">{t('payments.accountId')}:</span>
                <code className="font-mono text-gray-900 text-xs">
                  {connectAccount.stripe_account_id}
                </code>
@@ -175,10 +177,9 @@ const ConnectOnboarding: React.FC<ConnectOnboardingProps> = ({
          <div className="flex items-start gap-3">
            <AlertCircle className="text-yellow-600 shrink-0 mt-0.5" size={20} />
            <div className="flex-1">
-              <h4 className="font-medium text-yellow-800">Complete Onboarding</h4>
+              <h4 className="font-medium text-yellow-800">{t('payments.completeOnboarding')}</h4>
              <p className="text-sm text-yellow-700 mt-1">
-                Your Stripe Connect account setup is incomplete.
-                Click below to continue the onboarding process.
+                {t('payments.onboardingIncomplete')}
              </p>
              <button
                onClick={handleRefreshLink}
@@ -190,7 +191,7 @@ const ConnectOnboarding: React.FC<ConnectOnboardingProps> = ({
                ) : (
                  <RefreshCw size={16} />
                )}
-                Continue Onboarding
+                {t('payments.continueOnboarding')}
              </button>
            </div>
          </div>
@@ -201,24 +202,22 @@ const ConnectOnboarding: React.FC<ConnectOnboardingProps> = ({
      {needsOnboarding && (
        <div className="space-y-4">
          <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
-            <h4 className="font-medium text-blue-800 mb-2">Connect with Stripe</h4>
+            <h4 className="font-medium text-blue-800 mb-2">{t('payments.connectWithStripe')}</h4>
            <p className="text-sm text-blue-700">
-              As a {tier} tier business, you'll use Stripe Connect to accept payments.
-              This provides a seamless payment experience for your customers while
-              the platform handles payment processing.
+              {t('payments.tierPaymentDescription', { tier })}
            </p>
            <ul className="mt-3 space-y-1 text-sm text-blue-700">
              <li className="flex items-center gap-2">
                <CheckCircle size={14} />
-                Secure payment processing
+                {t('payments.securePaymentProcessing')}
              </li>
              <li className="flex items-center gap-2">
                <CheckCircle size={14} />
-                Automatic payouts to your bank account
+                {t('payments.automaticPayouts')}
              </li>
              <li className="flex items-center gap-2">
                <CheckCircle size={14} />
-                PCI compliance handled for you
+                {t('payments.pciCompliance')}
              </li>
            </ul>
          </div>
@@ -233,7 +232,7 @@ const ConnectOnboarding: React.FC<ConnectOnboardingProps> = ({
            ) : (
              <>
                <ExternalLink size={18} />
-                Connect with Stripe
+                {t('payments.connectWithStripe')}
              </>
            )}
          </button>
@@ -259,7 +258,7 @@ const ConnectOnboarding: React.FC<ConnectOnboardingProps> = ({
          className="flex items-center gap-2 text-sm text-gray-600 hover:text-gray-900"
        >
          <ExternalLink size={14} />
-          Open Stripe Dashboard
+          {t('payments.openStripeDashboard')}
        </a>
      )}
    </div>
--- a/frontend/src/components/ConnectOnboardingEmbed.tsx
+++ b/frontend/src/components/ConnectOnboardingEmbed.tsx
@@ -20,6 +20,7 @@ import {
  Wallet,
  Building2,
 } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 import { createAccountSession, refreshConnectStatus, ConnectAccountInfo } from '../api/payments';

 interface ConnectOnboardingEmbedProps {
@@ -37,6 +38,7 @@ const ConnectOnboardingEmbed: React.FC<ConnectOnboardingEmbedProps> = ({
  onComplete,
  onError,
 }) => {
+  const { t } = useTranslation();
  const [stripeConnectInstance, setStripeConnectInstance] = useState<StripeConnectInstance | null>(null);
  const [loadingState, setLoadingState] = useState<LoadingState>('idle');
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
@@ -68,7 +70,7 @@ const ConnectOnboardingEmbed: React.FC<ConnectOnboardingEmbedProps> = ({
            colorDanger: '#df1b41',
            fontFamily: 'system-ui, -apple-system, sans-serif',
            fontSizeBase: '14px',
-            spacingUnit: '4px',
+            spacingUnit: '12px',
            borderRadius: '8px',
          },
        },
@@ -78,12 +80,12 @@ const ConnectOnboardingEmbed: React.FC<ConnectOnboardingEmbedProps> = ({
      setLoadingState('ready');
    } catch (err: any) {
      console.error('Failed to initialize Stripe Connect:', err);
-      const message = err.response?.data?.error || err.message || 'Failed to initialize payment setup';
+      const message = err.response?.data?.error || err.message || t('payments.failedToInitializePayment');
      setErrorMessage(message);
      setLoadingState('error');
      onError?.(message);
    }
-  }, [loadingState, onError]);
+  }, [loadingState, onError, t]);

  // Handle onboarding completion
  const handleOnboardingExit = useCallback(async () => {
@@ -100,23 +102,23 @@ const ConnectOnboardingEmbed: React.FC<ConnectOnboardingEmbedProps> = ({
  // Handle errors from the Connect component
  const handleLoadError = useCallback((loadError: { error: { message?: string }; elementTagName: string }) => {
    console.error('Connect component load error:', loadError);
-    const message = loadError.error.message || 'Failed to load payment component';
+    const message = loadError.error.message || t('payments.failedToLoadPaymentComponent');
    setErrorMessage(message);
    setLoadingState('error');
    onError?.(message);
-  }, [onError]);
+  }, [onError, t]);

  // Account type display
  const getAccountTypeLabel = () => {
    switch (connectAccount?.account_type) {
      case 'standard':
-        return 'Standard Connect';
+        return t('payments.standardConnect');
      case 'express':
-        return 'Express Connect';
+        return t('payments.expressConnect');
      case 'custom':
-        return 'Custom Connect';
+        return t('payments.customConnect');
      default:
-        return 'Connect';
+        return t('payments.connect');
    }
  };

@@ -124,43 +126,43 @@ const ConnectOnboardingEmbed: React.FC<ConnectOnboardingEmbedProps> = ({
  if (isActive) {
    return (
      <div className="space-y-6">
-        <div className="bg-green-50 border border-green-200 rounded-lg p-4">
+        <div className="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4">
          <div className="flex items-start gap-3">
-            <CheckCircle className="text-green-600 shrink-0 mt-0.5" size={20} />
+            <CheckCircle className="text-green-600 dark:text-green-400 shrink-0 mt-0.5" size={20} />
            <div className="flex-1">
-              <h4 className="font-medium text-green-800">Stripe Connected</h4>
-              <p className="text-sm text-green-700 mt-1">
-                Your Stripe account is connected and ready to accept payments.
+              <h4 className="font-medium text-green-800 dark:text-green-300">{t('payments.stripeConnected')}</h4>
+              <p className="text-sm text-green-700 dark:text-green-400 mt-1">
+                {t('payments.stripeConnectedDesc')}
              </p>
            </div>
          </div>
        </div>

-        <div className="bg-gray-50 rounded-lg p-4">
-          <h4 className="font-medium text-gray-900 mb-3">Account Details</h4>
+        <div className="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4">
+          <h4 className="font-medium text-gray-900 dark:text-white mb-3">{t('payments.accountDetails')}</h4>
          <div className="space-y-2 text-sm">
            <div className="flex justify-between">
-              <span className="text-gray-600">Account Type:</span>
-              <span className="text-gray-900">{getAccountTypeLabel()}</span>
+              <span className="text-gray-600 dark:text-gray-400">{t('payments.accountType')}:</span>
+              <span className="text-gray-900 dark:text-white">{getAccountTypeLabel()}</span>
            </div>
            <div className="flex justify-between">
-              <span className="text-gray-600">Status:</span>
-              <span className="px-2 py-0.5 text-xs font-medium rounded-full bg-green-100 text-green-800">
+              <span className="text-gray-600 dark:text-gray-400">{t('payments.status')}:</span>
+              <span className="px-2 py-0.5 text-xs font-medium rounded-full bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300">
                {connectAccount.status}
              </span>
            </div>
            <div className="flex justify-between items-center">
-              <span className="text-gray-600">Charges:</span>
-              <span className="flex items-center gap-1 text-green-600">
+              <span className="text-gray-600 dark:text-gray-400">{t('payments.charges')}:</span>
+              <span className="flex items-center gap-1 text-green-600 dark:text-green-400">
                <CreditCard size={14} />
-                Enabled
+                {t('payments.enabled')}
              </span>
            </div>
            <div className="flex justify-between items-center">
-              <span className="text-gray-600">Payouts:</span>
-              <span className="flex items-center gap-1 text-green-600">
+              <span className="text-gray-600 dark:text-gray-400">{t('payments.payouts')}:</span>
+              <span className="flex items-center gap-1 text-green-600 dark:text-green-400">
                <Wallet size={14} />
-                {connectAccount.payouts_enabled ? 'Enabled' : 'Pending'}
+                {connectAccount.payouts_enabled ? t('payments.enabled') : t('payments.pending')}
              </span>
            </div>
          </div>
@@ -172,11 +174,11 @@ const ConnectOnboardingEmbed: React.FC<ConnectOnboardingEmbedProps> = ({
  // Completion state
  if (loadingState === 'complete') {
    return (
-      <div className="bg-green-50 border border-green-200 rounded-lg p-6 text-center">
-        <CheckCircle className="mx-auto text-green-600 mb-3" size={48} />
-        <h4 className="font-medium text-green-800 text-lg">Onboarding Complete!</h4>
-        <p className="text-sm text-green-700 mt-2">
-          Your Stripe account has been set up. You can now accept payments.
+      <div className="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-6 text-center">
+        <CheckCircle className="mx-auto text-green-600 dark:text-green-400 mb-3" size={48} />
+        <h4 className="font-medium text-green-800 dark:text-green-300 text-lg">{t('payments.onboardingComplete')}</h4>
+        <p className="text-sm text-green-700 dark:text-green-400 mt-2">
+          {t('payments.stripeSetupComplete')}
        </p>
      </div>
    );
@@ -186,12 +188,12 @@ const ConnectOnboardingEmbed: React.FC<ConnectOnboardingEmbedProps> = ({
  if (loadingState === 'error') {
    return (
      <div className="space-y-4">
-        <div className="bg-red-50 border border-red-200 rounded-lg p-4">
+        <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
          <div className="flex items-start gap-3">
-            <AlertCircle className="text-red-600 shrink-0 mt-0.5" size={20} />
+            <AlertCircle className="text-red-600 dark:text-red-400 shrink-0 mt-0.5" size={20} />
            <div className="flex-1">
-              <h4 className="font-medium text-red-800">Setup Failed</h4>
-              <p className="text-sm text-red-700 mt-1">{errorMessage}</p>
+              <h4 className="font-medium text-red-800 dark:text-red-300">{t('payments.setupFailed')}</h4>
+              <p className="text-sm text-red-700 dark:text-red-400 mt-1">{errorMessage}</p>
            </div>
          </div>
        </div>
@@ -200,9 +202,9 @@ const ConnectOnboardingEmbed: React.FC<ConnectOnboardingEmbedProps> = ({
            setLoadingState('idle');
            setErrorMessage(null);
          }}
-          className="w-full px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200"
+          className="w-full px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600"
        >
-          Try Again
+          {t('payments.tryAgain')}
        </button>
      </div>
    );
@@ -212,27 +214,26 @@ const ConnectOnboardingEmbed: React.FC<ConnectOnboardingEmbedProps> = ({
  if (loadingState === 'idle') {
    return (
      <div className="space-y-4">
-        <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+        <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
          <div className="flex items-start gap-3">
-            <Building2 className="text-blue-600 shrink-0 mt-0.5" size={20} />
+            <Building2 className="text-blue-600 dark:text-blue-400 shrink-0 mt-0.5" size={20} />
            <div className="flex-1">
-              <h4 className="font-medium text-blue-800">Set Up Payments</h4>
-              <p className="text-sm text-blue-700 mt-1">
-                As a {tier} tier business, you'll use Stripe Connect to accept payments.
-                Complete the onboarding process to start accepting payments from your customers.
+              <h4 className="font-medium text-blue-800 dark:text-blue-300">{t('payments.setUpPayments')}</h4>
+              <p className="text-sm text-blue-700 dark:text-blue-400 mt-1">
+                {t('payments.tierPaymentDescriptionWithOnboarding', { tier })}
              </p>
-              <ul className="mt-3 space-y-1 text-sm text-blue-700">
+              <ul className="mt-3 space-y-1 text-sm text-blue-700 dark:text-blue-400">
                <li className="flex items-center gap-2">
                  <CheckCircle size={14} />
-                  Secure payment processing
+                  {t('payments.securePaymentProcessing')}
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle size={14} />
-                  Automatic payouts to your bank account
+                  {t('payments.automaticPayouts')}
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle size={14} />
-                  PCI compliance handled for you
+                  {t('payments.pciCompliance')}
                </li>
              </ul>
            </div>
@@ -244,7 +245,7 @@ const ConnectOnboardingEmbed: React.FC<ConnectOnboardingEmbedProps> = ({
          className="w-full flex items-center justify-center gap-2 px-4 py-3 text-sm font-medium text-white bg-[#635BFF] rounded-lg hover:bg-[#5851ea] transition-colors"
        >
          <CreditCard size={18} />
-          Start Payment Setup
+          {t('payments.startPaymentSetup')}
        </button>
      </div>
    );
@@ -255,7 +256,7 @@ const ConnectOnboardingEmbed: React.FC<ConnectOnboardingEmbedProps> = ({
    return (
      <div className="flex flex-col items-center justify-center py-12">
        <Loader2 className="animate-spin text-[#635BFF] mb-4" size={40} />
-        <p className="text-gray-600">Initializing payment setup...</p>
+        <p className="text-gray-600 dark:text-gray-400">{t('payments.initializingPaymentSetup')}</p>
      </div>
    );
  }
@@ -264,15 +265,14 @@ const ConnectOnboardingEmbed: React.FC<ConnectOnboardingEmbedProps> = ({
  if (loadingState === 'ready' && stripeConnectInstance) {
    return (
      <div className="space-y-4">
-        <div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
-          <h4 className="font-medium text-gray-900 mb-2">Complete Your Account Setup</h4>
-          <p className="text-sm text-gray-600">
-            Fill out the information below to finish setting up your payment account.
-            Your information is securely handled by Stripe.
+        <div className="bg-gray-50 dark:bg-gray-700/50 border border-gray-200 dark:border-gray-600 rounded-lg p-4">
+          <h4 className="font-medium text-gray-900 dark:text-white mb-2">{t('payments.completeAccountSetup')}</h4>
+          <p className="text-sm text-gray-600 dark:text-gray-400">
+            {t('payments.fillOutInfoForPayment')}
          </p>
        </div>

-        <div className="border border-gray-200 rounded-lg overflow-hidden bg-white p-4">
+        <div className="border border-gray-200 dark:border-gray-600 rounded-lg overflow-hidden bg-white dark:bg-gray-800 p-4">
          <ConnectComponentsProvider connectInstance={stripeConnectInstance}>
            <ConnectAccountOnboarding
              onExit={handleOnboardingExit}
--- a/frontend/src/components/CreateTaskModal.tsx
+++ b/frontend/src/components/CreateTaskModal.tsx
@@ -123,7 +123,7 @@ const CreateTaskModal: React.FC<CreateTaskModalProps> = ({ isOpen, onClose, onSu
  const { data: plugins = [], isLoading: pluginsLoading } = useQuery<PluginInstallation[]>({
    queryKey: ['plugin-installations'],
    queryFn: async () => {
-      const { data } = await axios.get('/api/plugin-installations/');
+      const { data } = await axios.get('/plugin-installations/');
      // Filter out plugins that already have scheduled tasks
      return data.filter((p: PluginInstallation) => !p.scheduled_task);
    },
@@ -209,7 +209,7 @@ const CreateTaskModal: React.FC<CreateTaskModalProps> = ({ isOpen, onClose, onSu
          apply_to_existing: applyToExisting,
        };

-        await axios.post('/api/global-event-plugins/', payload);
+        await axios.post('/global-event-plugins/', payload);
        queryClient.invalidateQueries({ queryKey: ['global-event-plugins'] });
        toast.success(applyToExisting ? 'Plugin attached to all events' : 'Plugin will apply to future events');
      } else {
@@ -240,7 +240,7 @@ const CreateTaskModal: React.FC<CreateTaskModalProps> = ({ isOpen, onClose, onSu
          }
        }

-        await axios.post('/api/scheduled-tasks/', payload);
+        await axios.post('/scheduled-tasks/', payload);
        toast.success('Scheduled task created');
      }

--- a/frontend/src/components/CreditPaymentForm.tsx
+++ b/frontend/src/components/CreditPaymentForm.tsx
@@ -0,0 +1,402 @@
+/**
+ * Credit Payment Form Component
+ *
+ * Uses Stripe Elements for secure card collection when purchasing
+ * communication credits.
+ */
+
+import React, { useState, useEffect } from 'react';
+import { loadStripe } from '@stripe/stripe-js';
+import {
+  Elements,
+  PaymentElement,
+  useStripe,
+  useElements,
+} from '@stripe/react-stripe-js';
+import { CreditCard, Loader2, X, CheckCircle, AlertCircle } from 'lucide-react';
+import { useCreatePaymentIntent, useConfirmPayment } from '../hooks/useCommunicationCredits';
+
+// Initialize Stripe
+const stripePromise = loadStripe(import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY || '');
+
+interface PaymentFormProps {
+  amountCents: number;
+  onSuccess: () => void;
+  onCancel: () => void;
+  savePaymentMethod?: boolean;
+}
+
+const PaymentFormInner: React.FC<PaymentFormProps> = ({
+  amountCents,
+  onSuccess,
+  onCancel,
+  savePaymentMethod = false,
+}) => {
+  const stripe = useStripe();
+  const elements = useElements();
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [isComplete, setIsComplete] = useState(false);
+  const [isElementReady, setIsElementReady] = useState(false);
+  const confirmPayment = useConfirmPayment();
+
+  const formatCurrency = (cents: number) => `$${(cents / 100).toFixed(2)}`;
+
+  const handleSubmit = async (event: React.FormEvent) => {
+    event.preventDefault();
+
+    if (!stripe || !elements) {
+      return;
+    }
+
+    setIsProcessing(true);
+    setErrorMessage(null);
+
+    try {
+      // Confirm the payment with Stripe
+      const { error, paymentIntent } = await stripe.confirmPayment({
+        elements,
+        confirmParams: {
+          return_url: window.location.href,
+        },
+        redirect: 'if_required',
+      });
+
+      if (error) {
+        setErrorMessage(error.message || 'Payment failed. Please try again.');
+        setIsProcessing(false);
+        return;
+      }
+
+      if (paymentIntent && paymentIntent.status === 'succeeded') {
+        // Confirm the payment on the backend
+        await confirmPayment.mutateAsync({
+          payment_intent_id: paymentIntent.id,
+          save_payment_method: savePaymentMethod,
+        });
+        setIsComplete(true);
+        setTimeout(() => {
+          onSuccess();
+        }, 1500);
+      }
+    } catch (err: any) {
+      setErrorMessage(err.message || 'An unexpected error occurred.');
+      setIsProcessing(false);
+    }
+  };
+
+  if (isComplete) {
+    return (
+      <div className="text-center py-8">
+        <CheckCircle className="w-16 h-16 text-green-500 mx-auto mb-4" />
+        <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
+          Payment Successful!
+        </h3>
+        <p className="text-gray-600 dark:text-gray-400">
+          {formatCurrency(amountCents)} has been added to your credits.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div className="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 mb-4">
+        <div className="flex justify-between items-center">
+          <span className="text-gray-600 dark:text-gray-400">Amount</span>
+          <span className="text-xl font-bold text-gray-900 dark:text-white">
+            {formatCurrency(amountCents)}
+          </span>
+        </div>
+      </div>
+
+      <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+        {!isElementReady && (
+          <div className="flex items-center justify-center py-8">
+            <Loader2 className="w-6 h-6 animate-spin text-gray-400" />
+            <span className="ml-2 text-sm text-gray-500 dark:text-gray-400">Loading payment form...</span>
+          </div>
+        )}
+        <div className={isElementReady ? '' : 'hidden'}>
+          <PaymentElement
+            onReady={() => setIsElementReady(true)}
+            options={{
+              layout: 'tabs',
+            }}
+          />
+        </div>
+      </div>
+
+      {errorMessage && (
+        <div className="flex items-start gap-2 p-3 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-lg">
+          <AlertCircle className="w-5 h-5 text-red-600 dark:text-red-400 shrink-0 mt-0.5" />
+          <p className="text-sm text-red-600 dark:text-red-400">{errorMessage}</p>
+        </div>
+      )}
+
+      <div className="flex gap-3 pt-2">
+        <button
+          type="button"
+          onClick={onCancel}
+          disabled={isProcessing}
+          className="flex-1 py-2.5 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50"
+        >
+          Cancel
+        </button>
+        <button
+          type="submit"
+          disabled={!stripe || isProcessing}
+          className="flex-1 py-2.5 bg-brand-600 text-white rounded-lg hover:bg-brand-700 disabled:opacity-50 flex items-center justify-center gap-2"
+        >
+          {isProcessing ? (
+            <>
+              <Loader2 className="w-4 h-4 animate-spin" />
+              Processing...
+            </>
+          ) : (
+            <>
+              <CreditCard className="w-4 h-4" />
+              Pay {formatCurrency(amountCents)}
+            </>
+          )}
+        </button>
+      </div>
+
+      <p className="text-xs text-center text-gray-500 dark:text-gray-400 mt-2">
+        Your payment is securely processed by Stripe
+      </p>
+    </form>
+  );
+};
+
+interface CreditPaymentModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+  amountCents: number;
+  onAmountChange?: (cents: number) => void;
+  savePaymentMethod?: boolean;
+  skipAmountSelection?: boolean;
+}
+
+export const CreditPaymentModal: React.FC<CreditPaymentModalProps> = ({
+  isOpen,
+  onClose,
+  onSuccess,
+  amountCents,
+  onAmountChange,
+  savePaymentMethod = false,
+  skipAmountSelection = false,
+}) => {
+  const [clientSecret, setClientSecret] = useState<string | null>(null);
+  const [isLoadingIntent, setIsLoadingIntent] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [showPaymentForm, setShowPaymentForm] = useState(false);
+  const [autoInitialized, setAutoInitialized] = useState(false);
+  const createPaymentIntent = useCreatePaymentIntent();
+
+  const formatCurrency = (cents: number) => `$${(cents / 100).toFixed(2)}`;
+
+  useEffect(() => {
+    if (!isOpen) {
+      setClientSecret(null);
+      setShowPaymentForm(false);
+      setError(null);
+      setAutoInitialized(false);
+    }
+  }, [isOpen]);
+
+  // Auto-initialize payment when skipping amount selection
+  useEffect(() => {
+    if (isOpen && skipAmountSelection && !autoInitialized && !isLoadingIntent && !clientSecret) {
+      setAutoInitialized(true);
+      handleContinueToPayment();
+    }
+  }, [isOpen, skipAmountSelection, autoInitialized, isLoadingIntent, clientSecret]);
+
+  const handleContinueToPayment = async () => {
+    setIsLoadingIntent(true);
+    setError(null);
+
+    try {
+      const result = await createPaymentIntent.mutateAsync(amountCents);
+      setClientSecret(result.client_secret);
+      setShowPaymentForm(true);
+    } catch (err: any) {
+      setError(err.response?.data?.error || 'Failed to initialize payment. Please try again.');
+    } finally {
+      setIsLoadingIntent(false);
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-lg p-6">
+        <div className="flex items-center justify-between mb-4">
+          <div>
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+              {skipAmountSelection ? 'Complete Payment' : 'Add Credits'}
+            </h3>
+            <p className="text-sm text-gray-500 dark:text-gray-400">
+              {skipAmountSelection
+                ? `Loading ${formatCurrency(amountCents)} to your balance`
+                : 'Choose an amount to add to your balance'
+              }
+            </p>
+          </div>
+          <button
+            onClick={onClose}
+            className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Loading state when auto-initializing */}
+        {skipAmountSelection && isLoadingIntent && !clientSecret ? (
+          <div className="flex flex-col items-center justify-center py-12">
+            <Loader2 className="w-8 h-8 animate-spin text-brand-600 mb-4" />
+            <p className="text-gray-600 dark:text-gray-400">Setting up payment...</p>
+          </div>
+        ) : skipAmountSelection && error && !clientSecret ? (
+          <div className="space-y-4">
+            <div className="flex items-start gap-2 p-3 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-lg">
+              <AlertCircle className="w-5 h-5 text-red-600 dark:text-red-400 shrink-0 mt-0.5" />
+              <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+            </div>
+            <div className="flex gap-3">
+              <button
+                onClick={onClose}
+                className="flex-1 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={() => {
+                  setAutoInitialized(false);
+                  setError(null);
+                }}
+                className="flex-1 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700"
+              >
+                Try Again
+              </button>
+            </div>
+          </div>
+        ) : !showPaymentForm && !skipAmountSelection ? (
+          <div className="space-y-4">
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+              Quick select
+            </label>
+            <div className="grid grid-cols-3 gap-3">
+              {[1000, 2500, 5000].map((amount) => (
+                <button
+                  key={amount}
+                  onClick={() => onAmountChange?.(amount)}
+                  className={`py-3 px-4 rounded-lg border-2 transition-colors ${
+                    amountCents === amount
+                      ? 'border-brand-600 bg-brand-50 dark:bg-brand-900/30 text-brand-600'
+                      : 'border-gray-200 dark:border-gray-700 hover:border-gray-300'
+                  }`}
+                >
+                  <span className="font-semibold">{formatCurrency(amount)}</span>
+                </button>
+              ))}
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                Custom amount (whole dollars only)
+              </label>
+              <div className="relative">
+                <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-900 dark:text-white font-medium">$</span>
+                <input
+                  type="text"
+                  inputMode="numeric"
+                  pattern="[0-9]*"
+                  value={amountCents / 100}
+                  onChange={(e) => {
+                    const val = e.target.value.replace(/[^0-9]/g, '');
+                    onAmountChange?.(Math.max(5, parseInt(val) || 5) * 100);
+                  }}
+                  onKeyDown={(e) => {
+                    if (!/[0-9]/.test(e.key) && !['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'].includes(e.key)) {
+                      e.preventDefault();
+                    }
+                  }}
+                  className="w-full pl-8 pr-12 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+                />
+                <span className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500">.00</span>
+              </div>
+            </div>
+
+            {error && (
+              <div className="flex items-start gap-2 p-3 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-lg">
+                <AlertCircle className="w-5 h-5 text-red-600 dark:text-red-400 shrink-0 mt-0.5" />
+                <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+              </div>
+            )}
+
+            <div className="flex gap-3 pt-4">
+              <button
+                onClick={onClose}
+                className="flex-1 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleContinueToPayment}
+                disabled={isLoadingIntent}
+                className="flex-1 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 disabled:opacity-50 flex items-center justify-center gap-2"
+              >
+                {isLoadingIntent ? (
+                  <>
+                    <Loader2 className="w-4 h-4 animate-spin" />
+                    Loading...
+                  </>
+                ) : (
+                  <>
+                    <CreditCard className="w-4 h-4" />
+                    Continue to Payment
+                  </>
+                )}
+              </button>
+            </div>
+          </div>
+        ) : clientSecret ? (
+          <Elements
+            stripe={stripePromise}
+            options={{
+              clientSecret,
+              appearance: {
+                theme: 'stripe',
+                variables: {
+                  colorPrimary: '#2563eb',
+                  colorBackground: '#ffffff',
+                  colorText: '#1e293b',
+                  colorDanger: '#dc2626',
+                  fontFamily: 'system-ui, -apple-system, sans-serif',
+                  spacingUnit: '12px',
+                  borderRadius: '8px',
+                },
+              },
+            }}
+          >
+            <PaymentFormInner
+              amountCents={amountCents}
+              onSuccess={onSuccess}
+              onCancel={() => {
+                setShowPaymentForm(false);
+                setClientSecret(null);
+              }}
+              savePaymentMethod={savePaymentMethod}
+            />
+          </Elements>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+export default CreditPaymentModal;
--- a/frontend/src/components/DevQuickLogin.tsx
+++ b/frontend/src/components/DevQuickLogin.tsx
@@ -2,9 +2,10 @@ import { useState } from 'react';
 import apiClient from '../api/client';
 import { setCookie } from '../utils/cookies';
 import { useQueryClient } from '@tanstack/react-query';
+import { getBaseDomain, buildSubdomainUrl } from '../utils/domain';

 export interface TestUser {
-  username: string;
+  email: string;
  password: string;
  role: string;
  label: string;
@@ -13,56 +14,56 @@ export interface TestUser {

 const testUsers: TestUser[] = [
  {
-    username: 'superuser',
+    email: 'superuser@platform.com',
    password: 'test123',
    role: 'SUPERUSER',
    label: 'Platform Superuser',
    color: 'bg-purple-600 hover:bg-purple-700',
  },
  {
-    username: 'platform_manager',
+    email: 'manager@platform.com',
    password: 'test123',
    role: 'PLATFORM_MANAGER',
    label: 'Platform Manager',
    color: 'bg-blue-600 hover:bg-blue-700',
  },
  {
-    username: 'platform_sales',
+    email: 'sales@platform.com',
    password: 'test123',
    role: 'PLATFORM_SALES',
    label: 'Platform Sales',
    color: 'bg-green-600 hover:bg-green-700',
  },
  {
-    username: 'platform_support',
+    email: 'support@platform.com',
    password: 'test123',
    role: 'PLATFORM_SUPPORT',
    label: 'Platform Support',
    color: 'bg-yellow-600 hover:bg-yellow-700',
  },
  {
-    username: 'tenant_owner',
+    email: 'owner@demo.com',
    password: 'test123',
    role: 'TENANT_OWNER',
    label: 'Business Owner',
    color: 'bg-indigo-600 hover:bg-indigo-700',
  },
  {
-    username: 'tenant_manager',
+    email: 'manager@demo.com',
    password: 'test123',
    role: 'TENANT_MANAGER',
    label: 'Business Manager',
    color: 'bg-pink-600 hover:bg-pink-700',
  },
  {
-    username: 'tenant_staff',
+    email: 'staff@demo.com',
    password: 'test123',
    role: 'TENANT_STAFF',
    label: 'Staff Member',
    color: 'bg-teal-600 hover:bg-teal-700',
  },
  {
-    username: 'customer',
+    email: 'customer@demo.com',
    password: 'test123',
    role: 'CUSTOMER',
    label: 'Customer',
@@ -85,19 +86,22 @@ export function DevQuickLogin({ embedded = false }: DevQuickLoginProps) {
  }

  const handleQuickLogin = async (user: TestUser) => {
-    setLoading(user.username);
+    setLoading(user.email);
    try {
-      // Call token auth API
-      const response = await apiClient.post('/api/auth-token/', {
-        username: user.username,
+      // Call custom login API that supports email login
+      const response = await apiClient.post('/auth/login/', {
+        email: user.email,
        password: user.password,
      });

      // Store token in cookie (use 'access_token' to match what client.ts expects)
-      setCookie('access_token', response.data.token, 7);
+      setCookie('access_token', response.data.access, 7);
+
+      // Clear any existing masquerade stack - this is a fresh login
+      localStorage.removeItem('masquerade_stack');

      // Fetch user data to determine redirect
-      const userResponse = await apiClient.get('/api/auth/me/');
+      const userResponse = await apiClient.get('/auth/me/');
      const userData = userResponse.data;

      // Determine the correct subdomain based on user role
@@ -115,13 +119,13 @@ export function DevQuickLogin({ embedded = false }: DevQuickLoginProps) {
      }

      // Check if we need to redirect to a different subdomain
-      const isOnTargetSubdomain = currentHostname === `${targetSubdomain}.lvh.me`;
+      const baseDomain = getBaseDomain();
+      const isOnTargetSubdomain = currentHostname === (targetSubdomain ? `${targetSubdomain}.${baseDomain}` : baseDomain);
      const needsRedirect = targetSubdomain && !isOnTargetSubdomain;

      if (needsRedirect) {
        // Redirect to the correct subdomain
-        const portStr = currentPort ? `:${currentPort}` : '';
-        window.location.href = `http://${targetSubdomain}.lvh.me${portStr}/`;
+        window.location.href = buildSubdomainUrl(targetSubdomain, '/');
        return;
      }

@@ -172,12 +176,12 @@ export function DevQuickLogin({ embedded = false }: DevQuickLoginProps) {
      <div className="grid grid-cols-2 gap-2">
        {testUsers.map((user) => (
          <button
-            key={user.username}
+            key={user.email}
            onClick={() => handleQuickLogin(user)}
            disabled={loading !== null}
            className={`${user.color} text-white px-3 py-2 rounded text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed`}
          >
-            {loading === user.username ? (
+            {loading === user.email ? (
              <span className="flex items-center justify-center">
                <svg className="animate-spin h-4 w-4 mr-2" viewBox="0 0 24 24">
                  <circle
--- a/frontend/src/components/DomainPurchase.tsx
+++ b/frontend/src/components/DomainPurchase.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
  Search,
  Globe,
@@ -26,6 +27,7 @@ interface DomainPurchaseProps {
 type Step = 'search' | 'details' | 'confirm';

 const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
+  const { t } = useTranslation();
  const [step, setStep] = useState<Step>('search');
  const [searchQuery, setSearchQuery] = useState('');
  const [searchResults, setSearchResults] = useState<DomainAvailability[]>([]);
@@ -138,7 +140,7 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
          >
            1
          </div>
-          <span className="text-sm font-medium">Search</span>
+          <span className="text-sm font-medium">{t('common.search')}</span>
        </div>
        <ChevronRight className="h-4 w-4 text-gray-400" />
        <div
@@ -155,7 +157,7 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
          >
            2
          </div>
-          <span className="text-sm font-medium">Details</span>
+          <span className="text-sm font-medium">{t('settings.domain.details')}</span>
        </div>
        <ChevronRight className="h-4 w-4 text-gray-400" />
        <div
@@ -172,7 +174,7 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
          >
            3
          </div>
-          <span className="text-sm font-medium">Confirm</span>
+          <span className="text-sm font-medium">{t('common.confirm')}</span>
        </div>
      </div>

@@ -186,7 +188,7 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
                type="text"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
-                placeholder="Enter domain name or keyword..."
+                placeholder={t('settings.domain.searchPlaceholder')}
                className="w-full pl-10 pr-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
              />
            </div>
@@ -200,14 +202,14 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
              ) : (
                <Search className="h-5 w-5" />
              )}
-              Search
+              {t('common.search')}
            </button>
          </form>

          {/* Search Results */}
          {searchResults.length > 0 && (
            <div className="space-y-3">
-              <h4 className="font-medium text-gray-900 dark:text-white">Search Results</h4>
+              <h4 className="font-medium text-gray-900 dark:text-white">{t('payments.searchResults')}</h4>
              <div className="space-y-2">
                {searchResults.map((result) => (
                  <div
@@ -230,7 +232,7 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
                        </span>
                        {result.premium && (
                          <span className="ml-2 px-2 py-0.5 text-xs bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400 rounded">
-                            Premium
+                            {t('settings.domain.premium')}
                          </span>
                        )}
                      </div>
@@ -246,12 +248,12 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
                            className="px-4 py-2 bg-brand-600 text-white text-sm rounded-lg hover:bg-brand-700 flex items-center gap-2"
                          >
                            <ShoppingCart className="h-4 w-4" />
-                            Select
+                            {t('settings.domain.select')}
                          </button>
                        </>
                      )}
                      {!result.available && (
-                        <span className="text-sm text-gray-500 dark:text-gray-400">Unavailable</span>
+                        <span className="text-sm text-gray-500 dark:text-gray-400">{t('settings.domain.unavailable')}</span>
                      )}
                    </div>
                  </div>
@@ -264,7 +266,7 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
          {registeredDomains && registeredDomains.length > 0 && (
            <div className="mt-8 pt-6 border-t border-gray-100 dark:border-gray-700">
              <h4 className="font-medium text-gray-900 dark:text-white mb-4">
-                Your Registered Domains
+                {t('settings.domain.yourRegisteredDomains')}
              </h4>
              <div className="space-y-2">
                {registeredDomains.map((domain) => (
@@ -289,7 +291,7 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
                    </div>
                    {domain.expires_at && (
                      <span className="text-sm text-gray-500 dark:text-gray-400">
-                        Expires: {new Date(domain.expires_at).toLocaleDateString()}
+                        {t('settings.domain.expires')}: {new Date(domain.expires_at).toLocaleDateString()}
                      </span>
                    )}
                  </div>
@@ -316,7 +318,7 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
                onClick={() => setStep('search')}
                className="text-sm text-brand-600 dark:text-brand-400 hover:underline"
              >
-                Change
+                {t('settings.domain.change')}
              </button>
            </div>
          </div>
@@ -325,7 +327,7 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                Registration Period
+                {t('payments.registrationPeriod')}
              </label>
              <select
                value={years}
@@ -334,7 +336,7 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
              >
                {[1, 2, 3, 5, 10].map((y) => (
                  <option key={y} value={y}>
-                    {y} {y === 1 ? 'year' : 'years'} - $
+                    {y} {y === 1 ? t('settings.domain.year') : t('settings.domain.years')} - $
                    {((selectedDomain.premium_price || selectedDomain.price || 0) * y).toFixed(2)}
                  </option>
                ))}
@@ -355,10 +357,10 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
                <Shield className="h-5 w-5 text-gray-400" />
                <div>
                  <span className="text-gray-900 dark:text-white font-medium">
-                    WHOIS Privacy Protection
+                    {t('settings.domain.whoisPrivacy')}
                  </span>
                  <p className="text-sm text-gray-500 dark:text-gray-400">
-                    Hide your personal information from public WHOIS lookups
+                    {t('settings.domain.whoisPrivacyDesc')}
                  </p>
                </div>
              </div>
@@ -374,9 +376,9 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
              <div className="flex items-center gap-2">
                <RefreshCw className="h-5 w-5 text-gray-400" />
                <div>
-                  <span className="text-gray-900 dark:text-white font-medium">Auto-Renewal</span>
+                  <span className="text-gray-900 dark:text-white font-medium">{t('settings.domain.autoRenewal')}</span>
                  <p className="text-sm text-gray-500 dark:text-gray-400">
-                    Automatically renew this domain before it expires
+                    {t('settings.domain.autoRenewalDesc')}
                  </p>
                </div>
              </div>
@@ -393,10 +395,10 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
                <Globe className="h-5 w-5 text-gray-400" />
                <div>
                  <span className="text-gray-900 dark:text-white font-medium">
-                    Auto-configure as Custom Domain
+                    {t('settings.domain.autoConfigure')}
                  </span>
                  <p className="text-sm text-gray-500 dark:text-gray-400">
-                    Automatically set up this domain for your business
+                    {t('settings.domain.autoConfigureDesc')}
                  </p>
                </div>
              </div>
@@ -406,12 +408,12 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
          {/* Contact Information */}
          <div className="pt-6 border-t border-gray-100 dark:border-gray-700">
            <h4 className="font-medium text-gray-900 dark:text-white mb-4">
-              Registrant Information
+              {t('settings.domain.registrantInfo')}
            </h4>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                  First Name *
+                  {t('settings.domain.firstName')} *
                </label>
                <input
                  type="text"
@@ -423,7 +425,7 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                  Last Name *
+                  {t('settings.domain.lastName')} *
                </label>
                <input
                  type="text"
@@ -435,7 +437,7 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                  Email *
+                  {t('customers.email')} *
                </label>
                <input
                  type="email"
@@ -447,7 +449,7 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                  Phone *
+                  {t('customers.phone')} *
                </label>
                <input
                  type="tel"
@@ -460,7 +462,7 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
              </div>
              <div className="md:col-span-2">
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                  Address *
+                  {t('customers.address')} *
                </label>
                <input
                  type="text"
@@ -472,7 +474,7 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                  City *
+                  {t('customers.city')} *
                </label>
                <input
                  type="text"
@@ -484,7 +486,7 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                  State/Province *
+                  {t('settings.domain.stateProvince')} *
                </label>
                <input
                  type="text"
@@ -496,7 +498,7 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                  ZIP/Postal Code *
+                  {t('settings.domain.zipPostalCode')} *
                </label>
                <input
                  type="text"
@@ -508,19 +510,19 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                  Country *
+                  {t('settings.domain.country')} *
                </label>
                <select
                  value={contact.country}
                  onChange={(e) => updateContact('country', e.target.value)}
                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                >
-                  <option value="US">United States</option>
-                  <option value="CA">Canada</option>
-                  <option value="GB">United Kingdom</option>
-                  <option value="AU">Australia</option>
-                  <option value="DE">Germany</option>
-                  <option value="FR">France</option>
+                  <option value="US">{t('settings.domain.countries.us')}</option>
+                  <option value="CA">{t('settings.domain.countries.ca')}</option>
+                  <option value="GB">{t('settings.domain.countries.gb')}</option>
+                  <option value="AU">{t('settings.domain.countries.au')}</option>
+                  <option value="DE">{t('settings.domain.countries.de')}</option>
+                  <option value="FR">{t('settings.domain.countries.fr')}</option>
                </select>
              </div>
            </div>
@@ -532,14 +534,14 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
              onClick={() => setStep('search')}
              className="px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"
            >
-              Back
+              {t('common.back')}
            </button>
            <button
              onClick={() => setStep('confirm')}
              disabled={!isContactValid()}
              className="px-6 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 disabled:opacity-50 disabled:cursor-not-allowed"
            >
-              Continue
+              {t('settings.domain.continue')}
            </button>
          </div>
        </div>
@@ -548,36 +550,36 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
      {/* Step 3: Confirm */}
      {step === 'confirm' && selectedDomain && (
        <div className="space-y-6">
-          <h4 className="font-medium text-gray-900 dark:text-white">Order Summary</h4>
+          <h4 className="font-medium text-gray-900 dark:text-white">{t('payments.orderSummary')}</h4>

          <div className="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-4 space-y-3">
            <div className="flex justify-between">
-              <span className="text-gray-600 dark:text-gray-400">Domain</span>
+              <span className="text-gray-600 dark:text-gray-400">{t('settings.domain.domain')}</span>
              <span className="font-medium text-gray-900 dark:text-white">
                {selectedDomain.domain}
              </span>
            </div>
            <div className="flex justify-between">
-              <span className="text-gray-600 dark:text-gray-400">Registration Period</span>
+              <span className="text-gray-600 dark:text-gray-400">{t('payments.registrationPeriod')}</span>
              <span className="font-medium text-gray-900 dark:text-white">
-                {years} {years === 1 ? 'year' : 'years'}
+                {years} {years === 1 ? t('settings.domain.year') : t('settings.domain.years')}
              </span>
            </div>
            <div className="flex justify-between">
-              <span className="text-gray-600 dark:text-gray-400">WHOIS Privacy</span>
+              <span className="text-gray-600 dark:text-gray-400">{t('settings.domain.whoisPrivacy')}</span>
              <span className="font-medium text-gray-900 dark:text-white">
-                {whoisPrivacy ? 'Enabled' : 'Disabled'}
+                {whoisPrivacy ? t('platform.settings.enabled') : t('platform.settings.none')}
              </span>
            </div>
            <div className="flex justify-between">
-              <span className="text-gray-600 dark:text-gray-400">Auto-Renewal</span>
+              <span className="text-gray-600 dark:text-gray-400">{t('settings.domain.autoRenewal')}</span>
              <span className="font-medium text-gray-900 dark:text-white">
-                {autoRenew ? 'Enabled' : 'Disabled'}
+                {autoRenew ? t('platform.settings.enabled') : t('platform.settings.none')}
              </span>
            </div>
            <div className="pt-3 border-t border-gray-200 dark:border-gray-700">
              <div className="flex justify-between">
-                <span className="font-semibold text-gray-900 dark:text-white">Total</span>
+                <span className="font-semibold text-gray-900 dark:text-white">{t('settings.domain.total')}</span>
                <span className="font-bold text-xl text-brand-600 dark:text-brand-400">
                  ${getPrice().toFixed(2)}
                </span>
@@ -587,7 +589,7 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {

          {/* Registrant Summary */}
          <div className="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-4">
-            <h5 className="font-medium text-gray-900 dark:text-white mb-2">Registrant</h5>
+            <h5 className="font-medium text-gray-900 dark:text-white mb-2">{t('settings.domain.registrant')}</h5>
            <p className="text-sm text-gray-600 dark:text-gray-400">
              {contact.first_name} {contact.last_name}
              <br />
@@ -602,7 +604,7 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
          {registerMutation.isError && (
            <div className="flex items-center gap-2 p-4 bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-400 rounded-lg">
              <AlertCircle className="h-5 w-5" />
-              <span>Registration failed. Please try again.</span>
+              <span>{t('payments.registrationFailed')}</span>
            </div>
          )}

@@ -612,7 +614,7 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
              onClick={() => setStep('details')}
              className="px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"
            >
-              Back
+              {t('common.back')}
            </button>
            <button
              onClick={handlePurchase}
@@ -624,7 +626,7 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
              ) : (
                <ShoppingCart className="h-5 w-5" />
              )}
-              Complete Purchase
+              {t('settings.domain.completePurchase')}
            </button>
          </div>
        </div>
--- a/frontend/src/components/EditTaskModal.tsx
+++ b/frontend/src/components/EditTaskModal.tsx
@@ -167,7 +167,7 @@ const EditTaskModal: React.FC<EditTaskModalProps> = ({ task, isOpen, onClose, on
        }
      }

-      await axios.patch(`/api/scheduled-tasks/${task.id}/`, payload);
+      await axios.patch(`/scheduled-tasks/${task.id}/`, payload);
      onSuccess();
      handleClose();
    } catch (err: any) {
--- a/frontend/src/components/EmailTemplateForm.tsx
+++ b/frontend/src/components/EmailTemplateForm.tsx
@@ -11,10 +11,13 @@ import {
  Smartphone,
  Plus,
  AlertTriangle,
-  ChevronDown
+  ChevronDown,
+  Sparkles,
+  Check
 } from 'lucide-react';
 import api from '../api/client';
 import { EmailTemplate, EmailTemplateCategory, EmailTemplateVariableGroup } from '../types';
+import EmailTemplatePresetSelector from './EmailTemplatePresetSelector';

 interface EmailTemplateFormProps {
  template?: EmailTemplate | null;
@@ -44,12 +47,21 @@ const EmailTemplateForm: React.FC<EmailTemplateFormProps> = ({
  const [previewDevice, setPreviewDevice] = useState<'desktop' | 'mobile'>('desktop');
  const [showPreview, setShowPreview] = useState(false);
  const [showVariables, setShowVariables] = useState(false);
+  const [showPresetSelector, setShowPresetSelector] = useState(false);
+  const [showTwoVersionsWarning, setShowTwoVersionsWarning] = useState(() => {
+    // Check localStorage to see if user has dismissed the warning
+    try {
+      return localStorage.getItem('emailTemplates_twoVersionsWarning_dismissed') !== 'true';
+    } catch {
+      return true;
+    }
+  });

  // Fetch available variables
  const { data: variablesData } = useQuery<{ variables: EmailTemplateVariableGroup[] }>({
    queryKey: ['email-template-variables'],
    queryFn: async () => {
-      const { data } = await api.get('/api/email-templates/variables/');
+      const { data } = await api.get('/email-templates/variables/');
      return data;
    },
  });
@@ -57,7 +69,7 @@ const EmailTemplateForm: React.FC<EmailTemplateFormProps> = ({
  // Preview mutation
  const previewMutation = useMutation({
    mutationFn: async () => {
-      const { data } = await api.post('/api/email-templates/preview/', {
+      const { data } = await api.post('/email-templates/preview/', {
        subject,
        html_content: htmlContent,
        text_content: textContent,
@@ -80,10 +92,10 @@ const EmailTemplateForm: React.FC<EmailTemplateFormProps> = ({
      };

      if (isEditing && template) {
-        const { data } = await api.patch(`/api/email-templates/${template.id}/`, payload);
+        const { data } = await api.patch(`/email-templates/${template.id}/`, payload);
        return data;
      } else {
-        const { data } = await api.post('/api/email-templates/', payload);
+        const { data } = await api.post('/email-templates/', payload);
        return data;
      }
    },
@@ -105,6 +117,24 @@ const EmailTemplateForm: React.FC<EmailTemplateFormProps> = ({
    }
  };

+  const handlePresetSelect = (preset: any) => {
+    setName(preset.name);
+    setDescription(preset.description);
+    setSubject(preset.subject);
+    setHtmlContent(preset.html_content);
+    setTextContent(preset.text_content);
+    setShowPresetSelector(false);
+  };
+
+  const handleDismissTwoVersionsWarning = () => {
+    setShowTwoVersionsWarning(false);
+    try {
+      localStorage.setItem('emailTemplates_twoVersionsWarning_dismissed', 'true');
+    } catch {
+      // Ignore localStorage errors
+    }
+  };
+
  const categories: { value: EmailTemplateCategory; label: string }[] = [
    { value: 'APPOINTMENT', label: t('emailTemplates.categoryAppointment', 'Appointment') },
    { value: 'REMINDER', label: t('emailTemplates.categoryReminder', 'Reminder') },
@@ -137,6 +167,23 @@ const EmailTemplateForm: React.FC<EmailTemplateFormProps> = ({

        {/* Modal Body */}
        <div className="flex-1 overflow-y-auto p-6">
+          {/* Choose from Preset Button */}
+          {!isEditing && (
+            <div className="mb-6">
+              <button
+                type="button"
+                onClick={() => setShowPresetSelector(true)}
+                className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-lg hover:from-purple-700 hover:to-pink-700 transition-all shadow-md hover:shadow-lg font-medium"
+              >
+                <Sparkles className="h-5 w-5" />
+                {t('emailTemplates.chooseFromPreset', 'Choose from Pre-designed Templates')}
+              </button>
+              <p className="text-xs text-gray-500 dark:text-gray-400 text-center mt-2">
+                {t('emailTemplates.presetHint', 'Start with a professionally designed template and customize it to your needs')}
+              </p>
+            </div>
+          )}
+
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            {/* Left Column - Form */}
            <div className="space-y-4">
@@ -245,12 +292,37 @@ const EmailTemplateForm: React.FC<EmailTemplateFormProps> = ({

              {/* Content Tabs */}
              <div>
+                {/* Info callout about HTML and Text versions */}
+                {showTwoVersionsWarning && (
+                  <div className="mb-4 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+                    <div className="flex items-start gap-3">
+                      <AlertTriangle className="h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" />
+                      <div className="flex-1">
+                        <h4 className="text-sm font-semibold text-blue-900 dark:text-blue-300 mb-1">
+                          {t('emailTemplates.twoVersionsRequired', 'Please edit both email versions')}
+                        </h4>
+                        <p className="text-xs text-blue-800 dark:text-blue-300 leading-relaxed mb-3">
+                          {t('emailTemplates.twoVersionsExplanation', 'Your customers will receive one of two versions of this email depending on their email client. Edit both the HTML version (rich formatting) and the Plain Text version (simple text) below. Make sure both versions include the same information so all your customers get the complete message.')}
+                        </p>
+                        <button
+                          type="button"
+                          onClick={handleDismissTwoVersionsWarning}
+                          className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-blue-600 dark:bg-blue-500 text-white text-xs font-medium rounded hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors"
+                        >
+                          <Check className="h-3.5 w-3.5" />
+                          {t('emailTemplates.iUnderstand', 'I Understand')}
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                )}
+
                <div className="flex items-center gap-4 mb-2">
                  <div className="flex rounded-lg overflow-hidden border border-gray-300 dark:border-gray-600">
                    <button
                      type="button"
                      onClick={() => setActiveTab('html')}
-                      className={`px-4 py-2 text-sm font-medium flex items-center gap-2 ${
+                      className={`px-4 py-2 text-sm font-medium flex items-center gap-2 relative ${
                        activeTab === 'html'
                          ? 'bg-brand-600 text-white'
                          : 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600'
@@ -258,11 +330,14 @@ const EmailTemplateForm: React.FC<EmailTemplateFormProps> = ({
                    >
                      <Code className="h-4 w-4" />
                      HTML
+                      {!htmlContent.trim() && (
+                        <span className="absolute -top-1 -right-1 h-2 w-2 bg-red-500 rounded-full"></span>
+                      )}
                    </button>
                    <button
                      type="button"
                      onClick={() => setActiveTab('text')}
-                      className={`px-4 py-2 text-sm font-medium flex items-center gap-2 ${
+                      className={`px-4 py-2 text-sm font-medium flex items-center gap-2 relative ${
                        activeTab === 'text'
                          ? 'bg-brand-600 text-white'
                          : 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600'
@@ -270,6 +345,9 @@ const EmailTemplateForm: React.FC<EmailTemplateFormProps> = ({
                    >
                      <FileText className="h-4 w-4" />
                      Text
+                      {!textContent.trim() && (
+                        <span className="absolute -top-1 -right-1 h-2 w-2 bg-red-500 rounded-full"></span>
+                      )}
                    </button>
                  </div>

@@ -448,6 +526,15 @@ const EmailTemplateForm: React.FC<EmailTemplateFormProps> = ({
            )}
          </button>
        </div>
+
+        {/* Preset Selector Modal */}
+        {showPresetSelector && (
+          <EmailTemplatePresetSelector
+            category={category}
+            onSelect={handlePresetSelect}
+            onClose={() => setShowPresetSelector(false)}
+          />
+        )}
      </div>
    </div>
  );
--- a/frontend/src/components/EmailTemplatePresetSelector.tsx
+++ b/frontend/src/components/EmailTemplatePresetSelector.tsx
@@ -0,0 +1,292 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useQuery } from '@tanstack/react-query';
+import {
+  X,
+  Search,
+  Eye,
+  Check,
+  Sparkles,
+  Smile,
+  Minus,
+  ChevronRight
+} from 'lucide-react';
+import api from '../api/client';
+import { EmailTemplateCategory } from '../types';
+
+interface TemplatePreset {
+  name: string;
+  description: string;
+  style: string;
+  subject: string;
+  html_content: string;
+  text_content: string;
+}
+
+interface PresetsResponse {
+  presets: Record<EmailTemplateCategory, TemplatePreset[]>;
+}
+
+interface EmailTemplatePresetSelectorProps {
+  category: EmailTemplateCategory;
+  onSelect: (preset: TemplatePreset) => void;
+  onClose: () => void;
+}
+
+const styleIcons: Record<string, React.ReactNode> = {
+  professional: <Sparkles className="h-4 w-4" />,
+  friendly: <Smile className="h-4 w-4" />,
+  minimalist: <Minus className="h-4 w-4" />,
+};
+
+const styleColors: Record<string, string> = {
+  professional: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
+  friendly: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300',
+  minimalist: 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300',
+};
+
+const EmailTemplatePresetSelector: React.FC<EmailTemplatePresetSelectorProps> = ({
+  category,
+  onSelect,
+  onClose,
+}) => {
+  const { t } = useTranslation();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedPreview, setSelectedPreview] = useState<TemplatePreset | null>(null);
+  const [selectedStyle, setSelectedStyle] = useState<string>('all');
+
+  // Fetch presets
+  const { data: presetsData, isLoading } = useQuery<PresetsResponse>({
+    queryKey: ['email-template-presets'],
+    queryFn: async () => {
+      const { data } = await api.get('/email-templates/presets/');
+      return data;
+    },
+  });
+
+  const presets = presetsData?.presets[category] || [];
+
+  // Filter presets
+  const filteredPresets = presets.filter(preset => {
+    const matchesSearch = searchQuery.trim() === '' ||
+      preset.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      preset.description.toLowerCase().includes(searchQuery.toLowerCase());
+
+    const matchesStyle = selectedStyle === 'all' || preset.style === selectedStyle;
+
+    return matchesSearch && matchesStyle;
+  });
+
+  // Get unique styles from presets
+  const availableStyles = Array.from(new Set(presets.map(p => p.style)));
+
+  const handleSelectPreset = (preset: TemplatePreset) => {
+    onSelect(preset);
+    onClose();
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
+      <div className="bg-white dark:bg-gray-800 rounded-xl shadow-xl max-w-6xl w-full max-h-[90vh] overflow-hidden flex flex-col">
+        {/* Header */}
+        <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
+          <div>
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+              {t('emailTemplates.selectPreset', 'Choose a Template')}
+            </h3>
+            <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+              {t('emailTemplates.presetDescription', 'Select a pre-designed template to customize')}
+            </p>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        {/* Search and Filters */}
+        <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50">
+          <div className="flex flex-col sm:flex-row gap-3">
+            {/* Search */}
+            <div className="flex-1 relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
+              <input
+                type="text"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder={t('emailTemplates.searchPresets', 'Search templates...')}
+                className="w-full pl-9 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
+              />
+            </div>
+
+            {/* Style Filter */}
+            <div className="flex gap-2">
+              <button
+                onClick={() => setSelectedStyle('all')}
+                className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+                  selectedStyle === 'all'
+                    ? 'bg-brand-600 text-white'
+                    : 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600'
+                }`}
+              >
+                All Styles
+              </button>
+              {availableStyles.map(style => (
+                <button
+                  key={style}
+                  onClick={() => setSelectedStyle(style)}
+                  className={`flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+                    selectedStyle === style
+                      ? 'bg-brand-600 text-white'
+                      : 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600'
+                  }`}
+                >
+                  {styleIcons[style]}
+                  <span className="capitalize">{style}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto p-6">
+          {isLoading ? (
+            <div className="flex items-center justify-center h-64">
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-brand-600"></div>
+            </div>
+          ) : filteredPresets.length === 0 ? (
+            <div className="text-center py-12">
+              <p className="text-gray-500 dark:text-gray-400">
+                {t('emailTemplates.noPresets', 'No templates found matching your criteria')}
+              </p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              {filteredPresets.map((preset, index) => (
+                <div
+                  key={index}
+                  className="bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg overflow-hidden hover:shadow-lg transition-shadow cursor-pointer group"
+                >
+                  {/* Preview Image Placeholder */}
+                  <div className="h-40 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-600 dark:to-gray-700 relative overflow-hidden">
+                    <div className="absolute inset-0 flex items-center justify-center">
+                      <iframe
+                        srcDoc={preset.html_content}
+                        className="w-full h-full pointer-events-none transform scale-50 origin-top-left"
+                        style={{ width: '200%', height: '200%' }}
+                        title={preset.name}
+                        sandbox="allow-same-origin"
+                      />
+                    </div>
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end justify-center pb-4">
+                      <button
+                        onClick={() => setSelectedPreview(preset)}
+                        className="flex items-center gap-2 px-3 py-1.5 bg-white/90 dark:bg-gray-800/90 text-gray-900 dark:text-white rounded-lg text-sm font-medium"
+                      >
+                        <Eye className="h-4 w-4" />
+                        Preview
+                      </button>
+                    </div>
+                  </div>
+
+                  {/* Info */}
+                  <div className="p-4">
+                    <div className="flex items-start justify-between mb-2">
+                      <h4 className="text-sm font-semibold text-gray-900 dark:text-white line-clamp-1">
+                        {preset.name}
+                      </h4>
+                      <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium ${styleColors[preset.style] || styleColors.professional}`}>
+                        {styleIcons[preset.style]}
+                        <span className="capitalize">{preset.style}</span>
+                      </span>
+                    </div>
+                    <p className="text-xs text-gray-600 dark:text-gray-400 mb-3 line-clamp-2">
+                      {preset.description}
+                    </p>
+                    <button
+                      onClick={() => handleSelectPreset(preset)}
+                      className="w-full flex items-center justify-center gap-2 px-3 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors text-sm font-medium"
+                    >
+                      <Check className="h-4 w-4" />
+                      Use This Template
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Preview Modal */}
+        {selectedPreview && (
+          <div className="fixed inset-0 z-60 flex items-center justify-center bg-black/70 backdrop-blur-sm p-4">
+            <div className="bg-white dark:bg-gray-800 rounded-xl shadow-xl max-w-4xl w-full max-h-[90vh] overflow-hidden flex flex-col">
+              <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
+                <div>
+                  <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+                    {selectedPreview.name}
+                  </h3>
+                  <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+                    {selectedPreview.description}
+                  </p>
+                </div>
+                <button
+                  onClick={() => setSelectedPreview(null)}
+                  className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
+                >
+                  <X className="h-5 w-5" />
+                </button>
+              </div>
+
+              <div className="flex-1 overflow-y-auto p-6">
+                <div className="mb-4">
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Subject
+                  </label>
+                  <div className="p-3 bg-gray-100 dark:bg-gray-700 rounded-lg text-gray-900 dark:text-white text-sm">
+                    {selectedPreview.subject}
+                  </div>
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Preview
+                  </label>
+                  <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
+                    <iframe
+                      srcDoc={selectedPreview.html_content}
+                      className="w-full h-96 bg-white"
+                      title="Template Preview"
+                      sandbox="allow-same-origin"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <div className="px-6 py-4 bg-gray-50 dark:bg-gray-900/50 border-t border-gray-200 dark:border-gray-700 flex justify-end gap-3">
+                <button
+                  onClick={() => setSelectedPreview(null)}
+                  className="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors font-medium"
+                >
+                  Close
+                </button>
+                <button
+                  onClick={() => handleSelectPreset(selectedPreview)}
+                  className="flex items-center gap-2 px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors font-medium"
+                >
+                  <Check className="h-4 w-4" />
+                  Use This Template
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default EmailTemplatePresetSelector;
--- a/frontend/src/components/EmailTemplateSelector.tsx
+++ b/frontend/src/components/EmailTemplateSelector.tsx
@@ -32,7 +32,7 @@ const EmailTemplateSelector: React.FC<EmailTemplateSelectorProps> = ({
    queryFn: async () => {
      const params = new URLSearchParams();
      if (category) params.append('category', category);
-      const { data } = await api.get(`/api/email-templates/?${params.toString()}`);
+      const { data } = await api.get(`/email-templates/?${params.toString()}`);
      return data.map((t: any) => ({
        id: String(t.id),
        name: t.name,
--- a/frontend/src/components/EventAutomations.tsx
+++ b/frontend/src/components/EventAutomations.tsx
@@ -72,7 +72,7 @@ const EventAutomations: React.FC<EventAutomationsProps> = ({ eventId, compact =
  const { data: plugins = [] } = useQuery<PluginInstallation[]>({
    queryKey: ['plugin-installations'],
    queryFn: async () => {
-      const { data } = await axios.get('/api/plugin-installations/');
+      const { data } = await axios.get('/plugin-installations/');
      return data;
    },
  });
@@ -81,7 +81,7 @@ const EventAutomations: React.FC<EventAutomationsProps> = ({ eventId, compact =
  const { data: eventPlugins = [], isLoading } = useQuery<EventPlugin[]>({
    queryKey: ['event-plugins', eventId],
    queryFn: async () => {
-      const { data } = await axios.get(`/api/event-plugins/?event_id=${eventId}`);
+      const { data } = await axios.get(`/event-plugins/?event_id=${eventId}`);
      return data;
    },
    enabled: !!eventId,
@@ -90,7 +90,7 @@ const EventAutomations: React.FC<EventAutomationsProps> = ({ eventId, compact =
  // Add plugin mutation
  const addMutation = useMutation({
    mutationFn: async (data: { plugin_installation: string; trigger: string; offset_minutes: number }) => {
-      return axios.post('/api/event-plugins/', {
+      return axios.post('/event-plugins/', {
        event: eventId,
        ...data,
      });
@@ -111,7 +111,7 @@ const EventAutomations: React.FC<EventAutomationsProps> = ({ eventId, compact =
  // Toggle mutation
  const toggleMutation = useMutation({
    mutationFn: async (pluginId: string) => {
-      return axios.post(`/api/event-plugins/${pluginId}/toggle/`);
+      return axios.post(`/event-plugins/${pluginId}/toggle/`);
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['event-plugins', eventId] });
@@ -121,7 +121,7 @@ const EventAutomations: React.FC<EventAutomationsProps> = ({ eventId, compact =
  // Delete mutation
  const deleteMutation = useMutation({
    mutationFn: async (pluginId: string) => {
-      return axios.delete(`/api/event-plugins/${pluginId}/`);
+      return axios.delete(`/event-plugins/${pluginId}/`);
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['event-plugins', eventId] });
--- a/frontend/src/components/FloatingHelpButton.tsx
+++ b/frontend/src/components/FloatingHelpButton.tsx
@@ -0,0 +1,98 @@
+/**
+ * FloatingHelpButton Component
+ *
+ * A floating help button fixed in the top-right corner of the screen.
+ * Automatically determines the help path based on the current route.
+ */
+
+import React from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { HelpCircle } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+// Map routes to their help paths
+const routeToHelpPath: Record<string, string> = {
+  '/': '/help/dashboard',
+  '/dashboard': '/help/dashboard',
+  '/scheduler': '/help/scheduler',
+  '/tasks': '/help/tasks',
+  '/customers': '/help/customers',
+  '/services': '/help/services',
+  '/resources': '/help/resources',
+  '/staff': '/help/staff',
+  '/time-blocks': '/help/time-blocks',
+  '/my-availability': '/help/time-blocks',
+  '/messages': '/help/messages',
+  '/tickets': '/help/ticketing',
+  '/payments': '/help/payments',
+  '/contracts': '/help/contracts',
+  '/contracts/templates': '/help/contracts',
+  '/plugins': '/help/plugins',
+  '/plugins/marketplace': '/help/plugins',
+  '/plugins/my-plugins': '/help/plugins',
+  '/plugins/create': '/help/plugins/create',
+  '/settings': '/help/settings/general',
+  '/settings/general': '/help/settings/general',
+  '/settings/resource-types': '/help/settings/resource-types',
+  '/settings/booking': '/help/settings/booking',
+  '/settings/appearance': '/help/settings/appearance',
+  '/settings/email': '/help/settings/email',
+  '/settings/domains': '/help/settings/domains',
+  '/settings/api': '/help/settings/api',
+  '/settings/auth': '/help/settings/auth',
+  '/settings/billing': '/help/settings/billing',
+  '/settings/quota': '/help/settings/quota',
+  // Platform routes
+  '/platform/dashboard': '/help/dashboard',
+  '/platform/businesses': '/help/dashboard',
+  '/platform/users': '/help/staff',
+  '/platform/tickets': '/help/ticketing',
+};
+
+const FloatingHelpButton: React.FC = () => {
+  const { t } = useTranslation();
+  const location = useLocation();
+
+  // Get the help path for the current route
+  const getHelpPath = (): string => {
+    // Exact match first
+    if (routeToHelpPath[location.pathname]) {
+      return routeToHelpPath[location.pathname];
+    }
+
+    // Try matching with a prefix (for dynamic routes like /customers/:id)
+    const pathSegments = location.pathname.split('/').filter(Boolean);
+    if (pathSegments.length > 0) {
+      // Try progressively shorter paths
+      for (let i = pathSegments.length; i > 0; i--) {
+        const testPath = '/' + pathSegments.slice(0, i).join('/');
+        if (routeToHelpPath[testPath]) {
+          return routeToHelpPath[testPath];
+        }
+      }
+    }
+
+    // Default to the main help guide
+    return '/help';
+  };
+
+  const helpPath = getHelpPath();
+
+  // Don't show on help pages themselves
+  if (location.pathname.startsWith('/help')) {
+    return null;
+  }
+
+  return (
+    <Link
+      to={helpPath}
+      className="fixed top-20 right-4 z-50 inline-flex items-center justify-center w-10 h-10 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:text-brand-600 dark:hover:text-brand-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full shadow-lg border border-gray-200 dark:border-gray-700 transition-all duration-200 hover:scale-110"
+      title={t('common.help', 'Help')}
+      aria-label={t('common.help', 'Help')}
+    >
+      <HelpCircle size={20} />
+    </Link>
+  );
+};
+
+export default FloatingHelpButton;
--- a/frontend/src/components/HelpButton.tsx
+++ b/frontend/src/components/HelpButton.tsx
@@ -0,0 +1,33 @@
+/**
+ * HelpButton Component
+ *
+ * A contextual help button that appears at the top-right of pages
+ * and links to the relevant help documentation.
+ */
+
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { HelpCircle } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+interface HelpButtonProps {
+  helpPath: string;
+  className?: string;
+}
+
+const HelpButton: React.FC<HelpButtonProps> = ({ helpPath, className = '' }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Link
+      to={helpPath}
+      className={`inline-flex items-center gap-1.5 px-3 py-1.5 text-sm text-gray-500 dark:text-gray-400 hover:text-brand-600 dark:hover:text-brand-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors ${className}`}
+      title={t('common.help', 'Help')}
+    >
+      <HelpCircle size={18} />
+      <span className="hidden sm:inline">{t('common.help', 'Help')}</span>
+    </Link>
+  );
+};
+
+export default HelpButton;
--- a/frontend/src/components/MasqueradeBanner.tsx
+++ b/frontend/src/components/MasqueradeBanner.tsx
@@ -1,5 +1,6 @@

 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { Eye, XCircle } from 'lucide-react';
 import { User } from '../types';

@@ -11,8 +12,9 @@ interface MasqueradeBannerProps {
 }

 const MasqueradeBanner: React.FC<MasqueradeBannerProps> = ({ effectiveUser, originalUser, previousUser, onStop }) => {
-  
-  const buttonText = previousUser ? `Return to ${previousUser.name}` : 'Stop Masquerading';
+  const { t } = useTranslation();
+
+  const buttonText = previousUser ? t('platform.masquerade.returnTo', { name: previousUser.name }) : t('platform.masquerade.stopMasquerading');

  return (
    <div className="bg-orange-600 text-white px-4 py-2 shadow-md flex items-center justify-between z-50 relative">
@@ -21,9 +23,9 @@ const MasqueradeBanner: React.FC<MasqueradeBannerProps> = ({ effectiveUser, orig
          <Eye size={18} />
        </div>
        <span className="text-sm font-medium">
-          Masquerading as <strong>{effectiveUser.name}</strong> ({effectiveUser.role}) 
-          <span className="opacity-75 mx-2 text-xs">|</span> 
-          Logged in as {originalUser.name}
+          {t('platform.masquerade.masqueradingAs')} <strong>{effectiveUser.name}</strong> ({effectiveUser.role})
+          <span className="opacity-75 mx-2 text-xs">|</span>
+          {t('platform.masquerade.loggedInAs', { name: originalUser.name })}
        </span>
      </div>
      <button 
--- a/frontend/src/components/PaymentSettingsSection.tsx
+++ b/frontend/src/components/PaymentSettingsSection.tsx
@@ -5,6 +5,7 @@
 */

 import React from 'react';
+import { useNavigate } from 'react-router-dom';
 import {
  CreditCard,
  CheckCircle,
@@ -12,6 +13,8 @@ import {
  Loader2,
  FlaskConical,
  Zap,
+  ArrowUpRight,
+  Sparkles,
 } from 'lucide-react';
 import { Business } from '../types';
 import { usePaymentConfig } from '../hooks/usePayments';
@@ -25,6 +28,7 @@ interface PaymentSettingsSectionProps {
 type PaymentModeType = 'direct_api' | 'connect' | 'none';

 const PaymentSettingsSection: React.FC<PaymentSettingsSectionProps> = ({ business }) => {
+  const navigate = useNavigate();
  const { data: config, isLoading, error, refetch } = usePaymentConfig();

  if (isLoading) {
@@ -56,6 +60,8 @@ const PaymentSettingsSection: React.FC<PaymentSettingsSectionProps> = ({ busines
  }

  const paymentMode = (config?.payment_mode || 'none') as PaymentModeType;
+  const tierAllowsPayments = config?.tier_allows_payments || false;
+  const stripeConfigured = config?.stripe_configured || false;
  const canAcceptPayments = config?.can_accept_payments || false;
  const tier = config?.tier || business.plan || 'Free';
  const isFreeTier = tier === 'Free';
@@ -72,16 +78,24 @@ const PaymentSettingsSection: React.FC<PaymentSettingsSectionProps> = ({ busines

  // Status badge component
  const StatusBadge = () => {
+    if (!tierAllowsPayments) {
+      return (
+        <span className="flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-full">
+          <AlertCircle size={12} />
+          Upgrade Required
+        </span>
+      );
+    }
    if (canAcceptPayments) {
      return (
-        <span className="flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">
+        <span className="flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 rounded-full">
          <CheckCircle size={12} />
          Ready
        </span>
      );
    }
    return (
-      <span className="flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded-full">
+      <span className="flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300 rounded-full">
        <AlertCircle size={12} />
        Setup Required
      </span>
@@ -97,17 +111,17 @@ const PaymentSettingsSection: React.FC<PaymentSettingsSectionProps> = ({ busines
  };

  return (
-    <div className="bg-white rounded-lg shadow">
+    <div className="bg-white dark:bg-gray-800 rounded-lg shadow">
      {/* Header */}
-      <div className="p-6 border-b border-gray-200">
+      <div className="p-6 border-b border-gray-200 dark:border-gray-700">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
-            <div className="p-2 bg-purple-100 rounded-lg">
-              <CreditCard className="text-purple-600" size={24} />
+            <div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
+              <CreditCard className="text-purple-600 dark:text-purple-400" size={24} />
            </div>
            <div>
-              <h2 className="text-lg font-semibold text-gray-900">Payment Configuration</h2>
-              <p className="text-sm text-gray-500">{getModeDescription()}</p>
+              <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Payment Configuration</h2>
+              <p className="text-sm text-gray-500 dark:text-gray-400">{getModeDescription()}</p>
            </div>
          </div>
          <StatusBadge />
@@ -162,22 +176,22 @@ const PaymentSettingsSection: React.FC<PaymentSettingsSectionProps> = ({ busines
      {/* Content */}
      <div className="p-6">
        {/* Tier info banner */}
-        <div className="mb-6 p-4 bg-gray-50 rounded-lg">
+        <div className="mb-6 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
          <div className="flex items-center justify-between">
            <div>
-              <span className="text-sm text-gray-600">Current Plan:</span>
+              <span className="text-sm text-gray-600 dark:text-gray-400">Current Plan:</span>
              <span className={`ml-2 px-2 py-0.5 text-xs font-semibold rounded-full ${
-                tier === 'Enterprise' ? 'bg-purple-100 text-purple-800' :
-                tier === 'Business' ? 'bg-blue-100 text-blue-800' :
-                tier === 'Professional' ? 'bg-green-100 text-green-800' :
-                'bg-gray-100 text-gray-800'
+                tier === 'Enterprise' ? 'bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300' :
+                tier === 'Business' ? 'bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300' :
+                tier === 'Professional' ? 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300' :
+                'bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-gray-200'
              }`}>
                {tier}
              </span>
            </div>
-            <div className="text-sm text-gray-600">
+            <div className="text-sm text-gray-600 dark:text-gray-400">
              Payment Mode:{' '}
-              <span className="font-medium text-gray-900">
+              <span className="font-medium text-gray-900 dark:text-white">
                {paymentMode === 'direct_api' ? 'Direct API Keys' :
                 paymentMode === 'connect' ? 'Stripe Connect' :
                 'Not Configured'}
@@ -186,31 +200,86 @@ const PaymentSettingsSection: React.FC<PaymentSettingsSectionProps> = ({ busines
          </div>
        </div>

-        {/* Tier-specific content */}
-        {isFreeTier ? (
-          <StripeApiKeysForm
-            apiKeys={config?.api_keys || null}
-            onSuccess={() => refetch()}
-          />
-        ) : (
-          <ConnectOnboardingEmbed
-            connectAccount={config?.connect_account || null}
-            tier={tier}
-            onComplete={() => refetch()}
-          />
-        )}
-
-        {/* Upgrade notice for free tier with deprecated keys */}
-        {isFreeTier && config?.api_keys?.status === 'deprecated' && (
-          <div className="mt-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
-            <h4 className="font-medium text-blue-800 mb-1">
-              Upgraded to a Paid Plan?
-            </h4>
-            <p className="text-sm text-blue-700">
-              If you've recently upgraded, your API keys have been deprecated.
-              Please contact support to complete your Stripe Connect setup.
-            </p>
+        {/* Upgrade prompt when tier doesn't allow payments */}
+        {!tierAllowsPayments ? (
+          <div className="bg-gradient-to-br from-purple-50 to-indigo-50 border border-purple-200 rounded-xl p-6">
+            <div className="flex items-start gap-4">
+              <div className="p-3 bg-purple-100 rounded-xl">
+                <Sparkles className="text-purple-600" size={28} />
+              </div>
+              <div className="flex-1">
+                <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                  Unlock Online Payments
+                </h3>
+                <p className="text-gray-600 mb-4">
+                  Your current plan doesn't include online payment processing. Upgrade your subscription
+                  or add the Online Payments add-on to start accepting payments from your customers.
+                </p>
+                <ul className="space-y-2 mb-6 text-sm text-gray-600">
+                  <li className="flex items-center gap-2">
+                    <CheckCircle size={16} className="text-green-500" />
+                    Accept credit cards, debit cards, and digital wallets
+                  </li>
+                  <li className="flex items-center gap-2">
+                    <CheckCircle size={16} className="text-green-500" />
+                    Automatic invoicing and payment reminders
+                  </li>
+                  <li className="flex items-center gap-2">
+                    <CheckCircle size={16} className="text-green-500" />
+                    Secure PCI-compliant payment processing
+                  </li>
+                  <li className="flex items-center gap-2">
+                    <CheckCircle size={16} className="text-green-500" />
+                    Detailed transaction history and analytics
+                  </li>
+                </ul>
+                <div className="flex flex-wrap gap-3">
+                  <button
+                    onClick={() => navigate('/settings/billing')}
+                    className="flex items-center gap-2 px-5 py-2.5 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors"
+                  >
+                    <ArrowUpRight size={16} />
+                    View Upgrade Options
+                  </button>
+                  <a
+                    href="mailto:support@smoothschedule.com?subject=Online Payments Add-on"
+                    className="flex items-center gap-2 px-5 py-2.5 text-sm font-medium text-purple-700 bg-purple-100 rounded-lg hover:bg-purple-200 transition-colors"
+                  >
+                    Contact Sales
+                  </a>
+                </div>
+              </div>
+            </div>
          </div>
+        ) : (
+          <>
+            {/* Tier-specific content */}
+            {isFreeTier ? (
+              <StripeApiKeysForm
+                apiKeys={config?.api_keys || null}
+                onSuccess={() => refetch()}
+              />
+            ) : (
+              <ConnectOnboardingEmbed
+                connectAccount={config?.connect_account || null}
+                tier={tier}
+                onComplete={() => refetch()}
+              />
+            )}
+
+            {/* Upgrade notice for free tier with deprecated keys */}
+            {isFreeTier && config?.api_keys?.status === 'deprecated' && (
+              <div className="mt-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
+                <h4 className="font-medium text-blue-800 mb-1">
+                  Upgraded to a Paid Plan?
+                </h4>
+                <p className="text-sm text-blue-700">
+                  If you've recently upgraded, your API keys have been deprecated.
+                  Please contact support to complete your Stripe Connect setup.
+                </p>
+              </div>
+            )}
+          </>
        )}
      </div>
    </div>
--- a/frontend/src/components/PlatformEmailAddressManager.tsx
+++ b/frontend/src/components/PlatformEmailAddressManager.tsx
@@ -0,0 +1,775 @@
+/**
+ * Platform Email Address Manager Component
+ * Manages email addresses hosted on mail.talova.net via SSH
+ */
+
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Mail,
+  Plus,
+  Trash2,
+  Edit,
+  CheckCircle,
+  XCircle,
+  Loader2,
+  Star,
+  TestTube,
+  RefreshCw,
+  Server,
+  AlertTriangle,
+  X,
+  Download,
+  Unlink,
+} from 'lucide-react';
+import {
+  usePlatformEmailAddresses,
+  useDeletePlatformEmailAddress,
+  useRemoveLocalPlatformEmailAddress,
+  useTestImapConnection,
+  useTestSmtpConnection,
+  useSyncPlatformEmailAddress,
+  useSetAsDefault,
+  useTestMailServerConnection,
+  useCreatePlatformEmailAddress,
+  useUpdatePlatformEmailAddress,
+  useAssignableUsers,
+  useImportFromMailServer,
+  PlatformEmailAddressListItem,
+} from '../hooks/usePlatformEmailAddresses';
+import toast from 'react-hot-toast';
+
+// Color options for email addresses
+const COLOR_OPTIONS = [
+  '#3b82f6', // blue
+  '#10b981', // green
+  '#f59e0b', // amber
+  '#ef4444', // red
+  '#8b5cf6', // violet
+  '#ec4899', // pink
+  '#06b6d4', // cyan
+  '#f97316', // orange
+];
+
+interface EmailAddressFormData {
+  display_name: string;
+  sender_name: string;
+  assigned_user_id: number | null;
+  local_part: string;
+  domain: string;
+  color: string;
+  password: string;
+  is_active: boolean;
+  is_default: boolean;
+}
+
+interface ConfirmModalState {
+  isOpen: boolean;
+  title: string;
+  message: string;
+  confirmText: string;
+  confirmStyle: 'danger' | 'warning';
+  onConfirm: () => void;
+}
+
+const PlatformEmailAddressManager: React.FC = () => {
+  const { t } = useTranslation();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [editingAddress, setEditingAddress] = useState<PlatformEmailAddressListItem | null>(null);
+  const [confirmModal, setConfirmModal] = useState<ConfirmModalState>({
+    isOpen: false,
+    title: '',
+    message: '',
+    confirmText: 'Confirm',
+    confirmStyle: 'danger',
+    onConfirm: () => {},
+  });
+  const [formData, setFormData] = useState<EmailAddressFormData>({
+    display_name: '',
+    sender_name: '',
+    assigned_user_id: null,
+    local_part: '',
+    domain: 'smoothschedule.com',
+    color: '#3b82f6',
+    password: '',
+    is_active: true,
+    is_default: false,
+  });
+  const [formErrors, setFormErrors] = useState<Record<string, string>>({});
+
+  const { data: emailAddresses = [], isLoading } = usePlatformEmailAddresses();
+  const { data: usersData } = useAssignableUsers();
+  const deleteAddress = useDeletePlatformEmailAddress();
+  const removeLocal = useRemoveLocalPlatformEmailAddress();
+  const testImap = useTestImapConnection();
+  const testSmtp = useTestSmtpConnection();
+  const syncAddress = useSyncPlatformEmailAddress();
+  const setDefault = useSetAsDefault();
+  const testMailServer = useTestMailServerConnection();
+  const createAddress = useCreatePlatformEmailAddress();
+  const updateAddress = useUpdatePlatformEmailAddress();
+  const importFromServer = useImportFromMailServer();
+
+  const handleAdd = () => {
+    setEditingAddress(null);
+    setFormData({
+      display_name: '',
+      sender_name: '',
+      assigned_user_id: null,
+      local_part: '',
+      domain: 'smoothschedule.com',
+      color: '#3b82f6',
+      password: '',
+      is_active: true,
+      is_default: false,
+    });
+    setFormErrors({});
+    setIsModalOpen(true);
+  };
+
+  const handleEdit = (address: PlatformEmailAddressListItem) => {
+    setEditingAddress(address);
+    setFormData({
+      display_name: address.display_name,
+      sender_name: address.sender_name || '',
+      assigned_user_id: address.assigned_user?.id || null,
+      local_part: address.local_part,
+      domain: address.domain,
+      color: address.color,
+      password: '',
+      is_active: address.is_active,
+      is_default: address.is_default,
+    });
+    setFormErrors({});
+    setIsModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+    setEditingAddress(null);
+    setFormErrors({});
+  };
+
+  const validateForm = (): boolean => {
+    const errors: Record<string, string> = {};
+
+    if (!formData.display_name.trim()) {
+      errors.display_name = 'Display name is required';
+    }
+
+    if (!editingAddress && !formData.local_part.trim()) {
+      errors.local_part = 'Email local part is required';
+    } else if (!editingAddress && !/^[a-z0-9]([a-z0-9._-]*[a-z0-9])?$/i.test(formData.local_part)) {
+      errors.local_part = 'Invalid email format';
+    }
+
+    if (!editingAddress && !formData.password) {
+      errors.password = 'Password is required';
+    } else if (formData.password && formData.password.length < 8) {
+      errors.password = 'Password must be at least 8 characters';
+    }
+
+    setFormErrors(errors);
+    return Object.keys(errors).length === 0;
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!validateForm()) {
+      return;
+    }
+
+    try {
+      if (editingAddress) {
+        // Update existing address
+        const updateData: any = {
+          display_name: formData.display_name,
+          sender_name: formData.sender_name,
+          assigned_user_id: formData.assigned_user_id,
+          color: formData.color,
+          is_active: formData.is_active,
+          is_default: formData.is_default,
+        };
+        if (formData.password) {
+          updateData.password = formData.password;
+        }
+
+        await updateAddress.mutateAsync({
+          id: editingAddress.id,
+          data: updateData,
+        });
+        toast.success('Email address updated successfully');
+      } else {
+        // Create new address
+        await createAddress.mutateAsync({
+          display_name: formData.display_name,
+          sender_name: formData.sender_name,
+          assigned_user_id: formData.assigned_user_id,
+          local_part: formData.local_part.toLowerCase(),
+          domain: formData.domain,
+          color: formData.color,
+          password: formData.password,
+          is_active: formData.is_active,
+          is_default: formData.is_default,
+        });
+        toast.success('Email address created and synced to mail server');
+      }
+      handleCloseModal();
+    } catch (error: any) {
+      const errorMessage =
+        error.response?.data?.mail_server ||
+        error.response?.data?.local_part ||
+        error.response?.data?.detail ||
+        'Failed to save email address';
+      toast.error(Array.isArray(errorMessage) ? errorMessage[0] : errorMessage);
+    }
+  };
+
+  const handleDelete = (id: number, displayName: string) => {
+    setConfirmModal({
+      isOpen: true,
+      title: 'Delete Email Address',
+      message: `Are you sure you want to delete "${displayName}"? This will permanently remove the account from both the database and the mail server. This action cannot be undone.`,
+      confirmText: 'Delete',
+      confirmStyle: 'danger',
+      onConfirm: async () => {
+        try {
+          await deleteAddress.mutateAsync(id);
+          toast.success(`${displayName} deleted successfully`);
+        } catch (error) {
+          toast.error('Failed to delete email address');
+        }
+        setConfirmModal(prev => ({ ...prev, isOpen: false }));
+      },
+    });
+  };
+
+  const handleRemoveLocal = (id: number, displayName: string) => {
+    setConfirmModal({
+      isOpen: true,
+      title: 'Remove from Database',
+      message: `Remove "${displayName}" from the database? The email account will remain active on the mail server and can be re-imported later.`,
+      confirmText: 'Remove',
+      confirmStyle: 'warning',
+      onConfirm: async () => {
+        try {
+          const result = await removeLocal.mutateAsync(id);
+          toast.success(result.message);
+        } catch (error) {
+          toast.error('Failed to remove email address');
+        }
+        setConfirmModal(prev => ({ ...prev, isOpen: false }));
+      },
+    });
+  };
+
+  const closeConfirmModal = () => {
+    setConfirmModal(prev => ({ ...prev, isOpen: false }));
+  };
+
+  const handleTestImap = async (id: number, displayName: string) => {
+    toast.loading(`Testing IMAP connection for ${displayName}...`, { id: `imap-${id}` });
+    try {
+      const result = await testImap.mutateAsync(id);
+      if (result.success) {
+        toast.success(result.message, { id: `imap-${id}` });
+      } else {
+        toast.error(result.message, { id: `imap-${id}` });
+      }
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || 'IMAP test failed', { id: `imap-${id}` });
+    }
+  };
+
+  const handleTestSmtp = async (id: number, displayName: string) => {
+    toast.loading(`Testing SMTP connection for ${displayName}...`, { id: `smtp-${id}` });
+    try {
+      const result = await testSmtp.mutateAsync(id);
+      if (result.success) {
+        toast.success(result.message, { id: `smtp-${id}` });
+      } else {
+        toast.error(result.message, { id: `smtp-${id}` });
+      }
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || 'SMTP test failed', { id: `smtp-${id}` });
+    }
+  };
+
+  const handleSync = async (id: number, displayName: string) => {
+    toast.loading(`Syncing ${displayName} to mail server...`, { id: `sync-${id}` });
+    try {
+      const result = await syncAddress.mutateAsync(id);
+      if (result.success) {
+        toast.success(result.message, { id: `sync-${id}` });
+      } else {
+        toast.error(result.message, { id: `sync-${id}` });
+      }
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || 'Sync failed', { id: `sync-${id}` });
+    }
+  };
+
+  const handleSetDefault = async (id: number, displayName: string) => {
+    try {
+      const result = await setDefault.mutateAsync(id);
+      if (result.success) {
+        toast.success(result.message);
+      }
+    } catch (error) {
+      toast.error('Failed to set as default');
+    }
+  };
+
+  const handleTestMailServer = async () => {
+    toast.loading('Testing connection to mail server...', { id: 'mail-server-test' });
+    try {
+      const result = await testMailServer.mutateAsync();
+      if (result.success) {
+        toast.success(result.message, { id: 'mail-server-test' });
+      } else {
+        toast.error(result.message, { id: 'mail-server-test' });
+      }
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || 'Connection test failed', { id: 'mail-server-test' });
+    }
+  };
+
+  const handleImportFromServer = async () => {
+    toast.loading('Importing email addresses from mail server...', { id: 'import-emails' });
+    try {
+      const result = await importFromServer.mutateAsync();
+      if (result.success) {
+        if (result.imported_count > 0) {
+          toast.success(result.message, { id: 'import-emails' });
+        } else {
+          toast.success('No new email addresses to import', { id: 'import-emails' });
+        }
+      } else {
+        toast.error('Import failed', { id: 'import-emails' });
+      }
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || 'Import failed', { id: 'import-emails' });
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <Loader2 className="w-8 h-8 animate-spin text-blue-600 dark:text-blue-400" />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <p className="text-gray-600 dark:text-gray-400 mt-1">
+            Email addresses are managed directly on the mail server (mail.talova.net)
+          </p>
+        </div>
+        <div className="flex gap-2">
+          <button
+            onClick={handleTestMailServer}
+            disabled={testMailServer.isPending}
+            className="flex items-center gap-2 px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+          >
+            <Server className="w-4 h-4" />
+            Test Mail Server
+          </button>
+          <button
+            onClick={handleImportFromServer}
+            disabled={importFromServer.isPending}
+            className="flex items-center gap-2 px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+          >
+            {importFromServer.isPending ? (
+              <Loader2 className="w-4 h-4 animate-spin" />
+            ) : (
+              <Download className="w-4 h-4" />
+            )}
+            Import from Server
+          </button>
+          <button
+            onClick={handleAdd}
+            className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+          >
+            <Plus className="w-4 h-4" />
+            Add Email Address
+          </button>
+        </div>
+      </div>
+
+      {/* Email Addresses List */}
+      {emailAddresses.length === 0 ? (
+        <div className="text-center py-12 bg-gray-50 dark:bg-gray-800 rounded-lg">
+          <Mail className="w-16 h-16 mx-auto text-gray-400 dark:text-gray-600 mb-4" />
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
+            No email addresses configured
+          </h3>
+          <p className="text-gray-600 dark:text-gray-400 mb-6">
+            Add your first platform email address to start receiving support tickets
+          </p>
+          <button
+            onClick={handleAdd}
+            className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+          >
+            <Plus className="w-4 h-4" />
+            Add Email Address
+          </button>
+        </div>
+      ) : (
+        <div className="space-y-4">
+          {emailAddresses.map((address) => (
+            <div
+              key={address.id}
+              className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6"
+              style={{ borderLeft: `4px solid ${address.color}` }}
+            >
+              <div className="flex items-start justify-between">
+                <div className="flex-1">
+                  <div className="flex items-center gap-3 mb-2">
+                    <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+                      {address.display_name}
+                    </h3>
+                    {address.is_default && (
+                      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300">
+                        <Star className="w-3 h-3" />
+                        Default
+                      </span>
+                    )}
+                    {address.is_active ? (
+                      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">
+                        <CheckCircle className="w-3 h-3" />
+                        Active
+                      </span>
+                    ) : (
+                      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">
+                        <XCircle className="w-3 h-3" />
+                        Inactive
+                      </span>
+                    )}
+                    {address.mail_server_synced ? (
+                      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">
+                        <Server className="w-3 h-3" />
+                        Synced
+                      </span>
+                    ) : (
+                      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300">
+                        <AlertTriangle className="w-3 h-3" />
+                        Not Synced
+                      </span>
+                    )}
+                  </div>
+                  <p className="text-gray-600 dark:text-gray-400 mb-3">{address.email_address}</p>
+                  <div className="flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400">
+                    <span>
+                      Processed: <strong>{address.emails_processed_count}</strong> emails
+                    </span>
+                    {address.last_check_at && (
+                      <span>
+                        Last checked: {new Date(address.last_check_at).toLocaleString()}
+                      </span>
+                    )}
+                  </div>
+                </div>
+                <div className="flex items-center gap-2">
+                  {!address.is_default && (
+                    <button
+                      onClick={() => handleSetDefault(address.id, address.display_name)}
+                      disabled={setDefault.isPending}
+                      className="p-2 text-gray-600 hover:text-yellow-600 dark:text-gray-400 dark:hover:text-yellow-400 transition-colors"
+                      title="Set as default"
+                    >
+                      <Star className="w-4 h-4" />
+                    </button>
+                  )}
+                  <button
+                    onClick={() => handleSync(address.id, address.display_name)}
+                    disabled={syncAddress.isPending}
+                    className="p-2 text-gray-600 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors"
+                    title="Sync to mail server"
+                  >
+                    <RefreshCw className="w-4 h-4" />
+                  </button>
+                  <button
+                    onClick={() => handleTestImap(address.id, address.display_name)}
+                    disabled={testImap.isPending}
+                    className="p-2 text-gray-600 hover:text-green-600 dark:text-gray-400 dark:hover:text-green-400 transition-colors"
+                    title="Test IMAP"
+                  >
+                    <TestTube className="w-4 h-4" />
+                  </button>
+                  <button
+                    onClick={() => handleEdit(address)}
+                    className="p-2 text-gray-600 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors"
+                    title="Edit"
+                  >
+                    <Edit className="w-4 h-4" />
+                  </button>
+                  <button
+                    onClick={() => handleRemoveLocal(address.id, address.display_name)}
+                    disabled={removeLocal.isPending}
+                    className="p-2 text-gray-600 hover:text-orange-600 dark:text-gray-400 dark:hover:text-orange-400 transition-colors"
+                    title="Remove from database (keep on mail server)"
+                  >
+                    <Unlink className="w-4 h-4" />
+                  </button>
+                  <button
+                    onClick={() => handleDelete(address.id, address.display_name)}
+                    disabled={deleteAddress.isPending}
+                    className="p-2 text-gray-600 hover:text-red-600 dark:text-gray-400 dark:hover:text-red-400 transition-colors"
+                    title="Delete (also removes from mail server)"
+                  >
+                    <Trash2 className="w-4 h-4" />
+                  </button>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Modal */}
+      {isModalOpen && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-lg mx-4">
+            <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+                {editingAddress ? 'Edit Email Address' : 'Add Email Address'}
+              </h3>
+              <button
+                onClick={handleCloseModal}
+                className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+              >
+                <X className="w-5 h-5" />
+              </button>
+            </div>
+
+            <form onSubmit={handleSubmit} className="p-4 space-y-4">
+              {/* Display Name */}
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Display Name
+                </label>
+                <input
+                  type="text"
+                  value={formData.display_name}
+                  onChange={(e) => setFormData({ ...formData, display_name: e.target.value })}
+                  placeholder="e.g., Support, Billing, Sales"
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                />
+                {formErrors.display_name && (
+                  <p className="mt-1 text-sm text-red-500">{formErrors.display_name}</p>
+                )}
+              </div>
+
+              {/* Sender Name */}
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Sender Name <span className="text-gray-400 font-normal">(optional)</span>
+                </label>
+                <input
+                  type="text"
+                  value={formData.sender_name}
+                  onChange={(e) => setFormData({ ...formData, sender_name: e.target.value })}
+                  placeholder="e.g., SmoothSchedule Support Team"
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                />
+                <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                  Name shown in the From field of outgoing emails. If blank, uses Display Name.
+                </p>
+              </div>
+
+              {/* Assigned User */}
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Assigned User <span className="text-gray-400 font-normal">(optional)</span>
+                </label>
+                <select
+                  value={formData.assigned_user_id || ''}
+                  onChange={(e) => setFormData({
+                    ...formData,
+                    assigned_user_id: e.target.value ? Number(e.target.value) : null
+                  })}
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                >
+                  <option value="">No user assigned</option>
+                  {usersData?.users?.map((user) => (
+                    <option key={user.id} value={user.id}>
+                      {user.full_name} ({user.email})
+                    </option>
+                  ))}
+                </select>
+                <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                  If assigned, the user's name will be used as the sender name in outgoing emails.
+                </p>
+              </div>
+
+              {/* Email Address (only show for new addresses) */}
+              {!editingAddress && (
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Email Address
+                  </label>
+                  <div className="flex items-center gap-2">
+                    <input
+                      type="text"
+                      value={formData.local_part}
+                      onChange={(e) => setFormData({ ...formData, local_part: e.target.value.toLowerCase() })}
+                      placeholder="support"
+                      className="flex-1 min-w-0 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    />
+                    <span className="flex-shrink-0 text-gray-500 dark:text-gray-400 font-medium">
+                      @smoothschedule.com
+                    </span>
+                  </div>
+                  {formErrors.local_part && (
+                    <p className="mt-1 text-sm text-red-500">{formErrors.local_part}</p>
+                  )}
+                </div>
+              )}
+
+              {/* Password */}
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  {editingAddress ? 'New Password (leave blank to keep current)' : 'Password'}
+                </label>
+                <input
+                  type="password"
+                  value={formData.password}
+                  onChange={(e) => setFormData({ ...formData, password: e.target.value })}
+                  placeholder={editingAddress ? 'Leave blank to keep current' : 'Enter password'}
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                />
+                {formErrors.password && (
+                  <p className="mt-1 text-sm text-red-500">{formErrors.password}</p>
+                )}
+                <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                  Minimum 8 characters. This password will be synced to the mail server.
+                </p>
+              </div>
+
+              {/* Color */}
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Color
+                </label>
+                <div className="flex gap-2">
+                  {COLOR_OPTIONS.map((color) => (
+                    <button
+                      key={color}
+                      type="button"
+                      onClick={() => setFormData({ ...formData, color })}
+                      className={`w-8 h-8 rounded-full ${
+                        formData.color === color ? 'ring-2 ring-offset-2 ring-blue-500' : ''
+                      }`}
+                      style={{ backgroundColor: color }}
+                    />
+                  ))}
+                </div>
+              </div>
+
+              {/* Active & Default */}
+              <div className="flex gap-4">
+                <label className="flex items-center gap-2">
+                  <input
+                    type="checkbox"
+                    checked={formData.is_active}
+                    onChange={(e) => setFormData({ ...formData, is_active: e.target.checked })}
+                    className="w-4 h-4 rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500"
+                  />
+                  <span className="text-sm text-gray-700 dark:text-gray-300">Active</span>
+                </label>
+                <label className="flex items-center gap-2">
+                  <input
+                    type="checkbox"
+                    checked={formData.is_default}
+                    onChange={(e) => setFormData({ ...formData, is_default: e.target.checked })}
+                    className="w-4 h-4 rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500"
+                  />
+                  <span className="text-sm text-gray-700 dark:text-gray-300">Default</span>
+                </label>
+              </div>
+
+              {/* Actions */}
+              <div className="flex justify-end gap-3 pt-4">
+                <button
+                  type="button"
+                  onClick={handleCloseModal}
+                  className="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  disabled={createAddress.isPending || updateAddress.isPending}
+                  className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+                >
+                  {(createAddress.isPending || updateAddress.isPending) && (
+                    <Loader2 className="w-4 h-4 animate-spin" />
+                  )}
+                  {editingAddress ? 'Update' : 'Create'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
+      {/* Confirmation Modal */}
+      {confirmModal.isOpen && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-md mx-4">
+            <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
+                {confirmModal.confirmStyle === 'danger' ? (
+                  <AlertTriangle className="w-5 h-5 text-red-500" />
+                ) : (
+                  <AlertTriangle className="w-5 h-5 text-orange-500" />
+                )}
+                {confirmModal.title}
+              </h3>
+              <button
+                onClick={closeConfirmModal}
+                className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+              >
+                <X className="w-5 h-5" />
+              </button>
+            </div>
+            <div className="p-4">
+              <p className="text-gray-600 dark:text-gray-400">
+                {confirmModal.message}
+              </p>
+            </div>
+            <div className="flex justify-end gap-3 p-4 border-t border-gray-200 dark:border-gray-700">
+              <button
+                onClick={closeConfirmModal}
+                className="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={confirmModal.onConfirm}
+                disabled={deleteAddress.isPending || removeLocal.isPending}
+                className={`px-4 py-2 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2 ${
+                  confirmModal.confirmStyle === 'danger'
+                    ? 'bg-red-600 text-white hover:bg-red-700'
+                    : 'bg-orange-600 text-white hover:bg-orange-700'
+                }`}
+              >
+                {(deleteAddress.isPending || removeLocal.isPending) && (
+                  <Loader2 className="w-4 h-4 animate-spin" />
+                )}
+                {confirmModal.confirmText}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PlatformEmailAddressManager;
--- a/frontend/src/components/PlatformSidebar.tsx
+++ b/frontend/src/components/PlatformSidebar.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useLocation } from 'react-router-dom';
-import { LayoutDashboard, Building2, MessageSquare, Settings, Users, Shield, HelpCircle, Code } from 'lucide-react';
+import { LayoutDashboard, Building2, MessageSquare, Settings, Users, Shield, HelpCircle, Code, Mail } from 'lucide-react';
 import { User } from '../types';
 import SmoothScheduleLogo from './SmoothScheduleLogo';

@@ -63,6 +63,10 @@ const PlatformSidebar: React.FC<PlatformSidebarProps> = ({ user, isCollapsed, to
          <MessageSquare size={18} className="shrink-0" />
          {!isCollapsed && <span>{t('nav.support')}</span>}
        </Link>
+        <Link to="/platform/email-addresses" className={getNavClass('/platform/email-addresses')} title="Email Addresses">
+          <Mail size={18} className="shrink-0" />
+          {!isCollapsed && <span>Email Addresses</span>}
+        </Link>

        {isSuperuser && (
          <>
@@ -84,6 +88,10 @@ const PlatformSidebar: React.FC<PlatformSidebarProps> = ({ user, isCollapsed, to
            <HelpCircle size={18} className="shrink-0" />
            {!isCollapsed && <span>{t('nav.help', 'Help')}</span>}
          </Link>
+          <Link to="/help/email" className={getNavClass('/help/email')} title="Email Settings">
+            <Mail size={18} className="shrink-0" />
+            {!isCollapsed && <span>Email Settings</span>}
+          </Link>
          <Link to="/help/api" className={getNavClass('/help/api')} title={t('nav.apiDocs', 'API Documentation')}>
            <Code size={18} className="shrink-0" />
            {!isCollapsed && <span>{t('nav.apiDocs', 'API Docs')}</span>}
--- a/frontend/src/components/QuotaOverageModal.tsx
+++ b/frontend/src/components/QuotaOverageModal.tsx
@@ -0,0 +1,268 @@
+/**
+ * QuotaOverageModal Component
+ *
+ * Modal that appears on login/masquerade when the tenant has exceeded quotas.
+ * Shows warning about grace period and what will happen when it expires.
+ * Uses sessionStorage to only show once per session.
+ */
+
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import {
+  AlertTriangle,
+  X,
+  Clock,
+  Archive,
+  ChevronRight,
+  Users,
+  Layers,
+  Briefcase,
+  Mail,
+  Zap,
+} from 'lucide-react';
+import { QuotaOverage } from '../api/auth';
+
+interface QuotaOverageModalProps {
+  overages: QuotaOverage[];
+  onDismiss: () => void;
+}
+
+const QUOTA_ICONS: Record<string, React.ReactNode> = {
+  'MAX_ADDITIONAL_USERS': <Users className="w-5 h-5" />,
+  'MAX_RESOURCES': <Layers className="w-5 h-5" />,
+  'MAX_SERVICES': <Briefcase className="w-5 h-5" />,
+  'MAX_EMAIL_TEMPLATES': <Mail className="w-5 h-5" />,
+  'MAX_AUTOMATED_TASKS': <Zap className="w-5 h-5" />,
+};
+
+const SESSION_STORAGE_KEY = 'quota_overage_modal_dismissed';
+
+const QuotaOverageModal: React.FC<QuotaOverageModalProps> = ({ overages, onDismiss }) => {
+  const { t } = useTranslation();
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    // Check if already dismissed this session
+    const dismissed = sessionStorage.getItem(SESSION_STORAGE_KEY);
+    if (!dismissed && overages && overages.length > 0) {
+      setIsVisible(true);
+    }
+  }, [overages]);
+
+  const handleDismiss = () => {
+    sessionStorage.setItem(SESSION_STORAGE_KEY, 'true');
+    setIsVisible(false);
+    onDismiss();
+  };
+
+  if (!isVisible || !overages || overages.length === 0) {
+    return null;
+  }
+
+  // Find the most urgent overage (least days remaining)
+  const mostUrgent = overages.reduce((prev, curr) =>
+    curr.days_remaining < prev.days_remaining ? curr : prev
+  );
+
+  const isCritical = mostUrgent.days_remaining <= 1;
+  const isUrgent = mostUrgent.days_remaining <= 7;
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString(undefined, {
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    });
+  };
+
+  return (
+    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
+      <div className="bg-white dark:bg-gray-800 rounded-xl shadow-2xl max-w-lg w-full overflow-hidden">
+        {/* Header */}
+        <div className={`px-6 py-4 ${
+          isCritical
+            ? 'bg-red-600'
+            : isUrgent
+              ? 'bg-amber-500'
+              : 'bg-amber-100 dark:bg-amber-900/30'
+        }`}>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className={`p-2 rounded-full ${
+                isCritical || isUrgent
+                  ? 'bg-white/20'
+                  : 'bg-amber-200 dark:bg-amber-800'
+              }`}>
+                <AlertTriangle className={`w-6 h-6 ${
+                  isCritical || isUrgent
+                    ? 'text-white'
+                    : 'text-amber-700 dark:text-amber-300'
+                }`} />
+              </div>
+              <div>
+                <h2 className={`text-lg font-bold ${
+                  isCritical || isUrgent
+                    ? 'text-white'
+                    : 'text-amber-900 dark:text-amber-100'
+                }`}>
+                  {isCritical
+                    ? t('quota.modal.titleCritical', 'Action Required Immediately!')
+                    : isUrgent
+                      ? t('quota.modal.titleUrgent', 'Action Required Soon')
+                      : t('quota.modal.title', 'Quota Exceeded')
+                  }
+                </h2>
+                <p className={`text-sm ${
+                  isCritical || isUrgent
+                    ? 'text-white/90'
+                    : 'text-amber-700 dark:text-amber-200'
+                }`}>
+                  {mostUrgent.days_remaining <= 0
+                    ? t('quota.modal.subtitleExpired', 'Grace period has expired')
+                    : mostUrgent.days_remaining === 1
+                      ? t('quota.modal.subtitleOneDay', '1 day remaining')
+                      : t('quota.modal.subtitle', '{{days}} days remaining', { days: mostUrgent.days_remaining })
+                  }
+                </p>
+              </div>
+            </div>
+            <button
+              onClick={handleDismiss}
+              className={`p-2 rounded-lg transition-colors ${
+                isCritical || isUrgent
+                  ? 'hover:bg-white/20 text-white'
+                  : 'hover:bg-amber-200 dark:hover:bg-amber-800 text-amber-700 dark:text-amber-300'
+              }`}
+              aria-label={t('common.close', 'Close')}
+            >
+              <X className="w-5 h-5" />
+            </button>
+          </div>
+        </div>
+
+        {/* Body */}
+        <div className="px-6 py-5 space-y-5">
+          {/* Main message */}
+          <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+            <Clock className="w-5 h-5 text-gray-500 dark:text-gray-400 mt-0.5 flex-shrink-0" />
+            <div className="text-sm text-gray-700 dark:text-gray-300">
+              <p className="font-medium mb-1">
+                {t('quota.modal.gracePeriodEnds', 'Grace period ends on {{date}}', {
+                  date: formatDate(mostUrgent.grace_period_ends_at)
+                })}
+              </p>
+              <p>
+                {t('quota.modal.explanation',
+                  'Your account has exceeded its plan limits. Please remove or archive excess items before the grace period ends, or they will be automatically archived.'
+                )}
+              </p>
+            </div>
+          </div>
+
+          {/* Overage list */}
+          <div className="space-y-3">
+            <h3 className="text-sm font-semibold text-gray-900 dark:text-white">
+              {t('quota.modal.overagesTitle', 'Items Over Quota')}
+            </h3>
+            <div className="space-y-2">
+              {overages.map((overage) => (
+                <div
+                  key={overage.id}
+                  className={`flex items-center justify-between p-3 rounded-lg border ${
+                    overage.days_remaining <= 1
+                      ? 'border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/20'
+                      : overage.days_remaining <= 7
+                        ? 'border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900/20'
+                        : 'border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/30'
+                  }`}
+                >
+                  <div className="flex items-center gap-3">
+                    <div className={`p-2 rounded-lg ${
+                      overage.days_remaining <= 1
+                        ? 'bg-red-100 dark:bg-red-800/50 text-red-600 dark:text-red-400'
+                        : overage.days_remaining <= 7
+                          ? 'bg-amber-100 dark:bg-amber-800/50 text-amber-600 dark:text-amber-400'
+                          : 'bg-gray-200 dark:bg-gray-600 text-gray-600 dark:text-gray-300'
+                    }`}>
+                      {QUOTA_ICONS[overage.quota_type] || <Layers className="w-5 h-5" />}
+                    </div>
+                    <div>
+                      <p className="font-medium text-gray-900 dark:text-white">
+                        {overage.display_name}
+                      </p>
+                      <p className="text-sm text-gray-500 dark:text-gray-400">
+                        {t('quota.modal.usageInfo', '{{current}} used / {{limit}} allowed', {
+                          current: overage.current_usage,
+                          limit: overage.allowed_limit
+                        })}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="text-right">
+                    <p className={`font-bold ${
+                      overage.days_remaining <= 1
+                        ? 'text-red-600 dark:text-red-400'
+                        : overage.days_remaining <= 7
+                          ? 'text-amber-600 dark:text-amber-400'
+                          : 'text-gray-600 dark:text-gray-300'
+                    }`}>
+                      +{overage.overage_amount}
+                    </p>
+                    <p className="text-xs text-gray-500 dark:text-gray-400">
+                      {t('quota.modal.overLimit', 'over limit')}
+                    </p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* What happens section */}
+          <div className="flex items-start gap-3 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
+            <Archive className="w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0" />
+            <div className="text-sm text-blue-800 dark:text-blue-200">
+              <p className="font-medium mb-1">
+                {t('quota.modal.whatHappens', 'What happens if I don\'t take action?')}
+              </p>
+              <p>
+                {t('quota.modal.autoArchiveExplanation',
+                  'After the grace period ends, the oldest items over your limit will be automatically archived. Archived items remain in your account but cannot be used until you upgrade or remove other items.'
+                )}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="px-6 py-4 bg-gray-50 dark:bg-gray-700/50 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between gap-3">
+          <button
+            onClick={handleDismiss}
+            className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600 rounded-lg transition-colors"
+          >
+            {t('quota.modal.dismissButton', 'Remind Me Later')}
+          </button>
+          <Link
+            to="/settings/quota"
+            onClick={handleDismiss}
+            className="inline-flex items-center gap-2 px-5 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors"
+          >
+            {t('quota.modal.manageButton', 'Manage Quota')}
+            <ChevronRight className="w-4 h-4" />
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default QuotaOverageModal;
+
+/**
+ * Clear the session storage dismissal flag
+ * Call this when user logs out or masquerade changes
+ */
+export const resetQuotaOverageModalDismissal = () => {
+  sessionStorage.removeItem(SESSION_STORAGE_KEY);
+};
--- a/frontend/src/components/QuotaWarningBanner.tsx
+++ b/frontend/src/components/QuotaWarningBanner.tsx
@@ -0,0 +1,131 @@
+import React from 'react';
+import { AlertTriangle, X, ExternalLink } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { QuotaOverage } from '../api/auth';
+
+interface QuotaWarningBannerProps {
+  overages: QuotaOverage[];
+  onDismiss?: () => void;
+}
+
+const QuotaWarningBanner: React.FC<QuotaWarningBannerProps> = ({ overages, onDismiss }) => {
+  const { t } = useTranslation();
+
+  if (!overages || overages.length === 0) {
+    return null;
+  }
+
+  // Find the most urgent overage (least days remaining)
+  const mostUrgent = overages.reduce((prev, curr) =>
+    curr.days_remaining < prev.days_remaining ? curr : prev
+  );
+
+  const isUrgent = mostUrgent.days_remaining <= 7;
+  const isCritical = mostUrgent.days_remaining <= 1;
+
+  const getBannerStyles = () => {
+    if (isCritical) {
+      return 'bg-red-600 text-white border-red-700';
+    }
+    if (isUrgent) {
+      return 'bg-amber-500 text-white border-amber-600';
+    }
+    return 'bg-amber-100 text-amber-900 border-amber-300';
+  };
+
+  const getIconColor = () => {
+    if (isCritical || isUrgent) {
+      return 'text-white';
+    }
+    return 'text-amber-600';
+  };
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString(undefined, {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    });
+  };
+
+  return (
+    <div className={`border-b ${getBannerStyles()}`}>
+      <div className="max-w-7xl mx-auto px-4 py-3 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between flex-wrap gap-2">
+          <div className="flex items-center gap-3">
+            <AlertTriangle className={`h-5 w-5 flex-shrink-0 ${getIconColor()}`} />
+            <div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2">
+              <span className="font-medium">
+                {isCritical
+                  ? t('quota.banner.critical', 'URGENT: Automatic archiving tomorrow!')
+                  : isUrgent
+                    ? t('quota.banner.urgent', 'Action Required: {{days}} days left', { days: mostUrgent.days_remaining })
+                    : t('quota.banner.warning', 'Quota exceeded for {{count}} item(s)', { count: overages.length })
+                }
+              </span>
+              <span className="text-sm opacity-90">
+                {t('quota.banner.details',
+                  'You have {{overage}} {{type}} over your plan limit. Grace period ends {{date}}.',
+                  {
+                    overage: mostUrgent.overage_amount,
+                    type: mostUrgent.display_name,
+                    date: formatDate(mostUrgent.grace_period_ends_at)
+                  }
+                )}
+              </span>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <Link
+              to="/settings/quota"
+              className={`inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${
+                isCritical || isUrgent
+                  ? 'bg-white/20 hover:bg-white/30 text-white'
+                  : 'bg-amber-600 hover:bg-amber-700 text-white'
+              }`}
+            >
+              {t('quota.banner.manage', 'Manage Quota')}
+              <ExternalLink className="h-4 w-4" />
+            </Link>
+            {onDismiss && (
+              <button
+                onClick={onDismiss}
+                className={`p-1 rounded-md transition-colors ${
+                  isCritical || isUrgent
+                    ? 'hover:bg-white/20'
+                    : 'hover:bg-amber-200'
+                }`}
+                aria-label={t('common.dismiss', 'Dismiss')}
+              >
+                <X className="h-5 w-5" />
+              </button>
+            )}
+          </div>
+        </div>
+
+        {/* Show additional overages if there are more than one */}
+        {overages.length > 1 && (
+          <div className="mt-2 text-sm opacity-90">
+            <span className="font-medium">{t('quota.banner.allOverages', 'All overages:')}</span>
+            <ul className="ml-4 mt-1 space-y-0.5">
+              {overages.map((overage) => (
+                <li key={overage.id}>
+                  {overage.display_name}: {overage.current_usage}/{overage.allowed_limit}
+                  ({t('quota.banner.overBy', 'over by {{amount}}', { amount: overage.overage_amount })})
+                  {' - '}
+                  {overage.days_remaining <= 0
+                    ? t('quota.banner.expiredToday', 'expires today!')
+                    : t('quota.banner.daysLeft', '{{days}} days left', { days: overage.days_remaining })
+                  }
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default QuotaWarningBanner;
--- a/frontend/src/components/ResourceCalendar.tsx
+++ b/frontend/src/components/ResourceCalendar.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useMemo, useRef, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import { X, ChevronLeft, ChevronRight, Clock } from 'lucide-react';
 import { format, addDays, addWeeks, addMonths, startOfDay, startOfWeek, startOfMonth, endOfDay, endOfWeek, endOfMonth, eachDayOfInterval, eachHourOfInterval, isToday, isSameDay, getDay } from 'date-fns';
 import { useAppointments, useUpdateAppointment } from '../hooks/useAppointments';
@@ -28,6 +29,7 @@ interface ResourceCalendarProps {
 }

 const ResourceCalendar: React.FC<ResourceCalendarProps> = ({ resourceId, resourceName, onClose }) => {
+    const { t } = useTranslation();
    const [viewMode, setViewMode] = useState<ViewMode>('day');
    const [currentDate, setCurrentDate] = useState(new Date());
    const timelineRef = useRef<HTMLDivElement>(null);
@@ -712,12 +714,12 @@ const ResourceCalendar: React.FC<ResourceCalendarProps> = ({ resourceId, resourc

                {isLoading && (
                    <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
-                        <p className="text-gray-400 dark:text-gray-500">Loading appointments...</p>
+                        <p className="text-gray-400 dark:text-gray-500">{t('scheduler.loadingAppointments')}</p>
                    </div>
                )}
                {!isLoading && appointments.length === 0 && (
                    <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
-                        <p className="text-gray-400 dark:text-gray-500">No appointments scheduled for this period</p>
+                        <p className="text-gray-400 dark:text-gray-500">{t('scheduler.noAppointmentsScheduled')}</p>
                    </div>
                )}
                </div>
--- a/frontend/src/components/ResourceDetailModal.tsx
+++ b/frontend/src/components/ResourceDetailModal.tsx
@@ -0,0 +1,325 @@
+/**
+ * Resource Detail Modal
+ *
+ * Shows resource details including a map of the staff member's
+ * current location when they are en route or in progress.
+ */
+
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { GoogleMap, useJsApiLoader, Marker } from '@react-google-maps/api';
+import { Resource } from '../types';
+import { useResourceLocation, useLiveResourceLocation } from '../hooks/useResourceLocation';
+import Portal from './Portal';
+import {
+  X,
+  MapPin,
+  Navigation,
+  Clock,
+  User as UserIcon,
+  Activity,
+  Loader2,
+  AlertCircle,
+} from 'lucide-react';
+
+interface ResourceDetailModalProps {
+  resource: Resource;
+  onClose: () => void;
+}
+
+const mapContainerStyle = {
+  width: '100%',
+  height: '300px',
+  borderRadius: '0.5rem',
+};
+
+const defaultCenter = {
+  lat: 39.8283, // Center of US
+  lng: -98.5795,
+};
+
+const ResourceDetailModal: React.FC<ResourceDetailModalProps> = ({ resource, onClose }) => {
+  const { t } = useTranslation();
+  const googleMapsApiKey = import.meta.env.VITE_GOOGLE_MAPS_API_KEY || '';
+  const hasApiKey = googleMapsApiKey.length > 0;
+
+  // Fetch location data
+  const { data: location, isLoading, error } = useResourceLocation(resource.id);
+
+  // Connect to live updates when tracking is active
+  useLiveResourceLocation(resource.id, {
+    enabled: location?.isTracking === true,
+  });
+
+  // Load Google Maps API only if we have a key
+  // When no API key, we skip the hook entirely to avoid warnings
+  const shouldLoadMaps = hasApiKey;
+  const { isLoaded: mapsLoaded, loadError: mapsLoadError } = useJsApiLoader({
+    googleMapsApiKey: shouldLoadMaps ? googleMapsApiKey : 'SKIP_LOADING',
+  });
+
+  // Treat missing API key as if maps failed to load
+  const effectiveMapsLoaded = shouldLoadMaps && mapsLoaded;
+  const effectiveMapsError = !shouldLoadMaps || mapsLoadError;
+
+  // Map center based on location
+  const mapCenter = useMemo(() => {
+    if (location?.hasLocation && location.latitude && location.longitude) {
+      return { lat: location.latitude, lng: location.longitude };
+    }
+    return defaultCenter;
+  }, [location]);
+
+  // Format timestamp
+  const formattedTimestamp = useMemo(() => {
+    if (!location?.timestamp) return null;
+    const date = new Date(location.timestamp);
+    return date.toLocaleString();
+  }, [location?.timestamp]);
+
+  // Status color based on job status
+  const statusColor = useMemo(() => {
+    if (!location?.activeJob) return 'gray';
+    switch (location.activeJob.status) {
+      case 'EN_ROUTE':
+        return 'yellow';
+      case 'IN_PROGRESS':
+        return 'blue';
+      default:
+        return 'gray';
+    }
+  }, [location?.activeJob]);
+
+  return (
+    <Portal>
+      <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
+        <div className="bg-white dark:bg-gray-800 rounded-xl shadow-xl w-full max-w-2xl overflow-hidden">
+          {/* Header */}
+          <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
+                <UserIcon size={20} className="text-blue-600 dark:text-blue-400" />
+              </div>
+              <div>
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+                  {resource.name}
+                </h3>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  {t('resources.staffMember', 'Staff Member')}
+                </p>
+              </div>
+            </div>
+            <button
+              onClick={onClose}
+              className="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+            >
+              <span className="sr-only">{t('common.close')}</span>
+              <X size={24} />
+            </button>
+          </div>
+
+          {/* Content */}
+          <div className="p-6 space-y-6">
+            {/* Active Job Status */}
+            {location?.activeJob && (
+              <div className={`p-4 rounded-lg border ${
+                statusColor === 'yellow'
+                  ? 'bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800'
+                  : statusColor === 'blue'
+                    ? 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800'
+                    : 'bg-gray-50 dark:bg-gray-900/20 border-gray-200 dark:border-gray-700'
+              }`}>
+                <div className="flex items-center gap-3">
+                  <Activity size={20} className={
+                    statusColor === 'yellow'
+                      ? 'text-yellow-600 dark:text-yellow-400'
+                      : statusColor === 'blue'
+                        ? 'text-blue-600 dark:text-blue-400'
+                        : 'text-gray-600 dark:text-gray-400'
+                  } />
+                  <div>
+                    <div className="font-medium text-gray-900 dark:text-white">
+                      {location.activeJob.statusDisplay}
+                    </div>
+                    <div className="text-sm text-gray-600 dark:text-gray-300">
+                      {location.activeJob.title}
+                    </div>
+                  </div>
+                  {location.isTracking && (
+                    <span className="ml-auto inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400">
+                      <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
+                      {t('resources.liveTracking', 'Live')}
+                    </span>
+                  )}
+                </div>
+              </div>
+            )}
+
+            {/* Map Section */}
+            <div>
+              <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3 flex items-center gap-2">
+                <MapPin size={16} />
+                {t('resources.currentLocation', 'Current Location')}
+              </h4>
+
+              {isLoading ? (
+                <div className="h-[300px] bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center">
+                  <Loader2 size={32} className="text-gray-400 animate-spin" />
+                </div>
+              ) : error ? (
+                <div className="h-[300px] bg-red-50 dark:bg-red-900/20 rounded-lg flex items-center justify-center">
+                  <div className="text-center">
+                    <AlertCircle size={32} className="text-red-400 mx-auto mb-2" />
+                    <p className="text-red-600 dark:text-red-400">{t('resources.locationError', 'Failed to load location')}</p>
+                  </div>
+                </div>
+              ) : !location?.hasLocation ? (
+                <div className="h-[300px] bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center">
+                  <div className="text-center">
+                    <MapPin size={32} className="text-gray-400 mx-auto mb-2" />
+                    <p className="text-gray-500 dark:text-gray-400">
+                      {location?.message || t('resources.noLocationData', 'No location data available')}
+                    </p>
+                    <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
+                      {t('resources.locationHint', 'Location will appear when staff is en route')}
+                    </p>
+                  </div>
+                </div>
+              ) : effectiveMapsError ? (
+                // Fallback when Google Maps isn't available - show coordinates
+                <div className="h-[300px] bg-gray-100 dark:bg-gray-700 rounded-lg p-6">
+                  <div className="h-full flex flex-col items-center justify-center">
+                    <div className="w-16 h-16 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center mb-4">
+                      <Navigation size={32} className="text-blue-600 dark:text-blue-400" />
+                    </div>
+                    <div className="text-center">
+                      <p className="text-sm text-gray-500 dark:text-gray-400 mb-2">
+                        {t('resources.gpsCoordinates', 'GPS Coordinates')}
+                      </p>
+                      <p className="text-lg font-medium text-gray-900 dark:text-white mb-1">
+                        {location.latitude?.toFixed(6)}, {location.longitude?.toFixed(6)}
+                      </p>
+                      {location.speed !== undefined && location.speed !== null && (
+                        <p className="text-sm text-gray-500 dark:text-gray-400">
+                          {t('resources.speed', 'Speed')}: {(location.speed * 2.237).toFixed(1)} mph
+                        </p>
+                      )}
+                      {location.heading !== undefined && location.heading !== null && (
+                        <p className="text-sm text-gray-500 dark:text-gray-400">
+                          {t('resources.heading', 'Heading')}: {location.heading.toFixed(0)}°
+                        </p>
+                      )}
+                    </div>
+                    <a
+                      href={`https://www.google.com/maps?q=${location.latitude},${location.longitude}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="mt-4 inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium"
+                    >
+                      <MapPin size={16} />
+                      {t('resources.openInMaps', 'Open in Google Maps')}
+                    </a>
+                  </div>
+                </div>
+              ) : effectiveMapsLoaded ? (
+                <GoogleMap
+                  mapContainerStyle={mapContainerStyle}
+                  center={mapCenter}
+                  zoom={15}
+                  options={{
+                    disableDefaultUI: false,
+                    zoomControl: true,
+                    mapTypeControl: false,
+                    streetViewControl: false,
+                    fullscreenControl: true,
+                  }}
+                >
+                  {location.latitude && location.longitude && (
+                    <Marker
+                      position={{ lat: location.latitude, lng: location.longitude }}
+                      title={resource.name}
+                      icon={{
+                        path: google.maps.SymbolPath.CIRCLE,
+                        scale: 10,
+                        fillColor: location.isTracking ? '#22c55e' : '#3b82f6',
+                        fillOpacity: 1,
+                        strokeColor: '#ffffff',
+                        strokeWeight: 3,
+                      }}
+                    />
+                  )}
+                </GoogleMap>
+              ) : (
+                <div className="h-[300px] bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center">
+                  <Loader2 size={32} className="text-gray-400 animate-spin" />
+                </div>
+              )}
+            </div>
+
+            {/* Location Details */}
+            {location?.hasLocation && (
+              <div className="grid grid-cols-2 gap-4">
+                <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+                  <div className="text-xs text-gray-500 dark:text-gray-400 mb-1 flex items-center gap-1">
+                    <Clock size={12} />
+                    {t('resources.lastUpdate', 'Last Update')}
+                  </div>
+                  <div className="text-sm font-medium text-gray-900 dark:text-white">
+                    {formattedTimestamp || '-'}
+                  </div>
+                </div>
+
+                {location.accuracy && (
+                  <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+                    <div className="text-xs text-gray-500 dark:text-gray-400 mb-1">
+                      {t('resources.accuracy', 'Accuracy')}
+                    </div>
+                    <div className="text-sm font-medium text-gray-900 dark:text-white">
+                      {location.accuracy < 1000
+                        ? `${location.accuracy.toFixed(0)}m`
+                        : `${(location.accuracy / 1000).toFixed(1)}km`}
+                    </div>
+                  </div>
+                )}
+
+                {location.speed !== undefined && location.speed !== null && (
+                  <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+                    <div className="text-xs text-gray-500 dark:text-gray-400 mb-1">
+                      {t('resources.speed', 'Speed')}
+                    </div>
+                    <div className="text-sm font-medium text-gray-900 dark:text-white">
+                      {(location.speed * 2.237).toFixed(1)} mph
+                    </div>
+                  </div>
+                )}
+
+                {location.heading !== undefined && location.heading !== null && (
+                  <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+                    <div className="text-xs text-gray-500 dark:text-gray-400 mb-1">
+                      {t('resources.heading', 'Heading')}
+                    </div>
+                    <div className="text-sm font-medium text-gray-900 dark:text-white">
+                      {location.heading.toFixed(0)}°
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+
+          {/* Footer */}
+          <div className="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex justify-end">
+            <button
+              onClick={onClose}
+              className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
+            >
+              {t('common.close', 'Close')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Portal>
+  );
+};
+
+export default ResourceDetailModal;
--- a/frontend/src/components/Schedule/DraggableEvent.tsx
+++ b/frontend/src/components/Schedule/DraggableEvent.tsx
@@ -4,7 +4,9 @@ import { CSS } from '@dnd-kit/utilities';
 import { clsx } from 'clsx';
 import { Clock, DollarSign } from 'lucide-react';

-export type AppointmentStatus = 'PENDING' | 'CONFIRMED' | 'COMPLETED' | 'CANCELLED' | 'NO_SHOW';
+// Import from types.ts for consistency
+import type { AppointmentStatus } from '../../types';
+export type { AppointmentStatus };

 export interface DraggableEventProps {
    id: number;
--- a/frontend/src/components/Schedule/PendingSidebar.tsx
+++ b/frontend/src/components/Schedule/PendingSidebar.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { useDraggable } from '@dnd-kit/core';
 import { Clock, GripVertical } from 'lucide-react';
 import { clsx } from 'clsx';
+import { useTranslation } from 'react-i18next';

 export interface PendingAppointment {
    id: number;
@@ -15,6 +16,7 @@ interface PendingItemProps {
 }

 const PendingItem: React.FC<PendingItemProps> = ({ appointment }) => {
+    const { t } = useTranslation();
    const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
        id: `pending-${appointment.id}`,
        data: {
@@ -43,7 +45,7 @@ const PendingItem: React.FC<PendingItemProps> = ({ appointment }) => {
            </div>
            <div className="mt-2 flex items-center gap-1 text-xs text-gray-400">
                <Clock size={10} />
-                <span>{appointment.durationMinutes} min</span>
+                <span>{appointment.durationMinutes} {t('scheduler.min')}</span>
            </div>
        </div>
    );
@@ -54,16 +56,18 @@ interface PendingSidebarProps {
 }

 const PendingSidebar: React.FC<PendingSidebarProps> = ({ appointments }) => {
+    const { t } = useTranslation();
+
    return (
        <div className="w-64 bg-gray-50 border-r border-gray-200 flex flex-col h-full shrink-0">
            <div className="p-4 border-b border-gray-200 bg-gray-100">
                <h3 className="text-xs font-bold text-gray-500 uppercase tracking-wider flex items-center gap-2">
-                    <Clock size={12} /> Pending Requests ({appointments.length})
+                    <Clock size={12} /> {t('scheduler.pendingRequests')} ({appointments.length})
                </h3>
            </div>
            <div className="p-4 overflow-y-auto flex-1">
                {appointments.length === 0 ? (
-                    <div className="text-xs text-gray-400 italic text-center py-4">No pending requests</div>
+                    <div className="text-xs text-gray-400 italic text-center py-4">{t('scheduler.noPendingRequests')}</div>
                ) : (
                    appointments.map(apt => (
                        <PendingItem key={apt.id} appointment={apt} />
--- a/frontend/src/components/Schedule/Sidebar.tsx
+++ b/frontend/src/components/Schedule/Sidebar.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { useDraggable } from '@dnd-kit/core';
 import { Clock, GripVertical, Trash2 } from 'lucide-react';
 import { clsx } from 'clsx';
+import { useTranslation } from 'react-i18next';

 export interface PendingAppointment {
    id: number;
@@ -22,6 +23,7 @@ interface PendingItemProps {
 }

 const PendingItem: React.FC<PendingItemProps> = ({ appointment }) => {
+    const { t } = useTranslation();
    const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
        id: `pending-${appointment.id}`,
        data: {
@@ -50,7 +52,7 @@ const PendingItem: React.FC<PendingItemProps> = ({ appointment }) => {
            </div>
            <div className="mt-2 flex items-center gap-1 text-xs text-gray-400 dark:text-gray-500">
                <Clock size={10} />
-                <span>{appointment.durationMinutes} min</span>
+                <span>{appointment.durationMinutes} {t('scheduler.min')}</span>
            </div>
        </div>
    );
@@ -63,11 +65,13 @@ interface SidebarProps {
 }

 const Sidebar: React.FC<SidebarProps> = ({ resourceLayouts, pendingAppointments, scrollRef }) => {
+    const { t } = useTranslation();
+
    return (
        <div className="flex flex-col bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 shrink-0 shadow-lg z-20 transition-colors duration-200" style={{ width: 250 }}>
            {/* Resources Header */}
            <div className="border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 flex items-center px-4 font-semibold text-gray-500 dark:text-gray-400 text-xs uppercase tracking-wider shrink-0 transition-colors duration-200" style={{ height: 48 }}>
-                Resources
+                {t('scheduler.resources')}
            </div>

            {/* Resources List (Synced Scroll) */}
@@ -89,10 +93,10 @@ const Sidebar: React.FC<SidebarProps> = ({ resourceLayouts, pendingAppointments,
                                <div>
                                    <p className="font-medium text-sm text-gray-900 dark:text-white">{layout.resourceName}</p>
                                    <p className="text-xs text-gray-400 dark:text-gray-500 capitalize flex items-center gap-1">
-                                        Resource
+                                        {t('scheduler.resource')}
                                        {layout.laneCount > 1 && (
                                            <span className="text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/50 px-1 rounded text-[10px]">
-                                                {layout.laneCount} lanes
+                                                {layout.laneCount} {t('scheduler.lanes')}
                                            </span>
                                        )}
                                    </p>
@@ -106,11 +110,11 @@ const Sidebar: React.FC<SidebarProps> = ({ resourceLayouts, pendingAppointments,
            {/* Pending Requests (Fixed Bottom) */}
            <div className="border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 p-4 h-80 flex flex-col transition-colors duration-200">
                <h3 className="text-xs font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3 flex items-center gap-2 shrink-0">
-                    <Clock size={12} /> Pending Requests ({pendingAppointments.length})
+                    <Clock size={12} /> {t('scheduler.pendingRequests')} ({pendingAppointments.length})
                </h3>
                <div className="space-y-2 overflow-y-auto flex-1 mb-2">
                    {pendingAppointments.length === 0 ? (
-                        <div className="text-xs text-gray-400 italic text-center py-4">No pending requests</div>
+                        <div className="text-xs text-gray-400 italic text-center py-4">{t('scheduler.noPendingRequests')}</div>
                    ) : (
                        pendingAppointments.map(apt => (
                            <PendingItem key={apt.id} appointment={apt} />
@@ -122,7 +126,7 @@ const Sidebar: React.FC<SidebarProps> = ({ resourceLayouts, pendingAppointments,
                <div className="shrink-0 mt-2 border-t border-gray-200 dark:border-gray-700 pt-2 opacity-50">
                    <div className="flex items-center justify-center gap-2 p-3 rounded-lg border-2 border-dashed border-gray-200 dark:border-gray-700 bg-transparent text-gray-400">
                        <Trash2 size={16} />
-                        <span className="text-xs font-medium">Drop here to archive</span>
+                        <span className="text-xs font-medium">{t('scheduler.dropToArchive')}</span>
                    </div>
                </div>
            </div>
--- a/frontend/src/components/Schedule/Timeline.tsx
+++ b/frontend/src/components/Schedule/Timeline.tsx
@@ -30,7 +30,7 @@ import { DEFAULT_PIXELS_PER_HOUR, SNAP_MINUTES } from '../../lib/timelineUtils';

 import { useQuery } from '@tanstack/react-query';
 import { adaptResources, adaptEvents, adaptPending } from '../../lib/uiAdapter';
-import axios from 'axios';
+import apiClient from '../../api/client';

 type ViewMode = 'day' | 'week' | 'month';

@@ -39,7 +39,7 @@ export const Timeline: React.FC = () => {
    const { data: resources = [] } = useQuery({
        queryKey: ['resources'],
        queryFn: async () => {
-            const response = await axios.get('http://lvh.me:8000/api/resources/');
+            const response = await apiClient.get('/resources/');
            return adaptResources(response.data);
        }
    });
@@ -47,7 +47,7 @@ export const Timeline: React.FC = () => {
    const { data: backendAppointments = [] } = useQuery({ // Renamed to backendAppointments to avoid conflict with localEvents
        queryKey: ['appointments'],
        queryFn: async () => {
-            const response = await axios.get('http://lvh.me:8000/api/appointments/');
+            const response = await apiClient.get('/appointments/');
            return response.data; // Still return raw data, adapt in useEffect
        }
    });
--- a/Show More
+++ b/Show More