# AFINET Portal - Frontend Integration Guide

## 🎯 **Updated API Endpoints for Unlimited Services**

### **Dashboard Integration**
```javascript
// Updated dashboard API call
const getDashboard = async () => {
  const response = await fetch('/api/dashboard', {
    headers: { 'Authorization': `Bearer ${token}` }
  });
  const data = await response.json();
  
  // New data structure includes:
  // - services.all_unlimited: true
  // - stats.data_usage: "Unlimited"
  // - services.services[].is_unlimited: true
  // - account_summary.payment_status: "current" | "overdue"
};
```

### **Odoo Integration Endpoints**
```javascript
// Get customer services (unlimited)
GET /api/odoo/services
// Response: { services: [{ name, type, status, speed, is_unlimited: true }] }

// Get billing history
GET /api/odoo/invoices
// Response: { invoices: [...], summary: { total_amount, unpaid_invoices } }

// Get payment history  
GET /api/odoo/payments
// Response: { payments: [...], summary: { total_payments, total_amount } }

// Get support tickets
GET /api/odoo/tickets
// Response: { tickets: [...], summary: { total_tickets, open_tickets } }

// Create support ticket
POST /api/odoo/tickets
// Body: { subject, description, priority, category }

// Get integrated dashboard
GET /api/odoo/dashboard
// Response: Complete dashboard with Odoo data
```

## 🔄 **Frontend Updates Required**

### **1. Dashboard Components**

#### **Remove Data Balance Display**
```javascript
// OLD - Remove these components
<DataUsageCard balance={customer.data_balance} limit={customer.data_limit} />
<DataBalanceChart />

// NEW - Replace with unlimited service display
<UnlimitedServiceCard services={dashboard.services} />
<ServiceHealthStatus uptime={dashboard.stats.uptime} />
```

#### **Update Service Cards**
```javascript
// NEW Service Card Component
const ServiceCard = ({ service }) => (
  <div className="service-card">
    <h3>{service.name}</h3>
    <div className="service-type">{service.type}</div>
    <div className="speed">{service.speed}</div>
    <div className="unlimited-badge">
      {service.is_unlimited ? "Unlimited Data" : "Limited"}
    </div>
    <div className="status">{service.status}</div>
    <div className="price">${service.monthly_price}/month</div>
  </div>
);
```

### **2. Billing Integration**

#### **Odoo Invoice Display**
```javascript
const BillingPage = () => {
  const [invoices, setInvoices] = useState([]);
  const [payments, setPayments] = useState([]);
  
  useEffect(() => {
    // Get invoices from Odoo
    fetch('/api/odoo/invoices')
      .then(res => res.json())
      .then(data => setInvoices(data.data));
      
    // Get payments from Odoo  
    fetch('/api/odoo/payments')
      .then(res => res.json())
      .then(data => setPayments(data.data));
  }, []);
  
  return (
    <div>
      <InvoiceList invoices={invoices} />
      <PaymentHistory payments={payments} />
      <OutstandingBalance amount={customer.outstanding_balance} />
    </div>
  );
};
```

### **3. Support Integration**

#### **Integrated Ticket System**
```javascript
const SupportPage = () => {
  const [tickets, setTickets] = useState([]);
  
  const createTicket = async (ticketData) => {
    const response = await fetch('/api/odoo/tickets', {
      method: 'POST',
      headers: { 
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${token}`
      },
      body: JSON.stringify(ticketData)
    });
    
    if (response.ok) {
      // Refresh tickets list
      loadTickets();
    }
  };
  
  return (
    <div>
      <CreateTicketForm onSubmit={createTicket} />
      <TicketList tickets={tickets} />
    </div>
  );
};
```

### **4. Service Management**

#### **Unlimited Service Display**
```javascript
const ServicesPage = () => {
  const [services, setServices] = useState([]);
  
  useEffect(() => {
    fetch('/api/odoo/services')
      .then(res => res.json())
      .then(data => {
        setServices(data.data);
        // All services are unlimited - update UI accordingly
      });
  }, []);
  
  return (
    <div>
      <h2>Your Unlimited Services</h2>
      {services.map(service => (
        <ServiceCard key={service.id} service={service} />
      ))}
      <UnlimitedDataBanner />
    </div>
  );
};
```

## 🎨 **UI/UX Updates**

### **1. Remove Data Balance Elements**
- Remove data usage charts
- Remove data balance warnings
- Remove data top-up buttons
- Remove data limit notifications

### **2. Add Unlimited Service Elements**
```css
.unlimited-badge {
  background: linear-gradient(45deg, #4CAF50, #8BC34A);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
}

.service-health {
  display: flex;
  align-items: center;
  gap: 8px;
}

.service-health.operational {
  color: #4CAF50;
}

.unlimited-banner {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  margin: 20px 0;
}
```

### **3. Update Package Selection**
```javascript
const PackageCard = ({ package: pkg }) => (
  <div className="package-card">
    <h3>{pkg.name}</h3>
    <div className="speed">{pkg.speed_mbps}Mbps</div>
    <div className="unlimited-badge">Unlimited Data</div>
    <div className="price">${pkg.monthly_price}/month</div>
    <div className="features">
      {pkg.features.map(feature => (
        <div key={feature} className="feature">✓ {feature}</div>
      ))}
    </div>
    <button className="select-package">Select Package</button>
  </div>
);
```

## 🔧 **Implementation Steps**

### **Phase 1: Dashboard Updates**
1. Update dashboard API calls to use new endpoints
2. Remove data balance components
3. Add unlimited service displays
4. Update service health indicators

### **Phase 2: Billing Integration**
1. Integrate Odoo invoice display
2. Add payment history from Odoo
3. Update outstanding balance display
4. Add proof of payment upload

### **Phase 3: Support Integration**
1. Integrate ticket creation with Odoo
2. Display tickets from Odoo
3. Add ticket status tracking
4. Implement priority indicators

### **Phase 4: Service Management**
1. Display active services from Odoo
2. Add service status monitoring
3. Implement service health checks
4. Add usage monitoring (future SolarWinds integration)

## 🚀 **Testing Checklist**

- [ ] Dashboard shows unlimited services
- [ ] No data balance elements visible
- [ ] Odoo invoices display correctly
- [ ] Payment history loads from Odoo
- [ ] Support tickets sync with Odoo
- [ ] Service status updates in real-time
- [ ] Outstanding balance shows Odoo data
- [ ] All packages show "Unlimited Data"

## 📱 **Mobile Responsiveness**

Ensure all new components are mobile-friendly:
- Unlimited service cards stack properly
- Billing tables scroll horizontally
- Support ticket forms are touch-friendly
- Service health indicators are clearly visible

The integration maintains backward compatibility while adding comprehensive Odoo functionality!