Merge branch 'atomic-crm' into fix/crm-ux

marmelab · Jul 26, 2024 · 6fb9c30 · 6fb9c30
2 parents 8d168c1 + 86e2f57
commit 6fb9c30
Show file tree

Hide file tree

Showing 15 changed files with 180 additions and 162 deletions.
diff --git a/examples/crm/src/Header.tsx b/examples/crm/src/Header.tsx
@@ -100,7 +100,7 @@ const Header = () => {
                                 />
                                 {permissions === 'admin' && (
                                     <Tab
-                                        label={'Sales'}
+                                        label={'Sales Team'}
                                         component={Link}
                                         to="/sales"
                                         value="/sales"

diff --git a/examples/crm/src/dashboard/DealsChart.tsx b/examples/crm/src/dashboard/DealsChart.tsx
@@ -18,7 +18,7 @@ export const DealsChart = () => {
     const { data, isPending } = useGetList<Deal>('deals', {
         pagination: { perPage: 100, page: 1 },
         sort: {
-            field: 'start_at',
+            field: 'created_at',
             order: 'ASC',
         },
     });
@@ -27,7 +27,7 @@ export const DealsChart = () => {
         if (!data) return [];
         const dealsByMonth = data.reduce((acc, deal) => {
             const month = startOfMonth(
-                deal.start_at ?? new Date()
+                deal.created_at ?? new Date()
             ).toISOString();
             if (!acc[month]) {
                 acc[month] = [];

diff --git a/examples/crm/src/dataGenerator/deals.ts b/examples/crm/src/dataGenerator/deals.ts
@@ -1,13 +1,13 @@
-import { random, lorem } from 'faker/locale/en_US';
 import { add } from 'date-fns';
+import { lorem, random } from 'faker/locale/en_US';
 
-import { Db } from './types';
-import { Deal } from '../types';
-import { randomDate } from './utils';
 import {
     defaultDealCategories,
     defaultDealStages,
 } from '../root/defaultConfiguration';
+import { Deal } from '../types';
+import { Db } from './types';
+import { randomDate } from './utils';
 
 export const generateDeals = (db: Db): Deal[] => {
     const deals = Array.from(Array(50).keys()).map(id => {
@@ -22,10 +22,9 @@ export const generateDeals = (db: Db): Deal[] => {
             new Date(company.created_at)
         ).toISOString();
 
-        const start_at = created_at;
-        const expecting_closing_date = randomDate(
-            new Date(start_at),
-            add(new Date(start_at), { months: 6 })
+        const expected_closing_date = randomDate(
+            new Date(created_at),
+            add(new Date(created_at), { months: 6 })
         ).toISOString();
 
         return {
@@ -37,10 +36,9 @@ export const generateDeals = (db: Db): Deal[] => {
             stage: random.arrayElement(defaultDealStages).value,
             description: lorem.paragraphs(random.number({ min: 1, max: 4 })),
             amount: random.number(1000) * 100,
-            created_at: created_at,
+            created_at,
             updated_at: randomDate(new Date(created_at)).toISOString(),
-            start_at,
-            expecting_closing_date,
+            expected_closing_date,
             sales_id: company.sales_id,
             index: 0,
             nb_notes: 0,

diff --git a/examples/crm/src/deals/DealCreate.tsx b/examples/crm/src/deals/DealCreate.tsx
@@ -11,9 +11,9 @@ import {
     useListContext,
     useRedirect,
 } from 'react-admin';
+import { DialogCloseButton } from '../misc/DialogCloseButton';
 import { Deal } from '../types';
 import { DealInputs } from './DealInputs';
-import { DialogCloseButton } from '../misc/DialogCloseButton';
 
 export const DealCreate = ({ open }: { open: boolean }) => {
     const redirect = useRedirect();
@@ -92,7 +92,6 @@ export const DealCreate = ({ open }: { open: boolean }) => {
                         sales_id: identity?.id,
                         contact_ids: [],
                         index: 0,
-                        start_at: new Date().toISOString(),
                     }}
                 >
                     <DialogContent>

diff --git a/examples/crm/src/deals/DealInputs.tsx b/examples/crm/src/deals/DealInputs.tsx
@@ -108,19 +108,11 @@ export const DealInputs = () => {
             />
             <Divider sx={{ my: 2, width: '100%' }} />
             <DateInput
-                source="expecting_closing_date"
+                source="expected_closing_date"
                 fullWidth
                 validate={[validateRequired]}
                 helperText={false}
             />
-            <DateInput
-                source="start_at"
-                defaultValue={new Date()}
-                fullWidth
-                label="Starting date"
-                readOnly
-                helperText={false}
-            />
         </>
     );
 };

diff --git a/examples/crm/src/deals/DealShow.tsx b/examples/crm/src/deals/DealShow.tsx
@@ -112,30 +112,16 @@ const DealShowContent = ({ handleClose }: { handleClose: () => void }) => {
                             </Stack>
                         </Stack>
 
-                        <Box display="flex" mt={2}>
+                        <Box display="flex" mb={2} mt={2}>
                             <Box display="flex" mr={5} flexDirection="column">
                                 <Typography
                                     color="textSecondary"
                                     variant="caption"
                                 >
-                                    Starting date
+                                    Expected closing date
                                 </Typography>
                                 <Typography variant="body2">
-                                    {format(record.start_at, 'PP')}
-                                </Typography>
-                            </Box>
-                            <Box display="flex" mr={5} flexDirection="column">
-                                <Typography
-                                    color="textSecondary"
-                                    variant="caption"
-                                >
-                                    Expecting closing date
-                                </Typography>
-                                <Typography variant="body2">
-                                    {format(
-                                        record.expecting_closing_date,
-                                        'PP'
-                                    )}
+                                    {format(record.expected_closing_date, 'PP')}
                                 </Typography>
                             </Box>
 
@@ -157,17 +143,23 @@ const DealShowContent = ({ handleClose }: { handleClose: () => void }) => {
                                 </Typography>
                             </Box>
 
-                            <Box display="flex" mr={5} flexDirection="column">
-                                <Typography
-                                    color="textSecondary"
-                                    variant="caption"
+                            {record.category && (
+                                <Box
+                                    display="flex"
+                                    mr={5}
+                                    flexDirection="column"
                                 >
-                                    Category
-                                </Typography>
-                                <Typography variant="body2">
-                                    {record.category}
-                                </Typography>
-                            </Box>
+                                    <Typography
+                                        color="textSecondary"
+                                        variant="caption"
+                                    >
+                                        Category
+                                    </Typography>
+                                    <Typography variant="body2">
+                                        {record.category}
+                                    </Typography>
+                                </Box>
+                            )}
 
                             <Box display="flex" mr={5} flexDirection="column">
                                 <Typography
@@ -182,36 +174,43 @@ const DealShowContent = ({ handleClose }: { handleClose: () => void }) => {
                             </Box>
                         </Box>
 
-                        <Box mt={2} mb={2}>
-                            <Box
-                                display="flex"
-                                mr={5}
-                                flexDirection="column"
-                                minHeight={48}
-                            >
+                        {!!record.contact_ids?.length && (
+                            <Box mb={2}>
+                                <Box
+                                    display="flex"
+                                    mr={5}
+                                    flexDirection="column"
+                                    minHeight={48}
+                                >
+                                    <Typography
+                                        color="textSecondary"
+                                        variant="caption"
+                                    >
+                                        Contacts
+                                    </Typography>
+                                    <ReferenceArrayField
+                                        source="contact_ids"
+                                        reference="contacts"
+                                    >
+                                        <ContactList />
+                                    </ReferenceArrayField>
+                                </Box>
+                            </Box>
+                        )}
+
+                        {record.description && (
+                            <Box mt={2} mb={2} sx={{ whiteSpace: 'pre-line' }}>
                                 <Typography
                                     color="textSecondary"
                                     variant="caption"
                                 >
-                                    Contacts
+                                    Description
+                                </Typography>
+                                <Typography variant="body2">
+                                    {record.description}
                                 </Typography>
-                                <ReferenceArrayField
-                                    source="contact_ids"
-                                    reference="contacts"
-                                >
-                                    <ContactList />
-                                </ReferenceArrayField>
                             </Box>
-                        </Box>
-
-                        <Box mt={2} mb={2} sx={{ whiteSpace: 'pre-line' }}>
-                            <Typography color="textSecondary" variant="caption">
-                                Description
-                            </Typography>
-                            <Typography variant="body2">
-                                {record.description}
-                            </Typography>
-                        </Box>
+                        )}
 
                         <Divider />
 

diff --git a/examples/crm/src/root/CRM.tsx b/examples/crm/src/root/CRM.tsx
@@ -43,26 +43,6 @@ type CRMProps = {
     darkTheme?: RaThemeOptions;
 } & Partial<ConfigurationContextValue>;
 
-// const defaultLightTheme = {
-//     ...defaultTheme,
-//     palette: {
-//         background: {
-//             default: '#fafafb',
-//         },
-//     },
-//     components: {
-//         RaFileInput: {
-//             styleOverrides: {
-//                 root: {
-//                     '& .RaFileInput-dropZone': {
-//                         backgroundColor: 'MistyRose',
-//                     },
-//                 },
-//             },
-//         },
-//     },
-// };
-
 const defaultLightTheme = deepmerge(defaultTheme, {
     palette: {
         background: {

diff --git a/examples/crm/src/sales/SalesCreate.tsx b/examples/crm/src/sales/SalesCreate.tsx
@@ -1,13 +1,22 @@
 import { Create, PasswordInput, required, SimpleForm } from 'react-admin';
-import { SalesForm } from './SalesForm';
+import { SalesInputs } from './SalesInputs';
+import { Container, Typography } from '@mui/material';
 
 export function SalesCreate() {
     return (
-        <Create redirect="list">
-            <SimpleForm>
-                <SalesForm />
-                <PasswordInput source="password" validate={required()} />
-            </SimpleForm>
-        </Create>
+        <Container maxWidth="sm" sx={{ mt: 4 }}>
+            <Create redirect="list">
+                <SimpleForm>
+                    <Typography variant="h6">Create sale person</Typography>
+                    <SalesInputs>
+                        <PasswordInput
+                            source="password"
+                            validate={required()}
+                            helperText={false}
+                        />
+                    </SalesInputs>
+                </SimpleForm>
+            </Create>
+        </Container>
     );
 }
diff --git a/examples/crm/src/sales/SalesEdit.tsx b/examples/crm/src/sales/SalesEdit.tsx
@@ -9,7 +9,8 @@ import {
     useRecordContext,
 } from 'react-admin';
 import { Sale } from '../types';
-import { SalesForm } from './SalesForm';
+import { SalesInputs } from './SalesInputs';
+import { Container, Typography } from '@mui/material';
 
 function EditToolbar() {
     const { identity } = useGetIdentity();
@@ -33,14 +34,28 @@ function EditToolbar() {
 
 export function SalesEdit() {
     return (
-        <>
+        <Container maxWidth="sm" sx={{ mt: 4 }}>
             <Edit>
                 <SimpleForm toolbar={<EditToolbar />}>
-                    <SalesForm />
-
-                    <PasswordInput source="new_password" />
+                    <SaleEditTitle />
+                    <SalesInputs>
+                        <PasswordInput
+                            source="new_password"
+                            helperText={false}
+                        />
+                    </SalesInputs>
                 </SimpleForm>
             </Edit>
-        </>
+        </Container>
     );
 }
+
+const SaleEditTitle = () => {
+    const record = useRecordContext<Sale>();
+    if (!record) return null;
+    return (
+        <Typography variant="h6">
+            Edit {record?.first_name} {record?.last_name}
+        </Typography>
+    );
+};
diff --git a/examples/crm/src/sales/SalesForm.tsx b/examples/crm/src/sales/SalesForm.tsx