diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3bc7e7c..a50feec 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Changelog
 
+## 3.0.0
+
+- Upgrade to react-admin v5
+- The `<LoginPage>` will no longer automatically redirect to the app if the user is already authenticated.
+
 ## 2.3.0
 
 * Update supabase-js dev to match new auth system ([#55](https://github.com/marmelab/ra-supabase/pull/55)) ([Revarh](https://github.com/Revarh))
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/cypress/e2e/lists.cy.ts b/cypress/e2e/lists.cy.ts
index 6a8986b..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', () => {
@@ -91,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/db-seed.ts b/packages/demo/db-seed.ts
index 62924ce..afd8584 100644
--- a/packages/demo/db-seed.ts
+++ b/packages/demo/db-seed.ts
@@ -91,10 +91,11 @@ 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
+                );
                 return supabase.from('contacts').update({
-                    ...persistedContacts.find(
-                        contact => contact.id === note.contact_id
-                    ),
+                    ...relatedContact,
                     status: note.status,
                 });
             })
@@ -107,7 +108,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/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 548fbff..0f27fd2 100644
--- a/packages/demo/package.json
+++ b/packages/demo/package.json
@@ -3,6 +3,7 @@
     "version": "2.3.0",
     "private": true,
     "dependencies": {
+        "@hello-pangea/dnd": "^16.3.0",
         "@mui/icons-material": "^5.0.1",
         "@mui/material": "^5.15.20",
         "@nivo/bar": "^0.80.0",
@@ -29,7 +30,7 @@
         "@testing-library/jest-dom": "^6.4.5",
         "@testing-library/react": "^15.0.7",
         "@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",
@@ -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/App.tsx b/packages/demo/src/App.tsx
index 97aa741..87010a4 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/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/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..31c464d 100644
--- a/packages/demo/src/companies/CompanyCard.tsx
+++ b/packages/demo/src/companies/CompanyCard.tsx
@@ -1,24 +1,40 @@
 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';
 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 (
-        <MuiLink
-            component={Link}
+        <Link
             to={createPath({
                 resource: 'companies',
                 id: record.id,
@@ -57,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>
@@ -70,15 +84,15 @@ 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>
                 </Box>
             </Paper>
-        </MuiLink>
+        </Link>
     );
 };
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..9332efe 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 source="fts@fts" hiddenLabel />
 
             <FilterList label="Size" icon={<BusinessIcon />}>
                 {sizes.map(size => (
diff --git a/packages/demo/src/companies/CompanyShow.tsx b/packages/demo/src/companies/CompanyShow.tsx
index b715ea3..573d9fb 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';
@@ -37,6 +39,8 @@ import { LogoField } from './LogoField';
 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>
@@ -50,6 +54,18 @@ const CompanyShowContent = () => {
     const handleTabChange = (event: ChangeEvent<{}>, newValue: number) => {
         setTabValue(newValue);
     };
+    const { total: nb_contacts, label: nb_contacts_label } = useNbRelations({
+        label: 'Contact',
+        reference: 'contacts',
+        target: 'company_id',
+        record,
+    });
+    const { total: nb_deals, label: nb_deals_label } = useNbRelations({
+        label: 'Deal',
+        reference: 'deals',
+        target: 'company_id',
+        record,
+    });
     if (isLoading || !record) return null;
     return (
         <Box mt={2} display="flex">
@@ -63,7 +79,8 @@ const CompanyShowContent = () => {
                                     {record.name}
                                 </Typography>
                                 <Typography variant="body2">
-                                    <TextField source="sector" />,{' '}
+                                    <TextField source="sector" />
+                                    {record.size && ', '}
                                     <SelectField
                                         source="size"
                                         choices={sizes}
@@ -77,24 +94,8 @@ const CompanyShowContent = () => {
                             textColor="primary"
                             onChange={handleTabChange}
                         >
-                            {record.nb_contacts && (
-                                <Tab
-                                    label={
-                                        record.nb_contacts === 1
-                                            ? '1 Contact'
-                                            : `${record.nb_contacts} Contacts`
-                                    }
-                                />
-                            )}
-                            {record.nb_deals && (
-                                <Tab
-                                    label={
-                                        record.nb_deals === 1
-                                            ? '1 deal'
-                                            : `${record.nb_deals} Deals`
-                                    }
-                                />
-                            )}
+                            {nb_contacts && <Tab label={nb_contacts_label} />}
+                            {nb_deals && <Tab label={nb_deals_label} />}
                         </Tabs>
                         <Divider />
                         <TabPanel value={tabValue} index={0}>
@@ -103,6 +104,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 +167,58 @@ 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}`}
+                            secondaryTypographyProps={{
+                                component: 'div',
+                            }}
+                            secondary={
+                                <>
+                                    {contact.title}
+                                    <NbRelations
+                                        label="note"
+                                        reference="contactNotes"
+                                        target="contact_id"
+                                    />
+                                    <NbRelations
+                                        label="task"
+                                        reference="tasks"
+                                        target="contact_id"
+                                    />
+                                    &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 +228,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 +245,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 c7b8b7c..7003896 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,8 +14,8 @@ export const LogoField = ({
 }: {
     size?: 'small' | 'medium';
 }) => {
-    const record = useRecordContext<Company | Contact>();
-    if (!record) return null;
+    const record = useRecordContext<Company>();
+    if (!record || !record.logo) return null;
     return (
         <Box
             component="img"
diff --git a/packages/demo/src/contacts/ContactAside.tsx b/packages/demo/src/contacts/ContactAside.tsx
index f62e65d..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}
@@ -93,9 +104,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>
@@ -105,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..776185b 100644
--- a/packages/demo/src/contacts/ContactCreate.tsx
+++ b/packages/demo/src/contacts/ContactCreate.tsx
@@ -1,37 +1,42 @@
 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: [],
+                status: 'in-contract',
+            })}
+        >
+            <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/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..f0d0c91 100644
--- a/packages/demo/src/contacts/ContactInputs.tsx
+++ b/packages/demo/src/contacts/ContactInputs.tsx
@@ -4,50 +4,150 @@ 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';
+
+import { genders } from './constants';
+
+const isUrl = (value: string) => {
+    if (!value) return;
+    try {
+        new URL(value);
+    } catch (_) {
+        return 'Must be a valid URL';
+    }
+};
+
+const filterToQuery = (searchText: string) => ({ 'name@ilike': searchText });
 
 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}>
-            <Box display="flex" width={430}>
+            <Stack direction="row" width={430} gap={1}>
                 <TextInput
                     source="first_name"
                     validate={required()}
+                    helperText={false}
                     fullWidth
                 />
-                <Spacer />
-                <TextInput source="last_name" validate={required()} fullWidth />
-            </Box>
-            <Box display="flex" width={430}>
-                <TextInput source="title" fullWidth />
-                <Spacer />
+                <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"
-                        fullWidth
                         validate={required()}
+                        onCreate={handleCreateCompany}
+                        helperText={false}
+                        fullWidth
+                        filterToQuery={filterToQuery}
                     />
                 </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 />
-            <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 />
+            <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 />
-            <Box mt={2} width={430}>
-                <TextInput source="background" multiline fullWidth />
-                <TextInput source="avatar" fullWidth />
-                <BooleanInput source="has_newsletter" />
+            <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>
     );
 };
-
-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..358d394 100644
--- a/packages/demo/src/contacts/ContactList.tsx
+++ b/packages/demo/src/contacts/ContactList.tsx
@@ -34,10 +34,12 @@ 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 {
         data: contacts,
+        error,
         isLoading,
         onToggleItem,
         selectedIds,
@@ -45,6 +47,9 @@ const ContactListContent = () => {
     if (isLoading) {
         return <SimpleListLoading hasLeftAvatarOrIcon hasSecondaryText />;
     }
+    if (error) {
+        return null;
+    }
     const now = Date.now();
 
     return (
@@ -52,7 +57,7 @@ const ContactListContent = () => {
             <BulkActionsToolbar>
                 <BulkDeleteButton />
             </BulkActionsToolbar>
-            <List>
+            <List dense>
                 {contacts.map(contact => (
                     <RecordContextProvider key={contact.id} value={contact}>
                         <ListItem
@@ -89,9 +94,18 @@ const ContactListContent = () => {
                                             link={false}
                                         >
                                             <TextField source="name" />
-                                        </ReferenceField>{' '}
-                                        {contact.nb_notes &&
-                                            `- ${contact.nb_notes} notes `}
+                                        </ReferenceField>
+                                        <NbRelations
+                                            label="note"
+                                            reference="contactNotes"
+                                            target="contact_id"
+                                        />
+                                        <NbRelations
+                                            label="task"
+                                            reference="tasks"
+                                            target="contact_id"
+                                        />
+                                        &nbsp;&nbsp;
                                         <TagsList />
                                     </>
                                 }
@@ -135,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' }}
diff --git a/packages/demo/src/contacts/ContactListFilter.tsx b/packages/demo/src/contacts/ContactListFilter.tsx
index 96b8fb5..320d33f 100644
--- a/packages/demo/src/contacts/ContactListFilter.tsx
+++ b/packages/demo/src/contacts/ContactListFilter.tsx
@@ -29,9 +29,10 @@ 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%' },
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/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..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,9 +63,10 @@ export const TagsListEdit = () => {
     };
 
     const handleDeleteTag = (id: Identifier) => {
-        const tags: Identifier[] = record.tags.filter(
-            (tagId: Identifier) => tagId !== id
-        );
+        if (!record) {
+            throw new Error('No contact record found');
+        }
+        const tags = record.tags.filter(tagId => tagId !== id);
         update('contacts', {
             id: record.id,
             data: { tags },
@@ -72,7 +75,10 @@ export const TagsListEdit = () => {
     };
 
     const handleAddTag = (id: Identifier) => {
-        const tags: Identifier[] = [...record.tags, id];
+        if (!record) {
+            throw new Error('No contact record found');
+        }
+        const tags = [...record.tags, id];
         update('contacts', {
             id: record.id,
             data: { tags },
@@ -95,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',
@@ -121,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 b0e26d2..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 { useEffect, useState } from 'react';
-import { Link as RouterLink } from 'react-router-dom';
-import { Box, Link } from '@mui/material';
+import { useMemo } from 'react';
+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';
 
@@ -24,13 +23,12 @@ 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()
+                new Date(deal.start_at) ?? new Date()
             ).toISOString();
             if (!acc[month]) {
                 acc[month] = [];
@@ -66,7 +64,7 @@ export const DealsChart = () => {
             };
         });
 
-        setMonths(amountByMonth);
+        return amountByMonth;
     }, [data]);
 
     if (isLoading) return null; // FIXME return skeleton instead
@@ -90,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 7e6a7b6..0000000
--- a/packages/demo/src/dashboard/DealsPipeline.tsx
+++ /dev/null
@@ -1,94 +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: 'updated_at', 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"
-                    id="deals-pipeline"
-                >
-                    Deals Pipeline
-                </Link>
-            </Box>
-            <Card>
-                <SimpleList<Deal>
-                    aria-describedby="deals-pipeline"
-                    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 f4b4611..1e29190 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';
@@ -24,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" />
@@ -33,16 +32,13 @@ export const HotContacts = () => {
                     underline="none"
                     variant="h5"
                     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}
@@ -61,8 +57,9 @@ export const HotContacts = () => {
                         )
                     }
                     leftAvatar={contact => <Avatar record={contact} />}
+                    dense
                 />
             </Card>
-        </>
+        </div>
     );
 };
diff --git a/packages/demo/src/dashboard/LatestNotes.tsx b/packages/demo/src/dashboard/LatestNotes.tsx
index 86136f1..d4aede9 100644
--- a/packages/demo/src/dashboard/LatestNotes.tsx
+++ b/packages/demo/src/dashboard/LatestNotes.tsx
@@ -53,29 +53,28 @@ 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" />
                 </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">
+                            <Typography
+                                variant="body2"
+                                color="textSecondary"
+                                component="div"
+                            >
                                 on{' '}
                                 {note.type === 'dealNote' ? (
                                     <Deal note={note} />
@@ -136,9 +135,7 @@ const Contact = ({ note }: any) => (
         >
             <FunctionField<ContactType>
                 variant="body2"
-                render={(contact?: ContactType) =>
-                    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..1ee0928
--- /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 (
+        <div data-testid="tasks-list">
+            <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>
+        </div>
+    );
+};
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..f8163f6 100644
--- a/packages/demo/src/dataGenerator/companies.ts
+++ b/packages/demo/src/dataGenerator/companies.ts
@@ -44,7 +44,9 @@ 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({ min: 0, max: 2 }) === 0
+                    ? 1
+                    : 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..1143192 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 = (
@@ -17,7 +16,6 @@ export const generateContactNotes = (
         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/dataGenerator/dealNotes.ts b/packages/demo/src/dataGenerator/dealNotes.ts
index 6bd4252..c89981d 100644
--- a/packages/demo/src/dataGenerator/dealNotes.ts
+++ b/packages/demo/src/dataGenerator/dealNotes.ts
@@ -8,18 +8,16 @@ const type = ['Email', 'Call', 'Call', 'Call', 'Call', 'Meeting', 'Reminder'];
 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];
+        const date = company
+            ? randomDate(new Date(company.created_at)).toISOString()
+            : randomDate().toISOString();
         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
-                )
-            ).toISOString(),
+            date,
             sales_id: deal.sales_id,
         };
     });
diff --git a/packages/demo/src/dataGenerator/tags.ts b/packages/demo/src/dataGenerator/tags.ts
index bc75a2e..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;
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/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/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..02d1155 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 '@tanstack/react-query';
 import { stageChoices } from './stages';
 import { typeChoices } from './types';
 import { Deal } from '../types';
@@ -22,35 +26,60 @@ 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) => {
+        if (!allDeals) {
+            redirect('/deals');
+            return;
+        }
         // 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 +87,14 @@ 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,
+                        start_at: new Date().toISOString(),
+                        contact_ids: [],
+                    }}
+                >
                     <TextInput
                         source="name"
                         label="Deal name"
@@ -78,6 +114,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..40c9532 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,8 +35,8 @@ export const DealList = () => {
                 component="div"
             >
                 <DealListContent />
+                <DealCreate open={!!matchCreate} />
             </List>
-            <DealCreate open={!!matchCreate} />
             <DealShow open={!!matchShow} id={matchShow?.params.id} />
         </>
     );
@@ -44,7 +44,7 @@ export const DealList = () => {
 
 const dealFilters = [
     <SearchInput source="fts@fts" alwaysOn />,
-    <OnlyMineInput 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/misc/NbRelations.tsx b/packages/demo/src/misc/NbRelations.tsx
new file mode 100644
index 0000000..2fc4e01
--- /dev/null
+++ b/packages/demo/src/misc/NbRelations.tsx
@@ -0,0 +1,38 @@
+import { Typography, CircularProgress } from '@mui/material';
+import { RaRecord, useTimeout } from 'react-admin';
+import ErrorIcon from '@mui/icons-material/Error';
+import { useNbRelations } from './useNbRelations';
+
+export const NbRelations = (props: NbNotesProps) => {
+    const { timeout = 1000, ...rest } = props;
+    const { isLoading, error, label } = useNbRelations(rest);
+    const oneSecondHasPassed = useTimeout(timeout);
+
+    const body = isLoading ? (
+        oneSecondHasPassed ? (
+            <CircularProgress size={14} />
+        ) : (
+            ''
+        )
+    ) : error ? (
+        <ErrorIcon color="error" fontSize="small" titleAccess="error" />
+    ) : label ? (
+        ` - ${label}`
+    ) : (
+        ''
+    );
+
+    return (
+        <Typography component="span" variant="body2">
+            {body}
+        </Typography>
+    );
+};
+
+export interface NbNotesProps {
+    reference: string;
+    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;
+}
diff --git a/packages/demo/src/notes/NewNote.tsx b/packages/demo/src/notes/NewNote.tsx
index 5cb8b8b..665426a 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';
 
@@ -40,8 +40,10 @@ export const NewNote = ({
             sales_id: identity.id,
             date,
             text,
-            type: 'Note',
         };
+        if (record.type) {
+            data.type = record.type;
+        }
         if (showStatus) {
             data.status = status;
         }
@@ -53,14 +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,
+                        });
+                    }
                 },
             }
         );
@@ -84,7 +85,7 @@ export const NewNote = ({
                 <Box display="flex" justifyContent="space-between" mt={1}>
                     <span>
                         {text ? (
-                            <>
+                            <Stack direction="row">
                                 {showStatus && (
                                     <StatusSelector
                                         status={status}
@@ -102,6 +103,7 @@ export const NewNote = ({
                                     type="datetime-local"
                                     variant="filled"
                                     size="small"
+                                    margin="none"
                                     value={date}
                                     onChange={(
                                         event: React.ChangeEvent<HTMLInputElement>
@@ -115,7 +117,7 @@ export const NewNote = ({
                                         },
                                     }}
                                 />
-                            </>
+                            </Stack>
                         ) : null}
                     </span>
                     <Button
diff --git a/packages/demo/src/notes/Note.tsx b/packages/demo/src/notes/Note.tsx
index 2537c11..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,
@@ -26,7 +25,6 @@ import { Status } from '../misc/Status';
 export const Note = ({
     showStatus,
     note,
-    isLast,
     reference,
 }: {
     showStatus?: boolean;
@@ -38,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();
@@ -50,11 +47,6 @@ export const Note = ({
             mutationMode: 'undoable',
             onSuccess: () => {
                 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/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/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..d9feee7
--- /dev/null
+++ b/packages/demo/src/tasks/Task.tsx
@@ -0,0 +1,180 @@
+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),
+                                    },
+                                    previousData: task,
+                                });
+                                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),
+                                    },
+                                    previousData: task,
+                                });
+                                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 f310067..656efbe 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,11 +37,12 @@ export interface Contact extends RaRecord {
     tags: Identifier[];
     gender: string;
     sales_id: Identifier;
+    status: string;
+    background: string;
 }
 
 export interface ContactNote extends RaRecord {
     contact_id: Identifier;
-    type: string;
     text: string;
     date: string;
     sales_id: Identifier;
@@ -56,6 +59,7 @@ export interface Deal extends RaRecord {
     amount: number;
     created_at: string;
     updated_at: string;
+    start_at: string;
     sales_id: Identifier;
     index: number;
 }
diff --git a/packages/ra-supabase-ui-materialui/src/LoginPage.tsx b/packages/ra-supabase-ui-materialui/src/LoginPage.tsx
index eb958f1..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';
@@ -72,7 +71,6 @@ import {
  * );
  */
 export const LoginPage = (props: LoginPageProps) => {
-    useRedirectIfAuthenticated();
     const {
         children,
         disableEmailPassword = false,
diff --git a/supabase/migrations/20230126140204_init.sql b/supabase/migrations/20230126140204_init.sql
index d975cb0..c21d406 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,
@@ -97,7 +96,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
 );
 
 
@@ -137,15 +137,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";
 
@@ -153,7 +153,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";
 
@@ -161,7 +161,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";
 
@@ -169,7 +169,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";
 
diff --git a/yarn.lock b/yarn.lock
index 704710d..ce88d72 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.23.9", "@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.5.5", "@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"
@@ -1046,13 +1053,6 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@babel/runtime@^7.23.9":
-  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/template@^7.18.10", "@babel/template@^7.20.7", "@babel/template@^7.3.3":
   version "7.20.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.20.7.tgz#a15090c2839a83b02aa996c0b4994005841fd5a8"
@@ -1366,6 +1366,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"
@@ -2552,17 +2565,17 @@
   dependencies:
     whatwg-url "^5.0.0"
 
-"@supabase/postgrest-js@1.15.5":
-  version "1.15.5"
-  resolved "https://registry.yarnpkg.com/@supabase/postgrest-js/-/postgrest-js-1.15.5.tgz#7fa7744cb0991328bb1a7757861e435a5477f358"
-  integrity sha512-YR4TiitTE2hizT7mB99Cl3V9i00RAY5sUxS2/NuWWzkreM7OeYlP2OqnqVwwb4z6ILn+j8x9e/igJDepFhjswQ==
+"@supabase/postgrest-js@1.15.7":
+  version "1.15.7"
+  resolved "https://registry.yarnpkg.com/@supabase/postgrest-js/-/postgrest-js-1.15.7.tgz#6c169c413969aa87009e001b313613ae1365fdd6"
+  integrity sha512-TJztay5lcnnKuXjIO/X/aaajOsP8qNeW0k3MqIFoOtRolj5MEAIy8rixNakRk3o23eVCdsuP3iMLYPvOOruH6Q==
   dependencies:
     "@supabase/node-fetch" "^2.6.14"
 
-"@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==
+"@supabase/realtime-js@2.10.1":
+  version "2.10.1"
+  resolved "https://registry.yarnpkg.com/@supabase/realtime-js/-/realtime-js-2.10.1.tgz#6b4541a42b131438ac61aa5ce57934ac9db32ffa"
+  integrity sha512-SrrXxE8xgwWvjREQMkC9LIHIoCQde+OqkFPKP2s/O0ROjhmJ/iXeLvoWhAzXh9gwire4oaK14/ncL/iRiaVWQw==
   dependencies:
     "@supabase/node-fetch" "^2.6.14"
     "@types/phoenix" "^1.5.4"
@@ -2577,15 +2590,15 @@
     "@supabase/node-fetch" "^2.6.14"
 
 "@supabase/supabase-js@^2.43.5":
-  version "2.43.5"
-  resolved "https://registry.yarnpkg.com/@supabase/supabase-js/-/supabase-js-2.43.5.tgz#e4d5f9e5e21ef4226e0cb013c7e51fb3c5262581"
-  integrity sha512-Y4GukjZWW6ouohMaPlYz8tSz9ykf9jY7w9/RhqKuScmla3Xiklce8eLr8TYAtA+oQYCWxo3RgS3B6O4rd/72FA==
+  version "2.44.1"
+  resolved "https://registry.yarnpkg.com/@supabase/supabase-js/-/supabase-js-2.44.1.tgz#a0dcc972baaa7a63814b74c35cbecab217ec5b1c"
+  integrity sha512-4vCOkefRoeacmMELIWlYPwsfd9y/stH4fCZ4GZZjiOCHeViIrZ8artdj61MwkjQKFuF1uZ87gCKjtMDKLJsDlA==
   dependencies:
     "@supabase/auth-js" "2.64.2"
     "@supabase/functions-js" "2.4.1"
     "@supabase/node-fetch" "2.6.15"
-    "@supabase/postgrest-js" "1.15.5"
-    "@supabase/realtime-js" "2.9.5"
+    "@supabase/postgrest-js" "1.15.7"
+    "@supabase/realtime-js" "2.10.1"
     "@supabase/storage-js" "2.6.0"
 
 "@tanstack/query-core@5.45.0":
@@ -2725,10 +2738,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"
@@ -2745,6 +2758,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"
@@ -2919,6 +2940,11 @@
   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"
@@ -4426,7 +4452,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==
@@ -8183,6 +8209,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"
@@ -9559,10 +9590,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@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/ra-core/-/ra-core-5.0.1.tgz#f654b9d20c563658c822d5333a4d161909e36089"
-  integrity sha512-fmMKe9gPGrmUlFLUrJliOGBIdQwpLaXgqsEyyeETcKJrQkK0nha+YW05NrY/axm9vvbDCSxij0H6phMjISImNQ==
+ra-core@^5.0.1, ra-core@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/ra-core/-/ra-core-5.0.2.tgz#fb654d51bfc4977fe2bc232b11f4e343d04aa6a2"
+  integrity sha512-P3YVEqdx3gDsdQPLcr4T4555MacC4Y1YBQ9CP5zvRPGYD9oJREMrQy6DLphWfqsQb7hlf1Za9Z/CTsZNcmn+TA==
   dependencies:
     "@tanstack/react-query" "^5.8.4"
     clsx "^2.1.1"
@@ -9577,31 +9608,31 @@ ra-core@^5.0.1:
     react-is "^18.2.0"
 
 ra-data-fakerest@^5.0.0:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/ra-data-fakerest/-/ra-data-fakerest-5.0.1.tgz#68b9b66198be7d1998664b486816922dda9f9613"
-  integrity sha512-2T/CCgK0AnBMGksKxAgAS/SGFQ2aGiUtUgPPvVhAMwMsKvjZPfdxU3cgJ1NVIBsqsQ0e7GenMtyvSGb9dJzj4g==
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/ra-data-fakerest/-/ra-data-fakerest-5.0.2.tgz#1dfd4dcab24c9a9bcf5538d174ee45a715cf91eb"
+  integrity sha512-1+/kVD3Y7mOyvQen1IaN2P9oOr8e6Ps9yxxLUn0uQd6eUg2kIqBTtO566rpvFAiEdNmpfKAtKFQthgegjXUIjQ==
   dependencies:
     fakerest "^4.0.1"
 
-ra-i18n-polyglot@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/ra-i18n-polyglot/-/ra-i18n-polyglot-5.0.1.tgz#43788e40ff6d433ab4ec8f1b666e0d2adce8e227"
-  integrity sha512-tfjEPRnrpvGJ72ZFIUxUJAmHprk78Xj9VIYsX/Vpuq6a1tCWJyrnlOIriPUTkaLHXex0PuVvrKw6R8SZoVLY/w==
+ra-i18n-polyglot@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/ra-i18n-polyglot/-/ra-i18n-polyglot-5.0.2.tgz#4a8d4071ffb53f007651d0b1d8dd35bcaf621683"
+  integrity sha512-W10hXKyYoQI+SXJuekop2uc8+uECtvkc0praGqOOaJuWHRWv7hhfYNbeu4w6++/e5Cd7kXhQqonoP716csV4Vw==
   dependencies:
     node-polyglot "^2.2.2"
-    ra-core "^5.0.1"
+    ra-core "^5.0.2"
 
-ra-language-english@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/ra-language-english/-/ra-language-english-5.0.1.tgz#c3b0b17b905bb875b083341de33fd124072fdba4"
-  integrity sha512-bm/5Al2X32GgBtrCgAg1SL6KGGWyGozIupB/D0KQ8ol4lMYXXAaKIFwWgc08IJ+p+mecu680nW8UpIkNdl+cqA==
+ra-language-english@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/ra-language-english/-/ra-language-english-5.0.2.tgz#f00c33f2ce0df8ad377b1744a20037544385bc3d"
+  integrity sha512-22QKMZGPEbmMbv+pFQhCJMsktQq/nQh0XBTbAZvoEq79DU6MTTLssjtoIaDy4ognaXsg2QiYSH7Tqww/dph6xw==
   dependencies:
-    ra-core "^5.0.1"
+    ra-core "^5.0.2"
 
-ra-ui-materialui@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/ra-ui-materialui/-/ra-ui-materialui-5.0.1.tgz#9807c626af124adb0d5ffa05fe7528553ea4a7c0"
-  integrity sha512-RSfR9B7KaMRAwgXVbCToX7MRikNW8Ffoi1AqXfsrmtunurtc+smitiDtO45pk5y/F7F3JkR5sayegMj54p3R1A==
+ra-ui-materialui@^5.0.1, ra-ui-materialui@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/ra-ui-materialui/-/ra-ui-materialui-5.0.2.tgz#14d1cedf2575b91c0443fafbec045e2a6530c74f"
+  integrity sha512-Ts2PbJIqHx5R8eWaYrCmy61bVXWLKPA4V7/BdclNoXlUkFiNoEGL3wM2kCFQSMU1xtvy+Eya7DOR462i8VqnVQ==
   dependencies:
     "@tanstack/react-query" "^5.8.4"
     autosuggest-highlight "^3.1.1"
@@ -9617,7 +9648,7 @@ ra-ui-materialui@^5.0.1:
     react-error-boundary "^4.0.13"
     react-transition-group "^4.4.5"
 
-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==
@@ -9630,18 +9661,18 @@ raf@^3.4.1:
     performance-now "^2.1.0"
 
 react-admin@^5.0.0:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/react-admin/-/react-admin-5.0.1.tgz#32aff27b5bbc11db8a2877aa7ad7d1bc735f3b52"
-  integrity sha512-lW1bJspOnY2AErhY1mCm2f2oF7ajmRGdT0nb8QU/7ziDbUYAgtioxs0r2wAXX//x4oFnR3zh4SnsE/4AlURNzg==
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/react-admin/-/react-admin-5.0.2.tgz#ff3ecb61a98d8325ea80016f5f90d8d4959a2db4"
+  integrity sha512-iu+ztckoviaRXjmX1/VIW2bGYU18pVrQrG01YOJCCOMoEw/NXYFmeWj+YQYQSUsKqf+OSZJ2yeO0QE8VRQuFEw==
   dependencies:
     "@emotion/react" "^11.4.1"
     "@emotion/styled" "^11.3.0"
     "@mui/icons-material" "^5.15.20"
     "@mui/material" "^5.15.20"
-    ra-core "^5.0.1"
-    ra-i18n-polyglot "^5.0.1"
-    ra-language-english "^5.0.1"
-    ra-ui-materialui "^5.0.1"
+    ra-core "^5.0.2"
+    ra-i18n-polyglot "^5.0.2"
+    ra-language-english "^5.0.2"
+    ra-ui-materialui "^5.0.2"
     react-hook-form "^7.52.0"
     react-router "^6.22.0"
     react-router-dom "^6.22.0"
@@ -9727,6 +9758,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"
@@ -9904,7 +9947,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==
@@ -11096,11 +11139,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"
@@ -11222,11 +11270,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==
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
@@ -11572,9 +11625,9 @@ ws@^8.11.0:
   integrity sha512-kU62emKIdKVeEIOIKVegvqpXMSTAMLJozpHZaJNDYqBjzlSYXQGviYwN1osDLJ9av68qHd4a2oSjd7yD4pacig==
 
 ws@^8.14.2:
-  version "8.17.1"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-8.17.1.tgz#9293da530bb548febc95371d90f9c878727d919b"
-  integrity sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==
+  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"