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

package/src/pages/extension-detail/extension-detail-routes.ts

@@ -0,0 +1,35 @@
+/******************************************************************************
+ * 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, getTargetPlatforms } from '../../utils';
+
+export namespace ExtensionDetailRoutes {
+    export namespace Parameters {
+        export const NAMESPACE = ':namespace';
+        export const NAME = ':name';
+        export const TARGET = `:target(${getTargetPlatforms().join('|')})`;
+        export const VERSION = ':version?';
+    }
+
+    export const ROOT = 'extension';
+    export const MAIN = createRoute([ROOT, Parameters.NAMESPACE, Parameters.NAME, Parameters.VERSION]);
+    export const MAIN_TARGET = createRoute([ROOT, Parameters.NAMESPACE, Parameters.NAME, Parameters.TARGET, Parameters.VERSION]);
+    export const LATEST = createRoute([ROOT, Parameters.NAMESPACE, Parameters.NAME]);
+    export const LATEST_TARGET = createRoute([ROOT, Parameters.NAMESPACE, Parameters.NAME, Parameters.TARGET]);
+    export const PRE_RELEASE = createRoute([ROOT, Parameters.NAMESPACE, Parameters.NAME, 'pre-release']);
+    export const PRE_RELEASE_TARGET = createRoute([ROOT, Parameters.NAMESPACE, Parameters.NAME, Parameters.TARGET, 'pre-release']);
+    export const REVIEWS = createRoute([ROOT, Parameters.NAMESPACE, Parameters.NAME, 'reviews']);
+    export const REVIEWS_TARGET = createRoute([ROOT, Parameters.NAMESPACE, Parameters.NAME, Parameters.TARGET, 'reviews']);
+    export const CHANGES = createRoute([ROOT, Parameters.NAMESPACE, Parameters.NAME, 'changes']);
+    export const CHANGES_TARGET = createRoute([ROOT, Parameters.NAMESPACE, Parameters.NAME, Parameters.TARGET, 'changes']);
+}

package/src/pages/extension-detail/extension-detail.tsx

@@ -18,39 +18,19 @@ import SaveAltIcon from '@mui/icons-material/SaveAlt';
 import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
 import WarningIcon from '@mui/icons-material/Warning';
 import { MainContext } from '../../context';
-import { createRoute, getTargetPlatforms } from '../../utils';
+import { createRoute } from '../../utils';
 import { DelayedLoadIndicator } from '../../components/delayed-load-indicator';
 import { HoverPopover } from '../../components/hover-popover';
 import { Extension, UserData, isError } from '../../extension-registry-types';
 import { TextDivider } from '../../components/text-divider';
 import { ExtensionRatingStars } from './extension-rating-stars';
-import { NamespaceDetailRoutes } from '../namespace-detail/namespace-detail';
+import { NamespaceDetailRoutes } from '../namespace-detail/namespace-detail-routes';
 import { ExtensionDetailOverview } from './extension-detail-overview';
 import { ExtensionDetailChanges } from './extension-detail-changes';
 import { ExtensionDetailReviews } from './extension-detail-reviews';
+import { ExtensionDetailRoutes } from './extension-detail-routes';
 import styled from '@mui/material/styles/styled';
 
-export namespace ExtensionDetailRoutes {
-    export namespace Parameters {
-        export const NAMESPACE = ':namespace';
-        export const NAME = ':name';
-        export const TARGET = `:target(${getTargetPlatforms().join('|')})`;
-        export const VERSION = ':version?';
-    }
-
-    export const ROOT = 'extension';
-    export const MAIN = createRoute([ROOT, Parameters.NAMESPACE, Parameters.NAME, Parameters.VERSION]);
-    export const MAIN_TARGET = createRoute([ROOT, Parameters.NAMESPACE, Parameters.NAME, Parameters.TARGET, Parameters.VERSION]);
-    export const LATEST = createRoute([ROOT, Parameters.NAMESPACE, Parameters.NAME]);
-    export const LATEST_TARGET = createRoute([ROOT, Parameters.NAMESPACE, Parameters.NAME, Parameters.TARGET]);
-    export const PRE_RELEASE = createRoute([ROOT, Parameters.NAMESPACE, Parameters.NAME, 'pre-release']);
-    export const PRE_RELEASE_TARGET = createRoute([ROOT, Parameters.NAMESPACE, Parameters.NAME, Parameters.TARGET, 'pre-release']);
-    export const REVIEWS = createRoute([ROOT, Parameters.NAMESPACE, Parameters.NAME, 'reviews']);
-    export const REVIEWS_TARGET = createRoute([ROOT, Parameters.NAMESPACE, Parameters.NAME, Parameters.TARGET, 'reviews']);
-    export const CHANGES = createRoute([ROOT, Parameters.NAMESPACE, Parameters.NAME, 'changes']);
-    export const CHANGES_TARGET = createRoute([ROOT, Parameters.NAMESPACE, Parameters.NAME, Parameters.TARGET, 'changes']);
-}
-
 const alignVertically = {
     display: 'flex',
     alignItems: 'center'

package/src/pages/extension-list/extension-list-container.tsx

@@ -11,15 +11,11 @@
 import { FunctionComponent, useEffect, useState } from 'react';
 import { Box } from '@mui/material';
 import { useLocation } from 'react-router-dom';
-import { createRoute, addQuery } from '../../utils';
+import { addQuery } from '../../utils';
 import { ExtensionCategory, SortOrder, SortBy } from '../../extension-registry-types';
 import { ExtensionList } from './extension-list';
 import { ExtensionListHeader } from './extension-list-header';
 
-export namespace ExtensionListRoutes {
-    export const MAIN = createRoute([]);
-}
-
 export const ExtensionListContainer: FunctionComponent = () => {
 
     const [searchQuery, setSearchQuery] = useState('');

package/src/pages/extension-list/extension-list-item.tsx

@@ -13,7 +13,7 @@ import { Link as RouteLink } from 'react-router-dom';
 import { Paper, Typography, Box, Grid, Fade } from '@mui/material';
 import SaveAltIcon from '@mui/icons-material/SaveAlt';
 import { MainContext } from '../../context';
-import { ExtensionDetailRoutes } from '../extension-detail/extension-detail';
+import { ExtensionDetailRoutes } from '../extension-detail/extension-detail-routes';
 import { SearchEntry } from '../../extension-registry-types';
 import { ExtensionRatingStars } from '../extension-detail/extension-rating-stars';
 import { createRoute } from '../../utils';

package/src/pages/extension-list/extension-list-routes.ts

@@ -0,0 +1,18 @@
+/******************************************************************************
+ * 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 ExtensionListRoutes {
+    export const MAIN = createRoute([]);
+}

package/src/pages/namespace-detail/namespace-detail-routes.ts

@@ -0,0 +1,23 @@
+/******************************************************************************
+ * 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 NamespaceDetailRoutes {
+    export namespace Parameters {
+        export const NAME = ':name';
+    }
+
+    export const ROOT = 'namespace';
+    export const MAIN = createRoute([ROOT, Parameters.NAME]);
+}

package/src/pages/namespace-detail/namespace-detail.tsx

@@ -16,19 +16,9 @@ import TwitterIcon from '@mui/icons-material/Twitter';
 import { useParams } from 'react-router-dom';
 import { ExtensionListItem } from '../extension-list/extension-list-item';
 import { MainContext } from '../../context';
-import { createRoute } from '../../utils';
 import { DelayedLoadIndicator } from '../../components/delayed-load-indicator';
 import { NamespaceDetails, isError, UrlString } from '../../extension-registry-types';
 
-export namespace NamespaceDetailRoutes {
-    export namespace Parameters {
-        export const NAME = ':name';
-    }
-
-    export const ROOT = 'namespace';
-    export const MAIN = createRoute([ROOT, Parameters.NAME]);
-}
-
 export const NamespaceDetail: FunctionComponent = () => {
     const [loading, setLoading] = useState(true);
     const [truncateReadMore, setTruncateReadMore] = useState(true);

package/src/pages/user/add-namespace-member-dialog.tsx

@@ -8,15 +8,12 @@
  * SPDX-License-Identifier: EPL-2.0
  ********************************************************************************/
 
