`DW-Agents/dw-agents/NEW_CLIENT_SIGNUP_V1.0_CHANGELOG.md`

242 lines
# New Client Signup Agent - Version 1.0

**Release Date:** November 6, 2025
**Port:** 9890
**URL:** http://45.61.58.125:9890/

---

## 🎯 Features

### Core Functionality
- **Real-time Shopify Integration**: Fetches actual customer data from Shopify orders API
- **Auto-refresh**: Updates every 5 seconds with new signups appearing automatically
- **Spreadsheet Table Layout**: Professional table format (no card UI)
- **Last Month Data**: Displays up to 200 recent customers from the past month

### UI Components

#### Header
- Title: "🎯 New Client Signups"
- Subtitle: Real-time Shopify customer data notice
- Live data indicator badge (green)
- **"🛍️ View All Clients in Shopify"** button (purple) - Links to Shopify customers page

#### Statistics Bar
- Today's signups count
- This week's signups count
- This month's signups count

#### Refresh Indicator
- Last update timestamp
- Next refresh countdown (5 seconds)
- Pulsing green dot animation

#### Data Table
**Columns:**
1. Date - Signup date (MM/DD/YYYY)
2. Name - Customer name (bold)
3. Email - Email address
4. Company - Company name or "Individual"
5. Location - City, State format
6. Orders - Number of orders placed
7. Spent - Total amount spent ($)
8. Type - "Trade" badge (green) or "Customer"
9. **View Client** button - Purple button linking to Shopify customer admin page

### Styling
- **Header**: Purple gradient (#7C3AED to #A78BFA)
- **Table Header**: Purple background (#7C3AED), sticky on scroll
- **Trade Badge**: Green background (#10B981)
- **View Client Button**: Purple (#7C3AED) with hover effects
  - Darker on hover (#6D28D9)
  - Slight lift animation
  - Shadow effect
- **New Signups**: Yellow highlight animation (2 seconds)
- **Row Hover**: Light gray background (#f8f9fa)

---

## 📁 Files

### Main Files
- `new-client-signup-agent.ts` - Express server (Port 9890)
- `shopify-customers.ts` - Shopify API integration

### Version 1.0 Backups
- `new-client-signup-agent-v1.0.ts`
- `shopify-customers-v1.0.ts`

---

## 🔧 Technical Details

### Authentication
- Session-based authentication
- SSO token support (shared across DW-Agents)
- Cookie: `dw-sso-token=dw-2025-master-token`
- Login: username `admin`, password `2025`

### Data Source
- **Shopify Store**: designer-laboratory-sandbox.myshopify.com
- **API Version**: 2024-07
- **Access Token**: shpat_REDACTED
- **Method**: Fetches from orders API, extracts unique customers

### Customer Data Fields
```typescript
{
  id: number,                    // Shopify customer ID
  timestamp: Date,               // Signup date
  customerName: string,          // Full name
  email: string,                 // Email address
  company: string,               // Company or "Individual"
  interest: string,              // Customer interest/tags
  source: string,                // Signup source
  phone: string,                 // Phone number
  location: string,              // City, State, Country
  ordersCount: number,           // Total orders
  totalSpent: string,            // Total spent amount
  tags: string                   // Customer tags (comma-separated)
}
```

### Trade Customer Detection
A customer is marked as "Trade" if their tags include:
- `trade`
- `Interior Designer`
- `Contractor`
- `Architect`

---

## 🚀 Deployment

### PM2 Process
```bash
# Start
pm2 start new-client-signup-agent.ts --name "dw-new-client-signup" --interpreter=npx --interpreter-args="tsx"

# Restart
pm2 restart dw-new-client-signup

# Logs
pm2 logs dw-new-client-signup

# Clear cache and restart
pm2 flush dw-new-client-signup && pm2 restart dw-new-client-signup
```

### Port Configuration
- Port: 9890
- Binds to: 0.0.0.0 (all interfaces)
- Accessible at: http://45.61.58.125:9890/

---

## 📊 API Endpoints

### `GET /`
Main dashboard page (requires authentication)

### `GET /login`
Login page (HTML form)

### `POST /login`
Authentication endpoint
- Body: `{ username, password }`
- Success: Redirects to `/`
- Failure: Redirects to `/login`

### `GET /api/signups`
Returns customer signups data (requires authentication)

**Response:**
```json
{
  "signups": [
    {
      "id": 7551440715827,
      "timestamp": "2025-11-06T21:25:10.000Z",
      "customerName": "Jeanine Bequette",
      "email": "lynnxii.bequette4@gmail.com",
      "company": "JEANINE BEQUETTE",
      "location": "Kirkwood, Missouri, United States",
      "ordersCount": 1,
      "totalSpent": "3.50",
      "tags": "open_signin"
    }
  ],
  "stats": {
    "today": 2,
    "thisWeek": 17,
    "thisMonth": 82
  },
  "generatedAt": "2025-11-06T...",
  "dataSource": "Shopify API (REAL DATA)"
}
```

---

## 🎨 UI Behavior

### Auto-refresh Logic
1. Fetches data every 5 seconds
2. Compares new data with previous data by timestamp
3. Marks new signups with yellow highlight animation
4. Updates stats bar with latest counts
5. Updates "Last updated" timestamp
6. Countdown timer shows "Next: Xs"

### New Signup Animation
- Background: Yellow gradient (#FEF3C7 to #FDE68A)
- Duration: 2 seconds
- Fade from yellow to white

### Hover Effects
- Table rows: Light gray background
- View Client button: Darker purple, shadow, slight lift

---

## 🔗 Related Links

- **Shopify Admin**: https://admin.shopify.com/store/designer-laboratory-sandbox
- **Customers Page**: https://admin.shopify.com/store/designer-laboratory-sandbox/customers
- **Agent Dashboard**: http://45.61.58.125:9890/
- **Master Hub**: http://45.61.58.125:9870/

---

## ✅ Version 1.0 Checklist

- [x] Spreadsheet table layout (no cards)
- [x] Customer ID field included
- [x] Working "View Client" buttons with Shopify links
- [x] Header "View All Clients in Shopify" button
- [x] Last month of customers (200 limit)
- [x] Auto-refresh every 5 seconds
- [x] New signup highlighting
- [x] Trade customer badge detection
- [x] Sticky table header
- [x] Hover effects
- [x] SSO authentication
- [x] Real Shopify data integration

---

## 📝 Notes

- All buttons are functional and link to correct Shopify admin pages
- Data is fetched from live Shopify store (no mock data)
- Authentication is shared across all DW-Agents using SSO token
- Table is horizontally scrollable on smaller screens
- Purple color theme (#7C3AED) matches DW-Agents branding

---

**Version:** 1.0
**Status:** ✅ Production Ready
**Last Updated:** November 6, 2025