[V0_FILE]typescriptreact:file="frontend/src/index.js" isMerged="true" import React from "react" import ReactDOM from "react-dom/client" import "./index.css" import App from "./App" const root = ReactDOM.createRoot(document.getElementById("root")) root.render( , ) [V0_FILE]typescriptreact:file="frontend/src/pages/Dashboard.js" isMerged="true" "use client" import { useState, useEffect } from "react" import { Link } from "react-router-dom" import "./Dashboard.css" const Dashboard = () => { const [stats, setStats] = useState({ totalCalls: 0, successfulCalls: 0, failedCalls: 0, filesUploaded: 0, }) const [loading, setLoading] = useState(true) useEffect(() => { // Simulate fetching dashboard data setTimeout(() => { setStats({ totalCalls: 124, successfulCalls: 98, failedCalls: 26, filesUploaded: 15, }) setLoading(false) }, 1000) }, []) if (loading) { return (

Loading dashboard data...

) } return (

Dashboard

Total Calls

{stats.totalCalls}

Successful Calls

{stats.successfulCalls}

Failed Calls

{stats.failedCalls}

Files Uploaded

{stats.filesUploaded}

Quick Actions

📞

Make Calls

Initiate outbound calls to customers

📁

Upload Files

Upload files to the Vapi AI system

📊

View Data

View and manage webhook data

) } export default Dashboard [V0_FILE]typescriptreact:file="frontend/src/pages/Dashboard.css" isMerged="true" .dashboard { padding: 20px 0; } .page-title { font-size: 32px; margin-bottom: 30px; color: var(--text-primary); border-bottom: 2px solid var(--accent-primary); padding-bottom: 10px; display: inline-block; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; margin-bottom: 40px; } .stat-card { background-color: var(--card-bg); border-radius: 8px; padding: 20px; text-align: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; } .stat-card:hover { transform: translateY(-5px); } .stat-card h3 { font-size: 16px; color: var(--text-secondary); margin-bottom: 15px; } .stat-value { font-size: 36px; font-weight: 700; color: var(--text-primary); } .stat-value.success { color: var(--success); } .stat-value.error { color: var(--error); } .quick-actions { margin-top: 40px; } .quick-actions h2 { font-size: 24px; margin-bottom: 20px; color: var(--text-primary); } .actions-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } .action-card { background-color: var(--card-bg); border-radius: 8px; padding: 25px; text-align: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; text-decoration: none; color: var(--text-primary); display: flex; flex-direction: column; align-items: center; } .action-card:hover { transform: translateY(-5px); background-color: var(--accent-primary); } .action-icon { font-size: 32px; margin-bottom: 15px; } .action-card h3 { font-size: 18px; margin-bottom: 10px; } .action-card p { color: var(--text-secondary); font-size: 14px; } .action-card:hover p { color: rgba(255, 255, 255, 0.8); } .loading-container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 60vh; } .loading-spinner { width: 50px; height: 50px; border: 5px solid rgba(126, 87, 194, 0.3); border-radius: 50%; border-top-color: var(--accent-primary); margin-bottom: 20px; } @media (max-width: 768px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } .actions-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr; } } [V0_FILE]typescriptreact:file="frontend/src/pages/CallCenter.js" isMerged="true" "use client" import { useState } from "react" import "./CallCenter.css" const CallCenter = () => { const [phoneNumbers, setPhoneNumbers] = useState("") const [isLoading, setIsLoading] = useState(false) const [result, setResult] = useState(null) const [error, setError] = useState(null) const handleSubmit = async (e) => { e.preventDefault() if (!phoneNumbers.trim()) { setError("Please enter at least one phone number") return } const numbersArray = phoneNumbers .split(",") .map((num) => num.trim()) .filter((num) => num) if (numbersArray.length === 0) { setError("Please enter valid phone numbers") return } setIsLoading(true) setError(null) try { const response = await fetch(`${process.env.REACT_APP_API_URL}/api/make-calls`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ phoneNumbers: numbersArray }), }) const data = await response.json() if (response.ok) { setResult(data) setPhoneNumbers("") } else { setError(data.message || "Failed to initiate calls") } } catch (err) { setError("An error occurred while making the API call") console.error(err) } finally { setIsLoading(false) } } return (

Call Center

Make Outbound Calls

Enter phone numbers separated by commas to initiate outbound calls using the Vapi AI assistant.

{error && (

{error}

)} {result && result.success && (

{result.message}

{result.success_count} calls initiated successfully

)}

Phone Numbers

setPhoneNumbers(e.target.value)}
              placeholder="Enter phone numbers separated by commas (e.g., +1234567890, +0987654321)"
              rows={5}
              disabled={isLoading}
            />
            <small className="form-hint">Format: Include country code (e.g., +1 for US)</small>
          </div>

<button type="submit" className={`btn btn-primary ${isLoading ? "loading" : ""}`} disabled={isLoading}>
            {isLoading ? (
              <>
                <span className="spinner spin"></span>
                <span>Initiating Calls...</span>
              </>
            ) : (
              "Make Calls"
            )}
          </button>
        </form>
      </div>

