realtimex-crm 0.1.2

package/src/components/atomic-crm/providers/supabase/dataProvider.ts

@@ -0,0 +1,407 @@
+import { supabaseDataProvider } from "ra-supabase-core";
+import {
+  withLifecycleCallbacks,
+  type CreateParams,
+  type DataProvider,
+  type GetListParams,
+  type Identifier,
+  type UpdateParams,
+} from "ra-core";
+
+import type {
+  Contact,
+  ContactNote,
+  Deal,
+  DealNote,
+  RAFile,
+  Sale,
+  SalesFormData,
+  SignUpData,
+} from "../../types";
+import { getActivityLog } from "../commons/activity";
+import { getCompanyAvatar } from "../commons/getCompanyAvatar";
+import { getContactAvatar } from "../commons/getContactAvatar";
+import { getIsInitialized } from "./authProvider";
+import { supabase } from "./supabase";
+import { getSupabaseConfig } from "@/lib/supabase-config";
+
+// Get config dynamically (from localStorage or env vars)
+// If no config, create a dummy provider that will never be used
+// (App.tsx will show setup wizard before CRM loads)
+const config = getSupabaseConfig() || {
+  url: "https://placeholder.supabase.co",
+  anonKey: "placeholder-key",
+};
+
+const baseDataProvider = supabaseDataProvider({
+  instanceUrl: config.url,
+  apiKey: config.anonKey,
+  supabaseClient: supabase,
+  sortOrder: "asc,desc.nullslast" as any,
+});
+
+const processCompanyLogo = async (params: any) => {
+  let logo = params.data.logo;
+
+  if (typeof logo !== "object" || logo === null || !logo.src) {
+    logo = await getCompanyAvatar(params.data);
+  } else if (logo.rawFile instanceof File) {
+    await uploadToBucket(logo);
+  }
+
+  return {
+    ...params,
+    data: {
+      ...params.data,
+      logo,
+    },
+  };
+};
+
+async function processContactAvatar(
+  params: UpdateParams<Contact>,
+): Promise<UpdateParams<Contact>>;
+
+async function processContactAvatar(
+  params: CreateParams<Contact>,
+): Promise<CreateParams<Contact>>;
+
+async function processContactAvatar(
+  params: CreateParams<Contact> | UpdateParams<Contact>,
+): Promise<CreateParams<Contact> | UpdateParams<Contact>> {
+  const { data } = params;
+  if (data.avatar?.src || !data.email_jsonb || !data.email_jsonb.length) {
+    return params;
+  }
+  const avatarUrl = await getContactAvatar(data);
+
+  // Clone the data and modify the clone
+  const newData = { ...data, avatar: { src: avatarUrl || undefined } };
+
+  return { ...params, data: newData };
+}
+
+const dataProviderWithCustomMethods = {
+  ...baseDataProvider,
+  async getList(resource: string, params: GetListParams) {
+    if (resource === "companies") {
+      return baseDataProvider.getList("companies_summary", params);
+    }
+    if (resource === "contacts") {
+      return baseDataProvider.getList("contacts_summary", params);
+    }
+
+    return baseDataProvider.getList(resource, params);
+  },
+  async getOne(resource: string, params: any) {
+    if (resource === "companies") {
+      return baseDataProvider.getOne("companies_summary", params);
+    }
+    if (resource === "contacts") {
+      return baseDataProvider.getOne("contacts_summary", params);
+    }
+
+    return baseDataProvider.getOne(resource, params);
+  },
+
+  async signUp({ email, password, first_name, last_name }: SignUpData) {
+    const response = await supabase.auth.signUp({
+      email,
+      password,
+      options: {
+        data: {
+          first_name,
+          last_name,
+        },
+      },
+    });
+
+    if (!response.data?.user || response.error) {
+      console.error("signUp.error", response.error);
+      throw new Error("Failed to create account");
+    }
+
+    // Update the is initialized cache
+    getIsInitialized._is_initialized_cache = true;
+
+    return {
+      id: response.data.user.id,
+      email,
+      password,
+    };
+  },
+  async salesCreate(body: SalesFormData) {
+    const { data, error } = await supabase.functions.invoke<Sale>("users", {
+      method: "POST",
+      body,
+    });
+
+    if (!data || error) {
+      console.error("salesCreate.error", error);
+      throw new Error("Failed to create account manager");
+    }
+
+    return data;
+  },
+  async salesUpdate(
+    id: Identifier,
+    data: Partial<Omit<SalesFormData, "password">>,
+  ) {
+    const { email, first_name, last_name, administrator, avatar, disabled } =
+      data;
+
+    const { data: sale, error } = await supabase.functions.invoke<Sale>(
+      "users",
+      {
+        method: "PATCH",
+        body: {
+          sales_id: id,
+          email,
+          first_name,
+          last_name,
+          administrator,
+          disabled,
+          avatar,
+        },
+      },
+    );
+
+    if (!sale || error) {
+      console.error("salesCreate.error", error);
+      throw new Error("Failed to update account manager");
+    }
+
+    return data;
+  },
+  async updatePassword(id: Identifier) {
+    const { data: passwordUpdated, error } =
+      await supabase.functions.invoke<boolean>("updatePassword", {
+        method: "PATCH",
+        body: {
+          sales_id: id,
+        },
+      });
+
+    if (!passwordUpdated || error) {
+      console.error("passwordUpdate.error", error);
+      throw new Error("Failed to update password");
+    }
+
+    return passwordUpdated;
+  },
+  async unarchiveDeal(deal: Deal) {
+    // get all deals where stage is the same as the deal to unarchive
+    const { data: deals } = await baseDataProvider.getList<Deal>("deals", {
+      filter: { stage: deal.stage },
+      pagination: { page: 1, perPage: 1000 },
+      sort: { field: "index", order: "ASC" },
+    });
+
+    // set index for each deal starting from 1, if the deal to unarchive is found, set its index to the last one
+    const updatedDeals = deals.map((d, index) => ({
+      ...d,
+      index: d.id === deal.id ? 0 : index + 1,
+      archived_at: d.id === deal.id ? null : d.archived_at,
+    }));
+
+    return await Promise.all(
+      updatedDeals.map((updatedDeal) =>
+        baseDataProvider.update("deals", {
+          id: updatedDeal.id,
+          data: updatedDeal,
+          previousData: deals.find((d) => d.id === updatedDeal.id),
+        }),
+      ),
+    );
+  },
+  async getActivityLog(companyId?: Identifier) {
+    return getActivityLog(baseDataProvider, companyId);
+  },
+  async isInitialized() {
+    return getIsInitialized();
+  },
+  async mergeContacts(sourceId: Identifier, targetId: Identifier) {
+    const { data, error } = await supabase.functions.invoke("mergeContacts", {
+      method: "POST",
+      body: { loserId: sourceId, winnerId: targetId },
+    });
+
+    if (error) {
+      console.error("mergeContacts.error", error);
+      throw new Error("Failed to merge contacts");
+    }
+
+    return data;
+  },
+} satisfies DataProvider;
+
+export type CrmDataProvider = typeof dataProviderWithCustomMethods;
+
+export const dataProvider = withLifecycleCallbacks(
+  dataProviderWithCustomMethods,
+  [
+    {
+      resource: "contactNotes",
+      beforeSave: async (data: ContactNote, _, __) => {
+        if (data.attachments) {
+          for (const fi of data.attachments) {
+            await uploadToBucket(fi);
+          }
+        }
+        return data;
+      },
+    },
+    {
+      resource: "dealNotes",
+      beforeSave: async (data: DealNote, _, __) => {
+        if (data.attachments) {
+          for (const fi of data.attachments) {
+            await uploadToBucket(fi);
+          }
+        }
+        return data;
+      },
+    },
+    {
+      resource: "sales",
+      beforeSave: async (data: Sale, _, __) => {
+        if (data.avatar) {
+          await uploadToBucket(data.avatar);
+        }
+        return data;
+      },
+    },
+    {
+      resource: "contacts",
+      beforeCreate: async (params) => {
+        return processContactAvatar(params);
+      },
+      beforeUpdate: async (params) => {
+        return processContactAvatar(params);
+      },
+      beforeGetList: async (params) => {
+        return applyFullTextSearch([
+          "first_name",
+          "last_name",
+          "company_name",
+          "title",
+          "email",
+          "phone",
+          "background",
+        ])(params);
+      },
+    },
+    {
+      resource: "companies",
+      beforeGetList: async (params) => {
+        return applyFullTextSearch([
+          "name",
+          "phone_number",
+          "website",
+          "zipcode",
+          "city",
+          "stateAbbr",
+        ])(params);
+      },
+      beforeCreate: async (params) => {
+        const createParams = await processCompanyLogo(params);
+
+        return {
+          ...createParams,
+          data: {
+            ...createParams.data,
+            created_at: new Date().toISOString(),
+          },
+        };
+      },
+      beforeUpdate: async (params) => {
+        return await processCompanyLogo(params);
+      },
+    },
+    {
+      resource: "contacts_summary",
+      beforeGetList: async (params) => {
+        return applyFullTextSearch(["first_name", "last_name"])(params);
+      },
+    },
+    {
+      resource: "deals",
+      beforeGetList: async (params) => {
+        return applyFullTextSearch(["name", "type", "description"])(params);
+      },
+    },
+  ],
+);
+
+const applyFullTextSearch = (columns: string[]) => (params: GetListParams) => {
+  if (!params.filter?.q) {
+    return params;
+  }
+  const { q, ...filter } = params.filter;
+  return {
+    ...params,
+    filter: {
+      ...filter,
+      "@or": columns.reduce((acc, column) => {
+        if (column === "email")
+          return {
+            ...acc,
+            [`email_fts@ilike`]: q,
+          };
+        if (column === "phone")
+          return {
+            ...acc,
+            [`phone_fts@ilike`]: q,
+          };
+        else
+          return {
+            ...acc,
+            [`${column}@ilike`]: q,
+          };
+      }, {}),
+    },
+  };
+};
+
+const uploadToBucket = async (fi: RAFile) => {
+  if (!fi.src.startsWith("blob:") && !fi.src.startsWith("data:")) {
+    // Sign URL check if path exists in the bucket
+    if (fi.path) {
+      const { error } = await supabase.storage
+        .from("attachments")
+        .createSignedUrl(fi.path, 60);
+
+      if (!error) {
+        return;
+      }
+    }
+  }
+
+  const dataContent = fi.src
+    ? await fetch(fi.src).then((res) => res.blob())
+    : fi.rawFile;
+
+  const file = fi.rawFile;
+  const fileExt = file.name.split(".").pop();
+  const fileName = `${Math.random()}.${fileExt}`;
+  const filePath = `${fileName}`;
+  const { error: uploadError } = await supabase.storage
+    .from("attachments")
+    .upload(filePath, dataContent);
+
+  if (uploadError) {
+    console.error("uploadError", uploadError);
+    throw new Error("Failed to upload attachment");
+  }
+
+  const { data } = supabase.storage.from("attachments").getPublicUrl(filePath);
+
+  fi.path = filePath;
+  fi.src = data.publicUrl;
+
+  // save MIME type
+  const mimeType = file.type;
+  fi.type = mimeType;
+
+  return fi;
+};

