adserver-dashboard 1.0.0

package/package.json

@@ -0,0 +1,141 @@
+{
+  "name": "adserver-dashboard",
+  "version": "1.0.0",
+  "type": "module",
+  "license": "MIT",
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "scripts": {
+    "dev": "vite --host 0.0.0.0 --port 5000",
+    "build": "vite build",
+    "preview": "vite preview --host 0.0.0.0 --port 5000",
+    "check": "tsc",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "test:results": "mkdir -p client/public/test-results && vitest run --reporter=json --outputFile=client/public/test-results/results.json || true",
+    "test:ui": "vitest --ui",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:headed": "playwright test --headed",
+    "test:e2e:debug": "playwright test --debug",
+    "playwright:install": "playwright install chromium",
+    "playwright:report": "playwright show-report",
+    "i18n:scan": "i18next-scanner --config i18next-scanner.config.cjs"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^3.10.0",
+    "@jridgewell/trace-mapping": "^0.3.25",
+    "@mapbox/mapbox-gl-draw": "^1.5.0",
+    "@mapbox/mapbox-gl-geocoder": "^5.1.2",
+    "@moving-walls/design-system": "^1.0.11",
+    "@radix-ui/react-accordion": "^1.2.4",
+    "@radix-ui/react-alert-dialog": "^1.1.7",
+    "@radix-ui/react-aspect-ratio": "^1.1.3",
+    "@radix-ui/react-avatar": "^1.1.4",
+    "@radix-ui/react-checkbox": "^1.1.5",
+    "@radix-ui/react-collapsible": "^1.1.4",
+    "@radix-ui/react-context-menu": "^2.2.7",
+    "@radix-ui/react-dialog": "^1.1.7",
+    "@radix-ui/react-dropdown-menu": "^2.1.7",
+    "@radix-ui/react-hover-card": "^1.1.7",
+    "@radix-ui/react-label": "^2.1.3",
+    "@radix-ui/react-menubar": "^1.1.7",
+    "@radix-ui/react-navigation-menu": "^1.2.6",
+    "@radix-ui/react-popover": "^1.1.7",
+    "@radix-ui/react-progress": "^1.1.3",
+    "@radix-ui/react-radio-group": "^1.2.4",
+    "@radix-ui/react-scroll-area": "^1.2.4",
+    "@radix-ui/react-select": "^2.1.7",
+    "@radix-ui/react-separator": "^1.1.3",
+    "@radix-ui/react-slider": "^1.2.4",
+    "@radix-ui/react-slot": "^1.2.0",
+    "@radix-ui/react-switch": "^1.1.4",
+    "@radix-ui/react-tabs": "^1.1.4",
+    "@radix-ui/react-toast": "^1.2.7",
+    "@radix-ui/react-toggle": "^1.1.3",
+    "@radix-ui/react-toggle-group": "^1.1.3",
+    "@radix-ui/react-tooltip": "^1.2.0",
+    "@reduxjs/toolkit": "^2.11.2",
+    "@sentry/react": "^10.32.1",
+    "@tanstack/react-query": "^5.60.5",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.1",
+    "@testing-library/user-event": "^14.6.1",
+    "@tolgee/react": "^6.2.7",
+    "@types/leaflet": "^1.9.21",
+    "@types/mapbox__mapbox-gl-draw": "^1.4.9",
+    "@types/papaparse": "^5.5.2",
+    "@vitest/coverage-v8": "^4.0.16",
+    "@vitest/ui": "^4.0.16",
+    "ag-grid-react": "^35.0.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^3.6.0",
+    "embla-carousel-react": "^8.6.0",
+    "form-data": "^4.0.4",
+    "framer-motion": "^11.13.1",
+    "i18next": "^25.7.3",
+    "i18next-browser-languagedetector": "^8.2.0",
+    "i18next-http-backend": "^3.0.2",
+    "input-otp": "^1.4.2",
+    "jsdom": "^27.4.0",
+    "leaflet": "^1.9.4",
+    "lucide-react": "^0.453.0",
+    "mapbox-gl": "^3.16.0",
+    "mapbox-gl-draw-circle": "^1.1.2",
+    "mapbox-gl-draw-rectangle-mode": "^1.0.4",
+    "next-themes": "^0.4.6",
+    "papaparse": "^5.5.3",
+    "react": "^18.3.1",
+    "react-day-picker": "^8.10.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.55.0",
+    "react-i18next": "^16.5.1",
+    "react-icons": "^5.4.0",
+    "react-leaflet": "^4.2.1",
+    "react-markdown": "^10.1.0",
+    "react-redux": "^9.2.0",
+    "react-resizable-panels": "^2.1.7",
+    "recharts": "^2.15.2",
+    "remark-gfm": "^4.0.1",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss-animate": "^1.0.7",
+    "tw-animate-css": "^1.2.5",
+    "vaul": "^1.1.2",
+    "vitest": "^4.0.16",
+    "wouter": "^3.3.5",
+    "zod": "^3.24.2",
+    "zod-validation-error": "^3.4.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.57.0",
+    "@replit/vite-plugin-cartographer": "^0.4.4",
+    "@replit/vite-plugin-dev-banner": "^0.1.1",
+    "@replit/vite-plugin-runtime-error-modal": "^0.0.3",
+    "@tailwindcss/typography": "^0.5.15",
+    "@tailwindcss/vite": "^4.1.3",
+    "@types/node": "20.16.11",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.7.0",
+    "autoprefixer": "^10.4.20",
+    "dotenv": "^17.2.3",
+    "i18next-scanner": "^4.6.0",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.17",
+    "typescript": "5.6.3",
+    "vite": "^5.4.20",
+    "vite-plugin-pwa": "^1.2.0",
+    "workbox-window": "^7.4.0"
+  },
+  "optionalDependencies": {
+    "bufferutil": "^4.0.8"
+  },
+  "overrides": {
+    "minimist": "^1.2.8",
+    "underscore": "^1.13.6"
+  }
+}

