Services.jsx

Go to the documentation of this file.

import { useState, useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import MainLayout from '../components/Layout/MainLayout';
import { ServicesSidebar } from './ServicesSidebar';
import TabDomains from './tabs/TabDomains';
import DomainRequestsTable from './tabs/domains/DomainRequestsTable';
import TabOffice365 from './tabs/TabOffice365';
import TabHosting from './tabs/TabHosting';
import TabDatabases from './tabs/TabDatabases';
import TabServers from './tabs/TabServers';
import TabAppServices from './tabs/TabAppServices';
import './Services.css';
 
export default function Services() {
    const location = useLocation();
    const [activeTab, setActiveTab] = useState('domains');
 
    // Check if user is root tenant admin
    const token = localStorage.getItem('token');
    const parseJwt = (token) => {
        try {
            const payload = token.split('.')[1];
            return JSON.parse(atob(payload.replace(/-/g, '+').replace(/_/g, '/')));
        } catch {
            return null;
        }
    };
    const jwtPayload = token ? parseJwt(token) : null;
    const isRootTenant = jwtPayload?.is_msp || false;
 
    // Handle URL query parameter for tab
    useEffect(() => {
        const params = new URLSearchParams(location.search);
        const tab = params.get('tab');
        if (tab) {
            setActiveTab(tab);
        }
    }, [location.search]);
 
    return (
        <MainLayout>
            <div className="services-page-layout">
                {/* Page Header */}
                <div className="services-header">
                    <h1>Services Management</h1>
                    <p className="page-description">Manage domains, Office 365 licenses, and web hosting applications</p>
                </div>
 
                {/* Body with Sidebar and Content */}
                <div className="services-body">
                    <ServicesSidebar 
                        selected={activeTab} 
                        onSelect={setActiveTab}
                        isRootTenant={isRootTenant}
                    />
                    
                    <div className="services-content">
                        {activeTab === 'domains' && <TabDomains />}
                        {activeTab === 'domain-requests' && isRootTenant && <DomainRequestsTable />}
                        {activeTab === 'apps' && <TabAppServices />}
                        {activeTab === 'office365' && <TabOffice365 />}
                        {activeTab === 'hosting' && <TabHosting />}
                        {activeTab === 'databases' && <TabDatabases />}
                        {activeTab === 'email' && (
                            <div className="card">
                                <p>Email services management coming soon.</p>
                            </div>
                        )}
                        {activeTab === 'servers' && <TabServers />}
                    </div>
                </div>
            </div>
        </MainLayout>
    );
}