Atomic CRM

https://marmelab.com/atomic-crm/doc/
Admin
Atomic CRM is a customizable, open-source customer relationship management system built with React...
Tokens:12,460
Snippets:174
Trust Score:9.9
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install dependencies

Source: https://marmelab.com/atomic-crm/doc

Install the required Node.js packages for the project.

```bash
npm install
```

--------------------------------

### Start local development services

Source: https://marmelab.com/atomic-crm/doc

Commands to initialize the Supabase database and the Vite development server.

```bash
npx supabase start
```

```bash
npm run dev
```

--------------------------------

### Start application with FakeRest

Source: https://marmelab.com/atomic-crm/doc/developers/data-providers

Command to launch the development server using the FakeRest data provider.

```bash
npm run dev:demo
```

--------------------------------

### Example - Forwarding a response to the CRM

Source: https://marmelab.com/atomic-crm/doc/users/inbound-email

An example of forwarding an email thread to the CRM address, allowing the system to parse the original sender and log the content as a note.

```text

From: Jane Doe <jane.doe@marmelab.com>
To: xxxxxxx@inbound.postmarkapp.com
Subject: Fwd: I will not be able to attend the meeting


---------- Forwarded message ----------
From: Kim Hegmann <kim.hegmann@acme.com>
To: Jane Doe <jane.doe@marmelab.com>
Subject: I will not be able to attend the meeting


Hi Jane,
I am sorry but I will not be able to attend the meeting we scheduled.
Can we reschedule it for the week after?

```

```text

I will not be able to attend the meeting


Hi Jane,
I am sorry but I will not be able to attend the meeting we scheduled.
Can we reschedule it for the week after?

```

--------------------------------

### Example - Copying an email I sent to the CRM

Source: https://marmelab.com/atomic-crm/doc/users/inbound-email

An example of an email sent with the CRM address in the CC field, resulting in contact creation and note logging.

```text

From: Jane Doe <jane.doe@marmelab.com>
To: Kim Hegmann <kim.gegmann@acme.com>
Cc: xxxxxxx@inbound.postmarkapp.com
Subject: Meeting with Kim Hegmann


Hi Kim,
I would like to schedule a meeting with you next week. Please let me know your availability.

```

```text

Meeting with Kim Hegmann


Hi Kim,
I would like to schedule a meeting with you next week. Please let me know your availability.

```

--------------------------------

### Initiate a feature request

Source: https://marmelab.com/atomic-crm/doc/developers/agent-harness

Start a Claude Code session and provide a natural language prompt to trigger the agent harness.

```text
Create a new field for lost deal reasons.


# or


Build a CRM for my company Acme, a recruiting agency.
```

--------------------------------

### Select Specific Fields

Source: https://marmelab.com/atomic-crm/doc/developers/atomic-crm-api

Example of limiting the returned fields in a request using the select parameter.

```http
GET /rest/v1/contacts?select=last_name,first_name
```

--------------------------------

### GET /auth/v1/user

Source: https://marmelab.com/atomic-crm/doc/developers/atomic-crm-api

Retrieves information for the authenticated user.

```APIDOC
## GET /auth/v1/user

### Description
Retrieves information for the authenticated user.

### Method
GET

### Endpoint
/auth/v1/user
```

--------------------------------

### Configure FakeRest data provider in App.tsx

Source: https://marmelab.com/atomic-crm/doc/developers/data-providers

Manual setup of the FakeRest provider by importing and passing it to the CRM component.

```typescript
// in App.tsx
import { CRM } from "@/components/atomic-crm/root/CRM";
import { authProvider, dataProvider } from "@/components/atomic-crm/providers/fakerest";


const App = () => (
    <CRM />
    <CRM dataProvider={dataProvider} authProvider={authProvider} />
);


export default App;
```

--------------------------------

### Filter Tasks by Date

Source: https://marmelab.com/atomic-crm/doc/developers/atomic-crm-api

Example of filtering tasks that are due after a specific date using the greater-than operator.

```http
GET /rest/v1/tasks?due_date=gt.2024-01-01
```

--------------------------------

### Filter Contacts by Status

Source: https://marmelab.com/atomic-crm/doc/developers/atomic-crm-api

Example of filtering the contacts list using a status equality parameter.