-import { ChangeEvent, FunctionComponent, KeyboardEvent, useState, useContext, useEffect, useRef } from 'react';
+import { FunctionComponent, useContext, useRef } from 'react';
 import { UserData } from '../..';
-import {
-    Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, Button, Popper, Fade, Paper,
-    Box, Avatar
-} from '@mui/material';
 import { Namespace, NamespaceMembership, isError } from '../../extension-registry-types';
 import { NamespaceDetailConfigContext } from './user-settings-namespace-detail';
 import { MainContext } from '../../context';
+import { AddUserDialog } from './add-user-dialog';
 
 export interface AddMemberDialogProps {
     open: boolean;
@@ -28,29 +25,17 @@ export interface AddMemberDialogProps {
 }
 
 export const AddMemberDialog: FunctionComponent<AddMemberDialogProps> = props => {
-    const { open } = props;
     const config = useContext(NamespaceDetailConfigContext);
     const { service, handleError } = useContext(MainContext);
-    const [foundUsers, setFoundUsers] = useState<UserData[]>([]);
-    const [showUserPopper, setShowUserPopper] = useState(false);
-    const [popperTarget, setPopperTarget] = useState<HTMLInputElement | undefined>(undefined);
     const abortController = useRef<AbortController>(new AbortController());
-    useEffect(() => {
-        return () => {
-            abortController.current.abort();
-        };
-    }, []);
 
-    const addUser = async (user: UserData) => {
+    const existingUsers = props.members.map(m => m.user);
+
+    const handleAddUser = async (user: UserData) => {
         try {
             if (!props.namespace) {
                 return;
             }
-            if (props.members.find(m => m.user.loginName === user.loginName && m.user.provider === user.provider)) {
-                setShowUserPopper(false);
-                handleError({ message: `User ${user.loginName} is already a member of ${props.namespace.name}.` });
-                return;
-            }
             props.setLoadingState(true);
             const endpoint = props.namespace.roleUrl;
             const result = await service.setNamespaceMember(abortController.current, endpoint, user, config.defaultMemberRole ?? 'contributor');
@@ -58,106 +43,22 @@ export const AddMemberDialog: FunctionComponent<AddMemberDialogProps> = props =>
                 throw result;
             }
             props.setLoadingState(false);
-            onClose();
+            props.onClose();
         } catch (err) {
-            setShowUserPopper(false);
             props.setLoadingState(false);
             handleError(err);
         }
     };
 
-    const onClose = () => {
-        setShowUserPopper(false);
-        props.onClose();
-    };
-
-    const handleUserSearch = async (e: ChangeEvent<HTMLInputElement>) => {
-        const popperTarget = e.currentTarget;
-        setPopperTarget(popperTarget);
-        const val = popperTarget.value;
-        let showUserPopper = false;
-        let foundUsers: UserData[] = [];
-        if (val) {
-            const users = await service.getUserByName(abortController.current, val);
-            if (users) {
-                showUserPopper = true;
-                foundUsers = users;
-            }
-        }
-        setShowUserPopper(showUserPopper);
-        setFoundUsers(foundUsers);
-    };
-
-    return <>
-        <Dialog onClose={onClose} open={open} aria-labelledby='form-dialog-title'>
-            <DialogTitle id='form-dialog-title'>Add User to Namespace</DialogTitle>
-            <DialogContent>
-                <DialogContentText>
-                    Enter the Login Name of the User you want to add.
-                    </DialogContentText>
-                <TextField
-                    autoFocus
-                    margin='dense'
-                    id='name'
-                    autoComplete='off'
-                    label='Open VSX User'
-                    fullWidth
-                    onChange={handleUserSearch}
-                    onKeyDown={(e: KeyboardEvent) => {
-                        if (e.key === "Enter" && foundUsers.length === 1) {
-                            e.preventDefault();
-                            addUser(foundUsers[0]);
-                        }
-                    }}
-                />
-            </DialogContent>
-            <DialogActions>
-                <Button onClick={onClose} color='secondary'>
-                    Cancel
-                </Button>
-            </DialogActions>
-        </Dialog>
-        <Popper
-            sx={{ zIndex: 'tooltip' }}
-            open={showUserPopper}
-            anchorEl={popperTarget}
-            placement='bottom'
-            transition>
-            {({ TransitionProps }) => (
-                <Fade {...TransitionProps} timeout={350}>
-                    <Paper sx={{ display: 'flex', flexDirection: 'column', width: 350 }}>
-                        {
-                            foundUsers.filter(props.filterUsers).map(foundUser => {
-                                return <Box
-                                    onClick={() => addUser(foundUser)}
-                                    key={'found' + foundUser.loginName}
-                                    sx={{
-                                        display: 'flex',
-                                        height: 60,
-                                        alignItems: 'center',
-                                        '&:hover': {
-                                            cursor: 'pointer',
-                                            bgcolor: 'action.hover'
-                                        }
-                                    }}
-                                >
-                                    <Box flex='1' marginLeft='10px'>
-                                        <Box fontWeight='bold'>
-                                            {foundUser.loginName}
-                                        </Box>
-                                        <Box fontSize='0.75rem'>
-                                            {foundUser.fullName}
-                                        </Box>
-                                    </Box>
-                                    <Box flex='1'>
-                                        <Avatar variant='rounded' src={foundUser.avatarUrl} />
-                                    </Box>
-                                </Box>;
-                            })
-                        }
-                    </Paper>
-                </Fade>
-            )}
-        </Popper>
-    </>;
+    return (
+        <AddUserDialog
+            open={props.open}
+            title='Add Member'
+            description='Enter the Login Name of the User you want to add.'
+            existingUsers={existingUsers}
+            filterUsers={props.filterUsers}
+            onClose={props.onClose}
+            onAddUser={handleAddUser}
+        />
+    );
 };

package/src/pages/user/add-user-dialog.tsx

@@ -0,0 +1,141 @@
+/******************************************************************************
+ * 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, useState, useContext, useEffect, useRef } from 'react';
+import {
+    Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button,
+    TextField, Autocomplete, Box, Avatar
+} from '@mui/material';
+import type { UserData } from '../../extension-registry-types';
+import { MainContext } from '../../context';
+
+export interface AddUserDialogProps {
+    open: boolean;
+    title: string;
+    description: string;
+    existingUsers: UserData[];
+    onClose: () => void;
+    onAddUser: (user: UserData) => void;
+    filterUsers?: (user: UserData) => boolean;
+}
+
+export const AddUserDialog: FC<AddUserDialogProps> = ({
+    open,
+    title,
+    description,
+    existingUsers,
+    onClose,
+    onAddUser,
+    filterUsers: externalFilter
+}) => {
+    const { service, handleError } = useContext(MainContext);
+    const [options, setOptions] = useState<UserData[]>([]);
+    const [loading, setLoading] = useState(false);
+    const abortController = useRef<AbortController>(new AbortController());
+    const debounceTimeout = useRef<ReturnType<typeof setTimeout>>();
+
+    useEffect(() => {
+        return () => {
+            abortController.current.abort();
+            clearTimeout(debounceTimeout.current);
+        };
+    }, []);
+
+    const isUserExcluded = (user: UserData) =>
+        existingUsers.some(u => u.loginName === user.loginName && u.provider === user.provider)
+        || (externalFilter && !externalFilter(user));
+
+    const handleInputChange = (_: unknown, value: string) => {
+        clearTimeout(debounceTimeout.current);
+        if (!value) {
+            setOptions([]);
+            setLoading(false);
+            return;
+        }
+        setLoading(true);
+        debounceTimeout.current = setTimeout(async () => {
+            const users = await service.getUserByName(abortController.current, value);
+            if (users) {
+                setOptions(users);
+            }
+            setLoading(false);
+        }, 300);
+    };
+
+    const handleSelect = (_: unknown, user: UserData | null) => {
+        if (!user) return;
+        if (isUserExcluded(user)) {
+            handleError({ message: `User ${user.loginName} is already added.` });
+            return;
+        }
+        onAddUser(user);
+        onClose();
+    };
+
+    const handleClose = () => {
+        setOptions([]);
+        onClose();
+    };
+
+    return (
+        <Dialog onClose={handleClose} open={open} maxWidth='sm' fullWidth>
+            <DialogTitle>{title}</DialogTitle>
+            <DialogContent>
+                <DialogContentText>{description}</DialogContentText>
+                <Autocomplete<UserData>
+                    options={options}
+                    loading={loading}
+                    filterOptions={(opts) => opts.filter(u => !isUserExcluded(u))}
+                    getOptionLabel={(option) => option.loginName}
+                    isOptionEqualToValue={(option, value) =>
+                        option.loginName === value.loginName && option.provider === value.provider
+                    }
+                    onInputChange={handleInputChange}
+                    onChange={handleSelect}
+                    renderOption={(props, user) => (
+                        <Box
+                            component='li'
+                            {...props}
+                            key={user.loginName + user.provider}
+                            sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}
+                        >
+                            <Avatar
+                                variant='rounded'
+                                src={user.avatarUrl}
+                                sx={{ width: 36, height: 36 }}
+                            />
+                            <Box>
+                                <Box fontWeight='bold'>{user.loginName}</Box>
+                                <Box fontSize='0.75rem' color='text.secondary'>{user.fullName}</Box>
+                            </Box>
+                        </Box>
+                    )}
+                    renderInput={(params) => (
+                        <TextField
+                            {...params}
+                            autoFocus
+                            margin='dense'
+                            label='Search User'
+                            fullWidth
+                        />
+                    )}
+                />
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={handleClose} color='secondary'>
+                    Cancel
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+};

package/src/pages/user/avatar.tsx

@@ -11,8 +11,8 @@
 import { FunctionComponent, useContext, useRef, useState } from 'react';
 import { Avatar, Menu, Typography, MenuItem, Link, Divider, IconButton } from '@mui/material';
 import { Link as RouteLink } from 'react-router-dom';
-import { UserSettingsRoutes } from './user-settings';
-import { AdminDashboardRoutes } from '../admin-dashboard/admin-dashboard';
+import { UserSettingsRoutes } from './user-settings-routes';
+import { AdminDashboardRoutes } from '../admin-dashboard/admin-routes';
 import { MainContext } from '../../context';
 import { LogoutForm } from './logout';
 

package/src/pages/user/generate-access-token-dialog.tsx

@@ -0,0 +1,49 @@
+/********************************************************************************
+ * Copyright (c) 2019 TypeFox and others
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+import { FunctionComponent, useContext, useRef, useState } from 'react';
+import { Button } from '@mui/material';
+import { GenerateTokenDialog } from '../../components/generate-token-dialog';
+import { isError } from '../../extension-registry-types';
+import { MainContext } from '../../context';
+
+export const GenerateAccessTokenDialog: FunctionComponent<GenerateTokenDialogProps> = props => {
+    const context = useContext(MainContext);
+    const abortController = useRef<AbortController>(new AbortController());
+    const [open, setOpen] = useState(false);
+
+    const handleGenerate = async (description: string): Promise<string> => {
+        if (!context.user) {
+            throw new Error('Not logged in');
+        }
+        const token = await context.service.createAccessToken(abortController.current, context.user, description);
+        if (isError(token)) {
+            throw token;
+        }
+
+        props.handleTokenGenerated();
+
+        return token.value!;
+    };
+
+    return <>
+        <Button variant='outlined' onClick={() => setOpen(true)}>Generate new token</Button>
+        <GenerateTokenDialog
+            open={open}
+            onClose={() => setOpen(false)}
+            onGenerate={handleGenerate}
+            onError={context.handleError}
+        />
+    </>;
+};
+
+export interface GenerateTokenDialogProps {
+    handleTokenGenerated: () => void;
+}

package/src/pages/user/user-namespace-extension-list-item.tsx

@@ -16,9 +16,9 @@ import { Link as RouteLink, useNavigate } from 'react-router-dom';
 import { MainContext } from '../../context';
 import { createRoute } from '../../utils';
 import { Timestamp } from '../../components/timestamp';
-import { ExtensionDetailRoutes } from '../extension-detail/extension-detail';
+import { ExtensionDetailRoutes } from '../extension-detail/extension-detail-routes';
 import DeleteIcon from '@mui/icons-material/Delete';
-import { UserSettingsRoutes } from './user-settings';
+import { UserSettingsRoutes } from './user-settings-routes';
 
 const getOpacity = (extension: Extension) => {
     if (extension.deprecated) {

package/src/pages/user/user-setting-tabs.tsx

@@ -12,7 +12,7 @@ import { ChangeEvent, ReactElement } from 'react';
 import { Tabs, Tab, useTheme, useMediaQuery } from '@mui/material';
 import { useNavigate, useParams } from 'react-router-dom';
 import { createRoute } from '../../utils';
-import { UserSettingsRoutes } from './user-settings';
+import { UserSettingsRoutes } from './user-settings-routes';
 
 export const UserSettingTabs = (): ReactElement => {
 
@@ -42,6 +42,7 @@ export const UserSettingTabs = (): ReactElement => {
             <Tab value='tokens' label='Access Tokens' />
             <Tab value='namespaces' label='Namespaces' />
             <Tab value='extensions' label='Extensions' />
+            <Tab value='customers' label='Rate Limiting' />
         </Tabs>
     );
 };

package/src/pages/user/user-settings-customer-detail.tsx

@@ -0,0 +1,39 @@
+/******************************************************************************
+ * 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 } from 'react';
+import { Box, Typography } from '@mui/material';
+import type { Customer } from '../../extension-registry-types';
+import { useUsageStats } from '../../components/rate-limiting/usage-stats/use-usage-stats';
+import { UsageStats } from '../../components/rate-limiting/customer';
+
+export interface UserSettingsCustomerDetailProps {
+    customer: Customer;
+}
+
+export const UserSettingsCustomerDetail: FC<UserSettingsCustomerDetailProps> = ({ customer }) => {
+    const { usageStats, startDate, setStartDate } = useUsageStats(customer.name);
+
+    return (
+        <Box sx={{ flex: 5, pl: { xs: 0, lg: 2 } }}>
+            <Typography variant='h4' sx={{ mb: 2 }}>{customer.name}</Typography>
+            <UsageStats
+                usageStats={usageStats}
+                customer={customer}
+                startDate={startDate}
+                onStartDateChange={setStartDate}
+                compact
+            />
+        </Box>
+    );
+};