Merge pull request #10140 from marmelab/atomic-crm-backport

Feat(demo): Backport Atomic CRM to RA repo

Author: fzaninotto

examples/crm/public/logos/logo_atomic_crm.svg

@@ -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/App.tsx

@@ -2,7 +2,7 @@ import { Alert, Divider, Skeleton, Stack } from '@mui/material';
 import { useQuery } from '@tanstack/react-query';
 import { Identifier, useDataProvider } from 'react-admin';
 
-import { CustomDataProvider } from '../dataProvider';
+import { CrmDataProvider } from '../providers/types';
 import { ActivityLogContext } from './ActivityLogContext';
 import { ActivityLogIterator } from './ActivityLogIterator';
 
@@ -17,7 +17,7 @@ export function ActivityLog({
     pageSize = 20,
     context = 'all',
 }: ActivityLogProps) {
-    const dataProvider = useDataProvider<CustomDataProvider>();
+    const dataProvider = useDataProvider<CrmDataProvider>();
     const { data, isPending, error } = useQuery({
         queryKey: ['activityLog', companyId],
         queryFn: () => dataProvider.getActivityLog(companyId),

examples/crm/src/activity/ActivityLog.tsx

@@ -46,7 +46,7 @@ export const CompanyAside = ({ link = 'edit' }: CompanyAsideProps) => {
 };
 
 const CompanyInfo = ({ record }: { record: Company }) => {
-    if (!record.website && !record.linkedIn && !record.phone_number) {
+    if (!record.website && !record.linkedin_url && !record.phone_number) {
         return null;
     }
 
@@ -102,7 +102,7 @@ const CompanyInfo = ({ record }: { record: Company }) => {
 };
 
 const ContextInfo = ({ record }: { record: Company }) => {
-    if (!record.revenue && !record.identifier) {
+    if (!record.revenue && !record.id) {
         return null;
     }
 

examples/crm/src/companies/CompanyAside.tsx

@@ -20,6 +20,7 @@ export const CompanyAvatar = (props: {
                 '& img': { objectFit: 'contain' },
                 width,
                 height,
+                fontSize: height !== 40 ? '0.6rem' : undefined,
             }}
         >
             {record.name.charAt(0)}

examples/crm/src/companies/CompanyAvatar.tsx

@@ -66,8 +66,10 @@ export const CompanyCard = (props: { record?: Company }) => {
                                 {record.nb_contacts}
                             </Typography>
                             <Typography variant="caption" color="textSecondary">
-                                {record.nb_contacts > 1
-                                    ? 'contacts'
+                                {record.nb_contacts
+                                    ? record.nb_contacts > 1
+                                        ? 'contacts'
+                                        : 'contact'
                                     : 'contact'}
                             </Typography>
                         </div>
@@ -79,7 +81,11 @@ export const CompanyCard = (props: { record?: Company }) => {
                                 {record.nb_deals}
                             </Typography>
                             <Typography variant="caption" color="textSecondary">
-                                {record.nb_deals > 1 ? 'deals' : 'deal'}
+                                {record.nb_deals
+                                    ? record.nb_deals > 1
+                                        ? 'deals'
+                                        : 'deal'
+                                    : 'deal'}
                             </Typography>
                         </div>
                     </Box>

examples/crm/src/companies/CompanyCard.tsx

@@ -163,7 +163,7 @@ const CompanyAccountManagerInput = () => {
                 source="sales_id"
                 reference="sales"
                 filter={{
-                    disabled_neq: true,
+                    'disabled@neq': true,
                 }}
             >
                 <SelectInput

examples/crm/src/companies/CompanyInputs.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {
     TopToolbar,
     ExportButton,
@@ -13,35 +12,25 @@ import {
 
 import { ImageList } from './GridList';
 import { CompanyListFilter } from './CompanyListFilter';
-import { LinearProgress, Stack } from '@mui/material';
+import { Stack } from '@mui/material';
 import { CompanyEmpty } from './CompanyEmpty';
-import { hasOtherFiltersThanDefault } from '../misc/hasOtherFiltersThanDefault';
 
 export const CompanyList = () => {
     const { identity } = useGetIdentity();
     if (!identity) return null;
     return (
-        <ListBase
-            perPage={25}
-            filterDefaultValues={{ sales_id: identity?.id }}
-            sort={{ field: 'name', order: 'ASC' }}
-        >
+        <ListBase perPage={25} sort={{ field: 'name', order: 'ASC' }}>
             <CompanyListLayout />
         </ListBase>
     );
 };
 
 const CompanyListLayout = () => {
     const { data, isPending, filterValues } = useListContext();
-    const { identity } = useGetIdentity();
-    const hasOtherFiltersThanDefaultBoolean = hasOtherFiltersThanDefault(
-        filterValues,
-        'sales_id',
-        identity?.id
-    );
-    if (isPending) return <LinearProgress />;
-    if (!data?.length && !hasOtherFiltersThanDefaultBoolean)
-        return <CompanyEmpty />;
+    const hasFilters = filterValues && Object.keys(filterValues).length > 0;
+
+    if (isPending) return null;
+    if (!data?.length && !hasFilters) return <CompanyEmpty />;
 
     return (
         <Stack direction="row" component="div">

examples/crm/src/companies/CompanyList.tsx

@@ -52,7 +52,7 @@ export const CompanyListFilter = () => {
                 <FilterListItem
                     label="Me"
                     value={{
-                        sales_id: identity && identity.id,
+                        sales_id: identity?.id,
                     }}
                 />
             </FilterList>

examples/crm/src/companies/CompanyListFilter.tsx

@@ -80,7 +80,7 @@ const CompanyShowContent = () => {
                                 path="contacts"
                             >
                                 <ReferenceManyField
-                                    reference="contacts"
+                                    reference="contacts_summary"
                                     target="company_id"
                                     sort={{ field: 'last_name', order: 'ASC' }}
                                 >
@@ -228,7 +228,7 @@ const DealsIterator = () => {
                                         currencyDisplay: 'narrowSymbol',
                                         minimumSignificantDigits: 3,
                                     })}
-                                    , {deal.type}
+                                    {deal.category ? `, ${deal.category}` : ''}
                                 </>
                             }
                         />