package/playwright.config.ts

@@ -0,0 +1,93 @@
+import { defineConfig, devices } from '@playwright/test';
+import * as dotenv from 'dotenv';
+import * as path from 'path';
+import { fileURLToPath } from 'url';
+
+// Get __dirname equivalent in ESM
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Load .env.test file
+dotenv.config({ path: path.resolve(__dirname, '.env.test') });
+
+/**
+ * Playwright Configuration for Local Development Testing
+ *
+ * This configuration is designed for local testing only.
+ * The frontend is deployed as a static site in CI/CD, so these tests
+ * are not part of the deployment pipeline.
+ */
+export default defineConfig({
+  testDir: './e2e',
+
+  // Maximum time one test can run for
+  timeout: 30 * 1000,
+
+  // Run tests in files in parallel
+  fullyParallel: true,
+
+  // Fail the build on CI if you accidentally left test.only in the source code
+  forbidOnly: !!process.env.CI,
+
+  // Retry on CI only
+  retries: process.env.CI ? 2 : 0,
+
+  // Opt out of parallel tests on CI
+  workers: process.env.CI ? 1 : undefined,
+
+  // Reporter to use
+  reporter: 'html',
+
+  // Shared settings for all the projects below
+  use: {
+    // Base URL to use in actions like `await page.goto('/')`
+    baseURL: 'http://localhost:5000',
+
+    // Collect trace when retrying the failed test
+    trace: 'on-first-retry',
+
+    // Screenshot on failure
+    screenshot: 'only-on-failure',
+
+    // Video on failure
+    video: 'retain-on-failure',
+  },
+
+  // Configure projects for major browsers
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    // Uncomment to test on Firefox
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
+
+    // Uncomment to test on WebKit (Safari)
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
+
+    // Uncomment to test mobile viewports
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+  ],
+
+  // Run your local dev server before starting the tests
+  webServer: {
+    command: 'npm run dev',
+    url: 'http://localhost:5000',
+    reuseExistingServer: !process.env.CI,
+    timeout: 120 * 1000,
+  },
+});

