From 4891a5daf5e1f563f1c209299ab566f93630f683 Mon Sep 17 00:00:00 2001
From: erwanMarmelab <erwan@marmelab.com>
Date: Fri, 7 Jun 2024 16:52:27 +0200
Subject: [PATCH 01/31] Update demo -> WIP

---
 packages/demo/.env.local-example              |   1 +
 packages/demo/index.html                      |   3 +-
 packages/demo/package.json                    |   7 +-
 packages/demo/src/Header.tsx                  |  10 +-
 packages/demo/src/Layout.tsx                  |  38 +-
 packages/demo/src/authProvider.ts             |  37 +-
 packages/demo/src/companies/CompanyEdit.tsx   |  43 +-
 .../demo/src/companies/CompanyListFilter.tsx  |   4 +-
 packages/demo/src/companies/LogoField.tsx     |   4 +-
 packages/demo/src/contacts/Avatar.tsx         |   1 +
 packages/demo/src/contacts/ContactAside.tsx   |   4 +-
 packages/demo/src/contacts/ContactEdit.tsx    |   4 +-
 packages/demo/src/contacts/ContactInputs.tsx  |  71 ++-
 packages/demo/src/contacts/ContactList.tsx    |   6 +-
 .../demo/src/contacts/ContactListFilter.tsx   |  53 +--
 packages/demo/src/contacts/TagsList.tsx       |   2 +-
 packages/demo/src/contacts/TagsListEdit.tsx   |   6 +-
 packages/demo/src/dashboard/DealsChart.tsx    |   9 +-
 packages/demo/src/dashboard/DealsPipeline.tsx |   6 +-
 packages/demo/src/dashboard/HotContacts.tsx   |   2 -
 packages/demo/src/dashboard/LatestNotes.tsx   |  11 +-
 packages/demo/src/dashboard/Welcome.tsx       | 114 +++--
 packages/demo/src/dataGenerator/companies.ts  |   6 +-
 .../demo/src/dataGenerator/contactNotes.ts    |   5 +-
 packages/demo/src/dataGenerator/contacts.ts   |   5 +-
 packages/demo/src/dataGenerator/dealNotes.ts  |   9 +-
 packages/demo/src/dataGenerator/deals.ts      |   5 +-
 packages/demo/src/dataGenerator/sales.ts      |   4 +-
 packages/demo/src/dataGenerator/tags.ts       |   2 +-
 packages/demo/src/dataGenerator/tasks.ts      |   2 +-
 packages/demo/src/dataGenerator/types.ts      |   4 +-
 packages/demo/src/deals/DealCard.tsx          |   2 +-
 packages/demo/src/deals/DealColumn.tsx        | 108 +++--
 packages/demo/src/deals/DealCreate.tsx        |  81 +++-
 packages/demo/src/deals/DealList.tsx          |  10 +-
 packages/demo/src/deals/DealListContent.tsx   | 411 +++++++++---------
 packages/demo/src/deals/OnlyMineInput.tsx     |   4 +-
 packages/demo/src/deals/index.ts              |   3 +-
 packages/demo/src/deals/stages.ts             |  24 +
 packages/demo/src/index.tsx                   |  10 +-
 packages/demo/src/notes/NewNote.tsx           |   3 +-
 packages/demo/src/notes/Note.tsx              |   1 -
 packages/demo/src/notes/StatusSelector.tsx    |  56 ++-
 packages/demo/src/types.ts                    |   9 +-
 yarn.lock                                     | 257 +++++++++--
 45 files changed, 810 insertions(+), 647 deletions(-)

diff --git a/packages/demo/.env.local-example b/packages/demo/.env.local-example
index 1015947..52d792c 100644
--- a/packages/demo/.env.local-example
+++ b/packages/demo/.env.local-example
@@ -1,3 +1,4 @@
 VITE_SUPABASE_URL=http://localhost:54321
 VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0
 SUPABASE_SERVICE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImV4cCI6MTk4MzgxMjk5Nn0.EGIM96RAZx35lJzdJsyH-qQwv8Hdp7fsn3W0YpN81IU
+# SKIP_PREFLIGHT_CHECK=true
diff --git a/packages/demo/index.html b/packages/demo/index.html
index 217cf85..ac5e949 100644
--- a/packages/demo/index.html
+++ b/packages/demo/index.html
@@ -9,7 +9,7 @@
         <meta name="theme-color" content="#000000" />
         <link rel="manifest" href="./manifest.json" />
         <link rel="shortcut icon" href="./favicon.ico" />
-        <title>Posters Galore Administration</title>
+        <title>Atomic CRM</title>
         <style>
             body {
                 margin: 0;
@@ -121,6 +121,5 @@
             </div>
         </div>
     </body>
-    <script>window.global = window</script>
     <script type="module" src="/src/index.tsx"></script>
 </html>
diff --git a/packages/demo/package.json b/packages/demo/package.json
index 0cf02e8..4311720 100644
--- a/packages/demo/package.json
+++ b/packages/demo/package.json
@@ -3,6 +3,7 @@
     "version": "2.1.0",
     "private": true,
     "dependencies": {
+        "@hello-pangea/dnd": "^16.3.0",
         "@mui/icons-material": "^5.0.1",
         "@mui/material": "^5.0.2",
         "@nivo/bar": "^0.80.0",
@@ -13,10 +14,10 @@
         "faker": "~5.4.0",
         "lodash": "~4.17.5",
         "prop-types": "^15.7.2",
-        "ra-data-fakerest": "^4.0.0",
+        "ra-data-fakerest": "^4.12.0",
         "ra-supabase": "^2.1.0",
         "react": "^18.2.0",
-        "react-admin": "^4.0.0",
+        "react-admin": "^4.12.0",
         "react-beautiful-dnd": "^13.0.0",
         "react-dom": "^18.2.0",
         "react-error-boundary": "^3.1.4",
@@ -37,7 +38,7 @@
         "@types/react-dom": "^18.0.0",
         "source-map-explorer": "^2.0.0",
         "tsx": "^3.12.2",
-        "typescript": "^4.4.0",
+        "typescript": "^5.1.3",
         "web-vitals": "^1.0.1"
     },
     "scripts": {
diff --git a/packages/demo/src/Header.tsx b/packages/demo/src/Header.tsx
index 0d2ab09..1ff9f40 100644
--- a/packages/demo/src/Header.tsx
+++ b/packages/demo/src/Header.tsx
@@ -66,14 +66,8 @@ const Header = () => {
                                 />
                             </Tabs>
                         </Box>
-                        <Box display="flex">
-                            <LoadingIndicator
-                                sx={{
-                                    '& .RaLoadingIndicator-loader': {
-                                        marginTop: 2,
-                                    },
-                                }}
-                            />
+                        <Box display="flex" alignItems="center">
+                            <LoadingIndicator />
                             <UserMenu>
                                 <Logout />
                             </UserMenu>
diff --git a/packages/demo/src/Layout.tsx b/packages/demo/src/Layout.tsx
index 70231a1..da32c47 100644
--- a/packages/demo/src/Layout.tsx
+++ b/packages/demo/src/Layout.tsx
@@ -1,28 +1,26 @@
-import React, { HtmlHTMLAttributes } from 'react';
+import React, { Suspense, HtmlHTMLAttributes } from 'react';
 import { CssBaseline, Container } from '@mui/material';
-import { CoreLayoutProps } from 'react-admin';
+import { CoreLayoutProps, CheckForApplicationUpdate } from 'react-admin';
 import { ErrorBoundary } from 'react-error-boundary';
 
-import { Error } from 'react-admin';
+import { Error, Loading } from 'react-admin';
 import Header from './Header';
 
-const Layout = (props: LayoutProps) => {
-    const { children } = props;
-    return (
-        <>
-            <CssBaseline />
-            <Header />
-            <Container sx={{ maxWidth: { xl: 1280 } }}>
-                <main id="main-content">
-                    {/* @ts-ignore */}
-                    <ErrorBoundary FallbackComponent={Error}>
-                        {children}
-                    </ErrorBoundary>
-                </main>
-            </Container>
-        </>
-    );
-};
+const Layout = ({ children }: LayoutProps) => (
+    <>
+        <CssBaseline />
+        <Header />
+        <Container sx={{ maxWidth: { xl: 1280 } }}>
+            <main id="main-content">
+                {/* @ts-ignore */}
+                <ErrorBoundary FallbackComponent={Error}>
+                    <Suspense fallback={<Loading />}>{children}</Suspense>
+                </ErrorBoundary>
+            </main>
+        </Container>
+        <CheckForApplicationUpdate interval={30 * 1000} />
+    </>
+);
 
 export interface LayoutProps
     extends CoreLayoutProps,
diff --git a/packages/demo/src/authProvider.ts b/packages/demo/src/authProvider.ts
index 4b31de8..c4717b9 100644
--- a/packages/demo/src/authProvider.ts
+++ b/packages/demo/src/authProvider.ts
@@ -2,19 +2,28 @@ import { supabaseAuthProvider } from 'ra-supabase';
 import { supabase } from './supabase';
 
 export const authProvider = supabaseAuthProvider(supabase, {
-    getIdentity: async user => {
-        const { data, error } = await supabase
-            .from('sales')
-            .select('id, first_name, last_name')
-            .ilike('email', user.email as string)
-            .single();
+    // getIdentity: async user => {
+    //     const { data, error } = await supabase
+    //         .from('sales')
+    //         .select('id, first_name, last_name')
+    //         .ilike('email', user.email as string)
+    //         .single();
 
-        if (!data || error) {
-            throw new Error();
-        }
-        return {
-            id: data.id,
-            fullName: `${data.first_name} ${data.last_name}`,
-        };
-    },
+    //     if (!data || error) {
+    //         throw new Error();
+    //     }
+    //     return {
+    //         id: data.id,
+    //         fullName: `${data.first_name} ${data.last_name}`,
+    //     };
+    // },
+    getIdentity: async () => Promise.resolve(),
+    checkAuth: async () => Promise.resolve(),
+    getPermissions: async () => Promise.resolve(),
+    handleCallback: async () => Promise.resolve(),
+    checkError: async () => Promise.resolve(),
+    logout: async () => Promise.resolve(),
+    resetPassword: async () => Promise.resolve(),
+    setPassword: async () => Promise.resolve(),
+    login: async () => Promise.resolve(),
 });
diff --git a/packages/demo/src/companies/CompanyEdit.tsx b/packages/demo/src/companies/CompanyEdit.tsx
index ab77475..4e0fa01 100644
--- a/packages/demo/src/companies/CompanyEdit.tsx
+++ b/packages/demo/src/companies/CompanyEdit.tsx
@@ -7,29 +7,20 @@ import { CompanyForm } from './CompanyForm';
 import { CompanyAside } from './CompanyAside';
 import { LogoField } from './LogoField';
 
-export const CompanyEdit = () => {
-    return (
-        <Edit
-            aside={<CompanyAside link="show" />}
-            actions={false}
-            redirect="show"
-            // Remove the fts (full text search) column as it is a generated one
-            // see https://www.postgresql.org/docs/current/ddl-generated-columns.html
-            transform={({ fts, ...record }) => record}
-        >
-            <Form>
-                <CardContent>
-                    <Stack direction="row">
-                        <Avatar sx={{ mt: 1 }}>
-                            <LogoField />
-                        </Avatar>
-                        <Box ml={2} flex="1" maxWidth={796}>
-                            <CompanyForm />
-                        </Box>
-                    </Stack>
-                </CardContent>
-                <Toolbar />
-            </Form>
-        </Edit>
-    );
-};
+export const CompanyEdit = () => (
+    <Edit aside={<CompanyAside link="show" />} actions={false} redirect="show">
+        <Form>
+            <CardContent>
+                <Stack direction="row">
+                    <Avatar sx={{ mt: 1 }}>
+                        <LogoField />
+                    </Avatar>
+                    <Box ml={2} flex="1" maxWidth={796}>
+                        <CompanyForm />
+                    </Box>
+                </Stack>
+            </CardContent>
+            <Toolbar />
+        </Form>
+    </Edit>
+);
diff --git a/packages/demo/src/companies/CompanyListFilter.tsx b/packages/demo/src/companies/CompanyListFilter.tsx
index b52b911..f0356b2 100644
--- a/packages/demo/src/companies/CompanyListFilter.tsx
+++ b/packages/demo/src/companies/CompanyListFilter.tsx
@@ -17,8 +17,8 @@ import { sectors } from './sectors';
 export const CompanyListFilter = () => {
     const { identity } = useGetIdentity();
     return (
-        <Box width="13em" minWidth="13em" order={-1} mr={2} mt={7}>
-            <FilterLiveSearch source="fts@fts" />
+        <Box width="13em" minWidth="13em" order={-1} mr={2} mt={5}>
+            <FilterLiveSearch hiddenLabel />
 
             <FilterList label="Size" icon={<BusinessIcon />}>
                 {sizes.map(size => (
diff --git a/packages/demo/src/companies/LogoField.tsx b/packages/demo/src/companies/LogoField.tsx
index c7b8b7c..c8881f7 100644
--- a/packages/demo/src/companies/LogoField.tsx
+++ b/packages/demo/src/companies/LogoField.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useRecordContext } from 'react-admin';
 import { Box } from '@mui/material';
 
-import { Company, Contact } from '../types';
+import { Company } from '../types';
 
 const sizeInPixel = {
     medium: 42,
@@ -14,7 +14,7 @@ export const LogoField = ({
 }: {
     size?: 'small' | 'medium';
 }) => {
-    const record = useRecordContext<Company | Contact>();
+    const record = useRecordContext<Company>();
     if (!record) return null;
     return (
         <Box
diff --git a/packages/demo/src/contacts/Avatar.tsx b/packages/demo/src/contacts/Avatar.tsx
index 0a5d376..35f489f 100644
--- a/packages/demo/src/contacts/Avatar.tsx
+++ b/packages/demo/src/contacts/Avatar.tsx
@@ -7,6 +7,7 @@ import { Contact } from '../types';
 export const Avatar = (props: { record?: Contact }) => {
     const record = useRecordContext<Contact>(props);
     if (!record) return null;
+
     return (
         <MuiAvatar src={record.avatar}>
             {record.first_name.charAt(0)}
diff --git a/packages/demo/src/contacts/ContactAside.tsx b/packages/demo/src/contacts/ContactAside.tsx
index f62e65d..ceb4e3c 100644
--- a/packages/demo/src/contacts/ContactAside.tsx
+++ b/packages/demo/src/contacts/ContactAside.tsx
@@ -93,9 +93,7 @@ export const ContactAside = ({ link = 'edit' }: { link?: 'edit' | 'show' }) => {
                     <FunctionField<Sale>
                         source="last_name"
                         render={record =>
-                            record
-                                ? `${record.first_name} ${record.last_name}`
-                                : ''
+                            `${record.first_name} ${record.last_name}`
                         }
                     />
                 </ReferenceField>
diff --git a/packages/demo/src/contacts/ContactEdit.tsx b/packages/demo/src/contacts/ContactEdit.tsx
index 4ef001c..069da09 100644
--- a/packages/demo/src/contacts/ContactEdit.tsx
+++ b/packages/demo/src/contacts/ContactEdit.tsx
@@ -8,9 +8,7 @@ import { ContactAside } from './ContactAside';
 import { Contact } from '../types';
 
 export const ContactEdit = () => (
-    // Remove the fts (full text search) column as it is a generated one
-    // see https://www.postgresql.org/docs/current/ddl-generated-columns.html
-    <EditBase redirect="show" transform={({ fts, ...record }) => record}>
+    <EditBase redirect="show">
         <ContactEditContent />
     </EditBase>
 );
diff --git a/packages/demo/src/contacts/ContactInputs.tsx b/packages/demo/src/contacts/ContactInputs.tsx
index cfab08f..4b7a4c8 100644
--- a/packages/demo/src/contacts/ContactInputs.tsx
+++ b/packages/demo/src/contacts/ContactInputs.tsx
@@ -4,50 +4,39 @@ import {
     ReferenceInput,
     AutocompleteInput,
     BooleanInput,
-    required,
 } from 'react-admin';
 import { Divider, Box } from '@mui/material';
 
-export const ContactInputs = () => {
-    return (
-        <Box flex="1" mt={-1}>
-            <Box display="flex" width={430}>
-                <TextInput
-                    source="first_name"
-                    validate={required()}
-                    fullWidth
-                />
-                <Spacer />
-                <TextInput source="last_name" validate={required()} fullWidth />
-            </Box>
-            <Box display="flex" width={430}>
-                <TextInput source="title" fullWidth />
-                <Spacer />
-                <ReferenceInput source="company_id" reference="companies">
-                    <AutocompleteInput
-                        optionText="name"
-                        fullWidth
-                        validate={required()}
-                    />
-                </ReferenceInput>
-            </Box>
-            <Divider />
-            <Box mt={2} width={430}>
-                <TextInput source="email" fullWidth />
-            </Box>
-            <Box display="flex" width={430}>
-                <TextInput source="phone_number1" fullWidth />
-                <Spacer />
-                <TextInput source="phone_number2" fullWidth />
-            </Box>
-            <Divider />
-            <Box mt={2} width={430}>
-                <TextInput source="background" multiline fullWidth />
-                <TextInput source="avatar" fullWidth />
-                <BooleanInput source="has_newsletter" />
-            </Box>
+export const ContactInputs = () => (
+    <Box flex="1" mt={-1}>
+        <Box display="flex" width={430}>
+            <TextInput source="first_name" fullWidth />
+            <Spacer />
+            <TextInput source="last_name" fullWidth />
         </Box>
-    );
-};
+        <Box display="flex" width={430}>
+            <TextInput source="title" fullWidth />
+            <Spacer />
+            <ReferenceInput source="company_id" reference="companies">
+                <AutocompleteInput optionText="name" fullWidth />
+            </ReferenceInput>
+        </Box>
+        <Divider />
+        <Box mt={2} width={430}>
+            <TextInput source="email" fullWidth />
+        </Box>
+        <Box display="flex" width={430}>
+            <TextInput source="phone_number1" fullWidth />
+            <Spacer />
+            <TextInput source="phone_number2" fullWidth />
+        </Box>
+        <Divider />
+        <Box mt={2} width={430}>
+            <TextInput source="background" multiline fullWidth />
+            <TextInput source="avatar" fullWidth />
+            <BooleanInput source="has_newsletter" />
+        </Box>
+    </Box>
+);
 
 const Spacer = () => <Box width={20} component="span" />;
diff --git a/packages/demo/src/contacts/ContactList.tsx b/packages/demo/src/contacts/ContactList.tsx
index a33ffe0..8f40c75 100644
--- a/packages/demo/src/contacts/ContactList.tsx
+++ b/packages/demo/src/contacts/ContactList.tsx
@@ -77,9 +77,6 @@ const ContactListContent = () => {
                             </ListItemAvatar>
                             <ListItemText
                                 primary={`${contact.first_name} ${contact.last_name}`}
-                                secondaryTypographyProps={{
-                                    component: 'div',
-                                }}
                                 secondary={
                                     <>
                                         {contact.title} at{' '}
@@ -91,7 +88,8 @@ const ContactListContent = () => {
                                             <TextField source="name" />
                                         </ReferenceField>{' '}
                                         {contact.nb_notes &&
-                                            `- ${contact.nb_notes} notes `}
+                                            `- ${contact.nb_notes} notes`}
+                                        &nbsp;&nbsp;
                                         <TagsList />
                                     </>
                                 }
diff --git a/packages/demo/src/contacts/ContactListFilter.tsx b/packages/demo/src/contacts/ContactListFilter.tsx
index 96b8fb5..1b7ce5b 100644
--- a/packages/demo/src/contacts/ContactListFilter.tsx
+++ b/packages/demo/src/contacts/ContactListFilter.tsx
@@ -12,13 +12,7 @@ import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import TrendingUpIcon from '@mui/icons-material/TrendingUp';
 import LocalOfferIcon from '@mui/icons-material/LocalOffer';
 import SupervisorAccountIcon from '@mui/icons-material/SupervisorAccount';
-import {
-    endOfYesterday,
-    startOfWeek,
-    startOfMonth,
-    subMonths,
-    subWeeks,
-} from 'date-fns';
+import { endOfYesterday, startOfWeek, startOfMonth, subMonths } from 'date-fns';
 
 import { Status } from '../misc/Status';
 
@@ -29,9 +23,9 @@ export const ContactListFilter = () => {
         sort: { field: 'name', order: 'ASC' },
     });
     return (
-        <Box width="13em" minWidth="13em" order={-1} mr={2} mt={7}>
+        <Box width="13em" minWidth="13em" order={-1} mr={2} mt={5}>
             <FilterLiveSearch
-                source="fts@fts"
+                hiddenLabel
                 sx={{
                     display: 'block',
                     '& .MuiFilledInput-root': { width: '100%' },
@@ -41,49 +35,36 @@ export const ContactListFilter = () => {
                 <FilterListItem
                     label="Today"
                     value={{
-                        'last_seen@gte': endOfYesterday().toISOString(),
-                        'last_seen@lte': undefined,
+                        last_seen_gte: endOfYesterday().toISOString(),
+                        last_seen_lte: undefined,
                     }}
                 />
                 <FilterListItem
                     label="This week"
                     value={{
-                        'last_seen@gte': startOfWeek(new Date()).toISOString(),
-                        'last_seen@lte': undefined,
-                    }}
-                />
-                <FilterListItem
-                    label="Last week"
-                    value={{
-                        'last_seen@gte': subWeeks(
-                            startOfWeek(new Date()),
-                            1
-                        ).toISOString(),
-                        'last_seen@lte': startOfWeek(new Date()).toISOString(),
+                        last_seen_gte: startOfWeek(new Date()).toISOString(),
+                        last_seen_lte: undefined,
                     }}
                 />
                 <FilterListItem
-                    label="This month"
+                    label="Before this week"
                     value={{
-                        'last_seen@gte': startOfMonth(new Date()).toISOString(),
-                        'last_seen@lte': undefined,
+                        last_seen_gte: undefined,
+                        last_seen_lte: startOfWeek(new Date()).toISOString(),
                     }}
                 />
                 <FilterListItem
-                    label="Last month"
+                    label="Before this month"
                     value={{
-                        'last_seen@gte': subMonths(
-                            startOfMonth(new Date()),
-                            1
-                        ).toISOString(),
-                        'last_seen@lte': startOfMonth(new Date()).toISOString(),
+                        last_seen_gte: undefined,
+                        last_seen_lte: startOfMonth(new Date()).toISOString(),
                     }}
                 />
                 <FilterListItem
-                    label="Earlier"
+                    label="Before last month"
                     value={{
-                        'last_seen@gte': undefined,
-                        'last_seen@lte': subMonths(
+                        last_seen_gte: undefined,
+                        last_seen_lte: subMonths(
                             startOfMonth(new Date()),
                             1
                         ).toISOString(),
@@ -140,7 +121,7 @@ export const ContactListFilter = () => {
                                     }}
                                 />
                             }
-                            value={{ 'tags@cs': `{${record.id}}` }}
+                            value={{ tags: [record.id] }}
                         />
                     ))}
             </FilterList>
diff --git a/packages/demo/src/contacts/TagsList.tsx b/packages/demo/src/contacts/TagsList.tsx
index e3fb590..8425bd2 100644
--- a/packages/demo/src/contacts/TagsList.tsx
+++ b/packages/demo/src/contacts/TagsList.tsx
@@ -26,7 +26,7 @@ export const TagsList = () => (
         source="tags"
         reference="tags"
     >
-        <SingleFieldList linkType={false} component="span">
+        <SingleFieldList linkType={false}>
             <ColoredChipField source="name" variant="outlined" size="small" />
         </SingleFieldList>
     </ReferenceArrayField>
diff --git a/packages/demo/src/contacts/TagsListEdit.tsx b/packages/demo/src/contacts/TagsListEdit.tsx
index 81f463c..6715376 100644
--- a/packages/demo/src/contacts/TagsListEdit.tsx
+++ b/packages/demo/src/contacts/TagsListEdit.tsx
@@ -61,9 +61,7 @@ export const TagsListEdit = () => {
     };
 
     const handleDeleteTag = (id: Identifier) => {
-        const tags: Identifier[] = record.tags.filter(
-            (tagId: Identifier) => tagId !== id
-        );
+        const tags = record.tags.filter(tagId => tagId !== id);
         update('contacts', {
             id: record.id,
             data: { tags },
@@ -72,7 +70,7 @@ export const TagsListEdit = () => {
     };
 
     const handleAddTag = (id: Identifier) => {
-        const tags: Identifier[] = [...record.tags, id];
+        const tags = [...record.tags, id];
         update('contacts', {
             id: record.id,
             data: { tags },
diff --git a/packages/demo/src/dashboard/DealsChart.tsx b/packages/demo/src/dashboard/DealsChart.tsx
index b0e26d2..831594c 100644
--- a/packages/demo/src/dashboard/DealsChart.tsx
+++ b/packages/demo/src/dashboard/DealsChart.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useEffect, useState } from 'react';
+import { useMemo } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import { Box, Link } from '@mui/material';
 import AttachMoneyIcon from '@mui/icons-material/AttachMoney';
@@ -24,10 +24,9 @@ export const DealsChart = () => {
             order: 'ASC',
         },
     });
-    const [months, setMonths] = useState<any[]>([]);
 
-    useEffect(() => {
-        if (!data) return;
+    const months = useMemo(() => {
+        if (!data) return [];
         const dealsByMonth = data.reduce((acc, deal) => {
             const month = startOfMonth(
                 deal.start_at ? new Date(deal.start_at) : new Date()
@@ -66,7 +65,7 @@ export const DealsChart = () => {
             };
         });
 
-        setMonths(amountByMonth);
+        return amountByMonth;
     }, [data]);
 
     if (isLoading) return null; // FIXME return skeleton instead
diff --git a/packages/demo/src/dashboard/DealsPipeline.tsx b/packages/demo/src/dashboard/DealsPipeline.tsx
index 7e6a7b6..9a6996a 100644
--- a/packages/demo/src/dashboard/DealsPipeline.tsx
+++ b/packages/demo/src/dashboard/DealsPipeline.tsx
@@ -19,8 +19,8 @@ export const DealsPipeline = () => {
         'deals',
         {
             pagination: { page: 1, perPage: 10 },
-            sort: { field: 'updated_at', order: 'DESC' },
-            filter: { 'stage@neq': 'lost', sales_id: identity?.id },
+            sort: { field: 'last_seen', order: 'DESC' },
+            filter: { stage_neq: 'lost', sales_id: identity?.id },
         },
         { enabled: Number.isInteger(identity?.id) }
     );
@@ -52,14 +52,12 @@ export const DealsPipeline = () => {
                     color="textSecondary"
                     component={RouterLink}
                     to="/deals"
-                    id="deals-pipeline"
                 >
                     Deals Pipeline
                 </Link>
             </Box>
             <Card>
                 <SimpleList<Deal>
-                    aria-describedby="deals-pipeline"
                     resource="deals"
                     linkType="show"
                     data={getOrderedDeals(data)}
diff --git a/packages/demo/src/dashboard/HotContacts.tsx b/packages/demo/src/dashboard/HotContacts.tsx
index f4b4611..7c1026c 100644
--- a/packages/demo/src/dashboard/HotContacts.tsx
+++ b/packages/demo/src/dashboard/HotContacts.tsx
@@ -35,14 +35,12 @@ export const HotContacts = () => {
                     color="textSecondary"
                     component={RouterLink}
                     to="/contacts"
-                    id="hot-contacts"
                 >
                     Hot contacts
                 </Link>
             </Box>
             <Card>
                 <SimpleList<Contact>
-                    aria-describedby="hot-contacts"
                     linkType="show"
                     data={contactData}
                     total={contactTotal}
diff --git a/packages/demo/src/dashboard/LatestNotes.tsx b/packages/demo/src/dashboard/LatestNotes.tsx
index 86136f1..d80a3b9 100644
--- a/packages/demo/src/dashboard/LatestNotes.tsx
+++ b/packages/demo/src/dashboard/LatestNotes.tsx
@@ -58,22 +58,17 @@ export const LatestNotes = () => {
                 <Box ml={2} mr={2} display="flex">
                     <NoteIcon color="disabled" fontSize="large" />
                 </Box>
-                <Typography
-                    variant="h5"
-                    color="textSecondary"
-                    id="latest-notes"
-                >
+                <Typography variant="h5" color="textSecondary">
                     My Latest Notes
                 </Typography>
             </Box>
             <Card>
-                <CardContent role="list" aria-describedby="latest-notes">
+                <CardContent>
                     {allNotes.map(note => (
                         <Box
                             id={`${note.type}_${note.id}`}
                             key={`${note.type}_${note.id}`}
                             sx={{ marginBottom: 2 }}
-                            role="listitem"
                         >
                             <Typography variant="body2" color="textSecondary">
                                 on{' '}
@@ -136,7 +131,7 @@ const Contact = ({ note }: any) => (
         >
             <FunctionField<ContactType>
                 variant="body2"
-                render={(contact?: ContactType) =>
+                render={contact =>
                     contact ? `${contact.first_name} ${contact.last_name}` : ''
                 }
             />
diff --git a/packages/demo/src/dashboard/Welcome.tsx b/packages/demo/src/dashboard/Welcome.tsx
index 038bf4b..585ce91 100644
--- a/packages/demo/src/dashboard/Welcome.tsx
+++ b/packages/demo/src/dashboard/Welcome.tsx
@@ -9,62 +9,60 @@ import {
 import HomeIcon from '@mui/icons-material/Home';
 import CodeIcon from '@mui/icons-material/Code';
 
-export const Welcome = () => {
-    return (
-        <Card
-            sx={{
-                background: `#c5dedd`,
-                color: 'rgba(0, 0, 0, 0.87)',
-                padding: '1em',
-                marginBottom: '1em',
-                marginTop: '2em',
-                [`& .MuiCardActions-root`]: {
-                    p: 2,
-                    mt: -2,
-                    mb: -1,
-                    flexDirection: 'column',
-                    '& a': {
-                        mb: 1,
-                        color: 'rgba(0, 0, 0, 0.87)',
-                        backgroundColor: 'white',
-                        marginLeft: '0 !important',
-                    },
+export const Welcome = () => (
+    <Card
+        sx={{
+            background: `#c5dedd`,
+            color: 'rgba(0, 0, 0, 0.87)',
+            padding: '1em',
+            marginBottom: '1em',
+            marginTop: '2em',
+            [`& .MuiCardActions-root`]: {
+                p: 2,
+                mt: -2,
+                mb: -1,
+                flexDirection: 'column',
+                '& a': {
+                    mb: 1,
+                    color: 'rgba(0, 0, 0, 0.87)',
+                    backgroundColor: 'white',
+                    marginLeft: '0 !important',
                 },
-            }}
-        >
-            <CardContent>
-                <Typography variant="h5" gutterBottom>
-                    CRM demo
-                </Typography>
-                <Typography gutterBottom>
-                    This app runs in the browser, and relies on a mock REST API.
-                    Feel free to explore and modify the data - it's local to
-                    your computer, and will reset each time you reload.
-                </Typography>
-                <Typography gutterBottom>
-                    It was built using react-admin, an open-source framework.
-                    The code for this demo is also open-source. Reading it is a
-                    great way to learn react-admin!
-                </Typography>
-            </CardContent>
-            <CardActions>
-                <Button
-                    variant="contained"
-                    fullWidth
-                    href="https://marmelab.com/react-admin"
-                    startIcon={<HomeIcon />}
-                >
-                    React-admin site
-                </Button>
-                <Button
-                    variant="contained"
-                    fullWidth
-                    href="https://github.com/marmelab/react-admin/tree/master/examples/crm"
-                    startIcon={<CodeIcon />}
-                >
-                    Source of this demo
-                </Button>
-            </CardActions>
-        </Card>
-    );
-};
+            },
+        }}
+    >
+        <CardContent>
+            <Typography variant="h5" gutterBottom>
+                CRM demo
+            </Typography>
+            <Typography gutterBottom>
+                This app runs in the browser, and relies on a mock REST API.
+                Feel free to explore and modify the data - it's local to your
+                computer, and will reset each time you reload.
+            </Typography>
+            <Typography gutterBottom>
+                It was built using react-admin, an open-source framework. The
+                code for this demo is also open-source. Reading it is a great
+                way to learn react-admin!
+            </Typography>
+        </CardContent>
+        <CardActions>
+            <Button
+                variant="contained"
+                fullWidth
+                href="https://marmelab.com/react-admin"
+                startIcon={<HomeIcon />}
+            >
+                React-admin site
+            </Button>
+            <Button
+                variant="contained"
+                fullWidth
+                href="https://github.com/marmelab/react-admin/tree/master/examples/crm"
+                startIcon={<CodeIcon />}
+            >
+                Source of this demo
+            </Button>
+        </CardActions>
+    </Card>
+);
diff --git a/packages/demo/src/dataGenerator/companies.ts b/packages/demo/src/dataGenerator/companies.ts
index c4effc2..242101f 100644
--- a/packages/demo/src/dataGenerator/companies.ts
+++ b/packages/demo/src/dataGenerator/companies.ts
@@ -22,13 +22,13 @@ const sizes = [1, 10, 50, 250, 500];
 
 const regex = /\W+/;
 
-export const generateCompanies = (db: Pick<Db, 'sales'>): Company[] => {
+export const generateCompanies = (db: Db): Company[] => {
     return Array.from(Array(55).keys()).map(id => {
         const name = company.companyName();
         return {
             id,
             name: name,
-            logo: `/logos/${id}.png`,
+            logo: `./logos/${id}.png`,
             sector: random.arrayElement(sectors),
             size: random.arrayElement(sizes) as 1 | 10 | 50 | 250 | 500,
             linkedIn: `https://www.linkedin.com/company/${name
@@ -44,7 +44,7 @@ export const generateCompanies = (db: Pick<Db, 'sales'>): Company[] => {
             nb_deals: 0,
             // at least 1/3rd of companies for Jane Doe
             sales_id:
-                random.number(2) === 0 ? 1 : random.arrayElement(db.sales).id,
+                random.number(2) === 0 ? 0 : random.arrayElement(db.sales).id,
             created_at: randomDate().toISOString(),
         };
     });
diff --git a/packages/demo/src/dataGenerator/contactNotes.ts b/packages/demo/src/dataGenerator/contactNotes.ts
index a26433c..bb70acd 100644
--- a/packages/demo/src/dataGenerator/contactNotes.ts
+++ b/packages/demo/src/dataGenerator/contactNotes.ts
@@ -7,12 +7,11 @@ import { randomDate } from './utils';
 const type = ['Email', 'Call', 'Call', 'Call', 'Call', 'Meeting', 'Reminder'];
 const status = ['cold', 'cold', 'cold', 'warm', 'warm', 'hot', 'in-contract'];
 
-export const generateContactNotes = (
-    db: Pick<Db, 'contacts'>
-): ContactNote[] => {
+export const generateContactNotes = (db: Db): ContactNote[] => {
     return Array.from(Array(1200).keys()).map(id => {
         const contact = random.arrayElement(db.contacts);
         const date = randomDate(new Date(contact.first_seen)).toISOString();
+        contact.nb_notes++;
         contact.last_seen = date > contact.last_seen ? date : contact.last_seen;
         return {
             id,
diff --git a/packages/demo/src/dataGenerator/contacts.ts b/packages/demo/src/dataGenerator/contacts.ts
index 5ad586f..0586c04 100644
--- a/packages/demo/src/dataGenerator/contacts.ts
+++ b/packages/demo/src/dataGenerator/contacts.ts
@@ -21,9 +21,7 @@ const maxContacts = {
     500: 50,
 };
 
-export const generateContacts = (
-    db: Pick<Db, 'companies' | 'tags'>
-): Contact[] => {
+export const generateContacts = (db: Db): Contact[] => {
     const nbAvailblePictures = 223;
     let numberOfContacts = 0;
 
@@ -78,6 +76,7 @@ export const generateContacts = (
                 .arrayElements(db.tags, random.arrayElement([0, 0, 0, 1, 1, 2]))
                 .map(tag => tag.id), // finalize
             sales_id: company.sales_id,
+            nb_notes: 0,
         };
     });
 };
diff --git a/packages/demo/src/dataGenerator/dealNotes.ts b/packages/demo/src/dataGenerator/dealNotes.ts
index 6bd4252..d59b627 100644
--- a/packages/demo/src/dataGenerator/dealNotes.ts
+++ b/packages/demo/src/dataGenerator/dealNotes.ts
@@ -5,20 +5,17 @@ import { randomDate } from './utils';
 
 const type = ['Email', 'Call', 'Call', 'Call', 'Call', 'Meeting', 'Reminder'];
 
-export const generateDealNotes = (db: Pick<Db, 'companies' | 'deals'>) => {
+export const generateDealNotes = (db: Db) => {
     return Array.from(Array(300).keys()).map(id => {
         const deal = random.arrayElement(db.deals);
+        deal.nb_notes++;
         return {
             id,
             deal_id: deal.id,
             type: random.arrayElement(type),
             text: lorem.paragraphs(random.number({ min: 1, max: 4 })),
             date: randomDate(
-                new Date(
-                    db.companies.find(
-                        company => company.id == deal.company_id
-                    ).created_at
-                )
+                new Date(db.companies[deal.company_id as number].created_at)
             ).toISOString(),
             sales_id: deal.sales_id,
         };
diff --git a/packages/demo/src/dataGenerator/deals.ts b/packages/demo/src/dataGenerator/deals.ts
index 122ba13..233553e 100644
--- a/packages/demo/src/dataGenerator/deals.ts
+++ b/packages/demo/src/dataGenerator/deals.ts
@@ -22,9 +22,7 @@ const stages = [
 ];
 //const tags = ["new deal", "upsell", "SAV"];
 
-export const generateDeals = (
-    db: Pick<Db, 'companies' | 'contacts'>
-): Deal[] => {
+export const generateDeals = (db: Db): Deal[] => {
     const deals = Array.from(Array(50).keys()).map(id => {
         const company = random.arrayElement(db.companies);
         company.nb_deals++;
@@ -53,6 +51,7 @@ export const generateDeals = (
             ).toISOString(),
             sales_id: company.sales_id,
             index: 0,
+            nb_notes: 0,
         };
     });
     // compute index based on stage
diff --git a/packages/demo/src/dataGenerator/sales.ts b/packages/demo/src/dataGenerator/sales.ts
index c8f38c7..d0e0739 100644
--- a/packages/demo/src/dataGenerator/sales.ts
+++ b/packages/demo/src/dataGenerator/sales.ts
@@ -1,6 +1,8 @@
 import { name, internet } from 'faker/locale/en_US';
 
-export const generateSales = () => {
+import { Db } from './types';
+
+export const generateSales = (_: Db) => {
     const randomSales = Array.from(Array(10).keys()).map(id => {
         const first_name = name.firstName();
         const last_name = name.lastName();
diff --git a/packages/demo/src/dataGenerator/tags.ts b/packages/demo/src/dataGenerator/tags.ts
index bc75a2e..fd275ac 100644
--- a/packages/demo/src/dataGenerator/tags.ts
+++ b/packages/demo/src/dataGenerator/tags.ts
@@ -20,6 +20,6 @@ const tags = [
     { id: 5, name: 'vip', color: '#dbe7e4' },
 ];
 
-export const generateTags = () => {
+export const generateTags = (_: Db) => {
     return [...tags];
 };
diff --git a/packages/demo/src/dataGenerator/tasks.ts b/packages/demo/src/dataGenerator/tasks.ts
index 3581f0b..a557d69 100644
--- a/packages/demo/src/dataGenerator/tasks.ts
+++ b/packages/demo/src/dataGenerator/tasks.ts
@@ -31,7 +31,7 @@ const type = [
     'None',
 ];
 
-export const generateTasks = (db: Pick<Db, 'contacts'>) => {
+export const generateTasks = (db: Db) => {
     return Array.from(Array(400).keys()).map(id => {
         const contact = random.arrayElement(db.contacts);
         return {
diff --git a/packages/demo/src/dataGenerator/types.ts b/packages/demo/src/dataGenerator/types.ts
index 2828b5f..32dbfa6 100644
--- a/packages/demo/src/dataGenerator/types.ts
+++ b/packages/demo/src/dataGenerator/types.ts
@@ -1,5 +1,5 @@
 import { RaRecord } from 'react-admin';
-import { Company, Contact, ContactNote, Deal, Tag } from '../types';
+import { Company, Contact, ContactNote, Deal, Sale, Tag } from '../types';
 
 export interface Db {
     companies: Company[];
@@ -7,7 +7,7 @@ export interface Db {
     contactNotes: ContactNote[];
     deals: Deal[];
     dealNotes: RaRecord[];
-    sales: RaRecord[];
+    sales: Sale[];
     tags: Tag[];
     tasks: RaRecord[];
 }
diff --git a/packages/demo/src/deals/DealCard.tsx b/packages/demo/src/deals/DealCard.tsx
index 0e90e74..311dafa 100644
--- a/packages/demo/src/deals/DealCard.tsx
+++ b/packages/demo/src/deals/DealCard.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ReferenceField, useRedirect } from 'react-admin';
 import { Box, Card, Typography } from '@mui/material';
-import { Draggable } from 'react-beautiful-dnd';
+import { Draggable } from '@hello-pangea/dnd';
 
 import { LogoField } from '../companies/LogoField';
 import { Deal } from '../types';
diff --git a/packages/demo/src/deals/DealColumn.tsx b/packages/demo/src/deals/DealColumn.tsx
index 4429431..9f88028 100644
--- a/packages/demo/src/deals/DealColumn.tsx
+++ b/packages/demo/src/deals/DealColumn.tsx
@@ -1,67 +1,59 @@
-import * as React from 'react';
+import { Droppable } from '@hello-pangea/dnd';
 import { Box, Typography } from '@mui/material';
-import { Droppable } from 'react-beautiful-dnd';
-import { Identifier } from 'react-admin';
 
+import { Deal } from '../types';
 import { DealCard } from './DealCard';
 import { stageNames } from './stages';
-import { RecordMap } from './DealListContent';
 
 export const DealColumn = ({
     stage,
-    dealIds,
-    data,
+    deals,
 }: {
     stage: string;
-    dealIds: Identifier[];
-    data: RecordMap;
-}) => {
-    return (
-        <Box
-            sx={{
-                flex: 1,
-                paddingTop: '8px',
-                paddingBottom: '16px',
-                bgcolor: '#eaeaee',
-                '&:first-child': {
-                    paddingLeft: '5px',
-                    borderTopLeftRadius: 5,
-                },
-                '&:last-child': {
-                    paddingRight: '5px',
-                    borderTopRightRadius: 5,
-                },
-            }}
-        >
-            <Typography align="center" variant="subtitle1">
-                {/* @ts-ignore */}
-                {stageNames[stage]}
-            </Typography>
-            <Droppable droppableId={stage}>
-                {(droppableProvided, snapshot) => (
-                    <Box
-                        ref={droppableProvided.innerRef}
-                        {...droppableProvided.droppableProps}
-                        className={
-                            snapshot.isDraggingOver ? ' isDraggingOver' : ''
-                        }
-                        sx={{
-                            display: 'flex',
-                            flexDirection: 'column',
-                            borderRadius: 5,
-                            padding: '5px',
-                            '&.isDraggingOver': {
-                                bgcolor: '#dadadf',
-                            },
-                        }}
-                    >
-                        {dealIds.map((id, index) => (
-                            <DealCard key={id} index={index} deal={data[id]} />
-                        ))}
-                        {droppableProvided.placeholder}
-                    </Box>
-                )}
-            </Droppable>
-        </Box>
-    );
-};
+    deals: Deal[];
+}) => (
+    <Box
+        sx={{
+            flex: 1,
+            paddingTop: '8px',
+            paddingBottom: '16px',
+            bgcolor: '#eaeaee',
+            '&:first-child': {
+                paddingLeft: '5px',
+                borderTopLeftRadius: 5,
+            },
+            '&:last-child': {
+                paddingRight: '5px',
+                borderTopRightRadius: 5,
+            },
+        }}
+    >
+        <Typography align="center" variant="subtitle1">
+            {/* @ts-ignore */}
+            {stageNames[stage]}
+        </Typography>
+        <Droppable droppableId={stage}>
+            {(droppableProvided, snapshot) => (
+                <Box
+                    ref={droppableProvided.innerRef}
+                    {...droppableProvided.droppableProps}
+                    className={snapshot.isDraggingOver ? ' isDraggingOver' : ''}
+                    sx={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        borderRadius: 5,
+                        padding: '5px',
+                        '&.isDraggingOver': {
+                            bgcolor: '#dadadf',
+                        },
+                    }}
+                >
+                    {deals.map((deal, index) => (
+                        <DealCard key={deal.id} deal={deal} index={index} />
+                    ))}
+                    {droppableProvided.placeholder}
+                </Box>
+            )}
+        </Droppable>
+    </Box>
+);
diff --git a/packages/demo/src/deals/DealCreate.tsx b/packages/demo/src/deals/DealCreate.tsx
index 00eda04..ecd4e9b 100644
--- a/packages/demo/src/deals/DealCreate.tsx
+++ b/packages/demo/src/deals/DealCreate.tsx
@@ -10,9 +10,13 @@ import {
     required,
     useRedirect,
     useDataProvider,
+    useGetIdentity,
+    useListContext,
+    GetListResult,
+    DateInput,
 } from 'react-admin';
 import { Dialog } from '@mui/material';
-
+import { useQueryClient } from 'react-query';
 import { stageChoices } from './stages';
 import { typeChoices } from './types';
 import { Deal } from '../types';
@@ -22,35 +26,56 @@ const validateRequired = required();
 export const DealCreate = ({ open }: { open: boolean }) => {
     const redirect = useRedirect();
     const dataProvider = useDataProvider();
+    const { data: allDeals } = useListContext<Deal>();
 
     const handleClose = () => {
         redirect('/deals');
     };
 
-    const onSuccess = (deal: Deal) => {
-        redirect('/deals');
+    const queryClient = useQueryClient();
+
+    const onSuccess = async (deal: Deal) => {
         // increase the index of all deals in the same stage as the new deal
-        dataProvider
-            .getList('deals', {
-                pagination: { page: 1, perPage: 50 },
-                sort: { field: 'id', order: 'ASC' },
-                filter: { stage: deal.stage },
-            })
-            .then(({ data: deals }) =>
-                Promise.all(
-                    deals
-                        .filter(oldDeal => oldDeal.id !== deal.id)
-                        .map(oldDeal =>
-                            dataProvider.update('deals', {
-                                id: oldDeal.id,
-                                data: { index: oldDeal.index + 1 },
-                                previousData: oldDeal,
-                            })
-                        )
-                )
-            );
+        // first, get the list of deals in the same stage
+        const deals = allDeals.filter(
+            (d: Deal) => d.stage === deal.stage && d.id !== deal.id
+        );
+        // update the actual deals in the database
+        await Promise.all(
+            deals.map(async oldDeal =>
+                dataProvider.update('deals', {
+                    id: oldDeal.id,
+                    data: { index: oldDeal.index + 1 },
+                    previousData: oldDeal,
+                })
+            )
+        );
+        // refresh the list of deals in the cache as we used dataProvider.update(),
+        // which does not update the cache
+        const dealsById = deals.reduce(
+            (acc, d) => ({
+                ...acc,
+                [d.id]: { ...d, index: d.index + 1 },
+            }),
+            {} as { [key: string]: Deal }
+        );
+        const now = Date.now();
+        queryClient.setQueriesData<GetListResult | undefined>(
+            ['deals', 'getList'],
+            res => {
+                if (!res) return res;
+                return {
+                    ...res,
+                    data: res.data.map((d: Deal) => dealsById[d.id] || d),
+                };
+            },
+            { updatedAt: now }
+        );
+        redirect('/deals');
     };
 
+    const { identity } = useGetIdentity();
+
     return (
         <Dialog open={open} onClose={handleClose}>
             <Create<Deal>
@@ -58,7 +83,12 @@ export const DealCreate = ({ open }: { open: boolean }) => {
                 mutationOptions={{ onSuccess }}
                 sx={{ width: 500, '& .RaCreate-main': { mt: 0 } }}
             >
-                <SimpleForm defaultValues={{ index: 0 }}>
+                <SimpleForm
+                    defaultValues={{
+                        index: 0,
+                        sales_id: identity && identity?.id,
+                    }}
+                >
                     <TextInput
                         source="name"
                         label="Deal name"
@@ -78,6 +108,11 @@ export const DealCreate = ({ open }: { open: boolean }) => {
                             validate={validateRequired}
                         />
                     </ReferenceInput>
+                    <DateInput
+                        source="start_at"
+                        defaultValue={new Date()}
+                        fullWidth
+                    />
                     <SelectInput
                         source="stage"
                         choices={stageChoices}
diff --git a/packages/demo/src/deals/DealList.tsx b/packages/demo/src/deals/DealList.tsx
index 085f51d..ccb6ab5 100644
--- a/packages/demo/src/deals/DealList.tsx
+++ b/packages/demo/src/deals/DealList.tsx
@@ -17,7 +17,7 @@ import { DealShow } from './DealShow';
 import { OnlyMineInput } from './OnlyMineInput';
 import { typeChoices } from './types';
 
-export const DealList = () => {
+const DealList = () => {
     const { identity } = useGetIdentity();
     const location = useLocation();
     const matchCreate = matchPath('/deals/create', location.pathname);
@@ -35,16 +35,16 @@ export const DealList = () => {
                 component="div"
             >
                 <DealListContent />
+                <DealCreate open={!!matchCreate} />
             </List>
-            <DealCreate open={!!matchCreate} />
             <DealShow open={!!matchShow} id={matchShow?.params.id} />
         </>
     );
 };
 
 const dealFilters = [
-    <SearchInput source="fts@fts" alwaysOn />,
-    <OnlyMineInput alwaysOn />,
+    <SearchInput source="q" alwaysOn />,
+    <OnlyMineInput source="sales_id" alwaysOn />,
     <SelectInput source="type" choices={typeChoices} />,
 ];
 
@@ -61,3 +61,5 @@ const DealActions = () => {
         </TopToolbar>
     );
 };
+
+export default DealList;
diff --git a/packages/demo/src/deals/DealListContent.tsx b/packages/demo/src/deals/DealListContent.tsx
index 71d5ecc..87865ec 100644
--- a/packages/demo/src/deals/DealListContent.tsx
+++ b/packages/demo/src/deals/DealListContent.tsx
@@ -1,78 +1,35 @@
-import * as React from 'react';
-import { useState, useEffect, useContext } from 'react';
-import { Identifier, useListContext, DataProviderContext } from 'react-admin';
+import { DragDropContext, OnDragEndResponder } from '@hello-pangea/dnd';
 import { Box } from '@mui/material';
-import { DragDropContext, OnDragEndResponder } from 'react-beautiful-dnd';
 import isEqual from 'lodash/isEqual';
+import { useEffect, useState } from 'react';
+import { DataProvider, useDataProvider, useListContext } from 'react-admin';
 
-import { DealColumn } from './DealColumn';
-import { stages } from './stages';
 import { Deal } from '../types';
-
-export interface RecordMap {
-    [id: number]: Deal;
-    [id: string]: Deal;
-}
-
-interface DealsByColumn {
-    [stage: string]: Identifier[];
-}
-
-const initialDeals: DealsByColumn = stages.reduce(
-    (obj, stage) => ({ ...obj, [stage]: [] }),
-    {}
-);
-
-const getDealsByColumn = (data: Deal[]): DealsByColumn => {
-    // group deals by column
-    const columns = data.reduce(
-        (acc, record) => {
-            acc[record.stage].push(record);
-            return acc;
-        },
-        stages.reduce((obj, stage) => ({ ...obj, [stage]: [] }), {} as any)
-    );
-    // order each column by index
-    stages.forEach(stage => {
-        columns[stage] = columns[stage]
-            .sort(
-                (recordA: Deal, recordB: Deal) => recordA.index - recordB.index
-            )
-            .map((deal: Deal) => deal.id);
-    });
-    return columns;
-};
-
-const indexById = (data: Deal[]): RecordMap =>
-    data.reduce((obj, record) => ({ ...obj, [record.id]: record }), {});
+import { DealColumn } from './DealColumn';
+import { DealsByStage, getDealsByStage, stages } from './stages';
 
 export const DealListContent = () => {
     const { data: unorderedDeals, isLoading, refetch } = useListContext<Deal>();
+    const dataProvider = useDataProvider();
 
-    const [data, setData] = useState<RecordMap>(
-        isLoading ? {} : indexById(unorderedDeals)
+    const [dealsByStage, setDealsByStage] = useState<DealsByStage>(
+        getDealsByStage([])
     );
-    const [deals, setDeals] = useState<DealsByColumn>(
-        isLoading ? initialDeals : getDealsByColumn(unorderedDeals)
-    );
-    // we use the raw dataProvider to avoid too many updates (which would create junk)
-    const dataProvider = useContext(DataProviderContext);
 
-    // update deals by columns when the dataProvider response updates
     useEffect(() => {
-        if (isLoading) return;
-        const newDeals = getDealsByColumn(unorderedDeals);
-        if (isEqual(deals, newDeals)) {
-            return;
+        if (unorderedDeals) {
+            const newDealsByStage = getDealsByStage(unorderedDeals);
+            if (!isEqual(newDealsByStage, dealsByStage)) {
+                setDealsByStage(newDealsByStage);
+            }
         }
-        setDeals(newDeals);
-        setData(indexById(unorderedDeals));
-    }, [unorderedDeals, isLoading]); // eslint-disable-line react-hooks/exhaustive-deps
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [unorderedDeals]);
 
     if (isLoading) return null;
 
-    const onDragEnd: OnDragEndResponder = async result => {
-        const { destination, source, draggableId } = result;
+    const onDragEnd: OnDragEndResponder = result => {
+        const { destination, source } = result;
 
         if (!destination) {
             return;
@@ -85,181 +42,205 @@ export const DealListContent = () => {
             return;
         }
 
-        if (source.droppableId === destination.droppableId) {
-            // moving deal inside the same column
-
-            const column = Array.from(deals[source.droppableId]); // [4, 7, 23, 5] array of ids
-            const sourceDeal = data[column[source.index]];
-            const destinationDeal = data[column[destination.index]];
-
-            // update local state
-            // remove source deal from column
-            column.splice(source.index, 1);
-            // read source deal at destination
-            column.splice(destination.index, 0, Number(draggableId));
-            setDeals({
-                ...deals,
-                [source.droppableId]: column,
-            });
-
-            // update backend
-            // Fetch all the deals in this stage (because the list may be filtered, but we need to update even non-filtered deals)
-            const { data: columnDeals } = await dataProvider.getList('deals', {
-                sort: { field: 'index', order: 'ASC' },
-                pagination: { page: 1, perPage: 100 },
-                filter: { stage: source.droppableId },
-            });
-
-            if (source.index > destination.index) {
-                // deal moved up, eg
-                // dest   src
-                //  <------
-                // [4, 7, 23, 5]
-
-                await Promise.all([
-                    // for all deals between destination.index and source.index, increase the index
-                    ...columnDeals
-                        .filter(
-                            deal =>
-                                deal.index >= destinationDeal.index &&
-                                deal.index < sourceDeal.index
-                        )
-                        .map(deal =>
-                            dataProvider.update('deals', {
-                                id: deal.id,
-                                data: { index: deal.index + 1 },
-                                previousData: deal,
-                            })
-                        ),
-                    // for the deal that was moved, update its index
-                    dataProvider.update('deals', {
-                        id: sourceDeal.id,
-                        data: { index: destinationDeal.index },
-                        previousData: sourceDeal,
-                    }),
-                ]);
-
-                refetch();
-            } else {
-                // deal moved down, e.g
-                // src   dest
-                //  ------>
-                // [4, 7, 23, 5]
-
-                await Promise.all([
-                    // for all deals between source.index and destination.index, decrease the index
-                    ...columnDeals
-                        .filter(
-                            deal =>
-                                deal.index <= destinationDeal.index &&
-                                deal.index > sourceDeal.index
-                        )
-                        .map(deal =>
-                            dataProvider.update('deals', {
-                                id: deal.id,
-                                data: { index: deal.index - 1 },
-                                previousData: deal,
-                            })
-                        ),
-                    // for the deal that was moved, update its index
-                    dataProvider.update('deals', {
-                        id: sourceDeal.id,
-                        data: { index: destinationDeal.index },
-                        previousData: sourceDeal,
-                    }),
-                ]);
-
-                refetch();
-            }
-        } else {
-            // moving deal across columns
+        const sourceStage = source.droppableId;
+        const destinationStage = destination.droppableId;
+        const sourceDeal = dealsByStage[sourceStage][source.index]!;
+        const destinationDeal = dealsByStage[destinationStage][
+            destination.index
+        ] ?? {
+            stage: destinationStage,
+            index: undefined, // undefined if dropped after the last item
+        };
+
+        // compute local state change synchronously
+        setDealsByStage(
+            updateDealStageLocal(
+                sourceDeal,
+                { stage: sourceStage, index: source.index },
+                { stage: destinationStage, index: destination.index },
+                dealsByStage
+            )
+        );
 
-            const sourceColumn = Array.from(deals[source.droppableId]); // [4, 7, 23, 5] array of ids
-            const destinationColumn = Array.from(
-                deals[destination.droppableId]
-            ); // [4, 7, 23, 5] arrays of ids
-            const sourceDeal = data[sourceColumn[source.index]];
-            const destinationDeal = data[destinationColumn[destination.index]]; // may be undefined if dropping at the end of a column
+        // persist the changes
+        updateDealStage(sourceDeal, destinationDeal, dataProvider).then(() => {
+            refetch();
+        });
+    };
 
-            // update local state
-            sourceColumn.splice(source.index, 1);
-            destinationColumn.splice(destination.index, 0, draggableId);
-            setDeals({
-                ...deals,
-                [source.droppableId]: sourceColumn,
-                [destination.droppableId]: destinationColumn,
-            });
+    return (
+        <DragDropContext onDragEnd={onDragEnd}>
+            <Box display="flex">
+                {stages.map(stage => (
+                    <DealColumn
+                        stage={stage}
+                        deals={dealsByStage[stage]}
+                        key={stage}
+                    />
+                ))}
+            </Box>
+        </DragDropContext>
+    );
+};
 
-            // update backend
-            // Fetch all the deals in both stages (because the list may be filtered, but we need to update even non-filtered deals)
-            const [{ data: sourceDeals }, { data: destinationDeals }] =
-                await Promise.all([
-                    dataProvider.getList('deals', {
-                        sort: { field: 'index', order: 'ASC' },
-                        pagination: { page: 1, perPage: 100 },
-                        filter: { stage: source.droppableId },
-                    }),
-                    dataProvider.getList('deals', {
-                        sort: { field: 'index', order: 'ASC' },
-                        pagination: { page: 1, perPage: 100 },
-                        filter: { stage: destination.droppableId },
-                    }),
-                ]);
+const updateDealStageLocal = (
+    sourceDeal: Deal,
+    source: { stage: string; index: number },
+    destination: {
+        stage: string;
+        index?: number; // undefined if dropped after the last item
+    },
+    dealsByStage: DealsByStage
+) => {
+    if (source.stage === destination.stage) {
+        // moving deal inside the same column
+        const column = dealsByStage[source.stage];
+        column.splice(source.index, 1);
+        column.splice(destination.index ?? column.length + 1, 0, sourceDeal);
+        return {
+            ...dealsByStage,
+            [destination.stage]: column,
+        };
+    } else {
+        // moving deal across columns
+        const sourceColumn = dealsByStage[source.stage];
+        const destinationColumn = dealsByStage[destination.stage];
+        sourceColumn.splice(source.index, 1);
+        destinationColumn.splice(
+            destination.index ?? destinationColumn.length + 1,
+            0,
+            sourceDeal
+        );
+        return {
+            ...dealsByStage,
+            [source.stage]: sourceColumn,
+            [destination.stage]: destinationColumn,
+        };
+    }
+};
 
+const updateDealStage = async (
+    source: Deal,
+    destination: {
+        stage: string;
+        index?: number; // undefined if dropped after the last item
+    },
+    dataProvider: DataProvider
+) => {
+    if (source.stage === destination.stage) {
+        // moving deal inside the same column
+        // Fetch all the deals in this stage (because the list may be filtered, but we need to update even non-filtered deals)
+        const { data: columnDeals } = await dataProvider.getList('deals', {
+            sort: { field: 'index', order: 'ASC' },
+            pagination: { page: 1, perPage: 100 },
+            filter: { stage: source.stage },
+        });
+        const destinationIndex = destination.index ?? columnDeals.length + 1;
+
+        if (source.index > destinationIndex) {
+            // deal moved up, eg
+            // dest   src
+            //  <------
+            // [4, 7, 23, 5]
             await Promise.all([
-                // decrease index on the deals after the source index in the source columns
-                ...sourceDeals
-                    .filter(deal => deal.index > sourceDeal.index)
+                // for all deals between destinationIndex and source.index, increase the index
+                ...columnDeals
+                    .filter(
+                        deal =>
+                            deal.index >= destinationIndex &&
+                            deal.index < source.index
+                    )
                     .map(deal =>
                         dataProvider.update('deals', {
                             id: deal.id,
-                            data: { index: deal.index - 1 },
+                            data: { index: deal.index + 1 },
                             previousData: deal,
                         })
                     ),
-                // increase index on the deals after the destination index in the destination columns
-                ...destinationDeals
-                    .filter(deal =>
-                        destinationDeal
-                            ? deal.index >= destinationDeal.index
-                            : false
+                // for the deal that was moved, update its index
+                dataProvider.update('deals', {
+                    id: source.id,
+                    data: { index: destinationIndex },
+                    previousData: source,
+                }),
+            ]);
+        } else {
+            // deal moved down, e.g
+            // src   dest
+            //  ------>
+            // [4, 7, 23, 5]
+            await Promise.all([
+                // for all deals between source.index and destinationIndex, decrease the index
+                ...columnDeals
+                    .filter(
+                        deal =>
+                            deal.index <= destinationIndex &&
+                            deal.index > source.index
                     )
                     .map(deal =>
                         dataProvider.update('deals', {
                             id: deal.id,
-                            data: { index: deal.index + 1 },
+                            data: { index: deal.index - 1 },
                             previousData: deal,
                         })
                     ),
-                // change the dragged deal to take the destination index and column
+                // for the deal that was moved, update its index
                 dataProvider.update('deals', {
-                    id: sourceDeal.id,
-                    data: {
-                        index: destinationDeal
-                            ? destinationDeal.index
-                            : destinationDeals.pop()!.index + 1,
-                        stage: destination.droppableId,
-                    },
-                    previousData: sourceDeal,
+                    id: source.id,
+                    data: { index: destinationIndex },
+                    previousData: source,
                 }),
             ]);
-
-            refetch();
         }
-    };
-
-    return (
-        <DragDropContext onDragEnd={onDragEnd}>
-            <Box display="flex">
-                {stages.map(stage => (
-                    <DealColumn
-                        stage={stage}
-                        dealIds={deals[stage]}
-                        data={data}
-                        key={stage}
-                    />
-                ))}
-            </Box>
-        </DragDropContext>
-    );
+    } else {
+        // moving deal across columns
+        // Fetch all the deals in both stages (because the list may be filtered, but we need to update even non-filtered deals)
+        const [{ data: sourceDeals }, { data: destinationDeals }] =
+            await Promise.all([
+                dataProvider.getList('deals', {
+                    sort: { field: 'index', order: 'ASC' },
+                    pagination: { page: 1, perPage: 100 },
+                    filter: { stage: source.stage },
+                }),
+                dataProvider.getList('deals', {
+                    sort: { field: 'index', order: 'ASC' },
+                    pagination: { page: 1, perPage: 100 },
+                    filter: { stage: destination.stage },
+                }),
+            ]);
+        const destinationIndex =
+            destination.index ?? destinationDeals.length + 1;
+
+        await Promise.all([
+            // decrease index on the deals after the source index in the source columns
+            ...sourceDeals
+                .filter(deal => deal.index > source.index)
+                .map(deal =>
+                    dataProvider.update('deals', {
+                        id: deal.id,
+                        data: { index: deal.index - 1 },
+                        previousData: deal,
+                    })
+                ),
+            // increase index on the deals after the destination index in the destination columns
+            ...destinationDeals
+                .filter(deal => deal.index >= destinationIndex)
+                .map(deal =>
+                    dataProvider.update('deals', {
+                        id: deal.id,
+                        data: { index: deal.index + 1 },
+                        previousData: deal,
+                    })
+                ),
+            // change the dragged deal to take the destination index and column
+            dataProvider.update('deals', {
+                id: source.id,
+                data: {
+                    index: destinationIndex,
+                    stage: destination.stage,
+                },
+                previousData: source,
+            }),
+        ]);
+    }
 };
diff --git a/packages/demo/src/deals/OnlyMineInput.tsx b/packages/demo/src/deals/OnlyMineInput.tsx
index ea7bd57..029dbd1 100644
--- a/packages/demo/src/deals/OnlyMineInput.tsx
+++ b/packages/demo/src/deals/OnlyMineInput.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useListFilterContext, useGetIdentity } from 'react-admin';
 import { Box, Switch, FormControlLabel } from '@mui/material';
 
-export const OnlyMineInput = ({ alwaysOn }: { alwaysOn: boolean }) => {
+export const OnlyMineInput = (_: { alwaysOn: boolean; source: string }) => {
     const { filterValues, displayedFilters, setFilters } =
         useListFilterContext();
     const { identity } = useGetIdentity();
@@ -32,5 +32,3 @@ export const OnlyMineInput = ({ alwaysOn }: { alwaysOn: boolean }) => {
         </Box>
     );
 };
-
-OnlyMineInput.defaultProps = { source: 'sales_id' };
diff --git a/packages/demo/src/deals/index.ts b/packages/demo/src/deals/index.ts
index 8b41439..4a13f20 100644
--- a/packages/demo/src/deals/index.ts
+++ b/packages/demo/src/deals/index.ts
@@ -1,5 +1,6 @@
 /* eslint-disable import/no-anonymous-default-export */
-import { DealList } from './DealList';
+import * as React from 'react';
+const DealList = React.lazy(() => import('./DealList'));
 
 export default {
     list: DealList,
diff --git a/packages/demo/src/deals/stages.ts b/packages/demo/src/deals/stages.ts
index f3f7101..077f214 100644
--- a/packages/demo/src/deals/stages.ts
+++ b/packages/demo/src/deals/stages.ts
@@ -1,3 +1,5 @@
+import { Deal } from '../types';
+
 export const stages = [
     'opportunity',
     'proposal-sent',
@@ -21,3 +23,25 @@ export const stageChoices = stages.map(type => ({
     /* @ts-ignore */
     name: stageNames[type],
 }));
+
+export type DealsByStage = Record<Deal['stage'], Deal[]>;
+
+export const getDealsByStage = (unorderedDeals: Deal[]) => {
+    const dealsByStage: Record<Deal['stage'], Deal[]> = unorderedDeals.reduce(
+        (acc, deal) => {
+            acc[deal.stage].push(deal);
+            return acc;
+        },
+        stages.reduce(
+            (obj, stage) => ({ ...obj, [stage]: [] }),
+            {} as Record<Deal['stage'], Deal[]>
+        )
+    );
+    // order each column by index
+    stages.forEach(stage => {
+        dealsByStage[stage] = dealsByStage[stage].sort(
+            (recordA: Deal, recordB: Deal) => recordA.index - recordB.index
+        );
+    });
+    return dealsByStage;
+};
diff --git a/packages/demo/src/index.tsx b/packages/demo/src/index.tsx
index 9c5a09f..5740dbf 100644
--- a/packages/demo/src/index.tsx
+++ b/packages/demo/src/index.tsx
@@ -1,10 +1,14 @@
 import React from 'react';
-import { createRoot } from 'react-dom/client';
+import ReactDOM from 'react-dom';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
-const root = createRoot(document.getElementById('root') as HTMLElement);
-root.render(<App />);
+ReactDOM.render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>,
+    document.getElementById('root')
+);
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
diff --git a/packages/demo/src/notes/NewNote.tsx b/packages/demo/src/notes/NewNote.tsx
index 5cb8b8b..93b5dda 100644
--- a/packages/demo/src/notes/NewNote.tsx
+++ b/packages/demo/src/notes/NewNote.tsx
@@ -40,7 +40,6 @@ export const NewNote = ({
             sales_id: identity.id,
             date,
             text,
-            type: 'Note',
         };
         if (showStatus) {
             data.status = status;
@@ -58,6 +57,7 @@ export const NewNote = ({
                         data: {
                             last_seen: date,
                             status,
+                            nb_notes: record.nb_notes + 1,
                         },
                         previousData: record,
                     });
@@ -102,6 +102,7 @@ export const NewNote = ({
                                     type="datetime-local"
                                     variant="filled"
                                     size="small"
+                                    margin="none"
                                     value={date}
                                     onChange={(
                                         event: React.ChangeEvent<HTMLInputElement>
diff --git a/packages/demo/src/notes/Note.tsx b/packages/demo/src/notes/Note.tsx
index 2537c11..305be0c 100644
--- a/packages/demo/src/notes/Note.tsx
+++ b/packages/demo/src/notes/Note.tsx
@@ -26,7 +26,6 @@ import { Status } from '../misc/Status';
 export const Note = ({
     showStatus,
     note,
-    isLast,
     reference,
 }: {
     showStatus?: boolean;
diff --git a/packages/demo/src/notes/StatusSelector.tsx b/packages/demo/src/notes/StatusSelector.tsx
index ceec8e5..24aff9b 100644
--- a/packages/demo/src/notes/StatusSelector.tsx
+++ b/packages/demo/src/notes/StatusSelector.tsx
@@ -3,32 +3,30 @@ import { TextField, MenuItem } from '@mui/material';
 
 import { Status } from '../misc/Status';
 
-export const StatusSelector = ({ status, setStatus, sx }: any) => {
-    return (
-        <TextField
-            select
-            value={status}
-            onChange={(event: React.ChangeEvent<{ value: unknown }>) => {
-                setStatus(event.target.value);
-            }}
-            variant="filled"
-            label={false}
-            margin="none"
-            size="small"
-            sx={sx}
-        >
-            <MenuItem value="cold">
-                Cold <Status status="cold" />
-            </MenuItem>
-            <MenuItem value="warm">
-                Warm <Status status="warm" />
-            </MenuItem>
-            <MenuItem value="hot">
-                Hot <Status status="hot" />
-            </MenuItem>
-            <MenuItem value="in-contract">
-                In Contract <Status status="in-contract" />
-            </MenuItem>
-        </TextField>
-    );
-};
+export const StatusSelector = ({ status, setStatus, sx }: any) => (
+    <TextField
+        select
+        value={status}
+        onChange={(event: React.ChangeEvent<{ value: unknown }>) => {
+            setStatus(event.target.value);
+        }}
+        variant="filled"
+        label={false}
+        margin="none"
+        size="small"
+        sx={sx}
+    >
+        <MenuItem value="cold">
+            Cold <Status status="cold" />
+        </MenuItem>
+        <MenuItem value="warm">
+            Warm <Status status="warm" />
+        </MenuItem>
+        <MenuItem value="hot">
+            Hot <Status status="hot" />
+        </MenuItem>
+        <MenuItem value="in-contract">
+            In Contract <Status status="in-contract" />
+        </MenuItem>
+    </TextField>
+);
diff --git a/packages/demo/src/types.ts b/packages/demo/src/types.ts
index f310067..edc8b82 100644
--- a/packages/demo/src/types.ts
+++ b/packages/demo/src/types.ts
@@ -1,4 +1,4 @@
-import { RaRecord, Identifier } from 'react-admin';
+import { Identifier, RaRecord } from 'react-admin';
 
 export interface Sale extends RaRecord {
     first_name: string;
@@ -18,6 +18,8 @@ export interface Company extends RaRecord {
     zipcode: string;
     city: string;
     stateAbbr: string;
+    nb_contacts: number;
+    nb_deals: number;
     sales_id: Identifier;
     created_at: string;
 }
@@ -35,6 +37,9 @@ export interface Contact extends RaRecord {
     tags: Identifier[];
     gender: string;
     sales_id: Identifier;
+    nb_notes: number;
+    status: string;
+    background: string;
 }
 
 export interface ContactNote extends RaRecord {
@@ -56,8 +61,10 @@ export interface Deal extends RaRecord {
     amount: number;
     created_at: string;
     updated_at: string;
+    start_at: string;
     sales_id: Identifier;
     index: number;
+    nb_notes: number;
 }
 
 export interface Tag extends RaRecord {
diff --git a/yarn.lock b/yarn.lock
index aaab649..2f55573 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1032,6 +1032,13 @@
     "@babel/helper-validator-option" "^7.18.6"
     "@babel/plugin-transform-typescript" "^7.18.6"
 
+"@babel/runtime@^7.12.1", "@babel/runtime@^7.24.1":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.7.tgz#f4f0d5530e8dbdf59b3451b9b3e594b6ba082e12"
+  integrity sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.6", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.20.13"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.13.tgz#7055ab8a7cff2b8f6058bf6ae45ff84ad2aded4b"
@@ -1301,6 +1308,19 @@
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
   integrity sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==
 
+"@hello-pangea/dnd@^16.3.0":
+  version "16.6.0"
+  resolved "https://registry.yarnpkg.com/@hello-pangea/dnd/-/dnd-16.6.0.tgz#7509639c7bd13f55e537b65a9dcfcd54e7c99ac7"
+  integrity sha512-vfZ4GydqbtUPXSLfAvKvXQ6xwRzIjUSjVU0Sx+70VOhc2xx6CdmJXJ8YhH70RpbTUGjxctslQTHul9sIOxCfFQ==
+  dependencies:
+    "@babel/runtime" "^7.24.1"
+    css-box-model "^1.2.1"
+    memoize-one "^6.0.0"
+    raf-schd "^4.0.3"
+    react-redux "^8.1.3"
+    redux "^4.2.1"
+    use-memo-one "^1.1.3"
+
 "@humanwhocodes/config-array@^0.11.13":
   version "0.11.13"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.13.tgz#075dc9684f40a531d9b26b0822153c1e832ee297"
@@ -2344,11 +2364,12 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.6.tgz#cee20bd55e68a1720bdab363ecf0c821ded4cd45"
   integrity sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==
 
-"@raphiniert/ra-data-postgrest@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@raphiniert/ra-data-postgrest/-/ra-data-postgrest-2.0.0.tgz#4038621b4fe156095dde066353e29396e33cbb39"
-  integrity sha512-1Ss+/xAxL62aGmCBSSJnlFMMSl0T2/bNSfeV0lplm7N9AtsOxSfySDKnCQs53ngbSBK1rPbk4ypc/mDVm4y4xQ==
+"@raphiniert/ra-data-postgrest@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@raphiniert/ra-data-postgrest/-/ra-data-postgrest-2.1.0.tgz#cbde3d5e1bf39a645b18f83eaf6e3f6eabec0abb"
+  integrity sha512-hsOtXW7uwelEpNRbp1Ri0FUGv6LY+x948sXIpTT//qkVgHXaT+gz2ez8tZYh1Hha9LfbiXw0y/LlnxSoAMg9pA==
   dependencies:
+    lodash.isequal "^4.5.0"
     qs "^6.11.1"
 
 "@react-spring/animated@~9.4.5":
@@ -2460,6 +2481,20 @@
   dependencies:
     "@sinonjs/commons" "^2.0.0"
 
+"@supabase/auth-js@2.64.2":
+  version "2.64.2"
+  resolved "https://registry.yarnpkg.com/@supabase/auth-js/-/auth-js-2.64.2.tgz#fe6828ed2c9844bf2e71b27f88ddfb635f24d1c1"
+  integrity sha512-s+lkHEdGiczDrzXJ1YWt2y3bxRi+qIUnXcgkpLSrId7yjBeaXBFygNjTaoZLG02KNcYwbuZ9qkEIqmj2hF7svw==
+  dependencies:
+    "@supabase/node-fetch" "^2.6.14"
+
+"@supabase/functions-js@2.3.1":
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/@supabase/functions-js/-/functions-js-2.3.1.tgz#bddc12a97872f3978a733b66bddac53370721589"
+  integrity sha512-QyzNle/rVzlOi4BbVqxLSH828VdGY1RElqGFAj+XeVypj6+PVtMlD21G8SDnsPQDtlqqTtoGRgdMlQZih5hTuw==
+  dependencies:
+    "@supabase/node-fetch" "^2.6.14"
+
 "@supabase/functions-js@^2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@supabase/functions-js/-/functions-js-2.0.0.tgz#4ba0c9e6dff031e17666bef6779c48eff290a8a0"
@@ -2474,6 +2509,20 @@
   dependencies:
     cross-fetch "^3.1.5"
 
+"@supabase/node-fetch@2.6.15", "@supabase/node-fetch@^2.6.14":
+  version "2.6.15"
+  resolved "https://registry.yarnpkg.com/@supabase/node-fetch/-/node-fetch-2.6.15.tgz#731271430e276983191930816303c44159e7226c"
+  integrity sha512-1ibVeYUacxWYi9i0cf5efil6adJ9WRyZBLivgjs+AUpewx1F3xPi7gLgaASI2SmIQxPoCEjAsLAzKPgMJVgOUQ==
+  dependencies:
+    whatwg-url "^5.0.0"
+
+"@supabase/postgrest-js@1.15.2":
+  version "1.15.2"
+  resolved "https://registry.yarnpkg.com/@supabase/postgrest-js/-/postgrest-js-1.15.2.tgz#c0a725706e3d534570d014d7b713cea12553ab98"
+  integrity sha512-9/7pUmXExvGuEK1yZhVYXPZnLEkDTwxgMQHXLrN5BwPZZm4iUCL1YEyep/Z2lIZah8d8M433mVAUEGsihUj5KQ==
+  dependencies:
+    "@supabase/node-fetch" "^2.6.14"
+
 "@supabase/postgrest-js@^1.1.1":
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/@supabase/postgrest-js/-/postgrest-js-1.3.0.tgz#7de1e2ae45dd203bdc0cae2abf3f0f53eab54997"
@@ -2481,6 +2530,16 @@
   dependencies:
     cross-fetch "^3.1.5"
 
+"@supabase/realtime-js@2.9.5":
+  version "2.9.5"
+  resolved "https://registry.yarnpkg.com/@supabase/realtime-js/-/realtime-js-2.9.5.tgz#22b7de952a7f37868ffc25d32d19f03f27bfcb40"
+  integrity sha512-TEHlGwNGGmKPdeMtca1lFTYCedrhTAv3nZVoSjrKQ+wkMmaERuCe57zkC5KSWFzLYkb5FVHW8Hrr+PX1DDwplQ==
+  dependencies:
+    "@supabase/node-fetch" "^2.6.14"
+    "@types/phoenix" "^1.5.4"
+    "@types/ws" "^8.5.10"
+    ws "^8.14.2"
+
 "@supabase/realtime-js@^2.4.0":
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/@supabase/realtime-js/-/realtime-js-2.6.0.tgz#eff000c2fd9f5cd8d59f4adf6d76165b81ebd536"
@@ -2489,6 +2548,13 @@
     "@types/phoenix" "^1.5.4"
     websocket "^1.0.34"
 
+"@supabase/storage-js@2.5.5":
+  version "2.5.5"
+  resolved "https://registry.yarnpkg.com/@supabase/storage-js/-/storage-js-2.5.5.tgz#2958e2a2cec8440e605bb53bd36649288c4dfa01"
+  integrity sha512-OpLoDRjFwClwc2cjTJZG8XviTiQH4Ik8sCiMK5v7et0MDu2QlXjCAW3ljxJB5+z/KazdMOTnySi+hysxWUPu3w==
+  dependencies:
+    "@supabase/node-fetch" "^2.6.14"
+
 "@supabase/storage-js@^2.1.0":
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/@supabase/storage-js/-/storage-js-2.3.0.tgz#296b36eb0bde378763117217b2f99303f1d4ec71"
@@ -2508,6 +2574,18 @@
     "@supabase/storage-js" "^2.1.0"
     cross-fetch "^3.1.5"
 
+"@supabase/supabase-js@^2.43.1":
+  version "2.43.4"
+  resolved "https://registry.yarnpkg.com/@supabase/supabase-js/-/supabase-js-2.43.4.tgz#62c956b16bb01d5cb59e3ad73cf7628e3e9835c0"
+  integrity sha512-/pLPaxiIsn5Vaz3s32HC6O/VNwfeddnzS0bZRpOW0AKcPuXroD8pT9G8mpiBlZfpKsMmq6k7tlhW7Sr1PAQ1lw==
+  dependencies:
+    "@supabase/auth-js" "2.64.2"
+    "@supabase/functions-js" "2.3.1"
+    "@supabase/node-fetch" "2.6.15"
+    "@supabase/postgrest-js" "1.15.2"
+    "@supabase/realtime-js" "2.9.5"
+    "@supabase/storage-js" "2.5.5"
+
 "@testing-library/cypress@^9.0.0":
   version "9.0.0"
   resolved "https://registry.yarnpkg.com/@testing-library/cypress/-/cypress-9.0.0.tgz#3facad49c4654a99bbd138f83f33b415d2d6f097"
@@ -2635,6 +2713,14 @@
     "@types/react" "*"
     hoist-non-react-statics "^3.3.0"
 
+"@types/hoist-non-react-statics@^3.3.1":
+  version "3.3.5"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz#dab7867ef789d87e2b4b0003c9d65c49cc44a494"
+  integrity sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==
+  dependencies:
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz#8467d4b3c087805d63580480890791277ce35c44"
@@ -2826,6 +2912,18 @@
   resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.2.tgz#6286b4c7228d58ab7866d19716f3696e03a09397"
   integrity sha512-Q5vtl1W5ue16D+nIaW8JWebSSraJVlK+EthKn7e7UcD4KWsaSJ8BqGPXNaPghgtcn/fhvrN17Tv8ksUsQpiplw==
 
+"@types/use-sync-external-store@^0.0.3":
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43"
+  integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==
+
+"@types/ws@^8.5.10":
+  version "8.5.10"
+  resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.10.tgz#4acfb517970853fa6574a3a6886791d04a396787"
+  integrity sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==
+  dependencies:
+    "@types/node" "*"
+
 "@types/yargs-parser@*":
   version "21.0.0"
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-21.0.0.tgz#0c60e537fa790f5f9472ed2776c2b71ec117351b"
@@ -4360,7 +4458,7 @@ crypto-random-string@^2.0.0:
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
   integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
 
-css-box-model@^1.2.0:
+css-box-model@^1.2.0, css-box-model@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/css-box-model/-/css-box-model-1.2.1.tgz#59951d3b81fd6b2074a62d49444415b0d2b4d7c1"
   integrity sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==
@@ -4821,6 +4919,11 @@ domexception@^4.0.0:
   dependencies:
     webidl-conversions "^7.0.0"
 
+dompurify@^2.4.3:
+  version "2.5.5"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.5.5.tgz#0540a05b8020d4691ee9c6083fb23b2c919276fc"
+  integrity sha512-FgbqnEPiv5Vdtwt6Mxl7XSylttCC03cqP5ldNT2z+Kj0nLxPHJH4+1Cyf5Jasxhw93Rl4Oo11qRoUV72fmya2Q==
+
 dot-prop@6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-6.0.1.tgz#fc26b3cf142b9e59b74dbd39ed66ce620c681083"
@@ -6437,6 +6540,11 @@ hosted-git-info@^6.0.0, hosted-git-info@^6.1.1:
   dependencies:
     lru-cache "^7.5.1"
 
+hotscript@^1.0.12:
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/hotscript/-/hotscript-1.0.13.tgz#6eb5de757e9b33444ffc22555e98dbc17fa31fb4"
+  integrity sha512-C++tTF1GqkGYecL+2S1wJTfoH6APGAsbb7PAWQ3iVIwgG/EFseAfEVOKFgAFq4yK3+6j1EjUD4UQ9dRJHX/sSQ==
+
 html-encoding-sniffer@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz#2cb1a8cf0db52414776e5b2a7a04d5dd98158de9"
@@ -7972,6 +8080,11 @@ lodash.debounce@^4.0.8:
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
   integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
 
+lodash.isequal@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
+  integrity sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==
+
 lodash.ismatch@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.ismatch/-/lodash.ismatch-4.4.0.tgz#756cb5150ca3ba6f11085a78849645f188f85f37"
@@ -8141,6 +8254,11 @@ memoize-one@^5.1.1:
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
   integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
 
+memoize-one@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045"
+  integrity sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==
+
 meow@^8.0.0:
   version "8.1.2"
   resolved "https://registry.yarnpkg.com/meow/-/meow-8.1.2.tgz#bcbe45bda0ee1729d350c03cffc8395a36c4e897"
@@ -9544,7 +9662,23 @@ quick-lru@^4.0.1:
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f"
   integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==
 
-ra-core@^4.7.0, ra-core@^4.7.2:
+ra-core@^4.16.17:
+  version "4.16.17"
+  resolved "https://registry.yarnpkg.com/ra-core/-/ra-core-4.16.17.tgz#35a5fe689e42ade1bf430bbe96f0100175ae03cf"
+  integrity sha512-85dpwo6D5nv/UTJJxBqYFWP8H4O4bc+prL8ar8Trb4om2X75zK6FsW/4ZXKlhrRPM+fP+s/v3xYrFjTo/zT4hQ==
+  dependencies:
+    clsx "^1.1.1"
+    date-fns "^2.19.0"
+    eventemitter3 "^4.0.7"
+    inflection "~1.12.0"
+    jsonexport "^3.2.0"
+    lodash "~4.17.5"
+    prop-types "^15.6.1"
+    query-string "^7.1.1"
+    react-is "^17.0.2"
+    react-query "^3.32.1"
+
+ra-core@^4.7.0:
   version "4.7.2"
   resolved "https://registry.yarnpkg.com/ra-core/-/ra-core-4.7.2.tgz#fdfe127da3aa04ff5b53d265ca3a00d6590b77ad"
   integrity sha512-05PPxlcHvAgDFRlos3WwR52FA9jFyn1IXQYetvFksyah/1mulSVptXrzG3LdWBE/XazsgHi5JT7G8BdqxJyGzw==
@@ -9560,29 +9694,49 @@ ra-core@^4.7.0, ra-core@^4.7.2:
     react-is "^17.0.2"
     react-query "^3.32.1"
 
-ra-data-fakerest@^4.0.0:
-  version "4.7.2"
-  resolved "https://registry.yarnpkg.com/ra-data-fakerest/-/ra-data-fakerest-4.7.2.tgz#99cd5979ad6a5b4713d71c71a6996b55b7f59d7e"
-  integrity sha512-I+ZCy2+Jd8V4hf24Ug+4a1waKGM/ArLkTeix/ZYDGSAMdF9tQ6lJzwuBHVrl5Snz/kI5IZgQ1Vg38l0xBTpxmg==
+ra-data-fakerest@^4.12.0:
+  version "4.16.17"
+  resolved "https://registry.yarnpkg.com/ra-data-fakerest/-/ra-data-fakerest-4.16.17.tgz#fb944874e3f50472f50d651ac5023a85bd909c83"
+  integrity sha512-iRRcf9lgW8vyt000blLCAKGLg04I4mROnWeKdK34sZu+gHfo0NTsPp89hqTllvcMN1ONLykzSHsWrUQPN0tNpA==
   dependencies:
     fakerest "^3.0.0"
 
-ra-i18n-polyglot@^4.7.2:
-  version "4.7.2"
-  resolved "https://registry.yarnpkg.com/ra-i18n-polyglot/-/ra-i18n-polyglot-4.7.2.tgz#12e3b0b8d53c58a014f12c9776954b0d9931771e"
-  integrity sha512-5K9dm0P2fjrPiVhyTxuXCS8K2ZAdlh6YfAVWva+Z4y1jbJVLJZj6JgHtpLPZIO3MW5MeQu7g3E0W/jGUM3N0dQ==
+ra-i18n-polyglot@^4.16.17:
+  version "4.16.17"
+  resolved "https://registry.yarnpkg.com/ra-i18n-polyglot/-/ra-i18n-polyglot-4.16.17.tgz#a829b368eee7e8165769b8e96a89d5bdb9bfda08"
+  integrity sha512-ZsXqWg+F06rdavgKF/ZzI+3N5xtgZAOnpnFOdKaEOUMTHE+p7E512St/EkqS52FfCqQNpLkZ/zsZRJkIutmNZg==
   dependencies:
     node-polyglot "^2.2.2"
-    ra-core "^4.7.2"
+    ra-core "^4.16.17"
 
-ra-language-english@^4.7.2:
-  version "4.7.2"
-  resolved "https://registry.yarnpkg.com/ra-language-english/-/ra-language-english-4.7.2.tgz#4e72eb2a78a81b8839f8b81702c73430cbaee6c6"
-  integrity sha512-F/s6ElTitIsNbxt7LMiaAPdb3vx2vkSeB9goaqWN8lP/ZRSvLEeDQ7Zj3hjHv3nbKI/uglVBHmhZvFJMDjbULQ==
+ra-language-english@^4.16.17:
+  version "4.16.17"
+  resolved "https://registry.yarnpkg.com/ra-language-english/-/ra-language-english-4.16.17.tgz#fa16517458057133f9aaa6023288998b08411f71"
+  integrity sha512-ypvlZ+2jXVvLaeTp/Ri470TdAOjiQXecEITBs2r9fQdWU4NFTzU25nwq6LhWbFLFHSiJkw86OLR3T1Hd/veBlg==
   dependencies:
-    ra-core "^4.7.2"
+    ra-core "^4.16.17"
 
-ra-ui-materialui@^4.7.1, ra-ui-materialui@^4.7.3:
+ra-ui-materialui@^4.16.18:
+  version "4.16.18"
+  resolved "https://registry.yarnpkg.com/ra-ui-materialui/-/ra-ui-materialui-4.16.18.tgz#4aec4d17cfe21c1a828565c28bffe1ea134f59a1"
+  integrity sha512-vVLGVW3CZuTIptQylhwmMgkD26wppTd3AFoa8h1S0wdO0IUs3DiyD/RiWNbshVdhXOug4CocSYwfaY+eR+mqMw==
+  dependencies:
+    autosuggest-highlight "^3.1.1"
+    clsx "^1.1.1"
+    css-mediaquery "^0.1.2"
+    dompurify "^2.4.3"
+    hotscript "^1.0.12"
+    inflection "~1.12.0"
+    jsonexport "^3.2.0"
+    lodash "~4.17.5"
+    prop-types "^15.7.0"
+    query-string "^7.1.1"
+    react-dropzone "^12.0.4"
+    react-error-boundary "^3.1.4"
+    react-query "^3.32.1"
+    react-transition-group "^4.4.1"
+
+ra-ui-materialui@^4.7.1:
   version "4.7.3"
   resolved "https://registry.yarnpkg.com/ra-ui-materialui/-/ra-ui-materialui-4.7.3.tgz#3e97d0f39ed1f4fbb35cc8594bea77390f3d1fe8"
   integrity sha512-tiuEXtmFX0lLWYe0ceAjZ1OZQgmBhiJrPGtG6qN2zHMqK9soBvqcyEDCxw2fVtCnOMnaocSF3XXGocqfwzyeZg==
@@ -9600,7 +9754,7 @@ ra-ui-materialui@^4.7.1, ra-ui-materialui@^4.7.3:
     react-query "^3.32.1"
     react-transition-group "^4.4.1"
 
-raf-schd@^4.0.2:
+raf-schd@^4.0.2, raf-schd@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.3.tgz#5d6c34ef46f8b2a0e880a8fcdb743efc5bfdbc1a"
   integrity sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==
@@ -9612,21 +9766,21 @@ raf@^3.4.1:
   dependencies:
     performance-now "^2.1.0"
 
-react-admin@^4.0.0:
-  version "4.7.3"
-  resolved "https://registry.yarnpkg.com/react-admin/-/react-admin-4.7.3.tgz#ed36ba42320e79e7ddcc4b631b0a71cdc6a831b5"
-  integrity sha512-LeB4iY6wgWHL9KXsP8knjyfwTrb09n55cpIpTi6tIpGPeXyGJYMG5weJN+XiMsBIHIWOZFgE0RMTUY5v4bp/6Q==
+react-admin@^4.12.0:
+  version "4.16.18"
+  resolved "https://registry.yarnpkg.com/react-admin/-/react-admin-4.16.18.tgz#8c4feb0f3128334acfeacb3ba26224326d872875"
+  integrity sha512-KOBKFFMkPmTaAChH7EOuNV4AeNN8iVMVIeDkXU1wbguafLCwV8goeguWgZHzafVhtdOjsxdYKezfBGBIKnEbBA==
   dependencies:
     "@emotion/react" "^11.4.1"
     "@emotion/styled" "^11.3.0"
     "@mui/icons-material" "^5.0.1"
     "@mui/material" "^5.0.2"
     history "^5.1.0"
-    ra-core "^4.7.2"
-    ra-i18n-polyglot "^4.7.2"
-    ra-language-english "^4.7.2"
-    ra-ui-materialui "^4.7.3"
-    react-hook-form "^7.40.0"
+    ra-core "^4.16.17"
+    ra-i18n-polyglot "^4.16.17"
+    ra-language-english "^4.16.17"
+    ra-ui-materialui "^4.16.18"
+    react-hook-form "^7.43.9"
     react-router "^6.1.0"
     react-router-dom "^6.1.0"
 
@@ -9667,10 +9821,10 @@ react-error-boundary@^3.1.4:
   dependencies:
     "@babel/runtime" "^7.12.5"
 
-react-hook-form@^7.40.0:
-  version "7.43.0"
-  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.43.0.tgz#d0c19b5c4ec561fbf8d652869ccb513c11c772e7"
-  integrity sha512-/rVEz7T0gLdSFwPqutJ1kn2e0sQNyb9ci/hmwEYr2YG0KF/LSuRLvNrf9QWJM+gj88CjDpDW5Bh/1AD7B2+z9Q==
+react-hook-form@^7.43.9:
+  version "7.51.5"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.51.5.tgz#4afbfb819312db9fea23e8237a3a0d097e128b43"
+  integrity sha512-J2ILT5gWx1XUIJRETiA7M19iXHlG74+6O3KApzvqB/w8S5NQR7AbU8HVZrMALdmDgWpRPYiZJl0zx8Z4L2mP6Q==
 
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
@@ -9713,6 +9867,18 @@ react-redux@^7.2.0:
     prop-types "^15.7.2"
     react-is "^17.0.2"
 
+react-redux@^8.1.3:
+  version "8.1.3"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.1.3.tgz#4fdc0462d0acb59af29a13c27ffef6f49ab4df46"
+  integrity sha512-n0ZrutD7DaX/j9VscF+uTALI3oUPa/pO4Z3soOBIjuRn/FzVu6aehhysxZCLi6y7duMf52WNZGMl7CtuK5EnRw==
+  dependencies:
+    "@babel/runtime" "^7.12.1"
+    "@types/hoist-non-react-statics" "^3.3.1"
+    "@types/use-sync-external-store" "^0.0.3"
+    hoist-non-react-statics "^3.3.2"
+    react-is "^18.0.0"
+    use-sync-external-store "^1.0.0"
+
 react-refresh@^0.14.0:
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
@@ -9890,7 +10056,7 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
-redux@^4.0.0, redux@^4.0.4:
+redux@^4.0.0, redux@^4.0.4, redux@^4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.1.tgz#c08f4306826c49b5e9dc901dee0452ea8fce6197"
   integrity sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==
@@ -11090,11 +11256,16 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==
 
-"typescript@^3 || ^4", typescript@^4.4.0, typescript@^4.9.5:
+"typescript@^3 || ^4", typescript@^4.9.5:
   version "4.9.5"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
   integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
 
+typescript@^5.1.3:
+  version "5.4.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.4.5.tgz#42ccef2c571fdbd0f6718b1d1f5e6e5ef006f611"
+  integrity sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==
+
 uglify-js@^3.1.4:
   version "3.17.4"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.17.4.tgz#61678cf5fa3f5b7eb789bb345df29afb8257c22c"
@@ -11224,11 +11395,16 @@ url-parse@^1.5.3:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
-use-memo-one@^1.1.1:
+use-memo-one@^1.1.1, use-memo-one@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.3.tgz#2fd2e43a2169eabc7496960ace8c79efef975e99"
   integrity sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==
 
+use-sync-external-store@^1.0.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz#c3b6390f3a30eba13200d2302dcdf1e7b57b2ef9"
+  integrity sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==
+
 utf-8-validate@^5.0.2:
   version "5.0.10"
   resolved "https://registry.yarnpkg.com/utf-8-validate/-/utf-8-validate-5.0.10.tgz#d7d10ea39318171ca982718b6b96a8d2442571a2"
@@ -11587,6 +11763,11 @@ ws@^8.11.0:
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.12.0.tgz#485074cc392689da78e1828a9ff23585e06cddd8"
   integrity sha512-kU62emKIdKVeEIOIKVegvqpXMSTAMLJozpHZaJNDYqBjzlSYXQGviYwN1osDLJ9av68qHd4a2oSjd7yD4pacig==
 
+ws@^8.14.2:
+  version "8.17.0"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.17.0.tgz#d145d18eca2ed25aaf791a183903f7be5e295fea"
+  integrity sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==
+
 xml-name-validator@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-4.0.0.tgz#79a006e2e63149a8600f15430f0a4725d1524835"

From 0a5fcaf356dcca6943f231b0cfcba0eb1c5b170f Mon Sep 17 00:00:00 2001
From: adrien guernier <adrien@marmelab.com>
Date: Mon, 17 Jun 2024 17:01:41 +0200
Subject: [PATCH 02/31] fix seed and schema definition

---
 packages/demo/src/dataGenerator/companies.ts | 4 +++-
 packages/demo/src/dataGenerator/dealNotes.ts | 8 +++++---
 supabase/migrations/20230126140204_init.sql  | 3 ++-
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/demo/src/dataGenerator/companies.ts b/packages/demo/src/dataGenerator/companies.ts
index 242101f..b030440 100644
--- a/packages/demo/src/dataGenerator/companies.ts
+++ b/packages/demo/src/dataGenerator/companies.ts
@@ -44,7 +44,9 @@ export const generateCompanies = (db: Db): Company[] => {
             nb_deals: 0,
             // at least 1/3rd of companies for Jane Doe
             sales_id:
-                random.number(2) === 0 ? 0 : random.arrayElement(db.sales).id,
+                random.number({ min: 1, max: 3 }) === 0
+                    ? 0
+                    : random.arrayElement(db.sales).id,
             created_at: randomDate().toISOString(),
         };
     });
diff --git a/packages/demo/src/dataGenerator/dealNotes.ts b/packages/demo/src/dataGenerator/dealNotes.ts
index d59b627..6641d6b 100644
--- a/packages/demo/src/dataGenerator/dealNotes.ts
+++ b/packages/demo/src/dataGenerator/dealNotes.ts
@@ -8,15 +8,17 @@ const type = ['Email', 'Call', 'Call', 'Call', 'Call', 'Meeting', 'Reminder'];
 export const generateDealNotes = (db: Db) => {
     return Array.from(Array(300).keys()).map(id => {
         const deal = random.arrayElement(db.deals);
+        const company = db.companies[deal.company_id as number];
+        const date = company
+            ? randomDate(new Date(company.created_at)).toISOString()
+            : randomDate().toISOString();
         deal.nb_notes++;
         return {
             id,
             deal_id: deal.id,
             type: random.arrayElement(type),
             text: lorem.paragraphs(random.number({ min: 1, max: 4 })),
-            date: randomDate(
-                new Date(db.companies[deal.company_id as number].created_at)
-            ).toISOString(),
+            date,
             sales_id: deal.sales_id,
         };
     });
diff --git a/supabase/migrations/20230126140204_init.sql b/supabase/migrations/20230126140204_init.sql
index d975cb0..f3e74a5 100644
--- a/supabase/migrations/20230126140204_init.sql
+++ b/supabase/migrations/20230126140204_init.sql
@@ -45,7 +45,8 @@ create table "public"."contacts" (
     "has_newsletter" boolean not null,
     "status" character varying not null,
     "tags" bigint[] not null,
-    "sales_id" bigint not null
+    "sales_id" bigint not null,
+    "nb_notes" smallint not null
 );
 
 

From 37cd2221c4d9cb5b8be82b893835793909ca6d59 Mon Sep 17 00:00:00 2001
From: adrien guernier <adrien@marmelab.com>
Date: Mon, 17 Jun 2024 17:02:40 +0200
Subject: [PATCH 03/31] fix login process

---
 package.json                                  |   3 +
 packages/demo/package.json                    |   4 +-
 packages/demo/src/App.tsx                     |   2 +-
 packages/demo/src/authProvider.ts             |  37 ++----
 packages/ra-supabase-core/package.json        |   2 +-
 packages/ra-supabase-core/src/authProvider.ts |   2 +-
 .../ra-supabase-ui-materialui/package.json    |   4 +-
 .../src/LoginPage.tsx                         |   1 -
 yarn.lock                                     | 125 ++++++++----------
 9 files changed, 82 insertions(+), 98 deletions(-)

diff --git a/package.json b/package.json
index 6b63418..d9c9a40 100644
--- a/package.json
+++ b/package.json
@@ -61,5 +61,8 @@
     ],
     "jest": {
         "testEnvironment": "jsdom"
+    },
+    "dependencies": {
+        "ra-core": "^4.16.17"
     }
 }
diff --git a/packages/demo/package.json b/packages/demo/package.json
index 4311720..1e93796 100644
--- a/packages/demo/package.json
+++ b/packages/demo/package.json
@@ -14,10 +14,10 @@
         "faker": "~5.4.0",
         "lodash": "~4.17.5",
         "prop-types": "^15.7.2",
-        "ra-data-fakerest": "^4.12.0",
+        "ra-data-fakerest": "^4.16.19",
         "ra-supabase": "^2.1.0",
         "react": "^18.2.0",
-        "react-admin": "^4.12.0",
+        "react-admin": "^4.16.19",
         "react-beautiful-dnd": "^13.0.0",
         "react-dom": "^18.2.0",
         "react-error-boundary": "^3.1.4",
diff --git a/packages/demo/src/App.tsx b/packages/demo/src/App.tsx
index dea34ca..eeb2b45 100644
--- a/packages/demo/src/App.tsx
+++ b/packages/demo/src/App.tsx
@@ -38,7 +38,7 @@ const App = () => (
             i18nProvider={i18nProvider}
             layout={Layout}
             dashboard={Dashboard}
-            loginPage={LoginPage}
+            loginPage={<LoginPage />}
             queryClient={queryClient}
             theme={{
                 ...defaultTheme,
diff --git a/packages/demo/src/authProvider.ts b/packages/demo/src/authProvider.ts
index c4717b9..4b31de8 100644
--- a/packages/demo/src/authProvider.ts
+++ b/packages/demo/src/authProvider.ts
@@ -2,28 +2,19 @@ import { supabaseAuthProvider } from 'ra-supabase';
 import { supabase } from './supabase';
 
 export const authProvider = supabaseAuthProvider(supabase, {
-    // getIdentity: async user => {
-    //     const { data, error } = await supabase
-    //         .from('sales')
-    //         .select('id, first_name, last_name')
-    //         .ilike('email', user.email as string)
-    //         .single();
+    getIdentity: async user => {
+        const { data, error } = await supabase
+            .from('sales')
+            .select('id, first_name, last_name')
+            .ilike('email', user.email as string)
+            .single();
 
-    //     if (!data || error) {
-    //         throw new Error();
-    //     }
-    //     return {
-    //         id: data.id,
-    //         fullName: `${data.first_name} ${data.last_name}`,
-    //     };
-    // },
-    getIdentity: async () => Promise.resolve(),
-    checkAuth: async () => Promise.resolve(),
-    getPermissions: async () => Promise.resolve(),
-    handleCallback: async () => Promise.resolve(),
-    checkError: async () => Promise.resolve(),
-    logout: async () => Promise.resolve(),
-    resetPassword: async () => Promise.resolve(),
-    setPassword: async () => Promise.resolve(),
-    login: async () => Promise.resolve(),
+        if (!data || error) {
+            throw new Error();
+        }
+        return {
+            id: data.id,
+            fullName: `${data.first_name} ${data.last_name}`,
+        };
+    },
 });
diff --git a/packages/ra-supabase-core/package.json b/packages/ra-supabase-core/package.json
index 3afa93e..c0aa971 100644
--- a/packages/ra-supabase-core/package.json
+++ b/packages/ra-supabase-core/package.json
@@ -25,7 +25,7 @@
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^14.4.3",
-        "ra-core": "^4.7.0",
+        "ra-core": "^4.16.19",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router": "^6.7.0",
diff --git a/packages/ra-supabase-core/src/authProvider.ts b/packages/ra-supabase-core/src/authProvider.ts
index d831d78..884843f 100644
--- a/packages/ra-supabase-core/src/authProvider.ts
+++ b/packages/ra-supabase-core/src/authProvider.ts
@@ -139,7 +139,7 @@ export const supabaseAuthProvider = (
             return Promise.resolve();
         },
         async getPermissions() {
-const { data, error } = await client.auth.getUser();
+            const { data, error } = await client.auth.getUser();
             if (error) {
                 throw error;
             }
diff --git a/packages/ra-supabase-ui-materialui/package.json b/packages/ra-supabase-ui-materialui/package.json
index ef50b45..9602c4a 100644
--- a/packages/ra-supabase-ui-materialui/package.json
+++ b/packages/ra-supabase-ui-materialui/package.json
@@ -21,8 +21,8 @@
         "@mui/icons-material": "^5.11.0",
         "@mui/material": "^5.11.6",
         "@supabase/supabase-js": "^2.4.1",
-        "ra-core": "^4.7.0",
-        "ra-ui-materialui": "^4.7.1",
+        "ra-core": "^4.16.19",
+        "ra-ui-materialui": "^4.16.19",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router": "^6.7.0"
diff --git a/packages/ra-supabase-ui-materialui/src/LoginPage.tsx b/packages/ra-supabase-ui-materialui/src/LoginPage.tsx
index eb958f1..fcaa75d 100644
--- a/packages/ra-supabase-ui-materialui/src/LoginPage.tsx
+++ b/packages/ra-supabase-ui-materialui/src/LoginPage.tsx
@@ -72,7 +72,6 @@ import {
  * );
  */
 export const LoginPage = (props: LoginPageProps) => {
-    useRedirectIfAuthenticated();
     const {
         children,
         disableEmailPassword = false,
diff --git a/yarn.lock b/yarn.lock
index 2f55573..462fdd2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9662,10 +9662,10 @@ quick-lru@^4.0.1:
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f"
   integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==
 
-ra-core@^4.16.17:
-  version "4.16.17"
-  resolved "https://registry.yarnpkg.com/ra-core/-/ra-core-4.16.17.tgz#35a5fe689e42ade1bf430bbe96f0100175ae03cf"
-  integrity sha512-85dpwo6D5nv/UTJJxBqYFWP8H4O4bc+prL8ar8Trb4om2X75zK6FsW/4ZXKlhrRPM+fP+s/v3xYrFjTo/zT4hQ==
+ra-core@^4.16.17, ra-core@^4.16.19:
+  version "4.16.19"
+  resolved "https://registry.yarnpkg.com/ra-core/-/ra-core-4.16.19.tgz#d402cde87368ddfbd30a540b7e9f8e1c6ff0fec6"
+  integrity sha512-1qNuLGaGSHYv5esqJcu7n/PeMKTBXA3JXzjQPAPDK9dBsuWC1IXx9MilivANwh8doYbpFfqsX8VJyW1aqIG1Pg==
   dependencies:
     clsx "^1.1.1"
     date-fns "^2.19.0"
@@ -9678,48 +9678,32 @@ ra-core@^4.16.17:
     react-is "^17.0.2"
     react-query "^3.32.1"
 
-ra-core@^4.7.0:
-  version "4.7.2"
-  resolved "https://registry.yarnpkg.com/ra-core/-/ra-core-4.7.2.tgz#fdfe127da3aa04ff5b53d265ca3a00d6590b77ad"
-  integrity sha512-05PPxlcHvAgDFRlos3WwR52FA9jFyn1IXQYetvFksyah/1mulSVptXrzG3LdWBE/XazsgHi5JT7G8BdqxJyGzw==
-  dependencies:
-    clsx "^1.1.1"
-    date-fns "^2.19.0"
-    eventemitter3 "^4.0.7"
-    inflection "~1.12.0"
-    jsonexport "^3.2.0"
-    lodash "~4.17.5"
-    prop-types "^15.6.1"
-    query-string "^7.1.1"
-    react-is "^17.0.2"
-    react-query "^3.32.1"
-
-ra-data-fakerest@^4.12.0:
-  version "4.16.17"
-  resolved "https://registry.yarnpkg.com/ra-data-fakerest/-/ra-data-fakerest-4.16.17.tgz#fb944874e3f50472f50d651ac5023a85bd909c83"
-  integrity sha512-iRRcf9lgW8vyt000blLCAKGLg04I4mROnWeKdK34sZu+gHfo0NTsPp89hqTllvcMN1ONLykzSHsWrUQPN0tNpA==
+ra-data-fakerest@^4.16.19:
+  version "4.16.19"
+  resolved "https://registry.yarnpkg.com/ra-data-fakerest/-/ra-data-fakerest-4.16.19.tgz#201bd801e03314d5e44366ed3e7c2f92be6f69ac"
+  integrity sha512-bJ1sZJWGr2fcHVpLckU1nLIE0Pm4Cu9f1TPAuO80WuK9jgtpE1YlvmFmL3Nxj+lXIWJstgmDit2BhqWzMRjO7A==
   dependencies:
     fakerest "^3.0.0"
 
-ra-i18n-polyglot@^4.16.17:
-  version "4.16.17"
-  resolved "https://registry.yarnpkg.com/ra-i18n-polyglot/-/ra-i18n-polyglot-4.16.17.tgz#a829b368eee7e8165769b8e96a89d5bdb9bfda08"
-  integrity sha512-ZsXqWg+F06rdavgKF/ZzI+3N5xtgZAOnpnFOdKaEOUMTHE+p7E512St/EkqS52FfCqQNpLkZ/zsZRJkIutmNZg==
+ra-i18n-polyglot@^4.16.19:
+  version "4.16.19"
+  resolved "https://registry.yarnpkg.com/ra-i18n-polyglot/-/ra-i18n-polyglot-4.16.19.tgz#884100ea7f20ddf044e72c5d78c1c5c19fc0dd12"
+  integrity sha512-gRnY0fUn61cVtR36Qf5mgULXnQALRrjZ8Hnp7w+U9YvtrzapNTuIyZem3Tp0QL+/jRgxeqlQW7dqPYdV0bC7vg==
   dependencies:
     node-polyglot "^2.2.2"
-    ra-core "^4.16.17"
+    ra-core "^4.16.19"
 
-ra-language-english@^4.16.17:
-  version "4.16.17"
-  resolved "https://registry.yarnpkg.com/ra-language-english/-/ra-language-english-4.16.17.tgz#fa16517458057133f9aaa6023288998b08411f71"
-  integrity sha512-ypvlZ+2jXVvLaeTp/Ri470TdAOjiQXecEITBs2r9fQdWU4NFTzU25nwq6LhWbFLFHSiJkw86OLR3T1Hd/veBlg==
+ra-language-english@^4.16.19:
+  version "4.16.19"
+  resolved "https://registry.yarnpkg.com/ra-language-english/-/ra-language-english-4.16.19.tgz#5e99bbfbab0b99a1ed31d9df9e01e51e08c78a85"
+  integrity sha512-k8ykj7bJ5UEAebB+SsOAcpyb6gUlsNkJ8N0+lDAezpilBaHahDQaYtNKA+GkoZnU8rIKYMYLttcl3VdCllkG2g==
   dependencies:
-    ra-core "^4.16.17"
+    ra-core "^4.16.19"
 
-ra-ui-materialui@^4.16.18:
-  version "4.16.18"
-  resolved "https://registry.yarnpkg.com/ra-ui-materialui/-/ra-ui-materialui-4.16.18.tgz#4aec4d17cfe21c1a828565c28bffe1ea134f59a1"
-  integrity sha512-vVLGVW3CZuTIptQylhwmMgkD26wppTd3AFoa8h1S0wdO0IUs3DiyD/RiWNbshVdhXOug4CocSYwfaY+eR+mqMw==
+ra-ui-materialui@^4.16.19:
+  version "4.16.19"
+  resolved "https://registry.yarnpkg.com/ra-ui-materialui/-/ra-ui-materialui-4.16.19.tgz#67a7a03a8786e8db3ad6aeebb34535984df6e9c8"
+  integrity sha512-EyalFIUq9oUQ8N/vAeQFlrBaRTU/pMPAHvmfPHUxL5ajcQaSii6XKhRgT9S+YOec/XAU0DDaTjH9oJm0H3UgNA==
   dependencies:
     autosuggest-highlight "^3.1.1"
     clsx "^1.1.1"
@@ -9736,24 +9720,6 @@ ra-ui-materialui@^4.16.18:
     react-query "^3.32.1"
     react-transition-group "^4.4.1"
 
-ra-ui-materialui@^4.7.1:
-  version "4.7.3"
-  resolved "https://registry.yarnpkg.com/ra-ui-materialui/-/ra-ui-materialui-4.7.3.tgz#3e97d0f39ed1f4fbb35cc8594bea77390f3d1fe8"
-  integrity sha512-tiuEXtmFX0lLWYe0ceAjZ1OZQgmBhiJrPGtG6qN2zHMqK9soBvqcyEDCxw2fVtCnOMnaocSF3XXGocqfwzyeZg==
-  dependencies:
-    autosuggest-highlight "^3.1.1"
-    clsx "^1.1.1"
-    css-mediaquery "^0.1.2"
-    inflection "~1.12.0"
-    jsonexport "^3.2.0"
-    lodash "~4.17.5"
-    prop-types "^15.7.0"
-    query-string "^7.1.1"
-    react-dropzone "^12.0.4"
-    react-error-boundary "^3.1.4"
-    react-query "^3.32.1"
-    react-transition-group "^4.4.1"
-
 raf-schd@^4.0.2, raf-schd@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.3.tgz#5d6c34ef46f8b2a0e880a8fcdb743efc5bfdbc1a"
@@ -9766,20 +9732,20 @@ raf@^3.4.1:
   dependencies:
     performance-now "^2.1.0"
 
-react-admin@^4.12.0:
-  version "4.16.18"
-  resolved "https://registry.yarnpkg.com/react-admin/-/react-admin-4.16.18.tgz#8c4feb0f3128334acfeacb3ba26224326d872875"
-  integrity sha512-KOBKFFMkPmTaAChH7EOuNV4AeNN8iVMVIeDkXU1wbguafLCwV8goeguWgZHzafVhtdOjsxdYKezfBGBIKnEbBA==
+react-admin@^4.16.19:
+  version "4.16.19"
+  resolved "https://registry.yarnpkg.com/react-admin/-/react-admin-4.16.19.tgz#c8f047bbc954da218fb0845d7ef139fb93ac56ef"
+  integrity sha512-aFUPEbHFaDbfT3158moam2bchiQHE5C1f4yljSV7/0FukFkKa0ihS2hosPchqzilPEOS41ve0krYNEnHCPlHxw==
   dependencies:
     "@emotion/react" "^11.4.1"
     "@emotion/styled" "^11.3.0"
     "@mui/icons-material" "^5.0.1"
     "@mui/material" "^5.0.2"
     history "^5.1.0"
-    ra-core "^4.16.17"
-    ra-i18n-polyglot "^4.16.17"
-    ra-language-english "^4.16.17"
-    ra-ui-materialui "^4.16.18"
+    ra-core "^4.16.19"
+    ra-i18n-polyglot "^4.16.19"
+    ra-language-english "^4.16.19"
+    ra-ui-materialui "^4.16.19"
     react-hook-form "^7.43.9"
     react-router "^6.1.0"
     react-router-dom "^6.1.0"
@@ -10679,7 +10645,16 @@ string-natural-compare@^3.0.1:
   resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
   integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
 
-"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -10779,7 +10754,14 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -11672,7 +11654,7 @@ wordwrap@^1.0.0:
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -11690,6 +11672,15 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"

From 8f98a40df29b50a19cd49e7dee4ffc737a805d6e Mon Sep 17 00:00:00 2001
From: adrien guernier <adrien@marmelab.com>
Date: Thu, 20 Jun 2024 12:16:37 +0200
Subject: [PATCH 04/31] update demo and fix errors

---
 packages/demo/db-seed.ts                      |   5 +-
 packages/demo/src/App.tsx                     |   8 +-
 packages/demo/src/companies/CompanyAside.tsx  |  22 ++-
 packages/demo/src/companies/CompanyCard.tsx   |  15 +-
 packages/demo/src/companies/CompanyShow.tsx   | 116 +++++++-----
 packages/demo/src/companies/GridList.tsx      |   4 +-
 packages/demo/src/companies/LogoField.tsx     |   2 +-
 packages/demo/src/contacts/Avatar.tsx         |   1 -
 packages/demo/src/contacts/ContactAside.tsx   |  97 +++++-----
 packages/demo/src/contacts/ContactCreate.tsx  |  60 +++---
 packages/demo/src/contacts/ContactInputs.tsx  | 174 +++++++++++++----
 packages/demo/src/contacts/ContactList.tsx    |  24 ++-
 .../demo/src/contacts/ContactListFilter.tsx   |  22 +--
 packages/demo/src/contacts/ContactShow.tsx    |   2 +-
 packages/demo/src/contacts/TagsListEdit.tsx   |  21 ++-
 packages/demo/src/contacts/constants.ts       |   5 +
 packages/demo/src/contacts/index.tsx          |   3 +
 packages/demo/src/dashboard/Dashboard.tsx     |   7 +-
 packages/demo/src/dashboard/DealsChart.tsx    |   8 +-
 packages/demo/src/dashboard/DealsPipeline.tsx |  92 ---------
 packages/demo/src/dashboard/HotContacts.tsx   |   7 +-
 packages/demo/src/dashboard/LatestNotes.tsx   |  10 +-
 packages/demo/src/dashboard/TasksList.tsx     |  89 +++++++++
 packages/demo/src/dataGenerator/companies.ts  |   2 +-
 .../demo/src/dataGenerator/contactNotes.ts    |   2 -
 packages/demo/src/deals/ContactList.tsx       |   4 +-
 packages/demo/src/deals/DealCreate.tsx        |   6 +
 packages/demo/src/deals/DealList.tsx          |   2 +-
 packages/demo/src/notes/NewNote.tsx           |  16 +-
 packages/demo/src/tasks/AddTask.tsx           | 129 +++++++++++++
 packages/demo/src/tasks/Task.tsx              | 178 ++++++++++++++++++
 packages/demo/src/tasks/TasksIterator.tsx     |  29 +++
 packages/demo/src/types.ts                    |   1 -
 supabase/migrations/20230126140204_init.sql   |  21 ++-
 34 files changed, 853 insertions(+), 331 deletions(-)
 create mode 100644 packages/demo/src/contacts/constants.ts
 delete mode 100644 packages/demo/src/dashboard/DealsPipeline.tsx
 create mode 100644 packages/demo/src/dashboard/TasksList.tsx
 create mode 100644 packages/demo/src/tasks/AddTask.tsx
 create mode 100644 packages/demo/src/tasks/Task.tsx
 create mode 100644 packages/demo/src/tasks/TasksIterator.tsx

diff --git a/packages/demo/db-seed.ts b/packages/demo/db-seed.ts
index 62924ce..6cdbb14 100644
--- a/packages/demo/db-seed.ts
+++ b/packages/demo/db-seed.ts
@@ -91,10 +91,13 @@ async function main() {
                     new Date(a.date).valueOf() - new Date(b.date).valueOf()
             )
             .map(note => {
-                return supabase.from('contacts').update({
+                const relatedContact = {
                     ...persistedContacts.find(
                         contact => contact.id === note.contact_id
                     ),
+                };
+                return supabase.from('contacts').update({
+                    ...relatedContact,
                     status: note.status,
                 });
             })
diff --git a/packages/demo/src/App.tsx b/packages/demo/src/App.tsx
index eeb2b45..cb0478f 100644
--- a/packages/demo/src/App.tsx
+++ b/packages/demo/src/App.tsx
@@ -63,7 +63,13 @@ const App = () => (
             <Resource name="contacts" {...contacts} />
             <Resource name="companies" {...companies} />
             <Resource name="tasks" list={ListGuesser} />
-            <Resource name="sales" list={ListGuesser} />
+            <Resource
+                name="sales"
+                list={ListGuesser}
+                recordRepresentation={(record: any) =>
+                    `${record.first_name} ${record.last_name}`
+                }
+            />
             <Resource name="tags" list={ListGuesser} />
         </Admin>
     </BrowserRouter>
diff --git a/packages/demo/src/companies/CompanyAside.tsx b/packages/demo/src/companies/CompanyAside.tsx
index 537caf7..bd185e0 100644
--- a/packages/demo/src/companies/CompanyAside.tsx
+++ b/packages/demo/src/companies/CompanyAside.tsx
@@ -34,9 +34,19 @@ export const CompanyAside = ({ link = 'edit' }: CompanyAsideProps) => {
 
             <Box mt={2}>
                 <Typography variant="body2">
-                    Website: <Link href={record.website}>{record.website}</Link>
-                    <br />
-                    LinkedIn: <Link href={record.linkedIn}>LinkedIn</Link>
+                    {record.website && (
+                        <>
+                            Website:{' '}
+                            <Link href={record.website}>{record.website}</Link>
+                        </>
+                    )}
+                    {record.linkedIn && (
+                        <>
+                            <br />
+                            LinkedIn:{' '}
+                            <Link href={record.linkedIn}>LinkedIn</Link>
+                        </>
+                    )}
                 </Typography>
             </Box>
 
@@ -47,7 +57,7 @@ export const CompanyAside = ({ link = 'edit' }: CompanyAsideProps) => {
                     color="textSecondary"
                     component="span"
                 >
-                    Main
+                    Main Address
                 </Typography>
             </Box>
 
@@ -86,9 +96,7 @@ export const CompanyAside = ({ link = 'edit' }: CompanyAsideProps) => {
                     <FunctionField<Sale>
                         source="last_name"
                         render={record =>
-                            record
-                                ? `${record.first_name} ${record.last_name}`
-                                : ''
+                            `${record.first_name} ${record.last_name}`
                         }
                     />
                 </ReferenceField>
diff --git a/packages/demo/src/companies/CompanyCard.tsx b/packages/demo/src/companies/CompanyCard.tsx
index 56b80ad..cd1d18a 100644
--- a/packages/demo/src/companies/CompanyCard.tsx
+++ b/packages/demo/src/companies/CompanyCard.tsx
@@ -1,10 +1,14 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { Paper, Typography, Link as MuiLink, Box } from '@mui/material';
+import { Paper, Typography, Box } from '@mui/material';
 import ContactsIcon from '@mui/icons-material/AccountCircle';
 import DealIcon from '@mui/icons-material/MonetizationOn';
-import { useCreatePath, SelectField, useRecordContext } from 'react-admin';
-import { Link } from 'react-router-dom';
+import {
+    useCreatePath,
+    SelectField,
+    useRecordContext,
+    Link,
+} from 'react-admin';
 
 import { sectors } from './sectors';
 import { CompanyAvatar } from './CompanyAvatar';
@@ -17,8 +21,7 @@ export const CompanyCard = (props: { record?: Company }) => {
     if (!record) return null;
 
     return (
-        <MuiLink
-            component={Link}
+        <Link
             to={createPath({
                 resource: 'companies',
                 id: record.id,
@@ -79,6 +82,6 @@ export const CompanyCard = (props: { record?: Company }) => {
                     </Box>
                 </Box>
             </Paper>
-        </MuiLink>
+        </Link>
     );
 };
diff --git a/packages/demo/src/companies/CompanyShow.tsx b/packages/demo/src/companies/CompanyShow.tsx
index b715ea3..97c1979 100644
--- a/packages/demo/src/companies/CompanyShow.tsx
+++ b/packages/demo/src/companies/CompanyShow.tsx
@@ -9,6 +9,7 @@ import {
     useRecordContext,
     useListContext,
     RecordContextProvider,
+    SortButton,
 } from 'react-admin';
 import {
     Box,
@@ -24,6 +25,7 @@ import {
     Tabs,
     Tab,
     Divider,
+    Stack,
 } from '@mui/material';
 import PersonAddIcon from '@mui/icons-material/PersonAdd';
 import { Link as RouterLink } from 'react-router-dom';
@@ -63,7 +65,8 @@ const CompanyShowContent = () => {
                                     {record.name}
                                 </Typography>
                                 <Typography variant="body2">
-                                    <TextField source="sector" />,{' '}
+                                    <TextField source="sector" />
+                                    {record.size && ', '}
                                     <SelectField
                                         source="size"
                                         choices={sizes}
@@ -103,6 +106,21 @@ const CompanyShowContent = () => {
                                 target="company_id"
                                 sort={{ field: 'last_name', order: 'ASC' }}
                             >
+                                <Stack
+                                    direction="row"
+                                    justifyContent="flex-end"
+                                    spacing={2}
+                                    mt={1}
+                                >
+                                    <SortButton
+                                        fields={[
+                                            'last_name',
+                                            'first_name',
+                                            'last_seen',
+                                        ]}
+                                    />
+                                    <CreateRelatedContactButton />
+                                </Stack>
                                 <ContactsIterator />
                             </ReferenceManyField>
                         </TabPanel>
@@ -151,48 +169,55 @@ const ContactsIterator = () => {
 
     const now = Date.now();
     return (
-        <Box>
-            <List>
-                {contacts.map(contact => (
-                    <RecordContextProvider key={contact.id} value={contact}>
-                        <ListItem
-                            button
-                            component={RouterLink}
-                            to={`/contacts/${contact.id}/show`}
-                        >
-                            <ListItemAvatar>
-                                <Avatar />
-                            </ListItemAvatar>
-                            <ListItemText
-                                primary={`${contact.first_name} ${contact.last_name}`}
-                                secondary={
-                                    <>
-                                        {contact.title} <TagsList />
-                                    </>
-                                }
-                            />
-                            <ListItemSecondaryAction>
-                                <Typography
-                                    variant="body2"
-                                    color="textSecondary"
-                                    component="span"
-                                >
-                                    last activity{' '}
-                                    {formatDistance(
-                                        new Date(contact.last_seen),
-                                        now
-                                    )}{' '}
-                                    ago <Status status={contact.status} />
-                                </Typography>
-                            </ListItemSecondaryAction>
-                        </ListItem>
-                    </RecordContextProvider>
-                ))}
-            </List>
-            <Box textAlign="center" mt={1}>
-                <CreateRelatedContactButton />
-            </Box>
-        </Box>
+        <List dense sx={{ pt: 0 }}>
+            {contacts.map(contact => (
+                <RecordContextProvider key={contact.id} value={contact}>
+                    <ListItem
+                        button
+                        component={RouterLink}
+                        to={`/contacts/${contact.id}/show`}
+                    >
+                        <ListItemAvatar>
+                            <Avatar />
+                        </ListItemAvatar>
+                        <ListItemText
+                            primary={`${contact.first_name} ${contact.last_name}`}
+                            secondary={
+                                <>
+                                    {contact.title}
+                                    {contact.nb_notes
+                                        ? ` - ${contact.nb_notes} note${
+                                              contact.nb_notes > 1 ? 's' : ''
+                                          }`
+                                        : ''}
+                                    {contact.nb_tasks
+                                        ? ` - ${contact.nb_tasks} task${
+                                              contact.nb_tasks > 1 ? 's' : ''
+                                          }`
+                                        : ''}
+                                    &nbsp; &nbsp;
+                                    <TagsList />
+                                </>
+                            }
+                        />
+                        <ListItemSecondaryAction>
+                            <Typography
+                                variant="body2"
+                                color="textSecondary"
+                                component="span"
+                            >
+                                last activity{' '}
+                                {formatDistance(
+                                    new Date(contact.last_seen),
+                                    now
+                                )}{' '}
+                                ago <Status status={contact.status} />
+                            </Typography>
+                        </ListItemSecondaryAction>
+                    </ListItem>
+                </RecordContextProvider>
+            ))}
+        </List>
     );
 };
 
@@ -202,9 +227,8 @@ const CreateRelatedContactButton = () => {
         <Button
             component={RouterLink}
             to="/contacts/create"
-            state={{ record: { company_id: company.id } }}
+            state={company ? { record: { company_id: company.id } } : undefined}
             color="primary"
-            variant="contained"
             size="small"
             startIcon={<PersonAddIcon />}
         >
@@ -220,7 +244,7 @@ const DealsIterator = () => {
     const now = Date.now();
     return (
         <Box>
-            <List>
+            <List dense>
                 {deals.map(deal => (
                     <ListItem
                         button
diff --git a/packages/demo/src/companies/GridList.tsx b/packages/demo/src/companies/GridList.tsx
index c72b8fe..cfaafd3 100644
--- a/packages/demo/src/companies/GridList.tsx
+++ b/packages/demo/src/companies/GridList.tsx
@@ -26,9 +26,9 @@ const LoadingGridList = () => (
 );
 
 const LoadedGridList = () => {
-    const { data, isLoading } = useListContext<Company>();
+    const { data, error, isLoading } = useListContext<Company>();
 
-    if (isLoading) return null;
+    if (isLoading || error) return null;
 
     return (
         <Box display="flex" flexWrap="wrap" width="100%" gap={1}>
diff --git a/packages/demo/src/companies/LogoField.tsx b/packages/demo/src/companies/LogoField.tsx
index c8881f7..7003896 100644
--- a/packages/demo/src/companies/LogoField.tsx
+++ b/packages/demo/src/companies/LogoField.tsx
@@ -15,7 +15,7 @@ export const LogoField = ({
     size?: 'small' | 'medium';
 }) => {
     const record = useRecordContext<Company>();
-    if (!record) return null;
+    if (!record || !record.logo) return null;
     return (
         <Box
             component="img"
diff --git a/packages/demo/src/contacts/Avatar.tsx b/packages/demo/src/contacts/Avatar.tsx
index 35f489f..0a5d376 100644
--- a/packages/demo/src/contacts/Avatar.tsx
+++ b/packages/demo/src/contacts/Avatar.tsx
@@ -7,7 +7,6 @@ import { Contact } from '../types';
 export const Avatar = (props: { record?: Contact }) => {
     const record = useRecordContext<Contact>(props);
     if (!record) return null;
-
     return (
         <MuiAvatar src={record.avatar}>
             {record.first_name.charAt(0)}
diff --git a/packages/demo/src/contacts/ContactAside.tsx b/packages/demo/src/contacts/ContactAside.tsx
index ceb4e3c..74b98eb 100644
--- a/packages/demo/src/contacts/ContactAside.tsx
+++ b/packages/demo/src/contacts/ContactAside.tsx
@@ -6,18 +6,22 @@ import {
     ReferenceManyField,
     EditButton,
     ShowButton,
-    useListContext,
     ReferenceField,
+    SelectField,
     FunctionField,
     useRecordContext,
 } from 'react-admin';
-import { Box, Typography, Divider, List, ListItem } from '@mui/material';
+import { Box, Typography, Divider } from '@mui/material';
 import { TagsListEdit } from './TagsListEdit';
+import { AddTask } from '../tasks/AddTask';
+import { TasksIterator } from '../tasks/TasksIterator';
 
 import { Contact, Sale } from '../types';
+import { genders } from './constants';
 
 export const ContactAside = ({ link = 'edit' }: { link?: 'edit' | 'show' }) => {
     const record = useRecordContext<Contact>();
+    if (!record) return null;
     return (
         <Box ml={4} width={250} minWidth={250}>
             <Box textAlign="center" mb={2}>
@@ -29,28 +33,35 @@ export const ContactAside = ({ link = 'edit' }: { link?: 'edit' | 'show' }) => {
             </Box>
             <Typography variant="subtitle2">Personal info</Typography>
             <Divider />
-            <EmailField
-                sx={{ mt: 2, mb: 1, display: 'block' }}
-                source="email"
-            />
-            <TextField source="phone_number1" />{' '}
-            <Typography variant="body2" color="textSecondary" component="span">
-                Work
+            <EmailField sx={{ mt: 2, display: 'block' }} source="email" />
+            {record.phone_number1 && (
+                <Box>
+                    <TextField source="phone_number1" />{' '}
+                    <Typography
+                        variant="body2"
+                        color="textSecondary"
+                        component="span"
+                    >
+                        Work
+                    </Typography>
+                </Box>
+            )}
+            {record.phone_number2 && (
+                <Box>
+                    <TextField source="phone_number2" />{' '}
+                    <Typography
+                        variant="body2"
+                        color="textSecondary"
+                        component="span"
+                    >
+                        Home
+                    </Typography>
+                </Box>
+            )}
+            <SelectField source="gender" choices={genders} />
+            <Typography variant="subtitle2" mt={2}>
+                Background
             </Typography>
-            <Box mb={1}>
-                <TextField source="phone_number2" />{' '}
-                <Typography
-                    variant="body2"
-                    color="textSecondary"
-                    component="span"
-                >
-                    Home
-                </Typography>
-            </Box>
-            <Typography variant="body2" mb={3}>
-                {record.gender === 'male' ? 'He/Him' : 'She/Her'}
-            </Typography>
-            <Typography variant="subtitle2">Background</Typography>
             <Divider />
             <Typography variant="body2" mt={2}>
                 {record && record.background}
@@ -103,34 +114,18 @@ export const ContactAside = ({ link = 'edit' }: { link?: 'edit' | 'show' }) => {
                 <Divider />
                 <TagsListEdit />
             </Box>
-            <ReferenceManyField target="contact_id" reference="tasks">
-                <TasksIterator />
-            </ReferenceManyField>
-        </Box>
-    );
-};
-
-const TasksIterator = () => {
-    const { data, isLoading } = useListContext();
-    if (isLoading || data.length === 0) return null;
-    return (
-        <Box>
-            <Typography variant="subtitle2">Tasks</Typography>
-            <Divider />
-
-            <List>
-                {data.map(task => (
-                    <ListItem key={task.id} disableGutters>
-                        <Box>
-                            <Typography variant="body2">{task.text}</Typography>
-                            <Typography variant="body2" color="textSecondary">
-                                due{' '}
-                                <DateField source="due_date" record={task} />
-                            </Typography>
-                        </Box>
-                    </ListItem>
-                ))}
-            </List>
+            <Box>
+                <Typography variant="subtitle2">Tasks</Typography>
+                <Divider />
+                <ReferenceManyField
+                    target="contact_id"
+                    reference="tasks"
+                    sort={{ field: 'due_date', order: 'ASC' }}
+                >
+                    <TasksIterator />
+                </ReferenceManyField>
+                <AddTask />
+            </Box>
         </Box>
     );
 };
diff --git a/packages/demo/src/contacts/ContactCreate.tsx b/packages/demo/src/contacts/ContactCreate.tsx
index a1a0f68..f3b0393 100644
--- a/packages/demo/src/contacts/ContactCreate.tsx
+++ b/packages/demo/src/contacts/ContactCreate.tsx
@@ -1,37 +1,41 @@
 import * as React from 'react';
-import { CreateBase, Form, Toolbar } from 'react-admin';
+import { CreateBase, Form, Toolbar, useGetIdentity } from 'react-admin';
 import { Card, CardContent, Box, Avatar } from '@mui/material';
 
 import { ContactInputs } from './ContactInputs';
 import { Contact } from '../types';
 
-export const ContactCreate = () => (
-    <CreateBase
-        redirect="show"
-        transform={(data: Contact) => ({
-            ...data,
-            last_seen: new Date(),
-            tags: [],
-        })}
-    >
-        <Box mt={2} display="flex">
-            <Box flex="1">
-                <Form>
-                    <Card>
-                        <CardContent>
-                            <Box>
-                                <Box display="flex">
-                                    <Box mr={2}>
-                                        <Avatar />
+export const ContactCreate = () => {
+    const { identity } = useGetIdentity();
+    return (
+        <CreateBase
+            redirect="show"
+            transform={(data: Contact) => ({
+                ...data,
+                first_seen: new Date().toISOString(),
+                last_seen: new Date().toISOString(),
+                tags: [],
+            })}
+        >
+            <Box mt={2} display="flex">
+                <Box flex="1">
+                    <Form defaultValues={{ sales_id: identity?.id }}>
+                        <Card>
+                            <CardContent>
+                                <Box>
+                                    <Box display="flex">
+                                        <Box mr={2}>
+                                            <Avatar />
+                                        </Box>
+                                        <ContactInputs />
                                     </Box>
-                                    <ContactInputs />
                                 </Box>
-                            </Box>
-                        </CardContent>
-                        <Toolbar />
-                    </Card>
-                </Form>
+                            </CardContent>
+                            <Toolbar />
+                        </Card>
+                    </Form>
+                </Box>
             </Box>
-        </Box>
-    </CreateBase>
-);
+        </CreateBase>
+    );
+};
diff --git a/packages/demo/src/contacts/ContactInputs.tsx b/packages/demo/src/contacts/ContactInputs.tsx
index 4b7a4c8..66ed4a5 100644
--- a/packages/demo/src/contacts/ContactInputs.tsx
+++ b/packages/demo/src/contacts/ContactInputs.tsx
@@ -4,39 +4,147 @@ import {
     ReferenceInput,
     AutocompleteInput,
     BooleanInput,
+    SelectInput,
+    required,
+    email,
+    useCreate,
+    useGetIdentity,
+    useNotify,
 } from 'react-admin';
-import { Divider, Box } from '@mui/material';
+import { Divider, Box, Stack } from '@mui/material';
 
-export const ContactInputs = () => (
-    <Box flex="1" mt={-1}>
-        <Box display="flex" width={430}>
-            <TextInput source="first_name" fullWidth />
-            <Spacer />
-            <TextInput source="last_name" fullWidth />
-        </Box>
-        <Box display="flex" width={430}>
-            <TextInput source="title" fullWidth />
-            <Spacer />
-            <ReferenceInput source="company_id" reference="companies">
-                <AutocompleteInput optionText="name" fullWidth />
-            </ReferenceInput>
-        </Box>
-        <Divider />
-        <Box mt={2} width={430}>
-            <TextInput source="email" fullWidth />
-        </Box>
-        <Box display="flex" width={430}>
-            <TextInput source="phone_number1" fullWidth />
-            <Spacer />
-            <TextInput source="phone_number2" fullWidth />
-        </Box>
-        <Divider />
-        <Box mt={2} width={430}>
-            <TextInput source="background" multiline fullWidth />
-            <TextInput source="avatar" fullWidth />
-            <BooleanInput source="has_newsletter" />
-        </Box>
-    </Box>
-);
+import { genders } from './constants';
+
+const isUrl = (value: string) => {
+    if (!value) return;
+    try {
+        new URL(value);
+    } catch (_) {
+        return 'Must be a valid URL';
+    }
+};
 
-const Spacer = () => <Box width={20} component="span" />;
+export const ContactInputs = () => {
+    const [create] = useCreate();
+    const { identity } = useGetIdentity();
+    const notify = useNotify();
+    const handleCreateCompany = async (name?: string) => {
+        if (!name) return;
+        try {
+            const newCompany = await create(
+                'companies',
+                {
+                    data: {
+                        name,
+                        sales_id: identity?.id,
+                        created_at: new Date().toISOString(),
+                    },
+                },
+                { returnPromise: true }
+            );
+            return newCompany;
+        } catch (error) {
+            notify('An error occurred while creating the company', {
+                type: 'error',
+            });
+            throw error;
+        }
+    };
+    return (
+        <Box flex="1" mt={-1}>
+            <Stack direction="row" width={430} gap={1}>
+                <TextInput
+                    source="first_name"
+                    validate={required()}
+                    helperText={false}
+                    fullWidth
+                />
+                <TextInput
+                    source="last_name"
+                    validate={required()}
+                    helperText={false}
+                    fullWidth
+                />
+            </Stack>
+            <Stack direction="row" width={430} gap={1}>
+                <TextInput source="title" helperText={false} fullWidth />
+                <ReferenceInput source="company_id" reference="companies">
+                    <AutocompleteInput
+                        optionText="name"
+                        validate={required()}
+                        onCreate={handleCreateCompany}
+                        helperText={false}
+                        fullWidth
+                    />
+                </ReferenceInput>
+            </Stack>
+            <Divider sx={{ my: 2 }} />
+            <Box width={430}>
+                <TextInput
+                    source="email"
+                    helperText={false}
+                    validate={email()}
+                    fullWidth
+                />
+                <Stack direction="row" gap={1}>
+                    <TextInput
+                        source="phone_number1"
+                        helperText={false}
+                        fullWidth
+                    />
+                    <TextInput
+                        source="phone_number2"
+                        helperText={false}
+                        fullWidth
+                    />
+                </Stack>
+            </Box>
+            <Divider sx={{ my: 2 }} />
+            <Box width={430}>
+                <TextInput
+                    source="background"
+                    multiline
+                    helperText={false}
+                    fullWidth
+                />
+                <TextInput
+                    source="avatar"
+                    label="Avatar URL"
+                    helperText={false}
+                    validate={isUrl}
+                    fullWidth
+                />
+                <Stack direction="row" gap={1} alignItems="center">
+                    <SelectInput
+                        source="gender"
+                        choices={genders}
+                        helperText={false}
+                        fullWidth
+                    />
+                    <BooleanInput
+                        source="has_newsletter"
+                        sx={{
+                            width: '100%',
+                            label: { justifyContent: 'center' },
+                        }}
+                        helperText={false}
+                    />
+                </Stack>
+            </Box>
+            <Divider sx={{ my: 2 }} />
+            <Box width={430}>
+                <ReferenceInput
+                    reference="sales"
+                    source="sales_id"
+                    sort={{ field: 'last_name', order: 'ASC' }}
+                >
+                    <SelectInput
+                        helperText={false}
+                        label="Account manager"
+                        sx={{ width: 210 }}
+                    />
+                </ReferenceInput>
+            </Box>
+        </Box>
+    );
+};
diff --git a/packages/demo/src/contacts/ContactList.tsx b/packages/demo/src/contacts/ContactList.tsx
index 8f40c75..aba6a2a 100644
--- a/packages/demo/src/contacts/ContactList.tsx
+++ b/packages/demo/src/contacts/ContactList.tsx
@@ -38,6 +38,7 @@ import { Contact } from '../types';
 const ContactListContent = () => {
     const {
         data: contacts,
+        error,
         isLoading,
         onToggleItem,
         selectedIds,
@@ -45,6 +46,9 @@ const ContactListContent = () => {
     if (isLoading) {
         return <SimpleListLoading hasLeftAvatarOrIcon hasSecondaryText />;
     }
+    if (error) {
+        return null;
+    }
     const now = Date.now();
 
     return (
@@ -52,7 +56,7 @@ const ContactListContent = () => {
             <BulkActionsToolbar>
                 <BulkDeleteButton />
             </BulkActionsToolbar>
-            <List>
+            <List dense>
                 {contacts.map(contact => (
                     <RecordContextProvider key={contact.id} value={contact}>
                         <ListItem
@@ -86,9 +90,21 @@ const ContactListContent = () => {
                                             link={false}
                                         >
                                             <TextField source="name" />
-                                        </ReferenceField>{' '}
-                                        {contact.nb_notes &&
-                                            `- ${contact.nb_notes} notes`}
+                                        </ReferenceField>
+                                        {contact.nb_notes
+                                            ? ` - ${contact.nb_notes} note${
+                                                  contact.nb_notes > 1
+                                                      ? 's'
+                                                      : ''
+                                              }`
+                                            : ''}
+                                        {contact.nb_tasks
+                                            ? ` - ${contact.nb_tasks} task${
+                                                  contact.nb_tasks > 1
+                                                      ? 's'
+                                                      : ''
+                                              }`
+                                            : ''}
                                         &nbsp;&nbsp;
                                         <TagsList />
                                     </>
diff --git a/packages/demo/src/contacts/ContactListFilter.tsx b/packages/demo/src/contacts/ContactListFilter.tsx
index 1b7ce5b..c36cec7 100644
--- a/packages/demo/src/contacts/ContactListFilter.tsx
+++ b/packages/demo/src/contacts/ContactListFilter.tsx
@@ -35,36 +35,36 @@ export const ContactListFilter = () => {
                 <FilterListItem
                     label="Today"
                     value={{
-                        last_seen_gte: endOfYesterday().toISOString(),
-                        last_seen_lte: undefined,
+                        'last_seen@gte': endOfYesterday().toISOString(),
+                        'last_seen@lte': undefined,
                     }}
                 />
                 <FilterListItem
                     label="This week"
                     value={{
-                        last_seen_gte: startOfWeek(new Date()).toISOString(),
-                        last_seen_lte: undefined,
+                        'last_seen@gte': startOfWeek(new Date()).toISOString(),
+                        'last_seen@lte': undefined,
                     }}
                 />
                 <FilterListItem
                     label="Before this week"
                     value={{
-                        last_seen_gte: undefined,
-                        last_seen_lte: startOfWeek(new Date()).toISOString(),
+                        'last_seen@gte': undefined,
+                        'last_seen@lte': startOfWeek(new Date()).toISOString(),
                     }}
                 />
                 <FilterListItem
                     label="Before this month"
                     value={{
-                        last_seen_gte: undefined,
-                        last_seen_lte: startOfMonth(new Date()).toISOString(),
+                        'last_seen@gte': undefined,
+                        'last_seen@lte': startOfMonth(new Date()).toISOString(),
                     }}
                 />
                 <FilterListItem
                     label="Before last month"
                     value={{
-                        last_seen_gte: undefined,
-                        last_seen_lte: subMonths(
+                        'last_seen@gte': undefined,
+                        'last_seen@lte': subMonths(
                             startOfMonth(new Date()),
                             1
                         ).toISOString(),
@@ -121,7 +121,7 @@ export const ContactListFilter = () => {
                                     }}
                                 />
                             }
-                            value={{ tags: [record.id] }}
+                            value={{ tags: `{${record.id}}` }}
                         />
                     ))}
             </FilterList>
diff --git a/packages/demo/src/contacts/ContactShow.tsx b/packages/demo/src/contacts/ContactShow.tsx
index 476d82b..9c89f17 100644
--- a/packages/demo/src/contacts/ContactShow.tsx
+++ b/packages/demo/src/contacts/ContactShow.tsx
@@ -34,7 +34,7 @@ const ContactShowContent = () => {
                                 <Typography variant="h5">
                                     {record.first_name} {record.last_name}
                                 </Typography>
-                                <Typography variant="body2">
+                                <Typography variant="body2" component="div">
                                     {record.title} at{' '}
                                     <ReferenceField
                                         source="company_id"
diff --git a/packages/demo/src/contacts/TagsListEdit.tsx b/packages/demo/src/contacts/TagsListEdit.tsx
index 6715376..f05983d 100644
--- a/packages/demo/src/contacts/TagsListEdit.tsx
+++ b/packages/demo/src/contacts/TagsListEdit.tsx
@@ -34,23 +34,25 @@ export const TagsListEdit = () => {
     const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
     const [disabled, setDisabled] = useState(false);
 
-    const { data: allTags, isLoading: isLoadingAllTags } = useGetList<Tag>(
+    const { data: allTags, isLoading: isPendingAllTags } = useGetList<Tag>(
         'tags',
         {
             pagination: { page: 1, perPage: 10 },
             sort: { field: 'name', order: 'ASC' },
         }
     );
-    const { data: tags, isLoading: isLoadingRecordTags } = useGetMany<Tag>(
+    const { data: tags, isLoading: isPendingRecordTags } = useGetMany<Tag>(
         'tags',
-        { ids: record.tags },
+        { ids: record?.tags },
         { enabled: record && record.tags && record.tags.length > 0 }
     );
     const [update] = useUpdate<Contact>();
     const [create] = useCreate<Tag>();
 
     const unselectedTags =
-        allTags && allTags.filter(tag => !record.tags.includes(tag.id));
+        allTags &&
+        record &&
+        allTags.filter(tag => !record.tags.includes(tag.id));
 
     const handleOpen = (event: React.MouseEvent<HTMLDivElement>) => {
         setAnchorEl(event.currentTarget);
@@ -61,6 +63,9 @@ export const TagsListEdit = () => {
     };
 
     const handleDeleteTag = (id: Identifier) => {
+        if (!record) {
+            throw new Error('No contact record found');
+        }
         const tags = record.tags.filter(tagId => tagId !== id);
         update('contacts', {
             id: record.id,
@@ -70,6 +75,9 @@ export const TagsListEdit = () => {
     };
 
     const handleAddTag = (id: Identifier) => {
+        if (!record) {
+            throw new Error('No contact record found');
+        }
         const tags = [...record.tags, id];
         update('contacts', {
             id: record.id,
@@ -93,6 +101,9 @@ export const TagsListEdit = () => {
 
     const handleCreateTag = (event: FormEvent<HTMLFormElement>) => {
         event.preventDefault();
+        if (!record) {
+            throw new Error('No contact record found');
+        }
         setDisabled(true);
         create(
             'tags',
@@ -119,7 +130,7 @@ export const TagsListEdit = () => {
         );
     };
 
-    if (isLoadingRecordTags || isLoadingAllTags) return null;
+    if (isPendingRecordTags || isPendingAllTags) return null;
     return (
         <>
             {tags?.map(tag => (
diff --git a/packages/demo/src/contacts/constants.ts b/packages/demo/src/contacts/constants.ts
new file mode 100644
index 0000000..a802c11
--- /dev/null
+++ b/packages/demo/src/contacts/constants.ts
@@ -0,0 +1,5 @@
+export const genders = [
+    { id: 'male', name: 'He/Him' },
+    { id: 'female', name: 'She/Her' },
+    { id: 'nonbinary', name: 'They/Them' },
+];
diff --git a/packages/demo/src/contacts/index.tsx b/packages/demo/src/contacts/index.tsx
index 595a814..6486bff 100644
--- a/packages/demo/src/contacts/index.tsx
+++ b/packages/demo/src/contacts/index.tsx
@@ -3,10 +3,13 @@ import { ContactShow } from './ContactShow';
 import { ContactList } from './ContactList';
 import { ContactEdit } from './ContactEdit';
 import { ContactCreate } from './ContactCreate';
+import { Contact } from '../types';
 
 export default {
     list: ContactList,
     show: ContactShow,
     edit: ContactEdit,
     create: ContactCreate,
+    recordRepresentation: (record: Contact) =>
+        record?.first_name + ' ' + record?.last_name,
 };
diff --git a/packages/demo/src/dashboard/Dashboard.tsx b/packages/demo/src/dashboard/Dashboard.tsx
index f6a8a30..5a28e80 100644
--- a/packages/demo/src/dashboard/Dashboard.tsx
+++ b/packages/demo/src/dashboard/Dashboard.tsx
@@ -5,7 +5,8 @@ import { Welcome } from './Welcome';
 import { DealsChart } from './DealsChart';
 import { HotContacts } from './HotContacts';
 import { LatestNotes } from './LatestNotes';
-import { DealsPipeline } from './DealsPipeline';
+
+import { TasksList } from './TasksList';
 
 export const Dashboard = () => (
     <Grid container spacing={2} mt={1}>
@@ -19,10 +20,10 @@ export const Dashboard = () => (
             <LatestNotes />
         </Grid>
         <Grid item xs={12} md={3}>
-            <HotContacts />
+            <TasksList />
         </Grid>
         <Grid item xs={12} md={3}>
-            <DealsPipeline />
+            <HotContacts />
         </Grid>
     </Grid>
 );
diff --git a/packages/demo/src/dashboard/DealsChart.tsx b/packages/demo/src/dashboard/DealsChart.tsx
index 831594c..f92e2f8 100644
--- a/packages/demo/src/dashboard/DealsChart.tsx
+++ b/packages/demo/src/dashboard/DealsChart.tsx
@@ -1,9 +1,8 @@
 import * as React from 'react';
 import { useMemo } from 'react';
-import { Link as RouterLink } from 'react-router-dom';
-import { Box, Link } from '@mui/material';
+import { Box } from '@mui/material';
 import AttachMoneyIcon from '@mui/icons-material/AttachMoney';
-import { useGetList } from 'react-admin';
+import { useGetList, Link } from 'react-admin';
 import { startOfMonth, format } from 'date-fns';
 import { ResponsiveBar } from '@nivo/bar';
 
@@ -29,7 +28,7 @@ export const DealsChart = () => {
         if (!data) return [];
         const dealsByMonth = data.reduce((acc, deal) => {
             const month = startOfMonth(
-                deal.start_at ? new Date(deal.start_at) : new Date()
+                new Date(deal.start_at) ?? new Date()
             ).toISOString();
             if (!acc[month]) {
                 acc[month] = [];
@@ -89,7 +88,6 @@ export const DealsChart = () => {
                     underline="none"
                     variant="h5"
                     color="textSecondary"
-                    component={RouterLink}
                     to="/deals"
                 >
                     Upcoming Deal Revenue
diff --git a/packages/demo/src/dashboard/DealsPipeline.tsx b/packages/demo/src/dashboard/DealsPipeline.tsx
deleted file mode 100644
index 9a6996a..0000000
--- a/packages/demo/src/dashboard/DealsPipeline.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import * as React from 'react';
-import { Link as RouterLink } from 'react-router-dom';
-import { Card, Link, Box } from '@mui/material';
-import MonetizationOnIcon from '@mui/icons-material/MonetizationOn';
-import {
-    useGetList,
-    SimpleList,
-    useGetIdentity,
-    ReferenceField,
-} from 'react-admin';
-
-import { CompanyAvatar } from '../companies/CompanyAvatar';
-import { stages, stageNames } from '../deals/stages';
-import { Deal } from '../types';
-
-export const DealsPipeline = () => {
-    const { identity } = useGetIdentity();
-    const { data, total, isLoading } = useGetList<Deal>(
-        'deals',
-        {
-            pagination: { page: 1, perPage: 10 },
-            sort: { field: 'last_seen', order: 'DESC' },
-            filter: { stage_neq: 'lost', sales_id: identity?.id },
-        },
-        { enabled: Number.isInteger(identity?.id) }
-    );
-
-    const getOrderedDeals = (data?: Deal[]): Deal[] | undefined => {
-        if (!data) {
-            return;
-        }
-        const deals: Deal[] = [];
-        stages
-            .filter(stage => stage !== 'won')
-            .forEach(stage =>
-                data
-                    .filter(deal => deal.stage === stage)
-                    .forEach(deal => deals.push(deal))
-            );
-        return deals;
-    };
-
-    return (
-        <>
-            <Box display="flex" alignItems="center" marginBottom="1em">
-                <Box ml={2} mr={2} display="flex">
-                    <MonetizationOnIcon color="disabled" fontSize="large" />
-                </Box>
-                <Link
-                    underline="none"
-                    variant="h5"
-                    color="textSecondary"
-                    component={RouterLink}
-                    to="/deals"
-                >
-                    Deals Pipeline
-                </Link>
-            </Box>
-            <Card>
-                <SimpleList<Deal>
-                    resource="deals"
-                    linkType="show"
-                    data={getOrderedDeals(data)}
-                    total={total}
-                    isLoading={isLoading}
-                    primaryText={deal => deal.name}
-                    secondaryText={deal =>
-                        `${deal.amount.toLocaleString('en-US', {
-                            notation: 'compact',
-                            style: 'currency',
-                            currency: 'USD',
-                            currencyDisplay: 'narrowSymbol',
-                            minimumSignificantDigits: 3,
-                            // @ts-ignore
-                        })} , ${stageNames[deal.stage]}`
-                    }
-                    leftAvatar={deal => (
-                        <ReferenceField
-                            source="company_id"
-                            record={deal}
-                            reference="companies"
-                            resource="deals"
-                            link={false}
-                        >
-                            <CompanyAvatar size="small" />
-                        </ReferenceField>
-                    )}
-                />
-            </Card>
-        </>
-    );
-};
diff --git a/packages/demo/src/dashboard/HotContacts.tsx b/packages/demo/src/dashboard/HotContacts.tsx
index 7c1026c..c88772a 100644
--- a/packages/demo/src/dashboard/HotContacts.tsx
+++ b/packages/demo/src/dashboard/HotContacts.tsx
@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { Link as RouterLink } from 'react-router-dom';
-import { Card, Box, Link } from '@mui/material';
+import { Card, Box } from '@mui/material';
 import ContactsIcon from '@mui/icons-material/Contacts';
-import { useGetList, SimpleList, useGetIdentity } from 'react-admin';
+import { useGetList, Link, SimpleList, useGetIdentity } from 'react-admin';
 import { formatDistance } from 'date-fns';
 
 import { Avatar } from '../contacts/Avatar';
@@ -33,7 +32,6 @@ export const HotContacts = () => {
                     underline="none"
                     variant="h5"
                     color="textSecondary"
-                    component={RouterLink}
                     to="/contacts"
                 >
                     Hot contacts
@@ -59,6 +57,7 @@ export const HotContacts = () => {
                         )
                     }
                     leftAvatar={contact => <Avatar record={contact} />}
+                    dense
                 />
             </Card>
         </>
diff --git a/packages/demo/src/dashboard/LatestNotes.tsx b/packages/demo/src/dashboard/LatestNotes.tsx
index d80a3b9..ede7c64 100644
--- a/packages/demo/src/dashboard/LatestNotes.tsx
+++ b/packages/demo/src/dashboard/LatestNotes.tsx
@@ -70,7 +70,11 @@ export const LatestNotes = () => {
                             key={`${note.type}_${note.id}`}
                             sx={{ marginBottom: 2 }}
                         >
-                            <Typography variant="body2" color="textSecondary">
+                            <Typography
+                                variant="body2"
+                                color="textSecondary"
+                                component="div"
+                            >
                                 on{' '}
                                 {note.type === 'dealNote' ? (
                                     <Deal note={note} />
@@ -131,9 +135,7 @@ const Contact = ({ note }: any) => (
         >
             <FunctionField<ContactType>
                 variant="body2"
-                render={contact =>
-                    contact ? `${contact.first_name} ${contact.last_name}` : ''
-                }
+                render={contact => `${contact.first_name} ${contact.last_name}`}
             />
         </ReferenceField>
     </>
diff --git a/packages/demo/src/dashboard/TasksList.tsx b/packages/demo/src/dashboard/TasksList.tsx
new file mode 100644
index 0000000..887a1bb
--- /dev/null
+++ b/packages/demo/src/dashboard/TasksList.tsx
@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { Card, Box, Button } from '@mui/material';
+import AssignmentTurnedInIcon from '@mui/icons-material/AssignmentTurnedIn';
+import {
+    useGetList,
+    Link,
+    useGetIdentity,
+    useList,
+    ListContextProvider,
+    ResourceContextProvider,
+} from 'react-admin';
+import { TasksIterator } from '../tasks/TasksIterator';
+
+import { Contact } from '../types';
+
+export const TasksList = () => {
+    const { identity } = useGetIdentity();
+
+    // get all the contacts for this sales
+    const { data: contacts, isLoading: contactsLoading } = useGetList<Contact>(
+        'contacts',
+        {
+            pagination: { page: 1, perPage: 500 },
+            filter: { sales_id: identity?.id },
+        },
+        { enabled: !!identity }
+    );
+
+    // get the first 100 upcoming tasks for these contacts
+    const { data: tasks, isLoading: tasksLoading } = useGetList(
+        'tasks',
+        {
+            pagination: { page: 1, perPage: 100 },
+            sort: { field: 'due_date', order: 'ASC' },
+            filter: {
+                'done_date@is': 'null',
+                'contact_id@in': `(${contacts
+                    ?.map(contact => contact.id)
+                    .join(',')})`,
+            },
+        },
+        { enabled: !!contacts }
+    );
+
+    const isPending = tasksLoading || contactsLoading;
+    // limit to 10 tasks and provide the list context
+    const listContext = useList({
+        data: tasks,
+        resource: 'tasks',
+        perPage: 10,
+    });
+
+    if (isPending || !tasks || !contacts) return null;
+
+    return (
+        <>
+            <Box display="flex" alignItems="center" marginBottom="1em">
+                <Box ml={2} mr={2} display="flex">
+                    <AssignmentTurnedInIcon color="disabled" fontSize="large" />
+                </Box>
+                <Link
+                    underline="none"
+                    variant="h5"
+                    color="textSecondary"
+                    to="/contacts"
+                >
+                    Upcoming tasks
+                </Link>
+            </Box>
+            <Card sx={{ px: 2, mb: '2em' }}>
+                <ResourceContextProvider value="tasks">
+                    <ListContextProvider value={listContext}>
+                        <TasksIterator showContact />
+                    </ListContextProvider>
+                </ResourceContextProvider>
+                {!isPending && (
+                    <Button
+                        onClick={() =>
+                            listContext.setPerPage(listContext.perPage + 10)
+                        }
+                        fullWidth
+                    >
+                        Load more
+                    </Button>
+                )}
+            </Card>
+        </>
+    );
+};
diff --git a/packages/demo/src/dataGenerator/companies.ts b/packages/demo/src/dataGenerator/companies.ts
index b030440..bc5b9d6 100644
--- a/packages/demo/src/dataGenerator/companies.ts
+++ b/packages/demo/src/dataGenerator/companies.ts
@@ -28,7 +28,7 @@ export const generateCompanies = (db: Db): Company[] => {
         return {
             id,
             name: name,
-            logo: `./logos/${id}.png`,
+            logo: `/logos/${id}.png`,
             sector: random.arrayElement(sectors),
             size: random.arrayElement(sizes) as 1 | 10 | 50 | 250 | 500,
             linkedIn: `https://www.linkedin.com/company/${name
diff --git a/packages/demo/src/dataGenerator/contactNotes.ts b/packages/demo/src/dataGenerator/contactNotes.ts
index bb70acd..d25a804 100644
--- a/packages/demo/src/dataGenerator/contactNotes.ts
+++ b/packages/demo/src/dataGenerator/contactNotes.ts
@@ -4,7 +4,6 @@ import { Db } from './types';
 import { ContactNote } from '../types';
 import { randomDate } from './utils';
 
-const type = ['Email', 'Call', 'Call', 'Call', 'Call', 'Meeting', 'Reminder'];
 const status = ['cold', 'cold', 'cold', 'warm', 'warm', 'hot', 'in-contract'];
 
 export const generateContactNotes = (db: Db): ContactNote[] => {
@@ -16,7 +15,6 @@ export const generateContactNotes = (db: Db): ContactNote[] => {
         return {
             id,
             contact_id: contact.id,
-            type: random.arrayElement(type),
             text: lorem.paragraphs(random.number({ min: 1, max: 4 })),
             date,
             sales_id: contact.sales_id,
diff --git a/packages/demo/src/deals/ContactList.tsx b/packages/demo/src/deals/ContactList.tsx
index 7726747..d4bec84 100644
--- a/packages/demo/src/deals/ContactList.tsx
+++ b/packages/demo/src/deals/ContactList.tsx
@@ -4,9 +4,9 @@ import { Box, Link } from '@mui/material';
 import { Link as RouterLink } from 'react-router-dom';
 
 export const ContactList = () => {
-    const { data, isLoading } = useListContext();
+    const { data, error, isLoading } = useListContext();
 
-    if (isLoading) return <div style={{ height: '2em' }} />;
+    if (isLoading || error) return <div style={{ height: '2em' }} />;
     return (
         <Box
             component="ul"
diff --git a/packages/demo/src/deals/DealCreate.tsx b/packages/demo/src/deals/DealCreate.tsx
index ecd4e9b..5aff911 100644
--- a/packages/demo/src/deals/DealCreate.tsx
+++ b/packages/demo/src/deals/DealCreate.tsx
@@ -35,6 +35,10 @@ export const DealCreate = ({ open }: { open: boolean }) => {
     const queryClient = useQueryClient();
 
     const onSuccess = async (deal: Deal) => {
+        if (!allDeals) {
+            redirect('/deals');
+            return;
+        }
         // increase the index of all deals in the same stage as the new deal
         // first, get the list of deals in the same stage
         const deals = allDeals.filter(
@@ -87,6 +91,8 @@ export const DealCreate = ({ open }: { open: boolean }) => {
                     defaultValues={{
                         index: 0,
                         sales_id: identity && identity?.id,
+                        start_at: new Date().toISOString(),
+                        contact_ids: [],
                     }}
                 >
                     <TextInput
diff --git a/packages/demo/src/deals/DealList.tsx b/packages/demo/src/deals/DealList.tsx
index ccb6ab5..9b47e62 100644
--- a/packages/demo/src/deals/DealList.tsx
+++ b/packages/demo/src/deals/DealList.tsx
@@ -43,7 +43,7 @@ const DealList = () => {
 };
 
 const dealFilters = [
-    <SearchInput source="q" alwaysOn />,
+    <SearchInput source="name@ilike" alwaysOn />,
     <OnlyMineInput source="sales_id" alwaysOn />,
     <SelectInput source="type" choices={typeChoices} />,
 ];
diff --git a/packages/demo/src/notes/NewNote.tsx b/packages/demo/src/notes/NewNote.tsx
index 93b5dda..b86e59a 100644
--- a/packages/demo/src/notes/NewNote.tsx
+++ b/packages/demo/src/notes/NewNote.tsx
@@ -10,7 +10,7 @@ import {
     Identifier,
     useResourceContext,
 } from 'react-admin';
-import { Box, TextField as TextInput, Button } from '@mui/material';
+import { Box, TextField as TextInput, Button, Stack } from '@mui/material';
 
 import { StatusSelector } from './StatusSelector';
 
@@ -34,6 +34,7 @@ export const NewNote = ({
     if (!record || !identity) return null;
 
     const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+        console.log(record.type);
         event.preventDefault();
         const data: any = {
             [foreignKeyMapping[reference]]: record.id,
@@ -41,6 +42,9 @@ export const NewNote = ({
             date,
             text,
         };
+        if (record.type) {
+            data.type = record.type;
+        }
         if (showStatus) {
             data.status = status;
         }
@@ -54,11 +58,7 @@ export const NewNote = ({
                     refetch();
                     update(reference, {
                         id: (record && record.id) as unknown as Identifier,
-                        data: {
-                            last_seen: date,
-                            status,
-                            nb_notes: record.nb_notes + 1,
-                        },
+                        data: { last_seen: date, status },
                         previousData: record,
                     });
                 },
@@ -84,7 +84,7 @@ export const NewNote = ({
                 <Box display="flex" justifyContent="space-between" mt={1}>
                     <span>
                         {text ? (
-                            <>
+                            <Stack direction="row">
                                 {showStatus && (
                                     <StatusSelector
                                         status={status}
@@ -116,7 +116,7 @@ export const NewNote = ({
                                         },
                                     }}
                                 />
-                            </>
+                            </Stack>
                         ) : null}
                     </span>
                     <Button
diff --git a/packages/demo/src/tasks/AddTask.tsx b/packages/demo/src/tasks/AddTask.tsx
new file mode 100644
index 0000000..1c8c8d0
--- /dev/null
+++ b/packages/demo/src/tasks/AddTask.tsx
@@ -0,0 +1,129 @@
+import * as React from 'react';
+import { useState } from 'react';
+import ControlPointIcon from '@mui/icons-material/ControlPoint';
+import {
+    Box,
+    Button,
+    Chip,
+    Dialog,
+    DialogTitle,
+    DialogContent,
+    DialogActions,
+    Stack,
+} from '@mui/material';
+import {
+    RecordRepresentation,
+    CreateBase,
+    Form,
+    TextInput,
+    DateInput,
+    SaveButton,
+    SelectInput,
+    Toolbar,
+    required,
+    useRecordContext,
+} from 'react-admin';
+
+const taskTypes = [
+    'None',
+    'Email',
+    'Demo',
+    'Lunch',
+    'Meeting',
+    'Follow-up',
+    'Thank you',
+    'Ship',
+];
+
+export const AddTask = () => {
+    const contact = useRecordContext();
+    const [open, setOpen] = useState(false);
+    const handleOpen = () => {
+        setOpen(true);
+    };
+    return (
+        <>
+            <Box mt={1}>
+                <Chip
+                    icon={<ControlPointIcon />}
+                    size="small"
+                    variant="outlined"
+                    onClick={handleOpen}
+                    label="Add task"
+                    color="primary"
+                />
+            </Box>
+            <CreateBase
+                resource="tasks"
+                record={{
+                    type: 'None',
+                    contact_id: contact?.id,
+                    due_date: new Date().toISOString().slice(0, 10),
+                }}
+                mutationOptions={{ onSuccess: () => setOpen(false) }}
+            >
+                <Dialog
+                    open={open}
+                    onClose={() => setOpen(false)}
+                    aria-labelledby="form-dialog-title"
+                    fullWidth
+                    disableRestoreFocus
+                    maxWidth="sm"
+                >
+                    <Form>
+                        <DialogTitle id="form-dialog-title">
+                            Create a new task for{' '}
+                            <RecordRepresentation
+                                record={contact}
+                                resource="contacts"
+                            />
+                        </DialogTitle>
+                        <DialogContent>
+                            <TextInput
+                                autoFocus
+                                source="text"
+                                label="Description"
+                                validate={required()}
+                                multiline
+                                fullWidth
+                            />
+                            <Stack direction="row" spacing={1} mt={2}>
+                                <DateInput
+                                    source="due_date"
+                                    validate={required()}
+                                    sx={{
+                                        margin: 'initial',
+                                    }}
+                                    fullWidth
+                                />
+                                <SelectInput
+                                    source="type"
+                                    validate={required()}
+                                    choices={taskTypes.map(type => ({
+                                        id: type,
+                                        name: type,
+                                    }))}
+                                    fullWidth
+                                />
+                            </Stack>
+                        </DialogContent>
+                        <DialogActions sx={{ p: 0 }}>
+                            <Toolbar
+                                sx={{
+                                    width: '100%',
+                                    justifyContent: 'flex-end',
+                                    gap: 1,
+                                }}
+                            >
+                                <Button onClick={() => setOpen(false)}>
+                                    Cancel
+                                </Button>
+                                <SaveButton onClick={() => setOpen(false)} />
+                            </Toolbar>
+                        </DialogActions>
+                    </Form>
+                </Dialog>
+            </CreateBase>
+        </>
+    );
+};
diff --git a/packages/demo/src/tasks/Task.tsx b/packages/demo/src/tasks/Task.tsx
new file mode 100644
index 0000000..f0c7d61
--- /dev/null
+++ b/packages/demo/src/tasks/Task.tsx
@@ -0,0 +1,178 @@
+import * as React from 'react';
+import { useState, MouseEvent } from 'react';
+import {
+    DateField,
+    ReferenceField,
+    useUpdate,
+    useDeleteWithUndoController,
+} from 'react-admin';
+import {
+    Checkbox,
+    IconButton,
+    ListItem,
+    ListItemButton,
+    ListItemIcon,
+    ListItemText,
+    Menu,
+    MenuItem,
+    Typography,
+} from '@mui/material';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+
+export const Task = ({
+    task,
+    showContact,
+}: {
+    task: any;
+    showContact?: boolean;
+}) => {
+    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+    const open = Boolean(anchorEl);
+    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const [update, { isLoading: isUpdatePending }] = useUpdate();
+    const { handleDelete } = useDeleteWithUndoController({
+        record: task,
+        redirect: false,
+    });
+
+    const handleCheck = () => () => {
+        update('tasks', {
+            id: task.id,
+            data: {
+                done_date: task.done_date ? null : new Date().toISOString(),
+            },
+            previousData: task,
+        });
+    };
+    const labelId = `checkbox-list-label-${task.id}`;
+    return (
+        <ListItem
+            secondaryAction={
+                <>
+                    <IconButton
+                        edge="end"
+                        aria-label="task actions"
+                        aria-controls={open ? 'basic-menu' : undefined}
+                        onClick={handleClick}
+                        aria-haspopup="true"
+                        aria-expanded={open ? 'true' : undefined}
+                        size="small"
+                    >
+                        <MoreVertIcon />
+                    </IconButton>
+                    <Menu
+                        id="basic-menu"
+                        anchorEl={anchorEl}
+                        open={open}
+                        onClose={handleClose}
+                        MenuListProps={{
+                            'aria-labelledby': 'basic-button',
+                        }}
+                    >
+                        <MenuItem
+                            onClick={() => {
+                                update('tasks', {
+                                    id: task.id,
+                                    data: {
+                                        due_date: new Date(
+                                            Date.now() + 24 * 60 * 60 * 1000
+                                        )
+                                            .toISOString()
+                                            .slice(0, 10),
+                                    },
+                                });
+                                handleClose();
+                            }}
+                        >
+                            Postpone to tomorrow
+                        </MenuItem>
+                        <MenuItem
+                            onClick={() => {
+                                update('tasks', {
+                                    id: task.id,
+                                    data: {
+                                        due_date: new Date(
+                                            Date.now() + 7 * 24 * 60 * 60 * 1000
+                                        )
+                                            .toISOString()
+                                            .slice(0, 10),
+                                    },
+                                });
+                                handleClose();
+                            }}
+                        >
+                            Postpone to next week
+                        </MenuItem>
+                        <MenuItem onClick={handleDelete}>Delete</MenuItem>
+                    </Menu>
+                </>
+            }
+            disableGutters
+            sx={{ pr: 3 }}
+        >
+            <ListItemButton
+                role={undefined}
+                onClick={handleCheck()}
+                dense
+                disabled={isUpdatePending}
+                sx={{
+                    pl: 0,
+                    pr: '0!important',
+                    pt: 0,
+                    pb: 0,
+                    alignItems: 'flex-start',
+                }}
+            >
+                <ListItemIcon sx={{ minWidth: 'auto' }}>
+                    <Checkbox
+                        edge="start"
+                        checked={!!task.done_date}
+                        tabIndex={-1}
+                        disableRipple
+                        inputProps={{ 'aria-labelledby': labelId }}
+                        sx={{ pt: 0.3 }}
+                    />
+                </ListItemIcon>
+                <ListItemText
+                    sx={{
+                        textDecoration: !!task.done_date
+                            ? 'line-through'
+                            : 'none',
+                    }}
+                    id={labelId}
+                >
+                    {task.type && task.type !== 'None' && (
+                        <>
+                            <strong>{task.type}</strong>&nbsp;
+                        </>
+                    )}
+                    {task.text}
+                    <Typography
+                        variant="body2"
+                        color="textSecondary"
+                        component="div"
+                    >
+                        due <DateField source="due_date" record={task} />
+                        {showContact && (
+                            <>
+                                &nbsp;(Re:{' '}
+                                <ReferenceField
+                                    source="contact_id"
+                                    reference="contacts"
+                                    record={task}
+                                    link="show"
+                                />
+                                )
+                            </>
+                        )}
+                    </Typography>
+                </ListItemText>
+            </ListItemButton>
+        </ListItem>
+    );
+};
diff --git a/packages/demo/src/tasks/TasksIterator.tsx b/packages/demo/src/tasks/TasksIterator.tsx
new file mode 100644
index 0000000..07c74c2
--- /dev/null
+++ b/packages/demo/src/tasks/TasksIterator.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { useListContext } from 'react-admin';
+import { isAfter } from 'date-fns';
+import { List } from '@mui/material';
+
+import { Task } from './Task';
+
+export const TasksIterator = ({ showContact }: { showContact?: boolean }) => {
+    const { data, error, isLoading } = useListContext();
+    if (isLoading || error || !data || data.length === 0) return null;
+
+    // Keep only tasks that are not done or done less than 5 minutes ago
+    const tasks = data.filter(
+        task =>
+            !task.done_date ||
+            isAfter(
+                new Date(task.done_date),
+                new Date(Date.now() - 5 * 60 * 1000)
+            )
+    );
+
+    return (
+        <List dense>
+            {tasks.map(task => (
+                <Task task={task} showContact={showContact} key={task.id} />
+            ))}
+        </List>
+    );
+};
diff --git a/packages/demo/src/types.ts b/packages/demo/src/types.ts
index edc8b82..6ef450c 100644
--- a/packages/demo/src/types.ts
+++ b/packages/demo/src/types.ts
@@ -44,7 +44,6 @@ export interface Contact extends RaRecord {
 
 export interface ContactNote extends RaRecord {
     contact_id: Identifier;
-    type: string;
     text: string;
     date: string;
     sales_id: Identifier;
diff --git a/supabase/migrations/20230126140204_init.sql b/supabase/migrations/20230126140204_init.sql
index f3e74a5..9d7b08c 100644
--- a/supabase/migrations/20230126140204_init.sql
+++ b/supabase/migrations/20230126140204_init.sql
@@ -19,7 +19,6 @@ create table "public"."companies" (
 create table "public"."contactNotes" (
     "id" bigint generated by default as identity not null,
     "date" timestamp with time zone not null default now(),
-    "type" character varying not null,
     "text" character varying not null,
     "sales_id" bigint not null,
     "status" character varying not null,
@@ -46,7 +45,7 @@ create table "public"."contacts" (
     "status" character varying not null,
     "tags" bigint[] not null,
     "sales_id" bigint not null,
-    "nb_notes" smallint not null
+    "nb_notes" smallint not null default 0
 );
 
 
@@ -73,7 +72,8 @@ create table "public"."deals" (
     "updated_at" timestamp without time zone not null,
     "start_at" timestamp without time zone not null,
     "sales_id" bigint not null,
-    "index" bigint not null
+    "index" bigint not null,
+    "nb_notes" smallint not null default 0
 );
 
 
@@ -98,7 +98,8 @@ create table "public"."tasks" (
     "contact_id" bigint,
     "sales_id" bigint,
     "text" character varying,
-    "type" character varying
+    "type" character varying,
+    "done_date" timestamp with time zone
 );
 
 
@@ -138,15 +139,15 @@ alter table "public"."companies" add constraint "companies_sales_id_fkey" FOREIG
 
 alter table "public"."companies" validate constraint "companies_sales_id_fkey";
 
-alter table "public"."contactNotes" add constraint "contactNotes_contact_id_fkey" FOREIGN KEY (contact_id) REFERENCES contacts(id) not valid;
+alter table "public"."contactNotes" add constraint "contactNotes_contact_id_fkey" FOREIGN KEY (contact_id) REFERENCES contacts(id) ON DELETE CASCADE not valid;
 
 alter table "public"."contactNotes" validate constraint "contactNotes_contact_id_fkey";
 
-alter table "public"."contactNotes" add constraint "contactNotes_sales_id_fkey" FOREIGN KEY (sales_id) REFERENCES sales(id) not valid;
+alter table "public"."contactNotes" add constraint "contactNotes_sales_id_fkey" FOREIGN KEY (sales_id) REFERENCES sales(id) ON DELETE CASCADE not valid;
 
 alter table "public"."contactNotes" validate constraint "contactNotes_sales_id_fkey";
 
-alter table "public"."contacts" add constraint "contacts_company_id_fkey" FOREIGN KEY (company_id) REFERENCES companies(id) not valid;
+alter table "public"."contacts" add constraint "contacts_company_id_fkey" FOREIGN KEY (company_id) REFERENCES companies(id) ON DELETE CASCADE not valid;
 
 alter table "public"."contacts" validate constraint "contacts_company_id_fkey";
 
@@ -154,7 +155,7 @@ alter table "public"."contacts" add constraint "contacts_sales_id_fkey" FOREIGN
 
 alter table "public"."contacts" validate constraint "contacts_sales_id_fkey";
 
-alter table "public"."dealNotes" add constraint "dealNotes_deal_id_fkey" FOREIGN KEY (deal_id) REFERENCES deals(id) not valid;
+alter table "public"."dealNotes" add constraint "dealNotes_deal_id_fkey" FOREIGN KEY (deal_id) REFERENCES deals(id) ON DELETE CASCADE not valid;
 
 alter table "public"."dealNotes" validate constraint "dealNotes_deal_id_fkey";
 
@@ -162,7 +163,7 @@ alter table "public"."dealNotes" add constraint "dealNotes_sales_id_fkey" FOREIG
 
 alter table "public"."dealNotes" validate constraint "dealNotes_sales_id_fkey";
 
-alter table "public"."deals" add constraint "deals_company_id_fkey" FOREIGN KEY (company_id) REFERENCES companies(id) not valid;
+alter table "public"."deals" add constraint "deals_company_id_fkey" FOREIGN KEY (company_id) REFERENCES companies(id) ON DELETE CASCADE not valid;
 
 alter table "public"."deals" validate constraint "deals_company_id_fkey";
 
@@ -170,7 +171,7 @@ alter table "public"."deals" add constraint "deals_sales_id_fkey" FOREIGN KEY (s
 
 alter table "public"."deals" validate constraint "deals_sales_id_fkey";
 
-alter table "public"."tasks" add constraint "tasks_contact_id_fkey" FOREIGN KEY (contact_id) REFERENCES contacts(id) not valid;
+alter table "public"."tasks" add constraint "tasks_contact_id_fkey" FOREIGN KEY (contact_id) REFERENCES contacts(id) ON DELETE CASCADE not valid;
 
 alter table "public"."tasks" validate constraint "tasks_contact_id_fkey";
 

From 5f92ee107c0418212d249ac812030705efc5d3f9 Mon Sep 17 00:00:00 2001
From: adrien guernier <adrien@marmelab.com>
Date: Thu, 20 Jun 2024 14:16:45 +0200
Subject: [PATCH 05/31] fix postpone task

---
 packages/demo/src/tasks/Task.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/demo/src/tasks/Task.tsx b/packages/demo/src/tasks/Task.tsx
index f0c7d61..d9feee7 100644
--- a/packages/demo/src/tasks/Task.tsx
+++ b/packages/demo/src/tasks/Task.tsx
@@ -85,6 +85,7 @@ export const Task = ({
                                             .toISOString()
                                             .slice(0, 10),
                                     },
+                                    previousData: task,
                                 });
                                 handleClose();
                             }}
@@ -102,6 +103,7 @@ export const Task = ({
                                             .toISOString()
                                             .slice(0, 10),
                                     },
+                                    previousData: task,
                                 });
                                 handleClose();
                             }}

From c1462fde071da8788bd7e7f711889bffe6621992 Mon Sep 17 00:00:00 2001
From: adrien guernier <adrien@marmelab.com>
Date: Thu, 20 Jun 2024 14:29:57 +0200
Subject: [PATCH 06/31] fix dashboard test

---
 cypress/e2e/dashboard.cy.ts                 | 17 ++++++++---------
 packages/demo/src/dashboard/HotContacts.tsx |  4 ++--
 packages/demo/src/dashboard/LatestNotes.tsx |  2 +-
 packages/demo/src/dashboard/TasksList.tsx   |  4 ++--
 4 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/cypress/e2e/dashboard.cy.ts b/cypress/e2e/dashboard.cy.ts
index 2758fad..c3a0c92 100644
--- a/cypress/e2e/dashboard.cy.ts
+++ b/cypress/e2e/dashboard.cy.ts
@@ -5,14 +5,13 @@ describe('Dashboard spec', () => {
         cy.visit('/');
         login();
         cy.findByText('Upcoming Deal Revenue').should('exist');
-        cy.findByRole('list', { description: 'My Latest Notes' }).within(() => {
-            cy.findAllByRole('listitem').should('have.length.gt', 0);
-        });
-        cy.findByRole('list', { description: 'Hot contacts' }).within(() => {
-            cy.findAllByRole('listitem').should('have.length.gt', 0);
-        });
-        cy.findByRole('list', { description: 'Deals Pipeline' }).within(() => {
-            cy.findAllByRole('listitem').should('have.length.gt', 0);
-        });
+        cy.findByText('My Latest Notes').should('exist');
+        cy.findByText('Upcoming tasks').should('exist');
+        cy.findByText('Hot contacts').should('exist');
+        cy.findByTestId('my-latest-notes')
+            .find('p')
+            .should('have.length.gt', 0);
+        cy.findByTestId('tasks-list').find('li').should('have.length.gt', 0);
+        cy.findByTestId('hot-contacts').find('li').should('have.length.gt', 0);
     });
 });
diff --git a/packages/demo/src/dashboard/HotContacts.tsx b/packages/demo/src/dashboard/HotContacts.tsx
index c88772a..1e29190 100644
--- a/packages/demo/src/dashboard/HotContacts.tsx
+++ b/packages/demo/src/dashboard/HotContacts.tsx
@@ -23,7 +23,7 @@ export const HotContacts = () => {
         { enabled: Number.isInteger(identity?.id) }
     );
     return (
-        <>
+        <div data-testid="hot-contacts">
             <Box display="flex" alignItems="center" marginBottom="1em">
                 <Box ml={2} mr={2} display="flex">
                     <ContactsIcon color="disabled" fontSize="large" />
@@ -60,6 +60,6 @@ export const HotContacts = () => {
                     dense
                 />
             </Card>
-        </>
+        </div>
     );
 };
diff --git a/packages/demo/src/dashboard/LatestNotes.tsx b/packages/demo/src/dashboard/LatestNotes.tsx
index ede7c64..d4aede9 100644
--- a/packages/demo/src/dashboard/LatestNotes.tsx
+++ b/packages/demo/src/dashboard/LatestNotes.tsx
@@ -53,7 +53,7 @@ export const LatestNotes = () => {
         .slice(0, 5);
 
     return (
-        <div>
+        <div data-testid="my-latest-notes">
             <Box display="flex" alignItems="center" marginBottom="1em">
                 <Box ml={2} mr={2} display="flex">
                     <NoteIcon color="disabled" fontSize="large" />
diff --git a/packages/demo/src/dashboard/TasksList.tsx b/packages/demo/src/dashboard/TasksList.tsx
index 887a1bb..1ee0928 100644
--- a/packages/demo/src/dashboard/TasksList.tsx
+++ b/packages/demo/src/dashboard/TasksList.tsx
@@ -53,7 +53,7 @@ export const TasksList = () => {
     if (isPending || !tasks || !contacts) return null;
 
     return (
-        <>
+        <div data-testid="tasks-list">
             <Box display="flex" alignItems="center" marginBottom="1em">
                 <Box ml={2} mr={2} display="flex">
                     <AssignmentTurnedInIcon color="disabled" fontSize="large" />
@@ -84,6 +84,6 @@ export const TasksList = () => {
                     </Button>
                 )}
             </Card>
-        </>
+        </div>
     );
 };

From b346d7f8df7c7069f246de0fa769c85c02348a6b Mon Sep 17 00:00:00 2001
From: adrien guernier <adrien@marmelab.com>
Date: Thu, 20 Jun 2024 14:40:41 +0200
Subject: [PATCH 07/31] fix lists test

---
 cypress/e2e/lists.cy.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/cypress/e2e/lists.cy.ts b/cypress/e2e/lists.cy.ts
index 6a8986b..1ad57aa 100644
--- a/cypress/e2e/lists.cy.ts
+++ b/cypress/e2e/lists.cy.ts
@@ -17,7 +17,7 @@ describe('Lists', () => {
         getPaginationText().then(el => {
             const count = parseInt(el.text().split('of')[1].trim());
 
-            cy.findByText('Earlier').click();
+            cy.findByText('Before last month').click();
             // Use should here to allow built-in retry as it may take a few ms for the list to update
             getPaginationText().should(el => {
                 const countFiltered = parseInt(el.text().split('of')[1].trim());
@@ -65,6 +65,8 @@ describe('Lists', () => {
         cy.visit('/');
         login();
         cy.findByText('Contacts').click();
+        cy.findByRole('button', { name: /rows per page/i }).click();
+        cy.findByRole('option', { name: '10' }).click();
         getPaginationText().then(el => {
             const page = parseInt(el.text().split('-')[0].trim());
             cy.findByLabelText('Go to page 4').click();

From 7d8bb02f462317573f56e99c88ef08ed5859b96b Mon Sep 17 00:00:00 2001
From: adrien guernier <adrien@marmelab.com>
Date: Thu, 20 Jun 2024 15:35:15 +0200
Subject: [PATCH 08/31] remove nb_task and nb_notes, fetch in database instead

---
 packages/demo/db-seed.ts                      |  2 +-
 packages/demo/src/companies/CompanyShow.tsx   | 21 ++++----
 packages/demo/src/contacts/ContactList.tsx    | 25 ++++------
 .../demo/src/dataGenerator/contactNotes.ts    |  1 -
 packages/demo/src/dataGenerator/contacts.ts   |  1 -
 packages/demo/src/dataGenerator/dealNotes.ts  |  1 -
 packages/demo/src/dataGenerator/deals.ts      |  1 -
 packages/demo/src/misc/NbRelations.tsx        | 50 +++++++++++++++++++
 packages/demo/src/notes/Note.tsx              |  1 -
 packages/demo/src/types.ts                    |  2 -
 supabase/migrations/20230126140204_init.sql   |  6 +--
 11 files changed, 75 insertions(+), 36 deletions(-)
 create mode 100644 packages/demo/src/misc/NbRelations.tsx

diff --git a/packages/demo/db-seed.ts b/packages/demo/db-seed.ts
index 6cdbb14..01f8b05 100644
--- a/packages/demo/db-seed.ts
+++ b/packages/demo/db-seed.ts
@@ -110,7 +110,7 @@ async function main() {
     });
     const { data: persistedDeals, error: errorDeals } = await supabase
         .from('deals')
-        .insert(deals.map(({ nb_notes, id, ...deal }) => deal))
+        .insert(deals.map(({ id, ...deal }) => deal))
         .select();
 
     if (errorDeals) {
diff --git a/packages/demo/src/companies/CompanyShow.tsx b/packages/demo/src/companies/CompanyShow.tsx
index 97c1979..6097fc4 100644
--- a/packages/demo/src/companies/CompanyShow.tsx
+++ b/packages/demo/src/companies/CompanyShow.tsx
@@ -39,6 +39,7 @@ import { LogoField } from './LogoField';
 import { CompanyAside } from './CompanyAside';
 import { Company, Deal, Contact } from '../types';
 import { stageNames } from '../deals/stages';
+import { NbRelations } from '../misc/NbRelations';
 
 export const CompanyShow = () => (
     <ShowBase>
@@ -185,16 +186,16 @@ const ContactsIterator = () => {
                             secondary={
                                 <>
                                     {contact.title}
-                                    {contact.nb_notes
-                                        ? ` - ${contact.nb_notes} note${
-                                              contact.nb_notes > 1 ? 's' : ''
-                                          }`
-                                        : ''}
-                                    {contact.nb_tasks
-                                        ? ` - ${contact.nb_tasks} task${
-                                              contact.nb_tasks > 1 ? 's' : ''
-                                          }`
-                                        : ''}
+                                    <NbRelations
+                                        label="note"
+                                        reference="contactNotes"
+                                        target="contact_id"
+                                    />
+                                    <NbRelations
+                                        label="task"
+                                        reference="tasks"
+                                        target="contact_id"
+                                    />
                                     &nbsp; &nbsp;
                                     <TagsList />
                                 </>
diff --git a/packages/demo/src/contacts/ContactList.tsx b/packages/demo/src/contacts/ContactList.tsx
index aba6a2a..40261f1 100644
--- a/packages/demo/src/contacts/ContactList.tsx
+++ b/packages/demo/src/contacts/ContactList.tsx
@@ -34,6 +34,7 @@ import { Status } from '../misc/Status';
 import { TagsList } from './TagsList';
 import { ContactListFilter } from './ContactListFilter';
 import { Contact } from '../types';
+import { NbRelations } from '../misc/NbRelations';
 
 const ContactListContent = () => {
     const {
@@ -91,20 +92,16 @@ const ContactListContent = () => {
                                         >
                                             <TextField source="name" />
                                         </ReferenceField>
-                                        {contact.nb_notes
-                                            ? ` - ${contact.nb_notes} note${
-                                                  contact.nb_notes > 1
-                                                      ? 's'
-                                                      : ''
-                                              }`
-                                            : ''}
-                                        {contact.nb_tasks
-                                            ? ` - ${contact.nb_tasks} task${
-                                                  contact.nb_tasks > 1
-                                                      ? 's'
-                                                      : ''
-                                              }`
-                                            : ''}
+                                        <NbRelations
+                                            label="note"
+                                            reference="contactNotes"
+                                            target="contact_id"
+                                        />
+                                        <NbRelations
+                                            label="task"
+                                            reference="tasks"
+                                            target="contact_id"
+                                        />
                                         &nbsp;&nbsp;
                                         <TagsList />
                                     </>
diff --git a/packages/demo/src/dataGenerator/contactNotes.ts b/packages/demo/src/dataGenerator/contactNotes.ts
index d25a804..c5f4734 100644
--- a/packages/demo/src/dataGenerator/contactNotes.ts
+++ b/packages/demo/src/dataGenerator/contactNotes.ts
@@ -10,7 +10,6 @@ export const generateContactNotes = (db: Db): ContactNote[] => {
     return Array.from(Array(1200).keys()).map(id => {
         const contact = random.arrayElement(db.contacts);
         const date = randomDate(new Date(contact.first_seen)).toISOString();
-        contact.nb_notes++;
         contact.last_seen = date > contact.last_seen ? date : contact.last_seen;
         return {
             id,
diff --git a/packages/demo/src/dataGenerator/contacts.ts b/packages/demo/src/dataGenerator/contacts.ts
index 0586c04..387b60d 100644
--- a/packages/demo/src/dataGenerator/contacts.ts
+++ b/packages/demo/src/dataGenerator/contacts.ts
@@ -76,7 +76,6 @@ export const generateContacts = (db: Db): Contact[] => {
                 .arrayElements(db.tags, random.arrayElement([0, 0, 0, 1, 1, 2]))
                 .map(tag => tag.id), // finalize
             sales_id: company.sales_id,
-            nb_notes: 0,
         };
     });
 };
diff --git a/packages/demo/src/dataGenerator/dealNotes.ts b/packages/demo/src/dataGenerator/dealNotes.ts
index 6641d6b..3470acc 100644
--- a/packages/demo/src/dataGenerator/dealNotes.ts
+++ b/packages/demo/src/dataGenerator/dealNotes.ts
@@ -12,7 +12,6 @@ export const generateDealNotes = (db: Db) => {
         const date = company
             ? randomDate(new Date(company.created_at)).toISOString()
             : randomDate().toISOString();
-        deal.nb_notes++;
         return {
             id,
             deal_id: deal.id,
diff --git a/packages/demo/src/dataGenerator/deals.ts b/packages/demo/src/dataGenerator/deals.ts
index 233553e..31cef13 100644
--- a/packages/demo/src/dataGenerator/deals.ts
+++ b/packages/demo/src/dataGenerator/deals.ts
@@ -51,7 +51,6 @@ export const generateDeals = (db: Db): Deal[] => {
             ).toISOString(),
             sales_id: company.sales_id,
             index: 0,
-            nb_notes: 0,
         };
     });
     // compute index based on stage
diff --git a/packages/demo/src/misc/NbRelations.tsx b/packages/demo/src/misc/NbRelations.tsx
new file mode 100644
index 0000000..061b456
--- /dev/null
+++ b/packages/demo/src/misc/NbRelations.tsx
@@ -0,0 +1,50 @@
+import { Typography, CircularProgress } from '@mui/material';
+import {
+    useRecordContext,
+    useReferenceManyFieldController,
+    useTimeout,
+} from 'ra-core';
+import ErrorIcon from '@mui/icons-material/Error';
+
+export const NbRelations = (props: NbNotesProps) => {
+    const record = useRecordContext(props);
+    const { reference, target, label, timeout = 1000 } = props;
+
+    const oneSecondHasPassed = useTimeout(timeout);
+
+    const { isLoading, error, total } = useReferenceManyFieldController({
+        page: 1,
+        perPage: 1,
+        record,
+        reference,
+        source: 'id',
+        target,
+    });
+
+    const body = isLoading ? (
+        oneSecondHasPassed ? (
+            <CircularProgress size={14} />
+        ) : (
+            ''
+        )
+    ) : error ? (
+        <ErrorIcon color="error" fontSize="small" titleAccess="error" />
+    ) : total ? (
+        `- ${total} ${label}${total > 1 ? 's' : ''}`
+    ) : (
+        ''
+    );
+
+    return (
+        <Typography component="span" variant="body2">
+            {body}
+        </Typography>
+    );
+};
+
+export interface NbNotesProps {
+    reference: string;
+    target: string;
+    timeout?: number;
+    label: string;
+}
diff --git a/packages/demo/src/notes/Note.tsx b/packages/demo/src/notes/Note.tsx
index 305be0c..cb23f46 100644
--- a/packages/demo/src/notes/Note.tsx
+++ b/packages/demo/src/notes/Note.tsx
@@ -51,7 +51,6 @@ export const Note = ({
                 notify('Note deleted', { type: 'info', undoable: true });
                 update(reference, {
                     id: record.id,
-                    data: { nb_notes: record.nb_notes - 1 },
                     previousData: record,
                 });
             },
diff --git a/packages/demo/src/types.ts b/packages/demo/src/types.ts
index 6ef450c..656efbe 100644
--- a/packages/demo/src/types.ts
+++ b/packages/demo/src/types.ts
@@ -37,7 +37,6 @@ export interface Contact extends RaRecord {
     tags: Identifier[];
     gender: string;
     sales_id: Identifier;
-    nb_notes: number;
     status: string;
     background: string;
 }
@@ -63,7 +62,6 @@ export interface Deal extends RaRecord {
     start_at: string;
     sales_id: Identifier;
     index: number;
-    nb_notes: number;
 }
 
 export interface Tag extends RaRecord {
diff --git a/supabase/migrations/20230126140204_init.sql b/supabase/migrations/20230126140204_init.sql
index 9d7b08c..c21d406 100644
--- a/supabase/migrations/20230126140204_init.sql
+++ b/supabase/migrations/20230126140204_init.sql
@@ -44,8 +44,7 @@ create table "public"."contacts" (
     "has_newsletter" boolean not null,
     "status" character varying not null,
     "tags" bigint[] not null,
-    "sales_id" bigint not null,
-    "nb_notes" smallint not null default 0
+    "sales_id" bigint not null
 );
 
 
@@ -72,8 +71,7 @@ create table "public"."deals" (
     "updated_at" timestamp without time zone not null,
     "start_at" timestamp without time zone not null,
     "sales_id" bigint not null,
-    "index" bigint not null,
-    "nb_notes" smallint not null default 0
+    "index" bigint not null
 );
 
 

From 7fe510c0add595228b9a846e33aa2c160a832dfc Mon Sep 17 00:00:00 2001
From: adrien guernier <adrien@marmelab.com>
Date: Mon, 24 Jun 2024 18:31:22 +0200
Subject: [PATCH 09/31] remove useless change

---
 package.json                     | 3 ---
 packages/demo/.env.local-example | 1 -
 yarn.lock                        | 2 +-
 3 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/package.json b/package.json
index d9c9a40..6b63418 100644
--- a/package.json
+++ b/package.json
@@ -61,8 +61,5 @@
     ],
     "jest": {
         "testEnvironment": "jsdom"
-    },
-    "dependencies": {
-        "ra-core": "^4.16.17"
     }
 }
diff --git a/packages/demo/.env.local-example b/packages/demo/.env.local-example
index 52d792c..1015947 100644
--- a/packages/demo/.env.local-example
+++ b/packages/demo/.env.local-example
@@ -1,4 +1,3 @@
 VITE_SUPABASE_URL=http://localhost:54321
 VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0
 SUPABASE_SERVICE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImV4cCI6MTk4MzgxMjk5Nn0.EGIM96RAZx35lJzdJsyH-qQwv8Hdp7fsn3W0YpN81IU
-# SKIP_PREFLIGHT_CHECK=true
diff --git a/yarn.lock b/yarn.lock
index 462fdd2..a505adb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9662,7 +9662,7 @@ quick-lru@^4.0.1:
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f"
   integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==
 
-ra-core@^4.16.17, ra-core@^4.16.19:
+ra-core@^4.16.19:
   version "4.16.19"
   resolved "https://registry.yarnpkg.com/ra-core/-/ra-core-4.16.19.tgz#d402cde87368ddfbd30a540b7e9f8e1c6ff0fec6"
   integrity sha512-1qNuLGaGSHYv5esqJcu7n/PeMKTBXA3JXzjQPAPDK9dBsuWC1IXx9MilivANwh8doYbpFfqsX8VJyW1aqIG1Pg==

From 36d7435bebbfedd8cec21545f8abbf778b76da0a Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Kaiser <jb@marmelab.com>
Date: Fri, 28 Jun 2024 10:03:51 +0200
Subject: [PATCH 10/31] fix db-seed ts errors

---
 packages/demo/db-seed.ts                        | 8 +++-----
 packages/demo/src/dataGenerator/companies.ts    | 2 +-
 packages/demo/src/dataGenerator/contactNotes.ts | 4 +++-
 packages/demo/src/dataGenerator/contacts.ts     | 4 +++-
 packages/demo/src/dataGenerator/dealNotes.ts    | 2 +-
 packages/demo/src/dataGenerator/deals.ts        | 4 +++-
 packages/demo/src/dataGenerator/sales.ts        | 4 +---
 packages/demo/src/dataGenerator/tags.ts         | 4 +---
 packages/demo/src/dataGenerator/tasks.ts        | 2 +-
 9 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/packages/demo/db-seed.ts b/packages/demo/db-seed.ts
index 01f8b05..afd8584 100644
--- a/packages/demo/db-seed.ts
+++ b/packages/demo/db-seed.ts
@@ -91,11 +91,9 @@ async function main() {
                     new Date(a.date).valueOf() - new Date(b.date).valueOf()
             )
             .map(note => {
-                const relatedContact = {
-                    ...persistedContacts.find(
-                        contact => contact.id === note.contact_id
-                    ),
-                };
+                const relatedContact = persistedContacts.find(
+                    contact => contact.id === note.contact_id
+                );
                 return supabase.from('contacts').update({
                     ...relatedContact,
                     status: note.status,
diff --git a/packages/demo/src/dataGenerator/companies.ts b/packages/demo/src/dataGenerator/companies.ts
index bc5b9d6..61aa404 100644
--- a/packages/demo/src/dataGenerator/companies.ts
+++ b/packages/demo/src/dataGenerator/companies.ts
@@ -22,7 +22,7 @@ const sizes = [1, 10, 50, 250, 500];
 
 const regex = /\W+/;
 
-export const generateCompanies = (db: Db): Company[] => {
+export const generateCompanies = (db: Pick<Db, 'sales'>): Company[] => {
     return Array.from(Array(55).keys()).map(id => {
         const name = company.companyName();
         return {
diff --git a/packages/demo/src/dataGenerator/contactNotes.ts b/packages/demo/src/dataGenerator/contactNotes.ts
index c5f4734..1143192 100644
--- a/packages/demo/src/dataGenerator/contactNotes.ts
+++ b/packages/demo/src/dataGenerator/contactNotes.ts
@@ -6,7 +6,9 @@ import { randomDate } from './utils';
 
 const status = ['cold', 'cold', 'cold', 'warm', 'warm', 'hot', 'in-contract'];
 
-export const generateContactNotes = (db: Db): ContactNote[] => {
+export const generateContactNotes = (
+    db: Pick<Db, 'contacts'>
+): ContactNote[] => {
     return Array.from(Array(1200).keys()).map(id => {
         const contact = random.arrayElement(db.contacts);
         const date = randomDate(new Date(contact.first_seen)).toISOString();
diff --git a/packages/demo/src/dataGenerator/contacts.ts b/packages/demo/src/dataGenerator/contacts.ts
index 387b60d..5ad586f 100644
--- a/packages/demo/src/dataGenerator/contacts.ts
+++ b/packages/demo/src/dataGenerator/contacts.ts
@@ -21,7 +21,9 @@ const maxContacts = {
     500: 50,
 };
 
-export const generateContacts = (db: Db): Contact[] => {
+export const generateContacts = (
+    db: Pick<Db, 'companies' | 'tags'>
+): Contact[] => {
     const nbAvailblePictures = 223;
     let numberOfContacts = 0;
 
diff --git a/packages/demo/src/dataGenerator/dealNotes.ts b/packages/demo/src/dataGenerator/dealNotes.ts
index 3470acc..c89981d 100644
--- a/packages/demo/src/dataGenerator/dealNotes.ts
+++ b/packages/demo/src/dataGenerator/dealNotes.ts
@@ -5,7 +5,7 @@ import { randomDate } from './utils';
 
 const type = ['Email', 'Call', 'Call', 'Call', 'Call', 'Meeting', 'Reminder'];
 
-export const generateDealNotes = (db: Db) => {
+export const generateDealNotes = (db: Pick<Db, 'companies' | 'deals'>) => {
     return Array.from(Array(300).keys()).map(id => {
         const deal = random.arrayElement(db.deals);
         const company = db.companies[deal.company_id as number];
diff --git a/packages/demo/src/dataGenerator/deals.ts b/packages/demo/src/dataGenerator/deals.ts
index 31cef13..122ba13 100644
--- a/packages/demo/src/dataGenerator/deals.ts
+++ b/packages/demo/src/dataGenerator/deals.ts
@@ -22,7 +22,9 @@ const stages = [
 ];
 //const tags = ["new deal", "upsell", "SAV"];
 
-export const generateDeals = (db: Db): Deal[] => {
+export const generateDeals = (
+    db: Pick<Db, 'companies' | 'contacts'>
+): Deal[] => {
     const deals = Array.from(Array(50).keys()).map(id => {
         const company = random.arrayElement(db.companies);
         company.nb_deals++;
diff --git a/packages/demo/src/dataGenerator/sales.ts b/packages/demo/src/dataGenerator/sales.ts
index d0e0739..c8f38c7 100644
--- a/packages/demo/src/dataGenerator/sales.ts
+++ b/packages/demo/src/dataGenerator/sales.ts
@@ -1,8 +1,6 @@
 import { name, internet } from 'faker/locale/en_US';
 
-import { Db } from './types';
-
-export const generateSales = (_: Db) => {
+export const generateSales = () => {
     const randomSales = Array.from(Array(10).keys()).map(id => {
         const first_name = name.firstName();
         const last_name = name.lastName();
diff --git a/packages/demo/src/dataGenerator/tags.ts b/packages/demo/src/dataGenerator/tags.ts
index fd275ac..57b8149 100644
--- a/packages/demo/src/dataGenerator/tags.ts
+++ b/packages/demo/src/dataGenerator/tags.ts
@@ -1,5 +1,3 @@
-import { Db } from './types';
-
 // --champagne-pink: #eddcd2ff;
 // --linen: #fff1e6ff;
 // --pale-pink: #fde2e4ff;
@@ -20,6 +18,6 @@ const tags = [
     { id: 5, name: 'vip', color: '#dbe7e4' },
 ];
 
-export const generateTags = (_: Db) => {
+export const generateTags = () => {
     return [...tags];
 };
diff --git a/packages/demo/src/dataGenerator/tasks.ts b/packages/demo/src/dataGenerator/tasks.ts
index a557d69..3581f0b 100644
--- a/packages/demo/src/dataGenerator/tasks.ts
+++ b/packages/demo/src/dataGenerator/tasks.ts
@@ -31,7 +31,7 @@ const type = [
     'None',
 ];
 
-export const generateTasks = (db: Db) => {
+export const generateTasks = (db: Pick<Db, 'contacts'>) => {
     return Array.from(Array(400).keys()).map(id => {
         const contact = random.arrayElement(db.contacts);
         return {

From 809692d71c9a9dca35aae48a710172047f6c18e7 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Kaiser <jb@marmelab.com>
Date: Fri, 28 Jun 2024 10:20:14 +0200
Subject: [PATCH 11/31] revert loginPage change

---
 packages/demo/src/App.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/demo/src/App.tsx b/packages/demo/src/App.tsx
index cb0478f..95bd4d1 100644
--- a/packages/demo/src/App.tsx
+++ b/packages/demo/src/App.tsx
@@ -38,7 +38,7 @@ const App = () => (
             i18nProvider={i18nProvider}
             layout={Layout}
             dashboard={Dashboard}
-            loginPage={<LoginPage />}
+            loginPage={LoginPage}
             queryClient={queryClient}
             theme={{
                 ...defaultTheme,

From 247a28f40a3a6fca11031e0c6b185a0885e4e16b Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Kaiser <jb@marmelab.com>
Date: Fri, 28 Jun 2024 10:20:32 +0200
Subject: [PATCH 12/31] reintroduce fts

---
 packages/demo/src/companies/CompanyListFilter.tsx | 2 +-
 packages/demo/src/contacts/ContactListFilter.tsx  | 1 +
 packages/demo/src/deals/DealList.tsx              | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/demo/src/companies/CompanyListFilter.tsx b/packages/demo/src/companies/CompanyListFilter.tsx
index f0356b2..9332efe 100644
--- a/packages/demo/src/companies/CompanyListFilter.tsx
+++ b/packages/demo/src/companies/CompanyListFilter.tsx
@@ -18,7 +18,7 @@ export const CompanyListFilter = () => {
     const { identity } = useGetIdentity();
     return (
         <Box width="13em" minWidth="13em" order={-1} mr={2} mt={5}>
-            <FilterLiveSearch hiddenLabel />
+            <FilterLiveSearch source="fts@fts" hiddenLabel />
 
             <FilterList label="Size" icon={<BusinessIcon />}>
                 {sizes.map(size => (
diff --git a/packages/demo/src/contacts/ContactListFilter.tsx b/packages/demo/src/contacts/ContactListFilter.tsx
index c36cec7..36bbf02 100644
--- a/packages/demo/src/contacts/ContactListFilter.tsx
+++ b/packages/demo/src/contacts/ContactListFilter.tsx
@@ -25,6 +25,7 @@ export const ContactListFilter = () => {
     return (
         <Box width="13em" minWidth="13em" order={-1} mr={2} mt={5}>
             <FilterLiveSearch
+                source="fts@fts"
                 hiddenLabel
                 sx={{
                     display: 'block',
diff --git a/packages/demo/src/deals/DealList.tsx b/packages/demo/src/deals/DealList.tsx
index 9b47e62..40c9532 100644
--- a/packages/demo/src/deals/DealList.tsx
+++ b/packages/demo/src/deals/DealList.tsx
@@ -43,7 +43,7 @@ const DealList = () => {
 };
 
 const dealFilters = [
-    <SearchInput source="name@ilike" alwaysOn />,
+    <SearchInput source="fts@fts" alwaysOn />,
     <OnlyMineInput source="sales_id" alwaysOn />,
     <SelectInput source="type" choices={typeChoices} />,
 ];

From 4acb363452582b3314c51f08fca01179db85a6da Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Kaiser <jb@marmelab.com>
Date: Fri, 28 Jun 2024 10:21:26 +0200
Subject: [PATCH 13/31] reintroduce changes from #47

---
 .../demo/src/contacts/ContactListFilter.tsx   | 31 +++++++++++++++----
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/packages/demo/src/contacts/ContactListFilter.tsx b/packages/demo/src/contacts/ContactListFilter.tsx
index 36bbf02..8147492 100644
--- a/packages/demo/src/contacts/ContactListFilter.tsx
+++ b/packages/demo/src/contacts/ContactListFilter.tsx
@@ -12,7 +12,13 @@ import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import TrendingUpIcon from '@mui/icons-material/TrendingUp';
 import LocalOfferIcon from '@mui/icons-material/LocalOffer';
 import SupervisorAccountIcon from '@mui/icons-material/SupervisorAccount';
-import { endOfYesterday, startOfWeek, startOfMonth, subMonths } from 'date-fns';
+import {
+    endOfYesterday,
+    startOfWeek,
+    startOfMonth,
+    subMonths,
+    subWeeks,
+} from 'date-fns';
 
 import { Status } from '../misc/Status';
 
@@ -48,21 +54,34 @@ export const ContactListFilter = () => {
                     }}
                 />
                 <FilterListItem
-                    label="Before this week"
+                    label="Last week"
                     value={{
-                        'last_seen@gte': undefined,
+                        'last_seen@gte': subWeeks(
+                            startOfWeek(new Date()),
+                            1
+                        ).toISOString(),
                         'last_seen@lte': startOfWeek(new Date()).toISOString(),
                     }}
                 />
                 <FilterListItem
-                    label="Before this month"
+                    label="This month"
                     value={{
-                        'last_seen@gte': undefined,
+                        'last_seen@gte': startOfMonth(new Date()).toISOString(),
+                        'last_seen@lte': undefined,
+                    }}
+                />
+                <FilterListItem
+                    label="Last month"
+                    value={{
+                        'last_seen@gte': subMonths(
+                            startOfMonth(new Date()),
+                            1
+                        ).toISOString(),
                         'last_seen@lte': startOfMonth(new Date()).toISOString(),
                     }}
                 />
                 <FilterListItem
-                    label="Before last month"
+                    label="Earlier"
                     value={{
                         'last_seen@gte': undefined,
                         'last_seen@lte': subMonths(

From 5c1059e7871ecab00058b3ae873ae8098fb0f04c Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Kaiser <jb@marmelab.com>
Date: Fri, 28 Jun 2024 10:40:17 +0200
Subject: [PATCH 14/31] reintroduce tags@cs

---
 packages/demo/src/contacts/ContactListFilter.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/demo/src/contacts/ContactListFilter.tsx b/packages/demo/src/contacts/ContactListFilter.tsx
index 8147492..320d33f 100644
--- a/packages/demo/src/contacts/ContactListFilter.tsx
+++ b/packages/demo/src/contacts/ContactListFilter.tsx
@@ -141,7 +141,7 @@ export const ContactListFilter = () => {
                                     }}
                                 />
                             }
-                            value={{ tags: `{${record.id}}` }}
+                            value={{ 'tags@cs': `{${record.id}}` }}
                         />
                     ))}
             </FilterList>

From 2b3fc216bb3ee01e6881cd1fe88d718d9cb2c74c Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Kaiser <jb@marmelab.com>
Date: Fri, 28 Jun 2024 10:42:52 +0200
Subject: [PATCH 15/31] fix at least 1/3rd of companies for Jane Doe

---
 packages/demo/src/dataGenerator/companies.ts | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/demo/src/dataGenerator/companies.ts b/packages/demo/src/dataGenerator/companies.ts
index 61aa404..4143fb3 100644
--- a/packages/demo/src/dataGenerator/companies.ts
+++ b/packages/demo/src/dataGenerator/companies.ts
@@ -1,4 +1,11 @@
-import { company, internet, address, phone, random } from 'faker/locale/en_US';
+import {
+    company,
+    internet,
+    address,
+    phone,
+    random,
+    datatype,
+} from 'faker/locale/en_US';
 import { randomDate } from './utils';
 
 import { Db } from './types';
@@ -44,7 +51,7 @@ export const generateCompanies = (db: Pick<Db, 'sales'>): Company[] => {
             nb_deals: 0,
             // at least 1/3rd of companies for Jane Doe
             sales_id:
-                random.number({ min: 1, max: 3 }) === 0
+                datatype.number({ min: 0, max: 2 }) === 0
                     ? 0
                     : random.arrayElement(db.sales).id,
             created_at: randomDate().toISOString(),

From 1b27d07f3f6f8d98d81f650e83129301e5880a58 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Kaiser <jb@marmelab.com>
Date: Fri, 28 Jun 2024 10:44:09 +0200
Subject: [PATCH 16/31] fix React 18 syntax

---
 packages/demo/src/index.tsx | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/packages/demo/src/index.tsx b/packages/demo/src/index.tsx
index 5740dbf..9c5a09f 100644
--- a/packages/demo/src/index.tsx
+++ b/packages/demo/src/index.tsx
@@ -1,14 +1,10 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
-ReactDOM.render(
-    <React.StrictMode>
-        <App />
-    </React.StrictMode>,
-    document.getElementById('root')
-);
+const root = createRoot(document.getElementById('root') as HTMLElement);
+root.render(<App />);
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))

From 3bf02eac4d1fb3e77a55eafb470d2df1affb81d0 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Kaiser <jb@marmelab.com>
Date: Fri, 28 Jun 2024 10:45:07 +0200
Subject: [PATCH 17/31] fix import from react-admin instead of ra-core

---
 packages/demo/src/misc/NbRelations.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/demo/src/misc/NbRelations.tsx b/packages/demo/src/misc/NbRelations.tsx
index 061b456..a8d6eed 100644
--- a/packages/demo/src/misc/NbRelations.tsx
+++ b/packages/demo/src/misc/NbRelations.tsx
@@ -3,7 +3,7 @@ import {
     useRecordContext,
     useReferenceManyFieldController,
     useTimeout,
-} from 'ra-core';
+} from 'react-admin';
 import ErrorIcon from '@mui/icons-material/Error';
 
 export const NbRelations = (props: NbNotesProps) => {

From d4881f2f16e2f5c2235e0201cb1b75cceadd6451 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Kaiser <jb@marmelab.com>
Date: Fri, 28 Jun 2024 10:45:44 +0200
Subject: [PATCH 18/31] remove console.log

---
 packages/demo/src/notes/NewNote.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/demo/src/notes/NewNote.tsx b/packages/demo/src/notes/NewNote.tsx
index b86e59a..e9a04ce 100644
--- a/packages/demo/src/notes/NewNote.tsx
+++ b/packages/demo/src/notes/NewNote.tsx
@@ -34,7 +34,6 @@ export const NewNote = ({
     if (!record || !identity) return null;
 
     const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
-        console.log(record.type);
         event.preventDefault();
         const data: any = {
             [foreignKeyMapping[reference]]: record.id,

From f4e8b6facf6da166cc6debb85f95c11987886ce4 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Kaiser <jb@marmelab.com>
Date: Fri, 28 Jun 2024 10:48:05 +0200
Subject: [PATCH 19/31] remove useless update in Note

---
 packages/demo/src/notes/Note.tsx | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/packages/demo/src/notes/Note.tsx b/packages/demo/src/notes/Note.tsx
index cb23f46..2c6bd5b 100644
--- a/packages/demo/src/notes/Note.tsx
+++ b/packages/demo/src/notes/Note.tsx
@@ -8,7 +8,6 @@ import {
     useDelete,
     useUpdate,
     useNotify,
-    useRecordContext,
 } from 'react-admin';
 import {
     Box,
@@ -37,7 +36,6 @@ export const Note = ({
     const [isEditing, setEditing] = useState(false);
     const [noteText, setNoteText] = useState(note.text);
     const resource = useResourceContext();
-    const record = useRecordContext();
     const notify = useNotify();
 
     const [update, { isLoading }] = useUpdate();
@@ -49,10 +47,6 @@ export const Note = ({
             mutationMode: 'undoable',
             onSuccess: () => {
                 notify('Note deleted', { type: 'info', undoable: true });
-                update(reference, {
-                    id: record.id,
-                    previousData: record,
-                });
             },
         }
     );

From 7a90bab20fe4530c020f2f61db9188fa8eb936b5 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Kaiser <jb@marmelab.com>
Date: Fri, 28 Jun 2024 10:57:20 +0200
Subject: [PATCH 20/31] update changelog to mention removal of
 useRedirectIfAuthenticated

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4dd2d68..62e5e08 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 3.0.0
+
+- The `<LoginPage>` will no longer automatically redirect to the app if the user is already authenticated.
+
 ## 2.2.0
 
 - Add `getPermissions` support in `authProvider`

From e838cafc8ebd31b1fcda2b993e293d4fd9ec87ae Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Kaiser <jb@marmelab.com>
Date: Fri, 28 Jun 2024 11:16:07 +0200
Subject: [PATCH 21/31] fix erroneous deprecation warning about
 faker.random.number

---
 packages/demo/package.json                   |  2 +-
 packages/demo/src/dataGenerator/companies.ts | 11 +-----
 yarn.lock                                    | 39 ++++----------------
 3 files changed, 10 insertions(+), 42 deletions(-)

diff --git a/packages/demo/package.json b/packages/demo/package.json
index c9cfd5b..3c92966 100644
--- a/packages/demo/package.json
+++ b/packages/demo/package.json
@@ -30,7 +30,7 @@
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^14.4.3",
-        "@types/faker": "^5.1.7",
+        "@types/faker": "~5.1.7",
         "@types/jest": "^26.0.19",
         "@types/lodash": "~4.14.168",
         "@types/react": "^18.0.0",
diff --git a/packages/demo/src/dataGenerator/companies.ts b/packages/demo/src/dataGenerator/companies.ts
index 4143fb3..9633f89 100644
--- a/packages/demo/src/dataGenerator/companies.ts
+++ b/packages/demo/src/dataGenerator/companies.ts
@@ -1,11 +1,4 @@
-import {
-    company,
-    internet,
-    address,
-    phone,
-    random,
-    datatype,
-} from 'faker/locale/en_US';
+import { company, internet, address, phone, random } from 'faker/locale/en_US';
 import { randomDate } from './utils';
 
 import { Db } from './types';
@@ -51,7 +44,7 @@ export const generateCompanies = (db: Pick<Db, 'sales'>): Company[] => {
             nb_deals: 0,
             // at least 1/3rd of companies for Jane Doe
             sales_id:
-                datatype.number({ min: 0, max: 2 }) === 0
+                random.number({ min: 0, max: 2 }) === 0
                     ? 0
                     : random.arrayElement(db.sales).id,
             created_at: randomDate().toISOString(),
diff --git a/yarn.lock b/yarn.lock
index a505adb..b033104 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2693,10 +2693,10 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
-"@types/faker@^5.1.7":
-  version "5.5.9"
-  resolved "https://registry.yarnpkg.com/@types/faker/-/faker-5.5.9.tgz#588ede92186dc557bff8341d294335d50d255f0c"
-  integrity sha512-uCx6mP3UY5SIO14XlspxsGjgaemrxpssJI0Ol+GfhxtcKpv9pgRZYsS4eeKeHVLje6Qtc8lGszuBI461+gVZBA==
+"@types/faker@~5.1.7":
+  version "5.1.7"
+  resolved "https://registry.yarnpkg.com/@types/faker/-/faker-5.1.7.tgz#1c3f0655f6e912f5578ce40baa941ab8705fc0ef"
+  integrity sha512-ByseCEyhb+64fapaFR/yASUfAU+Ia4LpCnHhoNMQJFSIBvbtFoEZQB0elwrSF/idpKL5OZvmZhCCukGV8Zi22w==
 
 "@types/graceful-fs@^4.1.3":
   version "4.1.6"
@@ -10645,16 +10645,7 @@ string-natural-compare@^3.0.1:
   resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
   integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -10754,14 +10745,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -11654,7 +11638,7 @@ wordwrap@^1.0.0:
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -11672,15 +11656,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"

From 1bfa013672c29de3cd0eab9a62d3f576c73cc2d3 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Kaiser <jb@marmelab.com>
Date: Fri, 28 Jun 2024 11:19:28 +0200
Subject: [PATCH 22/31] fix Jane Doe sales id

---
 packages/demo/src/dataGenerator/companies.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/demo/src/dataGenerator/companies.ts b/packages/demo/src/dataGenerator/companies.ts
index 9633f89..f8163f6 100644
--- a/packages/demo/src/dataGenerator/companies.ts
+++ b/packages/demo/src/dataGenerator/companies.ts
@@ -45,7 +45,7 @@ export const generateCompanies = (db: Pick<Db, 'sales'>): Company[] => {
             // at least 1/3rd of companies for Jane Doe
             sales_id:
                 random.number({ min: 0, max: 2 }) === 0
-                    ? 0
+                    ? 1
                     : random.arrayElement(db.sales).id,
             created_at: randomDate().toISOString(),
         };

From 3e9476a2e7b3344abaebef7c57eb9d3340cf974c Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Kaiser <jb@marmelab.com>
Date: Fri, 28 Jun 2024 11:28:08 +0200
Subject: [PATCH 23/31] fix validateDOMNesting in ContactList

---
 packages/demo/src/contacts/ContactList.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/demo/src/contacts/ContactList.tsx b/packages/demo/src/contacts/ContactList.tsx
index 40261f1..134acda 100644
--- a/packages/demo/src/contacts/ContactList.tsx
+++ b/packages/demo/src/contacts/ContactList.tsx
@@ -82,6 +82,9 @@ const ContactListContent = () => {
                             </ListItemAvatar>
                             <ListItemText
                                 primary={`${contact.first_name} ${contact.last_name}`}
+                                secondaryTypographyProps={{
+                                    component: 'div',
+                                }}
                                 secondary={
                                     <>
                                         {contact.title} at{' '}

From 9f93ad1c8fad5fff24ec54fe9ead595d0a9fe2ad Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Kaiser <jb@marmelab.com>
Date: Fri, 28 Jun 2024 11:34:53 +0200
Subject: [PATCH 24/31] fix company selection in contact create

---
 packages/demo/src/contacts/ContactInputs.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/demo/src/contacts/ContactInputs.tsx b/packages/demo/src/contacts/ContactInputs.tsx
index 66ed4a5..f0d0c91 100644
--- a/packages/demo/src/contacts/ContactInputs.tsx
+++ b/packages/demo/src/contacts/ContactInputs.tsx
@@ -24,6 +24,8 @@ const isUrl = (value: string) => {
     }
 };
 
+const filterToQuery = (searchText: string) => ({ 'name@ilike': searchText });
+
 export const ContactInputs = () => {
     const [create] = useCreate();
     const { identity } = useGetIdentity();
@@ -75,6 +77,7 @@ export const ContactInputs = () => {
                         onCreate={handleCreateCompany}
                         helperText={false}
                         fullWidth
+                        filterToQuery={filterToQuery}
                     />
                 </ReferenceInput>
             </Stack>

From da4d01bdfc95ec7a84b207c98c9e36292725ca73 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Kaiser <jb@marmelab.com>
Date: Fri, 28 Jun 2024 11:39:59 +0200
Subject: [PATCH 25/31] fix contact create should set a status

---
 packages/demo/src/contacts/ContactCreate.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/demo/src/contacts/ContactCreate.tsx b/packages/demo/src/contacts/ContactCreate.tsx
index f3b0393..776185b 100644
--- a/packages/demo/src/contacts/ContactCreate.tsx
+++ b/packages/demo/src/contacts/ContactCreate.tsx
@@ -15,6 +15,7 @@ export const ContactCreate = () => {
                 first_seen: new Date().toISOString(),
                 last_seen: new Date().toISOString(),
                 tags: [],
+                status: 'in-contract',
             })}
         >
             <Box mt={2} display="flex">

From ca39b108586ccefcc84a4b463d4034251dcbc582 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Kaiser <jb@marmelab.com>
Date: Fri, 28 Jun 2024 12:04:17 +0200
Subject: [PATCH 26/31] fix nb_contacts and nb_deals in company show

---
 packages/demo/src/companies/CompanyShow.tsx | 32 +++++++++++++++++----
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/packages/demo/src/companies/CompanyShow.tsx b/packages/demo/src/companies/CompanyShow.tsx
index 6097fc4..44b2f8d 100644
--- a/packages/demo/src/companies/CompanyShow.tsx
+++ b/packages/demo/src/companies/CompanyShow.tsx
@@ -10,6 +10,7 @@ import {
     useListContext,
     RecordContextProvider,
     SortButton,
+    useReferenceManyFieldController,
 } from 'react-admin';
 import {
     Box,
@@ -53,6 +54,22 @@ const CompanyShowContent = () => {
     const handleTabChange = (event: ChangeEvent<{}>, newValue: number) => {
         setTabValue(newValue);
     };
+    const { total: nb_contacts } = useReferenceManyFieldController({
+        page: 1,
+        perPage: 1,
+        source: 'id',
+        reference: 'contacts',
+        target: 'company_id',
+        record,
+    });
+    const { total: nb_deals } = useReferenceManyFieldController({
+        page: 1,
+        perPage: 1,
+        source: 'id',
+        reference: 'deals',
+        target: 'company_id',
+        record,
+    });
     if (isLoading || !record) return null;
     return (
         <Box mt={2} display="flex">
@@ -81,21 +98,21 @@ const CompanyShowContent = () => {
                             textColor="primary"
                             onChange={handleTabChange}
                         >
-                            {record.nb_contacts && (
+                            {nb_contacts && (
                                 <Tab
                                     label={
-                                        record.nb_contacts === 1
+                                        nb_contacts === 1
                                             ? '1 Contact'
-                                            : `${record.nb_contacts} Contacts`
+                                            : `${nb_contacts} Contacts`
                                     }
                                 />
                             )}
-                            {record.nb_deals && (
+                            {nb_deals && (
                                 <Tab
                                     label={
-                                        record.nb_deals === 1
+                                        nb_deals === 1
                                             ? '1 deal'
-                                            : `${record.nb_deals} Deals`
+                                            : `${nb_deals} Deals`
                                     }
                                 />
                             )}
@@ -183,6 +200,9 @@ const ContactsIterator = () => {
                         </ListItemAvatar>
                         <ListItemText
                             primary={`${contact.first_name} ${contact.last_name}`}
+                            secondaryTypographyProps={{
+                                component: 'div',
+                            }}
                             secondary={
                                 <>
                                     {contact.title}

From 5b5f7bc14a14c72a0050887580fb86057141576d Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Kaiser <jb@marmelab.com>
Date: Fri, 28 Jun 2024 14:36:10 +0200
Subject: [PATCH 27/31] introduce useNbRelations and fix nb_contacts and
 nb_deals in company card

---
 packages/demo/src/companies/CompanyCard.tsx | 23 ++++++++++----
 packages/demo/src/companies/CompanyShow.tsx | 34 +++++---------------
 packages/demo/src/misc/NbRelations.tsx      | 26 +++++----------
 packages/demo/src/misc/useNbRelations.tsx   | 35 +++++++++++++++++++++
 4 files changed, 66 insertions(+), 52 deletions(-)
 create mode 100644 packages/demo/src/misc/useNbRelations.tsx

diff --git a/packages/demo/src/companies/CompanyCard.tsx b/packages/demo/src/companies/CompanyCard.tsx
index cd1d18a..31c464d 100644
--- a/packages/demo/src/companies/CompanyCard.tsx
+++ b/packages/demo/src/companies/CompanyCard.tsx
@@ -13,11 +13,24 @@ import {
 import { sectors } from './sectors';
 import { CompanyAvatar } from './CompanyAvatar';
 import { Company } from '../types';
+import { useNbRelations } from '../misc/useNbRelations';
 
 export const CompanyCard = (props: { record?: Company }) => {
     const [elevation, setElevation] = useState(1);
     const createPath = useCreatePath();
     const record = useRecordContext<Company>(props);
+    const { total: nb_contacts } = useNbRelations({
+        label: 'Contact',
+        reference: 'contacts',
+        target: 'company_id',
+        record,
+    });
+    const { total: nb_deals } = useNbRelations({
+        label: 'Deal',
+        reference: 'deals',
+        target: 'company_id',
+        record,
+    });
     if (!record) return null;
 
     return (
@@ -60,12 +73,10 @@ export const CompanyCard = (props: { record?: Company }) => {
                         <ContactsIcon color="disabled" sx={{ mr: 1 }} />
                         <div>
                             <Typography variant="subtitle2" sx={{ mb: -1 }}>
-                                {record.nb_contacts}
+                                {nb_contacts}
                             </Typography>
                             <Typography variant="caption" color="textSecondary">
-                                {record.nb_contacts > 1
-                                    ? 'contacts'
-                                    : 'contact'}
+                                {nb_contacts > 1 ? 'contacts' : 'contact'}
                             </Typography>
                         </div>
                     </Box>
@@ -73,10 +84,10 @@ export const CompanyCard = (props: { record?: Company }) => {
                         <DealIcon color="disabled" sx={{ mr: 1 }} />
                         <div>
                             <Typography variant="subtitle2" sx={{ mb: -1 }}>
-                                {record.nb_deals}
+                                {nb_deals}
                             </Typography>
                             <Typography variant="caption" color="textSecondary">
-                                {record.nb_deals > 1 ? 'deals' : 'deal'}
+                                {nb_deals > 1 ? 'deals' : 'deal'}
                             </Typography>
                         </div>
                     </Box>
diff --git a/packages/demo/src/companies/CompanyShow.tsx b/packages/demo/src/companies/CompanyShow.tsx
index 44b2f8d..573d9fb 100644
--- a/packages/demo/src/companies/CompanyShow.tsx
+++ b/packages/demo/src/companies/CompanyShow.tsx
@@ -10,7 +10,6 @@ import {
     useListContext,
     RecordContextProvider,
     SortButton,
-    useReferenceManyFieldController,
 } from 'react-admin';
 import {
     Box,
@@ -41,6 +40,7 @@ import { CompanyAside } from './CompanyAside';
 import { Company, Deal, Contact } from '../types';
 import { stageNames } from '../deals/stages';
 import { NbRelations } from '../misc/NbRelations';
+import { useNbRelations } from '../misc/useNbRelations';
 
 export const CompanyShow = () => (
     <ShowBase>
@@ -54,18 +54,14 @@ const CompanyShowContent = () => {
     const handleTabChange = (event: ChangeEvent<{}>, newValue: number) => {
         setTabValue(newValue);
     };
-    const { total: nb_contacts } = useReferenceManyFieldController({
-        page: 1,
-        perPage: 1,
-        source: 'id',
+    const { total: nb_contacts, label: nb_contacts_label } = useNbRelations({
+        label: 'Contact',
         reference: 'contacts',
         target: 'company_id',
         record,
     });
-    const { total: nb_deals } = useReferenceManyFieldController({
-        page: 1,
-        perPage: 1,
-        source: 'id',
+    const { total: nb_deals, label: nb_deals_label } = useNbRelations({
+        label: 'Deal',
         reference: 'deals',
         target: 'company_id',
         record,
@@ -98,24 +94,8 @@ const CompanyShowContent = () => {
                             textColor="primary"
                             onChange={handleTabChange}
                         >
-                            {nb_contacts && (
-                                <Tab
-                                    label={
-                                        nb_contacts === 1
-                                            ? '1 Contact'
-                                            : `${nb_contacts} Contacts`
-                                    }
-                                />
-                            )}
-                            {nb_deals && (
-                                <Tab
-                                    label={
-                                        nb_deals === 1
-                                            ? '1 deal'
-                                            : `${nb_deals} Deals`
-                                    }
-                                />
-                            )}
+                            {nb_contacts && <Tab label={nb_contacts_label} />}
+                            {nb_deals && <Tab label={nb_deals_label} />}
                         </Tabs>
                         <Divider />
                         <TabPanel value={tabValue} index={0}>
diff --git a/packages/demo/src/misc/NbRelations.tsx b/packages/demo/src/misc/NbRelations.tsx
index a8d6eed..2fc4e01 100644
--- a/packages/demo/src/misc/NbRelations.tsx
+++ b/packages/demo/src/misc/NbRelations.tsx
@@ -1,26 +1,13 @@
 import { Typography, CircularProgress } from '@mui/material';
-import {
-    useRecordContext,
-    useReferenceManyFieldController,
-    useTimeout,
-} from 'react-admin';
+import { RaRecord, useTimeout } from 'react-admin';
 import ErrorIcon from '@mui/icons-material/Error';
+import { useNbRelations } from './useNbRelations';
 
 export const NbRelations = (props: NbNotesProps) => {
-    const record = useRecordContext(props);
-    const { reference, target, label, timeout = 1000 } = props;
-
+    const { timeout = 1000, ...rest } = props;
+    const { isLoading, error, label } = useNbRelations(rest);
     const oneSecondHasPassed = useTimeout(timeout);
 
-    const { isLoading, error, total } = useReferenceManyFieldController({
-        page: 1,
-        perPage: 1,
-        record,
-        reference,
-        source: 'id',
-        target,
-    });
-
     const body = isLoading ? (
         oneSecondHasPassed ? (
             <CircularProgress size={14} />
@@ -29,8 +16,8 @@ export const NbRelations = (props: NbNotesProps) => {
         )
     ) : error ? (
         <ErrorIcon color="error" fontSize="small" titleAccess="error" />
-    ) : total ? (
-        `- ${total} ${label}${total > 1 ? 's' : ''}`
+    ) : label ? (
+        ` - ${label}`
     ) : (
         ''
     );
@@ -47,4 +34,5 @@ export interface NbNotesProps {
     target: string;
     timeout?: number;
     label: string;
+    record?: RaRecord;
 }
diff --git a/packages/demo/src/misc/useNbRelations.tsx b/packages/demo/src/misc/useNbRelations.tsx
new file mode 100644
index 0000000..8de68e4
--- /dev/null
+++ b/packages/demo/src/misc/useNbRelations.tsx
@@ -0,0 +1,35 @@
+import {
+    RaRecord,
+    useRecordContext,
+    useReferenceManyFieldController,
+} from 'react-admin';
+
+export const useNbRelations = (props: UseNbNotesProps) => {
+    const record = useRecordContext(props);
+    const { reference, target, label } = props;
+
+    const { isLoading, error, total } = useReferenceManyFieldController({
+        page: 1,
+        perPage: 1,
+        record,
+        reference,
+        source: 'id',
+        target,
+    });
+
+    const finalLabel = total ? `${total} ${label}${total > 1 ? 's' : ''}` : '';
+
+    return {
+        isLoading,
+        error,
+        total,
+        label: finalLabel,
+    };
+};
+
+export interface UseNbNotesProps {
+    reference: string;
+    target: string;
+    label: string;
+    record?: RaRecord;
+}

From 42a82e157257c89f7da93eff7fd6be08098e6301 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Kaiser <jb@marmelab.com>
Date: Fri, 28 Jun 2024 14:37:45 +0200
Subject: [PATCH 28/31] fix unused import in LoginPage

---
 packages/ra-supabase-ui-materialui/src/LoginPage.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/ra-supabase-ui-materialui/src/LoginPage.tsx b/packages/ra-supabase-ui-materialui/src/LoginPage.tsx
index fcaa75d..6616c36 100644
--- a/packages/ra-supabase-ui-materialui/src/LoginPage.tsx
+++ b/packages/ra-supabase-ui-materialui/src/LoginPage.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { ReactNode } from 'react';
 
-import { useRedirectIfAuthenticated } from 'ra-supabase-core';
 import { AuthLayout } from './AuthLayout';
 import { LoginForm } from './LoginForm';
 import { Provider } from '@supabase/supabase-js';

From 0c1f79905b29581ef76ec95e117e67f0ebeab3f2 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Kaiser <jb@marmelab.com>
Date: Fri, 28 Jun 2024 14:41:41 +0200
Subject: [PATCH 29/31] fix adding a new deal note throws a dataProvider error

---
 packages/demo/src/notes/NewNote.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/demo/src/notes/NewNote.tsx b/packages/demo/src/notes/NewNote.tsx
index e9a04ce..665426a 100644
--- a/packages/demo/src/notes/NewNote.tsx
+++ b/packages/demo/src/notes/NewNote.tsx
@@ -55,11 +55,13 @@ export const NewNote = ({
                     setText('');
                     notify('Note added successfully');
                     refetch();
-                    update(reference, {
-                        id: (record && record.id) as unknown as Identifier,
-                        data: { last_seen: date, status },
-                        previousData: record,
-                    });
+                    if (reference === 'contacts') {
+                        update(reference, {
+                            id: (record && record.id) as unknown as Identifier,
+                            data: { last_seen: date, status },
+                            previousData: record,
+                        });
+                    }
                 },
             }
         );

From 56bae467b3a9e94d62bdc8a9a048595def92a24f Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Kaiser <jb@marmelab.com>
Date: Fri, 28 Jun 2024 15:02:11 +0200
Subject: [PATCH 30/31] fix import from react-query

---
 packages/demo/src/deals/DealCreate.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/demo/src/deals/DealCreate.tsx b/packages/demo/src/deals/DealCreate.tsx
index 5aff911..02d1155 100644
--- a/packages/demo/src/deals/DealCreate.tsx
+++ b/packages/demo/src/deals/DealCreate.tsx
@@ -16,7 +16,7 @@ import {
     DateInput,
 } from 'react-admin';
 import { Dialog } from '@mui/material';
-import { useQueryClient } from 'react-query';
+import { useQueryClient } from '@tanstack/react-query';
 import { stageChoices } from './stages';
 import { typeChoices } from './types';
 import { Deal } from '../types';

From c1a124ab491ec019a527bcee5348b20001045062 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Kaiser <jb@marmelab.com>
Date: Fri, 28 Jun 2024 15:58:54 +0200
Subject: [PATCH 31/31] fix e2e tests (slow because of the numerous calls to
 getManyReference)

---
 cypress/e2e/lists.cy.ts                    | 27 +++++++++++++++-------
 packages/demo/src/contacts/ContactList.tsx |  2 +-
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/cypress/e2e/lists.cy.ts b/cypress/e2e/lists.cy.ts
index 1ad57aa..f7b350c 100644
--- a/cypress/e2e/lists.cy.ts
+++ b/cypress/e2e/lists.cy.ts
@@ -1,6 +1,7 @@
 import { login } from './login';
 
-const getPaginationText = () => cy.findByText(/\d+-\d+ of \d+/);
+const getPaginationText = () =>
+    cy.findByText(/\d+-\d+ of \d+/, { timeout: 10000 });
 
 describe('Lists', () => {
     it('should render a list', () => {
@@ -17,7 +18,7 @@ describe('Lists', () => {
         getPaginationText().then(el => {
             const count = parseInt(el.text().split('of')[1].trim());
 
-            cy.findByText('Before last month').click();
+            cy.findByText('Earlier').click();
             // Use should here to allow built-in retry as it may take a few ms for the list to update
             getPaginationText().should(el => {
                 const countFiltered = parseInt(el.text().split('of')[1].trim());
@@ -65,8 +66,6 @@ describe('Lists', () => {
         cy.visit('/');
         login();
         cy.findByText('Contacts').click();
-        cy.findByRole('button', { name: /rows per page/i }).click();
-        cy.findByRole('option', { name: '10' }).click();
         getPaginationText().then(el => {
             const page = parseInt(el.text().split('-')[0].trim());
             cy.findByLabelText('Go to page 4').click();
@@ -93,11 +92,23 @@ describe('Lists', () => {
         cy.visit('/');
         login();
         cy.findByText('Contacts').click();
-        cy.findAllByText(/\d+ days? ago/).should('have.length.greaterThan', 0);
-        cy.findAllByText(/\d+ years? ago/).should('have.length', 0);
+        cy.findAllByText(/\d+ days? ago/, { timeout: 10000 }).should(
+            'have.length.greaterThan',
+            0
+        );
+        cy.findAllByText(/\d+ years? ago/, { timeout: 10000 }).should(
+            'have.length',
+            0
+        );
         cy.findByText('Sort by Last seen descending').click();
         cy.findByText('Last seen ascending').click();
-        cy.findAllByText(/\d+ days? ago/).should('have.length', 0);
-        cy.findAllByText(/\d+ years? ago/).should('have.length.greaterThan', 0);
+        cy.findAllByText(/\d+ days? ago/, { timeout: 10000 }).should(
+            'have.length',
+            0
+        );
+        cy.findAllByText(/\d+ years? ago/, { timeout: 10000 }).should(
+            'have.length.greaterThan',
+            0
+        );
     });
 });
diff --git a/packages/demo/src/contacts/ContactList.tsx b/packages/demo/src/contacts/ContactList.tsx
index 134acda..358d394 100644
--- a/packages/demo/src/contacts/ContactList.tsx
+++ b/packages/demo/src/contacts/ContactList.tsx
@@ -149,7 +149,7 @@ export const ContactList = () => {
         <RaList
             actions={<ContactListActions />}
             aside={<ContactListFilter />}
-            perPage={25}
+            perPage={10}
             pagination={<Pagination rowsPerPageOptions={[10, 25, 50, 100]} />}
             filterDefaultValues={{ sales_id: identity?.id }}
             sort={{ field: 'last_seen', order: 'DESC' }}