common fields

react-openapi/Admin.tsx

@@ -16,8 +16,9 @@ import {
 } from "react-router-dom";
 
 import { ConfigContext } from "./providers/ConfigContext";
+import ProfileView from "./components/ProfileView";
 
-function Dashboard({ basePath }: { basePath: string }) {
+function DefaultDashboard({ basePath }: { basePath: string }) {
   const config = React.useContext(ConfigContext);
   const navigate = useNavigate();
 
@@ -32,7 +33,6 @@ function Dashboard({ basePath }: { basePath: string }) {
       <Typography variant="body1" sx={{ color: 'text.secondary' }}>
         Select a resource from the sidebar to manage data.
       </Typography>
-
       <Box
         sx={{
           display: "grid",
@@ -42,10 +42,10 @@ function Dashboard({ basePath }: { basePath: string }) {
         }}
       >
         {visibleResources.map((res) => (
-          <Paper 
-            key={res.name} 
-            sx={{ 
-                p: 3, 
+          <Paper
+            key={res.name}
+            sx={{
+                p: 3,
                 textAlign: "center",
                 cursor: 'pointer',
                 transition: 'transform 0.2s',
@@ -62,9 +62,15 @@ function Dashboard({ basePath }: { basePath: string }) {
   );
 }
 
-import ProfileView from "./components/ProfileView";
+interface AdminAppProps {
+  basePath: string;
+  fieldComponents: FieldComponents;
+  Dashboard?: React.ComponentType<{ basePath: string }>;
+  Layout?: React.ComponentType<AdminLayoutProps>;
+  LoginPage?: React.ComponentType<any>;
+}
 
-function AdminApp({ basePath, fieldComponents }: { basePath: string; fieldComponents?: FieldComponents }) {
+function AdminApp({ basePath, fieldComponents, Dashboard = DefaultDashboard, Layout = AdminLayout, LoginPage = AuthPage }: AdminAppProps) {
   const { currentUser, login, logout, loading, error } = useAuth();
   const config = React.useContext(ConfigContext);
   const navigate = useNavigate();
@@ -74,10 +80,10 @@ function AdminApp({ basePath, fieldComponents }: { basePath: string; fieldCompon
 
   if (!currentUser) {
     return (
-      <AuthPage
+      <LoginPage
         mode="login"
         login={login}
-        register={async () => {}} // Disable registration for Admin
+        register={async () => {}}
         loading={loading}
         error={error}
         onSwitchMode={() => {}}
@@ -88,7 +94,7 @@ function AdminApp({ basePath, fieldComponents }: { basePath: string; fieldCompon
   }
 
   return (
-    <AdminLayout
+    <Layout
       username={currentUser.username}
       onLogout={logout}
       onSelectResource={(name) => navigate(`/admin/${name}`)}
@@ -102,11 +108,11 @@ function AdminApp({ basePath, fieldComponents }: { basePath: string; fieldCompon
         <Route path="/:resourceName/create" element={<ResourceRouteWrapper fieldComponents={fieldComponents} />} />
         <Route path="/:resourceName/edit/:id" element={<ResourceRouteWrapper fieldComponents={fieldComponents} />} />
       </Routes>
-    </AdminLayout>
+    </Layout>
   );
 }
 
-function ResourceRouteWrapper({ fieldComponents }: { fieldComponents?: FieldComponents }) {
+function ResourceRouteWrapper({ fieldComponents }: { fieldComponents: FieldComponents }) {
   const { resourceName } = useParams();
   const config = React.useContext(ConfigContext);
   const selectedResource = config?.resources.find((r) => r.name === resourceName);
@@ -116,14 +122,25 @@ function ResourceRouteWrapper({ fieldComponents }: { fieldComponents?: FieldComp
   return <ResourceView config={selectedResource} fieldComponents={fieldComponents} />;
 }
 
+interface AdminLayoutProps {
+  children: React.ReactNode;
+  onSelectResource: (resourceName: string | null) => void;
+  onLogout: () => void;
+  username?: string;
+  resources: import("./types/config").ResourceConfig[];
+}
+
 interface AdminProps {
   basePath?: string;
   resourceOverrides?: Record<string, any>;
   profileConfig?: any;
-  fieldComponents?: FieldComponents;
+  fieldComponents: FieldComponents;
+  Dashboard?: React.ComponentType<{ basePath: string }>;
+  Layout?: React.ComponentType<AdminLayoutProps>;
+  LoginPage?: React.ComponentType<any>;
 }
 
-export default function Admin({ basePath = "/admin", resourceOverrides = {}, profileConfig = {}, fieldComponents = {} }: AdminProps) {
+export default function Admin({ basePath = "/admin", resourceOverrides = {}, profileConfig = {}, fieldComponents, Dashboard, Layout, LoginPage }: AdminProps) {
   const existingConfig = React.useContext(ConfigContext);
   const [config, setConfig] = React.useState<AppConfig | null>(existingConfig);
 
@@ -153,16 +170,14 @@ export default function Admin({ basePath = "/admin", resourceOverrides = {}, pro
 
   const content = (
     <UploadProvider>
-      <AdminApp basePath={basePath} fieldComponents={fieldComponents} />
+      <AdminApp basePath={basePath} fieldComponents={fieldComponents} Dashboard={Dashboard} Layout={Layout} LoginPage={LoginPage} />
     </UploadProvider>
   );
 
-  // If we have an existing config, we are already inside a Provider and QueryClient
   if (existingConfig) {
     return content;
   }
 
-  // Fallback for standalone usage
   return (
     <ConfigContext.Provider value={config}>
       {content}