78 lines
2.3 KiB
TypeScript
78 lines
2.3 KiB
TypeScript
import * as React from 'react';
|
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
|
import { AuthProvider, useAuth, AuthPage } from "../auth/src";
|
|
import AdminLayout from "./components/AdminLayout";
|
|
import ResourceView from "./components/ResourceView";
|
|
import { config } from "./config";
|
|
import { Box, Typography, Paper } from '@mui/material';
|
|
import AppTheme from "../src/shared-theme/AppTheme";
|
|
|
|
const queryClient = new QueryClient();
|
|
|
|
function Dashboard() {
|
|
return (
|
|
<Box>
|
|
<Typography variant="h4" gutterBottom>Welcome to the Admin Panel</Typography>
|
|
<Typography variant="body1">Select a resource from the sidebar to manage data.</Typography>
|
|
|
|
<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: 3, mt: 4 }}>
|
|
{config.resources.map(res => (
|
|
<Paper key={res.name} sx={{ p: 3, textAlign: 'center' }}>
|
|
<Typography variant="h6">{res.pluralLabel}</Typography>
|
|
</Paper>
|
|
))}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
function AdminApp() {
|
|
const { currentUser, login, logout, loading, error } = useAuth();
|
|
const [selectedResourceName, setSelectedResourceName] = React.useState<string | null>(null);
|
|
|
|
if (!currentUser) {
|
|
return (
|
|
<AuthPage
|
|
mode="login"
|
|
login={login}
|
|
register={async () => {
|
|
}} // Disable registration for Admin
|
|
loading={loading}
|
|
error={error}
|
|
onSwitchMode={() => {
|
|
}} onBack={function (): void {
|
|
throw new Error("Function not implemented.");
|
|
}} currentUser={undefined} />
|
|
);
|
|
}
|
|
|
|
const selectedResource = config.resources.find(r => r.name === selectedResourceName);
|
|
|
|
return (
|
|
<AdminLayout
|
|
username={currentUser.username}
|
|
onLogout={logout}
|
|
selectedResourceName={selectedResourceName}
|
|
onSelectResource={setSelectedResourceName}
|
|
>
|
|
{selectedResource ? (
|
|
<ResourceView key={selectedResource.name} config={selectedResource} />
|
|
) : (
|
|
<Dashboard />
|
|
)}
|
|
</AdminLayout>
|
|
);
|
|
}
|
|
|
|
export default function App() {
|
|
return (
|
|
<AppTheme>
|
|
<QueryClientProvider client={queryClient}>
|
|
<AuthProvider authBaseUrl={config.authBaseUrl}>
|
|
<AdminApp />
|
|
</AuthProvider>
|
|
</QueryClientProvider>
|
|
</AppTheme>
|
|
);
|
|
}
|