realtimex-crm 0.12.2 → 0.13.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "realtimex-crm",
-  "version": "0.12.2",
+  "version": "0.13.1",
   "description": "RealTimeX CRM - A full-featured CRM built with React, shadcn-admin-kit, and Supabase. Fork of Atomic CRM with RealTimeX App SDK integration.",
   "type": "module",
   "main": "./dist/index.js",
@@ -79,6 +79,7 @@
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-avatar": "^1.1.11",
     "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",

package/src/App.tsx

@@ -9,6 +9,12 @@ import { isSupabaseConfigured } from "@/lib/supabase-config";
  * Customize Atomic CRM by passing props to the CRM component:
  *  - contactGender
  *  - companySectors
+ *  - companyLifecycleStages (NEW)
+ *  - companyTypes (NEW)
+ *  - companyQualificationStatuses (NEW)
+ *  - companyRevenueRanges (NEW)
+ *  - externalHeartbeatStatuses (NEW)
+ *  - internalHeartbeatStatuses (NEW)
  *  - darkTheme
  *  - dealCategories
  *  - dealPipelineStatuses
@@ -28,6 +34,62 @@ import { isSupabaseConfigured } from "@/lib/supabase-config";
  *    />
  * );
  */
+
+// Company lifecycle stages configuration
+const companyLifecycleStages = [
+  { id: 'prospect', name: 'Prospect' },
+  { id: 'customer', name: 'Customer' },
+  { id: 'churned', name: 'Churned' },
+  { id: 'lost', name: 'Lost' },
+  { id: 'archived', name: 'Archived' },
+];
+
+// Company type configuration
+const companyTypes = [
+  { id: 'customer', name: 'Customer' },
+  { id: 'prospect', name: 'Prospect' },
+  { id: 'partner', name: 'Partner' },
+  { id: 'vendor', name: 'Vendor' },
+  { id: 'competitor', name: 'Competitor' },
+  { id: 'internal', name: 'Internal' },
+];
+
+// Company qualification status configuration
+const companyQualificationStatuses = [
+  { id: 'qualified', name: 'Qualified' },
+  { id: 'unqualified', name: 'Unqualified' },
+  { id: 'duplicate', name: 'Duplicate' },
+  { id: 'spam', name: 'Spam' },
+  { id: 'test', name: 'Test' },
+];
+
+// Company revenue ranges configuration
+const companyRevenueRanges = [
+  { id: '0-1M', name: 'Under $1M' },
+  { id: '1M-10M', name: '$1M - $10M' },
+  { id: '10M-50M', name: '$10M - $50M' },
+  { id: '50M-100M', name: '$50M - $100M' },
+  { id: '100M+', name: 'Over $100M' },
+  { id: 'unknown', name: 'Unknown' },
+];
+
+// External heartbeat status configuration
+const externalHeartbeatStatuses = [
+  { id: 'healthy', name: 'Healthy', color: '#10b981' },
+  { id: 'risky', name: 'Risky', color: '#f59e0b' },
+  { id: 'dead', name: 'Dead', color: '#ef4444' },
+  { id: 'unknown', name: 'Not Checked', color: '#6b7280' },
+];
+
+// Internal heartbeat status configuration
+const internalHeartbeatStatuses = [
+  { id: 'engaged', name: 'Engaged', color: '#10b981' },
+  { id: 'quiet', name: 'Quiet', color: '#3b82f6' },
+  { id: 'at_risk', name: 'At Risk', color: '#f59e0b' },
+  { id: 'unresponsive', name: 'Unresponsive', color: '#ef4444' },
+  { id: 'unknown', name: 'Unknown', color: '#6b7280' },
+];
+
 const App = () => {
   const [needsSetup, setNeedsSetup] = useState<boolean>(() => {
     // Check immediately on mount
@@ -51,7 +113,16 @@ const App = () => {
     );
   }
 
-  return <CRM />;
+  return (
+    <CRM
+      companyLifecycleStages={companyLifecycleStages}
+      companyTypes={companyTypes}
+      companyQualificationStatuses={companyQualificationStatuses}
+      companyRevenueRanges={companyRevenueRanges}
+      externalHeartbeatStatuses={externalHeartbeatStatuses}
+      internalHeartbeatStatuses={internalHeartbeatStatuses}
+    />
+  );
 };
 
 export default App;

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

@@ -6,6 +6,9 @@ import { ArrayInput } from "@/components/admin/array-input";
 import { SimpleFormIterator } from "@/components/admin/simple-form-iterator";
 import { Separator } from "@/components/ui/separator";
 import { useIsMobile } from "@/hooks/use-mobile";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { ChevronDown } from "lucide-react";
+import { useState } from "react";
 
 import ImageEditorField from "../misc/ImageEditorField";
 import { isLinkedinUrl } from "../misc/isLinkedInUrl";
@@ -41,6 +44,8 @@ export const CompanyInputs = () => {
           <CompanyAccountManagerInput />
         </div>
       </div>
+      <Separator className="my-4" />
+      <CompanyAdvancedSettings />
     </div>
   );
 };
