Update demo

marmelab · Jan 31, 2025 · d25230d · d25230d
1 parent b4bfbe9
commit d25230d
Show file tree

Hide file tree

Showing 8 changed files with 102 additions and 93 deletions.
diff --git a/package.json b/package.json
@@ -39,7 +39,7 @@
         "react-dom": "^18.0.0",
         "react-router": "^6.22.0",
         "react-router-dom": "^6.22.0",
-        "recharts": "^2.1.5",
+        "recharts": "^2.15.1",
         "rrule": "^2.7.2"
     },
     "scripts": {
@@ -82,5 +82,9 @@
         "start-server-and-test": "^1.12.2",
         "typescript": "^5.1.3",
         "vite": "^5.0.11"
+    },
+    "resolutions": {
+        "react-router": "^6.28.2",
+        "react-router-dom": "^6.28.2"
     }
 }
diff --git a/src/dashboard/NewCustomers.tsx b/src/dashboard/NewCustomers.tsx
@@ -4,8 +4,8 @@ import {
     Box,
     Button,
     List,
-    ListItem,
     ListItemAvatar,
+    ListItemButton,
     ListItemText,
 } from '@mui/material';
 import CustomerIcon from '@mui/icons-material/PersonAdd';
@@ -46,8 +46,7 @@ const NewCustomers = () => {
             <List sx={{ display: isPending ? 'none' : 'block' }}>
                 {visitors
                     ? visitors.map((record: Customer) => (
-                          <ListItem
-                              button
+                          <ListItemButton
                               to={`/customers/${record.id}`}
                               component={Link}
                               key={record.id}
@@ -58,7 +57,7 @@ const NewCustomers = () => {
                               <ListItemText
                                   primary={`${record.first_name} ${record.last_name}`}
                               />
-                          </ListItem>
+                          </ListItemButton>
                       ))
                     : null}
             </List>

diff --git a/src/dashboard/PendingOrder.tsx b/src/dashboard/PendingOrder.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
 import {
     ListItem,
-    ListItemSecondaryAction,
     ListItemAvatar,
     ListItemText,
     Avatar,
     Box,
+    ListItemButton,
 } from '@mui/material';
 import { Link } from 'react-router-dom';
 import { useTranslate, useReference } from 'react-admin';
@@ -26,30 +26,9 @@ export const PendingOrder = (props: Props) => {
     });
 
     return (
-        <ListItem button component={Link} to={`/orders/${order.id}`}>
-            <ListItemAvatar>
-                {isPending ? (
-                    <Avatar />
-                ) : (
-                    <Avatar
-                        src={`${customer?.avatar}?size=32x32`}
-                        sx={{
-                            bgcolor: 'background.paper',
-                        }}
-                    />
-                )}
-            </ListItemAvatar>
-            <ListItemText
-                primary={new Date(order.date).toLocaleString('en-GB')}
-                secondary={translate('pos.dashboard.order.items', {
-                    smart_count: order.basket.length,
-                    nb_items: order.basket.length,
-                    customer_name: customer
-                        ? `${customer.first_name} ${customer.last_name}`
-                        : '',
-                })}
-            />
-            <ListItemSecondaryAction>
+        <ListItem
+            disablePadding
+            secondaryAction={
                 <Box
                     component="span"
                     sx={{
@@ -59,7 +38,32 @@ export const PendingOrder = (props: Props) => {
                 >
                     {formatNumberAsUSD(order.total, 2)}
                 </Box>
-            </ListItemSecondaryAction>
+            }
+        >
+            <ListItemButton component={Link} to={`/orders/${order.id}`}>
+                <ListItemAvatar>
+                    {isPending ? (
+                        <Avatar />
+                    ) : (
+                        <Avatar
+                            src={`${customer?.avatar}?size=32x32`}
+                            sx={{
+                                bgcolor: 'background.paper',
+                            }}
+                        />
+                    )}
+                </ListItemAvatar>
+                <ListItemText
+                    primary={new Date(order.date).toLocaleString('en-GB')}
+                    secondary={translate('pos.dashboard.order.items', {
+                        smart_count: order.basket.length,
+                        nb_items: order.basket.length,
+                        customer_name: customer
+                            ? `${customer.first_name} ${customer.last_name}`
+                            : '',
+                    })}
+                />
+            </ListItemButton>
         </ListItem>
     );
 };
diff --git a/src/dashboard/PendingReviews.tsx b/src/dashboard/PendingReviews.tsx
@@ -4,8 +4,8 @@ import {
     Box,
     Button,
     List,
-    ListItem,
     ListItemAvatar,
+    ListItemButton,
     ListItemText,
 } from '@mui/material';
 import CommentIcon from '@mui/icons-material/Comment';
@@ -54,9 +54,8 @@ const PendingReviews = () => {
         >
             <List sx={{ display }}>
                 {reviews?.map((record: Review) => (
-                    <ListItem
+                    <ListItemButton
                         key={record.id}
-                        button
                         component={Link}
                         to={`/reviews/${record.id}`}
                         alignItems="flex-start"
@@ -100,7 +99,7 @@ const PendingReviews = () => {
                                 paddingRight: 0,
                             }}
                         />
-                    </ListItem>
+                    </ListItemButton>
                 ))}
             </List>
             <Box flexGrow={1}>&nbsp;</Box>

diff --git a/src/products/GridList.tsx b/src/products/GridList.tsx
@@ -72,7 +72,7 @@ const LoadedGridList = () => {
     const { data: locks } = useGetLocks(resource!, {}, { enabled: !!resource });
     const cols = useColsForWidth();
     const createPath = useCreatePath();
-    const firstLockRecordId = React.useRef<Identifier>();
+    const firstLockRecordId = React.useRef<Identifier | undefined>(undefined);
 
     if (!data) return null;
 

diff --git a/src/reviews/ReviewItem.tsx b/src/reviews/ReviewItem.tsx
@@ -1,15 +1,14 @@
 import * as React from 'react';
 import { Fragment } from 'react';
-import { ListItem, ListItemAvatar, ListItemText } from '@mui/material';
+import { ListItemAvatar, ListItemButton, ListItemText } from '@mui/material';
 import {
     useCreatePath,
     ReferenceField,
     FunctionField,
-    Link,
     TextField,
     useRecordContext,
 } from 'react-admin';
-
+import { Link } from 'react-router-dom';
 import AvatarField from '../visitors/AvatarField';
 import { Review, Customer } from './../types';
 
@@ -20,59 +19,53 @@ export const ReviewItem = () => {
         return null;
     }
     return (
-        <Link
+        <ListItemButton
+            component={Link}
             to={createPath({
                 resource: 'reviews',
                 type: 'edit',
                 id: record.id,
             })}
-            underline="none"
-            color="inherit"
         >
-            <ListItem button>
-                <ListItemAvatar>
-                    <ReferenceField
-                        source="customer_id"
-                        reference="customers"
-                        link={false}
-                    >
-                        <AvatarField size="40" />
-                    </ReferenceField>
-                </ListItemAvatar>
-                <ListItemText
-                    primary={
-                        <Fragment>
-                            <ReferenceField
-                                source="customer_id"
-                                reference="customers"
-                                link={false}
-                            >
-                                <FunctionField<Customer>
-                                    render={record =>
-                                        record
-                                            ? `${record.first_name} ${record.last_name}`
-                                            : ''
-                                    }
-                                    variant="subtitle1"
-                                />
-                            </ReferenceField>{' '}
-                            on{' '}
-                            <ReferenceField
-                                source="product_id"
-                                reference="products"
-                                link={false}
-                            >
-                                <TextField
-                                    source="reference"
-                                    variant="subtitle1"
-                                />
-                            </ReferenceField>
-                        </Fragment>
-                    }
-                    secondary={record.comment}
-                    secondaryTypographyProps={{ noWrap: true }}
-                />
-            </ListItem>
-        </Link>
+            <ListItemAvatar>
+                <ReferenceField
+                    source="customer_id"
+                    reference="customers"
+                    link={false}
+                >
+                    <AvatarField size="40" />
+                </ReferenceField>
+            </ListItemAvatar>
+            <ListItemText
+                primary={
+                    <Fragment>
+                        <ReferenceField
+                            source="customer_id"
+                            reference="customers"
+                            link={false}
+                        >
+                            <FunctionField<Customer>
+                                render={record =>
+                                    record
+                                        ? `${record.first_name} ${record.last_name}`
+                                        : ''
+                                }
+                                variant="subtitle1"
+                            />
+                        </ReferenceField>{' '}
+                        on{' '}
+                        <ReferenceField
+                            source="product_id"
+                            reference="products"
+                            link={false}
+                        >
+                            <TextField source="reference" variant="subtitle1" />
+                        </ReferenceField>
+                    </Fragment>
+                }
+                secondary={record.comment}
+                secondaryTypographyProps={{ noWrap: true }}
+            />
+        </ListItemButton>
     );
 };
diff --git a/src/visitors/DesktopGrid.tsx b/src/visitors/DesktopGrid.tsx
@@ -3,6 +3,7 @@ import { Box, Card, CardContent, IconButton, useTheme } from '@mui/material';
 import { Link as RouterLink } from 'react-router-dom';
 
 import {
+    FieldProps,
     RecordContextProvider,
     useCreatePath,
     useListContext,
@@ -82,7 +83,9 @@ const DesktopGrid = ({ children }: { children: ReactElement[] }) => {
                                 </IconButton>
                             </Box>
                             {Children.map(children, field => {
-                                const fieldName = field.props.source;
+                                const fieldName = (
+                                    field as ReactElement<FieldProps>
+                                ).props.source;
 
                                 // We already display the customer above
                                 if (fieldName === 'customer_id') {

diff --git a/vite.config.ts b/vite.config.ts
@@ -14,14 +14,21 @@ export default defineConfig(async () => {
         for (const dirName of packages) {
             if (dirName === 'create-react-admin') continue;
             // eslint-disable-next-line prettier/prettier
-            const packageJson = await import(
-                path.resolve(__dirname, '../packages', dirName, 'package.json'),
-                { assert: { type: 'json' } }
+            const packageJson = JSON.parse(
+                fs.readFileSync(
+                    path.resolve(
+                        __dirname,
+                        '../packages',
+                        dirName,
+                        'package.json'
+                    ),
+                    'utf8'
+                )
             );
-            aliases[packageJson.default.name] = path.resolve(
+            aliases[packageJson.name] = path.resolve(
                 __dirname,
                 `${path.resolve('../')}/packages/${
-                    packageJson.default.name.split('@react-admin/')[1]
+                    packageJson.name.split('@react-admin/')[1]
                 }/src`
             );
         }