```http
GET /rest/v1/contacts?status=eq.hot
```

--------------------------------

### GET /rest/v1/contacts

Source: https://marmelab.com/atomic-crm/doc/developers/atomic-crm-api

Retrieves a list of contacts from the CRM.

```APIDOC
## GET /rest/v1/contacts

### Description
Fetches the list of contacts stored in the CRM.

### Method
GET

### Endpoint
https://<instance_url>/rest/v1/contacts

### Parameters
#### Headers
- **apikey** (string) - Required - The Supabase publishable API key
- **Authorization** (string) - Required - Bearer <your_jwt_token>
```

--------------------------------

### Initialize remote Supabase instance

Source: https://marmelab.com/atomic-crm/doc/developers/supabase-configuration

Run this command to create a new Supabase instance, apply migrations, and deploy edge functions.

```bash
make supabase-remote-init
```

--------------------------------

### Build frontend bundle

Source: https://marmelab.com/atomic-crm/doc

Generates the static HTML, CSS, and JS files in the dist directory.

```bash
npm run build
```

--------------------------------

### Configure environment variables

Source: https://marmelab.com/atomic-crm/doc/developers/supabase-configuration

Define the required Supabase credentials in the .env.production.local file.

```text
VITE_SUPABASE_URL=<instance_url>
VITE_SB_PUBLISHABLE_KEY=<instance_publishable_key>
```

--------------------------------

### Build Frontend Bundle

Source: https://marmelab.com/atomic-crm/doc/developers/deploy

Generates the static application files in the dist directory for deployment to a CDN.

```bash
make build
```

--------------------------------

### POST /auth/v1/signup

Source: https://marmelab.com/atomic-crm/doc/developers/atomic-crm-api

Creates a new user and returns a JWT token.

```APIDOC
## POST /auth/v1/signup

### Description
Creates a new user and returns a JWT token.

### Method
POST

### Endpoint
/auth/v1/signup
```

--------------------------------

### Push migrations and deploy functions

Source: https://marmelab.com/atomic-crm/doc/developers/supabase-configuration

Apply database migrations and deploy edge functions to the linked Supabase instance.

```bash
npx supabase db push
npx supabase functions deploy
```

--------------------------------

### Register SSO Provider via CLI

Source: https://marmelab.com/atomic-crm/doc/developers/sso

Use the Supabase CLI to register the SAML provider with the metadata and mapping files.

```bash
npx supabase sso add --type saml --project-ref <your-project> \
  --metadata-file /path/to/saml/metadata.xml \
  --attribute-mapping-file /path/to/mapping.json \
  --domains company.com
```

--------------------------------

### Log in to Supabase CLI

Source: https://marmelab.com/atomic-crm/doc/developers/supabase-configuration

Authenticate your local environment with your Supabase account.

```bash
npx supabase login
```

--------------------------------

### Link local project to Supabase

Source: https://marmelab.com/atomic-crm/doc/developers/supabase-configuration

Connect the local project to an existing Supabase instance using the project reference.

```bash
npx supabase link --project-ref ********************
```

--------------------------------

### Test Production Mode Locally

Source: https://marmelab.com/atomic-crm/doc/developers/deploy

Runs the local frontend against the remote Supabase instance with production settings. This command applies migrations and deploys edge functions.

```bash
make prod-start
```

--------------------------------

### Deploy Frontend to GitHub Pages

Source: https://marmelab.com/atomic-crm/doc/developers/deploy

Deploys the built frontend application to GitHub Pages.

```bash
npm run ghpages:deploy
```

--------------------------------

### Monitor harness sessions

Source: https://marmelab.com/atomic-crm/doc/developers/agent-harness

Use Makefile commands to track agent activity, hooks, and ticket statuses.

```makefile
make watch                  # live monitor of the most recent session
make monitor                # one-shot summary of the most recent session
make monitor SESSION=<id>   # summary of a specific session
make sessions               # list known sessions, newest first
```

--------------------------------

### Apply local migrations

Source: https://marmelab.com/atomic-crm/doc/developers/migrations

Applies pending migration files to the local database instance.

```bash
npx supabase migration up --local
```

--------------------------------

### Deploy Supabase Backend

Source: https://marmelab.com/atomic-crm/doc/developers/deploy