@@ -72,22 +77,76 @@ const CompanyContactInputs = () => {
   return (
     <div className="flex flex-col gap-4">
       <h6 className="text-lg font-semibold">Contact</h6>
+      <TextInput source="email" helperText={false} type="email" />
       <TextInput source="website" helperText={false} validate={isUrl} />
-      <TextInput
-        source="linkedin_url"
-        helperText={false}
-        validate={isLinkedinUrl}
-      />
       <TextInput source="phone_number" helperText={false} />
+
+      <div className="mt-2">
+        <p className="text-sm font-medium mb-2">Social Profiles</p>
+        <div className="flex flex-col gap-3 ml-2">
+          <TextInput
+            source="linkedin_url"
+            label="LinkedIn"
+            helperText={false}
+            validate={isLinkedinUrl}
+          />
+          <TextInput
+            source="social_profiles.x"
+            label="Twitter/X"
+            helperText={false}
+            validate={isUrl}
+          />
+          <TextInput
+            source="social_profiles.facebook"
+            label="Facebook"
+            helperText={false}
+            validate={isUrl}
+          />
+          <TextInput
+            source="social_profiles.github"
+            label="GitHub"
+            helperText={false}
+            validate={isUrl}
+          />
+        </div>
+      </div>
+
+      <TextInput source="logo_url" label="Logo URL" helperText={false} validate={isUrl} />
     </div>
   );
 };
 
 const CompanyContextInputs = () => {
-  const { companySectors } = useConfigurationContext();
+  const {
+    companySectors,
+    companyLifecycleStages,
+    companyTypes,
+    companyRevenueRanges,
+  } = useConfigurationContext();
+
   return (
     <div className="flex flex-col gap-4">
       <h6 className="text-lg font-semibold">Context</h6>
+
+      {/* Classification */}
+      {companyLifecycleStages && (
+        <SelectInput
+          source="lifecycle_stage"
+          label="Lifecycle Stage"
+          choices={companyLifecycleStages}
+          helperText={false}
+        />
+      )}
+      {companyTypes && (
+        <SelectInput
+          source="company_type"
+          label="Company Type"
+          choices={companyTypes}
+          helperText={false}
+        />
+      )}
+
+      {/* Industry & Sector */}
       <SelectInput
         source="sector"
         choices={companySectors.map((sector) => ({
@@ -96,8 +155,23 @@ const CompanyContextInputs = () => {
         }))}
         helperText={false}
       />
+      <TextInput source="industry" helperText={false} />
+
+      {/* Size & Revenue */}
       <SelectInput source="size" choices={sizes} helperText={false} />
+      <TextInput source="employee_count" label="Employee Count" helperText={false} type="number" />
       <TextInput source="revenue" helperText={false} />
+      {companyRevenueRanges && (
+        <SelectInput
+          source="revenue_range"
+          label="Revenue Range"
+          choices={companyRevenueRanges}
+          helperText={false}
+        />
+      )}
+
+      {/* Additional */}
+      <TextInput source="founded_year" label="Founded Year" helperText={false} type="number" />
       <TextInput source="tax_identifier" helperText={false} />
     </div>
   );
@@ -158,3 +232,56 @@ const CompanyAccountManagerInput = () => {
 
 const saleOptionRenderer = (choice: Sale) =>
   `${choice.first_name} ${choice.last_name}`;
+
+const CompanyAdvancedSettings = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const { companyQualificationStatuses } = useConfigurationContext();
+
+  return (
+    <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+      <CollapsibleTrigger className="flex items-center gap-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">
+        <ChevronDown className={`h-4 w-4 transition-transform ${isOpen ? "rotate-180" : ""}`} />
+        Advanced Settings
+      </CollapsibleTrigger>
+      <CollapsibleContent className="mt-4">
+        <div className="flex flex-col gap-6 pl-6 border-l-2 border-muted">
+          {/* External System Integration */}
+          <div className="flex flex-col gap-4">
+            <h6 className="text-sm font-semibold text-muted-foreground">External System Integration</h6>
+            <TextInput
+              source="external_id"
+              label="External ID"
+              helperText={false}
+              placeholder="e.g., Salesforce Account ID"
+            />
+            <SelectInput
+              source="external_system"
+              label="External System"
+              choices={[
+                { id: 'salesforce', name: 'Salesforce' },
+                { id: 'hubspot', name: 'HubSpot' },
+                { id: 'clearbit', name: 'Clearbit' },
+                { id: 'apollo', name: 'Apollo' },
+                { id: 'zoominfo', name: 'ZoomInfo' },
+              ]}
+              helperText={false}
+            />
+          </div>
+
+          {/* Data Quality */}
+          {companyQualificationStatuses && (
+            <div className="flex flex-col gap-4">
+              <h6 className="text-sm font-semibold text-muted-foreground">Data Quality</h6>
+              <SelectInput
+                source="qualification_status"
+                label="Qualification Status"
+                choices={companyQualificationStatuses}
+                helperText={false}
+              />
+            </div>
+          )}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+};

package/src/components/atomic-crm/providers/commons/mergeCompanies.ts

@@ -76,6 +76,12 @@ export const mergeCompanies = async (
     loserCompany.context_links || [],
   );
 
+  // Merge social profiles from both companies
+  const mergedSocialProfiles = {
+    ...(loserCompany.social_profiles || {}),
+    ...(winnerCompany.social_profiles || {}),
+  };
+
   const winnerUpdate = dataProvider.update<Company>("companies", {
     id: winnerId,
     data: {
@@ -99,6 +105,45 @@ export const mergeCompanies = async (
         winnerCompany.tax_identifier ?? loserCompany.tax_identifier,
       sales_id: winnerCompany.sales_id ?? loserCompany.sales_id,
       context_links: mergedContextLinks,
+
+      // Phase 1: Lifecycle & Classification (prefer winner's values)
+      lifecycle_stage: winnerCompany.lifecycle_stage ?? loserCompany.lifecycle_stage,
+      company_type: winnerCompany.company_type ?? loserCompany.company_type,
+      qualification_status: winnerCompany.qualification_status ?? loserCompany.qualification_status,
+
+      // Phase 1: External Integration (prefer winner's values)
+      external_id: winnerCompany.external_id ?? loserCompany.external_id,
+      external_system: winnerCompany.external_system ?? loserCompany.external_system,
+
+      // Phase 1: Contact Information (prefer winner's email)
+      email: winnerCompany.email ?? loserCompany.email,
+
+      // Phase 1: Firmographics (prefer winner's values)
+      industry: winnerCompany.industry ?? loserCompany.industry,
+      revenue_range: winnerCompany.revenue_range ?? loserCompany.revenue_range,
+      employee_count: winnerCompany.employee_count ?? loserCompany.employee_count,
+      founded_year: winnerCompany.founded_year ?? loserCompany.founded_year,
+
+      // Phase 1: Social & Enrichment (merge social profiles, prefer winner's logo_url)
+      social_profiles: mergedSocialProfiles,
+      logo_url: winnerCompany.logo_url ?? loserCompany.logo_url,
+
+      // Phase 2: Heartbeat (take the better/higher heartbeat score)
+      external_heartbeat_status: winnerCompany.external_heartbeat_status ?? loserCompany.external_heartbeat_status,
+      external_heartbeat_checked_at:
+        winnerCompany.external_heartbeat_checked_at ?? loserCompany.external_heartbeat_checked_at,
+
+      // For internal heartbeat, take the higher score (better engagement)
+      internal_heartbeat_score: Math.max(
+        winnerCompany.internal_heartbeat_score ?? 0,
+        loserCompany.internal_heartbeat_score ?? 0
+      ) || undefined,
+      internal_heartbeat_status:
+        (winnerCompany.internal_heartbeat_score ?? 0) >= (loserCompany.internal_heartbeat_score ?? 0)
+          ? winnerCompany.internal_heartbeat_status
+          : loserCompany.internal_heartbeat_status,
+      internal_heartbeat_updated_at:
+        winnerCompany.internal_heartbeat_updated_at ?? loserCompany.internal_heartbeat_updated_at,
     },
     previousData: winnerCompany,
   });

package/src/components/atomic-crm/providers/fakerest/dataGenerator/companies.ts

@@ -17,9 +17,22 @@ const sizes = [1, 10, 50, 250, 500];
 
 const regex = /\W+/;
 
+// New field options
+const lifecycleStages = ['prospect', 'customer', 'churned', 'lost', 'archived'];
+const companyTypes = ['customer', 'prospect', 'partner', 'vendor', 'competitor'];
+const qualificationStatuses = ['qualified', 'unqualified', 'duplicate', 'spam'];
+const revenueRanges = ['0-1M', '1M-10M', '10M-50M', '50M-100M', '100M+', 'unknown'];
+const industries = ['SaaS', 'E-commerce', 'Healthcare', 'Fintech', 'Manufacturing', 'Consulting', 'Real Estate', 'Education'];
+const externalHeartbeats = ['healthy', 'risky', 'dead', 'unknown'];
+const internalHeartbeats = ['engaged', 'quiet', 'at_risk', 'unresponsive'];
+
 export const generateCompanies = (db: Db, size = 55): Required<Company>[] => {
   return Array.from(Array(size).keys()).map((id) => {
     const name = company.companyName();
+    const createdAt = randomDate();
+    const hasLifecycle = datatype.boolean();
+    const hasHeartbeat = datatype.number(100) > 40; // 60% have heartbeat computed
+
     return {
       id,
       name: name,
@@ -40,14 +53,59 @@ export const generateCompanies = (db: Db, size = 55): Required<Company>[] => {
       stateAbbr: address.stateAbbr(),
       nb_contacts: 0,
       nb_deals: 0,
+      nb_notes: 0,
+      nb_tasks: 0,
       // at least 1/3rd of companies for Jane Doe
       sales_id: datatype.number(2) === 0 ? 0 : random.arrayElement(db.sales).id,
-      created_at: randomDate().toISOString(),
+      created_at: createdAt.toISOString(),
       description: lorem.paragraph(),
       revenue: random.arrayElement(["$1M", "$10M", "$100M", "$1B"]),
       tax_identifier: random.alphaNumeric(10),
       country: random.arrayElement(["USA", "France", "UK"]),
       context_links: [],
+
+      // Phase 1: Lifecycle & Classification (70% populated)
+      updated_at: randomDate(createdAt).toISOString(),
+      lifecycle_stage: hasLifecycle ? random.arrayElement(lifecycleStages) : undefined,
+      company_type: datatype.number(100) > 30 ? random.arrayElement(companyTypes) : undefined,
+      qualification_status: datatype.number(100) > 60 ? random.arrayElement(qualificationStatuses) : undefined,
+
+      // Phase 1: External Integration (20% populated)
+      external_id: datatype.number(100) > 80 ? random.alphaNumeric(12) : undefined,
+      external_system: datatype.number(100) > 80 ? random.arrayElement(['salesforce', 'hubspot', 'clearbit']) : undefined,
+
+      // Phase 1: Contact Information (70% have email)
+      email: datatype.number(100) > 30 ? `info@${internet.domainName()}` : undefined,
+
+      // Phase 1: Firmographics (varies by field)
+      industry: datatype.number(100) > 40 ? random.arrayElement(industries) : undefined,
+      revenue_range: datatype.number(100) > 50 ? random.arrayElement(revenueRanges) : undefined,
+      employee_count: datatype.number(100) > 50 ? datatype.number({ min: 1, max: 10000 }) : undefined,
+      founded_year: datatype.number(100) > 60 ? datatype.number({ min: 1990, max: 2023 }) : undefined,
+
+      // Phase 1: Social & Enrichment (30% have social profiles)
+      social_profiles: datatype.number(100) > 70 ? {
+        linkedin: `https://www.linkedin.com/company/${name.toLowerCase().replace(regex, "_")}`,
+        ...(datatype.number(100) > 90 && { x: `https://x.com/${name.toLowerCase().replace(regex, "")}` }),
+        ...(datatype.number(100) > 95 && { facebook: `https://facebook.com/${name.toLowerCase().replace(regex, "")}` }),
+      } : {},
+      logo_url: datatype.number(100) > 60 ? `https://logo.clearbit.com/${internet.domainName()}` : undefined,
+
+      // Phase 2: External Heartbeat (50% computed)
+      external_heartbeat_status: datatype.number(100) > 50 ? random.arrayElement(externalHeartbeats) : undefined,
+      external_heartbeat_checked_at: datatype.number(100) > 50 ? randomDate(createdAt).toISOString() : undefined,
+
+      // Phase 2: Internal Heartbeat (60% computed)
+      internal_heartbeat_status: hasHeartbeat ? random.arrayElement(internalHeartbeats) : undefined,
+      internal_heartbeat_score: hasHeartbeat ? datatype.number({ min: 0, max: 100 }) : undefined,
+      internal_heartbeat_updated_at: hasHeartbeat ? randomDate(createdAt).toISOString() : undefined,
+
+      // View-computed fields (will be set by view in real DB, defaulted here)
+      last_note_date: undefined,
+      last_deal_activity: undefined,
+      last_task_activity: undefined,
+      days_since_last_activity: undefined,
+      total_deal_amount: 0,
     };
   });
 };

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

@@ -70,7 +70,47 @@ export type Company = {
   nb_contacts?: number;
   nb_deals?: number;
   nb_notes?: number;
+  nb_tasks?: number;
   last_seen?: string;
+
+  // Phase 1: Lifecycle & Classification
+  updated_at?: string;
+  lifecycle_stage?: string;
+  company_type?: string;
+  qualification_status?: string;
+
+  // Phase 1: External Integration
+  external_id?: string;
+  external_system?: string;
+
+  // Phase 1: Contact Information
+  email?: string;
+
+  // Phase 1: Firmographics
+  industry?: string;
+  revenue_range?: string;
+  employee_count?: number;
+  founded_year?: number;
+
+  // Phase 1: Social & Enrichment
+  social_profiles?: Record<string, string>;
+  logo_url?: string;
+
+  // Phase 2: External Heartbeat
+  external_heartbeat_status?: string;
+  external_heartbeat_checked_at?: string;
+
+  // Phase 2: Internal Heartbeat
+  internal_heartbeat_status?: string;
+  internal_heartbeat_score?: number;
+  internal_heartbeat_updated_at?: string;
+
+  // View-computed fields
+  last_note_date?: string;
+  last_deal_activity?: string;
+  last_task_activity?: string;
+  days_since_last_activity?: number;
+  total_deal_amount?: number;
 } & Pick<RaRecord, "id">;
 
 export type EmailAndType = {

package/src/components/ui/collapsible.tsx

@@ -0,0 +1,31 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }