205 lines
8.4 KiB
TypeScript
205 lines
8.4 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
import { CompanyTable } from './components/CompanyTable'
|
|
import { ContactsTable } from './components/ContactsTable' // NEW
|
|
import { ImportWizard } from './components/ImportWizard'
|
|
import { Inspector } from './components/Inspector'
|
|
import { RoboticsSettings } from './components/RoboticsSettings'
|
|
import { LayoutDashboard, UploadCloud, RefreshCw, Settings, Users, Building, Sun, Moon, Activity } from 'lucide-react'
|
|
import clsx from 'clsx'
|
|
|
|
// Base URL detection (Production vs Dev)
|
|
const API_BASE = import.meta.env.BASE_URL === '/ce/' ? '/ce/api' : '/api';
|
|
|
|
function App() {
|
|
const [refreshKey, setRefreshKey] = useState(0)
|
|
const [isImportOpen, setIsImportOpen] = useState(false)
|
|
const [isSettingsOpen, setIsSettingsOpen] = useState(false)
|
|
const [selectedCompanyId, setSelectedCompanyId] = useState<number | null>(null)
|
|
const [selectedContactId, setSelectedContactId] = useState<number | null>(null)
|
|
const [backendVersion, setBackendVersion] = useState('');
|
|
|
|
// Navigation State
|
|
const [view, setView] = useState<'companies' | 'contacts'>('companies')
|
|
|
|
// Theme State
|
|
const [theme, setTheme] = useState<'dark' | 'light'>(() => {
|
|
if (typeof window !== 'undefined' && window.localStorage) {
|
|
return localStorage.getItem('theme') as 'dark' | 'light' || 'dark'
|
|
}
|
|
return 'dark'
|
|
})
|
|
|
|
useEffect(() => {
|
|
if (theme === 'dark') {
|
|
document.documentElement.classList.add('dark')
|
|
} else {
|
|
document.documentElement.classList.remove('dark')
|
|
}
|
|
localStorage.setItem('theme', theme)
|
|
}, [theme])
|
|
|
|
useEffect(() => {
|
|
fetch(`${API_BASE}/health`)
|
|
.then(res => res.json())
|
|
.then(data => setBackendVersion(data.version || ''))
|
|
.catch(() => setBackendVersion('N/A'))
|
|
}, [])
|
|
|
|
const toggleTheme = () => setTheme(prev => prev === 'dark' ? 'light' : 'dark')
|
|
|
|
const handleCompanySelect = (id: number) => {
|
|
setSelectedCompanyId(id)
|
|
setSelectedContactId(null)
|
|
}
|
|
|
|
const handleCloseInspector = () => {
|
|
setSelectedCompanyId(null)
|
|
setSelectedContactId(null)
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-200 font-sans transition-colors">
|
|
<ImportWizard
|
|
isOpen={isImportOpen}
|
|
onClose={() => setIsImportOpen(false)}
|
|
apiBase={API_BASE}
|
|
onSuccess={() => setRefreshKey(k => k + 1)}
|
|
/>
|
|
|
|
<RoboticsSettings
|
|
isOpen={isSettingsOpen}
|
|
onClose={() => setIsSettingsOpen(false)}
|
|
apiBase={API_BASE}
|
|
/>
|
|
|
|
<Inspector
|
|
companyId={selectedCompanyId}
|
|
initialContactId={selectedContactId}
|
|
onClose={handleCloseInspector}
|
|
apiBase={API_BASE}
|
|
/>
|
|
|
|
{/* Header */}
|
|
<header className="border-b border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/50 sticky top-0 z-10 backdrop-blur-md">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 bg-blue-600 rounded-lg">
|
|
<LayoutDashboard className="h-6 w-6 text-white" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-xl font-bold text-slate-900 dark:text-white tracking-tight">Company Explorer</h1>
|
|
<p className="text-xs text-blue-600 dark:text-blue-400 font-medium">ROBOTICS EDITION {backendVersion && <span className="text-slate-500 dark:text-slate-600 ml-2">v{backendVersion}</span>}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 md:gap-4">
|
|
{/* View Switcher */}
|
|
<div className="hidden md:flex bg-slate-100 dark:bg-slate-800 rounded-lg p-1">
|
|
<button
|
|
onClick={() => setView('companies')}
|
|
className={clsx("px-3 py-1.5 rounded-md text-sm font-medium transition-all flex items-center gap-2", view === 'companies' ? "bg-white dark:bg-slate-700 shadow text-blue-600 dark:text-white" : "text-slate-500 hover:text-slate-900 dark:hover:text-slate-300")}
|
|
>
|
|
<Building className="h-4 w-4" /> Companies
|
|
</button>
|
|
<button
|
|
onClick={() => setView('contacts')}
|
|
className={clsx("px-3 py-1.5 rounded-md text-sm font-medium transition-all flex items-center gap-2", view === 'contacts' ? "bg-white dark:bg-slate-700 shadow text-blue-600 dark:text-white" : "text-slate-500 hover:text-slate-900 dark:hover:text-slate-300")}
|
|
>
|
|
<Users className="h-4 w-4" /> Contacts
|
|
</button>
|
|
</div>
|
|
|
|
<div className="h-6 w-px bg-slate-300 dark:bg-slate-700 mx-2 hidden md:block"></div>
|
|
|
|
<button
|
|
onClick={toggleTheme}
|
|
className="p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-full transition-colors text-slate-500 dark:text-slate-400"
|
|
title="Toggle Theme"
|
|
>
|
|
{theme === 'dark' ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
|
|
</button>
|
|
|
|
<a
|
|
href="/connector/dashboard"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-full transition-colors text-slate-500 dark:text-slate-400"
|
|
title="Connector Status Dashboard"
|
|
>
|
|
<Activity className="h-5 w-5" />
|
|
</a>
|
|
|
|
<button
|
|
onClick={() => setIsSettingsOpen(true)}
|
|
className="p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-full transition-colors text-slate-500 dark:text-slate-400"
|
|
title="Configure Robotics Logic"
|
|
>
|
|
<Settings className="h-5 w-5" />
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => setRefreshKey(k => k + 1)}
|
|
className="p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-full transition-colors text-slate-500 dark:text-slate-400"
|
|
title="Refresh Data"
|
|
>
|
|
<RefreshCw className="h-5 w-5" />
|
|
</button>
|
|
|
|
{view === 'companies' && (
|
|
<button
|
|
className="hidden md:flex items-center gap-2 bg-blue-600 hover:bg-blue-500 text-white px-4 py-2 rounded-md font-medium text-sm transition-all shadow-lg shadow-blue-900/20"
|
|
onClick={() => setIsImportOpen(true)}
|
|
>
|
|
<UploadCloud className="h-4 w-4" />
|
|
Import List
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Nav */}
|
|
<div className="md:hidden border-t border-slate-200 dark:border-slate-800 flex">
|
|
<button
|
|
onClick={() => setView('companies')}
|
|
className={clsx("flex-1 py-3 text-sm font-medium flex justify-center items-center gap-2 border-b-2", view === 'companies' ? "border-blue-500 text-blue-600 dark:text-blue-400" : "border-transparent text-slate-500")}
|
|
>
|
|
<Building className="h-4 w-4" /> Companies
|
|
</button>
|
|
<button
|
|
onClick={() => setView('contacts')}
|
|
className={clsx("flex-1 py-3 text-sm font-medium flex justify-center items-center gap-2 border-b-2", view === 'contacts' ? "border-blue-500 text-blue-600 dark:text-blue-400" : "border-transparent text-slate-500")}
|
|
>
|
|
<Users className="h-4 w-4" /> Contacts
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Main Content */}
|
|
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 h-[calc(100vh-4rem)]">
|
|
|
|
<div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl overflow-hidden shadow-sm dark:shadow-xl h-full">
|
|
{view === 'companies' ? (
|
|
<CompanyTable
|
|
refreshKey={refreshKey}
|
|
apiBase={API_BASE}
|
|
onRowClick={handleCompanySelect}
|
|
onImportClick={() => setIsImportOpen(true)}
|
|
/>
|
|
) : (
|
|
<ContactsTable
|
|
apiBase={API_BASE}
|
|
onCompanyClick={(id) => { setSelectedCompanyId(id); setView('companies'); }}
|
|
onContactClick={(companyId, contactId) => {
|
|
setSelectedCompanyId(companyId);
|
|
setSelectedContactId(contactId);
|
|
// setView('companies')? No, we stay in context of 'Contacts' but Inspector opens
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default App |