Deploys backend changes including Postgres database, REST API, and edge functions to the configured Supabase instance.

```bash
make supabase-deploy
```

--------------------------------

### Clone the Atomic CRM repository

Source: https://marmelab.com/atomic-crm/doc

Download the project source code to your local machine.

```bash
git clone https://github.com/[username]/atomic-crm.git
cd atomic-crm
```

--------------------------------

### Configure SSO Environment Variables

Source: https://marmelab.com/atomic-crm/doc/developers/sso

Set the required environment variables in your .env file to enable SSO and optionally disable standard email/password authentication.

```text
...
VITE_GOOGLE_WORKPLACE_DOMAIN=company.com
```

```text
...
VITE_DISABLE_EMAIL_PASSWORD_AUTHENTICATION=true
```

--------------------------------

### Generate a local migration

Source: https://marmelab.com/atomic-crm/doc/developers/migrations

Compares schema files against the local database to create a new migration file.

```bash
npx supabase db diff --local -f <migration_name>
```

--------------------------------

### Initialize the CRM component

Source: https://marmelab.com/atomic-crm/doc/developers/customizing

The default implementation of the CRM component within the application entry point.

```typescript

import { CRM } from '@/components/atomic-crm/root/CRM';


const App = () => <CRM />;


export default App;

```

--------------------------------

### Reset the database

Source: https://marmelab.com/atomic-crm/doc

Commands to stop and restart the local Supabase instance.

```bash
npx supabase stop --no-backup
npx supabase start
```

--------------------------------

### Configure Supabase Secrets via CLI

Source: https://marmelab.com/atomic-crm/doc/developers/inbound-email-configuration

Set the required environment variables in your remote Supabase project using the Supabase CLI.

```bash
npx supabase secrets set POSTMARK_WEBHOOK_USER=<user>
npx supabase secrets set POSTMARK_WEBHOOK_PASSWORD=<password>
npx supabase secrets set POSTMARK_WEBHOOK_AUTHORIZED_IPS=<comma-separated list of IPs>
npx supabase secrets set VITE_INBOUND_EMAIL=<your-postmark-inbound-email>
npx supabase secrets set VITE_ATTACHMENTS_BUCKET=attachments
```

--------------------------------

### Deploy Application Updates

Source: https://marmelab.com/atomic-crm/doc/developers/deploy

Applies migrations, updates edge functions, and pushes the built application to the gh-pages branch.

```bash
make prod-deploy
```

--------------------------------

### Set Local Environment Variable

Source: https://marmelab.com/atomic-crm/doc/developers/inbound-email-configuration

Store the Postmark inbound email address in the project's .env file for client-side access.

```text
VITE_INBOUND_EMAIL=xxxxxxxxxxx@inbound.postmarkapp.com
```

--------------------------------

### Generate database migration

Source: https://marmelab.com/atomic-crm/doc/developers/custom-fields

Terminal command to create a migration file for schema changes using the Supabase CLI.

```bash
npx supabase db diff -f create_referred_by
```

--------------------------------

### Verify schema consistency

Source: https://marmelab.com/atomic-crm/doc/developers/migrations

Checks for remaining differences between schema files and the local database.

```bash
npx supabase db diff --local
```

--------------------------------

### Configure GitHub Actions Secrets

Source: https://marmelab.com/atomic-crm/doc/developers/inbound-email-configuration

Define the necessary secrets in your GitHub repository settings for automated deployments.

```text
POSTMARK_WEBHOOK_USER=<user>
POSTMARK_WEBHOOK_PASSWORD=<password>
POSTMARK_WEBHOOK_AUTHORIZED_IPS=<comma-separated list of IPs>
VITE_INBOUND_EMAIL=<your-postmark-inbound-email>
```

--------------------------------

### Push migrations to remote

Source: https://marmelab.com/atomic-crm/doc/developers/migrations

Applies pending migrations from the local history to the remote Supabase database.

```bash
npx supabase db push
```

--------------------------------

### POST /auth/v1/token

Source: https://marmelab.com/atomic-crm/doc/developers/atomic-crm-api

Authenticates a user and returns a JWT token.

```APIDOC
## POST /auth/v1/token

### Description
Authenticates a user and returns a JWT token. Multiple grant types are supported.

### Method
POST

### Endpoint
/auth/v1/token
```

