MainLayout.jsx

Go to the documentation of this file.

import React, { useState, useEffect } from 'react';
import { apiFetch } from '../../lib/api';
import TenantSelector from '../TenantSelector';
import { useNavigate, useLocation } from 'react-router-dom';
import './MainLayout.css';
import '../../styles/themes.css';
import '../../styles/navigation.css';
import ThemeSelector from '../ThemeSelector';
 
// -------------------------
// JWT Helper
// -------------------------
function parseJwt(token) {
  try {
    const payload = token.split('.')[1];
    return JSON.parse(atob(payload.replace(/-/g, '+').replace(/_/g, '/')));
  } catch {
    return null;
  }
}
 
function MainLayout({ children }) {
  // -------------------------
  // Main Content Handler (reloads on tenant change)
  // -------------------------
  const token = localStorage.getItem('token');
  const jwtPayload = token ? parseJwt(token) : null;
  const tenantId = jwtPayload?.tenant_id || '';
 
 
 
  // -------------------------
  // JWT + Root Detection
  // -------------------------
  // token and jwtPayload already declared above
 
  const jwtIsRoot =
    jwtPayload &&
    (jwtPayload.role === 'root' || jwtPayload.role === 'msp');
  const isImpersonated = jwtPayload && jwtPayload.impersonated === true;
  const [isRoot, setIsRoot] = useState(jwtIsRoot);
 
  // Validate backend root status if not JWT-root
  useEffect(() => {
    async function checkRootStatus() {
      if (!token || jwtIsRoot) return;
      try {
        const res = await apiFetch('/tenants', {
          headers: {
            Authorization: `Bearer ${token}`,
            'X-Tenant-Subdomain': 'admin'
          }
        });
        setIsRoot(res.ok);
      } catch {
        setIsRoot(false);
      }
    }
    checkRootStatus();
  }, [token, jwtIsRoot]);
 
  // -------------------------
  // Tenant Impersonation
  // -------------------------
 
  const handleTenantChange = async (tid) => {
    try {
      const res = await apiFetch(`/auth/impersonate`, {
        method: 'POST',
        headers: { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' },
        body: JSON.stringify({ tenant_id: tid })
      });
      if (res.ok) {
        const data = await res.json();
        if (data.token) {
          localStorage.setItem('token', data.token);
          window.location.reload();
        }
      } else {
        alert('Failed to impersonate tenant');
      }
    } catch (err) {
      alert('Error impersonating tenant');
    }
  };
 
  // -------------------------
  // Navigation + Layout State
  // -------------------------
  const navigate = useNavigate();
  const location = useLocation();
  const [activeTab, setActiveTab] = useState('dashboard');
  const [showNotifications, setShowNotifications] = useState(false);
 
  const [companyName, setCompanyName] = useState('RMM+PSA');
 
  const navItems = [
    { id: 'dashboard', label: 'Dashboard', icon: 'dashboard', path: '/dashboard' },
    { id: 'tickets', label: 'Tickets', icon: 'confirmation_number', path: '/tickets' },
    { id: 'customers', label: 'Customers', icon: 'groups', path: '/customers' },
    { id: 'monitoring', label: 'Monitoring', icon: 'monitoring', path: '/monitoring' },
    { id: 'knowledge-base', label: 'Knowledge Base', icon: 'description', path: '/knowledge-base' },
    { id: 'contracts', label: 'Contracts', icon: 'contract_edit', path: '/contracts' },
    { id: 'products', label: 'Products', icon: 'inventory_2', path: '/products' },
    { id: 'services', label: 'Services', icon: 'cloud_circle', path: '/services' },
    { id: 'orders', label: 'Orders', icon: 'shopping_cart', path: '/orders' },
    { id: 'purchase-orders', label: 'Purchase Orders', icon: 'local_shipping', path: '/purchase-orders' },
    { id: 'invoices', label: 'Invoices', icon: 'receipt_long', path: '/invoices' },
    { id: 'reports', label: 'Reports', icon: 'analytics', path: '/reports' },
    { id: 'integrations', label: 'Integrations', icon: 'extension', path: '/integrations' },
    { id: 'settings', label: 'Settings', icon: 'settings', path: '/settings' }
  ];
 
  // Only show Tenants menu if root
  const navItemsWithTenants = isRoot
    ? [...navItems.slice(0, 12), { id: 'tenants', label: 'Tenants', icon: 'domain', path: '/tenants' }, ...navItems.slice(12)]
    : navItems;
 
  // -------------------------
  // Notifications
  // -------------------------
  const [notifications, setNotifications] = useState([]);
 
  const loadNotifications = async () => {
    if (!token) return;
    try {
      const res = await apiFetch('/notifications', {
        headers: { Authorization: `Bearer ${token}` }
      });
      if (res.ok) {
        const data = await res.json();
        setNotifications(data.slice(0, 10));
      }
    } catch { }
  };
 
  useEffect(() => {
    loadNotifications();
 
    // Listen for new notifications
    const handleNotificationCreated = () => {
      loadNotifications();
    };
 
    window.addEventListener('notificationCreated', handleNotificationCreated);
 
    return () => {
      window.removeEventListener('notificationCreated', handleNotificationCreated);
    };
  }, [token]);
 
  // -------------------------
  // Active Tab Detection
  // -------------------------
  useEffect(() => {
    const current = navItems.find((n) =>
      location.pathname.startsWith(n.path)
    );
    setActiveTab(current ? current.id : 'dashboard');
  }, [location.pathname, navItems]);
 
  // -------------------------
  // Fetch Company Name
  // -------------------------
  useEffect(() => {
    async function fetchCompanyName() {
      if (!token) return;
      try {
        const res = await apiFetch('/settings', {
          headers: { Authorization: `Bearer ${token}` }
        });
        if (!res.ok) return;
        const settings = await res.json();
        if (settings?.general?.companyName) {
          setCompanyName(settings.general.companyName);
        }
      } catch (err) {
        console.error('Failed to fetch settings:', err);
      }
    }
    fetchCompanyName();
    const handleSettingsUpdate = (event) => {
      if (event.detail?.general?.companyName) {
        setCompanyName(event.detail.general.companyName);
      }
    };
    const handleTenantChangeEvent = () => fetchCompanyName();
    window.addEventListener('settingsUpdated', handleSettingsUpdate);
    window.addEventListener('tenantChanged', handleTenantChangeEvent);
    return () => {
      window.removeEventListener('settingsUpdated', handleSettingsUpdate);
      window.removeEventListener('tenantChanged', handleTenantChangeEvent);
    };
  }, [token, tenantId]);
 
  // -------------------------
  // Logout
  // -------------------------
  const handleLogout = () => {
    localStorage.removeItem('token');
    navigate('/');
  };
 
  // -------------------------
  // MAIN CONTENT RENDER
  // -------------------------
  const renderContent = () => (
    <div className={`layout${isRoot ? ' with-tenant-selector' : ''}`}>
      <header className="header">
        <div className="logo">
          <span className="logo-text">{companyName}</span>
        </div>
 
        <div className="header-right">
          <ThemeSelector />
 
          {/* Notifications */}
          <div className="notifications">
            <button
              className="notification-btn"
              onClick={() => setShowNotifications(!showNotifications)}
            >
              <span className="material-symbols-outlined">notifications</span>
              {notifications.filter((n) => !n.is_read).length > 0 && (
                <span className="badge">
                  {notifications.filter((n) => !n.is_read).length}
                </span>
              )}
            </button>
 
            {showNotifications && (
              <div className="notifications-dropdown">
                {notifications.map((note) => (
                  <div
                    key={note.notification_id}
                    className={`notification-item ${note.type}`}
                  >
                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                      <div>{note.title}</div>
                      <div style={{ fontSize: 12 }}>
                        {new Date(note.created_at).toLocaleString()}
                      </div>
                    </div>
                    <div style={{ marginTop: 6 }}>{note.message}</div>
 
                    {!note.is_read && (
                      <button
                        onClick={async () => {
                          try {
                            await apiFetch(
                              `/notifications/${note.notification_id}/mark-read`,
                              {
                                method: 'PUT',
                                headers: { Authorization: `Bearer ${token}` }
                              }
                            );
                            setNotifications((prev) =>
                              prev.map((n) =>
                                n.notification_id === note.notification_id
                                  ? { ...n, is_read: true }
                                  : n
                              )
                            );
                          } catch (err) {
                            console.error(err);
                          }
                        }}
                      >
                        Mark read
                      </button>
                    )}
                  </div>
                ))}
                <div style={{ padding: 8, textAlign: 'center' }}>
                  <a href="/notifications">View all</a>
                </div>
              </div>
            )}
          </div>
 
          {/* User Info */}
          <div className="user-info">
            <span className="user-name">
              {jwtPayload?.name || `User ${jwtPayload?.user_id || ''}`}
              {jwtPayload?.role && ` (${jwtPayload.role})`}
            </span>
            <button onClick={handleLogout} className="logout-btn">
              Logout
            </button>
          </div>
        </div>
      </header>
 
      <div className="main">
        {/* Sidebar Navigation */}
        <nav className="sidebar">
          {navItemsWithTenants.map((item) => (
            <button
              key={item.id}
              className={`nav-item ${activeTab === item.id ? 'active' : ''}`}
              onClick={() => {
                setActiveTab(item.id);
                navigate(item.path);
              }}
            >
              <span className="nav-icon material-symbols-outlined">{item.icon}</span>
              <span className="nav-label">{item.label}</span>
            </button>
          ))}
        </nav>
 
        {/* Page Content */}
        <main className="content" key={tenantId}>
          {typeof children === 'function'
            ? children({ tenantId, onTenantChange: handleTenantChange })
            : children}
        </main>
      </div>
    </div>
  );
 
  // -------------------------
  // RENDER WRAPPER
  // -------------------------
  return (
    <div className="main-layout-container">
      {(isRoot || isImpersonated) && (
        <div className="tenant-selector-bar">
          <TenantSelector
            selectedTenantId={tenantId}
            onTenantChange={handleTenantChange}
          />
        </div>
      )}
      {renderContent()}
    </div>
  );
}
 
export default MainLayout;