{result && result.results && (
        <div className="card results-card">
          <h2>Call Results</h2>
          <div className="call-results">
            {result.results.map((call, index) => (
              <div key={index} className={`call-result ${call.success ? "success" : "error"}`}>
                <div className="call-number">{call.number}</div>
                <div className="call-status">{call.success ? "Success" : "Failed"}</div>
                {call.success && call.data && call.data.id && <div className="call-id">ID: {call.data.id}</div>}
                {!call.success && call.error && <div className="call-error">{call.error}</div>}
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  )
}

export default CallCenter
[V0_FILE]typescriptreact:file="frontend/src/pages/CallCenter.css" isMerged="true"
.call-center {
  padding: 20px 0;
}

.call-form-card {
  max-width: 800px;
  margin: 0 auto 30px;
}

.call-form-card h2 {
  margin-bottom: 15px;
  color: var(--text-primary);
}

.form-description {
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.form-hint {
  display: block;
  color: var(--text-secondary);
  font-size: 12px;
  margin-top: 5px;
}

.btn.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  cursor: not-allowed;
}

.spinner {
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: white;
  margin-right: 10px;
}

.results-card {
  max-width: 800px;
  margin: 0 auto;
}

.results-card h2 {
  margin-bottom: 15px;
  color: var(--text-primary);
}

.call-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
}

.call-result {
  background-color: var(--bg-secondary);
  border-radius: 6px;
  padding: 15px;
  transition: transform 0.3s ease;
}

.call-result:hover {
  transform: translateY(-3px);
}

.call-result.success {
  border-left: 4px solid var(--success);
}

.call-result.error {
  border-left: 4px solid var(--error);
}

.call-number {
  font-weight: 500;
  margin-bottom: 8px;
}

.call-status {
  font-size: 14px;
  margin-bottom: 5px;
}

.call-result.success .call-status {
  color: var(--success);
}

.call-result.error .call-status {
  color: var(--error);
}

.call-id {
  font-size: 12px;
  color: var(--text-secondary);
}

.call-error {
  font-size: 12px;
  color: var(--error);
  word-break: break-word;
}
[V0_FILE]typescriptreact:file="frontend/src/pages/FileUpload.js" isMerged="true"
"use client"

import { useState } from "react"
import "./FileUpload.css"

const FileUpload = () => {
  const [file, setFile] = useState(null)
  const [isDragging, setIsDragging] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  const [result, setResult] = useState(null)
  const [error, setError] = useState(null)

const handleFileChange = (e) => {
    if (e.target.files && e.target.files[0]) {
      setFile(e.target.files[0])
      setError(null)
    }
  }

const handleDragOver = (e) => {
    e.preventDefault()
    setIsDragging(true)
  }

const handleDragLeave = () => {
    setIsDragging(false)
  }

const handleDrop = (e) => {
    e.preventDefault()
    setIsDragging(false)

if (e.dataTransfer.files && e.dataTransfer.files[0]) {
      setFile(e.dataTransfer.files[0])
      setError(null)
    }
  }

const handleSubmit = async (e) => {
    e.preventDefault()

if (!file) {
      setError("Please select a file to upload")
      return
    }

setIsLoading(true)
    setError(null)
    setResult(null)

const formData = new FormData()
    formData.append("file", file)

try {
      const response = await fetch(`${process.env.REACT_APP_API_URL}/api/upload-file`, {
        method: "POST",
        body: formData,
      })

const data = await response.json()

if (data.success) {
        setResult(data.data)
        setFile(null)
      } else {
        setError(data.message || "File upload failed")
      }
    } catch (err) {
      setError("An error occurred while uploading the file")
      console.error(err)
    } finally {
      setIsLoading(false)
    }
  }

return (
    <div className="file-upload fade-in">
      <h1 className="page-title">File Upload</h1>

<div className="card upload-card">
        <h2>Upload File to Vapi</h2>
        <p className="upload-description">
          Upload audio files, documents, or other supported files to be processed by the Vapi AI assistant.
        </p>

{error && (
          <div className="alert alert-error">
            <p>{error}</p>
          </div>
        )}

{result && (
          <div className="alert alert-success">
            <p>File uploaded successfully!</p>
            {result.id && <p>File ID: {result.id}</p>}
          </div>
        )}

{file ? (
              <div className="file-info">
                <div className="file-icon">📄</div>
                <div className="file-name">{file.name}</div>
                <div className="file-size">{(file.size / 1024).toFixed(2)} KB</div>
                <button type="button" className="remove-file" onClick={() => setFile(null)}>
                  ✕
                </button>
              </div>
            ) : (
              <div className="drop-content">
                <div className="upload-icon">📁</div>
                <p>Drag & drop your file here or</p>
                <label htmlFor="file" className="select-file-btn">
                  Select File
                </label>
              </div>
            )}
          </div>

<button
            type="submit"
            className={`btn btn-primary upload-btn ${isLoading ? "loading" : ""}`}
            disabled={!file || isLoading}
          >
            {isLoading ? (
              <>
                <span className="spinner spin"></span>
                <span>Uploading...</span>
              </>
            ) : (
              "Upload File"
            )}
          </button>
        </form>
      </div>

{result && (
        <div className="card result-card">
          <h2>Upload Result</h2>
          <pre className="result-json">{JSON.stringify(result, null, 2)}</pre>
        </div>
      )}
    </div>
  )
}

export default FileUpload
[V0_FILE]typescriptreact:file="frontend/src/pages/FileUpload.css" isMerged="true"
.file-upload {
  padding: 20px 0;
}

.upload-card {
  max-width: 800px;
  margin: 0 auto 30px;
}

.upload-card h2 {
  margin-bottom: 15px;
  color: var(--text-primary);
}

.upload-description {
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.drop-zone {
  border: 2px dashed var(--border-color);
  border-radius: 8px;
  padding: 40px 20px;
  text-align: center;
  margin-bottom: 20px;
  transition: all 0.3s ease;
  position: relative;
  cursor: pointer;
}

.drop-zone.dragging {
  border-color: var(--accent-primary);
  background-color: rgba(126, 87, 194, 0.05);
}

.drop-zone.has-file {
  border-color: var(--success);
  background-color: rgba(76, 175, 80, 0.05);
}

.file-input {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
}

.drop-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.upload-icon {
  font-size: 48px;
  margin-bottom: 15px;
}

.select-file-btn {
  display: inline-block;
  background-color: var(--accent-primary);
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  margin-top: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.select-file-btn:hover {
  background-color: var(--accent-secondary);
}

.file-info {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.file-icon {
  font-size: 32px;
  margin-right: 15px;
}

.file-name {
  font-weight: 500;
  margin-right: 15px;
  word-break: break-all;
}

.file-size {
  color: var(--text-secondary);
  font-size: 14px;
}

.remove-file {
  background-color: var(--error);
  color: white;
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 15px;
  font-size: 12px;
  transition: background-color 0.3s ease;
}

.remove-file:hover {
  background-color: #d32f2f;
}

.upload-btn {
  width: 100%;
}

.result-card {
  max-width: 800px;
  margin: 0 auto;
}

.result-card h2 {
  margin-bottom: 15px;
  color: var(--text-primary);
}

.result-json {
  background-color: var(--bg-secondary);
  padding: 15px;
  border-radius: 6px;
  overflow-x: auto;
  color: var(--text-primary);
  font-family: monospace;
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .file-info {
    flex-direction: column;
    text-align: center;
  }

.file-icon {
    margin-right: 0;
    margin-bottom: 10px;
  }

.file-name {
    margin-right: 0;
    margin-bottom: 5px;
  }

.remove-file {
    margin-left: 0;
    margin-top: 10px;
  }
}
[V0_FILE]typescriptreact:file="frontend/src/pages/WebhookData.js" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import "./WebhookData.css"

const WebhookData = () => {
  const [webhookData, setWebhookData] = useState([])
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState(null)
  const [searchTerm, setSearchTerm] = useState("")

// Mock data for demonstration
  useEffect(() => {
    // Simulate API call to fetch webhook data
    setTimeout(() => {
      const mockData = [
        {
          id: "1",
          name: "John Doe",
          email: "john.doe@example.com",
          phoneNumber: "+12345678901",
          details: "Interested in product demo",
          timestamp: new Date(Date.now() - 3600000).toISOString(),
        },
        {
          id: "2",
          name: "Jane Smith",
          email: "jane.smith@example.com",
          phoneNumber: "+12345678902",
          details: "Requesting pricing information",
          timestamp: new Date(Date.now() - 7200000).toISOString(),
        },
        {
          id: "3",
          name: "Robert Johnson",
          email: "robert.johnson@example.com",
          phoneNumber: "+12345678903",
          details: "Technical support inquiry",
          timestamp: new Date(Date.now() - 10800000).toISOString(),
        },
      ]

setWebhookData(mockData)
      setIsLoading(false)
    }, 1000)
  }, [])

const formatDate = (dateString) => {
    const date = new Date(dateString)
    return date.toLocaleString()
  }

const filteredData = webhookData.filter((item) => {
    const searchLower = searchTerm.toLowerCase()
    return (
      item.name.toLowerCase().includes(searchLower) ||
      item.email.toLowerCase().includes(searchLower) ||
      item.phoneNumber.includes(searchTerm) ||
      item.details.toLowerCase().includes(searchLower)
    )
  })

if (isLoading) {
    return (
      <div className="loading-container">
        <div className="loading-spinner spin"></div>
        <p>Loading webhook data...</p>
      </div>
    )
  }

if (error) {
    return (
      <div className="webhook-data fade-in">
        <h1 className="page-title">Webhook Data</h1>
        <div className="alert alert-error">
          <p>{error}</p>
        </div>
      </div>
    )
  }

return (
    <div className="webhook-data fade-in">
      <h1 className="page-title">Webhook Data</h1>

<div className="search-container">
        <input
          type="text"
          className="search-input"
          placeholder="Search by name, email, phone, or details..."
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
        />
      </div>

{webhookData.length === 0 ? (
        <div className="no-data">
          <p>No webhook data available</p>
        </div>
      ) : (
        <>
          <div className="data-count">
            Showing {filteredData.length} of {webhookData.length} entries
          </div>

<div className="webhook-table-container">
            <table className="webhook-table">
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Email</th>
                  <th>Phone Number</th>
                  <th>Details</th>
                  <th>Timestamp</th>
                </tr>
              </thead>
              <tbody>
                {filteredData.map((item) => (
                  <tr key={item.id} className="data-row">
                    <td>{item.name}</td>
                    <td>{item.email}</td>
                    <td>{item.phoneNumber}</td>
                    <td>{item.details}</td>
                    <td>{formatDate(item.timestamp)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </>
      )}
    </div>
  )
}

export default WebhookData
[V0_FILE]typescriptreact:file="frontend/src/pages/WebhookData.css" isMerged="true"
.webhook-data {
  padding: 20px 0;
}

.search-container {
  margin-bottom: 20px;
}

.search-input {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 16px;
  transition: border-color 0.3s ease;
}

.search-input:focus {
  border-color: var(--accent-primary);
  outline: none;
}

.data-count {
  margin-bottom: 15px;
  color: var(--text-secondary);
  font-size: 14px;
}

.webhook-table-container {
  overflow-x: auto;
  background-color: var(--card-bg);
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.webhook-table {
  width: 100%;
  border-collapse: collapse;
}

.webhook-table th,
.webhook-table td {
  padding: 15px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.webhook-table th {
  background-color: rgba(0, 0, 0, 0.2);
  color: var(--text-secondary);
  font-weight: 500;
  position: sticky;
  top: 0;
}

.webhook-table tbody tr {
  transition: background-color 0.3s ease;
}

.webhook-table tbody tr:hover {
  background-color: rgba(126, 87, 194, 0.1);
}

.webhook-table td {
  color: var(--text-primary);
}

.no-data {
  text-align: center;
  padding: 40px;
  background-color: var(--card-bg);
  border-radius: 8px;
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .webhook-table th,
  .webhook-table td {
    padding: 10px;
    font-size: 14px;
  }
}
[V0_FILE]typescriptreact:file="frontend/.env" isMerged="true"
REACT_APP_API_URL=http://localhost:5000
[V0_FILE]typescriptreact:file="backend/.env" isMerged="true"
MONGO_URI=mongodb://localhost:27017
VAPI_API_KEY=your_vapi_api_key
TWILIO_ACCOUNT_SID=your_twilio_account_sid
TWILIO_AUTH_TOKEN=your_twilio_auth_token
TWILIO_PHONE_NUMBER=your_twilio_phone_number
ASSISTANT_ID=your_assistant_id
[V0_FILE]typescriptreact:file="backend/requirements.txt" isMerged="true"
Flask==3.0.3
Flask-Cors==4.0.0
pymongo==4.6.1
requests==2.31.0
python-dotenv==1.0.1
[V0_FILE]typescriptreact:file="frontend/package.json" isMerged="true"
{
  "name": "scankart-ai-voice-agent-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.8.0",
    "react-scripts": "5.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": ["react-app", "react-app/jest"]
  },
  "browserslist": {
    "production": [">0.2%", "not dead", "not op_mini all"],
    "development": ["last 1 chrome version", "last 1 firefox version", "last 1 safari version"]
  }
}
[V0_FILE]typescriptreact:file="frontend/public/index.html" isMerged="true"
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="ScanKart AI Voice Agent - Intelligent voice calling system" />
    <title>ScanKart AI Voice Agent</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>
[V0_FILE]typescriptreact:file="README.md" isMerged="true"
# ScanKart AI Voice Agent

A comprehensive voice agent application that integrates Vapi AI and Twilio for intelligent outbound calling.

## Features

- **Dashboard**: Real-time statistics and quick access to main features
- **Call Center**: Bulk outbound calling with AI assistant integration
- **File Upload**: Upload and process files through Vapi AI
- **Webhook Data**: Manage and view incoming webhook data
- **Dark Theme**: Modern UI with smooth animations

## Tech Stack

### Frontend
- React 18
- React Router DOM
- Custom CSS with animations
- Responsive design

### Backend
- Flask (Python)
- MongoDB for data storage
- Vapi AI integration
- Twilio for voice calls
- CORS enabled

## Quick Start

### Prerequisites
- Node.js (v16 or higher)
- Python 3.9+
- MongoDB
- Vapi AI account
- Twilio account

### Installation

1. **Clone the repository**
   \`\`\`bash
   git clone <repository-url>
   cd scankart-ai-voice-agent
   \`\`\`

2. **Backend Setup**
   \`\`\`bash
   cd backend
   pip install -r requirements.txt
   \`\`\`

3. **Configure Backend Environment**
   Create `.env` file in backend directory:
   \`\`\`
   MONGO_URI=your_mongodb_connection_string
   VAPI_API_KEY=your_vapi_api_key
   TWILIO_ACCOUNT_SID=your_twilio_account_sid
   TWILIO_AUTH_TOKEN=your_twilio_auth_token
   TWILIO_PHONE_NUMBER=your_twilio_phone_number
   ASSISTANT_ID=your_vapi_assistant_id
   \`\`\`

4. **Start Backend Server**
   \`\`\`bash
   python app.py
   \`\`\`

5. **Frontend Setup**
   \`\`\`bash
   cd ../frontend
   npm install
   \`\`\`

6. **Configure Frontend Environment**
   Create `.env` file in frontend directory:
   \`\`\`
   REACT_APP_API_URL=http://localhost:5000
   \`\`\`

7. **Start Frontend Development Server**
   \`\`\`bash
   npm start
   \`\`\`

### Production Deployment

#### Backend (Flask)
- Deploy to platforms like Heroku, Railway, or DigitalOcean
- Ensure environment variables are properly configured
- Use production WSGI server like Gunicorn

#### Frontend (React)
- Build the production version: `npm run build`
- Deploy to Vercel, Netlify, or similar platforms
- Update `REACT_APP_API_URL` to point to production backend

## API Endpoints

### File Upload
- **POST** `/api/upload-file`
- Upload files to Vapi AI system

### Webhook
- **POST** `/api/webhook`
- Receive and store user data

### Assistant Info
- **GET** `/api/assistant-info`
- Get Vapi assistant information

### Make Calls
- **POST** `/api/make-calls`
- Initiate bulk outbound calls

## Environment Variables

### Backend
- `MONGO_URI`: MongoDB connection string
- `VAPI_API_KEY`: Your Vapi AI API key
- `TWILIO_ACCOUNT_SID`: Twilio account SID
- `TWILIO_AUTH_TOKEN`: Twilio authentication token
- `TWILIO_PHONE_NUMBER`: Twilio phone number for outbound calls
- `ASSISTANT_ID`: Vapi AI assistant ID

### Frontend
- `REACT_APP_API_URL`: Backend API URL

## Usage

1. **Dashboard**: View call statistics and system overview
2. **Call Center**: Enter phone numbers (comma-separated) to initiate bulk calls
3. **File Upload**: Drag and drop or select files to upload to Vapi AI
4. **Webhook Data**: View and search through received webhook data

## Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

## License

This project is licensed under the MIT License.
[V0_FILE]typescriptreact:file="frontend/src/App.js" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { BrowserRouter as Router, Routes, Route } from "react-router-dom"
import Navbar from "./components/Navbar"
import Home from "./pages/Home"
import Dashboard from "./pages/Dashboard"
import CallCenter from "./pages/CallCenter"
import FileUpload from "./pages/FileUpload"
import WebhookData from "./pages/WebhookData"
import Login from "./pages/Login"
import Signup from "./pages/Signup"
import ProtectedRoute from "./components/ProtectedRoute"
import { AuthProvider } from "./context/AuthContext"
import "./App.css"

function App() {
  const [theme, setTheme] = useState("dark")

const toggleTheme = () => {
    setTheme(theme === "dark" ? "light" : "dark")
  }

return (
    <AuthProvider>
      <Router>
        <div className={`app ${theme}`}>
          <Navbar theme={theme} toggleTheme={toggleTheme} />
          <div className="main-content">
            <Routes>
              <Route path="/" element={<Home />} />
              <Route path="/login" element={<Login />} />
              <Route path="/signup" element={<Signup />} />
              <Route
                path="/dashboard"
                element={
                  <ProtectedRoute>
                    <Dashboard />
                  </ProtectedRoute>
                }
              />
              <Route
                path="/call-center"
                element={
                  <ProtectedRoute>
                    <CallCenter />
                  </ProtectedRoute>
                }
              />
              <Route
                path="/file-upload"
                element={
                  <ProtectedRoute>
                    <FileUpload />
                  </ProtectedRoute>
                }
              />
              <Route
                path="/webhook-data"
                element={
                  <ProtectedRoute>
                    <WebhookData />
                  </ProtectedRoute>
                }
              />
            </Routes>
          </div>
        </div>
      </Router>
    </AuthProvider>
  )
}

export default App
[V0_FILE]typescriptreact:file="frontend/src/App.css" isEdit="true" isMerged="true"
:root {
  --bg-primary: #0a0a0a;
  --bg-secondary: #1a1a1a;
  --bg-tertiary: #2a2a2a;
  --text-primary: #ffffff;
  --text-secondary: #a0a0a0;
  --text-muted: #666666;
  --accent-primary: #8b5cf6;
  --accent-secondary: #7c3aed;
  --accent-hover: #9333ea;
  --success: #10b981;
  --error: #ef4444;
  --warning: #f59e0b;
  --border-color: #333333;
  --border-light: #404040;
  --card-bg: #1e1e1e;
  --gradient-primary: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  --gradient-secondary: linear-gradient(135deg, #1e1e1e 0%, #2a2a2a 100%);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
}

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  width: 100%;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}

.page-container {
  padding: 40px 20px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.card {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-light);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  gap: 8px;
  min-height: 44px;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--gradient-primary);
  color: white;
  border: 1px solid transparent;
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--accent-primary);
  color: var(--accent-primary);
}

.btn-secondary:hover:not(:disabled) {
  background: rgba(139, 92, 246, 0.1);
  border-color: var(--accent-hover);
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

.btn-outline:hover:not(:disabled) {
  background: var(--bg-secondary);
  border-color: var(--border-light);
}

.btn-ghost {
  background: transparent;
  border: none;
  color: var(--text-secondary);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.btn-sm {
  padding: 8px 16px;
  font-size: 12px;
  min-height: 36px;
}

.btn-lg {
  padding: 16px 32px;
  font-size: 16px;
  min-height: 52px;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 14px;
}

.form-control {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 14px;
  transition: all 0.3s ease;
}

.form-control:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.form-control::placeholder {
  color: var(--text-muted);
}

.alert {
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid;
  font-size: 14px;
}

.alert-success {
  background: rgba(16, 185, 129, 0.1);
  border-color: var(--success);
  color: var(--success);
}

.alert-error {
  background: rgba(239, 68, 68, 0.1);
  border-color: var(--error);
  color: var(--error);
}

.alert-warning {
  background: rgba(245, 158, 11, 0.1);
  border-color: var(--warning);
  color: var(--warning);
}

.page-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.page-subtitle {
  font-size: 16px;
  color: var(--text-secondary);
  margin-bottom: 32px;
}

.section-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.grid {
  display: grid;
  gap: 24px;
}

.grid-cols-1 {
  grid-template-columns: 1fr;
}

.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.gap-2 {
  gap: 8px;
}

.gap-4 {
  gap: 16px;
}

.gap-6 {
  gap: 24px;
}

.gap-8 {
  gap: 32px;
}

.mt-2 {
  margin-top: 8px;
}

.mt-4 {
  margin-top: 16px;
}

.mt-6 {
  margin-top: 24px;
}

.mt-8 {
  margin-top: 32px;
}

.mb-2 {
  margin-bottom: 8px;
}

.mb-4 {
  margin-bottom: 16px;
}

.mb-6 {
  margin-bottom: 24px;
}

.mb-8 {
  margin-bottom: 32px;
}

.p-4 {
  padding: 16px;
}

.p-6 {
  padding: 24px;
}

.p-8 {
  padding: 32px;
}

.fade-in {
  animation: fadeIn 0.6s ease-out;
}

.slide-up {
  animation: slideUp 0.6s ease-out;
}

.scale-in {
  animation: scaleIn 0.4s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.loading-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(139, 92, 246, 0.3);
  border-radius: 50%;
  border-top-color: var(--accent-primary);
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  gap: 16px;
}

@media (max-width: 1024px) {
  .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }

.grid-cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .page-container {
    padding: 20px 16px;
  }

.container {
    padding: 0 16px;
  }

.grid-cols-4,
  .grid-cols-3,
  .grid-cols-2 {
    grid-template-columns: 1fr;
  }

.page-title {
    font-size: 28px;
  }

.section-title {
    font-size: 20px;
  }

.card {
    padding: 20px;
  }

.btn {
    padding: 10px 20px;
    font-size: 14px;
  }

.btn-lg {
    padding: 14px 28px;
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .page-container {
    padding: 16px 12px;
  }

.container {
    padding: 0 12px;
  }

.page-title {
    font-size: 24px;
  }

.card {
    padding: 16px;
  }

.btn {
    padding: 8px 16px;
    font-size: 13px;
  }
}
[V0_FILE]typescriptreact:file="frontend/src/index.css" isEdit="true" isMerged="true"
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
    "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #333333 #1a1a1a;
}

*::-webkit-scrollbar {
  width: 8px;
}

*::-webkit-scrollbar-track {
  background: #1a1a1a;
}

*::-webkit-scrollbar-thumb {
  background-color: #333333;
  border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #404040;
}
[V0_FILE]typescriptreact:file="frontend/src/context/AuthContext.js" isMerged="true"
"use client"

import { createContext, useContext, useState, useEffect } from "react"

const AuthContext = createContext()

export const useAuth = () => {
  const context = useContext(AuthContext)
  if (!context) {
    throw new Error("useAuth must be used within an AuthProvider")
  }
  return context
}

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null)
  const [loading, setLoading] = useState(true)

useEffect(() => {
    const token = localStorage.getItem("token")
    const userData = localStorage.getItem("user")

if (token && userData) {
      try {
        setUser(JSON.parse(userData))
      } catch (error) {
        localStorage.removeItem("token")
        localStorage.removeItem("user")
      }
    }
    setLoading(false)
  }, [])

const login = async (email, password) => {
    try {
      const response = await fetch(`${process.env.REACT_APP_API_URL}/api/auth/login`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ email, password }),
      })

const data = await response.json()

if (data.success) {
        localStorage.setItem("token", data.token)
        localStorage.setItem("user", JSON.stringify(data.user))
        setUser(data.user)
        return { success: true }
      } else {
        return { success: false, message: data.message }
      }
    } catch (error) {
      return { success: false, message: "Network error occurred" }
    }
  }

const signup = async (name, email, password) => {
    try {
      const response = await fetch(`${process.env.REACT_APP_API_URL}/api/auth/signup`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ name, email, password }),
      })

const data = await response.json()

const logout = () => {
    localStorage.removeItem("token")
    localStorage.removeItem("user")
    setUser(null)
  }

const value = {
    user,
    login,
    signup,
    logout,
    loading,
  }

return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
}
[V0_FILE]typescriptreact:file="frontend/src/components/ProtectedRoute.js" isMerged="true"
"use client"

import { Navigate } from "react-router-dom"
import { useAuth } from "../context/AuthContext"

const ProtectedRoute = ({ children }) => {
  const { user, loading } = useAuth()

if (loading) {
    return (
      <div className="loading-container">
        <div className="loading-spinner spin"></div>
        <p>Loading...</p>
      </div>
    )
  }

return user ? children : <Navigate to="/login" />
}

export default ProtectedRoute
[V0_FILE]typescriptreact:file="frontend/src/components/Navbar.js" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Link, useNavigate, useLocation } from "react-router-dom"
import { useAuth } from "../context/AuthContext"
import "./Navbar.css"

const Navbar = ({ theme, toggleTheme }) => {
  const [menuOpen, setMenuOpen] = useState(false)
  const { user, logout } = useAuth()
  const navigate = useNavigate()
  const location = useLocation()

const toggleMenu = () => {
    setMenuOpen(!menuOpen)
  }

const handleLogout = () => {
    logout()
    navigate("/")
    setMenuOpen(false)
  }

const isActive = (path) => {
    return location.pathname === path
  }

return (
    <nav className="navbar">
      <div className="navbar-container">
        <Link to="/" className="navbar-logo">
          <div className="logo-icon">
            <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
              <rect width="32" height="32" rx="8" fill="url(#gradient)" />
              <path
                d="M8 12L16 8L24 12V20C24 21.1046 23.1046 22 22 22H10C8.89543 22 8 21.1046 8 20V12Z"
                stroke="white"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
              <path d="M16 8V22" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
              <defs>
                <linearGradient id="gradient" x1="0" y1="0" x2="32" y2="32" gradientUnits="userSpaceOnUse">
                  <stop stopColor="#8b5cf6" />
                  <stop offset="1" stopColor="#7c3aed" />
                </linearGradient>
              </defs>
            </svg>
          </div>
          <span className="logo-text">ScanKart AI</span>
        </Link>

{user && (
          <div className={`navbar-menu ${menuOpen ? "active" : ""}`}>
            <Link
              to="/dashboard"
              className={`nav-item ${isActive("/dashboard") ? "active" : ""}`}
              onClick={() => setMenuOpen(false)}
            >
              Dashboard
            </Link>
            <Link
              to="/call-center"
              className={`nav-item ${isActive("/call-center") ? "active" : ""}`}
              onClick={() => setMenuOpen(false)}
            >
              Call Center
            </Link>
            <Link
              to="/file-upload"
              className={`nav-item ${isActive("/file-upload") ? "active" : ""}`}
              onClick={() => setMenuOpen(false)}
            >
              File Upload
            </Link>
            <Link
              to="/webhook-data"
              className={`nav-item ${isActive("/webhook-data") ? "active" : ""}`}
              onClick={() => setMenuOpen(false)}
            >
              Webhook Data
            </Link>
          </div>
        )}

<div className="navbar-actions">
          <button className="theme-toggle" onClick={toggleTheme} title="Toggle theme">
            {theme === "dark" ? "☀️" : "🌙"}
          </button>

{user ? (
            <div className="user-menu">
              <div className="user-info">
                <div className="user-avatar">{user.name?.charAt(0).toUpperCase() || "U"}</div>
                <span className="user-name">{user.name}</span>
              </div>
              <button className="btn btn-ghost btn-sm" onClick={handleLogout}>
                Logout
              </button>
            </div>
          ) : (
            <div className="auth-buttons">
              <Link to="/login" className="btn btn-ghost btn-sm">
                Login
              </Link>
              <Link to="/signup" className="btn btn-primary btn-sm">
                Sign Up
              </Link>
            </div>
          )}

<button className="menu-toggle" onClick={toggleMenu}>
            <span></span>
            <span></span>
            <span></span>
          </button>
        </div>
      </div>
    </nav>
  )
}

export default Navbar
[V0_FILE]typescriptreact:file="frontend/src/components/Navbar.css" isEdit="true" isMerged="true"
.navbar {
  background: rgba(26, 26, 26, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 100;
}

.navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 72px;
  max-width: 1200px;
  margin: 0 auto;
}

.navbar-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  gap: 12px;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  transition: all 0.3s ease;
}

.navbar-logo:hover {
  transform: translateY(-1px);
}

.logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar-menu {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-item {
  color: var(--text-secondary);
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.3s ease;
  position: relative;
}

.nav-item:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.nav-item.active {
  color: var(--accent-primary);
  background: rgba(139, 92, 246, 0.1);
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.theme-toggle {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}

.user-menu {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 14px;
}

.user-name {
  color: var(--text-primary);
  font-weight: 500;
  font-size: 14px;
}

.auth-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.menu-toggle span {
  width: 100%;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: all 0.3s ease;
}

@media (max-width: 1024px) {
  .user-name {
    display: none;
  }
}

@media (max-width: 768px) {
  .navbar-container {
    padding: 0 16px;
  }

.navbar-menu {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column;
    background: rgba(26, 26, 26, 0.98);
    backdrop-filter: blur(10px);
    padding: 24px;
    border-bottom: 1px solid var(--border-color);
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    z-index: 99;
    gap: 4px;
  }

.navbar-menu.active {
    transform: translateY(0);
  }

.nav-item {
    width: 100%;
    text-align: center;
    padding: 12px 16px;
  }

.menu-toggle {
    display: flex;
  }

.user-info {
    display: none;
  }

.auth-buttons {
    gap: 4px;
  }

.theme-toggle {
    order: -1;
  }
}

@media (max-width: 480px) {
  .navbar-container {
    padding: 0 12px;
    height: 64px;
  }

.logo-text {
    font-size: 18px;
  }

.navbar-menu {
    top: 64px;
    padding: 20px;
  }
}
[V0_FILE]typescriptreact:file="frontend/src/pages/Home.js" isMerged="true"
"use client"

import { Link } from "react-router-dom"
import { useAuth } from "../context/AuthContext"
import "./Home.css"

const Home = () => {
  const { user } = useAuth()

const features = [
    {
      icon: "🤖",
      title: "AI-Powered Voice Agents",
      description: "Advanced AI assistants that can handle complex conversations and provide intelligent responses.",
    },
    {
      icon: "📞",
      title: "Bulk Outbound Calling",
      description: "Efficiently reach multiple customers simultaneously with automated calling campaigns.",
    },
    {
      icon: "📊",
      title: "Real-time Analytics",
      description: "Monitor call performance, success rates, and customer interactions in real-time.",
    },
    {
      icon: "🔗",
      title: "Seamless Integration",
      description: "Easy integration with your existing CRM and business tools through our robust API.",
    },
    {
      icon: "🛡️",
      title: "Enterprise Security",
      description: "Bank-level security with end-to-end encryption and compliance with industry standards.",
    },
    {
      icon: "⚡",
      title: "Lightning Fast",
      description: "Ultra-low latency voice processing for natural, real-time conversations.",
    },
  ]

const stats = [
    { value: "99.9%", label: "Uptime" },
    { value: "50ms", label: "Avg Response Time" },
    { value: "10M+", label: "Calls Processed" },
    { value: "500+", label: "Happy Customers" },
  ]

return (
    <div className="home fade-in">
      {/* Hero Section */}
      <section className="hero">
        <div className="hero-background">
          <div className="hero-gradient"></div>
          <div className="hero-pattern"></div>
        </div>
        <div className="container">
          <div className="hero-content">
            <div className="hero-text">
              <h1 className="hero-title">
                Build Powerful
                <span className="gradient-text"> AI Voice Agents</span>
                <br />
                That Actually Work
              </h1>
              <p className="hero-description">
                Create intelligent voice assistants that can handle customer calls, book appointments, qualify leads,
                and more. No coding required.
              </p>
              <div className="hero-actions">
                {user ? (
                  <Link to="/dashboard" className="btn btn-primary btn-lg">
                    Go to Dashboard
                  </Link>
                ) : (
                  <>
                    <Link to="/signup" className="btn btn-primary btn-lg">
                      Get Started Free
                    </Link>
                    <Link to="/login" className="btn btn-outline btn-lg">
                      Sign In
                    </Link>
                  </>
                )}
              </div>
              <div className="hero-stats">
                {stats.map((stat, index) => (
                  <div key={index} className="stat-item">
                    <div className="stat-value">{stat.value}</div>
                    <div className="stat-label">{stat.label}</div>
                  </div>
                ))}
              </div>
            </div>
            <div className="hero-visual">
              <div className="hero-card">
                <div className="card-header">
                  <div className="card-dots">
                    <span></span>
                    <span></span>
                    <span></span>
                  </div>
                  <div className="card-title">Voice Agent Dashboard</div>
                </div>
                <div className="card-content">
                  <div className="demo-call">
                    <div className="call-status">
                      <div className="status-indicator pulse"></div>
                      <span>Call in Progress</span>
                    </div>
                    <div className="call-info">
                      <div className="caller-name">John Smith</div>
                      <div className="call-duration">00:02:34</div>
                    </div>
                  </div>
                  <div className="demo-transcript">
                    <div className="message ai">
                      <div className="message-avatar">🤖</div>
                      <div className="message-text">
                        Hi! I'm calling to follow up on your recent inquiry about our services. How can I help you
                        today?
                      </div>
                    </div>
                    <div className="message human">
                      <div className="message-text">Yes, I'm interested in learning more about your pricing plans.</div>
                      <div className="message-avatar">👤</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Features Section */}
      <section className="features">
        <div className="container">
          <div className="section-header">
            <h2 className="section-title">Everything you need to build amazing voice experiences</h2>
            <p className="section-description">
              Powerful features that make it easy to create, deploy, and manage AI voice agents at scale.
            </p>
          </div>
          <div className="features-grid">
            {features.map((feature, index) => (
              <div key={index} className="feature-card slide-up" style={{ animationDelay: `${index * 0.1}s` }}>
                <div className="feature-icon">{feature.icon}</div>
                <h3 className="feature-title">{feature.title}</h3>
                <p className="feature-description">{feature.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

{/* CTA Section */}
      <section className="cta">
        <div className="container">
          <div className="cta-content">
            <h2 className="cta-title">Ready to transform your customer interactions?</h2>
            <p className="cta-description">
              Join thousands of businesses using ScanKart AI to automate their voice communications.
            </p>
            {!user && (
              <div className="cta-actions">
                <Link to="/signup" className="btn btn-primary btn-lg">
                  Start Building Today
                </Link>
                <Link to="/login" className="btn btn-outline btn-lg">
                  Sign In
                </Link>
              </div>
            )}
          </div>
        </div>
      </section>
    </div>
  )
}

export default Home
[V0_FILE]typescriptreact:file="frontend/src/pages/Home.css" isMerged="true"
.home {
  width: 100%;
}

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

.hero-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
}

.hero-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0);
  background-size: 40px 40px;
}

.hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding: 80px 0;
}

.hero-title {
  font-size: 56px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 24px;
  color: var(--text-primary);
}

.gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-description {
  font-size: 20px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 40px;
  max-width: 500px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  margin-bottom: 60px;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  max-width: 400px;
  width: 100%;
  transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);
  transition: transform 0.3s ease;
}

.hero-card:hover {
  transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.card-dots {
  display: flex;
  gap: 6px;
}

.card-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
}

.card-dots span:nth-child(1) {
  background: #ef4444;
}

.card-dots span:nth-child(2) {
  background: #f59e0b;
}

.card-dots span:nth-child(3) {
  background: #10b981;
}

.card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.card-content {
  padding: 20px;
}

.demo-call {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: 8px;
  margin-bottom: 20px;
}

.call-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--success);
  font-weight: 500;
}

.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
}

.call-info {
  text-align: right;
}

.caller-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.call-duration {
  font-size: 12px;
  color: var(--text-secondary);
}

.demo-transcript {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.message {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.message.human {
  flex-direction: row-reverse;
}

.message-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

.message-text {
  background: var(--bg-secondary);
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-primary);
  max-width: 200px;
}

.message.ai .message-text {
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.2);
}

.features {
  padding: 120px 0;
  background: var(--bg-secondary);
}

.section-header {
  text-align: center;
  margin-bottom: 80px;
}

.section-title {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.section-description {
  font-size: 18px;
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.feature-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 32px;
  text-align: center;
  transition: all 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-lg);
}

.feature-icon {
  font-size: 48px;
  margin-bottom: 20px;
}

.feature-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.feature-description {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.cta {
  padding: 120px 0;
  background: var(--bg-primary);
}

.cta-content {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.cta-title {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.cta-description {
  font-size: 18px;
  color: var(--text-secondary);
  margin-bottom: 40px;
}

.cta-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
}

@media (max-width: 1024px) {
  .hero-content {
    grid-template-columns: 1fr;
    gap: 60px;
    text-align: center;
  }

.hero-title {
    font-size: 48px;
  }

.hero-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

.features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

.section-title {
    font-size: 36px;
  }

.cta-title {
    font-size: 36px;
  }
}

@media (max-width: 768px) {
  .hero {
    min-height: auto;
    padding: 40px 0;
  }

.hero-content {
    gap: 40px;
    padding: 40px 0;
  }

.hero-title {
    font-size: 36px;
  }

.hero-description {
    font-size: 18px;
  }

.hero-actions {
    flex-direction: column;
    align-items: center;
  }

.hero-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

.stat-value {
    font-size: 24px;
  }

.features {
    padding: 80px 0;
  }

.features-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

.section-header {
    margin-bottom: 60px;
  }

.section-title {
    font-size: 32px;
  }

.section-description {
    font-size: 16px;
  }

.cta {
    padding: 80px 0;
  }

.cta-title {
    font-size: 32px;
  }

.cta-description {
    font-size: 16px;
  }

.cta-actions {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 28px;
  }

.hero-description {
    font-size: 16px;
  }

.hero-stats {
    grid-template-columns: 1fr;
    gap: 16px;
  }

.section-title {
    font-size: 28px;
  }

.cta-title {
    font-size: 28px;
  }

.feature-card {
    padding: 24px;
  }

.hero-card {
    transform: none;
  }
}
[V0_FILE]typescriptreact:file="frontend/src/pages/Login.js" isMerged="true"
"use client"

import { useState } from "react"
import { Link, useNavigate } from "react-router-dom"
import { useAuth } from "../context/AuthContext"
import "./Auth.css"

const Login = () => {
  const [formData, setFormData] = useState({
    email: "",
    password: "",
  })
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState("")
  const { login } = useAuth()
  const navigate = useNavigate()

const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    })
  }

const handleSubmit = async (e) => {
    e.preventDefault()
    setLoading(true)
    setError("")

const result = await login(formData.email, formData.password)

if (result.success) {
      navigate("/dashboard")
    } else {
      setError(result.message)
    }

setLoading(false)
  }

const handleGoogleLogin = () => {
    // Implement Google OAuth
    console.log("Google login clicked")
  }

const handleGithubLogin = () => {
    // Implement GitHub OAuth
    console.log("GitHub login clicked")
  }

return (
    <div className="auth-page fade-in">
      <div className="auth-container">
        <div className="auth-card">
          <div className="auth-header">
            <h1 className="auth-title">Welcome back</h1>
            <p className="auth-subtitle">Sign in to your account to continue</p>
          </div>

{error && (
            <div className="alert alert-error">
              <p>{error}</p>
            </div>
          )}

<form onSubmit={handleSubmit} className="auth-form">
            <div className="form-group">
              <label htmlFor="email" className="form-label">
                Email
              </label>
              <input
                type="email"
                id="email"
                name="email"
                className="form-control"
                placeholder="Enter your email"
                value={formData.email}
                onChange={handleChange}
                required
              />
            </div>

<div className="form-group">
              <label htmlFor="password" className="form-label">
                Password
              </label>
              <input
                type="password"
                id="password"
                name="password"
                className="form-control"
                placeholder="Enter your password"
                value={formData.password}
                onChange={handleChange}
                required
              />
            </div>

<button type="submit" className="btn btn-primary auth-submit" disabled={loading}>
              {loading ? (
                <>
                  <div className="loading-spinner spin"></div>
                  <span>Signing in...</span>
                </>
              ) : (
                "Sign In"
              )}
            </button>
          </form>

<div className="auth-divider">
            <span>or continue with</span>
          </div>

<div className="oauth-buttons">
            <button className="btn btn-outline oauth-btn" onClick={handleGoogleLogin}>
              <svg width="20" height="20" viewBox="0 0 24 24">
                <path
                  fill="currentColor"
                  d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
                />
                <path
                  fill="currentColor"
                  d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
                />
                <path
                  fill="currentColor"
                  d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
                />
                <path
                  fill="currentColor"
                  d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
                />
              </svg>
              Google
            </button>

<button className="btn btn-outline oauth-btn" onClick={handleGithubLogin}>
              <svg width="20" height="20" viewBox="0 0 24 24">
                <path
                  fill="currentColor"
                  d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
                />
              </svg>
              GitHub
            </button>
          </div>

<div className="auth-footer">
            <p>
              Don't have an account?{" "}
              <Link to="/signup" className="auth-link">
                Sign up
              </Link>
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Login
[V0_FILE]typescriptreact:file="frontend/src/pages/Signup.js" isTerminated="true" isMerged="true"
"use client"

import { useState } from "react"
import { useNavigate } from "react-router-dom"
import { useAuth } from "../context/AuthContext"
import "./Auth.css"

const Signup = () => {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    password: "",
    confirmPassword: "",
  })
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState("")
  const { signup } = useAuth()
  const navigate = useNavigate()

const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    })
  }

const handleSubmit = async (e) => {
    e.preventDefault()
    setLoading(true)
    setError("")

if (formData.password !== formData.confirmPassword) {
      setError("Passwords do not match")
      setLoading(false)
      return
    }

if (formData.password.length < 6) {
      setError("Password must be at least 6 characters long")
      setLoading(false)
      return
    }

const result = await signup(formData.name, formData.email, formData.password)

if (result.success) {
      navigate("/dashboard")
    } else {
      setError(result.message)
    }

setLoading(false)
  }

const handleGoogleSignup = () => {
    // Implement Google OAuth
    console.log("Google signup clicked")
  }

const handleGithubSignup = () => {
    // Implement GitHub OAuth
    console.log("GitHub signup clicked")
  }

return (
    <div className="auth-page fade-in">
      <div className="auth-container">
        <div className="auth-card">
          <div className="auth-header">
            <h1 className="auth-title">Create your account</h1>
            <p className="auth-subtitle">Get started with ScanKart AI today</p>
          </div>

{error && (
            <div className="alert alert-error">
              <p>{error}</p>
            </div>
          )}

<div className="form-group">
              <label htmlFor="email" className="form-label">
                Email
              </label>
              <input
                type="email"
                id="email"
                name="email"
                className="form-control"
                placeholder="Enter your email"
                value={formData.email}
                onChange={handleChange}
                required
              />
            </div>

<div className="form-group">
              <label htmlFor="password" className="form-label">
                Password
              </label>
              <input
                type="password"
                id="password"
                name="password"
                className="form-control"
                placeholder="Create a password"
                value={formData.password}
                onChange={handleChange}
                required
              />
            </div>

<div className="form-group">
              <label htmlFor="confirmPassword" className="form-label">
                Confirm Password
              </label>
              <input
                type="password"
                id="confirmPassword"
                name="confirmPassword"
                className="form-control"
                placeholder="Confirm your password"
                value={formData.confirmPassword}
                onChange={handleChange}
                required
              />
            </div>

<button type="submit" className="btn btn-primary auth-submit" disabled={loading}>
              {loading ? (
                <>
                  <div className="loading-spinner spin"></div>
                  <span>Creating account...</span>
                </>
              ) : (
                "Create Account"
              )}
            </button>
          </form>

<div className="auth-divider">
            <span>or continue with</span>
          </div>

<div className="oauth-buttons">
            <button className="btn btn-outline oauth-btn" onClick={handleGoogleSignup}>
              <svg width="20" height="20" viewBox="0 0 24 24">
                <path
                  fill="currentColor"
                  d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
                />
                <path
                  fill="currentColor"
                  d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
                />
                <path
                  fill="currentColor"
                  d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
                />
                <path
                  fill="currentColor"
                  d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
                />
              </svg>
              Google
            </button>

<button className="btn btn-outline oauth-btn" onClick={handleGithubSignup}>
              <svg width="20" height="20" viewBox="0 0 24 24">
                <path
                  fill="currentColor"
                  d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 \
[V0_FILE]typescriptreact:file="backend/app.py" isFixed="true" isEdit="true" isQuickEdit="true"
import os
from flask import Flask, request, jsonify
from flask_cors import CORS
from pymongo import MongoClient
import requests
import json
from dotenv import load_dotenv

# Load environment variables
load_dotenv()

app = Flask(__name__)
CORS(app)

# MongoDB Setup
MONGO_URI = os.getenv("MONGO_URI")
mongo_client = MongoClient(MONGO_URI)
db = mongo_client["vapi_db"]
webhook_collection = db["webhook_data"]

# Vapi + Twilio Setup
VAPI_API_KEY = os.getenv("VAPI_API_KEY")
TWILIO_ACCOUNT_SID = os.getenv("TWILIO_ACCOUNT_SID")
TWILIO_AUTH_TOKEN = os.getenv("TWILIO_AUTH_TOKEN")
TWILIO_PHONE_NUMBER = os.getenv("TWILIO_PHONE_NUMBER")
ASSISTANT_ID = os.getenv("ASSISTANT_ID")
VAPI_BASE_URL = "https://api.vapi.ai"

vapi_headers = {
    "Authorization": f"Bearer {VAPI_API_KEY}",
    "Content-Type": "application/json"
}

# Placeholder for authentication and route protection logic.
# The provided updates describe significant changes to the application's
# routing and authentication, but do not include the actual code
# implementing these features.  Therefore, I am adding a placeholder
# comment here to indicate where this functionality would be implemented
# based on the description in the updates.  This would involve adding
# routes for login, signup, and dashboard, as well as middleware to
# protect routes requiring authentication.

# Authentication and Route Protection Logic Placeholder
# This section would include:
# - JWT authentication setup
# - Login and signup routes
# - OAuth integration (Google, GitHub)
# - Route protection middleware
# - Dashboard route

@app.route('/api/upload-file', methods=['POST'])
def upload_file():
    file = request.files.get('file')
    if not file:
        return jsonify({"success": False, "message": "No file uploaded"}), 400

files = {"file": (file.filename, file.stream, file.mimetype)}
    response = requests.post(
        f"{VAPI_BASE_URL}/file",
        headers={"Authorization": f"Bearer {VAPI_API_KEY}"},
        files=files
    )

print("Status code:", response.status_code)
    print("Response text:", response.text)

try:
        data = response.json()
    except Exception:
        return jsonify({"success": False, "error": "Invalid JSON response from API"}), 500

# If the API returns an error as a stringified JSON inside "error" key, try to parse it
    if "error" in data and isinstance(data["error"], str):
        try:
            import json
            data["error"] = json.loads(data["error"])
        except Exception:
            pass

if response.status_code == 200:
        # Return success with the data from API
        return jsonify({"success": True, "data": data})
    else:
        # Return failure with API's error message or full response text
        return jsonify({"success": False, "error": data}), 500

# Webhook endpoint to receive and store user data
@app.route('/api/webhook', methods=['POST'])
def webhook():
    data = request.get_json()
    required_fields = ['name', 'email', 'phoneNumber', 'details']

if not all(field in data for field in required_fields):
        return jsonify({"success": False, "message": "Missing required fields"}), 400

result = webhook_collection.insert_one({
        "name": data["name"],
        "email": data["email"],
        "phoneNumber": data["phoneNumber"],
        "details": data["details"]
    })

return jsonify({"success": True, "message": "Data stored successfully", "id": str(result.inserted_id)})

# Get Vapi assistant info
@app.route('/api/assistant-info', methods=['GET'])
def assistant_info():
    url = f"{VAPI_BASE_URL}/assistant/{ASSISTANT_ID}"
    response = requests.get(url, headers=vapi_headers)

if response.status_code == 200:
        assistant = response.json()
        return jsonify({
            "success": True,
            "assistant": {
                "id": assistant.get("id"),
                "name": assistant.get("name"),
                "description": assistant.get("description")
            }
        })
    else:
        return jsonify({
            "success": False,
            "message": "Failed to retrieve assistant information"
        }), 500

# Make outbound calls to multiple numbers
@app.route('/api/make-calls', methods=['POST'])
def make_calls():
    data = request.json
    phone_numbers = data.get('phoneNumbers', [])

if not phone_numbers:
        return jsonify({"success": False, "message": "No phone numbers provided"}), 400

phone_numbers = [num.strip() for num in phone_numbers if num and num.strip()]

if not phone_numbers:
        return jsonify({"success": False, "message": "No valid phone numbers found"}), 400

result = make_bulk_outbound_calls(phone_numbers)
    return jsonify(result)

def make_bulk_outbound_calls(phone_numbers):
    url = f"{VAPI_BASE_URL}/call"

validated_numbers = []
    for number in phone_numbers:
        if number and not number.startswith('+'):
            number = '+' + number
        validated_numbers.append(number)

customers = [{"number": number} for number in validated_numbers]

payload = {
        "assistantId": ASSISTANT_ID,
        "customers": customers,
        "phoneNumber": {
            "twilioPhoneNumber": TWILIO_PHONE_NUMBER,
            "twilioAccountSid": TWILIO_ACCOUNT_SID,
            "twilioAuthToken": TWILIO_AUTH_TOKEN
        }
    }

debug_payload = payload.copy()
    debug_payload["phoneNumber"]["twilioAuthToken"] = "REDACTED"
    app.logger.info(f"Request payload: {json.dumps(debug_payload, indent=2)}")

response = requests.post(url, headers=vapi_headers, json=payload)

if response.status_code == 201:
        call_data = response.json()
        return {"success": True, "message": "Bulk calls initiated", "data": call_data}
    else:
        app.logger.error(response.text)
        return make_individual_calls(validated_numbers)

def make_individual_calls(phone_numbers):
    results = []
    success_count = 0

for number in phone_numbers:
        url = f"{VAPI_BASE_URL}/call"
        payload = {
            "assistantId": ASSISTANT_ID,
            "customer": {"number": number},
            "phoneNumber": {
                "twilioPhoneNumber": TWILIO_PHONE_NUMBER,
                "twilioAccountSid": TWILIO_ACCOUNT_SID,
                "twilioAuthToken": TWILIO_AUTH_TOKEN
            }
        }

response = requests.post(url, headers=vapi_headers, json=payload)

if response.status_code == 201:
            results.append({"number": number, "success": True, "data": response.json()})
            success_count += 1
        else:
            results.append({"number": number, "success": False, "error": response.text})

return {
        "success": success_count > 0,
        "message": f"{success_count} out of {len(phone_numbers)} calls succeeded",
        "results": results
    }

if __name__ == '__main__':
    app.run(debug=True)</article></body></html>