--------------------------------

### Configure and Run Claude Code MCP

Source: https://marmelab.com/atomic-crm/doc/users/mcp-server

Commands to register the Atomic CRM MCP server, launch the Claude Code interface, and verify server status.

```bash
claude mcp add atomic-crm --transport http {MCP Server URL}
```

```bash
claude
```

```bash
/mcp
```

--------------------------------

### Inspect harness changes

Source: https://marmelab.com/atomic-crm/doc/developers/agent-harness

Use this command within a Claude Code session to view the net changes produced by the harness.

```text
/harness-diff
```

--------------------------------

### Authenticate a user with cURL

Source: https://marmelab.com/atomic-crm/doc/developers/atomic-crm-api

Use the /auth/v1/token endpoint to exchange user credentials for a JWT token.

```bash
curl -X POST 'https://<instance_url>/auth/v1/token?grant_type=password' \
  -H 'Content-Type: application/json' \
  -H 'apikey: <your_api_key>' \
  -d '{
    "email": "user@email.com",
    "password": "user_password"
  }'
```

--------------------------------

### Configure GitHub Actions Secrets

Source: https://marmelab.com/atomic-crm/doc/developers/deploy

Required environment variables and secrets for enabling continuous integration and delivery workflows.

```text
SUPABASE_ACCESS_TOKEN: Your personal access token, can be found at https://supabase.com/dashboard/account/tokens
SUPABASE_DB_PASSWORD: Your supabase database password
SUPABASE_PROJECT_ID: Your supabase project id
SUPABASE_URL: Your supabase project URL
SB_PUBLISHABLE_KEY: Your supabase project publishable key
POSTMARK_WEBHOOK_USER: User configured in Postmark to secure the webhook
POSTMARK_WEBHOOK_PASSWORD: Password configured in Postmark to secure the webhook
POSTMARK_WEBHOOK_AUTHORIZED_IPS: List of IPs (comma separated) authorized to send requests to the Postmark webhook
VITE_INBOUND_EMAIL: The email address configured in Postmark to receive inbound emails
VITE_ATTACHMENTS_BUCKET: The name of the bucket used to store attachments. Optional default to `attachments`
```

--------------------------------

### Pull remote schema

Source: https://marmelab.com/atomic-crm/doc/developers/migrations

Syncs the local environment with the remote database state by generating a new migration.

```bash
npx supabase db pull
```

--------------------------------

### Update contacts_summary view

Source: https://marmelab.com/atomic-crm/doc/developers/custom-fields

SQL query to drop and recreate the contacts_summary view to include new fields from the contacts table.

```sql
drop view "public"."contacts_summary";
create view "public"."contacts_summary"
    with (security_invoker=on)
    as
select
    co.*,
    c.name as company_name,
    count(distinct t.id) as nb_tasks
from
    "public"."contacts" co
left join
    "public"."tasks" t on co.id = t.contact_id
left join
    "public"."companies" c on co.company_id = c.id
group by
    co.id, c.name;
```

--------------------------------

### Dump local database schema

Source: https://marmelab.com/atomic-crm/doc/developers/migrations

Exports the current local database schema to inspect or sync with schema files.

```bash
npx supabase db dump --local --schema public
```

--------------------------------

### Set Supabase secrets

Source: https://marmelab.com/atomic-crm/doc/developers/supabase-configuration

Configure the publishable key secret for the remote Supabase instance.

```bash
npx supabase secrets set SB_PUBLISHABLE_KEY=<publishable_key>
```

--------------------------------

### Define SAML Attribute Mapping

Source: https://marmelab.com/atomic-crm/doc/developers/sso

Create a JSON file to map identity provider attributes to Atomic CRM user fields.

```json
{
  "keys": {
    "email": {
      "name": "email"
    },
    "first_name": {
      "name": "first_name"
    },
    "last_name": {
      "name": "last_name"
    }
  }
}
```

--------------------------------

### Add a note to a contact via JavaScript

Source: https://marmelab.com/atomic-crm/doc/developers/atomic-crm-api

Authenticates a user, retrieves a contact by email, and creates a new note record using the REST API.

