Merge pull request #162 from marmelab/user-config

Add Settings page

Author: ThieryMichel

doc/astro.config.mjs

@@ -86,6 +86,7 @@ export default defineConfig({
           label: "Users Documentation",
           items: [
             "users/user-management",
+            "users/settings",
             "users/import-data",
             "users/merging-contacts",
             "users/inbound-email",

doc/src/content/docs/developers/customizing.mdx

@@ -3,7 +3,9 @@ title: Configuration
 description: This document explains how to customize the Atomic CRM application.
 ---
 
-Developers can customize the Atomic CRM application to suit their business needs. Some of the customizations can be achieved via configuration on the `<CRM>` component, while others require changes to the source code.
+Admin users can already customize the application domain-specific data (e.g., deal stages, note statuses, etc.) via [the Settings page](../user//settings). However, developers can go further and define the defaults for these data by configuring the `<CRM>` component in `src/App.tsx`.
+
+Other customizations require changes to the source code.
 
 ## The `<CRM>` component
 
@@ -26,12 +28,14 @@ import { CRM } from "@/components/atomic-crm/root/CRM";
 
 const App = () => (
     <CRM
-        contactGender={[
-            { value: 'male', label: 'He' },
-            { value: 'female', label: 'She' },
+        companySectors={[
+            { value: 'technology', label: 'Technology' },
+            { value: 'finance', label: 'Finance' },
+        ]}
+        dealCategories={[
+            { value: 'copywriting', label: 'Copywriting' },
+            { value: 'design', label: 'Design' },
         ]}
-        companySectors={['Technology', 'Finance']}
-        dealCategories={['Copywriting', 'Design']}
         dealPipelineStatuses={['won']}
         dealStages={[
             { value: 'opportunity', label: 'Opportunity' },
@@ -44,7 +48,11 @@ const App = () => (
             { value: 'warm', label: 'Warm', color: '#e8cb7d' },
             { value: 'hot', label: 'Hot', color: '#e88b7d' },
         ]}
-        taskTypes={['Call', 'Email', 'Meeting']}
+        taskTypes={[
+            { value: 'call', label: 'Call' },
+            { value: 'email', label: 'Email' },
+            { value: 'meeting', label: 'Meeting' },
+        ]}
     />
 );
 
@@ -55,16 +63,15 @@ export default App;
 
 | Props                   | Description                                                           | Type            |
 |-------------------------|-----------------------------------------------------------------------|-----------------|
-| `contactGender`         | The gender options for contacts used in the application.              | ContactGender[] |
-| `companySectors`        | The list of company sectors used in the application.                  | string[]       |
+| `companySectors`        | The list of company sectors used in the application.                  | LabeledValue[]  |
 | `darkTheme`             | The theme to use when the application is in dark mode.                | RaThemeOptions  |
-| `dealCategories`        | The categories of deals used in the application.                      | string[]        |
+| `dealCategories`        | The categories of deals used in the application.                      | LabeledValue[]  |
 | `dealPipelineStatuses`  | The statuses of deals in the pipeline used in the application         | string[]        |
 | `dealStages`            | The stages of deals used in the application.                          | DealStage[]     |
 | `lightTheme`            | The theme to use when the application is in light mode.               | RaThemeOptions  |
 | `logo`                  | The logo used in the CRM application.                                 | string          |
 | `noteStatuses`          | The statuses of notes used in the application.                        | NoteStatus[]    |
-| `taskTypes`             | The types of tasks used in the application.                           | string[]        |
+| `taskTypes`             | The types of tasks used in the application.                           | LabeledValue[]  |
 | `title`                 | The title of the CRM application.                                     | string          |
 
 ## Disabling Telemetry

doc/src/content/docs/index.mdx

@@ -102,8 +102,16 @@ import { CRM } from "@/components/atomic-crm/root/CRM";
 const App = () => (
     <CRM
         title="Acme CRM"
-        taskTypes={['Call', 'Email', 'Meeting']}
-        dealCategories={['eCommerce', 'SaaS', 'Consulting']}
+        taskTypes={[
+            { value: 'call', label: 'Call' },
+            { value: 'email', label: 'Email' },
+            { value: 'meeting', label: 'Meeting' },
+        ]}
+        dealCategories={[
+            { value: 'ecommerce', label: 'eCommerce' },
+            { value: 'saas', label: 'SaaS' },
+            { value: 'consulting', label: 'Consulting' },
+        ]}
     />
 );
 

doc/src/content/docs/users/settings.mdx

@@ -0,0 +1,29 @@
+---
+title: Application Settings
+description: This document explains how to configure Atomic CRM.
+---
+
+Admin users can configure various aspects of Atomic CRM to tailor the application to their specific needs. This includes customizing the user interface, defining categories, etc. 
+
+## Accessing the Settings Page
+
+If you're logged in as an admin user, you can access the configuration page by clicking on your profile picture in the top right corner of the application and selecting "Settings" from the dropdown menu. 
+
+![Settings Page](../../images/settings.png)
+
+The settings page is organized into different sections, each corresponding to a specific aspect of the application that can be configured. You can navigate between these sections using the left sidebar.
+
+## Changing Application Settings
+
+The Settings page lets you customize:
+
+- The application name and logo
+- The company sectors
+- The stages of the deal pipeline (e.g., prospecting, negotiation, closed-won, etc.)
+- The deal categories
+- The note statuses (hot, cold, etc.)
+- The task types (call, email, etc.)
+
+Once you save your changes, they will be immediately reflected across the application. For example, if you update the deal stages, the new stages will be available for users to drag and drop deals in the Kanban view, and they will also be available when creating or editing a deal.
+
+When updating the name of an existing category (e.g., a deal stage), the new name will be applied to all existing records that belong to that category. For instance, if you rename the "Prospecting" deal stage to "Lead", all deals that were previously in the "Prospecting" stage will now be in the "Lead" stage.

doc/src/content/images/settings.png

@@ -123,6 +123,10 @@
           "path": "src/components/atomic-crm/settings/SettingsPage.tsx",
           "type": "registry:component"
         },
+        {
+          "path": "src/components/atomic-crm/settings/ProfilePage.tsx",
+          "type": "registry:component"
+        },
         {
           "path": "src/components/atomic-crm/sales/index.ts",
           "type": "registry:component"
@@ -147,6 +151,10 @@
           "path": "src/components/atomic-crm/sales/SaleName.tsx",
           "type": "registry:component"
         },
+        {
+          "path": "src/components/atomic-crm/root/useConfigurationLoader.ts",
+          "type": "registry:component"
+        },
         {
           "path": "src/components/atomic-crm/root/i18nProvider.tsx",
           "type": "registry:component"
@@ -199,18 +207,10 @@
           "path": "src/components/atomic-crm/providers/fakerest/internal/transformOrFilter.ts",
           "type": "registry:component"
         },
-        {
-          "path": "src/components/atomic-crm/providers/fakerest/internal/transformOrFilter.spec.ts",
-          "type": "registry:component"
-        },
         {
           "path": "src/components/atomic-crm/providers/fakerest/internal/transformInFilter.ts",
           "type": "registry:component"
         },
-        {
-          "path": "src/components/atomic-crm/providers/fakerest/internal/transformInFilter.spec.ts",
-          "type": "registry:component"
-        },
         {
           "path": "src/components/atomic-crm/providers/fakerest/internal/transformFilter.ts",
           "type": "registry:component"
@@ -219,18 +219,10 @@
           "path": "src/components/atomic-crm/providers/fakerest/internal/transformContainsFilter.ts",
           "type": "registry:component"
         },
-        {
-          "path": "src/components/atomic-crm/providers/fakerest/internal/transformContainsFilter.spec.ts",
-          "type": "registry:component"
-        },
         {
           "path": "src/components/atomic-crm/providers/fakerest/internal/supabaseAdapter.ts",
           "type": "registry:component"
         },
-        {
-          "path": "src/components/atomic-crm/providers/fakerest/internal/supabaseAdapter.spec.ts",
-          "type": "registry:component"
-        },
         {
           "path": "src/components/atomic-crm/providers/fakerest/internal/listParser.ts",
           "type": "registry:component"
@@ -291,18 +283,10 @@
           "path": "src/components/atomic-crm/providers/commons/getContactAvatar.ts",
           "type": "registry:component"
         },
-        {
-          "path": "src/components/atomic-crm/providers/commons/getContactAvatar.spec.ts",
-          "type": "registry:component"
-        },
         {
           "path": "src/components/atomic-crm/providers/commons/getCompanyAvatar.ts",
           "type": "registry:component"
         },
-        {
-          "path": "src/components/atomic-crm/providers/commons/getCompanyAvatar.spec.ts",
-          "type": "registry:component"
-        },
         {
           "path": "src/components/atomic-crm/providers/commons/canAccess.ts",
           "type": "registry:component"
@@ -631,6 +615,10 @@
           "path": "src/components/atomic-crm/contacts/exportToVCard.ts",
           "type": "registry:component"
         },
+        {
+          "path": "src/components/atomic-crm/contacts/contactGender.ts",
+          "type": "registry:component"
+        },
         {
           "path": "src/components/atomic-crm/contacts/TagsListEdit.tsx",
           "type": "registry:component"

registry.json

@@ -17,11 +17,15 @@ const excludedHooks = [
   "useSupportCreateSuggestion.tsx",
 ];
 
+const testFilePattern = "**/*.{test,spec}.*";
+
 const atomicCrmComponents = globSync(
   path.join(atomicCrmComponentsPath, "**", "*.ts*"),
+  { ignore: [testFilePattern] },
 );
 const supabaseComponents = globSync(
   path.join(supabaseComponentsPath, "**", "*.ts*"),
+  { ignore: [testFilePattern] },
 );
 const hooks = globSync(path.join(hooksPath, "**", "*.ts*")).filter((hook) => {
   return !excludedHooks.includes(path.basename(hook));

scripts/generate-registry.mjs

@@ -4,7 +4,6 @@ import { CRM } from "@/components/atomic-crm/root/CRM";
  * Application entry point
  *
  * Customize Atomic CRM by passing props to the CRM component:
- *  - contactGender
  *  - companySectors
  *  - darkTheme
  *  - dealCategories

src/App.tsx

@@ -10,6 +10,7 @@ import { UrlField } from "@/components/admin/url-field";
 import { SelectField } from "@/components/admin/select-field";
 
 import { AsideSection } from "../misc/AsideSection";
+import { useConfigurationContext } from "../root/ConfigurationContext";
 import { SaleName } from "../sales/SaleName";
 import type { Company } from "../types";
 import { sizes } from "./sizes";
@@ -97,17 +98,18 @@ export const CompanyInfo = ({ record }: { record: Company }) => {
 };
 
 export const ContextInfo = ({ record }: { record: Company }) => {
+  const { companySectors } = useConfigurationContext();
   if (!record.revenue && !record.id) {
     return null;
   }
 
+  const sectorLabel = companySectors.find(
+    (s) => s.value === record.sector,
+  )?.label;
+
   return (
     <AsideSection title="Context">
-      {record.sector && (
-        <span>
-          Sector: <TextField source="sector" />
-        </span>
-      )}
+      {sectorLabel && <span>Sector: {sectorLabel}</span>}
       {record.size && (
         <span>
           Size: <SelectField source="size" choices={sizes} />

src/components/atomic-crm/companies/CompanyAside.tsx

@@ -5,14 +5,20 @@ import { ReferenceManyField } from "@/components/admin/reference-many-field";
 import { Card } from "@/components/ui/card";
 
 import { Avatar as ContactAvatar } from "../contacts/Avatar";
+import { useConfigurationContext } from "../root/ConfigurationContext";
 import type { Company } from "../types";
 import { CompanyAvatar } from "./CompanyAvatar";
 
 export const CompanyCard = (props: { record?: Company }) => {
   const createPath = useCreatePath();
   const record = useRecordContext<Company>(props);
+  const { companySectors } = useConfigurationContext();
   if (!record) return null;
 
+  const sectorLabel = companySectors.find(
+    (s) => s.value === record.sector,
+  )?.label;
+
   return (
     <Link
       to={createPath({
@@ -27,7 +33,7 @@ export const CompanyCard = (props: { record?: Company }) => {
           <CompanyAvatar />
           <div className="text-center mt-1">
             <h6 className="text-sm font-medium">{record.name}</h6>
-            <p className="text-xs text-muted-foreground">{record.sector}</p>
+            <p className="text-xs text-muted-foreground">{sectorLabel}</p>
           </div>
         </div>
         <div className="flex flex-row w-full justify-between gap-2">