TabOffice365.jsx

Go to the documentation of this file.

import { useState, useEffect } from 'react';
import { apiFetch } from '../../lib/api';
import PurchaseLicenseModal from '../../components/PurchaseLicenseModal';
 
export default function TabOffice365() {
    const [subscriptions, setSubscriptions] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    const [showPurchaseModal, setShowPurchaseModal] = useState(false);
 
    useEffect(() => {
        fetchSubscriptions();
    }, []);
 
    const fetchSubscriptions = async () => {
        setLoading(true);
        setError(null);
        try {
            const token = localStorage.getItem('token');
            const res = await apiFetch('/office365/subscriptions', {
                headers: { Authorization: `Bearer ${token}` }
            });
 
            if (res.ok) {
                const data = await res.json();
                setSubscriptions(data.subscriptions || []);
            } else {
                throw new Error('Failed to fetch subscriptions');
            }
        } catch (err) {
            console.error('Error fetching Office 365 subscriptions:', err);
            setError(err.message || 'Error loading subscriptions');
        } finally {
            setLoading(false);
        }
    };
 
    const formatCurrency = (amount) => {
        return new Intl.NumberFormat('en-AU', {
            style: 'currency',
            currency: 'AUD'
        }).format(amount || 0);
    };
 
    const formatDate = (dateString) => {
        if (!dateString) return 'N/A';
        return new Date(dateString).toLocaleDateString('en-AU');
    };
 
    return (
        <div style={{ padding: '20px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
                <div>
                    <h2>Office 365 Management</h2>
                    <p style={{ color: 'var(--text-secondary)', marginTop: '8px' }}>
                        Manage Microsoft 365 licenses through Pax8 integration
                    </p>
                </div>
                <button 
                    className="btn btn-primary" 
                    onClick={() => setShowPurchaseModal(true)}
                    disabled={loading}
                >
                    <span className="material-symbols-outlined">add</span>
                    Purchase License
                </button>
            </div>
 
            {error && (
                <div style={{ 
                    padding: '12px', 
                    background: '#fee', 
                    border: '1px solid #fcc', 
                    borderRadius: '4px', 
                    color: '#c33', 
                    marginBottom: '20px' 
                }}>
                    {error}
                </div>
            )}
 
            <div className="card" style={{ marginTop: '20px' }}>
                {loading ? (
                    <div style={{ textAlign: 'center', padding: '60px 20px', color: 'var(--text-secondary)' }}>
                        <div className="spinner" style={{ margin: '0 auto 16px' }}></div>
                        <p>Loading subscriptions...</p>
                    </div>
                ) : subscriptions.length === 0 ? (
                    <div style={{ textAlign: 'center', padding: '60px 20px', color: 'var(--text-secondary)' }}>
                        <span className="material-symbols-outlined" style={{ fontSize: '64px', marginBottom: '16px', display: 'block', opacity: 0.5 }}>
                            cloud_off
                        </span>
                        <h3 style={{ color: 'var(--text)', marginBottom: '8px' }}>No subscriptions yet</h3>
                        <p>Purchase Microsoft 365 licenses through Pax8 to get started</p>
                        <button 
                            className="btn btn-primary" 
                            onClick={() => setShowPurchaseModal(true)}
                            style={{ marginTop: '20px' }}
                        >
                            <span className="material-symbols-outlined">add</span>
                            Purchase Your First License
                        </button>
                    </div>
                ) : (
                    <table className="data-table">
                        <thead>
                            <tr>
                                <th>Product</th>
                                <th>Customer</th>
                                <th>Quantity</th>
                                <th>Monthly Cost</th>
                                <th>Status</th>
                                <th>Next Billing</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {subscriptions.map((sub) => (
                                <tr key={sub.subscription_id}>
                                    <td>
                                        <div>
                                            <strong>{sub.product_name || 'Unknown Product'}</strong>
                                            {sub.sku && (
                                                <div style={{ fontSize: '12px', color: '#888' }}>
                                                    SKU: {sub.sku}
                                                </div>
                                            )}
                                        </div>
                                    </td>
                                    <td>{sub.customer_name || 'N/A'}</td>
                                    <td>{sub.quantity || 0}</td>
                                    <td>{formatCurrency(sub.monthly_price)}</td>
                                    <td>
                                        <span className={`status-badge ${(sub.status || 'active').toLowerCase()}`}>
                                            {sub.status || 'Active'}
                                        </span>
                                    </td>
                                    <td>{formatDate(sub.next_billing_date)}</td>
                                    <td>
                                        <div className="action-buttons">
                                            <button 
                                                className="btn btn-sm" 
                                                title="View details"
                                                onClick={() => alert('View details coming soon')}
                                            >
                                                <span className="material-symbols-outlined">visibility</span>
                                            </button>
                                            <button 
                                                className="btn btn-sm"
                                                title="Edit subscription"
                                                onClick={() => alert('Edit functionality coming soon')}
                                            >
                                                <span className="material-symbols-outlined">edit</span>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                )}
            </div>
 
            {/* Purchase Modal */}
            {showPurchaseModal && (
                <PurchaseLicenseModal
                    onClose={() => setShowPurchaseModal(false)}
                    onSuccess={() => {
                        fetchSubscriptions();
                        setShowPurchaseModal(false);
                    }}
                />
            )}
        </div>
    );
}