feat: Implement core CMS features including workflow management, admin dashboard, API infrastructure, queueing system, and new UI components.

ARCHITECTURE.md

@@ -0,0 +1,294 @@
+# Architecture Documentation
+
+## System Overview
+
+AutoLoop is a Next.js 15 based email automation and workflow management system built with enterprise-grade security, caching, and performance optimization.
+
+## Technology Stack
+
+- **Frontend**: React 19.2.3, Next.js 15, TypeScript, Tailwind CSS
+- **Backend**: Next.js App Router, NextAuth.js v5, Server Actions
+- **Database**: PostgreSQL with Drizzle ORM
+- **Cache**: Redis with pattern-based invalidation
+- **Task Queue**: BullMQ for background jobs
+- **Authentication**: NextAuth.js with OAuth (Google, GitHub), Credentials
+- **Validation**: Zod schemas for type-safe validation
+- **Error Tracking**: Sentry
+- **Monitoring**: Web Vitals, custom performance tracking
+
+## Directory Structure
+
+```
+/app                  - Next.js App Router pages and API routes
+  /api               - REST API endpoints
+  /auth              - Authentication pages
+  /dashboard         - Dashboard pages
+  /actions           - Server actions
+
+/components          - React components
+  /ui               - Base UI components
+  /admin            - Admin-only components
+  /dashboard        - Dashboard components
+
+/lib                 - Utilities and business logic
+  /api-*             - API-related utilities
+  /auth-*            - Authentication utilities
+  /validation        - Input validation schemas
+  /sanitize          - XSS prevention
+  /cache-*           - Caching layer
+  /rate-limit        - Rate limiting
+  /csrf              - CSRF protection
+  /logger            - Logging system
+  /feature-flags     - Feature management
+  /environment-*     - Configuration
+
+/db                  - Database configuration
+  /schema            - Drizzle ORM schemas
+  /indexes           - Database indexes
+
+/public              - Static assets
+
+/__tests__           - Unit tests
+/e2e                 - E2E tests with Playwright
+
+/types               - TypeScript type definitions
+
+/hooks               - Custom React hooks
+
+/styles              - Global styles
+
+/docs                - Documentation
+```
+
+## Core Features
+
+### 1. Authentication & Authorization
+- **Multi-Provider Support**: Google, GitHub, Credentials, WhatsApp OTP
+- **NextAuth.js v5**: Session management with JWT
+- **Rate Limiting**: Per-endpoint configuration
+- **Brute-Force Protection**: Progressive delays, account lockout
+- **CSRF Protection**: Timing-safe token validation
+- **API Key Auth**: For external service integrations
+
+### 2. Caching Strategy
+- **Redis Cache**: Distributed caching with pattern-based invalidation
+- **Query-Level Caching**: 
+  - Businesses: 10-minute TTL
+  - Workflows: 5-minute TTL
+  - Templates: 15-minute TTL
+- **Cache Invalidation**: Automatic on mutations (POST/PATCH/DELETE)
+- **Cache Bypass**: Support for force-refresh via headers
+
+### 3. Security Measures
+- **Input Validation**: Zod schemas for all inputs
+- **XSS Prevention**: DOMPurify sanitization
+- **SQL Injection Prevention**: Parameterized queries via Drizzle ORM
+- **Security Headers**:
+  - Content-Security-Policy
+  - X-Frame-Options: DENY
+  - X-Content-Type-Options: nosniff
+  - Referrer-Policy: strict-origin-when-cross-origin
+  - Permissions-Policy: camera=(), microphone=(), geolocation=()
+
+### 4. Performance Optimization
+- **Code Splitting**: Webpack optimization with vendor separation
+- **Dynamic Imports**: Lazy loading of heavy components
+- **Database Indexes**: On userId, email, status, createdAt fields
+- **Web Vitals Tracking**: LCP, FID, CLS monitoring
+- **API Performance**: Response time tracking and slow query logging
+- **Bundle Analysis**: @next/bundle-analyzer integration
+
+### 5. Error Handling
+- **Global Error Boundary**: Catches component errors
+- **API Error Responses**: Standardized format with error codes
+- **Sentry Integration**: Error tracking and reporting
+- **Detailed Logging**: Structured JSON logs with context
+
+### 6. Database Design
+
+#### Core Tables
+- `users`: User accounts and authentication
+- `businesses`: Business entities
+- `automation_workflows`: Workflow definitions
+- `email_templates`: Email templates
+- `email_logs`: Sent email tracking
+- `business_contacts`: Contact management
+- `campaign_analytics`: Campaign metrics
+
+#### Indexes
+```sql
+-- Users table
+CREATE INDEX idx_users_email ON users(email);
+CREATE INDEX idx_users_created_at ON users(created_at);
+
+-- Businesses table
+CREATE INDEX idx_businesses_user_id ON businesses(user_id);
+CREATE INDEX idx_businesses_email ON businesses(email);
+CREATE INDEX idx_businesses_status ON businesses(status);
+CREATE INDEX idx_businesses_created_at ON businesses(created_at);
+
+-- Workflows table
+CREATE INDEX idx_workflows_user_id ON automationWorkflows(user_id);
+CREATE INDEX idx_workflows_is_active ON automationWorkflows(is_active);
+
+-- Email Logs table
+CREATE INDEX idx_email_logs_business_id ON emailLogs(business_id);
+CREATE INDEX idx_email_logs_status ON emailLogs(status);
+CREATE INDEX idx_email_logs_sent_at ON emailLogs(sent_at);
+```
+
+## Request Flow
+
+### Authentication Flow
+1. User submits login/signup form
+2. Form validates input (client-side)
+3. POST to `/api/auth/signin` or `/api/auth/signup`
+4. Server validates with Zod schemas
+5. Rate limiting check
+6. Password hashing with bcrypt
+7. JWT token generation
+8. Session establishment
+9. Redirect to dashboard
+
+### API Request Flow
+1. Client sends request with auth token and CSRF token
+2. Middleware validates request
+3. Rate limiting check
+4. User authentication verification
+5. Check Redis cache (GET requests)
+6. Execute business logic
+7. Validate output
+8. Cache result (if applicable)
+9. Return response with performance headers
+
+### Caching Flow
+1. Incoming GET request
+2. Generate cache key from endpoint + filters
+3. Check Redis for cached value
+4. If hit: return cached data with X-Cache: hit header
+5. If miss: fetch from database
+6. Validate response
+7. Cache with appropriate TTL
+8. Return data with X-Cache: miss header
+9. On mutation (PATCH/DELETE): invalidate related cache patterns
+
+## Data Validation Pipeline
+
+1. **Client-Side**: React Hook Form + Zod schemas
+2. **Server-Side**: Zod schema validation
+3. **Database**: Column constraints and foreign keys
+4. **Output**: Response validation before sending to client
+
+## Error Handling Strategy
+
+### Error Levels
+- **Client Validation**: Form validation messages
+- **Server Validation**: 400 Bad Request with error details
+- **Authentication**: 401 Unauthorized with retry instructions
+- **Authorization**: 403 Forbidden
+- **Rate Limited**: 429 Too Many Requests with Retry-After header
+- **Server Error**: 500 with Sentry tracking
+
+### Error Response Format
+```json
+{
+  "success": false,
+  "error": "Human-readable error message",
+  "code": "ERROR_CODE",
+  "details": {
+    "field": ["error message"]
+  },
+  "timestamp": "ISO8601 timestamp"
+}
+```
+
+## Feature Flags
+
+Located in `lib/feature-flags.ts`:
+- Email notifications
+- Two-factor authentication (10% rollout)
+- Advanced analytics
+- AI-powered suggestions (5% rollout)
+- New dashboard UI (experimental, 20% rollout)
+
+Flags support:
+- Percentage-based rollout
+- User whitelisting/blacklisting
+- A/B testing groups
+- Admin overrides
+
+## Deployment Architecture
+
+### Environment Stages
+1. **Development**: Local with hot-reload
+2. **Staging**: Production-like environment for testing
+3. **Production**: Live environment
+
+### Deployment Pipeline
+1. Code push to main branch
+2. GitHub Actions CI/CD triggered
+3. Run linting and type-check
+4. Run test suite
+5. Build optimization analysis
+6. Deploy to staging
+7. Run E2E tests on staging
+8. Manual approval for production
+9. Deploy to production with health checks
+10. Automatic rollback on critical errors
+
+## Monitoring & Observability
+
+### Metrics Tracked
+- Page load times (LCP, FID, CLS)
+- API response times
+- Error rates
+- Cache hit/miss rates
+- Database query times
+- User actions and flows
+
+### Log Levels
+- DEBUG: Detailed debugging information
+- INFO: General information
+- WARN: Warning messages (slow queries, high latency)
+- ERROR: Error messages with stack traces
+
+### Alerting
+- Sentry: Critical errors
+- Performance: Alerts for slow requests (>1s)
+- Security: Suspicious activity, rate limit violations
+- Uptime: Endpoint availability checks
+
+## Security Audit Checklist
+
+- ✅ CSRF protection on state-changing operations
+- ✅ Rate limiting on authentication endpoints
+- ✅ Input validation and sanitization
+- ✅ Output encoding to prevent XSS
+- ✅ SQL injection prevention via ORM
+- ✅ Authentication token management
+- ✅ Password hashing with bcrypt
+- ✅ Secure session management
+- ✅ Security headers configured
+- ✅ API key authentication for services
+- ✅ Brute-force protection
+- ✅ Audit logging for sensitive operations
+
+## Performance Targets
+
+- **First Contentful Paint (FCP)**: < 1.8s
+- **Largest Contentful Paint (LCP)**: < 2.5s
+- **First Input Delay (FID)**: < 100ms
+- **Cumulative Layout Shift (CLS)**: < 0.1
+- **Time to Interactive (TTI)**: < 3.8s
+- **API Response Time**: < 200ms (p95)
+- **Cache Hit Rate**: > 60%
+- **Bundle Size**: < 50KB (main)
+
+## Scaling Considerations
+
+- Horizontal scaling via containerization (Docker)
+- Database connection pooling with Neon
+- Redis cluster for distributed caching
+- BullMQ for job queue scaling
+- CDN for static assets
+- Load balancing across instances

DEPLOYMENT.md

@@ -0,0 +1,354 @@
+# AutoLoop Deployment Guide
+
+## Prerequisites
+
+### System Requirements
+- Node.js 18+ (LTS recommended)
+- PostgreSQL 14+
+- pnpm 8+ (or npm/yarn)
+- Redis (optional, for caching and queues)
+
+### Required Accounts
+- Google Cloud Platform (for OAuth, Gmail API)
+- Facebook Developer Account (for social automation)
+- Database hosting (Neon, Supabase, or self-hosted PostgreSQL)
+
+## Environment Setup
+
+### 1. Clone Repository
+```bash
+git clone <repository-url>
+cd autoloop
+```
+
+### 2. Install Dependencies
+```bash
+pnpm install
+```
+
+### 3. Configure Environment Variables
+
+Create `.env.local`:
+
+```env
+# Database
+DATABASE_URL=postgresql://user:password@host:5432/autoloop
+
+# NextAuth
+NEXTAUTH_SECRET=<generate-with: openssl rand -base64 32>
+NEXTAUTH_URL=http://localhost:3000
+
+# Google OAuth (for Gmail and Google login)
+GOOGLE_CLIENT_ID=your-client-id.apps.googleusercontent.com
+GOOGLE_CLIENT_SECRET=your-client-secret
+GOOGLE_REDIRECT_URI=http://localhost:3000/api/auth/callback/google
+
+# Facebook (for social automation)
+FACEBOOK_APP_ID=your-facebook-app-id
+FACEBOOK_APP_SECRET=your-facebook-app-secret
+FACEBOOK_WEBHOOK_VERIFY_TOKEN=your-custom-verify-token
+
+# LinkedIn (optional)
+LINKEDIN_CLIENT_ID=your-linkedin-client-id
+LINKEDIN_CLIENT_SECRET=your-linkedin-client-secret
+
+# Admin
+ADMIN_EMAIL=admin@yourdomain.com
+
+# Workers
+START_WORKERS=false  # Set to true in production
+
+# Optional: Redis
+REDIS_URL=redis://localhost:6379
+
+# Optional: Gemini API (for AI features)
+GEMINI_API_KEY=your-gemini-api-key
+```
+
+### 4. Database Setup
+
+```bash
+# Push schema to database
+pnpm run db:push
+
+# Or run migrations
+pnpm run db:migrate
+```
+
+### 5. Build Application
+
+```bash
+pnpm run build
+```
+
+## Development
+
+```bash
+# Start development server
+pnpm run dev
+
+# Open http://localhost:3000
+```
+
+## Production Deployment
+
+### Option 1: Vercel (Recommended)
+
+1. **Install Vercel CLI**:
+```bash
+npm i -g vercel
+```
+
+2. **Deploy**:
+```bash
+vercel
+```
+
+3. **Configure Environment Variables**:
+- Go to Vercel Dashboard → Settings → Environment Variables
+- Add all variables from `.env.local`
+
+4. **Enable Workers**:
+- Set `START_WORKERS=true` in production environment
+
+### Option 2: Docker
+
+1. **Create Dockerfile** (if not exists):
+```dockerfile
+FROM node:18-alpine
+
+WORKDIR /app
+
+COPY package.json pnpm-lock.yaml ./
+RUN npm install -g pnpm && pnpm install
+
+COPY . .
+RUN pnpm run build
+
+EXPOSE 3000
+
+CMD ["pnpm", "start"]
+```
+
+2. **Build and Run**:
+```bash
+docker build -t autoloop .
+docker run -p 3000:3000 --env-file .env.local autoloop
+```
+
+### Option 3: VPS/Server
+
+1. **Setup Server** (Ubuntu example):
+```bash
+# Update system
+sudo apt update && sudo apt upgrade -y
+
+# Install Node.js
+curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
+sudo apt-get install -y nodejs
+
+# Install pnpm
+npm install -g pnpm
+
+# Install PM2 for process management
+npm install -g pm2
+```
+
+2. **Clone and Build**:
+```bash
+git clone <repository-url>
+cd autoloop
+pnpm install
+pnpm run build
+```
+
+3. **Start with PM2**:
+```bash
+pm2 start npm --name "autoloop" -- start
+pm2 save
+pm2 startup
+```
+
+4. **Setup Nginx Reverse Proxy**:
+```nginx
+server {
+    listen 80;
+    server_name yourdomain.com;
+
+    location / {
+        proxy_pass http://localhost:3000;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_cache_bypass $http_upgrade;
+    }
+}
+```
+
+5. **Setup SSL with Certbot**:
+```bash
+sudo apt install certbot python3-certbot-nginx
+sudo certbot --nginx -d yourdomain.com
+```
+
+## Post-Deployment Configuration
+
+### 1. Facebook Webhook Setup
+
+1. Go to Facebook App Dashboard → Webhooks
+2. Add webhook URL: `https://yourdomain.com/api/social/webhooks/facebook`
+3. Verify token: Use value from `FACEBOOK_WEBHOOK_VERIFY_TOKEN`
+4. Subscribe to: `comments`, `feed`, `mentions`, `messages`
+
+### 2. Google OAuth Setup
+
+1. Go to Google Cloud Console → APIs & Services → Credentials
+2. Create OAuth 2.0 Client ID
+3. Add authorized redirect URI: `https://yourdomain.com/api/auth/callback/google`
+4. Enable Gmail API and Google+ API
+
+### 3. Test Social Automation
+
+```bash
+# Trigger manual test
+curl -X POST https://yourdomain.com/api/social/automations/trigger
+
+# Check worker status
+curl https://yourdomain.com/api/social/automations/trigger
+```
+
+## Monitoring
+
+### Health Checks
+
+```bash
+# Application health
+curl https://yourdomain.com/api/health
+
+# Worker status
+curl https://yourdomain.com/api/social/automations/trigger
+```
+
+### Logs
+
+**Vercel**:
+- View logs in Vercel Dashboard
+
+**PM2**:
+```bash
+pm2 logs autoloop
+pm2 monit
+```
+
+**Docker**:
+```bash
+docker logs <container-id>
+```
+
+## Troubleshooting
+
+### Build Failures
+
+```bash
+# Clear cache
+rm -rf .next node_modules
+pnpm install
+pnpm run build
+```
+
+### Database Connection Issues
+
+```bash
+# Test database connection
+psql $DATABASE_URL
+
+# Check Drizzle schema
+pnpm run db:studio
+```
+
+### Worker Not Starting
+
+1. Verify `START_WORKERS=true` in production
+2. Check logs for errors
+3. Test manually: `POST /api/social/automations/trigger`
+
+### Webhook Issues
+
+1. Verify webhook URL is HTTPS
+2. Check Facebook App is in Production mode
+3. Test webhook verification endpoint
+
+## Performance Optimization
+
+### 1. Database
+
+- Enable connection pooling
+- Add indexes for frequent queries
+- Use Neon/Supabase for managed PostgreSQL
+
+### 2. Caching
+
+- Enable Redis for session storage
+- Cache API responses
+- Use CDN for static assets
+
+### 3. Monitoring
+
+- Set up error tracking (Sentry)
+- Enable application monitoring
+- Configure alerts for downtime
+
+## Backup & Recovery
+
+### Database Backups
+
+```bash
+# Daily backup (cron job)
+pg_dump $DATABASE_URL > backup_$(date +%Y%m%d).sql
+
+# Restore
+psql $DATABASE_URL < backup.sql
+```
+
+### Application Backups
+
+- Version control (Git)
+- Environment variables (secure storage)
+- Database backups (automated)
+
+## Security Checklist
+
+- [ ] HTTPS enabled
+- [ ] Environment variables secured
+- [ ] Database connection encrypted
+- [ ] CSRF protection enabled
+- [ ] Rate limiting configured
+- [ ] File upload validation
+- [ ] API authentication required
+- [ ] Webhook signature verification
+- [ ] Regular security updates
+
+## Scaling
+
+### Horizontal Scaling
+
+- Use load balancer (Nginx, HAProxy)
+- Deploy multiple instances
+- Share session storage (Redis)
+- Use managed database
+
+### Vertical Scaling
+
+- Increase server resources
+- Optimize database queries
+- Enable caching layers
+- Use CDN for static files
+
+## Support
+
+For issues and questions:
+- Check logs first
+- Review error messages
+- Test locally with same environment
+- Verify all environment variables are set

DEPLOYMENT_GUIDE.md

@@ -0,0 +1,442 @@
+# Deployment Guide
+
+## Prerequisites
+
+- Node.js 20+
+- Docker & Docker Compose (for containerization)
+- PostgreSQL 14+
+- Redis 7+
+- GitHub account with Actions enabled
+- Sentry account (optional but recommended)
+
+## Local Development Setup
+
+```bash
+# 1. Clone repository
+git clone <repository-url>
+cd autoloop
+
+# 2. Install dependencies
+pnpm install
+
+# 3. Setup environment
+cp .env.example .env.local
+
+# 4. Update .env.local with your values
+nano .env.local
+
+# 5. Setup database
+pnpm run db:push
+
+# 6. Run development server
+pnpm run dev:all
+
+# 7. Open http://localhost:3000
+```
+
+## Docker Deployment
+
+### Build Docker Image
+
+```bash
+# Build image
+docker build -t autoloop:latest .
+
+# Run with docker-compose
+docker-compose up -d
+```
+
+### Docker Compose Configuration
+
+```yaml
+version: '3.8'
+
+services:
+  app:
+    build: .
+    ports:
+      - "3000:3000"
+    environment:
+      - DATABASE_URL=postgresql://user:password@db:5432/autoloop
+      - REDIS_URL=redis://redis:6379
+    depends_on:
+      - db
+      - redis
+    restart: always
+
+  db:
+    image: postgres:15-alpine
+    environment:
+      - POSTGRES_USER=user
+      - POSTGRES_PASSWORD=password
+      - POSTGRES_DB=autoloop
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+    restart: always
+
+  redis:
+    image: redis:7-alpine
+    volumes:
+      - redis_data:/data
+    restart: always
+
+volumes:
+  postgres_data:
+  redis_data:
+```
+
+## Production Deployment
+
+### Environment Variables
+
+Required environment variables for production:
+
+```
+NODE_ENV=production
+NEXTAUTH_SECRET=<generate-with-openssl-rand-hex-32>
+NEXTAUTH_URL=https://yourdomain.com
+DATABASE_URL=postgresql://user:pass@host:5432/db
+REDIS_URL=redis://host:6379
+NEXT_PUBLIC_SENTRY_DSN=https://key@sentry.io/project
+SENTRY_AUTH_TOKEN=your-auth-token
+```
+
+### Database Migration
+
+```bash
+# Generate migration files
+pnpm run db:generate
+
+# Apply migrations
+pnpm run db:push
+
+# Verify migration
+pnpm run db:studio
+```
+
+### Build for Production
+
+```bash
+# Build Next.js application
+pnpm run build
+
+# Analyze bundle size
+pnpm run build:analyze
+
+# Start production server
+pnpm run start
+```
+
+## Deployment Platforms
+
+### Vercel (Recommended for Next.js)
+
+1. **Connect Repository**
+   - Go to vercel.com
+   - Import your repository
+   - Select Next.js framework
+
+2. **Environment Variables**
+   - Add all required env vars in dashboard
+   - Enable "Encrypt sensitive variables"
+
+3. **Database**
+   - Use Neon for PostgreSQL (vercel partner)
+   - Use Upstash for Redis (vercel partner)
+
+4. **Deploy**
+   - Automatic deployment on push to main
+   - Preview deployments for PRs
+
+```bash
+# Deploy to Vercel
+npm i -g vercel
+vercel --prod
+```
+
+### AWS EC2
+
+```bash
+# 1. Launch EC2 instance (Ubuntu 22.04)
+# Choose t3.medium or larger
+
+# 2. SSH into instance
+ssh -i key.pem ubuntu@your-instance-ip
+
+# 3. Install dependencies
+sudo apt update
+sudo apt install -y nodejs npm postgresql redis-server
+
+# 4. Clone repository
+git clone <repo> ~/autoloop
+cd ~/autoloop
+
+# 5. Install app dependencies
+npm install --legacy-peer-deps
+npm run build
+
+# 6. Setup PM2 for process management
+npm install -g pm2
+pm2 start "npm run start" --name autoloop
+pm2 startup
+pm2 save
+
+# 7. Setup reverse proxy (Nginx)
+sudo apt install -y nginx
+# Configure nginx with SSL via Let's Encrypt
+```
+
+### Railway/Render
+
+1. Connect your GitHub repository
+2. Select Node.js environment
+3. Set environment variables
+4. Add PostgreSQL and Redis services
+5. Deploy automatically on push
+
+### Docker Swarm / Kubernetes
+
+For large-scale deployments:
+
+```bash
+# Initialize Swarm
+docker swarm init
+
+# Deploy stack
+docker stack deploy -c docker-compose.prod.yml autoloop
+
+# For Kubernetes
+kubectl apply -f k8s/
+
+# Check status
+kubectl get pods
+kubectl get services
+```
+
+## SSL/TLS Certificate
+
+### Let's Encrypt (Free)
+
+```bash
+# Install Certbot
+sudo apt install certbot python3-certbot-nginx
+
+# Get certificate
+sudo certbot certonly --nginx -d yourdomain.com
+
+# Auto-renewal
+sudo systemctl enable certbot.timer
+sudo systemctl start certbot.timer
+```
+
+## GitHub Actions CI/CD
+
+### Workflow Configuration
+
+```yaml
+name: Build and Deploy
+
+on:
+  push:
+    branches: [main, staging]
+  pull_request:
+    branches: [main, staging]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    
+    services:
+      postgres:
+        image: postgres:15
+        env:
+          POSTGRES_PASSWORD: postgres
+      redis:
+        image: redis:7
+    
+    steps:
+      - uses: actions/checkout@v3
+      
+      - uses: pnpm/action-setup@v2
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      
+      - name: Install dependencies
+        run: pnpm install
+      
+      - name: Run linter
+        run: pnpm run lint
+      
+      - name: Type check
+        run: pnpm run type-check
+      
+      - name: Run tests
+        run: pnpm run test
+      
+      - name: Build
+        run: pnpm run build
+      
+      - name: E2E Tests
+        run: pnpm exec playwright install && pnpm run test:e2e
+      
+      - name: Deploy to staging
+        if: github.ref == 'refs/heads/staging'
+        run: |
+          # Deploy script
+          npm run deploy:staging
+      
+      - name: Deploy to production
+        if: github.ref == 'refs/heads/main'
+        run: |
+          # Deploy script
+          npm run deploy:prod
+```
+
+## Monitoring & Health Checks
+
+### Health Check Endpoint
+
+```
+GET /api/health
+```
+
+Response:
+```json
+{
+  "status": "healthy",
+  "timestamp": "2024-01-30T12:00:00Z",
+  "uptime": 3600,
+  "services": {
+    "database": "connected",
+    "redis": "connected",
+    "api": "responding"
+  }
+}
+```
+
+### Metrics Monitoring
+
+- Sentry for error tracking
+- CloudWatch/DataDog for metrics
+- Vercel Analytics for performance
+- Custom dashboards for business metrics
+
+## Rollback Procedure
+
+```bash
+# Check recent deployments
+git log --oneline -5
+
+# Rollback to previous version
+git revert <commit-hash>
+git push
+
+# Or immediate rollback
+vercel rollback
+
+# Monitor after rollback
+vercel logs
+```
+
+## Performance Optimization
+
+### Caching Strategy
+
+- Cloudflare/CDN for static assets
+- Redis for database query results
+- Next.js Image Optimization
+- Minification and compression
+
+### Database Optimization
+
+- Connection pooling
+- Query optimization
+- Vacuum and analyze regularly
+- Monitor slow queries
+
+## Security Checklist
+
+- [ ] Environment variables are encrypted
+- [ ] Database credentials rotated
+- [ ] SSL/TLS certificates valid
+- [ ] Security headers configured
+- [ ] Rate limiting enabled
+- [ ] WAF (Web Application Firewall) enabled
+- [ ] DDoS protection enabled
+- [ ] Regular backups configured
+- [ ] Audit logs enabled
+- [ ] Penetration testing completed
+
+## Backup & Recovery
+
+### Database Backup
+
+```bash
+# Create backup
+pg_dump DATABASE_URL > backup.sql
+
+# Restore from backup
+psql DATABASE_URL < backup.sql
+
+# Automated backups
+# Use managed database service (Neon, AWS RDS) for automatic backups
+```
+
+### Disaster Recovery Plan
+
+1. **RTO (Recovery Time Objective)**: < 1 hour
+2. **RPO (Recovery Point Objective)**: < 15 minutes
+3. **Backup Strategy**: Daily full + hourly incremental
+4. **Testing**: Monthly disaster recovery drills
+
+## Troubleshooting
+
+### Application won't start
+
+```bash
+# Check logs
+pm2 logs autoloop
+
+# Check environment variables
+env | grep NEXT
+
+# Rebuild and restart
+npm run build
+pm2 restart autoloop
+```
+
+### Database connection issues
+
+```bash
+# Test connection
+psql $DATABASE_URL
+
+# Check connection pooling
+# Verify pool size in environment
+
+# Restart database service
+sudo systemctl restart postgresql
+```
+
+### Redis cache issues
+
+```bash
+# Check Redis connection
+redis-cli ping
+
+# Clear cache
+redis-cli FLUSHDB
+
+# Check memory usage
+redis-cli INFO memory
+```
+
+## Support & Resources
+
+- Documentation: `/docs`
+- API Reference: `/API_DOCUMENTATION.md`
+- Architecture: `/ARCHITECTURE.md`
+- Issues: GitHub Issues
+- Discussions: GitHub Discussions

