openvsx-webui-test 0.19.0-dev.2 → 0.20.0-dev.0

package/src/pages/admin-dashboard/admin-dashboard.tsx

@@ -9,45 +9,48 @@
  ********************************************************************************/
 
 import { FunctionComponent, ReactNode, useContext, useState } from 'react';
-import { Box, Container, CssBaseline, Typography, IconButton } from '@mui/material';
-import { createRoute } from '../../utils';
-import { Sidepanel } from '../../components/sidepanel/sidepanel';
-import { NavigationItem } from '../../components/sidepanel/navigation-item';
+import {
+    Box,
+    Container,
+    CssBaseline,
+    Typography,
+    IconButton,
+    Breadcrumbs,
+    LinkProps,
+    Link,
+    Toolbar
+} from '@mui/material';
+import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar';
+import { styled } from "@mui/material/styles";
+import { Link as RouterLink, Route, Routes, useNavigate, useLocation } from 'react-router-dom';
+import AccountBoxIcon from '@mui/icons-material/AccountBox';
 import AssignmentIndIcon from '@mui/icons-material/AssignmentInd';
+import BarChartIcon from '@mui/icons-material/BarChart';
 import ExtensionSharpIcon from '@mui/icons-material/ExtensionSharp';
-import { Route, Routes, useNavigate, useLocation } from 'react-router-dom';
-import { NamespaceAdmin } from './namespace-admin';
-import { ExtensionAdmin } from './extension-admin';
-import { MainContext } from '../../context';
 import HighlightOffIcon from '@mui/icons-material/HighlightOff';
-import { Welcome } from './welcome';
-import { PublisherAdmin } from './publisher-admin';
-import PersonIcon from '@mui/icons-material/Person';
+import HistoryIcon from '@mui/icons-material/History';
+import MenuIcon from '@mui/icons-material/Menu';
 import PeopleIcon from '@mui/icons-material/People';
-import { ScanAdmin } from './scan-admin';
+import PersonIcon from '@mui/icons-material/Person';
 import SecurityIcon from '@mui/icons-material/Security';
+import SpeedIcon from '@mui/icons-material/Speed';
 import StarIcon from '@mui/icons-material/Star';
-import BarChartIcon from '@mui/icons-material/BarChart';
-import HistoryIcon from '@mui/icons-material/History';
-import { Tiers } from './tiers/tiers';
+import { CustomerDetails } from './customers/customer-details';
 import { Customers } from './customers/customers';
-import { UsageStatsView } from './usage-stats/usage-stats';
-import { Logs } from './logs/logs';
+import { DrawerHeader } from '../../components/sidepanel/drawer-header';
+import { Sidepanel } from "../../components/sidepanel/sidepanel";
+import { ExtensionAdmin } from './extension-admin';
 import { LoginComponent } from "../../default/login";