package/src/components/atomic-crm/providers/supabase/index.ts

@@ -0,0 +1,2 @@
+export { authProvider } from "./authProvider";
+export { dataProvider } from "./dataProvider";

package/src/components/atomic-crm/providers/supabase/supabase.ts

@@ -0,0 +1,34 @@
+import { createClient, type SupabaseClient } from "@supabase/supabase-js";
+import { getSupabaseConfig } from "@/lib/supabase-config";
+
+// Lazy initialization - create client on first access
+let supabaseInstance: SupabaseClient | null = null;
+
+function getSupabaseClient(): SupabaseClient {
+  if (!supabaseInstance) {
+    const config = getSupabaseConfig();
+
+    if (!config) {
+      // Return a placeholder client that will never be used
+      // (App.tsx will show setup wizard before this is accessed)
+      console.warn("[Supabase] No configuration found, using placeholder");
+      supabaseInstance = createClient(
+        "https://placeholder.supabase.co",
+        "placeholder-key",
+      );
+    } else {
+      supabaseInstance = createClient(config.url, config.anonKey);
+    }
+  }
+
+  return supabaseInstance;
+}
+
+// Export as a getter proxy to support lazy initialization
+export const supabase = new Proxy({} as SupabaseClient, {
+  get(_target, prop) {
+    const client = getSupabaseClient();
+    const value = client[prop as keyof SupabaseClient];
+    return typeof value === "function" ? value.bind(client) : value;
+  },
+});

