FM / components

/home/techb158/balavpn.abdallabala.com/src/components/

/home/techb158/balavpn.abdallabala.com/src/components

Name	Size	Mode	Actions
AppShell.jsx	3376	0644	edit dl rm
ErrorBoundary.jsx	951	0644	edit dl rm
LogoutButton.jsx	395	0644	edit dl rm

Edit: /home/techb158/balavpn.abdallabala.com/src/components/AppShell.jsx (3376B)

'use client';

import { useEffect, useState } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { getSession, logout } from '../lib/api-client';

const NAV_ITEMS = [
  { label: 'Overview', tab: 'Overview', icon: '◇' },
  { label: 'Projects', tab: 'Projects', icon: '▤' },
  { label: 'Risks', tab: 'Risks', icon: '⚠' },
  { label: 'Mitigations', tab: 'Mitigations', icon: '●' },
  { label: 'Gate', tab: 'Gate', icon: '⊞' },
  { label: 'Indicators', tab: 'Indicators', icon: '▦' },
  { label: 'Experiments', tab: 'Experiments', icon: '⚗' },
  { label: 'Reports', tab: 'Reports', icon: '◇' },
  { label: 'Integrations', tab: 'Integrations', icon: '⇆' },
  { label: 'Audit', tab: 'Audit', icon: '📋' },
  { label: 'Members', tab: 'Members', icon: '👥' },
];

export default function AppShell({ children }) {
  const [user, setUser] = useState(null);
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [loading, setLoading] = useState(true);
  const [platformRole, setPlatformRole] = useState('NONE');
  const router = useRouter();
  const searchParams = useSearchParams();
  const currentTab = searchParams.get('tab') || 'Overview';

useEffect(() => {
    getSession().then(u => {
      if (!u) { router.replace('/login'); return; }
      setUser(u);
      setPlatformRole(u.platformRole || 'NONE');
      setLoading(false);
    });
  }, [router]);

const isSuper = platformRole === 'SUPER_ADMIN' || platformRole === 'SUPER_OWNER';
  const isSuperOwner = platformRole === 'SUPER_OWNER';

if (loading) {
    return (
      <div className="shell-loading">
        <div className="spinner" />
      </div>
    );
  }

const navItems = isSuper
    ? [{ label: 'Admin', tab: 'Admin', icon: '⚙' }]
    : NAV_ITEMS;

return (
    <div className="app-shell">
      <button className="sidebar-toggle" onClick={() => setSidebarOpen(!sidebarOpen)}>
        {sidebarOpen ? '✕' : '☰'}
      </button>

<aside className={`sidebar ${sidebarOpen ? 'open' : ''}`}>
        <div className="sidebar-brand">COSMIC</div>
        <div className="sidebar-user">
          <div className="sidebar-user-name">{user.displayName}</div>
          <div className="sidebar-user-email">{user.email}</div>
          {isSuper && <div className="muted" style={{ fontSize: 11, marginTop: 2 }}>{platformRole === 'SUPER_OWNER' ? 'Super Owner' : 'Super Admin'}</div>}
        </div>
        <nav className="sidebar-nav">
          {navItems.map(item => {
            const active = currentTab === item.tab;
            return (
              <a
                key={item.tab}
                href={`/dashboard?tab=${item.tab}`}
                className={`sidebar-link ${active ? 'active' : ''}`}
                onClick={e => { e.preventDefault(); setSidebarOpen(false); router.push(`/dashboard?tab=${item.tab}`); }}
              >
                <span className="sidebar-icon">{item.icon}</span>
                {item.label}
              </a>
            );
          })}
        </nav>
        <div className="sidebar-footer">
          <button className="sidebar-logout" onClick={logout}>Sign out</button>
        </div>
      </aside>

{sidebarOpen && <div className="sidebar-overlay" onClick={() => setSidebarOpen(false)} />}

<main className="app-main">
        {children}
      </main>
    </div>
  );
}

cmd: