adserver-dashboard 1.0.0

package/README.md

@@ -0,0 +1,186 @@
+# Ad Server Platform
+
+A comprehensive digital advertising platform for managing campaigns, screens, creatives, and ad delivery with real-time analytics and geofencing capabilities.
+
+## Project Structure
+
+```
+├── client/src/          # React frontend application
+│   ├── components/      # Reusable UI components
+│   ├── pages/           # Page-level components
+│   ├── hooks/           # Custom React hooks
+│   └── lib/             # Utilities and helpers
+├── shared/              # Shared TypeScript types and schemas
+├── e2e/                 # Playwright end-to-end tests
+├── docs/                # Documentation
+├── terraform/           # Infrastructure as code (AWS)
+├── terraform-frontend/  # Frontend-specific Terraform configs
+└── .ci/                 # GitLab CI/CD pipelines
+```
+
+## Quick Start
+
+### Prerequisites
+
+- **Node.js**: v18.x or higher
+- **npm**: Latest stable version
+
+### Installation
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+```
+
+The application will be available at http://localhost:5000
+
+## Tech Stack
+
+### Frontend
+- **React 18** with TypeScript
+- **Vite** for build tooling
+- **Tailwind CSS** for styling
+- **@moving-walls/design-system** - UI component library (npm package)
+- **TanStack React Query** for server state
+- **Redux Toolkit** for geofencing state management
+- **React Hook Form + Zod** for form validation
+- **Mapbox GL** for maps and geofencing
+
+### Key Features
+- Campaign management with deal workflows
+- Screen/display management
+- Creative library with drag-and-drop upload
+- Real-time ad serving
+- SSO authentication
+- Geofencing capabilities with map drawing tools
+- Analytics and reporting
+- Multi-language support (i18n) - English, Japanese, Chinese, Arabic
+- Programmatic and Direct deal modes
+- AI-powered inventory recommendations
+
+## Recent Updates (January 2026)
+
+### Internationalization (i18n) - 100% Coverage
+- **4 Languages**: English, Japanese (日本語), Chinese (中文), Arabic (العربية) with RTL support
+- **13 Namespaces**: common, deals, creatives, navigation, dsp, buyer, contentHub, wizard, campaigns, inventory, lineItems, approval, dashboard
+- **Full Coverage**: All 22 pages and 75+ components translated
+- **Translation Style**: Japanese formal keigo, Simplified Chinese, Modern Standard Arabic
+
+### Programmatic Deals Support
+- **Deal Modes**: DIRECT and PROGRAMMATIC modes with mode-aware wizard
+- **Deal Types**: GUARANTEED, PREFERRED_DEAL, PRIVATE_AUCTION, EVERGREEN_PMP, DIRECT
+- **Mode-aware Line Items**: Different field sets for Direct vs Programmatic deals
+- **API Payload Builders**: Separate payload construction for each mode
+
+### DSP & Buyer Management
+- Complete CRUD functionality for DSP management
+- Buyer management with seat ID and account linking
+- Multi-language support across all management screens
+
+## Development Commands
+
+```bash
+npm run dev              # Start development server (port 5000)
+npm run build            # Build for production
+npm run preview          # Preview production build
+npm run check            # TypeScript type checking
+npm test                 # Run unit tests
+npm run test:coverage    # Run tests with coverage report
+npm run test:e2e         # Run Playwright end-to-end tests
+```
+
+## Environment Variables
+
+Create a `.env` file in the root directory:
+
+```env
+# API Configuration
+VITE_API_URL=https://api.example.com
+
+# Mapbox (for geofencing features)
+VITE_MAPBOX_TOKEN=your_mapbox_token
+
+# OAuth Configuration
+VITE_OAUTH_CLIENT_ID=your_client_id
+VITE_OAUTH_REDIRECT_URI=http://localhost:5000/auth/callback
+```
+
+## Deployment
+
+### Static Site Deployment (S3 + CloudFront)
+
+The application is deployed as a static site:
+
+1. **Build the application**
+   ```bash
+   npm run build
+   ```
+
+2. **Upload to S3**
+   ```bash
+   aws s3 sync dist/client/ s3://your-bucket-name/
+   ```
+
+3. **Invalidate CloudFront cache**
+   ```bash
+   aws cloudfront create-invalidation --distribution-id YOUR_DIST_ID --paths "/*"
+   ```
+
+### CI/CD
+
+GitLab CI/CD is configured in `.ci/staging.yml`:
+- Builds on push to `stg` branch
+- Deploys to S3 bucket
+- Invalidates CloudFront cache
+
+## Testing
+
+### Unit Tests (Vitest)
+```bash
+npm test                 # Run all tests
+npm run test:watch       # Watch mode
+npm run test:coverage    # With coverage report
+```
+
+### End-to-End Tests (Playwright)
+```bash
+npm run playwright:install   # Install browsers (first time)
+npm run test:e2e            # Run tests
+npm run test:e2e:ui         # Interactive UI mode
+npm run test:e2e:headed     # Watch tests run
+```
+
+## Infrastructure
+
+Terraform configurations are provided for AWS deployment:
+- **CloudFront** - CDN for frontend assets
+- **S3** - Storage for build artifacts and creatives
+- **WAF** - Web Application Firewall
+- **Route53** - DNS management
+- **ACM** - SSL/TLS certificates
+
+See `terraform/` and `terraform-frontend/` directories.
+
+## Security
+
+- Keep `.env` files secure and never commit them
+- Use HTTPS in production
+- Enable CORS only for trusted domains
+- Keep dependencies updated
+
+## Documentation
+
+- [AI Reference](docs/AI_REFERENCE.md) - Coding standards for AI agents
+- [GitLab Setup](GITLAB_SETUP.md) - Repository connection guide
+
+## License
+
+MIT License
+
+---
+
+**Last Updated**: January 2026
+**Maintained by**: Moving Walls Development Team

package/client/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <meta name="description" content="Comprehensive Out-of-Home advertising inventory and campaign management platform with programmatic deals integration" />
+
+    <!-- PWA manifest -->
+    <link rel="manifest" href="/manifest.json" />
+
+    <!-- Theme color for browser chrome (matches MW primary blue) -->
+    <meta name="theme-color" content="#2483C5" />
+
+    <!-- iOS PWA support -->
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+    <meta name="apple-mobile-web-app-title" content="Influence" />
+    <link rel="apple-touch-icon" href="/img/MW-logo-trans_1754045676555.png" />
+
+    <!-- Favicon -->
+    <link rel="icon" type="image/png" href="/img/MW-logo-trans_1754045676555.png" />
+
+    <title>MW Influence</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>