package/src/components/atomic-crm/providers/types.ts

@@ -0,0 +1 @@
+export type { CrmDataProvider } from "./supabase/dataProvider";

package/src/components/atomic-crm/root/CRM.tsx

@@ -0,0 +1,167 @@
+import {
+  CustomRoutes,
+  localStorageStore,
+  Resource,
+  type AuthProvider,
+  type DataProvider,
+} from "ra-core";
+import { useEffect } from "react";
+import { Route } from "react-router";
+import { Admin } from "@/components/admin/admin";
+import { ForgotPasswordPage } from "@/components/supabase/forgot-password-page";
+import { SetPasswordPage } from "@/components/supabase/set-password-page";
+
+import companies from "../companies";
+import contacts from "../contacts";
+import { Dashboard } from "../dashboard/Dashboard";
+import deals from "../deals";
+import { Layout } from "../layout/Layout";
+import { SignupPage } from "../login/SignupPage";
+import {
+  authProvider as defaultAuthProvider,
+  dataProvider as defaultDataProvider,
+} from "../providers/supabase";
+import sales from "../sales";
+import { SettingsPage } from "../settings/SettingsPage";
+import type { ConfigurationContextValue } from "./ConfigurationContext";
+import { ConfigurationProvider } from "./ConfigurationContext";
+import {
+  defaultCompanySectors,
+  defaultContactGender,
+  defaultDarkModeLogo,
+  defaultDealCategories,
+  defaultDealPipelineStatuses,
+  defaultDealStages,
+  defaultLightModeLogo,
+  defaultNoteStatuses,
+  defaultTaskTypes,
+  defaultTitle,
+} from "./defaultConfiguration";
+import { i18nProvider } from "./i18nProvider";
+import { StartPage } from "../login/StartPage.tsx";
+
+export type CRMProps = {
+  dataProvider?: DataProvider;
+  authProvider?: AuthProvider;
+  disableTelemetry?: boolean;
+} & Partial<ConfigurationContextValue>;
+
+/**
+ * CRM Component
+ *
+ * This component sets up and renders the main CRM application using `ra-core`. It provides
+ * default configurations and themes but allows for customization through props. The component
+ * wraps the application with a `ConfigurationProvider` to provide configuration values via context.
+ *
+ * @param {Array<ContactGender>} contactGender - The gender options for contacts used in the application.
+ * @param {string[]} companySectors - The list of company sectors used in the application.
+ * @param {RaThemeOptions} darkTheme - The theme to use when the application is in dark mode.
+ * @param {string[]} dealCategories - The categories of deals used in the application.
+ * @param {string[]} dealPipelineStatuses - The statuses of deals in the pipeline used in the application.
+ * @param {DealStage[]} dealStages - The stages of deals used in the application.
+ * @param {RaThemeOptions} lightTheme - The theme to use when the application is in light mode.
+ * @param {string} logo - The logo used in the CRM application.
+ * @param {NoteStatus[]} noteStatuses - The statuses of notes used in the application.
+ * @param {string[]} taskTypes - The types of tasks used in the application.
+ * @param {string} title - The title of the CRM application.
+ *
+ * @returns {JSX.Element} The rendered CRM application.
+ *
+ * @example
+ * // Basic usage of the CRM component
+ * import { CRM } from '@/components/atomic-crm/dashboard/CRM';
+ *
+ * const App = () => (
+ *     <CRM
+ *         logo="/path/to/logo.png"
+ *         title="My Custom CRM"
+ *         lightTheme={{
+ *             ...defaultTheme,
+ *             palette: {
+ *                 primary: { main: '#0000ff' },
+ *             },
+ *         }}
+ *     />
+ * );
+ *
+ * export default App;
+ */
+export const CRM = ({
+  contactGender = defaultContactGender,
+  companySectors = defaultCompanySectors,
+  dealCategories = defaultDealCategories,
+  dealPipelineStatuses = defaultDealPipelineStatuses,
+  dealStages = defaultDealStages,
+  darkModeLogo = defaultDarkModeLogo,
+  lightModeLogo = defaultLightModeLogo,
+  noteStatuses = defaultNoteStatuses,
+  taskTypes = defaultTaskTypes,
+  title = defaultTitle,
+  dataProvider = defaultDataProvider,
+  authProvider = defaultAuthProvider,
+  disableTelemetry,
+  ...rest
+}: CRMProps) => {
+  useEffect(() => {
+    if (
+      disableTelemetry ||
+      process.env.NODE_ENV !== "production" ||
+      typeof window === "undefined" ||
+      typeof window.location === "undefined" ||
+      typeof Image === "undefined"
+    ) {
+      return;
+    }
+    const img = new Image();
+    img.src = `https://atomic-crm-telemetry.marmelab.com/atomic-crm-telemetry?domain=${window.location.hostname}`;
+  }, [disableTelemetry]);
+
+  return (
+    <ConfigurationProvider
+      contactGender={contactGender}
+      companySectors={companySectors}
+      dealCategories={dealCategories}
+      dealPipelineStatuses={dealPipelineStatuses}
+      dealStages={dealStages}
+      darkModeLogo={darkModeLogo}
+      lightModeLogo={lightModeLogo}
+      noteStatuses={noteStatuses}
+      taskTypes={taskTypes}
+      title={title}
+    >
+      <Admin
+        dataProvider={dataProvider}
+        authProvider={authProvider}
+        store={localStorageStore(undefined, "CRM")}
+        layout={Layout}
+        loginPage={StartPage}
+        i18nProvider={i18nProvider}
+        dashboard={Dashboard}
+        requireAuth
+        disableTelemetry
+        {...rest}
+      >
+        <CustomRoutes noLayout>
+          <Route path={SignupPage.path} element={<SignupPage />} />
+          <Route path={SetPasswordPage.path} element={<SetPasswordPage />} />
+          <Route
+            path={ForgotPasswordPage.path}
+            element={<ForgotPasswordPage />}
+          />
+        </CustomRoutes>
+
+        <CustomRoutes>
+          <Route path={SettingsPage.path} element={<SettingsPage />} />
+        </CustomRoutes>
+        <Resource name="deals" {...deals} />
+        <Resource name="contacts" {...contacts} />
+        <Resource name="companies" {...companies} />
+        <Resource name="contactNotes" />
+        <Resource name="dealNotes" />
+        <Resource name="tasks" />
+        <Resource name="sales" {...sales} />
+        <Resource name="tags" />
+      </Admin>
+    </ConfigurationProvider>
+  );
+};