```javascript
async function addMessageAsNoteToContact({
  message,
  email,
  password,
  apikey
}) {
  // Step 1: Authenticate the user of the widget and get a JWT token
  const authResponse = await fetch('https://<instance_url>/auth/v1/token?grant_type=password', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', apikey },
    body: JSON.stringify({ email, password }),
  });
  const authData = await authResponse.json();
  const jwtToken = authData.access_token;


  // Step 2: Find the contact by email
  const contactsResponse = await fetch(
    `https://<instance_url>/rest/v1/contacts_summary?email_fts=ilike.*${
      encodeURIComponent(message.email)
    }*`,
    {
      headers: {
        apikey,
        Authorization: `Bearer ${jwtToken}`
      },
    }
  );
  const contacts = await contactsResponse.json();


  if (contacts.length === 0) {
    console.log(`No contact found with email ${message.email}`);
    return;
  }


  const contact = contacts[0];


  // Step 3: Add a note to this contact with the content of the message
  await fetch('https://<instance_url>/rest/v1/contact_notes', {
    method: 'POST',
    headers: {
      apikey,
      Authorization: `Bearer ${jwtToken}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      contact_id: contact.id,
      text: message.content,
    }),
  });


  console.log(
    `Added note to contact ${contact.last_name} with email ${message.email}`
  );
}
```

--------------------------------

### Retrieve contacts with cURL

Source: https://marmelab.com/atomic-crm/doc/developers/atomic-crm-api

Fetch the list of contacts by providing the API key and the JWT token in the Authorization header.

```bash
curl -X GET 'https://<instance_url>/rest/v1/contacts' \
  -H 'Content-Type: application/json' \
  -H 'apikey: <your_publishable_api_key>' \
  -H 'Authorization: Bearer <your_jwt_token>'
```

--------------------------------

### POST /auth/v1/token

Source: https://marmelab.com/atomic-crm/doc/developers/atomic-crm-api

Authenticates a user and retrieves a JWT token for accessing protected API endpoints.

```APIDOC
## POST /auth/v1/token

### Description
Authenticates a user with email and password to obtain a JWT token.

### Method
POST

### Endpoint
https://<instance_url>/auth/v1/token?grant_type=password

### Request Body
- **email** (string) - Required - User email address
- **password** (string) - Required - User password

### Request Example
{
  "email": "user@email.com",
  "password": "user_password"
}
```

--------------------------------

### Access OpenAPI Specification via cURL

Source: https://marmelab.com/atomic-crm/doc/developers/atomic-crm-api

Use this command to retrieve the OpenAPI specification, requiring both an API key and a JWT token.

```bash
curl https://<instance_url>/rest/v1/ \
  -H 'apikey: <your_publishable_api_key>' \
  -H 'Authorization: Bearer <your_jwt_token>'
```

--------------------------------

### Expected CSV Import Format

Source: https://marmelab.com/atomic-crm/doc/users/import-contacts

The structure required for CSV files when importing contacts into the system.

```csv
first_name,last_name,gender,title,background,first_seen,last_seen,has_newsletter,status,tags,linkedin_url,company,email_work,email_home,email_other,phone_work,phone_home,phone_other
John,Doe,male,Sales Executive,,2024-07-01T00:00:00+00:00,2024-07-01T11:54:49.95+00:00,false,in-contract,"influencer, developer",https://www.linkedin.com/in/johndoe,Acme,john@doe.example,john.doe@gmail.com,jdoe@caramail.com,659-980-2015,740.645.3807,(446) 758-2122
Jane,Doe,female,Designer,,2024-07-01T00:00:00+00:00,2024-07-01T11:54:49.95+00:00,false,in-contract,"UI, design",https://www.linkedin.com/in/janedoe,Acme,,,jane@doe.example,659-980-2020,740.647.3802,
```

--------------------------------

### Opt out of the harness

Source: https://marmelab.com/atomic-crm/doc/developers/agent-harness

Append specific keywords to your request to prevent the agent harness from being triggered.

```text
Create a new field for lost deal reasons #no-harness


## or


Create a new field for lost deal reasons without the agent team


## or


Create a new field for lost deal reasons, skipping the agent team
```

--------------------------------

### POST /auth/v1/logout

Source: https://marmelab.com/atomic-crm/doc/developers/atomic-crm-api

Logs out the authenticated user.

```APIDOC
## POST /auth/v1/logout

### Description
Logs out the authenticated user.

### Method
POST

