adserver-dashboard 1.0.0

package/tailwind.config.ts

@@ -0,0 +1,282 @@
+import type { Config } from "tailwindcss";
+
+export default {
+  darkMode: ["class"],
+  content: [
+    "./client/index.html",
+    "./client/src/**/*.{js,jsx,ts,tsx}",
+    "./node_modules/@moving-walls/design-system/dist/**/*.{js,mjs}",
+  ],
+  theme: {
+    extend: {
+      spacing: {
+        '18': '4.5rem', // 72px - for header height
+      },
+      borderRadius: {
+        lg: ".5625rem", /* 9px */
+        md: ".375rem", /* 6px */
+        sm: ".1875rem", /* 3px */
+        "2xs": "var(--radius-2xs)",
+        xs: "var(--radius-xs)",
+        s: "var(--radius-s)",
+        m: "var(--radius-m)",
+        l: "var(--radius-l)",
+        xl: "var(--radius-xl)",
+        "2xl": "var(--radius-2xl)",
+        "3xl": "var(--radius-3xl)",
+        "4xl": "var(--radius-4xl)",
+        "5xl": "var(--radius-5xl)",
+      },
+      colors: {
+        // Moving Walls Brand Colors
+        "container-border": "var(--color-container-border)",
+        "mw-primary": {
+          50: "var(--color-mw-primary-50)",
+          100: "var(--color-mw-primary-100)",
+          200: "var(--color-mw-primary-200)",
+          300: "var(--color-mw-primary-300)",
+          400: "var(--color-mw-primary-400)",
+          500: "var(--color-mw-primary-500)",
+          600: "var(--color-mw-primary-600)",
+          700: "var(--color-mw-primary-700)",
+          800: "var(--color-mw-primary-800)",
+          900: "var(--color-mw-primary-900)",
+        },
+        "mw-secondary": {
+          50: "var(--color-mw-secondary-50)",
+          100: "var(--color-mw-secondary-100)",
+          200: "var(--color-mw-secondary-200)",
+          300: "var(--color-mw-secondary-300)",
+          400: "var(--color-mw-secondary-400)",
+          500: "var(--color-mw-secondary-500)",
+          600: "var(--color-mw-secondary-600)",
+          700: "var(--color-mw-secondary-700)",
+          800: "var(--color-mw-secondary-800)",
+          900: "var(--color-mw-secondary-900)",
+        },
+        "mw-neutral": {
+          50: "var(--color-mw-neutral-50)",
+          100: "var(--color-mw-neutral-100)",
+          200: "var(--color-mw-neutral-200)",
+          300: "var(--color-mw-neutral-300)",
+          400: "var(--color-mw-neutral-400)",
+          500: "var(--color-mw-neutral-500)",
+          600: "var(--color-mw-neutral-600)",
+          700: "var(--color-mw-neutral-700)",
+          800: "var(--color-mw-neutral-800)",
+          900: "var(--color-mw-neutral-900)",
+        },
+        "mw-success": {
+          50: "var(--color-mw-success-50)",
+          100: "var(--color-mw-success-100)",
+          200: "var(--color-mw-success-200)",
+          300: "var(--color-mw-success-300)",
+          400: "var(--color-mw-success-400)",
+          500: "var(--color-mw-success-500)",
+          600: "var(--color-mw-success-600)",
+          700: "var(--color-mw-success-700)",
+          800: "var(--color-mw-success-800)",
+          900: "var(--color-mw-success-900)",
+        },
+        "mw-error": {
+          50: "var(--color-mw-error-50)",
+          100: "var(--color-mw-error-100)",
+          200: "var(--color-mw-error-200)",
+          300: "var(--color-mw-error-300)",
+          400: "var(--color-mw-error-400)",
+          500: "var(--color-mw-error-500)",
+          600: "var(--color-mw-error-600)",
+          700: "var(--color-mw-error-700)",
+          800: "var(--color-mw-error-800)",
+          900: "var(--color-mw-error-900)",
+        },
+        "mw-warning": {
+          50: "var(--color-mw-warning-50)",
+          100: "var(--color-mw-warning-100)",
+          200: "var(--color-mw-warning-200)",
+          300: "var(--color-mw-warning-300)",
+          400: "var(--color-mw-warning-400)",
+          500: "var(--color-mw-warning-500)",
+          600: "var(--color-mw-warning-600)",
+          700: "var(--color-mw-warning-700)",
+          800: "var(--color-mw-warning-800)",
+          900: "var(--color-mw-warning-900)",
+        },
+        "mw-info": {
+          50: "var(--color-mw-info-50)",
+          100: "var(--color-mw-info-100)",
+          200: "var(--color-mw-info-200)",
+          300: "var(--color-mw-info-300)",
+          400: "var(--color-mw-info-400)",
+          500: "var(--color-mw-info-500)",
+          600: "var(--color-mw-info-600)",
+          700: "var(--color-mw-info-700)",
+          800: "var(--color-mw-info-800)",
+          900: "var(--color-mw-info-900)",
+        },
+        // Extended palettes (aligned with mw-planner-FE)
+        "mw-purple": {
+          50: "var(--color-mw-purple-50, #ece1eb)",
+          500: "var(--color-mw-purple-500, #7e537a)",
+          600: "var(--color-mw-purple-600, #5f3e5c)",
+        },
+        "mw-purple-warning": {
+          50: "var(--color-mw-purple-warning-50, #f3ebfe)",
+          500: "var(--color-mw-purple-warning-500, #8a38f5)",
+        },
+        "mw-orange-warning": {
+          50: "var(--color-mw-orange-warning-50, #fef1eb)",
+          500: "var(--color-mw-orange-warning-500, #f57738)",
+          800: "var(--color-mw-orange-warning-800, #883d1b)",
+        },
+        "mw-light-green": {
+          50: "var(--color-mw-light-green-50, #f3f7e8)",
+          500: "var(--color-mw-light-green-500, #8bc24b)",
+          600: "var(--color-mw-light-green-600, #7cb243)",
+        },
+        "mw-blush-grey": {
+          50: "var(--color-mw-blush-grey-50, #c8d7dc)",
+          500: "var(--color-mw-blush-grey-500, #486a74)",
+        },
+        "mw-teal": {
+          600: "var(--color-mw-teal-600, #0c6e64)",
+        },
+        "mw-dark-grey": {
+          50: "var(--color-mw-dark-grey-50, #f2f2f2)",
+          100: "var(--color-mw-dark-grey-100, #d7d7d7)",
+        },
+        // Backward-compat aliases for design system components using legacy names
+        "mw-gray": {
+          50: "var(--color-mw-neutral-50)",
+          100: "var(--color-mw-neutral-100)",
+          200: "var(--color-mw-neutral-200)",
+          300: "var(--color-mw-neutral-300)",
+          400: "var(--color-mw-neutral-400)",
+          500: "var(--color-mw-neutral-500)",
+          600: "var(--color-mw-neutral-600)",
+          700: "var(--color-mw-neutral-700)",
+          800: "var(--color-mw-neutral-800)",
+          900: "var(--color-mw-neutral-900)",
+        },
+        "mw-blue": {
+          50: "var(--color-mw-primary-50)",
+          100: "var(--color-mw-primary-100)",
+          200: "var(--color-mw-primary-200)",
+          300: "var(--color-mw-primary-300)",
+          400: "var(--color-mw-primary-400)",
+          500: "var(--color-mw-primary-500)",
+          600: "var(--color-mw-primary-600)",
+          700: "var(--color-mw-primary-700)",
+          800: "var(--color-mw-primary-800)",
+          900: "var(--color-mw-primary-900)",
+        },
+        // Flat / base colors (regular buttons)
+        background: "hsl(var(--background) / <alpha-value>)",
+        foreground: "hsl(var(--foreground) / <alpha-value>)",
+        border: "hsl(var(--border) / <alpha-value>)",
+        input: "hsl(var(--input) / <alpha-value>)",
+        card: {
+          DEFAULT: "hsl(var(--card) / <alpha-value>)",
+          foreground: "hsl(var(--card-foreground) / <alpha-value>)",
+          border: "hsl(var(--card-border) / <alpha-value>)",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover) / <alpha-value>)",
+          foreground: "hsl(var(--popover-foreground) / <alpha-value>)",
+          border: "hsl(var(--popover-border) / <alpha-value>)",
+        },
+        primary: {
+          DEFAULT: "hsl(var(--primary) / <alpha-value>)",
+          foreground: "hsl(var(--primary-foreground) / <alpha-value>)",
+          border: "var(--primary-border)",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
+          foreground: "hsl(var(--secondary-foreground) / <alpha-value>)",
+          border: "var(--secondary-border)",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted) / <alpha-value>)",
+          foreground: "hsl(var(--muted-foreground) / <alpha-value>)",
+          border: "var(--muted-border)",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent) / <alpha-value>)",
+          foreground: "hsl(var(--accent-foreground) / <alpha-value>)",
+          border: "var(--accent-border)",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
+          foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",
+          border: "var(--destructive-border)",
+        },
+        ring: "hsl(var(--ring) / <alpha-value>)",
+        chart: {
+          "1": "hsl(var(--chart-1) / <alpha-value>)",
+          "2": "hsl(var(--chart-2) / <alpha-value>)",
+          "3": "hsl(var(--chart-3) / <alpha-value>)",
+          "4": "hsl(var(--chart-4) / <alpha-value>)",
+          "5": "hsl(var(--chart-5) / <alpha-value>)",
+        },
+        sidebar: {
+          ring: "hsl(var(--sidebar-ring) / <alpha-value>)",
+          DEFAULT: "hsl(var(--sidebar) / <alpha-value>)",
+          foreground: "hsl(var(--sidebar-foreground) / <alpha-value>)",
+          border: "hsl(var(--sidebar-border) / <alpha-value>)",
+        },
+        "sidebar-primary": {
+          DEFAULT: "hsl(var(--sidebar-primary) / <alpha-value>)",
+          foreground: "hsl(var(--sidebar-primary-foreground) / <alpha-value>)",
+          border: "var(--sidebar-primary-border)",
+        },
+        "sidebar-accent": {
+          DEFAULT: "hsl(var(--sidebar-accent) / <alpha-value>)",
+          foreground: "hsl(var(--sidebar-accent-foreground) / <alpha-value>)",
+          border: "var(--sidebar-accent-border)"
+        },
+        status: {
+          online: "rgb(34 197 94)",
+          away: "rgb(245 158 11)",
+          busy: "rgb(239 68 68)",
+          offline: "rgb(156 163 175)",
+        },
+        success: {
+          DEFAULT: "hsl(var(--success) / <alpha-value>)",
+          foreground: "hsl(var(--success-foreground) / <alpha-value>)",
+        },
+        warning: {
+          DEFAULT: "hsl(var(--warning) / <alpha-value>)",
+          foreground: "hsl(var(--warning-foreground) / <alpha-value>)",
+        },
+        error: {
+          DEFAULT: "hsl(var(--error) / <alpha-value>)",
+          foreground: "hsl(var(--error-foreground) / <alpha-value>)",
+        },
+        info: {
+          DEFAULT: "hsl(var(--info) / <alpha-value>)",
+          foreground: "hsl(var(--info-foreground) / <alpha-value>)",
+        },
+      },
+      fontFamily: {
+        sans: ["Poppins", "var(--font-sans)", "ui-sans-serif", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "sans-serif"],
+        serif: ["var(--font-serif)"],
+        mono: ["var(--font-mono)"],
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
+} satisfies Config;

