Feat(crm): Harmonize Sales Form and My Page Form with the others

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"

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 guy</Typography>
+                    <SalesInputs>
+                        <PasswordInput
+                            source="password"
+                            validate={required()}
+                            helperText={false}
+                        />
+                    </SalesInputs>
+                </SimpleForm>
+            </Create>
+        </Container>
     );
 }

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>
+    );
+};

examples/crm/src/sales/SalesInputs.tsx

@@ -0,0 +1,41 @@
+import {
+    BooleanInput,
+    required,
+    TextInput,
+    useGetIdentity,
+    useRecordContext,
+} from 'react-admin';
+import { Sale } from '../types';
+import { ReactNode } from 'react';
+import { Stack } from '@mui/material';
+
+export function SalesInputs({ children }: { children: ReactNode }) {
+    const { identity } = useGetIdentity();
+    const record = useRecordContext<Sale>();
+
+    return (
+        <Stack gap={1} sx={{ width: '100%' }}>
+            <TextInput
+                source="first_name"
+                validate={required()}
+                helperText={false}
+            />
+            <TextInput
+                source="last_name"
+                validate={required()}
+                helperText={false}
+            />
+            <TextInput
+                source="email"
+                validate={required()}
+                helperText={false}
+            />
+            {children}
+            <BooleanInput
+                source="administrator"
+                readOnly={record?.id === identity?.id}
+                helperText={false}
+            />
+        </Stack>
+    );
+}

examples/crm/src/sales/SalesList.tsx

@@ -15,7 +15,7 @@ function SalesListActions() {
     return (
         <TopToolbar>
             <ExportButton />
-            <CreateButton variant="contained" label="New Sale" />
+            <CreateButton variant="contained" label="New sales guy" />
         </TopToolbar>
     );
 }
@@ -34,7 +34,7 @@ export function SalesList() {
                     <TextField source="first_name" />
                     <TextField source="last_name" />
                     <TextField source="email" />
-                    <BooleanField source="administrator" />
+                    <BooleanField source="administrator" FalseIcon={null} />
                 </DatagridConfigurable>
             </List>
 

examples/crm/src/settings/SettingsPage.tsx

@@ -105,7 +105,7 @@ const SettingsForm = ({
                         {isEditMode ? 'Show' : 'Edit'}
                     </Button>
                 </Stack>
-                <Stack gap={2} mb={2}>
+                <Stack gap={1} mb={2}>
                     <TextRender source="first_name" isEditMode={isEditMode} />
                     <TextRender source="last_name" isEditMode={isEditMode} />
                     <TextRender source="email" isEditMode={isEditMode} />

examples/crm/src/settings/UpdatePassword.tsx

@@ -8,8 +8,15 @@ import {
     TextField,
     Typography,
 } from '@mui/material';
-import { useGetIdentity, useGetOne, useNotify, useUpdate } from 'react-admin';
+import {
+    Toolbar,
+    useGetIdentity,
+    useGetOne,
+    useNotify,
+    useUpdate,
+} from 'react-admin';
 import { useForm } from 'react-hook-form';
+import { DialogCloseButton } from '../misc/DialogCloseButton';
 
 const PASSWORD_POLICY = {
     regex: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/, // Example policy: Minimum 8 characters, at least one letter and one number
@@ -75,17 +82,18 @@ export const UpdatePassword = ({
 
     return (
         <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
+            <DialogCloseButton onClose={handleClose} />
             <DialogTitle>Change Password</DialogTitle>
-            <DialogContent>
-                <Typography
-                    variant="caption"
-                    color="textSecondary"
-                    gutterBottom
-                >
-                    Password for Jane Doe account is "demo"
-                </Typography>
-                <form onSubmit={handleSubmit(onSubmit)}>
-                    <Stack gap={2}>
+            <form onSubmit={handleSubmit(onSubmit)}>
+                <DialogContent>
+                    <Typography
+                        variant="caption"
+                        color="textSecondary"
+                        gutterBottom
+                    >
+                        Password for Jane Doe account is "demo"
+                    </Typography>
+                    <Stack gap={1}>
                         <TextField
                             {...register('currentPassword', {
                                 required: 'Current password is required',
@@ -139,14 +147,18 @@ export const UpdatePassword = ({
                             }
                         />
                     </Stack>
-                    <DialogActions>
-                        <Button
-                            variant="text"
-                            onClick={handleClose}
-                            color="secondary"
-                        >
-                            Cancel
-                        </Button>
+                </DialogContent>
+                <DialogActions
+                    sx={{
+                        justifyContent: 'flex-start',
+                        p: 0,
+                    }}
+                >
+                    <Toolbar
+                        sx={{
+                            width: '100%',
+                        }}
+                    >
                         <Button
                             type="submit"
                             color="primary"
@@ -155,9 +167,9 @@ export const UpdatePassword = ({
                         >
                             Update
                         </Button>
-                    </DialogActions>
-                </form>
-            </DialogContent>
+                    </Toolbar>
+                </DialogActions>
+            </form>
         </Dialog>
     );
 };