blog/src_generic/App.tsx

import * as React from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { AuthProvider, useAuth, AuthPage } from "../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 "../src/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>
  );
}

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="/: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 App() {
  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>
  );
}