Backport changes from atomic-crm

Author: fzaninotto

examples/crm/src/App.tsx

@@ -1,26 +1,30 @@
 import { CRM } from './root/CRM';
-import {
-    defaultCompanySectors,
-    defaultContactGender,
-    defaultDealCategories,
-    defaultDealStages,
-    defaultLogo,
-    defaultNoteStatuses,
-    defaultTaskTypes,
-    defaultTitle,
-} from './root/defaultConfiguration';
 
-const App = () => (
-    <CRM
-        contactGender={defaultContactGender}
-        companySectors={defaultCompanySectors}
-        dealCategories={defaultDealCategories}
-        dealStages={defaultDealStages}
-        logo={defaultLogo}
-        noteStatuses={defaultNoteStatuses}
-        taskTypes={defaultTaskTypes}
-        title={defaultTitle}
-    />
-);
+/**
+ * Application entry point
+ *
+ * Customize Atomic CRM by passing props to the CRM component:
+ *  - contactGender
+ *  - companySectors
+ *  - darkTheme
+ *  - dealCategories
+ *  - dealPipelineStatuses
+ *  - dealStages
+ *  - lightTheme
+ *  - logo
+ *  - noteStatuses
+ *  - taskTypes
+ *  - title
+ * ... as well as all the props accepted by react-admin's <Admin> component.
+ *
+ * @example
+ * const App = () => (
+ *    <CRM
+ *       logo="./img/logo.png"
+ *       title="Acme CRM"
+ *    />
+ * );
+ */
+const App = () => <CRM />;
 
 export default App;

examples/crm/src/companies/CompanyListFilter.tsx

@@ -24,17 +24,7 @@ export const CompanyListFilter = () => {
     return (
         <Box width="13em" minWidth="13em" order={-1} mr={2} mt={5}>
             <FilterLiveSearch hiddenLabel />
-            <FilterList
-                label="Account manager"
-                icon={<SupervisorAccountIcon />}
-            >
-                <FilterListItem
-                    label="Me"
-                    value={{
-                        sales_id: identity?.id,
-                    }}
-                />
-            </FilterList>
+
             <FilterList label="Size" icon={<BusinessIcon />}>
                 {sizes.map(size => (
                     <FilterListItem
@@ -54,6 +44,18 @@ export const CompanyListFilter = () => {
                     />
                 ))}
             </FilterList>
+
+            <FilterList
+                label="Account manager"
+                icon={<SupervisorAccountIcon />}
+            >
+                <FilterListItem
+                    label="Me"
+                    value={{
+                        sales_id: identity?.id,
+                    }}
+                />
+            </FilterList>
         </Box>
     );
 };

examples/crm/src/contacts/ContactListContent.tsx

@@ -1,31 +1,30 @@
 /* eslint-disable import/no-anonymous-default-export */
-import * as React from 'react';
-import {
-    RecordContextProvider,
-    ReferenceField,
-    SimpleListLoading,
-    TextField,
-    useListContext,
-} from 'react-admin';
+import type { Theme } from '@mui/material';
 import {
+    Checkbox,
     List,
     ListItem,
     ListItemAvatar,
     ListItemIcon,
     ListItemSecondaryAction,
     ListItemText,
-    Checkbox,
     Typography,
     useMediaQuery,
 } from '@mui/material';
-import type { Theme } from '@mui/material';
-import { Link } from 'react-router-dom';
 import { formatRelative } from 'date-fns';
+import {
+    RecordContextProvider,
+    ReferenceField,
+    SimpleListLoading,
+    TextField,
+    useListContext,
+} from 'react-admin';
+import { Link } from 'react-router-dom';
 
-import { Avatar } from './Avatar';
 import { Status } from '../misc/Status';
-import { TagsList } from './TagsList';
 import { Contact } from '../types';
+import { Avatar } from './Avatar';
+import { TagsList } from './TagsList';
 
 export const ContactListContent = () => {
     const {

examples/crm/src/contacts/ContactListFilter.tsx

@@ -34,12 +34,6 @@ export const ContactListFilter = () => {
                 }}
                 placeholder="Search name, company, etc."
             />
-            <FilterList
-                label="Account manager"
-                icon={<SupervisorAccountIcon />}
-            >
-                <FilterListItem label="Me" value={{ sales_id: identity?.id }} />
-            </FilterList>
             <FilterList label="Last activity" icon={<AccessTimeIcon />}>
                 <FilterListItem
                     label="Today"
@@ -113,6 +107,12 @@ export const ContactListFilter = () => {
                         />
                     ))}
             </FilterList>
+            <FilterList
+                label="Account manager"
+                icon={<SupervisorAccountIcon />}
+            >
+                <FilterListItem label="Me" value={{ sales_id: identity?.id }} />
+            </FilterList>
         </Box>
     );
 };

examples/crm/src/dashboard/HotContacts.tsx

@@ -77,6 +77,17 @@ export const HotContacts = () => {
                     )}
                     leftAvatar={contact => <Avatar record={contact} />}
                     dense
+                    empty={
+                        <Box p={2}>
+                            <Typography variant="body2" gutterBottom>
+                                Contacts with a "hot" status will appear here.
+                            </Typography>
+                            <Typography variant="body2">
+                                Change the status of a contact by adding a note
+                                to that contact and clicking on "show options".
+                            </Typography>
+                        </Box>
+                    }
                 />
             </Card>
         </Stack>

examples/crm/src/dashboard/TasksListEmpty.tsx

@@ -17,5 +17,9 @@ export const TasksListEmpty = () => {
 
     if (total) return null;
 
-    return <Typography variant="body2">No results found</Typography>;
+    return (
+        <Typography variant="body2">
+            Tasks added to your contacts will appear here.
+        </Typography>
+    );
 };

examples/crm/src/dashboard/Welcome.tsx

@@ -47,18 +47,18 @@ export const Welcome = () => (
             <Button
                 variant="contained"
                 fullWidth
-                href="https://github.com/marmelab/react-admin/tree/master/examples/crm"
-                startIcon={<CodeIcon />}
+                href="https://marmelab.com/react-admin"
+                startIcon={<HomeIcon />}
             >
-                Source
+                React-admin site
             </Button>
             <Button
                 variant="contained"
                 fullWidth
-                href="https://marmelab.com/react-admin"
-                startIcon={<HomeIcon />}
+                href="https://github.com/marmelab/react-admin/tree/master/examples/crm"
+                startIcon={<CodeIcon />}
             >
-                React-admin site
+                Source of this demo
             </Button>
         </CardActions>
     </Card>

examples/crm/src/deals/DealEdit.tsx

@@ -30,7 +30,17 @@ export const DealEdit = ({ open, id }: { open: boolean; id?: string }) => {
     };
 
     return (
-        <Dialog open={open} onClose={handleClose} fullWidth maxWidth="md">
+        <Dialog
+            open={open}
+            onClose={handleClose}
+            fullWidth
+            maxWidth="md"
+            sx={{
+                '& .MuiDialog-container': {
+                    alignItems: 'flex-start',
+                },
+            }}
+        >
             {!!id ? (
                 <EditBase
                     id={id}
@@ -94,7 +104,11 @@ function EditHeader() {
                 </Stack>
 
                 <Stack direction="row" spacing={1} sx={{ pr: 3 }}>
-                    <Button component={Link} to={`/deals/${deal.id}/show`}>
+                    <Button
+                        component={Link}
+                        to={`/deals/${deal.id}/show`}
+                        size="small"
+                    >
                         Back to deal
                     </Button>
                 </Stack>

examples/crm/src/deals/DealShow.tsx

@@ -42,7 +42,17 @@ export const DealShow = ({ open, id }: { open: boolean; id?: string }) => {
     };
 
     return (
-        <Dialog open={open} onClose={handleClose} fullWidth maxWidth="md">
+        <Dialog
+            open={open}
+            onClose={handleClose}
+            fullWidth
+            maxWidth="md"
+            sx={{
+                '& .MuiDialog-container': {
+                    alignItems: 'flex-start',
+                },
+            }}
+        >
             <DialogContent sx={{ padding: 0 }}>
                 {!!id ? (
                     <ShowBase id={id}>
@@ -65,14 +75,18 @@ const DealShowContent = ({ handleClose }: { handleClose: () => void }) => {
             <DialogCloseButton
                 onClose={handleClose}
                 top={record.archived_at ? CLOSE_TOP_WITH_ARCHIVED : 16}
-                right={20}
+                right={10}
                 color={record.archived_at ? 'white' : undefined}
             />
             <Stack gap={1}>
                 {record.archived_at ? <ArchivedTitle /> : null}
                 <Box display="flex" p={2}>
-                    <Box ml={2} flex="1">
-                        <Stack direction="row" justifyContent="space-between">
+                    <Box flex="1">
+                        <Stack
+                            direction="row"
+                            justifyContent="space-between"
+                            mb={4}
+                        >
                             <Stack direction="row" alignItems="center" gap={2}>
                                 <ReferenceField
                                     source="company_id"
@@ -88,7 +102,7 @@ const DealShowContent = ({ handleClose }: { handleClose: () => void }) => {
                             <Stack
                                 gap={1}
                                 direction="row"
-                                pr={record.archived_at ? 0 : 4}
+                                pr={record.archived_at ? 0 : 6}
                             >
                                 {record.archived_at ? (
                                     <>
@@ -104,7 +118,7 @@ const DealShowContent = ({ handleClose }: { handleClose: () => void }) => {
                             </Stack>
                         </Stack>
 
-                        <Box display="flex" mb={2} mt={2}>
+                        <Box display="flex" m={2}>
                             <Box display="flex" mr={5} flexDirection="column">
                                 <Typography
                                     color="textSecondary"
@@ -192,7 +206,7 @@ const DealShowContent = ({ handleClose }: { handleClose: () => void }) => {
                         </Box>
 
                         {!!record.contact_ids?.length && (
-                            <Box mb={2}>
+                            <Box m={2}>
                                 <Box
                                     display="flex"
                                     mr={5}
@@ -216,7 +230,7 @@ const DealShowContent = ({ handleClose }: { handleClose: () => void }) => {
                         )}
 
                         {record.description && (
-                            <Box mt={2} mb={2} sx={{ whiteSpace: 'pre-line' }}>
+                            <Box m={2} sx={{ whiteSpace: 'pre-line' }}>
                                 <Typography
                                     color="textSecondary"
                                     variant="caption"
@@ -229,9 +243,8 @@ const DealShowContent = ({ handleClose }: { handleClose: () => void }) => {
                             </Box>
                         )}
 
-                        <Divider />
-
-                        <Box mt={2}>
+                        <Box m={2}>
+                            <Divider />
                             <ReferenceManyField
                                 target="deal_id"
                                 reference="dealNotes"

examples/crm/src/Header.tsx renamed to examples/crm/src/layout/Header.tsx

@@ -19,7 +19,7 @@ import {
     useUserMenu,
 } from 'react-admin';
 import { Link, matchPath, useLocation } from 'react-router-dom';
-import { useConfigurationContext } from './root/ConfigurationContext';
+import { useConfigurationContext } from '../root/ConfigurationContext';
 
 const Header = () => {
     const { logo, title } = useConfigurationContext();