package/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/replit.md

@@ -0,0 +1,196 @@
+# Ad Server Platform
+
+## Overview
+
+The Ad Server Platform is a comprehensive digital advertising solution designed for managing campaigns, screens, creatives, and ad delivery. It offers real-time analytics and geofencing capabilities. The platform aims to streamline ad operations, provide robust reporting, and enable precise targeting for advertisers, enhancing the efficiency and effectiveness of digital out-of-home (DOOH) advertising.
+
+## User Preferences
+
+Preferred communication style: Simple, everyday language.
+
+## Demo Status / Changes Log
+
+### Recent Changes (Week of Feb 10–17, 2026)
+
+#### Line Item Form - API Payload Cleanup
+- Removed `unlimitedBudget` toggle (UI-only, not in API schema)
+- Removed `signalEnabled` field from payload and UI (not supported by API)
+- Removed generic Signals section (signalId/signalName) — API uses structured signal format
+- Removed `automatedBidding` toggle from Bid Strategy section (not in API schema)
+- Removed Billing section (billable/non-billable) from line item form (handled at deal level)
+- Added `frequencyCap`, `trafficAllocation`, `inventorySource` to line item API payload and builder functions
+- `deliveryTargeting` restricted to DIRECT deals only (API rejects it for PROGRAMMATIC)
+
+#### Line Item Form - Weather Signals (DIRECT only)
+- New "Delivery Signals" section with weather targeting matching API format
+- Weather conditions grid: Sunny, Partly Cloudy, Cloudy, Rainy, Stormy, Snowy, Windy, Foggy, Hazy
+- Temperature range: min/max with Celsius/Fahrenheit unit selector
+- Payload format: `deliveryTargeting.signals.weather.conditions[]` + `temperature{min,max,unit}`
+- Section hidden for PROGRAMMATIC deals
+
+#### Line Item Form - Geofencing Fix
+- Geofencing payload now sends `lat` and `lng` (required by API), not just location name
+- Handles Point geometries (search/geocoding) and Polygon geometries (drawn areas via centroid)
+- Edit mode properly restores `geoLocations` state from existing line item data
+
+#### Line Item Form - Targeting Sections (Side Popover Pattern)
+- SSP/Exchange, Inventory Type, Media Owner, Inventory Format all use consistent Sheet (side popover) pattern
+- Replaced inline Collapsible with Sheet drawers for all targeting sections
+- Venue Type uses recursive tree with unlimited hierarchy depth (API-driven)
+- Real API integrations for companies (`/api/v1/companies?is_ssp=true`), inventory types (`/api/v1/inventory-types`), inventory display formats (`/api/v1/inventory-display-formats`)
+- API queries only fire when drawer is open (`enabled: isSheetOpen`)
+
+#### Deal Creation Page
+- Removed description field from programmatic deal creation
+- Removed seller field from deal list and filters
+- Fixed impression multiplier type handling in deal creation payloads
+- Updated deal creation form titles and field arrangements
+- Removed status dropdown from deal creation page
+
+#### Line Item Form - Other Improvements
+- Added priority field to line item API payload
+- Custom fees included in line item creation payload
+- Geography map opens directly by clicking the row
+- Form validation errors shown to user on save
+- Bid Strategy and Auction Type hidden for traditional deals
+- Scroll-aware tips in sidebar
+- Form insights section improvements
+
+#### DSP & Buyer Management
+- Real API data for DSP and Buyer pages
+- DSP list is read-only; Buyer CRUD operations with real API integration
+- DSP and Buyer management added to side menu
+
+#### UI/Layout
+- Sticky sidebar navigation
+- Theme selection in profile dropdown
+- External links for inventory and measure pages in sidebar
+- Custom toggle switch component for better visibility
+
+### Deals List Page
+- Search bar, bordered table card, Type (PD/PG/Traditional), Source (Influence/Activate/Planner), amber badges
+
+### Sidebar & Header
+- "DOOH Adserver" branding with blue "I" icon
+
+### Line Item Creatives Page
+- Breadcrumbs, 4 metric cards, player status bar, search/filter toolbar, table view
+- "Assign Creative" opens full-width side Sheet popover (not page navigation)
+
+### Creative Assignment Page
+- Opens as full-width Sheet/popover overlay from Line Item Creatives page
+- Left sidebar: numbered creative requirements with resolution/duration/type/inventory, drag-and-drop zones
+- Right panel: Content Hub with search, filters, 4-column draggable card grid
+- Sticky footer: Cancel / Save Assignment
+
+### Line Item Form - Base Pricing
+- Programmatic: `bidFloorBase` (original bid floor before custom fees)
+- Direct: `pricing.cpmBase`, `pricing.estimatedCostBase` (original values before custom fees)
+
+### Programmatic Deal Creation (PCM-Aligned)
+- Cascading dependency: Deal Type → DSP → Buyer → Transaction Type → Currency
+- No brand field for programmatic deals (brand only for DIRECT mode)
+- Centralized DSP dropdown (not per-buyer rows); DSP disabled until Deal Type selected
+- Buyer dropdown disabled until DSP selected; adds buyers as removable chips/badges
+- Buyer constraints: single buyer for GUARANTEED/PREFERRED_DEAL, multiple for PRIVATE_AUCTION/EVERGREEN_PMP
+- After buyer selection, DSP and Deal Type fields become locked
+- Auction Type: HIDDEN except for PRIVATE_AUCTION (First Price / Second Price); auto-set to 3 for all others
+- Hard Stop: only visible for GUARANTEED deal type
+- Non-Billable: always visible as checkbox
+- Impression Multiplier Type (MAD/CUSTOM): only visible when transactionType === AUDIENCE
+- Seller section: name, phone, email fields with auto-populate from logged-in user
+- Description textarea for optional notes
+- Remove buyer resets dealType/DSP when last buyer removed
+- Edit mode locks dealType (always), locks DSP when buyers exist
+
+### Deal Page Buyer Management (Legacy)
+- DSP dropdown loads from `getDspDropdownList()` API with flexible field mapping (id/value/code, name/label/description)
+- Buyers load from `listDspBuyers()` API, filtered by both `dspId` and `name` query params
+- Both `activeDspId` and `activeDspName` are tracked; fallback to raw value if DSP not found in options
+- Edit mode maps DSP names to IDs and resolves `buyerId` by matching `seatId` or `buyerName`
+
+### Line Item Form - Targeting Section (Prototype-aligned)
+- Targeting section uses row-based design: flat rows with icon, label, count/status, checkmark
+- Age Groups and Gender are separate expandable rows with inline checkbox grids
+- POI Targeting opens a side drawer with POIs/Categories tabs, search, and checkboxes
+- Venue Type opens a side drawer with search and checkboxes (recursive tree, API-driven)
+- Both drawers have Cancel/Apply sticky footers and manage local state before persisting
+- POI selections stored in `selectedPOIs` form field
+
+### Line Item Detail Page
+- Full-page DV360-style detail view at `/deals/:dealId/line-items/:lineItemId`
+- Shows summary cards (Budget, Impressions, Revenue, Dates), overview, targeting, inventories, creatives
+- Line item row click in deal page navigates to detail page instead of opening side sheet
+
+### Deal Page - History Button
+- Deal History moved from dropdown menu to icon-only button with tooltip next to Filter icon
+
+### Navigation Flow
+- Line Items → Click row → Line Item Detail page → Edit button → Line Item Form
+- Line Items → Creatives list → Assign Creative → Creative Assignment page → Back/Cancel → Creatives list
+
+## System Architecture
+
+### Frontend Architecture
+- **Framework**: React 18 with TypeScript, built using Vite.
+- **Styling**: Tailwind CSS with custom design tokens, leveraging Radix UI primitives, MWDesign System (`@moving-walls/design-system`), and shadcn/ui patterns.
+- **State Management**: TanStack React Query for server state and Redux Toolkit for geofencing map state.
+- **Forms**: React Hook Form with Zod validation.
+- **Maps**: Mapbox GL for interactive geofencing and location features.
+- **Routing**: wouter for client-side routing.
+- **Internationalization**: Tolgee for multi-language support (English, Japanese, Chinese, Arabic) with in-context editing in development.
+
+### Backend Architecture
+- The current deployment is frontend-only (static site via Vite).
+- The frontend interacts with external API endpoints.
+- Authentication is OAuth-based with SSO integration.
+
+### Project Structure
+- `client/src/`: React frontend application (components, pages, hooks, lib).
+- `shared/`: Shared TypeScript types and schemas.
+- `e2e/`: Playwright end-to-end tests.
+- `docs/`: Documentation.
+- `terraform/`: Infrastructure as Code (AWS).
+- `.ci/`: GitLab CI/CD pipelines.
+
+### Design System
+- Utilizes the `@moving-walls/design-system` npm package, offering 50+ React components and 1000+ Lucide icons.
+- Design tokens are managed via CSS custom properties.
+
+### Feature Specifications
+- **Campaign Management**: Supports DIRECT and PROGRAMMATIC deal modes, with mode-aware wizards for deal creation and line item configuration.
+- **DSP/Buyer Management**: Read-only DSP list and CRUD operations for DSP buyers with real API integration.
+- **Line Item Form**: Single-page form with collapsible accordion sections, a two-column layout (form + sidebar for insights/tips/forecast), and dynamic input types (e.g., pill buttons for ad duration). Includes base pricing fields: `bidFloorBase` (programmatic) and `pricing.cpmBase`/`pricing.estimatedCostBase` (direct) for storing original values before custom fees.
+- **Creative Management**: Split-view assignment page with drag-and-drop from Content Hub, grouped creative requirements, and status tracking.
+- **Content Hub**: Unified page (`content-hub.tsx`) with grid/list views, folder cards, creative preview sheet (tags, status actions, download, transcode, delete), filter drawer, and pagination. All API integrations preserved (useFolders, useCreatives, useDeleteCreative, useApproveCreative, useRejectCreative, useUpdateCreative, useTranscodeCreative, useCreateFolder). The `/creatives` route delegates to this page.
+- **Reporting & Analytics**: Dashboard with key metrics, impression delivery progress, and various reports for performance insights.
+- **New Pages**: Integrates pages for Dashboard, Reports, Signals, Proof of Play, and Integrations with SSP/DSP partners.
+- **Configuration Pages**: Settings (11 config sections), Tags (color-coded tag management), and Custom POIs (geolocation management with upload/create). All UI-only with mock data.
+- **Profile Dropdown**: Settings navigates to in-app /settings page instead of external URL.
+
+## External Dependencies
+
+### Maps & Geolocation
+- **Mapbox GL**: Core mapping library.
+- **Mapbox GL Draw**: For creating and editing geofences.
+- **Mapbox GL Geocoder**: For location search functionality.
+
+### UI Component Libraries
+- **Radix UI**: Provides accessible, unstyled UI primitives.
+- **cmdk**: For command palette interface.
+- **embla-carousel-react**: For carousel components.
+- **date-fns**: For date manipulation and formatting.
+
+### Internationalization
+- **@tolgee/react**: For translation management and in-context editing.
+
+### Testing
+- **Vitest**: For unit testing with `@testing-library/react` and `jsdom`.
+- **Playwright**: For end-to-end testing.
+
+### Infrastructure (Terraform)
+- **AWS Services**: CloudFront, S3, WAF, Route53, ACM for deployment and security.
+
+### Environment Configuration
+- Requires Mapbox API tokens.
+- Requires SSO configuration for authentication.

