109 lines
4.9 KiB
TypeScript
109 lines
4.9 KiB
TypeScript
import React, { useState } from 'react';
|
||
import { Sidebar } from './components/layout/Sidebar';
|
||
import { BoardDashboard } from './components/pages/BoardDashboard';
|
||
import { MemberList } from './components/pages/MemberList';
|
||
|
||
function App() {
|
||
const [currentPage, setCurrentPage] = useState('dashboard');
|
||
|
||
const renderPage = () => {
|
||
switch (currentPage) {
|
||
case 'dashboard':
|
||
return <BoardDashboard />;
|
||
case 'members':
|
||
return <MemberList />;
|
||
case 'dues':
|
||
return (
|
||
<div className="flex items-center justify-center h-96">
|
||
<div className="text-center space-y-4">
|
||
<div className="w-24 h-24 bg-gradient-to-br from-red-100 to-red-200 rounded-full flex items-center justify-center mx-auto">
|
||
<span className="text-4xl">🚧</span>
|
||
</div>
|
||
<h2 className="text-3xl font-bold text-gray-900">Dues Management</h2>
|
||
<p className="text-gray-600 max-w-md">This premium feature is currently under development. Stay tuned for advanced dues tracking capabilities.</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
case 'events':
|
||
return (
|
||
<div className="flex items-center justify-center h-96">
|
||
<div className="text-center space-y-4">
|
||
<div className="w-24 h-24 bg-gradient-to-br from-red-100 to-red-200 rounded-full flex items-center justify-center mx-auto">
|
||
<span className="text-4xl">📅</span>
|
||
</div>
|
||
<h2 className="text-3xl font-bold text-gray-900">Events</h2>
|
||
<p className="text-gray-600 max-w-md">Event management system coming soon with calendar integration and RSVP tracking.</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
case 'reports':
|
||
return (
|
||
<div className="flex items-center justify-center h-96">
|
||
<div className="text-center space-y-4">
|
||
<div className="w-24 h-24 bg-gradient-to-br from-red-100 to-red-200 rounded-full flex items-center justify-center mx-auto">
|
||
<span className="text-4xl">📊</span>
|
||
</div>
|
||
<h2 className="text-3xl font-bold text-gray-900">Reports</h2>
|
||
<p className="text-gray-600 max-w-md">Advanced analytics and reporting dashboard in development.</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
case 'documents':
|
||
return (
|
||
<div className="flex items-center justify-center h-96">
|
||
<div className="text-center space-y-4">
|
||
<div className="w-24 h-24 bg-gradient-to-br from-red-100 to-red-200 rounded-full flex items-center justify-center mx-auto">
|
||
<span className="text-4xl">📄</span>
|
||
</div>
|
||
<h2 className="text-3xl font-bold text-gray-900">Documents</h2>
|
||
<p className="text-gray-600 max-w-md">Document management system with secure file sharing capabilities.</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
case 'notifications':
|
||
return (
|
||
<div className="flex items-center justify-center h-96">
|
||
<div className="text-center space-y-4">
|
||
<div className="w-24 h-24 bg-gradient-to-br from-red-100 to-red-200 rounded-full flex items-center justify-center mx-auto">
|
||
<span className="text-4xl">🔔</span>
|
||
</div>
|
||
<h2 className="text-3xl font-bold text-gray-900">Notifications</h2>
|
||
<p className="text-gray-600 max-w-md">Smart notification center with customizable alerts and reminders.</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
case 'settings':
|
||
return (
|
||
<div className="flex items-center justify-center h-96">
|
||
<div className="text-center space-y-4">
|
||
<div className="w-24 h-24 bg-gradient-to-br from-red-100 to-red-200 rounded-full flex items-center justify-center mx-auto">
|
||
<span className="text-4xl">⚙️</span>
|
||
</div>
|
||
<h2 className="text-3xl font-bold text-gray-900">Settings</h2>
|
||
<p className="text-gray-600 max-w-md">System configuration and user preferences management.</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
default:
|
||
return <BoardDashboard />;
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="flex min-h-screen bg-gradient-to-br from-red-50 via-white to-red-100/30 relative overflow-hidden">
|
||
{/* Background Elements */}
|
||
<div className="absolute top-0 left-1/4 w-96 h-96 bg-red-200/20 rounded-full blur-3xl animate-pulse-slow"></div>
|
||
<div className="absolute bottom-0 right-1/4 w-64 h-64 bg-red-300/20 rounded-full blur-2xl animate-float"></div>
|
||
|
||
<Sidebar currentPage={currentPage} onPageChange={setCurrentPage} />
|
||
|
||
<div className="flex-1 overflow-hidden relative">
|
||
<main className="max-w-7xl mx-auto px-10 py-12 relative z-10">
|
||
{renderPage()}
|
||
</main>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default App; |