Add Settings page

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.

registry.json

@@ -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"
@@ -627,6 +635,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"

src/App.tsx

@@ -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/components/atomic-crm/companies/CompanyAside.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/CompanyCard.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">

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

@@ -90,10 +90,9 @@ const CompanyContextInputs = () => {
       <h6 className="text-lg font-semibold">Context</h6>
       <SelectInput
         source="sector"
-        choices={companySectors.map((sector) => ({
-          id: sector,
-          name: sector,
-        }))}
+        choices={companySectors}
+        optionText="label"
+        optionValue="value"
         helperText={false}
       />
       <SelectInput source="size" choices={sizes} helperText={false} />

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

@@ -10,10 +10,6 @@ import { sizes } from "./sizes";
 export const CompanyListFilter = () => {
   const { identity } = useGetIdentity();
   const { companySectors } = useConfigurationContext();
-  const sectors = companySectors.map((sector) => ({
-    id: sector,
-    name: sector,
-  }));
   return (
     <div className="w-52 min-w-52 flex flex-col gap-8">
       <FilterLiveForm>
@@ -32,12 +28,12 @@ export const CompanyListFilter = () => {
       </FilterCategory>
 
       <FilterCategory icon={<Truck className="h-4 w-4" />} label="Sector">
-        {sectors.map((sector) => (
+        {companySectors.map((sector) => (
           <ToggleFilterButton
             className="w-full justify-between"
-            label={sector.name}
-            key={sector.name}
-            value={{ sector: sector.id }}
+            label={sector.label}
+            key={sector.value}
+            value={{ sector: sector.value }}
           />
         ))}
       </FilterCategory>

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

@@ -248,7 +248,7 @@ const CreateRelatedContactButton = () => {
 
 const DealsIterator = () => {
   const { data: deals, error, isPending } = useListContext<Deal>();
-  const { dealStages } = useConfigurationContext();
+  const { dealStages, dealCategories } = useConfigurationContext();
   if (isPending || error) return null;
 
   const now = Date.now();
@@ -272,7 +272,9 @@ const DealsIterator = () => {
                     currencyDisplay: "narrowSymbol",
                     minimumSignificantDigits: 3,
                   })}
-                  {deal.category ? `, ${deal.category}` : ""}
+                  {deal.category
+                    ? `, ${dealCategories.find((c) => c.value === deal.category)?.label ?? deal.category}`
+                    : ""}
                 </div>
               </div>
               <div className="text-right">

src/components/atomic-crm/contacts/ContactInputs.tsx

@@ -12,7 +12,7 @@ import { ArrayInput } from "@/components/admin/array-input";
 import { SimpleFormIterator } from "@/components/admin/simple-form-iterator";
 
 import { isLinkedinUrl } from "../misc/isLinkedInUrl";
-import { useConfigurationContext } from "../root/ConfigurationContext";
+import { contactGender } from "./contactGender";
 import type { Sale } from "../types";
 import { Avatar } from "./Avatar";
 import { AutocompleteCompanyInput } from "../companies/AutocompleteCompanyInput.tsx";
@@ -43,7 +43,6 @@ export const ContactInputs = () => {
 };
 
 const ContactIdentityInputs = () => {
-  const { contactGender } = useConfigurationContext();
   return (
     <div className="flex flex-col gap-4">
       <h6 className="text-lg font-semibold">Identity</h6>

src/components/atomic-crm/contacts/ContactPersonalInfo.tsx

@@ -5,11 +5,10 @@ import { TextField } from "@/components/admin/text-field";
 import { EmailField } from "@/components/admin/email-field";
 import { Mail, Phone, Linkedin } from "lucide-react";
 import type { ReactNode } from "react";
-import { useConfigurationContext } from "../root/ConfigurationContext";
+import { contactGender } from "./contactGender";
 import type { Contact } from "../types";
 
 export const ContactPersonalInfo = () => {
-  const { contactGender } = useConfigurationContext();
   const record = useRecordContext<Contact>();
 
   if (!record) return null;

src/components/atomic-crm/contacts/contactGender.ts

@@ -0,0 +1,9 @@
+import { Mars, NonBinary, Venus } from "lucide-react";
+
+import type { ContactGender } from "../types";
+
+export const contactGender: ContactGender[] = [
+  { value: "male", label: "He/Him", icon: Mars },
+  { value: "female", label: "She/Her", icon: Venus },
+  { value: "nonbinary", label: "They/Them", icon: NonBinary },
+];

src/components/atomic-crm/deals/DealCard.tsx

@@ -4,6 +4,7 @@ import { ReferenceField } from "@/components/admin/reference-field";
 import { Card, CardContent } from "@/components/ui/card";
 
 import { CompanyAvatar } from "../companies/CompanyAvatar";
+import { useConfigurationContext } from "../root/ConfigurationContext";
 import type { Deal } from "../types";
 
 export const DealCard = ({ deal, index }: { deal: Deal; index: number }) => {
@@ -27,7 +28,11 @@ export const DealCardContent = ({
   snapshot?: any;
   deal: Deal;
 }) => {
+  const { dealCategories } = useConfigurationContext();
   const redirect = useRedirect();
+  const categoryLabel = dealCategories.find(
+    (c) => c.value === deal.category,
+  )?.label;
   const handleClick = () => {
     redirect(`/deals/${deal.id}/show`, undefined, undefined, undefined, {
       _scrollToTop: false,
@@ -68,7 +73,7 @@ export const DealCardContent = ({
                 currencyDisplay: "narrowSymbol",
                 minimumSignificantDigits: 3,
               })}
-              {deal.category ? `, ${deal.category}` : ""}
+              {categoryLabel ? `, ${categoryLabel}` : ""}
             </p>
           </div>
         </CardContent>

src/components/atomic-crm/deals/DealInputs.tsx

@@ -70,10 +70,9 @@ const DealMiscInputs = () => {
       <SelectInput
         source="category"
         label="Category"
-        choices={dealCategories.map((type) => ({
-          id: type,
-          name: type,
-        }))}
+        choices={dealCategories}
+        optionText="label"
+        optionValue="value"
         helperText={false}
       />
       <NumberInput
@@ -90,10 +89,9 @@ const DealMiscInputs = () => {
       />
       <SelectInput
         source="stage"
-        choices={dealStages.map((stage) => ({
-          id: stage.value,
-          name: stage.label,
-        }))}
+        choices={dealStages}
+        optionText="label"
+        optionValue="value"
         defaultValue="opportunity"
         helperText={false}
         validate={required()}

src/components/atomic-crm/deals/DealList.tsx

@@ -33,8 +33,9 @@ const DealList = () => {
     <SelectInput
       source="category"
       emptyText="Category"
-      label={false}
-      choices={dealCategories.map((type) => ({ id: type, name: type }))}
+      choices={dealCategories}
+      optionText="label"
+      optionValue="value"
     />,
     <OnlyMineInput source="sales_id" alwaysOn />,
   ];