package/screenshot.mjs

@@ -0,0 +1,24 @@
+import { chromium } from 'playwright';
+
+const browser = await chromium.launch();
+const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
+
+// Go to login page
+await page.goto('http://localhost:5000/login', { waitUntil: 'networkidle', timeout: 30000 });
+await page.waitForTimeout(1000);
+
+// Fill and submit login
+await page.fill('input[type="email"], input[id*="email"], input[name*="email"]', 'jeki@jeki.com');
+await page.fill('input[type="password"], input[id*="password"], input[name*="password"]', 'Jeki@123');
+await page.click('button[type="submit"]');
+
+// Quickly capture the loading state
+await page.waitForTimeout(500);
+await page.screenshot({ path: 'screenshot-auth-loader.png' });
+console.log('Auth loader screenshot taken');
+
+await page.waitForTimeout(3000);
+await page.screenshot({ path: 'screenshot-auth-loader-2.png' });
+console.log('Auth loader 2nd screenshot taken');
+
+await browser.close();

package/scripts/deploy-stg.sh

@@ -0,0 +1,185 @@
+#!/bin/bash
+# Deployment script for MW-Influence-Adserver-FE
+# Uses existing S3 bucket: s3://moving-audience-unified/influence-adserver-stg/
+# CloudFront Distribution: MW-Influence-Adserver-FE (based on Inventory-STG reference)
+
+set -e
+
+echo "======================================"
+echo "MW Influence AdServer - STG Deployment"
+echo "======================================"
+
+# Configuration
+S3_BUCKET="moving-audience-unified"
+S3_PREFIX="influence-adserver-stg"
+CLOUDFRONT_DISTRIBUTION_NAME="MW-Influence-Adserver-FE"
+AWS_REGION="${AWS_REGION:-us-east-1}"
+
+# Colors for output
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+NC='\033[0m' # No Color
+
+# Function to print colored output
+print_info() {
+    echo -e "${GREEN}[INFO]${NC} $1"
+}
+
+print_warning() {
+    echo -e "${YELLOW}[WARN]${NC} $1"
+}
+
+print_error() {
+    echo -e "${RED}[ERROR]${NC} $1"
+}
+
+# Check if AWS CLI is installed
+if ! command -v aws &> /dev/null; then
+    print_error "AWS CLI is not installed. Please install it first."
+    exit 1
+fi
+
+print_info "AWS CLI version: $(aws --version)"
+
+# Check AWS credentials
+print_info "Checking AWS credentials..."
+if ! aws sts get-caller-identity &> /dev/null; then
+    print_error "AWS credentials not configured. Run 'aws configure' first."
+    exit 1
+fi
+
+print_info "AWS Account: $(aws sts get-caller-identity --query Account --output text)"
+
+# Step 1: Build MWDesign
+print_info "Building MWDesign component library..."
+cd MWDesign
+if [ ! -d "node_modules" ]; then
+    print_info "Installing MWDesign dependencies..."
+    npm ci --production=false
+fi
+npm run build:package
+print_info "✅ MWDesign build complete"
+cd ..
+
+# Step 2: Build AdServer Frontend
+print_info "Building AdServer frontend..."
+cd adserver
+if [ ! -d "node_modules" ]; then
+    print_info "Installing adserver dependencies..."
+    npm ci --production=false
+fi
+npm run build:frontend
+print_info "✅ AdServer frontend build complete"
+
+# Step 3: Verify build output
+if [ ! -d "dist/client" ]; then
+    print_error "Build failed - dist/client directory not found"
+    exit 1
+fi
+
+print_info "Build output size: $(du -sh dist/client | cut -f1)"
+
+# Step 4: Sync to S3
+print_info "Deploying to S3: s3://${S3_BUCKET}/${S3_PREFIX}/"
+
+# Sync static assets (JS, CSS, images) with long cache
+print_info "Uploading static assets with cache-control..."
+aws s3 sync dist/client s3://${S3_BUCKET}/${S3_PREFIX}/ \
+    --delete \
+    --cache-control "public, max-age=31536000, immutable" \
+    --exclude "*.html" \
+    --exclude "*.json" \
+    --exclude "service-worker.js" \
+    --region ${AWS_REGION}
+
+# Sync HTML and JSON files with no cache
+print_info "Uploading HTML and JSON files without cache..."
+aws s3 sync dist/client s3://${S3_BUCKET}/${S3_PREFIX}/ \
+    --cache-control "public, max-age=0, must-revalidate" \
+    --exclude "*" \
+    --include "*.html" \
+    --include "*.json" \
+    --include "service-worker.js" \
+    --region ${AWS_REGION}
+
+print_info "✅ S3 sync complete"
+
+# Step 5: Get CloudFront Distribution ID
+print_info "Finding CloudFront distribution ID for ${CLOUDFRONT_DISTRIBUTION_NAME}..."
+DISTRIBUTION_ID=$(aws cloudfront list-distributions \
+    --query "DistributionList.Items[?Comment=='${CLOUDFRONT_DISTRIBUTION_NAME}'].Id | [0]" \
+    --output text \
+    --region us-east-1)
+
+if [ "$DISTRIBUTION_ID" == "None" ] || [ -z "$DISTRIBUTION_ID" ]; then
+    print_warning "CloudFront distribution '${CLOUDFRONT_DISTRIBUTION_NAME}' not found by comment."
+    print_info "Searching by origin domain name..."
+    
+    DISTRIBUTION_ID=$(aws cloudfront list-distributions \
+        --query "DistributionList.Items[?Origins.Items[?DomainName=='${S3_BUCKET}.s3.amazonaws.com']].Id | [0]" \
+        --output text \
+        --region us-east-1)
+    
+    if [ "$DISTRIBUTION_ID" == "None" ] || [ -z "$DISTRIBUTION_ID" ]; then
+        print_error "CloudFront distribution not found. Please set CLOUDFRONT_DISTRIBUTION_ID environment variable."
+        print_info "You can find it by running: aws cloudfront list-distributions --query 'DistributionList.Items[*].[Id,Comment]'"
+        
+        # If CLOUDFRONT_DISTRIBUTION_ID is set, use it
+        if [ ! -z "$CLOUDFRONT_DISTRIBUTION_ID" ]; then
+            DISTRIBUTION_ID=$CLOUDFRONT_DISTRIBUTION_ID
+            print_info "Using distribution ID from environment: $DISTRIBUTION_ID"
+        else
+            exit 1
+        fi
+    fi
+fi
+
+print_info "CloudFront Distribution ID: $DISTRIBUTION_ID"
+
+# Step 6: Invalidate CloudFront Cache
+print_info "Creating CloudFront invalidation..."
+INVALIDATION_ID=$(aws cloudfront create-invalidation \
+    --distribution-id ${DISTRIBUTION_ID} \
+    --paths "/*" \
+    --query 'Invalidation.Id' \
+    --output text \
+    --region us-east-1)
+
+print_info "Invalidation ID: $INVALIDATION_ID"
+print_info "Waiting for invalidation to complete (this may take a few minutes)..."
+
+# Wait for invalidation to complete
+aws cloudfront wait invalidation-completed \
+    --distribution-id ${DISTRIBUTION_ID} \
+    --id ${INVALIDATION_ID} \
+    --region us-east-1 || print_warning "Invalidation is in progress..."
+
+print_info "✅ CloudFront cache invalidated"
+
+# Step 7: Get CloudFront URL
+CLOUDFRONT_URL=$(aws cloudfront get-distribution \
+    --id ${DISTRIBUTION_ID} \
+    --query 'Distribution.DomainName' \
+    --output text \
+    --region us-east-1)
+
+# Summary
+echo ""
+echo "======================================"
+echo "Deployment Summary"
+echo "======================================"
+print_info "Environment: STAGING"
+print_info "S3 Bucket: s3://${S3_BUCKET}/${S3_PREFIX}/"
+print_info "CloudFront Distribution: ${CLOUDFRONT_DISTRIBUTION_NAME}"
+print_info "Distribution ID: ${DISTRIBUTION_ID}"
+print_info "CloudFront URL: https://${CLOUDFRONT_URL}"
+print_info "Invalidation ID: ${INVALIDATION_ID}"
+echo ""
+print_info "✅ Deployment completed successfully!"
+echo ""
+print_info "Test your deployment:"
+print_info "  curl -I https://${CLOUDFRONT_URL}"
+echo "======================================"
+
+cd ..