### Endpoint
/auth/v1/logout
```

--------------------------------

### Strictly Type-Check Message Catalogs

Source: https://marmelab.com/atomic-crm/doc/developers/customizing

Use the CrmMessages type to ensure all keys are present at compile time for in-repo locales.

```typescript
import type { CrmMessages } from './englishCrmMessages';


export const frenchCrmMessages = {
    crm: {
        // ...
    },
} satisfies CrmMessages;
```

--------------------------------

### Customize CRM Configuration Props

Source: https://marmelab.com/atomic-crm/doc

Configure application domain settings such as the app title, task types, and deal categories by passing props to the CRM component.

```typescript

import { CRM } from "@/components/atomic-crm/root/CRM";


const App = () => (
    <CRM
        title="Acme CRM"
        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' },
        ]}
    />
);


export default App;

```

--------------------------------

### Revert harness changes

Source: https://marmelab.com/atomic-crm/doc/developers/agent-harness

Undo changes merged by the current session and clean up temporary branches and worktrees.

```text
/harness-revert
```

--------------------------------

### <CRM> Component Props

Source: https://marmelab.com/atomic-crm/doc/developers/customizing

The <CRM> component accepts various props to configure the application's domain data, branding, and themes.

```APIDOC
## <CRM> Component Props

### Description
The <CRM> component is the root of the application. It accepts props to define domain-specific data (like deal stages and note statuses) and visual settings (like themes and logos).

### Props
- **companySectors** (LabeledValue[]) - Optional - The list of company sectors used in the application.
- **currency** (string) - Optional - The ISO 4217 currency code used to format monetary values (default: "USD").
- **darkModeLogo** (string) - Optional - Logo shown in dark mode and on auth pages. Use an imported asset, absolute URL, or data URI.
- **darkTheme** (RaThemeOptions) - Optional - The theme to use when the application is in dark mode.
- **dealCategories** (LabeledValue[]) - Optional - The categories of deals used in the application.
- **dealPipelineStatuses** (string[]) - Optional - The statuses of deals in the pipeline used in the application.
- **dealStages** (DealStage[]) - Optional - The stages of deals used in the application.
- **lightModeLogo** (string) - Optional - Logo shown in light mode. Use an imported asset, absolute URL, or data URI.
- **lightTheme** (RaThemeOptions) - Optional - The theme to use when the application is in light mode.
- **noteStatuses** (NoteStatus[]) - Optional - The statuses of notes used in the application.
- **taskTypes** (LabeledValue[]) - Optional - The types of tasks used in the application.
- **title** (string) - Optional - The title of the CRM application.
```

--------------------------------

### Partially Type-Check Message Catalogs

Source: https://marmelab.com/atomic-crm/doc/developers/customizing

Use PartialCrmMessages for external or custom locales to allow incremental translations with English fallbacks.

```typescript
import type { PartialCrmMessages } from './englishCrmMessages';


const polishMessages: PartialCrmMessages = {
    crm: {
        // only override what you need
    },
};
```

--------------------------------

### Customize CRM domain data

Source: https://marmelab.com/atomic-crm/doc/developers/customizing

Configure application-specific data such as sectors, deal stages, and note statuses by passing props to the CRM component.

```typescript

import { CRM } from '@/components/atomic-crm/root/CRM';


const App = () => (
    <CRM
        companySectors={[
            { value: 'technology', label: 'Technology' },
            { value: 'finance', label: 'Finance' },
        ]}
        dealCategories={[
            { value: 'copywriting', label: 'Copywriting' },
            { value: 'design', label: 'Design' },
        ]}
        dealPipelineStatuses={['won']}
        dealStages={[
            { value: 'opportunity', label: 'Opportunity' },
            { value: 'proposal-sent', label: 'Proposal Sent' },
            { value: 'won', label: 'Won' },
            { value: 'lost', label: 'Lost' },
        ]}
        noteStatuses={[
            { value: 'cold', label: 'Cold', color: '#7dbde8' },
            { value: 'warm', label: 'Warm', color: '#e8cb7d' },
            { value: 'hot', label: 'Hot', color: '#e88b7d' },
        ]}
        taskTypes={[
            { value: 'call', label: 'Call' },
            { value: 'email', label: 'Email' },
            { value: 'meeting', label: 'Meeting' },
        ]}
    />
);