package/src/components/atomic-crm/root/ConfigurationContext.tsx

@@ -0,0 +1,80 @@
+import { createContext, useContext, type ReactNode } from "react";
+
+import type { ContactGender, DealStage, NoteStatus } from "../types";
+import {
+  defaultCompanySectors,
+  defaultContactGender,
+  defaultDarkModeLogo,
+  defaultDealCategories,
+  defaultDealPipelineStatuses,
+  defaultDealStages,
+  defaultLightModeLogo,
+  defaultNoteStatuses,
+  defaultTaskTypes,
+  defaultTitle,
+} from "./defaultConfiguration";
+
+// Define types for the context value
+export interface ConfigurationContextValue {
+  companySectors: string[];
+  dealCategories: string[];
+  dealPipelineStatuses: string[];
+  dealStages: DealStage[];
+  noteStatuses: NoteStatus[];
+  taskTypes: string[];
+  title: string;
+  darkModeLogo: string;
+  lightModeLogo: string;
+  contactGender: ContactGender[];
+}
+
+export interface ConfigurationProviderProps extends ConfigurationContextValue {
+  children: ReactNode;
+}
+
+// Create context with default value
+export const ConfigurationContext = createContext<ConfigurationContextValue>({
+  companySectors: defaultCompanySectors,
+  dealCategories: defaultDealCategories,
+  dealPipelineStatuses: defaultDealPipelineStatuses,
+  dealStages: defaultDealStages,
+  noteStatuses: defaultNoteStatuses,
+  taskTypes: defaultTaskTypes,
+  title: defaultTitle,
+  darkModeLogo: defaultDarkModeLogo,
+  lightModeLogo: defaultLightModeLogo,
+  contactGender: defaultContactGender,
+});
+
+export const ConfigurationProvider = ({
+  children,
+  companySectors,
+  dealCategories,
+  dealPipelineStatuses,
+  dealStages,
+  darkModeLogo,
+  lightModeLogo,
+  noteStatuses,
+  taskTypes,
+  title,
+  contactGender,
+}: ConfigurationProviderProps) => (
+  <ConfigurationContext.Provider
+    value={{
+      companySectors,
+      dealCategories,
+      dealPipelineStatuses,
+      dealStages,
+      darkModeLogo,
+      lightModeLogo,
+      noteStatuses,
+      title,
+      taskTypes,
+      contactGender,
+    }}
+  >
+    {children}
+  </ConfigurationContext.Provider>
+);
+
+export const useConfigurationContext = () => useContext(ConfigurationContext);