package/terraform/README.md

@@ -0,0 +1,306 @@
+# Terraform Infrastructure for Ad Server Platform
+
+This directory contains Terraform configurations for deploying the Ad Server platform to AWS with CloudFront CDN.
+
+## Architecture Overview
+
+The infrastructure includes:
+- **CloudFront** - Global CDN for frontend and static assets
+- **S3** - Storage for frontend build and creative assets
+- **ECS Fargate** - Containerized backend API
+- **Application Load Balancer** - Traffic distribution for ECS
+- **WAF** - Web Application Firewall for security
+- **ACM** - SSL/TLS certificates
+- **Route53** - DNS management
+- **ECR** - Docker image registry
+- **CloudWatch** - Logging and monitoring
+
+## Prerequisites
+
+1. **AWS Account** with appropriate permissions
+2. **Terraform** >= 1.0 installed
+3. **AWS CLI** configured with credentials
+4. **Route53 Hosted Zone** for your domain
+5. **PostgreSQL Database** (Neon, RDS, or external)
+
+## File Structure
+
+```
+terraform/
+├── main.tf                 # Provider and backend configuration
+├── variables.tf            # Variable definitions
+├── outputs.tf              # Output values
+├── s3.tf                   # S3 buckets for frontend and assets
+├── cloudfront.tf           # CloudFront distribution
+├── ecs.tf                  # ECS cluster, tasks, and services
+├── waf.tf                  # WAF rules and configuration
+├── environments/
+│   ├── dev.tfvars         # Development environment
+│   └── production.tfvars  # Production environment
+└── README.md              # This file
+```
+
+## Quick Start
+
+### 1. Initialize Terraform
+
+```bash
+cd terraform
+terraform init
+```
+
+### 2. Create S3 Backend (First Time Only)
+
+Before running Terraform, create the S3 bucket and DynamoDB table for state management:
+
+```bash
+aws s3api create-bucket \
+  --bucket adserver-terraform-state \
+  --region us-east-1
+
+aws s3api put-bucket-versioning \
+  --bucket adserver-terraform-state \
+  --versioning-configuration Status=Enabled
+
+aws dynamodb create-table \
+  --table-name adserver-terraform-locks \
+  --attribute-definitions AttributeName=LockID,AttributeType=S \
+  --key-schema AttributeName=LockID,KeyType=HASH \
+  --billing-mode PAY_PER_REQUEST \
+  --region us-east-1
+```
+
+### 3. Configure Environment Variables
+
+Edit the appropriate `.tfvars` file:
+
+```bash
+# For development
+nano environments/dev.tfvars
+
+# For production
+nano environments/production.tfvars
+```
+
+Update the following values:
+- `hosted_zone_id` - Your Route53 Hosted Zone ID
+- `domain_name` - Your domain name
+- `database_url` - Your PostgreSQL connection string
+- `session_secret` - A secure random string
+
+### 4. Plan Deployment
+
+```bash
+# Development
+terraform plan -var-file=environments/dev.tfvars
+
+# Production
+terraform plan -var-file=environments/production.tfvars
+```
+
+### 5. Apply Configuration
+
+```bash
+# Development
+terraform apply -var-file=environments/dev.tfvars
+
+# Production
+terraform apply -var-file=environments/production.tfvars
+```
+
+## Deployment Workflow
+
+### Initial Setup
+
+1. **Deploy Infrastructure**
+   ```bash
+   terraform apply -var-file=environments/production.tfvars
+   ```
+
+2. **Build and Push Docker Image**
+   ```bash
+   # Get ECR login
+   aws ecr get-login-password --region us-east-1 | \
+     docker login --username AWS --password-stdin <ECR_URL>
+   
+   # Build image
+   docker build -t adserver:latest .
+   
+   # Tag and push
+   docker tag adserver:latest <ECR_URL>:latest
+   docker push <ECR_URL>:latest
+   ```
+
+3. **Deploy Frontend to S3**
+   ```bash
+   # Build frontend
+   cd adserver
+   npm run build
+   
+   # Sync to S3
+   aws s3 sync dist/client s3://adserver-prod-frontend/ --delete
+   
+   # Invalidate CloudFront cache
+   aws cloudfront create-invalidation \
+     --distribution-id <DISTRIBUTION_ID> \
+     --paths "/*"
+   ```
+
+### CI/CD Integration
+
+The GitLab CI/CD pipeline (`.gitlab-ci.yml`) automatically:
+1. Builds the Docker image
+2. Pushes to ECR
+3. Updates ECS service
+4. Deploys frontend to S3
+5. Invalidates CloudFront cache
+
+## Resource Naming Convention
+
+Resources are named using the pattern:
+```
+{project_name}-{environment}-{resource_type}
+```
+
+Example: `adserver-production-cluster`
+
+## Cost Optimization
+
+### Development Environment
+- Reduced ECS task resources (512 CPU, 1024 Memory)
+- Single ECS task instance
+- Disabled auto-scaling
+- Disabled WAF
+- Shorter log retention (7 days)
+- No access logs
+
+### Production Environment
+- Higher ECS task resources (1024 CPU, 2048 Memory)
+- Multiple ECS task instances (3+)
+- Enabled auto-scaling
+- Enabled WAF protection
+- Longer log retention (90 days)
+- Access logs enabled
+
+## Security Best Practices
+
+1. **Secrets Management**
+   - Store sensitive values in AWS Secrets Manager
+   - Use environment variables for ECS tasks
+   - Never commit secrets to version control
+
+2. **Network Security**
+   - ECS tasks in private subnets
+   - ALB in public subnets
+   - Security groups restrict access
+   - VPC endpoints for AWS services
+
+3. **WAF Protection**
+   - Rate limiting enabled
+   - AWS managed rule sets
+   - SQL injection prevention
+   - Known bad inputs blocking
+
+4. **Encryption**
+   - S3 buckets encrypted (AES256)
+   - CloudFront HTTPS only
+   - Secrets Manager encryption
+   - ECS task encryption
+
+## Monitoring and Logging
+
+### CloudWatch Logs
+- ECS container logs: `/ecs/adserver-{env}`
+- WAF logs: `/aws/wafv2/adserver-{env}`
+
+### CloudWatch Metrics
+- ECS service metrics (CPU, Memory, Tasks)
+- ALB metrics (Request count, Target health)
+- CloudFront metrics (Requests, Bytes)
+- WAF metrics (Blocked requests, Rate limits)
+
+### Alarms (Optional)
+Create CloudWatch alarms for:
+- High CPU/Memory utilization
+- Failed health checks
+- 4xx/5xx error rates
+- WAF blocked requests
+
+## Troubleshooting
+
+### ECS Tasks Not Starting
+1. Check CloudWatch logs for errors
+2. Verify ECR image exists
+3. Check security group rules
+4. Verify IAM roles have correct permissions
+
+### CloudFront Not Serving Content
+1. Check S3 bucket policy
+2. Verify Origin Access Control configuration
+3. Check CloudFront distribution status
+4. Review CloudFront error responses
+
+### Database Connection Issues
+1. Verify database URL in Secrets Manager
+2. Check ECS task security group
+3. Verify database security group allows ECS
+4. Test database connectivity from ECS task
+
+## Updating Infrastructure
+
+### Modify Variables
+```bash
+# Edit tfvars file
+nano environments/production.tfvars
+
+# Plan changes
+terraform plan -var-file=environments/production.tfvars
+
+# Apply changes
+terraform apply -var-file=environments/production.tfvars
+```
+
+### Update ECS Service
+```bash
+# Force new deployment with latest image
+aws ecs update-service \
+  --cluster adserver-production-cluster \
+  --service adserver-production-service \
+  --force-new-deployment
+```
+
+### Invalidate CloudFront Cache
+```bash
+aws cloudfront create-invalidation \
+  --distribution-id <DISTRIBUTION_ID> \
+  --paths "/*"
+```
+
+## Cleanup
+
+To destroy all resources:
+
+```bash
+# Development
+terraform destroy -var-file=environments/dev.tfvars
+
+# Production
+terraform destroy -var-file=environments/production.tfvars
+```
+
+**Warning**: This will delete all resources including data in S3 buckets. Make backups before destroying production infrastructure.
+
+## Support
+
+For issues or questions:
+- Check CloudWatch logs
+- Review Terraform plan output
+- Consult AWS documentation
+- Contact DevOps team
+
+## Additional Resources
+
+- [AWS CloudFront Documentation](https://docs.aws.amazon.com/cloudfront/)
+- [AWS ECS Documentation](https://docs.aws.amazon.com/ecs/)
+- [Terraform AWS Provider](https://registry.terraform.io/providers/hashicorp/aws/latest/docs)
+- [AWS WAF Documentation](https://docs.aws.amazon.com/waf/)