export default App;

```

--------------------------------

### JSON Import Data Format

Source: https://marmelab.com/atomic-crm/doc/users/import-data

The expected structure for the JSON file used to import contacts, companies, and related entities into Atomic CRM.

```json
{
  "sales": [
    {
      "id": 123,
      "first_name": "Barney",
      "last_name": "Calhoun",
      "email": "barney.calhoun@blackmesa.com"
    }
  ],
  "companies": [
    {
      "id": 234,
      "name": "Black Mesa Research Facility",
      "sector": "industrials",
      "size": 250,
      "website": "https://blackmesa.com",
      "linkedin_url": "https://linkedin.com/company/black-mesa",
      "phone_number": "+1-505-555-0001",
      "revenue": "$500M",
      "tax_identifier": "12-3456789"
    },
    {
      "id": 345,
      "name": "Aperture Science",
      "description": "We do what we must because we can",
      "city": "Cleveland",
      "country": "USA",
      "address": "Deep underground facility",
      "zipcode": "99999",
      "state_abbr": "OH",
      "sector": "industrials",
      "size": 500,
      "linkedin_url": "https://linkedin.com/company/aperture-science",
      "website": "https://aperturescience.com",
      "phone_number": "+1-216-555-0100",
      "revenue": "$2B",
      "tax_identifier": "98-7654321",
      "context_links": [
        "https://aperturescience.com/research",
        "https://aperturescience.com/portal-technology"
      ],
      "sales_id": 123
    }
  ],
  "contacts": [
    {
      "id": 456,
      "first_name": "Gordon",
      "last_name": "Freeman",
      "gender": "male",
      "has_newsletter": false
    },
    {
      "id": 567,
      "first_name": "Cave",
      "last_name": "Johnson",
      "title": "CEO & Founder",
      "company_id": 345,
      "background": "Visionary entrepreneur. Believes in the power of science. May or may not have turned himself into a computer.",
      "linkedin_url": "https://linkedin.com/in/cavejohnson",
      "gender": "male",
      "has_newsletter": true,
      "sales_id": 123,
      "emails": [
        {
          "email": "cave.johnson@aperturescience.com",
          "type": "Work"
        }
      ],
      "phones": [
        {
          "number": "15551234567",
          "type": "Work"
        }
      ],
      "tags": ["VIP", "Science"]
    }
  ],
  "notes": [
    {
      "contact_id": 456,
      "sales_id": 123,
      "text": "Still refuses to speak. Communication continues to be challenging.",
      "date": "2025-11-13T08:16:10Z"
    },
    {
      "contact_id": 567,
      "sales_id": 123,
      "text": "Discussed new testing initiative involving portals.\n\nCave mentioned something about combustible lemons. Need to follow up on R&D budget.",
      "date": "2025-02-14T09:20:21Z",
      "attachments": [
        {
          "url": "https://aperturescience.com/files/combustible-lemons-proposal.pdf",
          "name": "combustible-lemons-proposal.pdf"
        }
      ]
    }
  ],
  "tasks": [
    {
      "contact_id": 456,
      "sales_id": 123,
      "text": "Send crowbar maintenance kit"
    },
    {
      "contact_id": 567,
      "sales_id": 123,
      "text": "Schedule moon rock conversion demo",
      "due_date": "2025-03-26T16:15:00Z",
      "done_date": "2025-04-01T09:00:00"
    }
  ]
}
```

--------------------------------

### Display Field in Contact Sidebar

Source: https://marmelab.com/atomic-crm/doc/developers/custom-fields

Add a TextField to src/components/atomic-crm/contacts/ContactAside.tsx to render the field value in the sidebar.

```tsx
export const ContactAside = ({ link = "edit" }: { link?: "edit" | "show" }) => {
    // ...
      <AsideSection title="Background info">
        {record.referred_by && (
          <div className="pb-2">
            <span className="text-sm text-muted-foreground mr-1">
              Referred by
            </span>
            <TextField source="referred_by" />
          </div>
        )}
        <WithRecord<Contact>
          render={(record) =>
            record?.background ? (
              <TextField source="background" record={record} className="pb-2" />
            ) : null
          }
        />
        // ...
};
```

--------------------------------

### Data API Endpoints

Source: https://marmelab.com/atomic-crm/doc/developers/atomic-crm-api

Endpoints for managing CRM data including contacts, notes, tasks, companies, and deals.

```APIDOC
## Data API Endpoints

