init

react-openapi/Admin.tsx

@@ -0,0 +1,160 @@
+import * as React from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { AuthProvider, useAuth, AuthPage } from "../react-auth/src";
+import { UploadProvider } from "./providers/UploadProvider";
+import AdminLayout from "./components/AdminLayout";
+import ResourceView from "./components/ResourceView";
+import { getAppConfig } from "./config";
+import { initializeApiClients } from "./api/client";
+import { AppConfig } from "./types/config";
+import { Box, Typography, Paper, CircularProgress } from "@mui/material";
+import AppTheme from "./shared-theme/AppTheme";
+import {
+  BrowserRouter,
+  Routes,
+  Route,
+  useNavigate,
+  useParams,
+  Navigate,
+} from "react-router-dom";
+
+const queryClient = new QueryClient();
+
+// Create a context for the app config
+export const ConfigContext = React.createContext<AppConfig | null>(null);
+
+function Dashboard() {
+  const config = React.useContext(ConfigContext);
+  const navigate = useNavigate();
+  return (
+    <Box>
+      <Typography variant="h4" gutterBottom>
+        Welcome to the Admin Panel
+      </Typography>
+      <Typography variant="body1" sx={{ color: 'text.secondary' }}>
+        Select a resource from the sidebar to manage data.
+      </Typography>
+
+      <Box
+        sx={{
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fill, minmax(240px, 1fr))",
+          gap: 3,
+          mt: 4,
+        }}
+      >
+        {config?.resources.map((res) => (
+          <Paper 
+            key={res.name} 
+            sx={{ 
+                p: 3, 
+                textAlign: "center",
+                cursor: 'pointer',
+                transition: 'transform 0.2s',
+                '&:hover': { transform: 'translateY(-4px)', boxShadow: 4 }
+            }}
+            onClick={() => navigate(`/${res.name}`)}
+          >
+            <Typography variant="h6" color="primary">{res.pluralLabel}</Typography>
+            <Typography variant="body2" color="text.secondary">Manage {res.pluralLabel.toLowerCase()}</Typography>
+          </Paper>
+        ))}
+      </Box>
+    </Box>
+  );
+}
+
+import ProfileView from "./components/ProfileView";
+
+function AdminApp() {
+  const { currentUser, login, logout, loading, error } = useAuth();
+  const config = React.useContext(ConfigContext);
+  const navigate = useNavigate();
+
+  if (!currentUser) {
+    return (
+      <AuthPage
+        mode="login"
+        login={login}
+        register={async () => {}} // Disable registration for Admin
+        loading={loading}
+        error={error}
+        onSwitchMode={() => {}}
+        onBack={() => {}}
+        currentUser={null}
+      />
+    );
+  }
+
+  return (
+    <AdminLayout
+      username={currentUser.username}
+      onLogout={logout}
+      onSelectResource={(name) => navigate(`/${name}`)}
+      resources={config?.resources || []}
+    >
+      <Routes>
+        <Route path="/" element={<Dashboard />} />
+        <Route path="/profile" element={<ProfileView />} />
+        <Route path="/:resourceName" element={<ResourceRouteWrapper />} />
+        <Route path="/:resourceName/:id" element={<ResourceRouteWrapper />} />
+        <Route path="/:resourceName/create" element={<ResourceRouteWrapper />} />
+        <Route path="/:resourceName/edit/:id" element={<ResourceRouteWrapper />} />
+      </Routes>
+    </AdminLayout>
+  );
+}
+
+function ResourceRouteWrapper() {
+  const { resourceName } = useParams();
+  const config = React.useContext(ConfigContext);
+  const selectedResource = config?.resources.find((r) => r.name === resourceName);
+
+  if (!selectedResource) return <Typography>Resource not found</Typography>;
+
+  return <ResourceView config={selectedResource} />;
+}
+
+export default function Admin() {
+  const [config, setConfig] = React.useState<AppConfig | null>(null);
+
+  React.useEffect(() => {
+    getAppConfig().then((cfg) => {
+      initializeApiClients(cfg.baseUrl, cfg.authBaseUrl);
+      setConfig(cfg);
+    });
+  }, []);
+
+  if (!config) {
+    return (
+      <AppTheme>
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            height: "100vh",
+          }}
+        >
+          <CircularProgress />
+        </Box>
+      </AppTheme>
+    );
+  }
+
+  return (
+    <AppTheme>
+      <QueryClientProvider client={queryClient}>
+        <ConfigContext.Provider value={config}>
+          <AuthProvider authBaseUrl={config.authBaseUrl}>
+            <UploadProvider>
+              <BrowserRouter>
+                <AdminApp />
+              </BrowserRouter>
+            </UploadProvider>
+          </AuthProvider>
+        </ConfigContext.Provider>
+      </QueryClientProvider>
+    </AppTheme>
+  );
+}