-import AccountBoxIcon from '@mui/icons-material/AccountBox';
-
-export namespace AdminDashboardRoutes {
-    export const ROOT = 'admin-dashboard';
-    export const MAIN = createRoute([ROOT]);
-    export const NAMESPACE_ADMIN = createRoute([ROOT, 'namespaces']);
-    export const EXTENSION_ADMIN = createRoute([ROOT, 'extensions']);
-    export const PUBLISHER_ADMIN = createRoute([ROOT, 'publisher']);
-    export const SCANS_ADMIN = createRoute([ROOT, 'scans']);
-    export const TIERS = createRoute([ROOT, 'tiers']);
-    export const CUSTOMERS = createRoute([ROOT, 'customers']);
-    export const USAGE_STATS = createRoute([ROOT, 'usage']);
-    export const LOGS = createRoute([ROOT, 'logs']);
-}
+import { Logs } from './logs/logs';
+import { MainContext } from '../../context';
+import { NamespaceAdmin } from './namespace-admin';
+import { NavigationItem } from '../../components/sidepanel/navigation-item';
+import { PublisherAdmin } from './publisher-admin';
+import { ScanAdmin } from './scan-admin';
+import { Tiers } from './tiers/tiers';
+import { UsageStatsView } from './usage-stats/usage-stats';
+import { Welcome } from './welcome';
+import { AdminDashboardRoutes } from "./admin-routes";
 
 const Message: FunctionComponent<{message: string}> = ({ message }) => {
     return (<Box sx={{
@@ -60,68 +63,242 @@ const Message: FunctionComponent<{message: string}> = ({ message }) => {
     </Box>);
 };
 
+interface RouteEntry {
+    path: string;
+    name: string;
+    icon: ReactNode;
+}
+
+interface NavGroup {
+    name: string;
+    icon: ReactNode;
+    children: RouteEntry[];
+}
+
+type NavEntry = RouteEntry | NavGroup;
+
+const isNavGroup = (entry: NavEntry): entry is NavGroup => 'children' in entry;
+
+const navConfig: NavEntry[] = [
+    { path: AdminDashboardRoutes.NAMESPACE_ADMIN, name: 'Namespaces', icon: <AssignmentIndIcon /> },
+    { path: AdminDashboardRoutes.EXTENSION_ADMIN, name: 'Extensions', icon: <ExtensionSharpIcon /> },
+    { path: AdminDashboardRoutes.PUBLISHER_ADMIN, name: 'Publisher', icon: <PersonIcon /> },
+    { path: AdminDashboardRoutes.SCANS_ADMIN, name: 'Scans', icon: <SecurityIcon /> },
+    {
+        name: 'Rate Limiting',
+        icon: <SpeedIcon />,
+        children: [
+            { path: AdminDashboardRoutes.TIERS, name: 'Tiers', icon: <StarIcon /> },
+            { path: AdminDashboardRoutes.CUSTOMERS, name: 'Customers', icon: <PeopleIcon /> },
+            { path: AdminDashboardRoutes.USAGE_STATS, name: 'Usage Stats', icon: <BarChartIcon /> },
+        ],
+    },
+    { path: AdminDashboardRoutes.LOGS, name: 'Logs', icon: <HistoryIcon /> },
+];
+
+// Flat name lookup for breadcrumbs
+const routeNames: { [key: string]: string } = {
+    [AdminDashboardRoutes.MAIN]: 'Admin Dashboard',
+    ...navConfig.reduce<{ [key: string]: string }>((acc, entry) => {
+        if (isNavGroup(entry)) {
+            entry.children.forEach(child => {
+                acc[child.path] = child.name;
+            });
+        } else {
+            acc[entry.path] = entry.name;
+        }
+        return acc;
+    }, {}),
+};
+
+const drawerWidth = 240;
+
+interface AppBarProps extends MuiAppBarProps {
+    open?: boolean;
+}
+
+const AppBar = styled(MuiAppBar, {
+    shouldForwardProp: (prop) => prop !== 'open',
+})<AppBarProps>(({ theme }) => ({
+    transition: theme.transitions.create(['margin', 'width'], {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.leavingScreen,
+    }),
+    variants: [
+        {
+            props: ({ open }) => open,
+            style: {
+                width: `calc(100% - ${drawerWidth}px)`,
+                marginLeft: `${drawerWidth}px`,
+                transition: theme.transitions.create(['margin', 'width'], {
+                    easing: theme.transitions.easing.easeOut,
+                    duration: theme.transitions.duration.enteringScreen,
+                }),
+            },
+        },
+    ],
+}));
+
+interface LinkRouterProps extends LinkProps {
+    to: string;
+    replace?: boolean;
+}
+
+const LinkRouter = (props: LinkRouterProps) => (
+    <Link {...props} component={RouterLink as any} />
+);
+
+const BreadcrumbsComponent = () => {
+    const { pathname } = useLocation();
+
+    const pathnames = pathname.split("/").filter((segment) => segment);
+
+    return (
+        <Breadcrumbs aria-label='breadcrumb' sx={{ pt: 2, pb: 2, px: 4 }} >
+            <LinkRouter underline='hover' color='inherit' to='/'>
+                Home
+            </LinkRouter>
+            {pathnames.map((value, index) => {
+                const last = index === pathnames.length - 1;
+                const to = `/${pathnames.slice(0, index + 1).join("/")}`;
+
+                return last ? (
+                    <Typography color='text.primary' key={to}>
+                        {routeNames[to] ?? value}
+                    </Typography>
+                ) : (
+                    <LinkRouter underline='hover' color='inherit' to={to} key={to}>
+                        {routeNames[to]}
+                    </LinkRouter>
+                );
+            })}
+        </Breadcrumbs>
+    );
+};
+
+const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })<{
+    open?: boolean;
+}>(({ theme }) => ({
+    flexGrow: 1,
+    padding: theme.spacing(3),
+    transition: theme.transitions.create('margin', {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.leavingScreen,
+    }),
+    marginLeft: `-${drawerWidth}px`,
+    variants: [
+        {
+            props: ({ open }) => open,
+            style: {
+                transition: theme.transitions.create('margin', {
+                    easing: theme.transitions.easing.easeOut,
+                    duration: theme.transitions.duration.enteringScreen,
+                }),
+                marginLeft: 0,
+            },
+        },
+    ],
+}));
+
 export const AdminDashboard: FunctionComponent<AdminDashboardProps> = props => {
     const { user, loginProviders } = useContext(MainContext);
+    const [drawerOpen, setDrawerOpen] = useState(true);
 
     const navigate = useNavigate();
     const toMainPage = () => navigate('/');
 
     const [currentPage, setCurrentPage] = useState<string | undefined>(useLocation().pathname);
-    const handleOpenRoute = (route: string) => setCurrentPage(route);
+    const handleOpenRoute = (route: string) => {
+        setCurrentPage(route);
+    };
 
     let content: ReactNode = null;
     if (user?.role === 'admin') {
-        content = <>
-            <Sidepanel>
-                <NavigationItem onOpenRoute={handleOpenRoute} active={currentPage === AdminDashboardRoutes.NAMESPACE_ADMIN} label='Namespaces' icon={<AssignmentIndIcon />} route={AdminDashboardRoutes.NAMESPACE_ADMIN} />
-                <NavigationItem onOpenRoute={handleOpenRoute} active={currentPage === AdminDashboardRoutes.EXTENSION_ADMIN} label='Extensions' icon={<ExtensionSharpIcon />} route={AdminDashboardRoutes.EXTENSION_ADMIN} />
-                <NavigationItem onOpenRoute={handleOpenRoute} active={currentPage === AdminDashboardRoutes.PUBLISHER_ADMIN} label='Publishers' icon={<PersonIcon />} route={AdminDashboardRoutes.PUBLISHER_ADMIN} />
-                <NavigationItem onOpenRoute={handleOpenRoute} active={currentPage === AdminDashboardRoutes.SCANS_ADMIN} label='Scans' icon={<SecurityIcon />} route={AdminDashboardRoutes.SCANS_ADMIN} />
-                <NavigationItem onOpenRoute={handleOpenRoute} active={currentPage === AdminDashboardRoutes.TIERS} label='Tiers' icon={<StarIcon />} route={AdminDashboardRoutes.TIERS} />
-                <NavigationItem onOpenRoute={handleOpenRoute} active={currentPage === AdminDashboardRoutes.CUSTOMERS} label='Customers' icon={<PeopleIcon />} route={AdminDashboardRoutes.CUSTOMERS} />
-                <NavigationItem onOpenRoute={handleOpenRoute} active={currentPage?.startsWith(AdminDashboardRoutes.USAGE_STATS)} label='Usage Stats' icon={<BarChartIcon />} route={AdminDashboardRoutes.USAGE_STATS} />
-                <NavigationItem onOpenRoute={handleOpenRoute} active={currentPage === AdminDashboardRoutes.LOGS} label='Logs' icon={<HistoryIcon />} route={AdminDashboardRoutes.LOGS} />
-            </Sidepanel>
-            <Box
-                overflow='auto'
-                flex={1}
-                sx={{
-                    overflowY: 'scroll',
-                    '&::-webkit-scrollbar': {
-                        width: '12px',
-                    },
-                    '&::-webkit-scrollbar-track': {
-                        backgroundColor: 'rgba(0, 0, 0, 0.2)',
-                    },
-                    '&::-webkit-scrollbar-thumb': {
-                        backgroundColor: 'rgba(255, 255, 255, 0.2)',
-                        borderRadius: '6px',
-                        '&:hover': {
-                            backgroundColor: 'rgba(255, 255, 255, 0.3)',
-                        },
-                    },
-                }}
-            >
-                <IconButton onClick={toMainPage} sx={{ float: 'right', mt: 1, mr: 1 }}>
-                    <HighlightOffIcon/>
-                </IconButton>
-                <Container sx={{ pt: 4, pb: 4, px: 3, height: '100%' }} maxWidth='xl'>
-                    <Routes>
-                        <Route path='/namespaces' element={<NamespaceAdmin/>} />
-                        <Route path='/extensions' element={<ExtensionAdmin/>} />
-                        <Route path='/extensions/:namespace/:extension' element={<ExtensionAdmin/>} />
-                        <Route path='/publisher' element={<PublisherAdmin/>} />
-                        <Route path='/scans' element={<ScanAdmin/>} />
-                        <Route path='/tiers' element={<Tiers/>} />
-                        <Route path='/customers' element={<Customers/>} />
-                        <Route path='/usage' element={<UsageStatsView/>} />
-                        <Route path='/usage/:customer' element={<UsageStatsView/>} />
-                        <Route path='/logs' element={<Logs/>} />
-                        <Route path='*' element={<Welcome/>} />
-                    </Routes>
-                </Container>
-            </Box>
-        </>;
+        content =
+            <Box sx={{ display: 'flex', width: '100%' }}>
+                <CssBaseline />
+                <AppBar position='fixed' open={drawerOpen} color='default' enableColorOnDark elevation={0}>
+                    <Toolbar>
+                        <IconButton
+                            aria-label='open drawer'
+                            onClick={() => setDrawerOpen(true)}
+                            edge='start'
+                            sx={[{ mr: 2 }, drawerOpen && { display: 'none' }]}
+                        >
+                            <MenuIcon />
+                        </IconButton>
+                        <Box sx={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
+                            <BreadcrumbsComponent />
+                            <IconButton onClick={toMainPage} sx={{ mt: 1, mr: 1 }}>
+                                <HighlightOffIcon/>
+                            </IconButton>
+                        </Box>
+                    </Toolbar>
+                </AppBar>
+                <Sidepanel width={drawerWidth} open={drawerOpen} handleDrawerClose={() => setDrawerOpen(false)} >
+                    {navConfig.map((entry) => {
+                        if (isNavGroup(entry)) {
+                            return (
+                                <NavigationItem
+                                    key={entry.name}
+                                    label={entry.name}
+                                    icon={entry.icon}
+                                >
+                                    {entry.children.map((child) => (
+                                        <NavigationItem key={child.path} onOpenRoute={handleOpenRoute} active={currentPage?.startsWith(child.path)}
+                                                        label={child.name} icon={child.icon} route={child.path}/>
+                                    ))}
+                                </NavigationItem>
+                            );
+                        }
+                        return (
+                            <NavigationItem key={entry.path} onOpenRoute={handleOpenRoute} active={currentPage?.startsWith(entry.path)}
+                                            label={entry.name} icon={entry.icon} route={entry.path}/>
+                        );
+                    })}
+                </Sidepanel>
+                <Main open={drawerOpen} >
+                    <DrawerHeader />
+                    <Box
+                        overflow='auto'
+                        flex={1}
+                        sx={{
+                            overflowY: 'scroll',
+                            '&::-webkit-scrollbar': {
+                                width: '12px',
+                            },
+                            '&::-webkit-scrollbar-track': {
+                                backgroundColor: 'rgba(0, 0, 0, 0.2)',
+                            },
+                            '&::-webkit-scrollbar-thumb': {
+                                backgroundColor: 'rgba(255, 255, 255, 0.2)',
+                                borderRadius: '6px',
+                                '&:hover': {
+                                    backgroundColor: 'rgba(255, 255, 255, 0.3)',
+                                },
+                            },
+                        }}
+                    >
+                        <Container sx={{ pt: 2, pb: 4, px: 3 }} maxWidth='xl'>
+                            <Routes>
+                                <Route path='/namespaces' element={<NamespaceAdmin/>} />
+                                <Route path='/extensions' element={<ExtensionAdmin/>} />
+                                <Route path='/extensions/:namespace/:extension' element={<ExtensionAdmin/>} />
+                                <Route path='/publisher' element={<PublisherAdmin/>} />
+                                <Route path='/publisher/:publisher' element={<PublisherAdmin/>} />
+                                <Route path='/scans' element={<ScanAdmin/>} />
+                                <Route path='/tiers' element={<Tiers/>} />
+                                <Route path='/customers' element={<Customers/>} />
+                                <Route path='/customers/:customer' element={<CustomerDetails/>} />
+                                <Route path='/usage' element={<UsageStatsView/>} />
+                                <Route path='/usage/:customer' element={<UsageStatsView/>} />
+                                <Route path='/logs' element={<Logs/>} />
+                                <Route path='*' element={<Welcome/>} />
+                            </Routes>
+                        </Container>
+                    </Box>
+                </Main>
+            </Box>;
     } else if (user) {
         content = <Message message='You are not authorized as administrator.'/>;
     } else if (!props.userLoading && loginProviders) {

package/src/pages/admin-dashboard/admin-routes.ts

@@ -0,0 +1,27 @@
+/******************************************************************************
+ * Copyright (c) 2026 Contributors to the Eclipse Foundation.
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * https://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *****************************************************************************/
+
+import { createRoute } from '../../utils';
+
+export namespace AdminDashboardRoutes {
+    export const ROOT = 'admin-dashboard';
+    export const MAIN = createRoute([ROOT]);
+    export const NAMESPACE_ADMIN = createRoute([ROOT, 'namespaces']);
+    export const EXTENSION_ADMIN = createRoute([ROOT, 'extensions']);
+    export const PUBLISHER_ADMIN = createRoute([ROOT, 'publisher']);
+    export const SCANS_ADMIN = createRoute([ROOT, 'scans']);
+    export const TIERS = createRoute([ROOT, 'tiers']);
+    export const CUSTOMERS = createRoute([ROOT, 'customers']);
+    export const USAGE_STATS = createRoute([ROOT, 'usage']);
+    export const LOGS = createRoute([ROOT, 'logs']);
+}

package/src/pages/admin-dashboard/components/data-grid-filter-operators.tsx

@@ -11,39 +11,9 @@
  * SPDX-License-Identifier: EPL-2.0
  *****************************************************************************/
 
-import type { SyntheticEvent } from "react";
-import { FC } from 'react';
-import { Autocomplete, TextField } from '@mui/material';
+import { MultiSelectFilterInput } from "./data-grid-filter";
 import { GridFilterOperator, GridFilterInputValueProps } from '@mui/x-data-grid';
 
-/**
- * Custom multi-select filter input component for DataGrid columns.
- * Renders an Autocomplete with multiple selection support.
- */
-export const MultiSelectFilterInput: FC<GridFilterInputValueProps & { options: string[] }> = ({
-  item,
-  applyValue,
-  options
-}) => {
-  const handleChange = (_event: SyntheticEvent, newValue: string[]) => {
-    applyValue({ ...item, value: newValue });
-  };
-
-  return (
-    <Autocomplete
-      multiple
-      size='small'
-      options={options}
-      value={(item.value as string[]) || []}
-      onChange={handleChange}
-      renderInput={(params) => (
-        <TextField {...params} variant='standard' placeholder='Filter...' />
-      )}
-      sx={{ minWidth: 150, mt: 'auto' }}
-    />
-  );
-};
-
 /**
  * Creates filter operators for single-value columns with multi-select capability.
  * Includes "is any of" and "is none of" operators.

package/src/pages/admin-dashboard/components/data-grid-filter.tsx

@@ -0,0 +1,45 @@
+/******************************************************************************
+ * Copyright (c) 2026 Contributors to the Eclipse Foundation.
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * https://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *****************************************************************************/
+
+import type { SyntheticEvent } from "react";
+import { FC } from 'react';
+import { Autocomplete, TextField } from '@mui/material';
+import { GridFilterInputValueProps } from '@mui/x-data-grid';
+
+/**
+ * Custom multi-select filter input component for DataGrid columns.
+ * Renders an Autocomplete with multiple selection support.
+ */
+export const MultiSelectFilterInput: FC<GridFilterInputValueProps & { options: string[] }> = ({
+  item,
+  applyValue,
+  options
+}) => {
+  const handleChange = (_event: SyntheticEvent, newValue: string[]) => {
+    applyValue({ ...item, value: newValue });
+  };
+
+  return (
+    <Autocomplete
+      multiple
+      size='small'
+      options={options}
+      value={(item.value as string[]) || []}
+      onChange={handleChange}
+      renderInput={(params) => (
+        <TextField {...params} variant='standard' placeholder='Filter...' />
+      )}
+      sx={{ minWidth: 150, mt: 'auto' }}
+    />
+  );
+};

package/src/pages/admin-dashboard/components/index.ts

@@ -11,8 +11,8 @@
  * SPDX-License-Identifier: EPL-2.0
  *****************************************************************************/
 
+export { MultiSelectFilterInput } from './data-grid-filter';
 export {
-  MultiSelectFilterInput,
   createMultiSelectFilterOperators,
   createArrayContainsFilterOperators
 } from './data-grid-filter-operators';

package/src/pages/admin-dashboard/customers/customer-details.tsx

@@ -0,0 +1,129 @@
+/******************************************************************************
+ * Copyright (c) 2026 Contributors to the Eclipse Foundation.
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * https://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *****************************************************************************/
+
+import { FC, useContext, useState, useEffect, useRef, useCallback } from "react";
+import {
+    Box,
+    Typography,
+    Button,
+    Alert,
+    LinearProgress
+} from "@mui/material";
+import EditIcon from '@mui/icons-material/Edit';
+import { useParams } from 'react-router-dom';
+import { MainContext } from '../../../context';
+import type { Customer } from '../../../extension-registry-types';
+import { handleError } from '../../../utils';
+import { useAdminUsageStats } from '../usage-stats/use-usage-stats';
+import { GeneralDetails, UsageStats } from '../../../components/rate-limiting/customer';
+import { CustomerFormDialog } from './customer-form-dialog';
+import { CustomerMemberList } from './customer-member-list';
+
+const CustomerDetailsLoading: FC = () => (
+    <Box sx={{ p: 3 }}>
+        <LinearProgress color='secondary' sx={{ width: "100%" }} />
+    </Box>
+);
+
+const CustomerDetailsError: FC<{ message: string }> = ({ message }) => (
+    <Box sx={{ p: 3 }}>
+        <Alert severity='error'>{message}</Alert>
+    </Box>
+);
+
+export const CustomerDetails: FC = () => {
+    const { customer: customerName } = useParams<{ customer: string }>();
+    const abortController = useRef(new AbortController());
+    const { service } = useContext(MainContext);
+
+    const [customer, setCustomer] = useState<Customer | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [formDialogOpen, setFormDialogOpen] = useState(false);
+
+    const { usageStats, error: statsError, startDate, setStartDate } = useAdminUsageStats(customerName);
+
+    const loadCustomer = useCallback(async () => {
+        if (!customerName) return;
+        try {
+            setLoading(true);
+            setError(null);
+            const data = await service.admin.getCustomer(abortController.current, customerName);
+            setCustomer(data);
+        } catch (err) {
+            if ((err as { status?: number })?.status === 404) {
+                setError(`Customer "${customerName}" not found.`);
+            } else {
+                setError(handleError(err as Error));
+            }
+        } finally {
+            setLoading(false);
+        }
+    }, [service, customerName]);
+
+    useEffect(() => {
+        loadCustomer();
+        return () => abortController.current.abort();
+    }, [loadCustomer]);
+
+    const handleFormSubmit = async (updatedCustomer: Customer) => {
+        if (customer) {
+            await service.admin.updateCustomer(abortController.current, customer.name, updatedCustomer);
+            await loadCustomer();
+        }
+    };
+
+    if (loading) {
+        return <CustomerDetailsLoading />;
+    }
+
+    if (error || statsError) {
+        return <CustomerDetailsError message={error ?? statsError ?? ''} />;
+    }
+
+    if (!customer) {
+        return null;
+    }
+
+    return (
+      <>
+        <Box sx={{ p: 2 }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', mb: 3 }}>
+                <Typography variant='h4' component='h1'>
+                    {customer.name}
+                </Typography>
+            </Box>
+
+            <GeneralDetails
+                customer={customer}
+                headerAction={
+                    <Button size='small' startIcon={<EditIcon />} onClick={() => setFormDialogOpen(true)}>
+                        Edit
+                    </Button>
+                }
+            />
+            <CustomerMemberList
+                customer={customer}
+            />
+            <UsageStats usageStats={usageStats} customer={customer} startDate={startDate} onStartDateChange={setStartDate} />
+        </Box>
+
+        <CustomerFormDialog
+            open={formDialogOpen}
+            customer={customer}
+            onClose={() => setFormDialogOpen(false)}
+            onSubmit={handleFormSubmit}
+        />
+      </>
+    );
+};

package/src/pages/admin-dashboard/customers/customer-form-dialog.tsx

@@ -31,9 +31,9 @@ import {
     styled
 } from '@mui/material';
 import type { SelectChangeEvent } from '@mui/material';
-import { type Customer, EnforcementState, type Tier } from "../../../extension-registry-types";
-import { MainContext } from "../../../context";
-import { handleError } from "../../../utils";
+import { type Customer, EnforcementState, type Tier } from '../../../extension-registry-types';
+import { MainContext } from '../../../context';
+import { handleError } from '../../../utils';
 
 interface CustomerFormDialogProps {
     open: boolean;
@@ -42,7 +42,6 @@ interface CustomerFormDialogProps {
     onSubmit: (formData: Customer) => Promise<void>;
 }
 
-
 const Code = styled('code')(({ theme }) => ({
   fontFamily: 'source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace',
   backgroundColor: theme.palette.action.hover, // Subtle gray background