### Description
Endpoints for managing CRM data. Supports standard CRUD operations via REST. Use query parameters for filtering and selection.

### Endpoints
- GET /rest/v1/contacts_summary
- GET /rest/v1/contacts
- POST /rest/v1/contacts
- GET /rest/v1/contacts?id=eq.{id}
- PATCH /rest/v1/contacts?id=eq.{id}
- DELETE /rest/v1/contacts?id=eq.{id}
- GET /rest/v1/contact_notes
- POST /rest/v1/contact_notes
- GET /rest/v1/contact_notes?id=eq.{id}
- PATCH /rest/v1/contact_notes?id=eq.{id}
- DELETE /rest/v1/contact_notes?id=eq.{id}
- GET /rest/v1/tasks
- POST /rest/v1/tasks
- GET /rest/v1/tasks?id=eq.{id}
- PATCH /rest/v1/tasks?id=eq.{id}
- DELETE /rest/v1/tasks?id=eq.{id}
- GET /rest/v1/companies_summary
- GET /rest/v1/companies
- POST /rest/v1/companies
- GET /rest/v1/companies?id=eq.{id}
- PATCH /rest/v1/companies/?id=eq.{id}
- DELETE /rest/v1/companies?id=eq.{id}
- GET /rest/v1/deals
- POST /rest/v1/deals
- GET /rest/v1/deals?id=eq.{id}
- PATCH /rest/v1/deals?id=eq.{id}
- DELETE /rest/v1/deals?id=eq.{id}
- GET /rest/v1/deal_notes
- POST /rest/v1/deal_notes
- GET /rest/v1/deal_notes?id=eq.{id}
- PATCH /rest/v1/deal_notes?id=eq.{id}
- DELETE /rest/v1/deal_notes?id=eq.{id}
- GET /rest/v1/configuration
```

--------------------------------

### Add TextInput to Contact Form

Source: https://marmelab.com/atomic-crm/doc/developers/custom-fields

Include a TextInput component in src/components/atomic-crm/contacts/ContactInputs.tsx to capture the new field data.

```tsx
const ContactMiscInputs = () => {
  return (
    <div className="flex flex-col gap-4">
      <h6 className="text-lg font-semibold">Misc</h6>
      <TextInput
        source="referred_by"
        helperText={false}
      />
      <TextInput
        source="background"
        label="Background info (bio, how you met, etc)"
        multiline
        helperText={false}
      />
      <BooleanInput source="has_newsletter" helperText={false} />
      <ReferenceInput
        reference="sales"
        source="sales_id"
        sort={{ field: "last_name", order: "ASC" }}
        filter={{
          "disabled@neq": true,
        }}
      >
        <SelectInput
          helperText={false}
          label="Account manager"
          optionText={saleOptionRenderer}
          validate={required()}
        />
      </ReferenceInput>
    </div>
  );
};
```

--------------------------------

### Disable Telemetry in CRM Component

Source: https://marmelab.com/atomic-crm/doc/developers/customizing

Use the disableTelemetry prop on the CRM component to opt out of anonymous usage tracking.

```javascript
import { CRM } from '@/components/atomic-crm/root/CRM';


const App = () => <CRM disableTelemetry />;


export default App;
```

--------------------------------

### Update Contact TypeScript Interface

Source: https://marmelab.com/atomic-crm/doc/developers/custom-fields

Add the new field to the Contact type definition in src/components/atomic-crm/types.ts to ensure type safety.

```typescript
export type Contact = {
  first_name: string;
  last_name: string;
  title: string;
  company_id: Identifier;
  email_jsonb: EmailAndType[];
  avatar?: Partial<RAFile>;
  linkedin_url?: string | null;
  first_seen: string;
  last_seen: string;
  has_newsletter: boolean;
  tags: Identifier[];
  gender: string;
  sales_id: Identifier;
  status: string;
  background: string;
  phone_jsonb: PhoneNumberAndType[];
  referred_by?: string;
  nb_tasks?: number;
  company_name?: string;
} & Pick<RaRecord, "id">;
```
Tokens:
Raw