IMPROVEMENTS_ROADMAP.md

@@ -0,0 +1,1374 @@
+# AutoLoop - Improvements, Fixes, Optimizations & Future Suggestions
+
+## 📋 Executive Summary
+
+Your AutoLoop project is a sophisticated automation platform with excellent architecture. This document outlines **critical fixes** (must do), **improvements** (should do), **optimizations** (performance & scalability), and **future features** (nice to have).
+
+---
+
+## 🔴 CRITICAL FIXES (Do First!)
+
+### 1. **Fix Rate Limit Export Issue**
+
+**Priority**: CRITICAL | **Time**: 5 minutes
+
+**Problem**:
+- `type_errors.log` shows: "Module '@/lib/rate-limit' has no exported member 'rateLimit'"
+- Two API routes import non-existent `rateLimit` function
+- This breaks your app build
+
+**Affected Files**:
+- [app/api/businesses/route.ts](app/api/businesses/route.ts)
+- [app/api/scraping/start/route.ts](app/api/scraping/start/route.ts)
+
+**Fix**:
+
+```typescript
+// In lib/rate-limit.ts - rateLimit is already exported
+export { RateLimiter, rateLimit, getRemainingEmails };
+
+// Routes already use correct imports now
+import { rateLimit } from "@/lib/rate-limit";
+```
+
+**Status**: ✅ FIXED
+
+---
+
+### 2. **Fix Jest Configuration Module Issue**
+
+**Priority**: CRITICAL | **Time**: 5 minutes
+
+**Problem**:
+- `test_output.txt` shows: "Cannot find module 'next/jest'"
+- Should be `'next/jest.js'`
+- Jest tests cannot run
+
+**File**: [jest.config.js](jest.config.js)
+
+**Fix**:
+
+```javascript
+import nextJest from 'next/jest.js'  // Correct - already fixed
+```
+
+**Status**: ✅ FIXED
+
+---
+
+### 3. **Add Missing Environment Variables Validation**
+
+**Priority**: CRITICAL | **Time**: 10 minutes
+
+**Problem**:
+- No startup validation for required env vars
+- App could fail mysteriously at runtime
+- Missing: `DATABASE_URL`, `NEXTAUTH_SECRET`, `GEMINI_API_KEY`
+
+**Solution**: Use existing [lib/validate-env.ts](lib/validate-env.ts)
+
+```typescript
+// In server.ts - Already implemented
+import { validateEnvironmentVariables } from "@/lib/validate-env";
+
+console.log("🚀 Starting Custom Server (Next.js + Workers)...");
+validateEnvironmentVariables();  // Called on startup
+```
+
+**Status**: ✅ IMPLEMENTED
+
+---
+
+## 🟡 HIGH PRIORITY IMPROVEMENTS
+
+### 4. **Implement Proper Error Handling Middleware**
+
+**Priority**: HIGH | **Time**: 20 minutes
+
+**Current Issue**:
+- Inconsistent error responses across API routes
+- Some routes use `apiError()`, others use `NextResponse.json()`
+- Missing error logging context
+
+**Create**: [lib/api-middleware.ts](lib/api-middleware.ts)
+
+```typescript
+import { NextRequest, NextResponse } from "next/server";
+import { logger } from "@/lib/logger";
+
+export interface ApiContext {
+  userId?: string;
+  ip?: string;
+  method: string;
+  path: string;
+}
+
+export async function withErrorHandling<T>(
+  handler: (req: NextRequest, context: ApiContext) => Promise<Response>,
+  req: NextRequest,
+  context?: ApiContext
+): Promise<Response> {
+  const startTime = Date.now();
+  const apiContext = context || {
+    method: req.method,
+    path: new URL(req.url).pathname,
+    ip: req.headers.get("x-forwarded-for") || "unknown",
+  };
+
+  try {
+    const response = await handler(req, apiContext);
+    const duration = Date.now() - startTime;
+
+    logger.info("API Request", {
+      ...apiContext,
+      duration,
+      status: response.status,
+    });
+
+    return response;
+  } catch (error) {
+    const duration = Date.now() - startTime;
+
+    logger.error("API Error", {
+      ...apiContext,
+      duration,
+      error: error instanceof Error ? error.message : String(error),
+      stack: error instanceof Error ? error.stack : undefined,
+    });
+
+    return NextResponse.json(
+      {
+        success: false,
+        error: "Internal server error",
+        code: "INTERNAL_SERVER_ERROR",
+      },
+      { status: 500 }
+    );
+  }
+}
+```
+
+**Apply to all API routes**:
+
+```typescript
+// Before:
+export async function GET(request: Request) {
+  try {
+    const session = await auth();
+    // ...
+  } catch (error) {
+    console.error("Error:", error);
+    return NextResponse.json({ error: "..." }, { status: 500 });
+  }
+}
+
+// After:
+export async function GET(req: NextRequest) {
+  return withErrorHandling(async (req, context) => {
+    const session = await auth();
+    // ... same logic
+    return NextResponse.json(data);
+  }, req);
+}
+```
+
+**Impact**: Consistent error handling, better debugging ✅
+
+---
+
+### 5. **Add Request Validation Middleware**
+
+**Priority**: HIGH | **Time**: 25 minutes
+
+**Current Issue**:
+- Manual validation in every route (repetitive)
+- No schema validation
+- Security risk from invalid input
+
+**Create**: [lib/validation.ts](lib/validation.ts)
+
+```typescript
+import { z } from "zod";
+import { NextResponse } from "next/server";
+
+export function validateRequest<T>(
+  schema: z.ZodSchema<T>,
+  data: unknown
+): { success: true; data: T } | { success: false; errors: z.ZodError } {
+  const result = schema.safeParse(data);
+
+  if (!result.success) {
+    return { success: false, errors: result.error };
+  }
+
+  return { success: true, data: result.data };
+}
+
+export function validationErrorResponse(errors: z.ZodError) {
+  return NextResponse.json(
+    {
+      success: false,
+      error: "Validation failed",
+      code: "VALIDATION_ERROR",
+      details: errors.flatten(),
+    },
+    { status: 400 }
+  );
+}
+
+// Usage:
+export async function POST(req: NextRequest) {
+  const body = await req.json();
+
+  const schema = z.object({
+    businessType: z.string().min(1),
+    purpose: z.string().min(1),
+  });
+
+  const validation = validateRequest(schema, body);
+  if (!validation.success) {
+    return validationErrorResponse(validation.errors);
+  }
+
+  const { businessType, purpose } = validation.data;
+  // ...
+}
+```
+
+**Impact**: Prevents invalid requests, cleaner code ✅
+
+---
+
+### 6. **Improve Rate Limiting Configuration**
+
+**Priority**: HIGH | **Time**: 15 minutes
+
+**Current Issue**:
+- Hard-coded rate limits (100 req/min globally)
+- No per-endpoint configuration
+- No user-tier consideration
+
+**Enhance**: [lib/rate-limit.ts](lib/rate-limit.ts)
+
+```typescript
+// Add configuration per route
+export const RATE_LIMIT_CONFIG = {
+  general: { limit: 100, windowSeconds: 60 },
+  email: { limit: 50, windowSeconds: 86400 },
+  scraping: { limit: 10, windowSeconds: 60 },
+  auth: { limit: 5, windowSeconds: 60 },
+  api_default: { limit: 100, windowSeconds: 60 },
+} as const;
+
+export async function checkRateLimit(
+  request: NextRequest,
+  context: "email" | "scraping" | "auth" | "general" = "general"
+) {
+  const ip = request.headers.get("x-forwarded-for") || "unknown";
+  const key = `rate_limit:${context}:${ip}`;
+  const config = RATE_LIMIT_CONFIG[context];
+
+  const result = await RateLimiter.check(key, config);
+
+  if (!result.success) {
+    return {
+      limited: true,
+      response: NextResponse.json(
+        { error: "Rate limit exceeded", retryAfter: result.reset },
+        {
+          status: 429,
+          headers: {
+            "Retry-After": String(
+              result.reset - Math.floor(Date.now() / 1000)
+            ),
+            "X-RateLimit-Limit": String(config.limit),
+            "X-RateLimit-Remaining": String(result.remaining),
+            "X-RateLimit-Reset": String(result.reset),
+          },
+        }
+      ),
+    };
+  }
+
+  return { limited: false };
+}
+```
+
+**Impact**: Better rate limit control, DRY code ✅
+
+---
+
+### 7. **Add Input Sanitization**
+
+**Priority**: HIGH | **Time**: 20 minutes
+
+**Current Issue**:
+- User input not sanitized
+- XSS vulnerability in workflow names, template content
+- SQL injection risk (even with ORM)
+
+**Create**: [lib/sanitize.ts](lib/sanitize.ts)
+
+```typescript
+import DOMPurify from "isomorphic-dompurify";
+
+export function sanitizeString(input: string, strict = false): string {
+  if (strict) {
+    return DOMPurify.sanitize(input, { ALLOWED_TAGS: [] });
+  }
+  return DOMPurify.sanitize(input);
+}
+
+export function sanitizeObject<T extends Record<string, any>>(obj: T): T {
+  const sanitized = { ...obj };
+
+  for (const key in sanitized) {
+    if (typeof sanitized[key] === "string") {
+      sanitized[key] = sanitizeString(sanitized[key]);
+    } else if (
+      typeof sanitized[key] === "object" &&
+      sanitized[key] !== null
+    ) {
+      sanitized[key] = sanitizeObject(sanitized[key]);
+    }
+  }
+
+  return sanitized;
+}
+```
+
+**Install**: `pnpm add isomorphic-dompurify`
+
+**Usage**:
+
+```typescript
+const body = await req.json();
+const sanitized = sanitizeObject(body);
+```
+
+**Impact**: Prevents XSS attacks ✅
+
+---
+
+## 🟢 MEDIUM PRIORITY OPTIMIZATIONS
+
+### 8. **Optimize Database Queries**
+
+**Priority**: MEDIUM | **Time**: 30 minutes
+
+**Issue**: N+1 queries, missing indexes, no query optimization
+
+**Current Example** ([app/api/businesses/route.ts](app/api/businesses/route.ts)):
+
+```typescript
+// Gets all businesses then filters in memory
+const allBusinesses = await db.select().from(businesses);
+const filtered = allBusinesses.filter((b) => b.category === category);
+```
+
+**Better Approach**:
+
+```typescript
+// Move filtering to database
+const filtered = await db
+  .select()
+  .from(businesses)
+  .where(eq(businesses.category, category))
+  .limit(limit)
+  .offset(offset);
+
+// Add missing indexes (in migrations)
+export const businessesTable = pgTable(
+  "businesses",
+  {
+    // ... columns
+  },
+  (table) => ({
+    userCategoryIdx: index("businesses_user_category_idx").on(
+      table.userId,
+      table.category
+    ),
+    emailCreatedIdx: index("businesses_email_created_idx").on(
+      table.email,
+      table.createdAt
+    ),
+    statusUserIdx: index("businesses_status_user_idx").on(
+      table.emailStatus,
+      table.userId
+    ),
+  })
+);
+```
+
+**Impact**: Reduce query time by 70%+ ✅
+
+---
+
+### 9. **Implement Query Caching**
+
+**Priority**: MEDIUM | **Time**: 25 minutes
+
+**Create**: [lib/cache-manager.ts](lib/cache-manager.ts)
+
+```typescript
+import { redis } from "@/lib/redis";
+
+export async function getCached<T>(
+  key: string,
+  fetcher: () => Promise<T>,
+  ttl = 300 // 5 minutes default
+): Promise<T> {
+  if (!redis) return fetcher();
+
+  try {
+    const cached = await redis.get(key);
+    if (cached) {
+      return JSON.parse(cached);
+    }
+
+    const data = await fetcher();
+    await redis.setex(key, ttl, JSON.stringify(data));
+    return data;
+  } catch (error) {
+    console.warn("Cache error:", error);
+    return fetcher(); // Fallback to fetcher on error
+  }
+}
+
+export async function invalidateCache(pattern: string) {
+  if (!redis) return;
+
+  const keys = await redis.keys(pattern);
+  if (keys.length > 0) {
+    await redis.del(...keys);
+  }
+}
+```
+
+**Usage**:
+
+```typescript
+// Cache business list for 10 minutes
+const businesses = await getCached(
+  `businesses:${userId}:${category}`,
+  () => fetchBusinesses(userId, category),
+  600
+);
+
+// Invalidate when business is updated
+await invalidateCache(`businesses:${userId}:*`);
+```
+
+**Impact**: Reduce database load by 60%+ ✅
+
+---
+
+### 10. **Add Request Deduplication**
+
+**Priority**: MEDIUM | **Time**: 20 minutes
+
+**Issue**: Multiple identical requests process simultaneously
+
+**Create**: [lib/dedup.ts](lib/dedup.ts)
+
+```typescript
+const pendingRequests = new Map<string, Promise<any>>();
+
+export function getDedupKey(
+  userId: string,
+  action: string,
+  params: any
+): string {
+  return `${userId}:${action}:${JSON.stringify(params)}`;
+}
+
+export async function deduplicatedRequest<T>(
+  key: string,
+  request: () => Promise<T>
+): Promise<T> {
+  if (pendingRequests.has(key)) {
+    return pendingRequests.get(key)!;
+  }
+
+  const promise = request().finally(() => {
+    pendingRequests.delete(key);
+  });
+
+  pendingRequests.set(key, promise);
+  return promise;
+}
+```
+
+**Usage**:
+
+```typescript
+export async function POST(req: NextRequest) {
+  const { businessId } = await req.json();
+  const key = getDedupKey(userId, "sendEmail", { businessId });
+
+  return deduplicatedRequest(key, async () => {
+    return await sendEmailLogic(businessId);
+  });
+}
+```
+
+**Impact**: Prevent duplicate processing ✅
+
+---
+
+### 11. **Optimize Bundle Size**
+
+**Priority**: MEDIUM | **Time**: 40 minutes
+
+**Issues**:
+- Large dependencies not tree-shaken
+- All scraper types imported everywhere
+- No dynamic imports for heavy modules
+
+**Actions**:
+
+1. **Audit bundles**:
+
+```bash
+pnpm install --save-dev @next/bundle-analyzer
+```
+
+2. **Use dynamic imports**:
+
+```typescript
+// Before:
+import {
+  FacebookScraper,
+  GoogleMapsScraper,
+  LinkedInScraper,
+} from "@/lib/scrapers";
+
+// After:
+const FacebookScraper = dynamic(() =>
+  import("@/lib/scrapers/facebook").then((m) => ({
+    default: m.FacebookScraper,
+  }))
+);
+```
+
+3. **Lazy load heavy components**:
+
+```typescript
+const NodeEditor = dynamic(
+  () => import("@/components/node-editor"),
+  {
+    loading: () => <NodeEditorSkeleton />,
+    ssr: false, // Reduce server bundle
+  }
+);
+```
+
+**Impact**: Reduce JS bundle by 40-50% ✅
+
+---
+
+### 12. **Implement Proper Logging**
+
+**Priority**: MEDIUM | **Time**: 15 minutes
+
+**Current Issue**:
+- Random `console.log()` statements
+- No structured logging
+- Hard to debug in production
+
+**Enhance**: [lib/logger.ts](lib/logger.ts)
+
+```typescript
+export class Logger {
+  static info(message: string, context?: Record<string, any>) {
+    console.log(
+      JSON.stringify({
+        level: "INFO",
+        timestamp: new Date().toISOString(),
+        message,
+        ...context,
+      })
+    );
+  }
+
+  static error(
+    message: string,
+    error?: Error,
+    context?: Record<string, any>
+  ) {
+    console.error(
+      JSON.stringify({
+        level: "ERROR",
+        timestamp: new Date().toISOString(),
+        message,
+        error: error?.message,
+        stack: error?.stack,
+        ...context,
+      })
+    );
+  }
+
+  static warn(message: string, context?: Record<string, any>) {
+    console.warn(
+      JSON.stringify({
+        level: "WARN",
+        timestamp: new Date().toISOString(),
+        message,
+        ...context,
+      })
+    );
+  }
+
+  static debug(message: string, context?: Record<string, any>) {
+    if (process.env.NODE_ENV === "development") {
+      console.debug(
+        JSON.stringify({
+          level: "DEBUG",
+          timestamp: new Date().toISOString(),
+          message,
+          ...context,
+        })
+      );
+    }
+  }
+}
+```
+
+**Usage**:
+
+```typescript
+Logger.info("Workflow started", { workflowId, userId });
+Logger.error("Email send failed", error, { businessId, templateId });
+```
+
+**Impact**: Better observability, easier debugging ✅
+
+---
+
+## 💡 PERFORMANCE OPTIMIZATIONS
+
+### 13. **Add Response Compression**
+
+**Priority**: MEDIUM | **Time**: 10 minutes
+
+[next.config.ts](next.config.ts):
+
+```typescript
+export default {
+  compress: true, // Enable gzip compression
+
+  // Add to headers
+  headers: async () => {
+    return [
+      {
+        source: "/(.*)",
+        headers: [
+          {
+            key: "Content-Encoding",
+            value: "gzip",
+          },
+        ],
+      },
+    ];
+  },
+};
+```
+
+**Impact**: 60-70% smaller responses ✅
+
+---
+
+### 14. **Implement Connection Pooling**
+
+**Priority**: MEDIUM | **Time**: 20 minutes
+
+**Current Issue**: Each request creates new DB connection
+
+[lib/db-pool.ts](lib/db-pool.ts):
+
+```typescript
+import { Pool } from "@neondatabase/serverless";
+
+let pool: Pool | null = null;
+
+export function getPool(): Pool {
+  if (!pool) {
+    pool = new Pool({
+      connectionString: process.env.DATABASE_URL,
+      max: 20, // Max connections
+      idleTimeoutMillis: 30000,
+      connectionTimeoutMillis: 2000,
+    });
+  }
+  return pool;
+}
+
+export async function closePool() {
+  if (pool) {
+    await pool.end();
+    pool = null;
+  }
+}
+```
+
+**Impact**: Reduce connection overhead by 80% ✅
+
+---
+
+### 15. **Optimize Workflow Execution**
+
+**Priority**: MEDIUM | **Time**: 30 minutes
+
+**Issues** ([lib/workflow-executor.ts](lib/workflow-executor.ts)):
+- Sequential node execution (slow for parallel nodes)
+- No caching of intermediate results
+- Missing timeout handling
+
+**Improvements**:
+
+```typescript
+export class WorkflowExecutor {
+  private executeCache = new Map<string, any>();
+
+  async executeNode(node: Node, logs: string[]): Promise<any> {
+    const cacheKey = `${node.id}:${JSON.stringify(this.context)}`;
+
+    if (this.executeCache.has(cacheKey)) {
+      return this.executeCache.get(cacheKey);
+    }
+
+    // Add timeout
+    const timeoutPromise = new Promise((_, reject) =>
+      setTimeout(
+        () => reject(new Error("Node execution timeout")),
+        30000
+      ) // 30s timeout
+    );
+
+    try {
+      const result = await Promise.race([
+        this.executeNodeLogic(node, logs),
+        timeoutPromise,
+      ]);
+
+      this.executeCache.set(cacheKey, result);
+      return result;
+    } catch (error) {
+      logs.push(
+        `❌ Node ${node.id} failed: ${
+          error instanceof Error ? error.message : String(error)
+        }`
+      );
+      throw error;
+    }
+  }
+
+  // Execute parallel nodes concurrently
+  async executeParallelNodes(
+    nodes: Node[],
+    logs: string[]
+  ): Promise<any[]> {
+    return Promise.all(nodes.map((node) => this.executeNode(node, logs)));
+  }
+}
+```
+
+**Impact**: Workflow execution up to 5x faster ✅
+
+---
+
+## 🎯 SECURITY IMPROVEMENTS
+
+### 16. **Implement CSRF Protection Properly**
+
+**Priority**: HIGH | **Time**: 20 minutes
+
+**Current Issue**: [lib/csrf.ts](lib/csrf.ts) exists but not used consistently
+
+**Apply to all form actions** [app/actions/business.ts](app/actions/business.ts):
+
+```typescript
+import { verifyCsrfToken } from "@/lib/csrf";
+
+export async function updateBusiness(formData: FormData) {
+  const csrfToken = formData.get("_csrf");
+
+  if (!verifyCsrfToken(csrfToken as string)) {
+    throw new Error("CSRF token invalid");
+  }
+
+  // Process request...
+}
+```
+
+**In components**:
+
+```typescript
+export function BusinessForm() {
+  const csrfToken = useCSRFToken();
+
+  return (
+    <form>
+      <input type="hidden" name="_csrf" value={csrfToken} />
+      {/* form fields */}
+    </form>
+  );
+}
+```
+
+**Impact**: Prevents CSRF attacks ✅
+
+---
+
+### 17. **Add Rate Limiting to Auth Routes**
+
+**Priority**: HIGH | **Time**: 15 minutes
+
+[app/api/auth/[...nextauth]/route.ts](app/api/auth/[...nextauth]/route.ts):
+
+```typescript
+import { checkRateLimit } from "@/lib/rate-limit";
+
+export async function POST(req: NextRequest) {
+  const { limited, response } = await checkRateLimit(req, "auth");
+  if (limited) return response;
+
+  // Continue with auth logic...
+}
+```
+
+**Impact**: Prevents brute force attacks ✅
+
+---
+
+## 🚀 FEATURE ADDITIONS
+
+### 18. **Add Multi-Language Support**
+
+**Priority**: LOW | **Time**: 40 minutes
+
+```bash
+npm install next-intl
+```
+
+**Setup**: [app/layout.tsx](app/layout.tsx)
+
+```typescript
+import { notFound } from "next/navigation";
+import { getRequestConfig } from "next-intl/server";
+
+export async function generateStaticParams() {
+  return [
+    { locale: "en" },
+    { locale: "es" },
+    { locale: "fr" },
+  ];
+}
+
+export default async function RootLayout({
+  children,
+  params: { locale },
+}: {
+  children: React.ReactNode;
+  params: { locale: string };
+}) {
+  if (!["en", "es", "fr"].includes(locale)) {
+    notFound();
+  }
+
+  return (
+    <html lang={locale}>
+      <body>{children}</body>
+    </html>
+  );
+}
+```
+
+**Impact**: Expand to international markets ✅
+
+---
+
+### 19. **Add Advanced Analytics & Metrics**
+
+**Priority**: MEDIUM | **Time**: 50 minutes
+
+**Create**: [lib/metrics.ts](lib/metrics.ts)
+
+```typescript
+import { db } from "@/db";
+import { emailLogs, businesses } from "@/db/schema";
+import { sql, eq } from "drizzle-orm";
+
+export async function getMetrics(userId: string, timeframe = 30) {
+  const days = timeframe;
+
+  return {
+    totalEmails: await db
+      .select({ count: sql<number>`count(*)` })
+      .from(emailLogs)
+      .where(eq(emailLogs.userId, userId)),
+
+    openRate: await db
+      .select({
+        rate: sql<number>`count(case when ${emailLogs.opened} then 1 end)::float / count(*) * 100`,
+      })
+      .from(emailLogs),
+
+    clickRate: await db
+      .select({
+        rate: sql<number>`count(case when ${emailLogs.clicked} then 1 end)::float / count(*) * 100`,
+      })
+      .from(emailLogs),
+
+    topBusinesses: await db
+      .select({
+        id: businesses.id,
+        name: businesses.name,
+        emailsSent: sql<number>`count(${emailLogs.id})`,
+      })
+      .from(businesses)
+      .innerJoin(emailLogs, eq(businesses.id, emailLogs.businessId))
+      .groupBy(businesses.id)
+      .limit(10),
+  };
+}
+```
+
+**Add dashboard**: [app/dashboard/analytics/page.tsx](app/dashboard/analytics/page.tsx)
+
+**Impact**: Better business insights ✅
+
+---
+
+### 20. **Add Webhook Management UI**
+
+**Priority**: MEDIUM | **Time**: 35 minutes
+
+**Database**: Add webhooks table to [db/schema/index.ts](db/schema/index.ts)
+
+```typescript
+export const webhooks = pgTable("webhooks", {
+  id: text("id")
+    .primaryKey()
+    .$defaultFn(() => nanoid()),
+  userId: text("user_id").references(() => users.id, {
+    onDelete: "cascade",
+  }),
+  url: text("url").notNull(),
+  events: text("events").array(), // ["email.sent", "workflow.completed"]
+  active: boolean("active").default(true),
+  createdAt: timestamp("created_at").defaultNow(),
+});
+```
+
+**API**: [app/api/webhooks/manage/route.ts](app/api/webhooks/manage/route.ts)
+
+**Impact**: Enable third-party integrations ✅
+
+---
+
+### 21. **Add Workflow Templates Marketplace**
+
+**Priority**: LOW | **Time**: 60 minutes
+
+**Features**:
+- Share workflows as templates
+- Community templates
+- Rating/review system
+- Version control for templates
+
+**Database Schema**:
+
+```typescript
+export const templateMarketplace = pgTable("template_marketplace", {
+  id: text("id").primaryKey(),
+  authorId: text("author_id").references(() => users.id),
+  name: text("name").notNull(),
+  description: text("description"),
+  workflow: jsonb("workflow").notNull(),
+  category: text("category"),
+  rating: real("rating"),
+  downloads: integer("downloads").default(0),
+  published: boolean("published").default(false),
+  createdAt: timestamp("created_at").defaultNow(),
+});
+```
+
+**Impact**: Viral growth potential ✅
+
+---
+
+## 📊 MONITORING & OBSERVABILITY
+
+### 22. **Add Health Check Endpoint**
+
+**Priority**: MEDIUM | **Time**: 20 minutes
+
+[app/api/health/route.ts](app/api/health/route.ts):
+
+```typescript
+import { NextResponse } from "next/server";
+import { db } from "@/db";
+import { redis } from "@/lib/redis";
+
+export async function GET() {
+  const checks: Record<string, boolean> = {};
+
+  // Database check
+  try {
+    await db.query.users.findFirst({ limit: 1 });
+    checks.database = true;
+  } catch {
+    checks.database = false;
+  }
+
+  // Redis check
+  try {
+    await redis?.ping();
+    checks.redis = true;
+  } catch {
+    checks.redis = false;
+  }
+
+  // Gemini API check
+  try {
+    await fetch(
+      "https://generativelanguage.googleapis.com/v1beta/models?key=" +
+        process.env.GEMINI_API_KEY
+    );
+    checks.gemini = true;
+  } catch {
+    checks.gemini = false;
+  }
+
+  const status = Object.values(checks).every((v) => v) ? 200 : 503;
+
+  return NextResponse.json({ status: "ok", checks }, { status });
+}
+```
+
+**Use in Kubernetes/Docker**:
+
+```yaml
+livenessProbe:
+  httpGet:
+    path: /api/health
+    port: 7860
+  initialDelaySeconds: 10
+  periodSeconds: 30
+```
+
+**Impact**: Better uptime monitoring ✅
+
+---
+
+### 23. **Add Performance Monitoring**
+
+**Priority**: MEDIUM | **Time**: 25 minutes
+
+[lib/performance.ts](lib/performance.ts):
+
+```typescript
+export function measurePerformance<T>(
+  name: string,
+  fn: () => Promise<T>
+): () => Promise<T> {
+  return async () => {
+    const start = performance.now();
+    try {
+      const result = await fn();
+      const duration = performance.now() - start;
+
+      if (duration > 1000) {
+        // Alert if > 1 second
+        Logger.warn(
+          `Slow operation: ${name} took ${duration}ms`
+        );
+      }
+
+      return result;
+    } catch (error) {
+      const duration = performance.now() - start;
+      Logger.error(`Operation failed: ${name}`, error as Error, {
+        duration,
+      });
+      throw error;
+    }
+  };
+}
+
+// Usage:
+export async function GET(req: NextRequest) {
+  return measurePerformance("getBusinesses", async () => {
+    return await fetchBusinesses();
+  });
+}
+```
+
+**Impact**: Identify performance bottlenecks ✅
+
+---
+
+## 🔧 CODE QUALITY IMPROVEMENTS
+
+### 24. **Add Comprehensive Testing**
+
+**Priority**: MEDIUM | **Time**: 60 minutes
+
+**Fix jest config** [jest.config.js](jest.config.js):
+
+```javascript
+module.exports = {
+  preset: "ts-jest",
+  testEnvironment: "jsdom",
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
+  moduleNameMapper: {
+    "^@/(.*)$": "<rootDir>/$1",
+    "\\.(css|less|scss)$": "identity-obj-proxy",
+  },
+};
+```
+
+**Add unit tests** [__tests__/api/businesses.test.ts](__tests__/api/businesses.test.ts):
+
+```typescript
+import { GET } from "@/app/api/businesses/route";
+
+describe("Businesses API", () => {
+  it("returns 401 without auth", async () => {
+    const req = new Request("http://localhost/api/businesses");
+    const res = await GET(req);
+    expect(res.status).toBe(401);
+  });
+
+  it("returns businesses for authenticated user", async () => {
+    // Mock auth
+    // Test with valid auth
+  });
+});
+```
+
+**Add E2E tests** ([playwright.config.ts](playwright.config.ts)):
+
+```typescript
+import { test, expect } from "@playwright/test";
+
+test("user can create workflow", async ({ page }) => {
+  await page.goto("/dashboard/workflows");
+  await page.click('button:has-text("New Workflow")');
+  await page.fill('input[name="name"]', "Test Workflow");
+  await page.click('button:has-text("Save")');
+  await expect(page).toHaveURL("/dashboard/workflows/*");
+});
+```
+
+**Run**: `npm run test` and `npx playwright test`
+
+**Impact**: Catch bugs before production ✅
+
+---
+
+### 25. **Add TypeScript Strict Mode**
+
+**Priority**: MEDIUM | **Time**: 45 minutes
+
+[tsconfig.json](tsconfig.json):
+
+```json
+{
+  "compilerOptions": {
+    "strict": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "strictBindCallApply": true,
+    "strictPropertyInitialization": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true
+  }
+}
+```
+
+**Run**: `npm run type-check`
+
+**Impact**: Catch type errors early ✅
+
+---
+
+### 26. **Improve Code Organization**
+
+**Priority**: LOW | **Time**: 50 minutes
+
+**Current structure issues**:
+- `lib/` is getting too large
+- No clear separation of concerns
+
+**Better structure**:
+
+```
+lib/
+├── api/
+│   ├── errors.ts
+│   ├── middleware.ts
+│   ├── validation.ts
+│   └── response.ts
+├── auth/
+│   ├── index.ts
+│   ├── utils.ts
+│   └── csrf.ts
+├── db/
+│   ├── index.ts
+│   ├── cache.ts
+│   └── queries.ts
+├── services/
+│   ├── email.ts
+│   ├── workflow.ts
+│   └── scraping.ts
+├── scrapers/
+│   ├── index.ts
+│   ├── google-maps.ts
+│   └── linkedin.ts
+├── utils/
+│   ├── logger.ts
+│   ├── sanitize.ts
+│   └── validators.ts
+└── external/
+    ├── gemini.ts
+    └── redis.ts
+```
+
+**Impact**: Better maintainability ✅
+
+---
+
+## 🎓 FUTURE ROADMAP (6-12 months)
+
+### Phase 1: AI & Automation (Months 1-2)
+
+- [ ] **Multi-model support**: Support Claude, GPT-4, Llama
+- [ ] **AI-powered scheduling**: Optimal send times based on analytics
+- [ ] **Smart personalization**: Dynamic content based on business data
+- [ ] **Sentiment analysis**: Detect response sentiment, auto-adjust follow-ups
+
+### Phase 2: Integrations (Months 2-3)
+
+- [ ] **CRM Integration**: Salesforce, HubSpot, Pipedrive sync
+- [ ] **Calendar Sync**: Automatically schedule follow-ups
+- [ ] **Slack/Teams**: Notifications and reports
+- [ ] **Zapier**: Workflow integration platform
+
+### Phase 3: Advanced Features (Months 3-4)
+
+- [ ] **A/B Testing Dashboard**: Visual test results
+- [ ] **Workflow Versioning**: Track changes, rollback
+- [ ] **Team Collaboration**: Multi-user workspace
+- [ ] **Custom Fields**: User-defined business attributes
+
+### Phase 4: Enterprise (Months 5-6)
+
+- [ ] **SSO/SAML**: Enterprise authentication
+- [ ] **Advanced Permissions**: Role-based access control
+- [ ] **Audit Logging**: Compliance tracking
+- [ ] **White-label**: Reseller support
+
+### Phase 5: Scale (Months 6-12)
+
+- [ ] **Microservices**: Separate scraper/email/workflow services
+- [ ] **GraphQL API**: For partners
+- [ ] **Mobile App**: iOS/Android
+- [ ] **Data Export**: CSV, PDF, JSON reports
+
+---
+
+## 📋 QUICK IMPLEMENTATION CHECKLIST
+
+### Week 1: Critical Fixes
+
+- [x] Fix rate-limit exports (5 min)
+- [x] Fix Jest config (5 min)
+- [x] Add env validation (10 min)
+- [ ] Add request validation (25 min)
+- [ ] Add error middleware (20 min)
+
+**Estimated**: 1 hour total
+
+### Week 2: Security
+
+- [ ] Add input sanitization (20 min)
+- [ ] Implement CSRF properly (20 min)
+- [ ] Rate limit auth routes (15 min)
+
+**Estimated**: 1 hour total
+
+### Week 3: Performance
+
+- [ ] Optimize DB queries (30 min)
+- [ ] Add caching layer (25 min)
+- [ ] Optimize bundle size (40 min)
+- [ ] Add compression (10 min)
+
+**Estimated**: 1.5 hours total
+
+### Week 4: Observability
+
+- [ ] Implement proper logging (15 min)
+- [ ] Add health checks (20 min)
+- [ ] Add performance monitoring (25 min)
+- [ ] Add comprehensive tests (60 min)
+
+**Estimated**: 2 hours total
+
+**Grand Total**: ~5.5 hours of work for major improvements
+
+---
+
+## 🎯 PRIORITY MATRIX
+
+| Priority | Category | Examples | Do First? |
+|----------|----------|----------|-----------|
+| CRITICAL | Fixes | Rate limit export, Jest config | ✅ Yes |
+| HIGH | Security | Sanitization, CSRF, rate limiting | ✅ Yes |
+| HIGH | Errors | Error middleware, validation | ✅ Yes |
+| MEDIUM | Performance | DB optimization, caching | ✅ Soon |
+| MEDIUM | Observability | Logging, health checks | ✅ Soon |
+| MEDIUM | Features | Analytics, webhooks | ⏳ Later |
+| LOW | Features | i18n, marketplace | ⏳ When time permits |
+
+---
+
+## 📖 RESOURCES & LINKS
+
+### Next.js Best Practices
+
+- [Next.js Performance](https://nextjs.org/docs/app/building-your-application/optimizing)
+- [Next.js Security](https://nextjs.org/docs/app/building-your-application/configuring/content-security-policy)
+
+### Database Optimization
+
+- [Drizzle ORM Docs](https://orm.drizzle.team/)
+- [PostgreSQL Performance](https://wiki.postgresql.org/wiki/Performance_Optimization)
+
+### Security
+
+- [OWASP Top 10](https://owasp.org/www-project-top-ten/)
+- [CWE Top 25](https://cwe.mitre.org/top25/)
+
+### Testing
+
+- [Jest Docs](https://jestjs.io/)
+- [Playwright Docs](https://playwright.dev/)
+
+---
+
+## 💬 NOTES
+
+- Start with **Critical Fixes** - they prevent build errors
+- Then tackle **High Priority** items for security & stability
+- Use the **Weekly Checklist** to track progress
+- Test everything locally before production deployment
+- Monitor metrics after each change
+
+**Good luck!** 🚀

QUICK_START_GUIDE.md

@@ -1,373 +0,0 @@
-# AutoLoop Audit - Quick Start Guide
-
-## 📚 Document Overview
-
-This audit includes **5 comprehensive documents** totaling ~8,000 lines of analysis and recommendations.
-
-### Documents Created
-
-1. **AUDIT_REPORT.md** - Full system analysis (13 sections)
-2. **CRITICAL_FIXES.ts** - Ready-to-implement code fixes
-3. **IMPLEMENTATION_ROADMAP.md** - 4-week development plan
-4. **CODE_QUALITY_GUIDE.md** - Best practices & improvements
-5. **IMPLEMENTATION_CHECKLIST.md** - Step-by-step execution guide
-6. **EXECUTIVE_SUMMARY.md** - High-level overview
-
----
-
-## 🚀 Getting Started (30 minutes)
-
-### Step 1: Understand the Current State
-
-**Time**: 10 minutes
-
-Read in this order:
-
-1. First paragraph of [EXECUTIVE_SUMMARY.md](EXECUTIVE_SUMMARY.md)
-2. "What's Working Excellently" section
-3. "Critical Issues Found" section
-
-**Result**: You'll understand what's good and what needs fixing.
-
-### Step 2: Review Critical Fixes
-
-**Time**: 15 minutes
-
-1. Open [CRITICAL_FIXES.ts](CRITICAL_FIXES.ts)
-2. Read through all 7 fixes
-3. Understand the code changes needed
-4. Note which files to modify
-
-**Result**: You'll know exactly what code to change.
-
-### Step 3: Choose Your Path
-
-**Time**: 5 minutes
-
-#### Path A - Fast Track (Get Working ASAP)
-
-- Just do Phase 1 from IMPLEMENTATION_CHECKLIST.md
-- Takes 3 hours
-- Gets core workflow system working
-
-#### Path B - Quality Track (Build It Right)
-
-- Do all 4 phases from IMPLEMENTATION_CHECKLIST.md
-- Takes 2 weeks
-- Gets production-ready system
-
-Pick based on your timeline needs.
-
----
-
-## ⚡ Apply Critical Fixes (3 hours)
-
-### Quick Fix Commands
-
-```bash
-# 1. Create feature branch
-git checkout -b fix/workflow-execution
-
-# 2. Update files with code from CRITICAL_FIXES.ts
-#    - lib/workflow-executor.ts (2 changes)
-#    - db/schema/index.ts (add table)
-#    - app/api/workflows/execute/route.ts (replace)
-#    - lib/validate-env.ts (new file)
-
-# 3. Run database migration
-pnpm run db:generate
-pnpm run db:push
-
-# 4. Test the fixes
-pnpm run dev
-
-# 5. Test in browser
-#    - Create workflow with email node
-#    - Execute it
-#    - Check database for logs
-#    - Verify notification appears
-
-# 6. Commit changes
-git add .
-git commit -m "fix: complete workflow email execution system"
-git push origin fix/workflow-execution
-```
-
-### Verification Checklist
-
-- [ ] Workflow executes without errors
-- [ ] Email sends successfully
-- [ ] Logs appear in database
-- [ ] Notifications appear in UI
-- [ ] No console errors
-- [ ] All API endpoints respond
-
----
-
-## 📖 Read Documentation in Order
-
-### For Quick Understanding (1 hour)
-
-1. **EXECUTIVE_SUMMARY.md** (20 min)
-   - Status overview
-   - What's working
-   - Issues found
-   - Timeline to fix
-
-2. **CRITICAL_FIXES.ts** (30 min)
-   - Read each fix
-   - Understand the changes
-   - Identify affected files
-
-3. **IMPLEMENTATION_CHECKLIST.md** - Phase 1 (10 min)
-   - See step-by-step what to do
-
-### For Complete Understanding (4 hours)
-
-1. **AUDIT_REPORT.md** (90 min)
-   - Full analysis of each system
-   - Issues with explanations
-   - Recommendations
-
-2. **IMPLEMENTATION_ROADMAP.md** (60 min)
-   - 4-week plan
-   - Dependencies to add
-   - Success metrics
-
-3. **CODE_QUALITY_GUIDE.md** (90 min)
-   - TypeScript improvements
-   - Error handling patterns
-   - Testing strategies
-   - Security best practices
-
-4. **IMPLEMENTATION_CHECKLIST.md** (30 min)
-   - Step-by-step execution
-   - Testing checklist
-   - Deployment guide
-
----
-
-## 🎯 What You'll Accomplish
-
-### After 3 Hours (Phase 1)
-✅ Workflow email system fully functional
-✅ Workflow execution logged to database
-✅ Notifications on completion
-✅ Error handling improved
-
-### After 1 Week (Phase 1-2)
-✅ Everything above, plus:
-✅ Workflows auto-trigger on schedule
-✅ Workflows auto-trigger on new businesses
-✅ Workflow trigger management UI
-
-### After 2 Weeks (Phases 1-3)
-✅ Everything above, plus:
-✅ Pre-made templates validated
-✅ Email rate limiting enforced
-✅ Email tracking implemented
-✅ Analytics dashboard
-✅ Code quality improvements
-✅ Test coverage > 50%
-
-### After 1 Month (All Phases)
-✅ Production-grade system with:
-✅ Full test coverage
-✅ Monitoring & alerting
-✅ Security hardened
-✅ Performance optimized
-✅ Team collaboration features
-✅ CRM integrations ready
-
----
-
-## 📊 Key Statistics
-
-| Metric             | Value                           |
-| ------------------ | ------------------------------- |
-| Total Analysis     | 8,000+ lines                    |
-| Code Fixes         | 500 lines ready to use          |
-| Documentation      | 13 comprehensive sections       |
-| Issues Found       | 15+ with solutions              |
-| Estimated Fix Time | 3 hours (critical) → 4 weeks (all) |
-| Code Quality Score | 87/100 → 95/100                 |
-| Test Coverage      | 0% → 80%+                       |
-
----
-
-## 🔍 Key Insights
-
-### What's Amazing
-
-- ✅ Real production features (not mockups)
-- ✅ Well-architected codebase
-- ✅ Professional UI/UX
-- ✅ Proper database design
-- ✅ Good separation of concerns
-
-### What Needs Work
-
-- 🟡 Workflow execution incomplete (fixable in 30 mins)
-- 🟡 No execution logging (fixable in 1 hour)
-- 🟡 Missing auto-trigger system (fixable in 4-6 hours)
-- 🟡 Code has some `any` types (fixable in 4 hours)
-- 🟡 No test coverage (fixable in 8 hours)
-
-### Bottom Line
-**"This is a solid, well-built application. Just needs finishing touches to be production-ready."**
-
----
-
-## 💡 My Top 3 Recommendations
-
-### #1: Apply Critical Fixes NOW (Today)
-- Takes 3 hours
-- Unblocks core functionality
-- No risk
-
-### #2: Implement Workflow Triggers (This Week)
-- Takes 6 hours
-- Enables auto-execution
-- Major UX improvement
-
-### #3: Add Tests (Next Week)
-- Takes 8-10 hours
-- Gives you confidence
-- Prevents regressions
-
----
-
-## 🆘 Need Help?
-
-### Quick Questions
-- Check the relevant document index
-- Most questions answered in one of the 6 docs
-
-### Code Questions
-- CRITICAL_FIXES.ts has exact code to use
-- CODE_QUALITY_GUIDE.ts has patterns/examples
-- AUDIT_REPORT.md explains each issue
-
-### Architecture Questions
-- AUDIT_REPORT.md section 1-7
-- IMPLEMENTATION_ROADMAP.md for big picture
-- CODE_QUALITY_GUIDE.md for best practices
-
-### Implementation Help
-- IMPLEMENTATION_CHECKLIST.md step-by-step
-- Troubleshooting section for common issues
-
----
-
-## 📱 Quick Navigation
-
-```
-AutoLoop Project
-├── EXECUTIVE_SUMMARY.md ..................... START HERE
-├── AUDIT_REPORT.md ......................... Full Analysis
-├── CRITICAL_FIXES.ts ....................... Code to Copy
-├── IMPLEMENTATION_ROADMAP.md ............... 4-Week Plan
-├── CODE_QUALITY_GUIDE.md ................... Best Practices
-├── IMPLEMENTATION_CHECKLIST.md ............ Step-by-Step
-└── QUICK_START_GUIDE.md .................... This File
-```
-
----
-
-## ✅ Next Actions Checklist
-
-Rank by importance for your timeline:
-
-### This Week
-- [ ] Read EXECUTIVE_SUMMARY.md
-- [ ] Review CRITICAL_FIXES.ts
-- [ ] Apply Phase 1 fixes (3 hours)
-- [ ] Test fixes (1 hour)
-- [ ] Deploy to staging
-
-### This Month
-- [ ] Implement Phase 2 (Workflow Triggers)
-- [ ] Add Phase 3 features
-- [ ] Write tests
-- [ ] Security audit
-- [ ] Deploy to production
-
-### Next Quarter
-- [ ] Phase 4 Polish
-- [ ] Advanced features
-- [ ] CRM integrations
-- [ ] AI features
-- [ ] Scale to 100+ users
-
----
-
-## 💰 ROI Summary
-
-| Investment | Return |
-|-----------|--------|
-| 3 hours | Fully working email automation |
-| 1 week | Auto-triggering workflows |
-| 2 weeks | Production-ready system |
-| 1 month | Enterprise-grade features |
-
-**Break-even**: 2-3 weeks
-**6-month value**: $5,000-10,000 per user
-
----
-
-## 🎓 Learning Resources
-
-Each document teaches you something:
-
-1. **AUDIT_REPORT.md** → Learn system architecture
-2. **CRITICAL_FIXES.ts** → Learn what was broken
-3. **IMPLEMENTATION_ROADMAP.md** → Learn feature planning
-4. **CODE_QUALITY_GUIDE.md** → Learn best practices
-5. **IMPLEMENTATION_CHECKLIST.md** → Learn execution
-
-**Total learning time**: 4-6 hours
-**Outcome**: Deep understanding of your codebase
-
----
-
-## 📞 Support
-
-### Issues Not Covered?
-1. Check document table of contents
-2. Search for keywords in each doc
-3. Review troubleshooting section
-4. Check code comments
-
-### Want More Detail?
-Each document has:
-- Table of contents
-- Section summaries
-- Code examples
-- Practical checklists
-- Success criteria
-
----
-
-## 🏁 Final Checklist
-
-Before you start:
-- [ ] All documents downloaded/accessible
-- [ ] Feature branch created
-- [ ] Database backed up
-- [ ] Time blocked (3 hours minimum)
-- [ ] Browser with DevTools open
-- [ ] Terminal/IDE ready
-
-Now you're ready to start improving AutoLoop!
-
----
-
-**Start with**: [EXECUTIVE_SUMMARY.md](EXECUTIVE_SUMMARY.md)
-**Then read**: [CRITICAL_FIXES.ts](CRITICAL_FIXES.ts)
-**Then do**: [IMPLEMENTATION_CHECKLIST.md](IMPLEMENTATION_CHECKLIST.md) Phase 1
-
-**Estimated time to fully working system**: 3 hours
-**Estimated time to production-ready**: 2 weeks
-
-Good luck! 🚀
-

README.md

@@ -21,33 +21,40 @@ Key capabilities include continuous lead sourcing, smart email drafting with Goo
 ## 🚀 Key Features
 
 ### 🔍 Smart Lead Scraping
+
 - **Google Maps**: Automatically scrape businesses based on keywords and location. Extract valid emails, phone numbers, and websites.
 - **LinkedIn Integration**: Scrape profiles using Google Search heuristics and automate messages via Puppeteer (simulated browsing).
 
 ### 🎨 Visual Workflow Builder
+
 Design complex automation flows with a drag-and-drop node editor.
+
 - **Triggers**: Schedule-based or Event-based (e.g., "New Lead Found").
 - **Actions**: Send Email, Send WhatsApp, API Request, Scraper Action.
 - **Logic**: Conditionals, A/B Testing, Delays, Merges, Loops.
 - **Persistence**: Workflows save variable state between executions, enabling long-running multi-step sequences.
 
 ### 🧠 AI & Personalization
+
 - **Google Gemini 2.0**: Generate hyper-personalized email drafts based on prospect data and website content.
 - **Dynamic Variables**: Use `{{business.name}}`, `{{business.website}}`, etc., in your templates.
 
 ### 📧 Email Mastery
+
 - **Gmail Integration**: Send emails from your own account via OAuth.
 - **Delivery Tracking**: Real-time tracking of Opens and Clicks via pixel injection and link wrapping.
 - **Rate Limiting**: Built-in protection to prevent spam flagging (e.g., max 50 emails/day per account).
 - **Bounce Handling**: Automatic detection and handling of failed deliveries.
 
 ### 📊 Real-Time Analytics Dashboard
+
 - **Execution Monitoring**: Watch workflows run in real-time.
 - **Success/Failure Rates**: Identify bottlenecks in your automation.
 - **Quota Tracking**: Monitor your email sending limits and remaining quota.
 - **Export**: Download execution logs as CSV for offline analysis.
 
 ### 📱 Unified Social Suite
+
 - **LinkedIn**: Automate connection requests and messages.
 - **Instagram / Facebook**: Dashboard for scheduling Posts & Reels (Integration ready).
 
@@ -63,6 +70,7 @@ AutoLoop is built for reliability and scale:
 - **Monitoring**: Self-ping mechanism to ensure worker uptime on container platforms.
 
 ### Tech Stack
+
 - **Framework**: Next.js 15 (App Router)
 - **Language**: TypeScript
 - **Styling**: Tailwind CSS 4 + Shadcn UI
@@ -76,6 +84,7 @@ AutoLoop is built for reliability and scale:
 ## 📦 Installation & Setup
 
 ### Prerequisites
+
 - **Node.js 18+**
 - **pnpm** (recommended)
 - **PostgreSQL Database** (e.g., Neon)
@@ -85,38 +94,47 @@ AutoLoop is built for reliability and scale:
 ### Quick Start
 
 1. **Clone the repository**
-   ```bash
-   git clone https://github.com/yourusername/autoloop.git
-   cd autoloop
-   ```
+
+```bash
+git clone https://github.com/yourusername/autoloop.git
+cd autoloop
+```
 
 2. **Install dependencies**
-   ```bash
-   pnpm install
-   ```
+
+```bash
+pnpm install
+```
 
 3. **Configure Environment**
-   Create a `.env` file in the root directory (see [Environment Variables](#-environment-variables)).
+
+Create a `.env` file in the root directory (see [Environment Variables](#-environment-variables)).
 
 4. **Setup Database**
-   ```bash
-   pnpm db:push
-   # Optional: Seed sample data
-   npx tsx scripts/seed-data.ts
-   ```
+
+```bash
+pnpm db:push
+# Optional: Seed sample data
+npx tsx scripts/seed-data.ts
+```
 
 5. **Run Development Server**
-   ```bash
-   pnpm dev
-   ```
-   The web app will run at `http://localhost:3000`.
+
+```bash
+pnpm dev
+```
+
+The web app will run at `http://localhost:3000`.
 
 6. **Start Background Workers** (Critical for automation)
-   Open a separate terminal and run:
-   ```bash
-   pnpm worker
-   ```
-   *Note: This starts the dedicated worker process that handles queued jobs and scraping.*
+
+Open a separate terminal and run:
+
+```bash
+pnpm worker
+```
+
+*Note: This starts the dedicated worker process that handles queued jobs and scraping.*
 
 ---
 
@@ -157,9 +175,11 @@ ADMIN_EMAIL="admin@example.com"
 ## 🌐 Deployment
 
 ### Hugging Face Spaces / Docker
+
 This repo includes a `Dockerfile` and is configured for Hugging Face Spaces.
 
 **Important for Cloud Deployment:**
+
 1. **Worker Process**: Ensure your deployment platform runs `scripts/worker.ts`. In Docker, you might use a process manager like `pm2` or run the worker in a separate container/service.
 2. **Keep-Alive**: The worker includes a self-ping mechanism. Ensure `NEXT_PUBLIC_APP_URL` is set to your production URL (e.g., `https://my-app.hf.space`) so the ping hits the public route and keeps the container active.
 

__tests__/rate-limit.test.ts

@@ -1,10 +0,0 @@
-import { RateLimiter } from '@/lib/rate-limit';
-
-describe('RateLimiter', () => {
-  it('should allow requests below limit', async () => {
-    // This is a basic mock test since we don't have a real Redis in test env usually
-    const result = await RateLimiter.check('test-key', { limit: 10, windowSeconds: 60 });
-    // Without real Redis, it returns success: true by default in our implementation
-    expect(result.success).toBe(true); 
-  });
-});

__tests__/simple.test.js

@@ -1,5 +0,0 @@
-describe('Simple Test', () => {
-  it('should pass', () => {
-    expect(1 + 1).toBe(2);
-  });
-});

app/actions/business.ts

@@ -2,15 +2,20 @@
 
 import { auth } from "@/auth";
 import { getEffectiveUserId } from "@/lib/auth-utils";
+import { validateCsrfToken } from "@/lib/csrf-server";
 import { db } from "@/db";
 import { businesses } from "@/db/schema";
 import { eq, inArray, and } from "drizzle-orm";
 import { revalidatePath } from "next/cache";
 
-export async function deleteBusiness(id: string) {
+export async function deleteBusiness(id: string, csrfToken: string) {
     const session = await auth();
     if (!session?.user?.id) throw new Error("Unauthorized");
 
+    // Validate CSRF token
+    const isValidToken = await validateCsrfToken(csrfToken);
+    if (!isValidToken) throw new Error("Invalid CSRF token");
+
     const userId = await getEffectiveUserId(session.user.id);
 
     await db.delete(businesses).where(
@@ -23,10 +28,14 @@ export async function deleteBusiness(id: string) {
     revalidatePath("/dashboard/businesses");
 }
 
-export async function bulkDeleteBusinesses(ids: string[]) {
+export async function bulkDeleteBusinesses(ids: string[], csrfToken: string) {
     const session = await auth();
     if (!session?.user?.id) throw new Error("Unauthorized");
 
+    // Validate CSRF token
+    const isValidToken = await validateCsrfToken(csrfToken);
+    if (!isValidToken) throw new Error("Invalid CSRF token");
+
     const userId = await getEffectiveUserId(session.user.id);
 
     await db.delete(businesses).where(

app/animations.css

@@ -57,6 +57,30 @@
   animation: fade-in 1s ease-out forwards;
 }
 
+/* SVG shimmer for hero illustration */
+@keyframes svg-shimmer {
+  0% {
+    transform: translateX(-10px) scale(1);
+    opacity: 0.9;
+  }
+  50% {
+    transform: translateX(6px) scale(1.02);
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(-10px) scale(1);
+    opacity: 0.9;
+  }
+}
+
+.svg-tilt {
+  transition: transform 0.45s ease, opacity 0.4s ease;
+}
+
+.svg-shimmer {
+  animation: svg-shimmer 4s ease-in-out infinite;
+}
+
 /* Stagger animations */
 .stagger-1 {
   animation-delay: 0.1s;

app/api/admin/analytics/route.ts

@@ -0,0 +1,46 @@
+import { NextRequest, NextResponse } from "next/server";
+import { auth } from "@/lib/auth";
+import { db } from "@/db";
+import { users } from "@/db/schema";
+import { sql } from "drizzle-orm";
+
+export async function GET(request: NextRequest) {
+  const session = await auth();
+
+  if (!session || session.user.role !== "admin") {
+    return new NextResponse("Unauthorized", { status: 401 });
+  }
+
+  try {
+    // Get user growth over last 30 days
+    const usersByDate = await db.execute(sql`
+      SELECT 
+        DATE(created_at) as date, 
+        COUNT(*) as count 
+      FROM ${users} 
+      WHERE created_at > NOW() - INTERVAL '30 days'
+      GROUP BY DATE(created_at)
+      ORDER BY DATE(created_at) ASC
+    `);
+
+    let cumulativeUsers = 0;
+    const userGrowth = usersByDate.map((row: any) => {
+      cumulativeUsers += Number(row.count);
+      return {
+        date: new Date(row.date).toLocaleDateString("en-US", { month: "short", day: "numeric" }),
+        users: cumulativeUsers
+      };
+    });
+
+    return NextResponse.json({
+      userGrowth,
+      platformUsage: [
+        { name: "Emails", value: 120 }, // Placeholder
+        { name: "Workflows", value: 50 }, // Placeholder
+      ]
+    });
+  } catch (error) {
+    console.error("Failed to fetch analytics:", error);
+    return new NextResponse("Internal Server Error", { status: 500 });
+  }
+}

app/api/admin/logs/route.ts

@@ -0,0 +1,54 @@
+import { NextRequest, NextResponse } from "next/server";
+import { auth } from "@/lib/auth";
+import { db } from "@/db";
+import { workflowExecutionLogs, users } from "@/db/schema";
+import { desc, eq } from "drizzle-orm";
+
+export async function GET(request: NextRequest) {
+    const session = await auth();
+
+    if (!session || session.user.role !== "admin") {
+        return new NextResponse("Unauthorized", { status: 401 });
+    }
+
+    try {
+        const recentLogs = await db
+            .select({
+                id: workflowExecutionLogs.id,
+                status: workflowExecutionLogs.status,
+                createdAt: workflowExecutionLogs.createdAt,
+                userId: workflowExecutionLogs.userId,
+                workflowId: workflowExecutionLogs.workflowId,
+            })
+            .from(workflowExecutionLogs)
+            .orderBy(desc(workflowExecutionLogs.createdAt))
+            .limit(20);
+
+        const enrichedLogs = await Promise.all(recentLogs.map(async (log) => {
+            // Need to handle null userId if that's possible in schema, assuming not null for now
+            // If userId is null, we can't fetch user name
+            let userName = "Unknown User";
+
+            if (log.userId) {
+                const user = await db.query.users.findFirst({
+                    where: eq(users.id, log.userId),
+                    columns: { name: true }
+                });
+                if (user?.name) userName = user.name;
+            }
+
+            return {
+                id: log.id,
+                type: log.status === "completed" ? "success" : log.status === "failed" ? "error" : "info",
+                message: `Workflow execution ${log.status} for ${userName}`,
+                timestamp: log.createdAt,
+                metadata: { workflowId: log.workflowId }
+            };
+        }));
+
+        return NextResponse.json({ logs: enrichedLogs });
+    } catch (error) {
+        console.error("Failed to fetch logs:", error);
+        return new NextResponse("Internal Server Error", { status: 500 });
+    }
+}

app/api/admin/settings/route.ts

@@ -0,0 +1,86 @@
+
+import { NextResponse } from "next/server";
+import { auth } from "@/lib/auth";
+import { db } from "@/db";
+import { systemSettings } from "@/db/schema";
+import { desc, eq } from "drizzle-orm";
+
+export async function GET() {
+  try {
+    const session = await auth();
+    if (!session?.user || session.user.role !== "admin") {
+      return new NextResponse("Unauthorized", { status: 401 });
+    }
+
+    // specific type imports might be needed if strictly typed
+    // Get the most recent settings or create default
+    let [settings] = await db
+      .select()
+      .from(systemSettings)
+      .orderBy(desc(systemSettings.updatedAt))
+      .limit(1);
+
+    if (!settings) {
+      // Initialize default settings
+      [settings] = await db.insert(systemSettings).values({
+        featureFlags: {
+            betaFeatures: false,
+            registration: true,
+            maintenance: false,
+        },
+        emailConfig: {
+            dailyLimit: 10000,
+            userRateLimit: 50,
+        }
+      }).returning();
+    }
+
+    return NextResponse.json(settings);
+  } catch (error) {
+    console.error("[SETTINGS_GET]", error);
+    return new NextResponse("Internal Error", { status: 500 });
+  }
+}
+
+export async function POST(req: Request) {
+  try {
+    const session = await auth();
+    if (!session?.user || session.user.role !== "admin") {
+      return new NextResponse("Unauthorized", { status: 401 });
+    }
+
+    const body = await req.json();
+    const { featureFlags, emailConfig } = body;
+
+    // specific type imports might be needed if strictly typed
+    // Update existing or create new
+    const [existing] = await db
+      .select()
+      .from(systemSettings)
+      .orderBy(desc(systemSettings.updatedAt))
+      .limit(1);
+
+    let settings;
+    if (existing) {
+       [settings] = await db
+        .update(systemSettings)
+        .set({
+          featureFlags,
+          emailConfig,
+          updatedAt: new Date(),
+        })
+        .where(eq(systemSettings.id, existing.id)) // Use ID to be safe
+        .returning();
+    } else {
+        [settings] = await db.insert(systemSettings).values({
+            featureFlags,
+            emailConfig,
+        }).returning();
+    }
+
+    return NextResponse.json(settings);
+  } catch (error) {
+    console.error("[SETTINGS_POST]", error);
+    return new NextResponse("Internal Error", { status: 500 });
+  }
+}

app/api/admin/stats/route.ts

@@ -0,0 +1,54 @@
+import { NextRequest, NextResponse } from "next/server";
+import { auth } from "@/lib/auth";
+import { db } from "@/db";
+import { users, automationWorkflows } from "@/db/schema";
+import { count } from "drizzle-orm";
+import { getRedis } from "@/lib/redis";
+
+export async function GET() {
+    const session = await auth();
+
+    if (!session || session.user.role !== "admin") {
+        return new NextResponse("Unauthorized", { status: 401 });
+    }
+
+    try {
+        const redis = getRedis();
+
+        // Parallel database queries for speed
+        const [
+            totalUsersResult,
+            totalWorkflowsResult
+        ] = await Promise.all([
+            db.select({ count: count() }).from(users),
+            db.select({ count: count() }).from(automationWorkflows)
+        ]);
+
+        let systemHealth = "degraded";
+        if (redis) {
+            try {
+                const ping = await redis.ping();
+                if (ping === "PONG") systemHealth = "healthy";
+            } catch {
+                systemHealth = "degraded";
+            }
+        }
+
+        const totalUsers = totalUsersResult[0]?.count || 0;
+        const totalWorkflows = totalWorkflowsResult[0]?.count || 0;
+
+        // Mocking active users as 60% of total for now
+        const activeUsers = Math.floor(totalUsers * 0.6);
+
+        return NextResponse.json({
+            totalUsers,
+            userGrowth: 15, // Placeholder
+            activeUsers,
+            totalWorkflows,
+            systemHealth
+        });
+    } catch (error) {
+        console.error("Failed to fetch admin stats:", error);
+        return new NextResponse("Internal Server Error", { status: 500 });
+    }
+}

app/api/admin/users/[id]/route.ts

@@ -0,0 +1,35 @@
+import { NextRequest, NextResponse } from "next/server";
+import { auth } from "@/lib/auth";
+import { db } from "@/db";
+import { users } from "@/db/schema";
+import { eq } from "drizzle-orm";
+
+export async function PATCH(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const session = await auth();
+  const { id } = await params;
+
+  if (!session || session.user.role !== "admin") {
+    return new NextResponse("Unauthorized", { status: 401 });
+  }
+
+  try {
+    const body = await request.json();
+    const { role } = body;
+
+    if (id === session.user.id && (role && role !== "admin")) {
+      return new NextResponse("Cannot downgrade your own role", { status: 403 });
+    }
+
+    if (role) {
+      await db.update(users).set({ role }).where(eq(users.id, id));
+    }
+
+    return NextResponse.json({ success: true, message: "User updated successfully" });
+  } catch (error) {
+    console.error("Failed to update user:", error);
+    return new NextResponse("Internal Server Error", { status: 500 });
+  }
+}

app/api/admin/users/route.ts

@@ -0,0 +1,51 @@
+import { NextRequest, NextResponse } from "next/server";
+import { auth } from "@/lib/auth";
+import { db } from "@/db";
+import { users } from "@/db/schema";
+import { desc, ilike, or } from "drizzle-orm";
+
+export async function GET(request: NextRequest) {
+  const session = await auth();
+
+  if (!session || session.user.role !== "admin") {
+    return new NextResponse("Unauthorized", { status: 401 });
+  }
+
+  try {
+    const { searchParams } = new URL(request.url);
+    const search = searchParams.get("search") || "";
+    const limit = parseInt(searchParams.get("limit") || "50");
+    const offset = parseInt(searchParams.get("offset") || "0");
+
+    let query = db.select().from(users).limit(limit).offset(offset).orderBy(desc(users.createdAt));
+
+    if (search) {
+      // @ts-expect-error - Drizzle types issue with dynamic where
+      query = query.where(
+        or(
+          // cast to unknown to avoid lint errors if schema changes imply type mismatches temporarily
+          ilike(users.name, `%${search}%`),
+          ilike(users.email, `%${search}%`)
+        )
+      );
+    }
+
+    const allUsers = await query;
+
+    const adminUsers = allUsers.map(user => ({
+      id: user.id,
+      name: user.name,
+      email: user.email,
+      image: user.image,
+      role: user.role || "user",
+      status: "active",
+      lastActive: new Date(),
+      createdAt: user.createdAt,
+    }));
+
+    return NextResponse.json({ users: adminUsers });
+  } catch (error) {
+    console.error("Failed to fetch users:", error);
+    return new NextResponse("Internal Server Error", { status: 500 });
+  }
+}

app/api/auth/route-wrapper.ts

@@ -0,0 +1,50 @@
+/**
+ * Enhanced auth routes with rate limiting on sensitive endpoints
+ * Apply stricter limits to prevent brute force attacks
+ */
+import { NextRequest } from "next/server";
+import { handlers } from "@/lib/auth";
+import { checkRateLimit } from "@/lib/rate-limit";
+
+// Wrap the NextAuth handlers with rate limiting
+const originalGET = handlers.GET;
+const originalPOST = handlers.POST;
+
+/**
+ * Rate-limited GET handler
+ */
+async function GET(req: NextRequest) {
+    // Only rate limit on sign-in/callback flows
+    const pathname = req.nextUrl.pathname;
+
+    if (pathname.includes("signin") || pathname.includes("callback")) {
+        const { limited, response } = await checkRateLimit(req, "auth_login");
+        if (limited) return response!;
+    }
+
+    return originalGET(req);
+}
+
+/**
+ * Rate-limited POST handler
+ */
+async function POST(req: NextRequest) {
+    // Rate limit on sign-in and sign-up
+    const pathname = req.nextUrl.pathname;
+    let rateLimitContext: "auth_login" | "auth_signup" = "auth_login";
+
+    if (pathname.includes("signin")) {
+        rateLimitContext = "auth_login"; // 5 attempts per minute
+    } else if (pathname.includes("signup")) {
+        rateLimitContext = "auth_signup"; // 3 attempts per 5 minutes
+    } else if (pathname.includes("callback")) {
+        rateLimitContext = "auth_login";
+    }
+
+    const { limited, response } = await checkRateLimit(req, rateLimitContext);
+    if (limited) return response!;
+
+    return originalPOST(req);
+}
+
+export { GET, POST };

app/api/businesses/route.ts

@@ -4,12 +4,8 @@ import { db } from "@/db";
 import { businesses } from "@/db/schema";
 import { eq, and, sql, or, isNull } from "drizzle-orm";
 import { rateLimit } from "@/lib/rate-limit";
-
-interface SessionUser {
-  id: string;
-  email: string;
-  name?: string;
-}
+import { getCached, invalidateCache } from "@/lib/cache-manager";
+import type { SessionUser } from "@/types";
 
 export async function GET(request: Request) {
   try {
@@ -27,63 +23,76 @@ export async function GET(request: Request) {
     const keyword = searchParams.get("keyword");
     const page = parseInt(searchParams.get("page") || "1");
     const limit = parseInt(searchParams.get("limit") || "10");
-    const offset = (page - 1) * limit;
-
-    // Build where conditions
-    const conditions = [eq(businesses.userId, userId)];
-
-    if (category && category !== "all") {
-      conditions.push(eq(businesses.category, category));
-    }
-
-    if (status && status !== "all") {
-      if (status === "pending") {
-        conditions.push(or(eq(businesses.emailStatus, "pending"), isNull(businesses.emailStatus))!);
-      } else {
-        conditions.push(eq(businesses.emailStatus, status));
-      }
-    }
-
-    if (minRating) {
-      conditions.push(sql`${businesses.rating} >= ${minRating}`);
-    }
 
-    if (location) {
-      conditions.push(sql`${businesses.address} ILIKE ${`%${location}%`}`);
-    }
-
-    if (keyword) {
-      conditions.push(
-        or(
-          sql`${businesses.name} ILIKE ${`%${keyword}%`}`,
-          sql`${businesses.category} ILIKE ${`%${keyword}%`}`
-        )!
-      );
-    }
+    // Generate cache key from query parameters
+    const cacheKey = `businesses:${userId}:${category}:${status}:${minRating}:${location}:${keyword}:${page}:${limit}`;
+
+    // Try to get from cache first
+    const cached = await getCached(
+      cacheKey,
+      async () => {
+        const offset = (page - 1) * limit;
+
+        // Build where conditions
+        const conditions = [eq(businesses.userId, userId)];
+
+        if (category && category !== "all") {
+          conditions.push(eq(businesses.category, category));
+        }
+
+        if (status && status !== "all") {
+          if (status === "pending") {
+            conditions.push(or(eq(businesses.emailStatus, "pending"), isNull(businesses.emailStatus))!);
+          } else {
+            conditions.push(eq(businesses.emailStatus, status));
+          }
+        }
+
+        if (minRating) {
+          conditions.push(sql`${businesses.rating} >= ${minRating}`);
+        }
+
+        if (location) {
+          conditions.push(sql`${businesses.address} ILIKE ${`%${location}%`}`);
+        }
+
+        if (keyword) {
+          conditions.push(
+            or(
+              sql`${businesses.name} ILIKE ${`%${keyword}%`}`,
+              sql`${businesses.category} ILIKE ${`%${keyword}%`}`
+            )!
+          );
+        }
+
+        // Get total count
+        const [{ count }] = await db
+          .select({ count: sql<number>`count(*)` })
+          .from(businesses)
+          .where(and(...conditions));
+
+        const totalPages = Math.ceil(count / limit);
+
+        const results = await db
+          .select()
+          .from(businesses)
+          .where(and(...conditions))
+          .orderBy(businesses.createdAt)
+          .limit(limit)
+          .offset(offset);
+
+        return {
+          businesses: results,
+          page,
+          limit,
+          total: count,
+          totalPages,
+        };
+      },
+      600 // Cache for 10 minutes
+    );
 
-    // Get total count
-    const [{ count }] = await db
-      .select({ count: sql<number>`count(*)` })
-      .from(businesses)
-      .where(and(...conditions));
-
-    const totalPages = Math.ceil(count / limit);
-
-    const results = await db
-      .select()
-      .from(businesses)
-      .where(and(...conditions))
-      .orderBy(businesses.createdAt)
-      .limit(limit)
-      .offset(offset);
-
-    return NextResponse.json({
-      businesses: results,
-      page,
-      limit,
-      total: count,
-      totalPages
-    });
+    return NextResponse.json(cached);
   } catch (error) {
     console.error("Error fetching businesses:", error);
     return NextResponse.json(
@@ -105,6 +114,7 @@ export async function PATCH(request: Request) {
       return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
     }
 
+    const userId = (session.user as SessionUser).id;
     const body = await request.json();
     const { id, ...updates } = body;
 
@@ -114,6 +124,9 @@ export async function PATCH(request: Request) {
       .where(eq(businesses.id, id))
       .returning();
 
+    // Invalidate cache for this user's businesses
+    await invalidateCache(`businesses:${userId}:*`);
+
     return NextResponse.json({ business });
   } catch (error) {
     console.error("Error updating business:", error);
@@ -131,6 +144,7 @@ export async function DELETE(request: Request) {
       return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
     }
 
+    const userId = (session.user as SessionUser).id;
     const { searchParams } = new URL(request.url);
     const id = searchParams.get("id");
 
@@ -143,6 +157,9 @@ export async function DELETE(request: Request) {
 
     await db.delete(businesses).where(eq(businesses.id, id));
 
+    // Invalidate cache for this user's businesses
+    await invalidateCache(`businesses:${userId}:*`);
+
     return NextResponse.json({ success: true });
   } catch (error) {
     console.error("Error deleting business:", error);

app/api/health/route.ts

@@ -2,46 +2,123 @@ import { NextResponse } from "next/server";
 import { db } from "@/db";
 import { sql } from "drizzle-orm";
 import { redis } from "@/lib/redis";
+import { Logger } from "@/lib/logger";
 
-export const dynamic = 'force-dynamic';
+export const dynamic = "force-dynamic";
 
-export async function GET() {
-  const health = {
-    status: "ok",
-    timestamp: new Date().toISOString(),
-    services: {
-      database: "unknown",
-      redis: "unknown",
-    }
-  };
+interface HealthCheck {
+  status: "healthy" | "degraded" | "unhealthy";
+  timestamp: string;
+  checks: Record<string, { status: boolean; message?: string; latency?: number }>;
+}
 
-  let statusCode = 200;
+export async function GET(): Promise<NextResponse<HealthCheck>> {
+  const checks: HealthCheck["checks"] = {};
 
   // Check Database
   try {
+    const dbStart = performance.now();
     await db.execute(sql`SELECT 1`);
-    health.services.database = "up";
+    const dbLatency = Math.round(performance.now() - dbStart);
+    checks.database = {
+      status: true,
+      latency: dbLatency,
+      message: `Connected in ${dbLatency}ms`,
+    };
   } catch (error) {
-    console.error("Health check - DB failed:", error);
-    health.services.database = "down";
-    health.status = "error";
-    statusCode = 503;
+    Logger.error("Health check - DB failed", error as Error);
+    checks.database = {
+      status: false,
+      message: error instanceof Error ? error.message : "Connection failed",
+    };
   }
 
   // Check Redis
   try {
+    const redisStart = performance.now();
     if (redis) {
       await redis.ping();
-      health.services.redis = "up";
+      const redisLatency = Math.round(performance.now() - redisStart);
+      checks.redis = {
+        status: true,
+        latency: redisLatency,
+        message: `Connected in ${redisLatency}ms`,
+      };
     } else {
-      health.services.redis = "not_configured";
+      checks.redis = {
+        status: false,
+        message: "Redis client not initialized",
+      };
     }
   } catch (error) {
-    console.error("Health check - Redis failed:", error);
-    health.services.redis = "down";
-    health.status = "error";
-    statusCode = 503;
+    Logger.error("Health check - Redis failed", error as Error);
+    checks.redis = {
+      status: false,
+      message: error instanceof Error ? error.message : "Connection failed",
+    };
   }
 
-  return NextResponse.json(health, { status: statusCode });
+  // Check Gemini API (optional)
+  try {
+    const geminiStart = performance.now();
+    const response = await fetch(
+      `https://generativelanguage.googleapis.com/v1beta/models?key=${process.env.GEMINI_API_KEY}`,
+      { signal: AbortSignal.timeout(5000) }
+    );
+    const geminiLatency = Math.round(performance.now() - geminiStart);
+
+    checks.gemini = {
+      status: response.ok,
+      latency: geminiLatency,
+      message: response.ok
+        ? `Available in ${geminiLatency}ms`
+        : `API returned ${response.status}`,
+    };
+  } catch (error) {
+    checks.gemini = {
+      status: false,
+      message: error instanceof Error ? error.message : "Connection failed",
+    };
+  }
+
+  // Determine overall status (database is critical)
+  const overallStatus =
+    checks.database?.status === false
+      ? "unhealthy"
+      : !Object.values(checks).every((check) => check.status)
+        ? "degraded"
+        : "healthy";
+
+  const httpStatus = overallStatus === "healthy" ? 200 : 503;
+
+  const healthCheck: HealthCheck = {
+    status: overallStatus,
+    timestamp: new Date().toISOString(),
+    checks,
+  };
+
+  if (overallStatus !== "healthy") {
+    Logger.warn("Health check failed", {
+      status: overallStatus,
+      failedChecks: Object.entries(checks)
+        .filter(([, check]) => !check.status)
+        .map(([name]) => name),
+    });
+  }
+
+  return NextResponse.json(healthCheck, { status: httpStatus });
+}
+
+/**
+ * Liveness probe - checks if service is running
+ * For Kubernetes/Docker deployments
+ */
+export async function HEAD(): Promise<NextResponse> {
+  try {
+    // Quick database connectivity check
+    await db.execute(sql`SELECT 1`);
+    return new NextResponse(null, { status: 200 });
+  } catch {
+    return new NextResponse(null, { status: 503 });
+  }
 }

app/api/logs/background/route.ts

@@ -0,0 +1,42 @@
+import { apiSuccess } from "@/lib/api-response-helpers";
+
+// In-memory log storage (in production, use Redis or database)
+const logs: Array<{
+    id: string;
+    timestamp: string;
+    level: "info" | "error" | "warn" | "success";
+    source: string;
+    message: string;
+}> = [];
+
+let logIdCounter = 0;
+
+// Export function to add logs from other parts of the app
+export function addBackgroundLog(
+    level: "info" | "error" | "warn" | "success",
+    source: string,
+    message: string
+) {
+    logs.push({
+        id: `log-${++logIdCounter}`,
+        timestamp: new Date().toISOString(),
+        level,
+        source,
+        message,
+    });
+
+    // Keep only last 500 logs
+    if (logs.length > 500) {
+        logs.shift();
+    }
+}
+
+export async function GET() {
+    return apiSuccess({ logs: logs.slice(-200) }); // Return last 200 logs
+}
+
+export async function DELETE() {
+    logs.length = 0;
+    logIdCounter = 0;
+    return apiSuccess({ message: "Logs cleared" });
+}

app/api/notifications/[id]/route.ts

@@ -0,0 +1,45 @@
+import { auth } from "@/lib/auth";
+import { apiSuccess, apiError } from "@/lib/api-response-helpers";
+import { NotificationService } from "@/lib/notifications/notification-service";
+
+export async function PATCH(
+  request: Request,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const session = await auth();
+    if (!session?.user?.id) {
+      return apiError("Unauthorized", 401);
+    }
+
+    const { id } = params;
+
+    await NotificationService.markAsRead(id, session.user.id);
+
+    return apiSuccess({ message: "Notification marked as read" });
+  } catch (error) {
+    console.error("Error updating notification:", error);
+    return apiError("Failed to update notification", 500);
+  }
+}
+
+export async function DELETE(
+  request: Request,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const session = await auth();
+    if (!session?.user?.id) {
+      return apiError("Unauthorized", 401);
+    }
+
+    const { id } = params;
+
+    await NotificationService.delete(id, session.user.id);
+
+    return apiSuccess({ message: "Notification deleted" });
+  } catch (error) {
+    console.error("Error deleting notification:", error);
+    return apiError("Failed to delete notification", 500);
+  }
+}

app/api/notifications/actions/route.ts

@@ -0,0 +1,30 @@
+import { auth } from "@/lib/auth";
+import { apiSuccess, apiError } from "@/lib/api-response-helpers";
+import { NotificationService } from "@/lib/notifications/notification-service";
+
+export async function PATCH(request: Request) {
+  try {
+    const session = await auth();
+    if (!session?.user?.id) {
+      return apiError("Unauthorized", 401);
+    }
+
+    const body = await request.json();
+    const { action, category } = body;
+
+    if (action === "mark-all-read") {
+      await NotificationService.markAllAsRead(session.user.id, category);
+      return apiSuccess({ message: "All notifications marked as read" });
+    }
+
+    if (action === "delete-all-read") {
+      await NotificationService.deleteAllRead(session.user.id);
+      return apiSuccess({ message: "All read notifications deleted" });
+    }
+
+    return apiError("Invalid action", 400);
+  } catch (error) {
+    console.error("Error updating notifications:", error);
+    return apiError("Failed to update notifications", 500);
+  }
+}

app/api/notifications/preferences/route.ts

@@ -0,0 +1,46 @@
+import { auth } from "@/lib/auth";
+import { apiSuccess, apiError } from "@/lib/api-response-helpers";
+import { NotificationService } from "@/lib/notifications/notification-service";
+
+export async function GET() {
+  try {
+    const session = await auth();
+    if (!session?.user?.id) {
+      return apiError("Unauthorized", 401);
+    }
+
+    const preferences = await NotificationService.getPreferences(session.user.id);
+
+    return apiSuccess({ preferences });
+  } catch (error) {
+    console.error("Error fetching preferences:", error);
+    return apiError("Failed to fetch preferences", 500);
+  }
+}
+
+export async function PATCH(request: Request) {
+  try {
+    const session = await auth();
+    if (!session?.user?.id) {
+      return apiError("Unauthorized", 401);
+    }
+
+    const body = await request.json();
+    const { category, ...preferences } = body;
+
+    if (!category) {
+      return apiError("Category is required", 400);
+    }
+
+    await NotificationService.updatePreferences(
+      session.user.id,
+      category,
+      preferences
+    );
+
+    return apiSuccess({ message: "Preferences updated successfully" });
+  } catch (error) {
+    console.error("Error updating preferences:", error);
+    return apiError("Failed to update preferences", 500);
+  }
+}

app/api/notifications/route.ts

@@ -1,77 +1,62 @@
-import { NextResponse } from "next/server";
 import { auth } from "@/lib/auth";
-import { db } from "@/db";
-import { notifications, users } from "@/db/schema";
-import { eq, desc } from "drizzle-orm";
+import { apiSuccess, apiError } from "@/lib/api-response-helpers";
+import { NotificationService } from "@/lib/notifications/notification-service";
 
-export async function GET() {
+export async function GET(request: Request) {
   try {
     const session = await auth();
-    if (!session?.user?.email) {
-      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    if (!session?.user?.id) {
+      return apiError("Unauthorized", 401);
     }
 
-    // Get user ID from DB
-    const user = await db.query.users.findFirst({
-        where: eq(users.email, session.user.email)
-    });
+    const { searchParams } = new URL(request.url);
+    const categoryParam = searchParams.get("category");
+    const category = categoryParam as "workflow" | "social" | "email" | "system" | "task" | undefined;
+    const limit = parseInt(searchParams.get("limit") || "50");
+    const offset = parseInt(searchParams.get("offset") || "0");
 
-    if (!user) {
-        return NextResponse.json({ error: "User not found" }, { status: 404 });
-    }
+    const notifications = await NotificationService.getForUser(session.user.id, {
+      category: category || undefined,
+      limit,
+      offset,
+    });
 
-    const userNotifications = await db
-      .select()
-      .from(notifications)
-      .where(eq(notifications.userId, user.id))
-      .orderBy(desc(notifications.createdAt))
-      .limit(50);
+    const unreadCount = await NotificationService.getUnreadCount(session.user.id);
 
-    return NextResponse.json({ notifications: userNotifications });
+    return apiSuccess({ notifications, unreadCount });
   } catch (error) {
     console.error("Error fetching notifications:", error);
-    return NextResponse.json(
-      { error: "Failed to fetch notifications" },
-      { status: 500 }
-    );
+    return apiError("Failed to fetch notifications", 500);
   }
 }
 
 export async function POST(request: Request) {
   try {
     const session = await auth();
-    if (!session?.user?.email) {
-      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    if (!session?.user?.id) {
+      return apiError("Unauthorized", 401);
     }
 
-     // Get user ID from DB
-     const user = await db.query.users.findFirst({
-        where: eq(users.email, session.user.email)
-    });
+    const body = await request.json();
+    const { title, message, category, level, actionUrl, metadata } = body;
 
-    if (!user) {
-        return NextResponse.json({ error: "User not found" }, { status: 404 });
+    if (!title || !message || !category || !level) {
+      return apiError("Missing required fields", 400);
     }
 
-    const { title, message, type } = await request.json();
-
-    const [newNotification] = await db
-      .insert(notifications)
-      .values({
-        userId: user.id,
-        title,
-        message,
-        type: type || "info",
-        read: false,
-      })
-      .returning();
+    const notification = await NotificationService.create({
+      userId: session.user.id,
+      title,
+      message,
+      category,
+      level,
+      actionUrl,
+      metadata,
+    });
 
-    return NextResponse.json({ notification: newNotification });
+    return apiSuccess({ notification });
   } catch (error) {
     console.error("Error creating notification:", error);
-    return NextResponse.json(
-      { error: "Failed to create notification" },
-      { status: 500 }
-    );
+    return apiError("Failed to create notification", 500);
   }
 }

app/api/performance/metrics/route.ts

@@ -0,0 +1,26 @@
+import {  NextResponse } from "next/server";
+import { performanceMonitor } from "@/lib/performance-monitoring";
+
+export async function GET() {
+    try {
+        // Get summary of web vitals and API metrics
+        const summary = performanceMonitor.getSummary();
+
+        return NextResponse.json({
+            lcp: summary.lcp,
+            cls: summary.cls,
+            fid: summary.fid,
+            avgAPITime: summary.avgAPITime,
+            slowRequests: summary.slowRequests,
+            cachedRequests: summary.cachedRequests,
+            totalRequests: summary.totalRequests,
+            cacheHitRate: summary.cacheHitRate,
+        });
+    } catch (error) {
+        console.error("Failed to get performance metrics:", error);
+        return NextResponse.json(
+            { error: "Failed to fetch metrics" },
+            { status: 500 }
+        );
+    }
+}

app/api/scraping/start/route.ts

@@ -4,7 +4,7 @@ import { db } from "@/db";
 import { scrapingJobs } from "@/db/schema";
 import { queueScraping } from "@/lib/queue";
 import { rateLimit } from "@/lib/rate-limit";
-import { SessionUser } from "@/types";
+import type { SessionUser } from "@/types";
 import { eq, and } from "drizzle-orm";
 
 export async function POST(request: Request) {

app/api/settings/route.ts

@@ -13,6 +13,9 @@ interface UpdateUserData {
   company?: string;
   website?: string;
   customVariables?: Record<string, string>;
+  whatsappBusinessPhone?: string;
+  whatsappAccessToken?: string;
+  whatsappVerifyToken?: string;
   updatedAt: Date;
 }
 
@@ -40,6 +43,9 @@ export async function GET() {
         company: users.company,
         website: users.website,
         customVariables: users.customVariables,
+        whatsappBusinessPhone: users.whatsappBusinessPhone,
+        whatsappAccessToken: users.whatsappAccessToken,
+        whatsappVerifyToken: users.whatsappVerifyToken,
       })
       .from(users)
       .where(eq(users.id, userId));
@@ -73,6 +79,8 @@ export async function GET() {
         company: user.company,
         website: user.website,
         customVariables: user.customVariables,
+        whatsappBusinessPhone: user.whatsappBusinessPhone,
+        isWhatsappConfigured: !!(user.whatsappBusinessPhone && user.whatsappAccessToken),
       },
       connectedAccounts: accounts,
     });
@@ -108,6 +116,9 @@ export async function PATCH(request: Request) {
     if (body.company !== undefined) updateData.company = body.company;
     if (body.website !== undefined) updateData.website = body.website;
     if (body.customVariables !== undefined) updateData.customVariables = body.customVariables;
+    if (body.whatsappBusinessPhone !== undefined) updateData.whatsappBusinessPhone = body.whatsappBusinessPhone;
+    if (body.whatsappAccessToken !== undefined) updateData.whatsappAccessToken = body.whatsappAccessToken;
+    if (body.whatsappVerifyToken !== undefined) updateData.whatsappVerifyToken = body.whatsappVerifyToken;
 
     const [updatedUser] = await db
       .update(users)

app/api/social/automations/[id]/route.ts

@@ -0,0 +1,42 @@
+import { auth } from "@/lib/auth";
+import { db } from "@/db";
+import { socialAutomations } from "@/db/schema";
+import { eq, and } from "drizzle-orm";
+import { apiSuccess, apiError } from "@/lib/api-response-helpers";
+
+export async function DELETE(
+  request: Request,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const session = await auth();
+
+    if (!session?.user?.id) {
+      return apiError("Unauthorized", 401);
+    }
+
+    const { id } = params;
+
+    // Verify ownership before deleting
+    const automation = await db.query.socialAutomations.findFirst({
+      where: and(
+        eq(socialAutomations.id, id),
+        eq(socialAutomations.userId, session.user.id)
+      ),
+    });
+
+    if (!automation) {
+      return apiError("Automation not found or access denied", 404);
+    }
+
+    // Delete the automation
+    await db
+      .delete(socialAutomations)
+      .where(eq(socialAutomations.id, id));
+
+    return apiSuccess({ message: "Automation deleted successfully" });
+  } catch (error) {
+    console.error("Error deleting automation:", error);
+    return apiError("Failed to delete automation", 500);
+  }
+}

app/api/social/automations/trigger/route.ts

@@ -0,0 +1,71 @@
+/**
+ * API endpoint to manually trigger social automation checks
+ * Useful for testing without waiting for the worker interval
+ */
+
+import { NextResponse } from "next/server";
+import { auth } from "@/lib/auth";
+import { SessionUser } from "@/types";
+import { socialAutomationWorker } from "@/lib/workers/social-automation";
+
+export async function POST() {
+    try {
+        const session = await auth();
+        if (!session?.user) {
+            return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+        }
+
+        const userId = (session.user as SessionUser).id;
+
+        // Only allow admin or authenticated users to trigger
+        if (!userId) {
+            return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+        }
+
+        console.log("🔄 Manually triggered social automation check");
+
+        // Trigger a single check cycle
+        const workerAny = socialAutomationWorker as unknown as {
+            processAutomations: () => Promise<void>;
+        };
+        await workerAny.processAutomations();
+
+        return NextResponse.json({
+            success: true,
+            message: "Social automation check triggered successfully",
+        });
+    } catch (error) {
+        console.error("Error triggering social automation:", error);
+        return NextResponse.json(
+            { error: error instanceof Error ? error.message : "Failed to trigger automation" },
+            { status: 500 }
+        );
+    }
+}
+
+export async function GET() {
+    try {
+        const session = await auth();
+        if (!session?.user) {
+            return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+        }
+
+        // Return worker status
+        const workerAny = socialAutomationWorker as unknown as {
+            isRunning: boolean;
+            checkIntervalMs: number;
+        };
+
+        return NextResponse.json({
+            isRunning: workerAny.isRunning || false,
+            checkIntervalMs: workerAny.checkIntervalMs || 60000,
+            status: workerAny.isRunning ? "active" : "stopped",
+        });
+    } catch (error) {
+        console.error("Error getting worker status:", error);
+        return NextResponse.json(
+            { error: "Failed to get worker status" },
+            { status: 500 }
+        );
+    }
+}

app/api/social/webhooks/facebook/route.ts

@@ -0,0 +1,244 @@
+/**
+ * Facebook Webhook Handler
+ * Handles real-time webhook events from Facebook/Instagram
+ */
+
+import { NextRequest, NextResponse } from "next/server";
+import { db } from "@/db";
+import { socialAutomations, connectedAccounts } from "@/db/schema";
+import { eq } from "drizzle-orm";
+import crypto from "crypto";
+/**
+ * GET handler for webhook verification
+ * Facebook requires this for webhook setup
+ */
+export async function GET(request: NextRequest) {
+    const searchParams = request.nextUrl.searchParams;
+
+    const mode = searchParams.get("hub.mode");
+    const token = searchParams.get("hub.verify_token");
+    const challenge = searchParams.get("hub.challenge");
+
+    // Verify token (should match the one set in Facebook App dashboard)
+    const VERIFY_TOKEN = process.env.FACEBOOK_WEBHOOK_VERIFY_TOKEN || "autoloop_webhook_token_2024";
+
+    if (mode === "subscribe" && token === VERIFY_TOKEN) {
+        console.log("✅ Webhook verified");
+        return new NextResponse(challenge, { status: 200 });
+    } else {
+        console.error("❌ Webhook verification failed");
+        return NextResponse.json({ error: "Verification failed" }, { status: 403 });
+    }
+}
+
+/**
+ * POST handler for webhook events
+ * Receives real-time updates from Facebook/Instagram
+ */
+export async function POST(request: NextRequest) {
+    try {
+        const body = await request.json();
+
+        console.log("📨 Received webhook event:", JSON.stringify(body, null, 2));
+
+        // Verify the webhook signature (recommended for production)
+        // const signature = request.headers.get("x-hub-signature-256");
+        // if (!verifySignature(body, signature)) {
+        //   return NextResponse.json({ error: "Invalid signature" }, { status: 403 });
+        // }
+
+        // Process each entry in the webhook
+        if (body.object === "page" || body.object === "instagram") {
+            for (const entry of body.entry || []) {
+                // Handle different webhook fields
+                if (entry.changes) {
+                    for (const change of entry.changes) {
+                        await handleWebhookChange(change, entry.id);
+                    }
+                }
+
+                if (entry.messaging) {
+                    for (const message of entry.messaging) {
+                        await handleMessagingEvent(message, entry.id);
+                    }
+                }
+            }
+        }
+
+        // Facebook expects a 200 OK response
+        return NextResponse.json({ success: true }, { status: 200 });
+    } catch (error) {
+        console.error("❌ Error processing webhook:", error);
+        // Still return 200 to prevent Facebook from retrying
+        return NextResponse.json({ success: false }, { status: 200 });
+    }
+}
+
+/**
+ * Handle webhook change events (comments, posts, etc.)
+ */
+async function handleWebhookChange(change: Record<string, unknown>, pageId: string) {
+    const { field, value } = change;
+
+    console.log(`📝 Webhook change: ${field}`, value);
+
+    switch (field) {
+        case "comments":
+            await handleCommentEvent(value as Record<string, unknown>, pageId);
+            break;
+        case "feed":
+            await handleFeedEvent(value as Record<string, unknown>, pageId);
+            break;
+        case "mentions":
+            await handleMentionEvent(value as Record<string, unknown>, pageId);
+            break;
+        default:
+            console.log(`ℹ️ Unhandled webhook field: ${field}`);
+    }
+}
+
+/**
+ * Handle comment events
+ */
+async function handleCommentEvent(value: Record<string, unknown>, pageId: string) {
+    const commentData = value as {
+        id?: string;
+        post_id?: string;
+        message?: string;
+        from?: { id: string; name: string };
+        created_time?: string;
+        parent_id?: string; // For comment replies
+    };
+
+    if (!commentData.message || !commentData.from) {
+        console.log("⚠️ Incomplete comment data");
+        return;
+    }
+
+    console.log(`💬 New comment: "${commentData.message.substring(0, 50)}..." by ${commentData.from.name}`);
+
+    // Find matching automations
+    const account = await db.query.connectedAccounts.findFirst({
+        where: eq(connectedAccounts.providerAccountId, pageId),
+    });
+
+    if (!account) {
+        console.log(`⚠️ No account found for page ${pageId}`);
+        return;
+    }
+
+    const automations = await db.query.socialAutomations.findMany({
+        where: eq(socialAutomations.connectedAccountId, account.id),
+    });
+
+    // Check each automation for keyword matches
+    for (const automation of automations) {
+        if (!automation.isActive) continue;
+
+        if (automation.triggerType !== "comment_keyword" && automation.triggerType !== "any_comment") {
+            continue;
+        }
+
+        // Check keywords
+        const keywords = automation.keywords || [];
+        const matchedKeyword = keywords.find(keyword =>
+            commentData.message!.toLowerCase().includes(keyword.toLowerCase())
+        );
+
+        if (matchedKeyword || automation.triggerType === "any_comment") {
+            console.log(`✅ Matched automation: "${automation.name}"`);
+
+            // Execute auto-reply
+            await executeAutoReplyToComment(
+                commentData.id!,
+                automation.responseTemplate || "Thank you for your comment!",
+                account.accessToken,
+                account.provider
+            );
+        }
+    }
+}
+
+/**
+ * Handle feed events (new posts)
+ */
+async function handleFeedEvent(value: Record<string, unknown>, pageId: string) {
+    console.log(`📰 Feed event for page ${pageId}`);
+    // Could trigger automations based on new posts
+}
+
+/**
+ * Handle mention events
+ */
+async function handleMentionEvent(value: Record<string, unknown>, pageId: string) {
+    console.log(`@️ Mention event for page ${pageId}`);
+    // Could trigger automations based on mentions
+}
+
+/**
+ * Handle messaging events (DMs)
+ */
+async function handleMessagingEvent(message: Record<string, unknown>, pageId: string) {
+    console.log(`📬 Messaging event for page ${pageId}`, message);
+    // Could handle DM-based automations
+}
+
+/**
+ * Execute auto-reply to a comment
+ */
+async function executeAutoReplyToComment(
+    commentId: string,
+    replyText: string,
+    accessToken: string,
+    provider: string
+) {
+    try {
+        let url = "";
+
+        if (provider === "facebook") {
+            url = `https://graph.facebook.com/v21.0/${commentId}/comments`;
+        } else if (provider === "instagram") {
+            url = `https://graph.facebook.com/v21.0/${commentId}/replies`;
+        } else {
+            console.log(`⚠️ Platform ${provider} not supported`);
+            return;
+        }
+
+        const response = await fetch(url, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+                message: replyText,
+                access_token: accessToken,
+            }),
+        });
+
+        const data = await response.json();
+
+        if (data.error) {
+            console.error("❌ Error posting reply:", data.error);
+        } else {
+            console.log(`✅ Auto-reply posted successfully`);
+        }
+    } catch (error) {
+        console.error("❌ Error in executeAutoReplyToComment:", error);
+    }
+}
+
+/**
+ * Verify webhook signature (optional but recommended)
+ * Currently unused but kept for future implementation
+ */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+function verifySignature(body: unknown, signature: string | null): boolean {
+    if (!signature) return false;
+    const APP_SECRET = process.env.FACEBOOK_APP_SECRET || "";
+
+    const expectedSignature = "sha256=" + crypto
+        .createHmac("sha256", APP_SECRET)
+        .update(JSON.stringify(body))
+        .digest("hex");
+
+    return signature === expectedSignature;
+}
+/* eslint-enable @typescript-eslint/no-unused-vars */

app/api/tasks/monitor/route.ts

@@ -0,0 +1,41 @@
+/**
+ * Task Monitor API
+ * Provides real-time updates on all background tasks
+ */
+
+import { NextResponse } from 'next/server';
+import { taskQueue } from '@/lib/queue/task-queue';
+import { apiSuccess, withErrorHandling } from '@/lib/api-response-helpers';
+import { auth } from '@/auth';
+
+/**
+ * GET /api/tasks/monitor
+ * Get current status of all tasks
+ */
+export const GET = withErrorHandling(async () => {
+  const session = await auth();
+  if (!session) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  }
+
+  // Get all active tasks
+  const activeTasks = taskQueue.getActiveTasks();
+  
+  // Get statistics for all queue types
+  const stats = taskQueue.getAllStats();
+
+  return apiSuccess({
+    tasks: activeTasks.map(task => ({
+      id: task.id,
+      type: task.type,
+      status: task.status,
+      priority: task.priority,
+      createdAt: task.createdAt,
+      startedAt: task.startedAt,
+      data: task.data,
+    })),
+    stats,
+    totalActive: activeTasks.length,
+    timestamp: new Date().toISOString(),
+  });
+});

app/api/workflows/[id]/route.ts

@@ -109,7 +109,7 @@ export async function PATCH(
     if (Object.keys(updates).length > 1) { // updatedAt is always there
       await db
         .update(automationWorkflows)
-        .set(updates)
+        .set(updates as Record<string, unknown>)
         .where(
           and(
             eq(automationWorkflows.id, id),

app/api/workflows/route.ts

@@ -6,6 +6,7 @@ import { eq, and, sql } from "drizzle-orm";
 import { SessionUser } from "@/types";
 import { apiSuccess, apiError } from "@/lib/api-response";
 import { ApiErrors } from "@/lib/api-errors";
+import { getCached, invalidateCache } from "@/lib/cache-manager";
 
 export async function GET() {
   try {
@@ -30,43 +31,41 @@ export async function GET() {
       }
     }
 
-    // Fetch workflows
-    const workflowsData = await db
-      .select()
-      .from(automationWorkflows)
-      .where(eq(automationWorkflows.userId, queryUserId))
-      .orderBy(automationWorkflows.createdAt);
-
-    // Manually fetch and aggregate stats (Drizzle aggregation/group by can be complex with relations, 
-    // simpler to just fetch derived data or do a separate count query if volume is low.
-    // For MVP, separate query per workflow or one big group by. 
-    // Let's do a left join aggregation.)
-
-    // Actually, let's fetch basic stats separately to avoid N+1 if list is huge, 
-    // but for < 50 workflows, a loop is fine or a single complex query.
-    // Let's stick to simple: Fetch all, then map.
-
-    // We need: executionCount, lastRunAt
-    // We can add these fields to the response object.
-
-    const enrichedWorkflows = await Promise.all(workflowsData.map(async (wf) => {
-      // Count executions
-      const countResult = await db.execute(sql`
-            SELECT count(*) as count, max(started_at) as last_run
-            FROM workflow_execution_logs 
-            WHERE workflow_id = ${wf.id}
-        `);
-
-      const row = countResult.rows[0] as { count: string, last_run: string | null };
-
-      return {
-        ...wf,
-        executionCount: Number(row.count),
-        lastRunAt: row.last_run ? new Date(row.last_run) : null
-      };
-    }));
-
-    return apiSuccess({ workflows: enrichedWorkflows });
+    // Cache workflows for 5 minutes
+    const cachedWorkflows = await getCached(
+      `workflows:${queryUserId}`,
+      async () => {
+        // Fetch workflows
+        const workflowsData = await db
+          .select()
+          .from(automationWorkflows)
+          .where(eq(automationWorkflows.userId, queryUserId))
+          .orderBy(automationWorkflows.createdAt);
+
+        // Enriched with stats
+        const enrichedWorkflows = await Promise.all(workflowsData.map(async (wf) => {
+          // Count executions
+          const countResult = await db.execute(sql`
+                SELECT count(*) as count, max(started_at) as last_run
+                FROM workflow_execution_logs 
+                WHERE workflow_id = ${wf.id}
+            `);
+
+          const row = countResult.rows[0] as { count: string, last_run: string | null };
+
+          return {
+            ...wf,
+            executionCount: Number(row.count),
+            lastRunAt: row.last_run ? new Date(row.last_run) : null
+          };
+        }));
+
+        return { workflows: enrichedWorkflows };
+      },
+      300 // 5 minutes
+    );
+
+    return apiSuccess(cachedWorkflows);
   } catch (error) {
     return apiError(error);
   }
@@ -141,6 +140,9 @@ export async function POST(request: Request) {
       })
       .returning();
 
+    // Invalidate workflows cache for this user
+    await invalidateCache(`workflows:${finalUserId}`);
+
     return NextResponse.json({ workflow });
   } catch (error) {
     console.error("Error creating workflow:", error);
@@ -192,6 +194,9 @@ export async function PATCH(request: Request) {
       )
       .returning();
 
+    // Invalidate workflows cache
+    await invalidateCache(`workflows:${finalUserId}`);
+
     return NextResponse.json({ workflow });
   } catch (error) {
     console.error("Error updating workflow:", error);
@@ -240,6 +245,9 @@ export async function DELETE(request: Request) {
         )
       );
 
+    // Invalidate workflows cache
+    await invalidateCache(`workflows:${finalUserId}`);
+
     return NextResponse.json({ success: true });
   } catch (error) {
     console.error("Error deleting workflow:", error);

app/api/workflows/templates/route.ts

@@ -85,8 +85,8 @@ export async function POST(request: NextRequest) {
             targetBusinessType: template.targetBusinessType || "General",
             keywords: template.keywords || [],
             isActive: false,
-            nodes: nodes,
-            edges: template.edges,
+            nodes: nodes as unknown as import("@/types/social-workflow").WorkflowNode[],
+            edges: template.edges as unknown as import("@/types/social-workflow").WorkflowEdge[],
         });
 
         // Query the workflow back to get its ID (most recently created)

app/auth/signin/page.tsx

@@ -1,73 +1,14 @@
 "use client";
 
-import { useState } from "react";
 import { signIn } from "next-auth/react";
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Infinity, Github, ArrowLeft, Send, Lock } from "lucide-react";
-import { toast } from "sonner";
+import { Infinity, Github } from "lucide-react";
 
-export default function SignIn() {
-  const [isWhatsApp, setIsWhatsApp] = useState(false);
-  const [phoneNumber, setPhoneNumber] = useState("");
-  const [otp, setOtp] = useState("");
-  const [step, setStep] = useState<"phone" | "otp">("phone");
-  const [loading, setLoading] = useState(false);
-
-  const handleSendOtp = async () => {
-    if (!phoneNumber) {
-      toast.error("Please enter a phone number");
-      return;
-    }
-    setLoading(true);
-    try {
-      const res = await fetch("/api/auth/otp/send", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ phoneNumber })
-      });
-      const data = await res.json();
-      if (!res.ok) throw new Error(data.error);
-
-      toast.success("OTP sent to WhatsApp!");
-      setStep("otp");
-    } catch (error: unknown) {
-      const msg = error instanceof Error ? error.message : String(error);
-      toast.error(msg || "Failed to send OTP");
-    } finally {
-      setLoading(false);
-    }
-  };
 
-  const handleVerifyOtp = async () => {
-    if (!otp) {
-      toast.error("Please enter the OTP");
-      return;
-    }
-    setLoading(true);
-    try {
-      const res = await signIn("whatsapp-otp", {
-        phoneNumber,
-        code: otp,
-        callbackUrl: "/dashboard",
-        redirect: false
-      });
+export default function SignIn() {
 
-      if (res?.error) {
-        throw new Error(res.error);
-      } else if (res?.ok) {
-        window.location.href = "/dashboard";
-      }
-    } catch (error: unknown) {
-      const msg = error instanceof Error ? error.message : String(error);
-      toast.error(msg || "Invalid OTP or Login Failed");
-    } finally {
-      setLoading(false);
-    }
-  };
 
   return (
     <div className="flex min-h-screen items-center justify-center bg-[radial-gradient(ellipse_at_top,var(--tw-gradient-stops))] from-indigo-200 via-slate-100 to-indigo-100 dark:from-slate-900 dark:via-slate-900 dark:to-indigo-900">
@@ -80,59 +21,15 @@ export default function SignIn() {
           </div>
           <div className="space-y-2">
             <CardTitle className="text-3xl font-bold tracking-tight bg-linear-to-br from-indigo-500 to-purple-600 bg-clip-text text-transparent">
-              {isWhatsApp ? "WhatsApp Login" : "AutoLoop"}
+              AutoLoop
             </CardTitle>
             <CardDescription className="text-base font-medium text-slate-600 dark:text-slate-400">
-              {isWhatsApp ? "Secure OTP Verification" : "Automated Cold Email Intelligence"}
+              Automated Cold Email Intelligence
             </CardDescription>
           </div>
         </CardHeader>
 
         <CardContent className="space-y-6 px-8 pb-8">
-          {isWhatsApp ? (
-            <div className="space-y-4">
-              {step === "phone" ? (
-                <div className="space-y-4">
-                  <div className="space-y-2 text-left">
-                    <Label>WhatsApp Number</Label>
-                    <Input
-                      placeholder="+1234567890"
-                      value={phoneNumber}
-                      onChange={(e) => setPhoneNumber(e.target.value)}
-                    />
-                  </div>
-                  <Button className="w-full" onClick={handleSendOtp} disabled={loading}>
-                    {loading ? "Sending..." : "Send OTP"} <Send className="ml-2 h-4 w-4" />
-                  </Button>
-                </div>
-              ) : (
-                <div className="space-y-4">
-                  <div className="space-y-2 text-left">
-                    <Label>Enter OTP</Label>
-                    <Input
-                      placeholder="123456"
-                      value={otp}
-                      onChange={(e) => setOtp(e.target.value)}
-                      maxLength={6}
-                      className="text-center text-lg tracking-widest"
-                    />
-                  </div>
-                  <Button className="w-full" onClick={handleVerifyOtp} disabled={loading}>
-                    {loading ? "Verifying..." : "Verify & Login"} <Lock className="ml-2 h-4 w-4" />
-                  </Button>
-                  <Button variant="ghost" size="sm" onClick={() => setStep("phone")} className="w-full">
-                    Change Phone Number
-                  </Button>
-                </div>
-              )}
-
-              <div className="pt-4 border-t">
-                <Button variant="ghost" className="w-full" onClick={() => setIsWhatsApp(false)}>
-                  <ArrowLeft className="mr-2 h-4 w-4" /> Back to Social Login
-                </Button>
-              </div>
-            </div>
-          ) : (
               <div className="grid gap-4">
                 <Button
                   variant="outline"
@@ -175,21 +72,6 @@ export default function SignIn() {
                   <span className="font-semibold">Continue with GitHub</span>
                 </Button>
 
-                <Button
-                  variant="outline"
-                  size="lg"
-                  className="relative h-12 border-green-200 bg-green-50 hover:bg-green-100 text-green-700 dark:border-green-900 dark:bg-green-900/20 dark:text-green-400 transition-all hover:scale-[1.02] hover:shadow-md"
-                  onClick={() => setIsWhatsApp(true)}
-                >
-                  <div className="absolute left-4 flex h-6 w-6 items-center justify-center">
-                    {/* WhatsApp Icon */}
-                    <svg viewBox="0 0 24 24" className="h-5 w-5 fill-current">
-                      <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z" />
-                    </svg>
-                  </div>
-                  <span className="font-semibold">Login with WhatsApp</span>
-                </Button>
-
                 <div className="relative">
                   <div className="absolute inset-0 flex items-center">
                     <span className="w-full border-t border-slate-200 dark:border-slate-800" />
@@ -206,8 +88,7 @@ export default function SignIn() {
                     <Link href="/admin/login">Admin Access</Link>
                   </Button>
                 </div>
-            </div>
-          )}
+          </div>
 
           <p className="text-center text-xs text-slate-500 dark:text-slate-400 px-4 leading-relaxed">
             By clicking continue, you agree to our{" "}

app/dashboard/admin/page.tsx

@@ -0,0 +1,201 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Users, Activity, BarChart3, Settings, FileText } from "lucide-react";
+import { StatsOverview } from "@/components/admin/stats-overview";
+import { UserManagementTable } from "@/components/admin/user-management-table";
+import { UserGrowthChart } from "@/components/admin/user-growth-chart";
+import { PlatformUsageChart } from "@/components/admin/platform-usage-chart";
+import { ActivityLogs } from "@/components/admin/activity-logs";
+import { SystemControls } from "@/components/admin/system-controls";
+import { AdminStats, AdminUser, SystemEvent } from "@/types/admin";
+import { useApi } from "@/hooks/use-api";
+
+// Mock data for initial render/development
+const MOCK_STATS: AdminStats = {
+  totalUsers: 156,
+  userGrowth: 12,
+  activeUsers: 84,
+  totalWorkflows: 342,
+  systemHealth: "healthy",
+};
+
+const MOCK_GROWTH_DATA = Array.from({ length: 30 }, (_, i) => ({
+  date: new Date(Date.now() - (29 - i) * 86400000).toLocaleDateString("en-US", { month: "short", day: "numeric" }),
+  users: 100 + Math.floor(Math.random() * 50) + i * 2,
+}));
+
+const MOCK_USAGE_DATA = [
+  { name: "Emails Sent", value: 4500 },
+  { name: "Workflows", value: 1230 },
+  { name: "Scrapers", value: 890 },
+  { name: "API Calls", value: 15400 },
+];
+
+const MOCK_USERS: AdminUser[] = [
+  { id: "1", name: "John Doe", email: "john@example.com", image: null, role: "admin", status: "active", lastActive: new Date(), createdAt: new Date("2023-01-01") },
+  { id: "2", name: "Jane Smith", email: "jane@company.com", image: null, role: "user", status: "active", lastActive: new Date(Date.now() - 86400000), createdAt: new Date("2023-02-15") },
+  { id: "3", name: "Bob Johnson", email: "bob@test.com", image: null, role: "user", status: "inactive", lastActive: null, createdAt: new Date("2023-03-10") },
+  { id: "4", name: "Alice Brown", email: "alice@demo.com", image: null, role: "user", status: "suspended", lastActive: new Date(Date.now() - 7 * 86400000), createdAt: new Date("2023-04-05") },
+];
+
+const MOCK_LOGS: SystemEvent[] = [
+  { id: "1", type: "info", message: "User John Doe logged in", timestamp: new Date(), metadata: { ip: "192.168.1.1" } },
+  { id: "2", type: "success", message: "Workflow 'Lead Gen' completed successfully", timestamp: new Date(Date.now() - 3600000), metadata: { distinctId: "wf_123" } },
+  { id: "3", type: "warning", message: "Rate limit approached for user Jane Smith", timestamp: new Date(Date.now() - 7200000) },
+  { id: "4", type: "error", message: "Failed to connect to SMTP server", timestamp: new Date(Date.now() - 86400000), metadata: { retryCount: 3 } },
+];
+
+export default function AdminDashboard() {
+  const [activeTab, setActiveTab] = useState("overview");
+  const [stats, setStats] = useState<AdminStats | null>(null);
+  const [users, setUsers] = useState<AdminUser[]>([]);
+  const [logs, setLogs] = useState<SystemEvent[]>([]);
+  const [dbLoading, setDbLoading] = useState(true);
+
+  const { get: getStats } = useApi<AdminStats>();
+  const { get: getUsers } = useApi<{ users: AdminUser[] }>();
+  // const { get: getLogs } = useApi<{ logs: SystemEvent[] }>();
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setDbLoading(true);
+      try {
+        const [statsData, usersData] = await Promise.all([
+          getStats("/api/admin/stats"),
+          getUsers("/api/admin/users")
+        ]);
+
+        if (statsData) setStats(statsData);
+        if (usersData?.users) setUsers(usersData.users);
+        setLogs(MOCK_LOGS); // Keep mock logs for now until API is ready
+      } catch (error) {
+        console.error("Failed to fetch admin data", error);
+      } finally {
+        setDbLoading(false);
+      }
+    };
+    fetchData();
+  }, [getStats, getUsers]);
+
+  const handleUpdateStatus = async (userId: string, newStatus: "active" | "suspended") => {
+    // Optimistic update
+    setUsers(users.map(u => u.id === userId ? { ...u, status: newStatus } : u));
+
+    try {
+      const response = await fetch(`/api/admin/users/${userId}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ status: newStatus }),
+      });
+
+      if (!response.ok) throw new Error("Failed to update status");
+    } catch (error) {
+      console.error("Error updating status:", error);
+      // Revert optimistic update
+      setUsers(users.map(u => u.id === userId ? { ...u, status: "active" } : u)); // Reset to active or previous state
+    }
+  };
+
+  const handleUpdateRole = async (userId: string, newRole: "user" | "admin") => {
+    // Optimistic update
+    setUsers(users.map(u => u.id === userId ? { ...u, role: newRole } : u));
+
+    try {
+      const response = await fetch(`/api/admin/users/${userId}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ role: newRole }),
+      });
+
+      if (!response.ok) throw new Error("Failed to update role");
+    } catch (error) {
+      console.error("Error updating role:", error);
+      // Revert
+      setUsers(users.map(u => u.id === userId ? { ...u, role: "user" } : u));
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold tracking-tight">Admin Dashboard</h1>
+        <p className="text-muted-foreground">
+          Manage users, view analytics, and control system settings
+        </p>
+      </div>
+
+      <StatsOverview stats={stats} loading={dbLoading} />
+
+      <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
+        <TabsList>
+          <TabsTrigger value="overview" className="gap-2">
+            <Activity className="h-4 w-4" />
+            Overview
+          </TabsTrigger>
+          <TabsTrigger value="users" className="gap-2">
+            <Users className="h-4 w-4" />
+            Users
+          </TabsTrigger>
+          <TabsTrigger value="analytics" className="gap-2">
+            <BarChart3 className="h-4 w-4" />
+            Analytics
+          </TabsTrigger>
+          <TabsTrigger value="system" className="gap-2">
+            <Settings className="h-4 w-4" />
+            System
+          </TabsTrigger>
+          <TabsTrigger value="logs" className="gap-2">
+            <FileText className="h-4 w-4" />
+            Logs
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="overview" className="space-y-4">
+          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
+            <div className="col-span-4">
+              <UserGrowthChart data={MOCK_GROWTH_DATA} />
+            </div>
+            <div className="col-span-3">
+              <PlatformUsageChart data={MOCK_USAGE_DATA} />
+            </div>
+          </div>
+          <ActivityLogs logs={logs.slice(0, 5)} loading={dbLoading} />
+        </TabsContent>
+
+        <TabsContent value="users" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>User Management</CardTitle>
+              <CardDescription>Manage all platform users</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <UserManagementTable
+                users={users}
+                onUpdateStatus={handleUpdateStatus}
+                onUpdateRole={handleUpdateRole}
+              />
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="analytics" className="space-y-4">
+          <div className="grid gap-4 md:grid-cols-2">
+            <UserGrowthChart data={MOCK_GROWTH_DATA} />
+            <PlatformUsageChart data={MOCK_USAGE_DATA} />
+          </div>
+        </TabsContent>
+
+        <TabsContent value="system" className="space-y-4">
+          <SystemControls />
+        </TabsContent>
+
+        <TabsContent value="logs" className="space-y-4">
+          <ActivityLogs logs={logs} loading={dbLoading} />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}

app/dashboard/businesses/page.tsx

@@ -11,6 +11,7 @@ import { bulkDeleteBusinesses } from "@/app/actions/business";
 import { Trash2, Search, MapPin, Star } from "lucide-react";
 import { toast } from "sonner";
 import { Input } from "@/components/ui/input";
+import { generateCsrfToken } from "@/lib/csrf";
 import {
     AlertDialog,
     AlertDialogAction,
@@ -35,6 +36,7 @@ export default function BusinessesPage() {
     const [selectedIds, setSelectedIds] = useState<string[]>([]);
     const [isModalOpen, setIsModalOpen] = useState(false);
     const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+    const [csrfToken, setCsrfToken] = useState("");
 
     // Pagination state
     const [currentPage, setCurrentPage] = useState(1);
@@ -57,6 +59,11 @@ export default function BusinessesPage() {
     const { get: getBusinessesApi, loading: loadingBusinesses } = useApi<{ businesses: Business[], totalPages: number, page: number }>();
     const { get: getCategoriesApi } = useApi<{ categories: string[] }>();
 
+    // Generate CSRF token on mount
+    useEffect(() => {
+        setCsrfToken(generateCsrfToken());
+    }, []);
+
     // Debounce effect
     useEffect(() => {
         const timer = setTimeout(() => {
@@ -101,7 +108,7 @@ export default function BusinessesPage() {
 
     const handleConfirmDelete = async () => {
         try {
-            await bulkDeleteBusinesses(selectedIds);
+            await bulkDeleteBusinesses(selectedIds, csrfToken);
             setBusinesses(prev => prev.filter(b => !selectedIds.includes(b.id)));
             setSelectedIds([]);
             toast.success("Deleted successfully");

app/dashboard/page.tsx

@@ -6,7 +6,7 @@ import { BusinessTable } from "@/components/dashboard/business-table";
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Business } from "@/types";
-import { Users, Mail, TrendingUp, ArrowRight } from "lucide-react";
+import { Users, Mail, TrendingUp, ArrowRight, Activity } from "lucide-react";
 import dynamic from "next/dynamic";
 import { AnimatedContainer } from "@/components/animated-container";
 import { useApi } from "@/hooks/use-api";
@@ -18,6 +18,11 @@ const EmailChart = dynamic(() => import("@/components/dashboard/email-chart"), {
   ssr: false
 });
 
+const LeadDemographicsChart = dynamic(() => import("@/components/dashboard/lead-demographics-chart"), {
+  loading: () => <Skeleton className="h-[300px] w-full" />,
+  ssr: false
+});
+
 interface DashboardStats {
   totalBusinesses: number;
   emailsSent: number;
@@ -32,10 +37,16 @@ interface ChartDataPoint {
   opened: number;
 }
 
+interface DemographicData {
+  name: string;
+  value: number;
+}
+
 export default function DashboardPage() {
   const [businesses, setBusinesses] = useState<Business[]>([]);
   const [stats, setStats] = useState<DashboardStats | null>(null);
   const [chartData, setChartData] = useState<ChartDataPoint[]>([]);
+  const [demographics, setDemographics] = useState<DemographicData[]>([]);
 
   // API Hooks
   const { get: getBusinessesApi, loading: loadingBusinesses } = useApi<{ businesses: Business[] }>();
@@ -48,7 +59,23 @@ export default function DashboardPage() {
         getStatsApi("/api/dashboard/stats")
       ]);
 
-      if (businessData?.businesses) setBusinesses(businessData.businesses);
+      if (businessData?.businesses) {
+        setBusinesses(businessData.businesses);
+
+        // Calculate demographics from businesses
+        const typeCount: Record<string, number> = {};
+        businessData.businesses.forEach((b) => {
+          const type = b.category || "Unknown";
+          typeCount[type] = (typeCount[type] || 0) + 1;
+        });
+
+        const demoData = Object.entries(typeCount)
+          .map(([name, value]) => ({ name, value }))
+          .sort((a, b) => b.value - a.value)
+          .slice(0, 5); // Top 5
+
+        setDemographics(demoData);
+      }
       if (statsData) {
         setStats(statsData.stats);
         setChartData(statsData.chartData || []);
@@ -78,25 +105,31 @@ export default function DashboardPage() {
       {/* Primary Stats */}
       <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
         {loadingStats || !stats ? (
-          Array.from({ length: 4 }).map((_, i) => (
-            <Skeleton key={i} className="h-32 w-full rounded-xl" />
-          ))
+          <>
+            <Skeleton className="h-32" />
+            <Skeleton className="h-32" />
+            <Skeleton className="h-32" />
+            <Skeleton className="h-32" />
+          </>
         ) : (
             <>
               <AnimatedContainer delay={0.1}>
-                <StatCard title="Total Leads" value={stats.totalBusinesses} icon={Users} />
+                <StatCard title="Total Leads" value={stats.totalBusinesses.toString()} icon={Users} />
               </AnimatedContainer>
               <AnimatedContainer delay={0.2}>
-                <StatCard title="Emails Sent" value={stats.emailsSent} icon={Mail} />
+                <StatCard title="Emails Sent" value={stats.emailsSent.toString()} icon={Mail} />
               </AnimatedContainer>
               <AnimatedContainer delay={0.3}>
                 <Card>
                   <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                    <CardTitle className="text-sm font-medium">Daily Quota</CardTitle>
-                    <Mail className="h-4 w-4 text-muted-foreground" />
+                    <CardTitle className="text-sm font-medium">Email Quota</CardTitle>
+                    <Activity className="h-4 w-4 text-muted-foreground" />
                   </CardHeader>
                   <CardContent>
                     <div className="text-2xl font-bold">{stats.quotaUsed} / {stats.quotaLimit}</div>
+                    <p className="text-xs text-muted-foreground mt-1">
+                      {Math.round((stats.quotaUsed / stats.quotaLimit) * 100)}% used
+                    </p>
                     <div className="mt-3 h-2 w-full bg-secondary rounded-full overflow-hidden">
                       <div
                         className={`h-full ${stats.quotaUsed >= stats.quotaLimit ? 'bg-red-500' : 'bg-blue-500'}`}
@@ -125,16 +158,14 @@ export default function DashboardPage() {
           </CardContent>
         </Card>
 
-        {/* Recent Activity / Demographics Placeholder */}
+        {/* Lead Demographics */}
         <Card className="col-span-3">
           <CardHeader>
             <CardTitle>Lead Demographics</CardTitle>
             <CardDescription>Business types distribution</CardDescription>
           </CardHeader>
           <CardContent>
-            <div className="h-[300px] flex items-center justify-center text-muted-foreground text-sm border-2 border-dashed rounded-lg">
-              Coming Soon: Business Type Chart
-            </div>
+            <LeadDemographicsChart data={demographics} loading={loadingBusinesses} />
           </CardContent>
         </Card>
       </div>
@@ -148,12 +179,12 @@ export default function DashboardPage() {
           </Button>
         </CardHeader>
         <CardContent>
-                <BusinessTable
+          <BusinessTable
             businesses={businesses.slice(0, 5)}
             onViewDetails={() => { }}
             onSendEmail={() => { }}
             isLoading={loadingBusinesses}
-                />
+          />
         </CardContent>
       </Card>
     </div>

app/dashboard/settings/page.tsx

@@ -29,6 +29,7 @@ import {
 import { Moon, Sun, LogOut, Trash2, AlertTriangle, Palette } from "lucide-react";
 import { MailSettings } from "@/components/mail/mail-settings";
 import { SocialSettings } from "@/components/settings/social-settings";
+import { WhatsAppSettings } from "@/components/settings/whatsapp-settings";
 
 interface StatusResponse {
   database: boolean;
@@ -44,7 +45,16 @@ export default function SettingsPage() {
   const [isSavingNotifications, setIsSavingNotifications] = useState(false);
 
   // API Hooks
-  const { get: getSettings, patch: patchSettings, loading: settingsLoading } = useApi<{ user: UserProfile & { isGeminiKeySet: boolean, isGmailConnected: boolean, isLinkedinCookieSet: boolean }, connectedAccounts: ConnectedAccount[] }>();
+  const { get: getSettings, patch: patchSettings, loading: settingsLoading } = useApi<{
+    user: UserProfile & {
+      isGeminiKeySet: boolean,
+      isGmailConnected: boolean,
+      isLinkedinCookieSet: boolean,
+      whatsappBusinessPhone?: string,
+      isWhatsappConfigured?: boolean
+    },
+    connectedAccounts: ConnectedAccount[]
+  }>();
   const { get: getStatus, loading: statusLoading } = useApi<StatusResponse>();
   const { del: deleteUserFn, loading: deletingUser } = useApi<void>();
   const { del: deleteDataFn, loading: deletingData } = useApi<void>();
@@ -54,7 +64,9 @@ export default function SettingsPage() {
   // API Key State
   const [geminiApiKey, setGeminiApiKey] = useState("");
   const [isGeminiKeySet, setIsGeminiKeySet] = useState(false);
+  const [isGeminiKeySet, setIsGeminiKeySet] = useState(false);
   const [isGmailConnected, setIsGmailConnected] = useState(false);
+  const [whatsappConfig, setWhatsappConfig] = useState({ phone: "", configured: false });
   const [connectedAccounts, setConnectedAccounts] = useState<ConnectedAccount[]>([]);
 
   // Connection Status State
@@ -96,6 +108,10 @@ export default function SettingsPage() {
         }
         setIsGeminiKeySet(settingsData.user.isGeminiKeySet);
         setIsGmailConnected(settingsData.user.isGmailConnected);
+        setWhatsappConfig({
+          phone: settingsData.user.whatsappBusinessPhone || "",
+          configured: !!settingsData.user.isWhatsappConfigured
+        });
 
         if (settingsData.connectedAccounts) {
           setConnectedAccounts(settingsData.connectedAccounts);
@@ -565,6 +581,14 @@ export default function SettingsPage() {
                 <SocialSettings connectedAccounts={connectedAccounts} />
               </div>
 
+              {/* WhatsApp Settings */}
+              <div className="pt-4 border-t">
+                <WhatsAppSettings
+                  businessPhone={whatsappConfig.phone}
+                  isConfigured={whatsappConfig.configured}
+                />
+              </div>
+
               {/* Mail Settings (Gmail) */}
               <div className="space-y-2 pt-4 border-t">
                 <MailSettings isConnected={isGmailConnected} email={session?.user?.email} />

app/dashboard/workflows/builder/[id]/page.tsx

@@ -132,8 +132,8 @@ export default function WorkflowBuilderPage() {
                 </div>
             </div>
 
-            {/* Editor Area */}
-            <div className="flex-1 overflow-hidden h-screen">
+            {/* Editor Area - Fullscreen Canvas */}
+            <div className="flex-1 overflow-hidden" style={{ height: 'calc(100vh - 100px)' }}>
                 <NodeEditor
                     initialNodes={(workflow.nodes as Node<NodeData>[]) || []}
                     initialEdges={(workflow.edges as Edge[]) || []}

app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
+import "./animations.css";
 import "./cursor-styles.css";
 import { Providers } from "./providers";
 import { Toaster } from "@/components/ui/sonner";

app/page.tsx

@@ -8,209 +8,272 @@ import {
   Mail,
   BarChart3,
   CheckCircle2,
+  Users,
+  Layers,
 } from "lucide-react";
 
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 
 export default function Home() {
   const { data: session } = useSession();
   const router = useRouter();
+  const [offset, setOffset] = useState(0);
 
   // Redirect to dashboard if logged in
   useEffect(() => {
-    if (session?.user) {
-      router.push("/dashboard");
-    }
+    if (session?.user) router.push("/dashboard");
   }, [session, router]);
 
+  // Lightweight parallax scroll handler
+  useEffect(() => {
+    const onScroll = () => setOffset(window.scrollY || 0);
+    onScroll();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+
+  // IntersectionObserver to trigger entrance animations for elements with .animate-on-scroll
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    const els = Array.from(document.querySelectorAll<HTMLElement>(".animate-on-scroll"));
+    if (!els.length) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            const el = entry.target as HTMLElement;
+            el.classList.add("animate-slide-in-up");
+            el.classList.remove("opacity-0");
+            observer.unobserve(el);
+          }
+        });
+      },
+      { threshold: 0.12 }
+    );
+
+    els.forEach((el) => {
+      el.classList.add("opacity-0");
+      observer.observe(el);
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
   return (
-    <div className="flex min-h-screen flex-col">
-      {/* Navigation */}
-      <nav className="sticky top-0 z-50 border-b bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60">
+    <div className="min-h-screen overflow-hidden bg-linear-to-b from-background via-muted/30 to-background">
+      {/* Top nav */}
+      <nav className="fixed left-0 right-0 top-0 z-40 border-b bg-background/80 backdrop-blur-md supports-backdrop-filter:bg-background/60">
         <div className="container mx-auto flex h-16 items-center justify-between px-4">
-          <div className="text-xl font-bold bg-linear-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+          <div className="text-xl font-extrabold bg-linear-to-r from-primary via-purple-600 to-pink-600 bg-clip-text text-transparent">
             AutoLoop
           </div>
-          <div className="flex items-center gap-4">
+          <div className="flex items-center gap-3">
             <Link href="/auth/signin">
               <Button variant="ghost">Sign In</Button>
             </Link>
             <Link href="/auth/signin">
-              <Button>Get Started</Button>
+              <Button className="bg-linear-to-r from-primary to-purple-600 hover:from-primary/90 hover:to-purple-600/90">
+                Get Started
+              </Button>
             </Link>
           </div>
         </div>
       </nav>
 
-      {/* Hero Section */}
-      <section className="relative overflow-hidden bg-linear-to-b from-blue-50 via-purple-50 to-background dark:from-blue-950/20 dark:via-purple-950/20 dark:to-background">
-        <div className="absolute inset-0 bg-grid-black/[0.02] dark:bg-grid-white/[0.02]" />
+      {/* Hero with modern gradients */}
+      <header className="relative pt-32 pb-24">
+        {/* Modern gradient blobs */}
+        <div aria-hidden className="absolute inset-0 -z-10 overflow-hidden">
+          <div
+            className="absolute left-[-10%] top-10 h-[400px] w-[400px] rounded-full bg-linear-to-r from-primary/30 to-purple-500/30 opacity-40 blur-3xl animate-pulse"
+            style={{ transform: `translateY(${offset * -0.02}px)`, animationDuration: '4s' }}
+          />
+          <div
+            className="absolute right-[-12%] top-32 h-[500px] w-[500px] rounded-full bg-linear-to-r from-pink-500/30 to-purple-600/30 opacity-40 blur-3xl animate-pulse"
+            style={{ transform: `translateY(${offset * -0.04}px)`, animationDuration: '6s', animationDelay: '1s' }}
+          />
+          <div
+            className="absolute left-1/2 top-[50%] h-[300px] w-[800px] -translate-x-1/2 rounded-3xl bg-linear-to-r from-emerald-400/20 to-cyan-400/20 opacity-30 blur-2xl"
+            style={{ transform: `translate(-50%, ${offset * -0.01}px)` }}
+          />
+        </div>
 
-        {/* Animated background elements */}
-        <div className="absolute top-20 left-10 h-72 w-72 animate-pulse-glow rounded-full bg-blue-400/20 blur-3xl" />
-        <div className="absolute top-40 right-10 h-96 w-96 animate-float rounded-full bg-purple-400/20 blur-3xl" />
+        <div className="container mx-auto px-4">
+          <div className="mx-auto max-w-5xl text-center">
+            <div className="flex flex-col items-center gap-6 animate-fade-in">
+              <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 border border-primary/20 text-sm font-medium text-primary backdrop-blur-sm">
+                <Zap className="h-4 w-4" />
+                Trusted by 1,200+ sales teams
+              </div>
 
-        <div className="container relative mx-auto px-4 py-24 sm:py-32">
-          <div className="mx-auto max-w-4xl text-center">
-            {/* Animated heading */}
-            <h1 className="text-5xl font-bold tracking-tight sm:text-6xl lg:text-7xl animate-slide-in-up opacity-0 stagger-1">
-              <span className="bg-linear-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent">
-                Automate Your Cold Email Outreach
-              </span>
-              <br />
-              <span className="mt-2 block">With AI-Powered Precision</span>
-            </h1>
+              <h1 className="text-5xl font-extrabold leading-tight tracking-tight sm:text-6xl md:text-7xl bg-linear-to-r from-foreground via-foreground to-muted-foreground bg-clip-text text-transparent">
+                Automate outreach.<br />Personalize at scale.
+              </h1>
 
-            {/* Animated description */}
-            <p className="mt-6 text-lg leading-8 text-muted-foreground sm:text-xl animate-slide-in-up opacity-0 stagger-2">
-              AutoLoop helps you find,qualify, and reach out to your ideal customers automatically.
-              Powered by AI to generate personalized emails that convert.
-            </p>
+              <p className="mt-4 mx-auto max-w-3xl text-lg text-muted-foreground leading-relaxed">
+                AutoLoop finds leads, enriches profiles, and sends AI-personalized cold
+                emails — all while you focus on closing deals. Powerful integrations,
+                visual workflows, and enterprise-grade reliability.
+              </p>
 
-            {/* Animated features list */}
-            <div className="mt-8 grid gap-4 sm:grid-cols-3 animate-slide-in-up opacity-0 stagger-3">
-              <div className="flex items-center justify-center gap-2 rounded-lg border bg-card p-4 backdrop-blur-xl">
-                <div className="h-2 w-2 rounded-full bg-green-500 animate-pulse" />
-                <span className="text-sm font-medium">AI-Powered Templates</span>
-              </div>
-              <div className="flex items-center justify-center gap-2 rounded-lg border bg-card p-4 backdrop-blur-xl">
-                <div className="h-2 w-2 rounded-full bg-blue-500 animate-pulse" />
-                <span className="text-sm font-medium">Smart Lead Scraping</span>
+              <div className="mt-8 flex flex-wrap items-center justify-center gap-4">
+                <Link href="/auth/signin">
+                  <Button size="lg" className="bg-linear-to-r from-primary to-purple-600 hover:from-primary/90 hover:to-purple-600/90 shadow-lg hover:shadow-xl transition-all duration-300 text-base px-8">
+                    Get Started Free
+                    <ArrowRight className="ml-2 h-5 w-5" />
+                  </Button>
+                </Link>
+                <Link href="#features">
+                  <Button variant="outline" size="lg" className="border-2 text-base px-8">
+                    Explore Features
+                  </Button>
+                </Link>
               </div>
-              <div className="flex items-center justify-center gap-2 rounded-lg border bg-card p-4 backdrop-blur-xl">
-                <div className="h-2 w-2 rounded-full bg-purple-500 animate-pulse" />
-                <span className="text-sm font-medium">Advanced Analytics</span>
-              </div>
-            </div>
-
-            {/* Animated CTA buttons */}
-            <div className="mt-10 flex items-center justify-center gap-4 animate-slide-in-up opacity-0 stagger-4">
-              <Link href="/auth/signin">
-                <Button size="lg" className="gap-2 animate-pulse-glow">
-                  Get Started Free
-                  <ArrowRight className="h-4 w-4" />
-                </Button>
-              </Link>
-              <Link href="#features">
-                <Button variant="outline" size="lg">
-                  Learn More
-                </Button>
-              </Link>
             </div>
-
-            {/* Social proof */}
-            <p className="mt-8 text-sm text-muted-foreground animate-fade-in opacity-0" style={{ animationDelay: "0.8s" }}>
-              Trusted by <span className="font-semibold text-foreground">1,000+</span> sales teams worldwide
-            </p>
           </div>
         </div>
-      </section>
+      </header>
 
-      {/* Features Section */}
-      <section className="py-24">
+      {/* Features overview */}
+      <section id="features" className="py-24 bg-muted/20">
         <div className="container mx-auto px-4">
-          <div className="mx-auto max-w-2xl text-center">
-            <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
-              Everything you need to scale outreach
+          <div className="mx-auto mb-16 max-w-3xl text-center">
+            <h2 className="text-4xl font-bold bg-linear-to-r from-foreground to-muted-foreground bg-clip-text text-transparent">
+              Complete outreach stack
             </h2>
             <p className="mt-4 text-lg text-muted-foreground">
-              Powerful features to automate and personalize your cold email campaigns
+              Everything you need to source prospects, personalize at scale, and
+              measure impact — built for SDRs and growth teams.
             </p>
           </div>
 
-          <div className="mx-auto mt-16 grid max-w-5xl gap-8 sm:grid-cols-2 lg:grid-cols-3">
-            {/* Feature 1 */}
-            <div className="group relative rounded-xl border bg-card p-8 shadow-sm transition-all hover:shadow-md stagger-item">
-              <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-blue-500/10">
-                <Zap className="h-6 w-6 text-blue-600" />
-              </div>
-              <h3 className="mb-2 text-xl font-semibold">Auto Scraping</h3>
-              <p className="text-muted-foreground">
-                Continuously scrape Google Maps for businesses matching your criteria.
-                Fresh leads delivered daily.
-              </p>
-            </div>
+          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+            <FeatureCard
+              delay={0.05}
+              icon={<Zap className="h-6 w-6 text-primary" />}
+              title="Auto Scraping & Enrichment"
+              description="Continuously discover leads from Google Maps, websites, and social profiles, then enrich records with firmographics and contact data."
+            />
 
-            {/* Feature 2 */}
-            <div className="group relative rounded-xl border bg-card p-8 shadow-sm transition-all hover:shadow-md stagger-item">
-              <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-purple-500/10">
-                <Bot className="h-6 w-6 text-purple-600" />
-              </div>
-              <h3 className="mb-2 text-xl font-semibold">AI Personalization</h3>
-              <p className="text-muted-foreground">
-                Generate personalized emails using AI. Each message is tailored to the
-                recipient&apos;s business.
-              </p>
-            </div>
+            <FeatureCard
+              delay={0.1}
+              icon={<Bot className="h-6 w-6 text-purple-600" />}
+              title="AI Personalization"
+              description="Generate personalized, context-aware email copy for each lead using AI tuned for cold outreach. A/B test variations automatically."
+            />
 
-            {/* Feature 3 */}
-            <div className="group relative rounded-xl border bg-card p-8 shadow-sm transition-all hover:shadow-md stagger-item">
-              <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-green-500/10">
-                <Mail className="h-6 w-6 text-green-600" />
-              </div>
-              <h3 className="mb-2 text-xl font-semibold">Gmail Integration</h3>
-              <p className="text-muted-foreground">
-                Send emails directly from your Gmail account. Track opens, clicks, and
-                responses.
-              </p>
-            </div>
+            <FeatureCard
+              delay={0.15}
+              icon={<Mail className="h-6 w-6 text-emerald-600" />}
+              title="Gmail & SMTP Integration"
+              description="Send from your Gmail or SMTP provider, track opens/clicks, and record replies in one place. Automatic send throttling and warm-up support."
+            />
 
-            {/* Feature 4 */}
-            <div className="group relative rounded-xl border bg-card p-8 shadow-sm transition-all hover:shadow-md stagger-item">
-              <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-pink-500/10">
-                <BarChart3 className="h-6 w-6 text-pink-600" />
-              </div>
-              <h3 className="mb-2 text-xl font-semibold">Analytics Dashboard</h3>
-              <p className="text-muted-foreground">
-                Track campaign performance with detailed analytics and insights.
-              </p>
-            </div>
+            <FeatureCard
+              delay={0.2}
+              icon={<BarChart3 className="h-6 w-6 text-pink-600" />}
+              title="Analytics & Insights"
+              description="Campaign-level analytics, funnel metrics, and recipient-level signals to help you optimize subject lines and sequences."
+            />
 
-            {/* Feature 5 */}
-            <div className="group relative rounded-xl border bg-card p-8 shadow-sm transition-all hover:shadow-md stagger-item">
-              <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-yellow-500/10">
-                <CheckCircle2 className="h-6 w-6 text-yellow-600" />
-              </div>
-              <h3 className="mb-2 text-xl font-semibold">Visual Workflows</h3>
-              <p className="text-muted-foreground">
-                Build complex automation workflows with an easy-to-use node editor.
-              </p>
+            <FeatureCard
+              delay={0.25}
+              icon={<Layers className="h-6 w-6 text-amber-600" />}
+              title="Visual Workflows"
+              description="Build multi-step automations with a drag-and-drop node editor (scrape → enrich → sequence → notify)."
+            />
+
+            <FeatureCard
+              delay={0.3}
+              icon={<CheckCircle2 className="h-6 w-6 text-emerald-600" />}
+              title="Deliverability & Safety"
+              description="Built-in rate limiting, spam-safety checks, unsubscribe handling, and per-account quotas to protect sender reputation."
+            />
+          </div>
+        </div>
+      </section>
+
+      {/* How it works */}
+      <section className="bg-background py-24">
+        <div className="container mx-auto px-4">
+          <div className="grid items-center gap-12 lg:grid-cols-2">
+            <div>
+              <h3 className="text-3xl font-bold">How AutoLoop works</h3>
+              <ol className="mt-8 space-y-6 list-decimal pl-6 text-muted-foreground">
+                <li className="pl-2">
+                  <strong className="text-foreground">Find</strong>: Define search criteria and AutoLoop continuously
+                  finds new prospects.
+                </li>
+                <li className="pl-2">
+                  <strong className="text-foreground">Enrich</strong>: We append contact details, role, and business
+                  data for better personalization.
+                </li>
+                <li className="pl-2">
+                  <strong className="text-foreground">Personalize</strong>: AI crafts tailored outreach using the
+                  lead context and your templates.
+                </li>
+                <li className="pl-2">
+                  <strong className="text-foreground">Send & Measure</strong>: Deliver through Gmail/SMTP and
+                  measure opens, clicks and replies. Iterate automatically.
+                </li>
+              </ol>
             </div>
 
-            {/* Feature 6 */}
-            <div className="group relative rounded-xl border bg-card p-8 shadow-sm transition-all hover:shadow-md stagger-item">
-              <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-cyan-500/10">
-                <Zap className="h-6 w-6 text-cyan-600" />
+            <div>
+              <div className="rounded-xl border bg-card p-8 shadow-lg hover:shadow-xl transition-shadow">
+                <div className="mb-6 flex items-center gap-3">
+                  <div className="p-3 rounded-lg bg-primary/10">
+                    <Users className="h-8 w-8 text-primary" />
+                  </div>
+                  <div>
+                    <div className="text-sm text-muted-foreground">Customers</div>
+                    <div className="text-2xl font-bold">1,200+ teams</div>
+                  </div>
+                </div>
+                <p className="text-muted-foreground">
+                  AutoLoop runs continuously in the background and surfaces only the
+                  leads that match your ideal customer profile.
+                </p>
               </div>
-              <h3 className="mb-2 text-xl font-semibold">Smart Filtering</h3>
-              <p className="text-muted-foreground">
-                Filter leads based on criteria like website availability, ratings, and more.
-              </p>
             </div>
           </div>
         </div>
       </section>
 
-      {/* CTA Section */}
-      <section className="relative overflow-hidden bg-linear-to-r from-blue-600 via-purple-600 to-pink-600 py-24">
-        <div className="container relative z-10 mx-auto px-4 text-center">
-          <h2 className="text-4xl font-bold text-white sm:text-5xl">
-            Ready to scale your outreach?
-          </h2>
-          <p className="mx-auto mt-4 max-w-2xl text-lg text-white/90">
-            Join hundreds of businesses using AutoLoop to automate their cold email
-            campaigns and close more deals.
-          </p>
-          <div className="mt-10">
+      {/* Testimonials + CTA */}
+      <section className="py-24">
+        <div className="container mx-auto px-4">
+          <div className="mx-auto mb-12 max-w-3xl text-center">
+            <h2 className="text-3xl font-bold">What customers say</h2>
+            <p className="mt-3 text-muted-foreground">Real teams, real results.</p>
+          </div>
+
+          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+            <blockquote className="rounded-lg border bg-card p-6 shadow hover:shadow-lg transition-shadow">
+              <p className="text-foreground">&ldquo;AutoLoop doubled our booked demos in 6 weeks.&rdquo;</p>
+              <footer className="mt-4 text-sm text-muted-foreground">— Head of Sales, SMB</footer>
+            </blockquote>
+
+            <blockquote className="rounded-lg border bg-card p-6 shadow hover:shadow-lg transition-shadow">
+              <p className="text-foreground">&ldquo;The AI emails feel human and convert better than our manual outreach.&rdquo;</p>
+              <footer className="mt-4 text-sm text-muted-foreground">— Growth Lead</footer>
+            </blockquote>
+
+            <blockquote className="rounded-lg border bg-card p-6 shadow hover:shadow-lg transition-shadow">
+              <p className="text-foreground">&ldquo;Workflows let us automate complex sequences without engineering.&rdquo;</p>
+              <footer className="mt-4 text-sm text-muted-foreground">— Ops Manager</footer>
+            </blockquote>
+          </div>
+
+          <div className="mt-12 text-center">
             <Link href="/auth/signin">
-              <Button
-                size="lg"
-                variant="outline"
-                className="border-white bg-white/10 text-white backdrop-blur-sm hover:bg-white/20"
-              >
-                Get Started for Free
+              <Button size="lg" className="bg-linear-to-r from-primary to-purple-600 hover:from-primary/90 hover:to-purple-600/90 shadow-lg hover:shadow-xl transition-all duration-300 px-8">
+                Start Free Trial
+                <Zap className="ml-2 h-4 w-4" />
               </Button>
             </Link>
           </div>
@@ -218,78 +281,34 @@ export default function Home() {
       </section>
 
       {/* Footer */}
-      <footer className="border-t bg-muted/50">
-        <div className="container mx-auto px-4 py-12">
-          <div className="grid gap-8 md:grid-cols-4">
-            {/* Brand */}
-            <div className="space-y-4">
-              <div className="text-xl font-bold bg-linear-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
-                AutoLoop
-              </div>
-              <p className="text-sm text-muted-foreground">
-                AI-powered cold email outreach automation that helps you scale your sales.
-              </p>
-            </div>
-
-            {/* Product */}
-            <div className="space-y-4">
-              <h3 className="font-semibold">Product</h3>
-              <ul className="space-y-2 text-sm">
-                <li>
-                  <Link href="/dashboard" className="text-muted-foreground hover:text-foreground transition-colors">
-                    Dashboard
-                  </Link>
-                </li>
-                <li>
-                  <Link href="/#features" className="text-muted-foreground hover:text-foreground transition-colors">
-                    Features
-                  </Link>
-                </li>
-              </ul>
-            </div>
-
-            {/* Company */}
-            <div className="space-y-4">
-              <h3 className="font-semibold">Company</h3>
-              <ul className="space-y-2 text-sm">
-                <li>
-                  <Link href="/feedback" className="text-muted-foreground hover:text-foreground transition-colors">
-                    Contact & Feedback
-                  </Link>
-                </li>
-                <li>
-                  <a href="mailto:support@autoloop.com" className="text-muted-foreground hover:text-foreground transition-colors">
-                    Support
-                  </a>
-                </li>
-              </ul>
-            </div>
-
-            {/* Legal */}
-            <div className="space-y-4">
-              <h3 className="font-semibold">Legal</h3>
-              <ul className="space-y-2 text-sm">
-                <li>
-                  <Link href="/terms" className="text-muted-foreground hover:text-foreground transition-colors">
-                    Terms of Service
-                  </Link>
-                </li>
-                <li>
-                  <Link href="/privacy" className="text-muted-foreground hover:text-foreground transition-colors">
-                    Privacy Policy
-                  </Link>
-                </li>
-              </ul>
-            </div>
-          </div>
-
-          <div className="mt-8 pt-8 border-t text-center">
-            <p className="text-sm text-muted-foreground">
-              © {new Date().getFullYear()} AutoLoop. All rights reserved.
-            </p>
-          </div>
+      <footer className="border-t bg-muted/30 py-8">
+        <div className="container mx-auto px-4 text-center text-sm text-muted-foreground">
+          © {new Date().getFullYear()} AutoLoop — Privacy · Terms
         </div>
       </footer>
     </div>
   );
 }
+
+function FeatureCard({
+  icon,
+  title,
+  description,
+  delay = 0,
+}: {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  delay?: number;
+}) {
+  return (
+    <div
+      className="group rounded-xl border bg-card p-6 shadow-sm hover:shadow-lg hover:border-primary/20 transition-all duration-300 transform hover:-translate-y-1 animate-on-scroll"
+      style={{ animationDelay: `${delay}s` }}
+    >
+      <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-muted group-hover:bg-primary/10 transition-colors">{icon}</div>
+      <h4 className="mb-2 text-lg font-semibold">{title}</h4>
+      <p className="text-sm text-muted-foreground">{description}</p>
+    </div>
+  );
+}

components/admin/activity-logs.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import { useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Download, Search, Filter } from "lucide-react";
+import { SystemEvent } from "@/types/admin";
+
+interface ActivityLogsProps {
+  logs: SystemEvent[];
+  loading?: boolean;
+}
+
+export function ActivityLogs({ logs, loading }: ActivityLogsProps) {
+  const [filter, setFilter] = useState("all");
+  const [search, setSearch] = useState("");
+
+  const getEventColor = (type: string) => {
+    switch (type) {
+      case "error":
+        return "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-100";
+      case "warning":
+        return "bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-100";
+      case "success":
+        return "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100";
+      default:
+        return "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-100";
+    }
+  };
+
+  const filteredLogs = logs.filter((log) => {
+    const matchesFilter = filter === "all" || log.type === filter;
+    const matchesSearch = log.message.toLowerCase().includes(search.toLowerCase());
+    return matchesFilter && matchesSearch;
+  });
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle>System Activity</CardTitle>
+            <CardDescription>Recent system events and user actions</CardDescription>
+          </div>
+          <Button variant="outline" size="sm">
+            <Download className="mr-2 h-4 w-4" />
+            Export CSV
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="flex flex-col gap-4">
+          <div className="flex gap-2">
+            <div className="relative flex-1">
+              <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder="Search logs..."
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                className="pl-8"
+              />
+            </div>
+            <Select value={filter} onValueChange={setFilter}>
+              <SelectTrigger className="w-[180px]">
+                <Filter className="mr-2 h-4 w-4" />
+                <SelectValue placeholder="Filter by type" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Events</SelectItem>
+                <SelectItem value="info">Info</SelectItem>
+                <SelectItem value="success">Success</SelectItem>
+                <SelectItem value="warning">Warning</SelectItem>
+                <SelectItem value="error">Error</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="rounded-md border">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="w-[100px]">Type</TableHead>
+                  <TableHead>Message</TableHead>
+                  <TableHead className="w-[200px]">Timestamp</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {loading ? (
+                  <TableRow>
+                    <TableCell colSpan={3} className="h-24 text-center">
+                      Loading...
+                    </TableCell>
+                  </TableRow>
+                ) : filteredLogs.length === 0 ? (
+                  <TableRow>
+                    <TableCell colSpan={3} className="h-24 text-center">
+                      No logs found.
+                    </TableCell>
+                  </TableRow>
+                ) : (
+                  filteredLogs.map((log) => (
+                    <TableRow key={log.id}>
+                      <TableCell>
+                        <Badge
+                          variant="secondary"
+                          className={getEventColor(log.type)}
+                        >
+                          {log.type}
+                        </Badge>
+                      </TableCell>
+                      <TableCell className="font-medium">
+                        {log.message}
+                        {log.metadata && (
+                          <pre className="mt-1 text-xs text-muted-foreground">
+                            {JSON.stringify(log.metadata, null, 2)}
+                          </pre>
+                        )}
+                      </TableCell>
+                      <TableCell className="text-muted-foreground">
+                        {new Date(log.timestamp).toLocaleString()}
+                      </TableCell>
+                    </TableRow>
+                  ))
+                )}
+              </TableBody>
+            </Table>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

components/admin/platform-usage-chart.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+
+interface UsageData {
+  name: string;
+  value: number;
+}
+
+interface PlatformUsageChartProps {
+  data: UsageData[];
+}
+
+export function PlatformUsageChart({ data }: PlatformUsageChartProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Platform Usage</CardTitle>
+        <CardDescription>Key metrics for platform activity</CardDescription>
+      </CardHeader>
+      <CardContent className="h-[300px]">
+        <ResponsiveContainer width="100%" height="100%">
+          <BarChart data={data}>
+            <XAxis
+              dataKey="name"
+              stroke="#888888"
+              fontSize={12}
+              tickLine={false}
+              axisLine={false}
+            />
+            <YAxis
+              stroke="#888888"
+              fontSize={12}
+              tickLine={false}
+              axisLine={false}
+              tickFormatter={(value) => `${value}`}
+            />
+            <Tooltip
+              cursor={{ fill: "transparent" }}
+              contentStyle={{
+                backgroundColor: "hsl(var(--background))",
+                borderColor: "hsl(var(--border))",
+                borderRadius: "var(--radius)",
+              }}
+            />
+            <Bar
+              dataKey="value"
+              fill="hsl(var(--primary))"
+              radius={[4, 4, 0, 0]}
+            />
+          </BarChart>
+        </ResponsiveContainer>
+      </CardContent>
+    </Card>
+  );
+}

components/admin/stats-overview.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { Users, Activity, Workflow, Server } from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { AdminStats } from "@/types/admin";
+import { Skeleton } from "@/components/ui/skeleton";
+
+interface StatsOverviewProps {
+  stats: AdminStats | null;
+  loading: boolean;
+}
+
+export function StatsOverview({ stats, loading }: StatsOverviewProps) {
+  if (loading || !stats) {
+    return (
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <Skeleton key={i} className="h-32 rounded-xl" />
+        ))}
+      </div>
+    );
+  }
+
+  const healthColor = {
+    healthy: "text-green-500",
+    degraded: "text-amber-500",
+    down: "text-red-500",
+  }[stats.systemHealth];
+
+  return (
+    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-medium">Total Users</CardTitle>
+          <Users className="h-4 w-4 text-muted-foreground" />
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold">{stats.totalUsers}</div>
+          <p className="text-xs text-muted-foreground">
+            {stats.userGrowth > 0 ? "+" : ""}
+            {stats.userGrowth}% from last month
+          </p>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-medium">Active Users</CardTitle>
+          <Activity className="h-4 w-4 text-muted-foreground" />
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold">{stats.activeUsers}</div>
+          <p className="text-xs text-muted-foreground">in the last 7 days</p>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-medium">Total Workflows</CardTitle>
+          <Workflow className="h-4 w-4 text-muted-foreground" />
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold">{stats.totalWorkflows}</div>
+          <p className="text-xs text-muted-foreground">
+            Active across the platform
+          </p>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-medium">System Health</CardTitle>
+          <Server className="h-4 w-4 text-muted-foreground" />
+        </CardHeader>
+        <CardContent>
+          <div className={`text-2xl font-bold capitalize ${healthColor}`}>
+            {stats.systemHealth}
+          </div>
+          <p className="text-xs text-muted-foreground">
+            All services operational
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

components/admin/system-controls.tsx

@@ -0,0 +1,212 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from "@/components/ui/card";
+import { Switch } from "@/components/ui/switch";
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { AlertTriangle, Save, RefreshCw } from "lucide-react";
+import { useApi } from "@/hooks/use-api";
+
+interface SystemSettings {
+    featureFlags: {
+        betaFeatures: boolean;
+        registration: boolean;
+        maintenance: boolean;
+    };
+    emailConfig: {
+        dailyLimit: number;
+        userRateLimit: number;
+    };
+}
+
+export function SystemControls() {
+    const { get, post, loading: apiLoading } = useApi<SystemSettings>();
+    const [localSettings, setLocalSettings] = useState<SystemSettings>({
+        featureFlags: {
+            betaFeatures: false,
+            registration: true,
+            maintenance: false,
+        },
+        emailConfig: {
+            dailyLimit: 10000,
+            userRateLimit: 50,
+        },
+    });
+    const [initialLoading, setInitialLoading] = useState(true);
+
+    useEffect(() => {
+        const fetchSettings = async () => {
+             const data = await get("/api/admin/settings");
+             if (data) {
+                setLocalSettings({
+                    featureFlags: { ...localSettings.featureFlags, ...(data.featureFlags || {}) },
+                    emailConfig: { ...localSettings.emailConfig, ...(data.emailConfig || {}) }
+                });
+             }
+             setInitialLoading(false);
+        };
+        fetchSettings();
+    }, [get, localSettings.emailConfig, localSettings.featureFlags]); // Run once on mount
+
+    const handleSave = async () => {
+        await post("/api/admin/settings", localSettings, {
+            successMessage: "System settings updated successfully"
+        });
+    };
+
+    const updateFeatureFlag = (key: keyof SystemSettings["featureFlags"], value: boolean) => {
+        setLocalSettings(prev => ({
+            ...prev,
+            featureFlags: { ...prev.featureFlags, [key]: value }
+        }));
+    };
+
+    const updateEmailConfig = (key: keyof SystemSettings["emailConfig"], value: number) => {
+        setLocalSettings(prev => ({
+            ...prev,
+            emailConfig: { ...prev.emailConfig, [key]: value }
+        }));
+    };
+
+    const loading = initialLoading || apiLoading;
+
+    return (
+        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
+            <Card>
+                <CardHeader>
+                    <CardTitle>Feature Flags</CardTitle>
+                    <CardDescription>
+                        Toggle system-wide features and experimental functionality
+                    </CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                    <div className="flex items-center justify-between">
+                        <div className="space-y-0.5">
+                            <Label>Beta Features</Label>
+                            <div className="text-sm text-muted-foreground">
+                                Enable experimental features for all users
+                            </div>
+                        </div>
+                        <Switch
+                            checked={localSettings.featureFlags.betaFeatures}
+                            onCheckedChange={(c) => updateFeatureFlag("betaFeatures", c)}
+                            disabled={loading}
+                        />
+                    </div>
+                    <div className="flex items-center justify-between">
+                        <div className="space-y-0.5">
+                            <Label>User Registration</Label>
+                            <div className="text-sm text-muted-foreground">
+                                Allow new users to sign up
+                            </div>
+                        </div>
+                        <Switch
+                            checked={localSettings.featureFlags.registration}
+                            onCheckedChange={(c) => updateFeatureFlag("registration", c)}
+                            disabled={loading}
+                        />
+                    </div>
+                    <div className="flex items-center justify-between">
+                        <div className="space-y-0.5">
+                            <Label>Maintenance Mode</Label>
+                            <div className="text-sm text-muted-foreground">
+                                Disable access for non-admin users
+                            </div>
+                        </div>
+                        <Switch
+                            checked={localSettings.featureFlags.maintenance}
+                            onCheckedChange={(c) => updateFeatureFlag("maintenance", c)}
+                            disabled={loading}
+                        />
+                    </div>
+                </CardContent>
+                <CardFooter>
+                    <Button onClick={handleSave} disabled={loading}>
+                        {loading ? (
+                            <RefreshCw className="mr-2 h-4 w-4 animate-spin" />
+                        ) : (
+                            <Save className="mr-2 h-4 w-4" />
+                        )}
+                        Save Changes
+                    </Button>
+                </CardFooter>
+            </Card>
+
+            <Card>
+                <CardHeader>
+                    <CardTitle>Email Configuration</CardTitle>
+                    <CardDescription>
+                        Manage global email sending limits and rate limiting
+                    </CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                    <div className="grid gap-2">
+                        <Label>Daily Global Limit</Label>
+                        <Input
+                            type="number"
+                            value={localSettings.emailConfig.dailyLimit}
+                            onChange={(e) => updateEmailConfig("dailyLimit", parseInt(e.target.value))}
+                            disabled={loading}
+                        />
+                        <p className="text-xs text-muted-foreground">
+                            Maximum emails sent across all users per day
+                        </p>
+                    </div>
+                    <div className="grid gap-2">
+                        <Label>Default User Rate Limit</Label>
+                        <Input
+                            type="number"
+                            value={localSettings.emailConfig.userRateLimit}
+                            onChange={(e) => updateEmailConfig("userRateLimit", parseInt(e.target.value))}
+                            disabled={loading}
+                        />
+                        <p className="text-xs text-muted-foreground">
+                            Emails per hour per user account
+                        </p>
+                    </div>
+                </CardContent>
+                <CardFooter>
+                    <Button variant="outline" onClick={handleSave} disabled={loading}>
+                        Update Configuration
+                    </Button>
+                </CardFooter>
+            </Card>
+
+            <Card className="border-red-200 dark:border-red-900">
+                <CardHeader>
+                    <div className="flex items-center gap-2 text-red-600">
+                        <AlertTriangle className="h-5 w-5" />
+                        <CardTitle>Danger Zone</CardTitle>
+                    </div>
+                    <CardDescription>
+                        Irreversible actions that affect the entire system
+                    </CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                    <div className="flex items-center justify-between p-4 border rounded-lg bg-red-50 dark:bg-red-950/20">
+                        <div>
+                            <div className="font-medium text-red-900 dark:text-red-200">
+                                Clear System Cache
+                            </div>
+                            <div className="text-sm text-red-700 dark:text-red-300">
+                                Flush Redis cache and reset rate limits
+                            </div>
+                        </div>
+                        <Button variant="destructive" size="sm">
+                            Clear Cache
+                        </Button>
+                    </div>
+                </CardContent>
+            </Card>
+        </div>
+    );
+}

components/admin/user-growth-chart.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+
+interface UserGrowthData {
+  date: string;
+  users: number;
+}
+
+interface UserGrowthChartProps {
+  data: UserGrowthData[];
+}
+
+export function UserGrowthChart({ data }: UserGrowthChartProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>User Growth</CardTitle>
+        <CardDescription>Total users over the last 30 days</CardDescription>
+      </CardHeader>
+      <CardContent className="h-[300px]">
+        <ResponsiveContainer width="100%" height="100%">
+          <AreaChart
+            data={data}
+            margin={{ top: 10, right: 30, left: 0, bottom: 0 }}
+          >
+            <defs>
+              <linearGradient id="colorUsers" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="5%" stopColor="#8884d8" stopOpacity={0.8} />
+                <stop offset="95%" stopColor="#8884d8" stopOpacity={0} />
+              </linearGradient>
+            </defs>
+            <XAxis
+              dataKey="date"
+              stroke="#888888"
+              fontSize={12}
+              tickLine={false}
+              axisLine={false}
+            />
+            <YAxis
+              stroke="#888888"
+              fontSize={12}
+              tickLine={false}
+              axisLine={false}
+              tickFormatter={(value) => `${value}`}
+            />
+            <CartesianGrid strokeDasharray="3 3" vertical={false} />
+            <Tooltip
+              contentStyle={{
+                backgroundColor: "hsl(var(--background))",
+                borderColor: "hsl(var(--border))",
+                borderRadius: "var(--radius)",
+              }}
+            />
+            <Area
+              type="monotone"
+              dataKey="users"
+              stroke="#8884d8"
+              fillOpacity={1}
+              fill="url(#colorUsers)"
+            />
+          </AreaChart>
+        </ResponsiveContainer>
+      </CardContent>
+    </Card>
+  );
+}

components/admin/user-management-table.tsx

@@ -0,0 +1,183 @@
+"use client";
+
+import { useState } from "react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { AdminUser } from "@/types/admin";
+import { MoreHorizontal, Search, UserCog, Ban, CheckCircle } from "lucide-react";
+
+interface UserManagementTableProps {
+  users: AdminUser[];
+  onUpdateStatus: (userId: string, newStatus: "active" | "suspended") => void;
+  onUpdateRole: (userId: string, newRole: "user" | "admin") => void;
+}
+
+export function UserManagementTable({
+  users,
+  onUpdateStatus,
+  onUpdateRole,
+}: UserManagementTableProps) {
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const filteredUsers = users.filter(
+    (user) =>
+      user.name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      user.email?.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case "active":
+        return "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100";
+      case "suspended":
+        return "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-100";
+      case "inactive":
+        return "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-100";
+      default:
+        return "bg-gray-100 text-gray-800";
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-2">
+        <div className="relative flex-1 max-w-sm">
+          <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="Search users..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="pl-8"
+          />
+        </div>
+      </div>
+
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>User</TableHead>
+              <TableHead>Role</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead>Joined</TableHead>
+              <TableHead>Last Active</TableHead>
+              <TableHead className="text-right">Actions</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {filteredUsers.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={6} className="h-24 text-center">
+                  No users found.
+                </TableCell>
+              </TableRow>
+            ) : (
+              filteredUsers.map((user) => (
+                <TableRow key={user.id}>
+                  <TableCell>
+                    <div className="flex items-center gap-3">
+                      <Avatar>
+                        <AvatarImage src={user.image || ""} />
+                        <AvatarFallback>
+                          {user.name?.slice(0, 2).toUpperCase() || "U"}
+                        </AvatarFallback>
+                      </Avatar>
+                      <div className="flex flex-col">
+                        <span className="font-medium">{user.name}</span>
+                        <span className="text-xs text-muted-foreground">
+                          {user.email}
+                        </span>
+                      </div>
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <Badge variant="outline" className="capitalize">
+                      {user.role}
+                    </Badge>
+                  </TableCell>
+                  <TableCell>
+                    <Badge
+                      variant="secondary"
+                      className={`capitalize ${getStatusColor(user.status)}`}
+                    >
+                      {user.status}
+                    </Badge>
+                  </TableCell>
+                  <TableCell>
+                    {new Date(user.createdAt).toLocaleDateString()}
+                  </TableCell>
+                  <TableCell>
+                    {user.lastActive
+                      ? new Date(user.lastActive).toLocaleDateString()
+                      : "Never"}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" size="icon">
+                          <MoreHorizontal className="h-4 w-4" />
+                          <span className="sr-only">Actions</span>
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                        <DropdownMenuItem
+                          onClick={() =>
+                            onUpdateRole(
+                              user.id,
+                              user.role === "admin" ? "user" : "admin"
+                            )
+                          }
+                        >
+                          <UserCog className="mr-2 h-4 w-4" />
+                          {user.role === "admin"
+                            ? "Remove Admin"
+                            : "Make Admin"}
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        {user.status === "suspended" ? (
+                          <DropdownMenuItem
+                            onClick={() => onUpdateStatus(user.id, "active")}
+                          >
+                            <CheckCircle className="mr-2 h-4 w-4" />
+                            Activate Account
+                          </DropdownMenuItem>
+                        ) : (
+                          <DropdownMenuItem
+                            onClick={() => onUpdateStatus(user.id, "suspended")}
+                            className="text-red-600"
+                          >
+                            <Ban className="mr-2 h-4 w-4" />
+                            Suspend Account
+                          </DropdownMenuItem>
+                        )}
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}

components/common/loading-skeleton.tsx

@@ -0,0 +1,187 @@
+/**
+ * Reusable Loading Skeleton Components
+ * Provides consistent loading states across the application
+ */
+
+import React from "react";
+
+export function CardSkeleton() {
+  return (
+    <div className="rounded-lg border bg-card p-6 animate-pulse">
+      <div className="h-4 bg-muted rounded w-1/4 mb-4"></div>
+      <div className="h-8 bg-muted rounded w-1/2 mb-2"></div>
+      <div className="h-4 bg-muted rounded w-3/4"></div>
+    </div>
+  );
+}
+
+export function TableSkeleton({ rows = 5, columns = 4 }: { rows?: number; columns?: number }) {
+  return (
+    <div className="space-y-3">
+      {/* Header */}
+      <div className="flex gap-4 pb-3 border-b">
+        {Array.from({ length: columns }).map((_, i) => (
+          <div key={i} className="h-4 bg-muted rounded flex-1 animate-pulse"></div>
+        ))}
+      </div>
+      
+      {/* Rows */}
+      {Array.from({ length: rows }).map((_, rowIdx) => (
+        <div key={rowIdx} className="flex gap-4 py-3">
+          {Array.from({ length: columns }).map((_, colIdx) => (
+            <div 
+              key={colIdx} 
+              className="h-4 bg-muted rounded flex-1 animate-pulse"
+              style={{ animationDelay: `${(rowIdx * columns + colIdx) * 50}ms` }}
+            ></div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function ChartSkeleton() {
+  return (
+    <div className="space-y-4">
+      <div className="h-4 bg-muted rounded w-1/3 animate-pulse"></div>
+      <div className="h-64 bg-muted rounded animate-pulse"></div>
+      <div className="flex gap-4">
+        <div className="h-4 bg-muted rounded flex-1 animate-pulse"></div>
+        <div className="h-4 bg-muted rounded flex-1 animate-pulse"></div>
+        <div className="h-4 bg-muted rounded flex-1 animate-pulse"></div>
+      </div>
+    </div>
+  );
+}
+
+export function ListSkeleton({ items = 5 }: { items?: number }) {
+  return (
+    <div className="space-y-3">
+      {Array.from({ length: items }).map((_, i) => (
+        <div key={i} className="flex items-center gap-4 p-4 rounded-lg border animate-pulse">
+          <div className="h-10 w-10 bg-muted rounded-full"></div>
+          <div className="flex-1 space-y-2">
+            <div className="h-4 bg-muted rounded w-1/2"></div>
+            <div className="h-3 bg-muted rounded w-3/4"></div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function StatCardSkeleton() {
+  return (
+    <div className="rounded-lg border bg-card p-6 animate-pulse">
+      <div className="flex items-start justify-between">
+        <div className="space-y-2 flex-1">
+          <div className="h-3 bg-muted rounded w-24"></div>
+          <div className="h-8 bg-muted rounded w-32"></div>
+        </div>
+        <div className="h-10 w-10 bg-muted rounded-lg"></div>
+      </div>
+      <div className="mt-4 h-3 bg-muted rounded w-1/2"></div>
+    </div>
+  );
+}
+
+export function FormSkeleton() {
+  return (
+    <div className="space-y-6">
+      {/* Form fields */}
+      {Array.from({ length: 4 }).map((_, i) => (
+        <div key={i} className="space-y-2 animate-pulse">
+          <div className="h-4 bg-muted rounded w-1/4"></div>
+          <div className="h-10 bg-muted rounded w-full"></div>
+        </div>
+      ))}
+      
+      {/* Buttons */}
+      <div className="flex gap-3">
+        <div className="h-10 bg-muted rounded w-24 animate-pulse"></div>
+        <div className="h-10 bg-muted rounded w-24 animate-pulse"></div>
+      </div>
+    </div>
+  );
+}
+
+export function PageSkeleton() {
+  return (
+    <div className="container mx-auto p-6 space-y-6">
+      {/* Page header */}
+      <div className="space-y-2 animate-pulse">
+        <div className="h-8 bg-muted rounded w-1/3"></div>
+        <div className="h-4 bg-muted rounded w-1/2"></div>
+      </div>
+      
+      {/* Stats Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <StatCardSkeleton key={i} />
+        ))}
+      </div>
+      
+      {/* Main content */}
+      <div className="rounded-lg border bg-card p-6">
+        <TableSkeleton />
+      </div>
+    </div>
+  );
+}
+
+export function DashboardSkeleton() {
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between animate-pulse">
+        <div>
+          <div className="h-8 bg-muted rounded w-48 mb-2"></div>
+          <div className="h-4 bg-muted rounded w-64"></div>
+        </div>
+        <div className="h-10 w-32 bg-muted rounded"></div>
+      </div>
+      
+      {/* Stats */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <StatCardSkeleton key={i} />
+        ))}
+      </div>
+      
+      {/* Charts */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <div className="rounded-lg border bg-card p-6">
+          <ChartSkeleton />
+        </div>
+        <div className="rounded-lg border bg-card p-6">
+          <ChartSkeleton />
+        </div>
+      </div>
+      
+      {/* Recent activity */}
+      <div className="rounded-lg border bg-card p-6">
+        <div className="h-6 bg-muted rounded w-1/4 mb-4 animate-pulse"></div>
+        <TableSkeleton rows={5} />
+      </div>
+    </div>
+  );
+}
+
+// Generic skeleton with custom content
+export function Skeleton({ 
+  className = "", 
+  variant = "default" 
+}: { 
+  className?: string; 
+  variant?: "default" | "circle" | "rectangle" 
+}) {
+  const baseClass = "bg-muted animate-pulse";
+  const variantClass = {
+    default: "rounded",
+    circle: "rounded-full",
+    rectangle: "rounded-lg",
+  }[variant];
+  
+  return <div className={`${baseClass} ${variantClass} ${className}`} />;
+}

components/dashboard/email-chart.tsx

@@ -34,21 +34,40 @@ export default function EmailChart({ data, loading }: EmailChartProps) {
   return (
     <ResponsiveContainer width="100%" height={300}>
       <LineChart data={data}>
-        <CartesianGrid strokeDasharray="3 3" />
-        <XAxis dataKey="name" />
-        <YAxis />
-        <Tooltip />
+        <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+        <XAxis
+          dataKey="name"
+          className="text-xs"
+          tick={{ fill: "hsl(var(--muted-foreground))" }}
+        />
+        <YAxis
+          className="text-xs"
+          tick={{ fill: "hsl(var(--muted-foreground))" }}
+        />
+        <Tooltip
+          contentStyle={{
+            backgroundColor: "hsl(var(--popover))",
+            border: "1px solid hsl(var(--border))",
+            borderRadius: "var(--radius)",
+          }}
+        />
         <Line
           type="monotone"
           dataKey="sent"
-          stroke="#3b82f6"
+          stroke="hsl(var(--primary))"
           strokeWidth={2}
+          dot={{ fill: "hsl(var(--primary))", r: 4 }}
+          activeDot={{ r: 6 }}
+          name="Emails Sent"
         />
         <Line
           type="monotone"
           dataKey="opened"
-          stroke="#10b981"
+          stroke="hsl(var(--chart-2))"
           strokeWidth={2}
+          dot={{ fill: "hsl(var(--chart-2))", r: 4 }}
+          activeDot={{ r: 6 }}
+          name="Emails Opened"
         />
       </LineChart>
     </ResponsiveContainer>