realtimex-crm 0.13.3 → 0.13.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "realtimex-crm",
-  "version": "0.13.3",
+  "version": "0.13.7",
   "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",

package/src/components/atomic-crm/contacts/ContactAside.tsx

@@ -21,6 +21,7 @@ import { SaleName } from "../sales/SaleName";
 import type { Contact } from "../types";
 import { ContactMergeButton } from "./ContactMergeButton";
 import { ExportVCardButton } from "./ExportVCardButton";
+import { ContactHealthCard } from "./ContactHealthCard";
 
 export const ContactAside = ({ link = "edit" }: { link?: "edit" | "show" }) => {
   const { contactGender } = useConfigurationContext();
@@ -37,6 +38,8 @@ export const ContactAside = ({ link = "edit" }: { link?: "edit" | "show" }) => {
         )}
       </div>
 
+      <ContactHealthCard />
+
       <AsideSection title="Personal info">
         <ArrayField source="email_jsonb">
           <SingleFieldList className="flex-col">

package/src/components/atomic-crm/contacts/ContactHealthCard.tsx

@@ -0,0 +1,201 @@
+import { formatDistance } from "date-fns";
+import { Activity, HeartPulse, Mail, Linkedin } from "lucide-react";
+import { useRecordContext } from "ra-core";
+import { Badge } from "@/components/ui/badge";
+import { Progress } from "@/components/ui/progress";
+
+import { AsideSection } from "../misc/AsideSection";
+import type { Contact } from "../types";
+
+const InternalStatusBadge = ({ status }: { status: string }) => {
+  let variant: "default" | "secondary" | "destructive" | "outline" = "outline";
+  let className = "";
+
+  switch (status) {
+    case "strong":
+      variant = "default";
+      break;
+    case "active":
+      variant = "secondary"; 
+      className = "bg-green-100 text-green-800 hover:bg-green-100";
+      break;
+    case "cooling":
+      variant = "secondary";
+      className = "bg-yellow-100 text-yellow-800 hover:bg-yellow-100";
+      break;
+    case "cold":
+      variant = "secondary";
+      className = "bg-orange-100 text-orange-800 hover:bg-orange-100";
+      break;
+    case "dormant":
+      variant = "secondary";
+      break;
+  }
+
+  return (
+    <Badge variant={variant} className={className}>
+      {status.charAt(0).toUpperCase() + status.slice(1)}
+    </Badge>
+  );
+};
+
+const EmailStatusBadge = ({ status }: { status: string }) => {
+  let variant: "default" | "secondary" | "destructive" | "outline" = "outline";
+  let className = "";
+
+  switch (status) {
+    case "valid":
+      variant = "secondary";
+      className = "bg-green-100 text-green-800 hover:bg-green-100";
+      break;
+    case "risky":
+      variant = "secondary";
+      className = "bg-yellow-100 text-yellow-800 hover:bg-yellow-100";
+      break;
+    case "invalid":
+      variant = "destructive";
+      break;
+  }
+
+  return (
+    <Badge variant={variant} className={className}>
+      {status.charAt(0).toUpperCase() + status.slice(1)}
+    </Badge>
+  );
+};
+
+const LinkedInStatusBadge = ({ status }: { status: string }) => {
+  let variant: "default" | "secondary" | "destructive" | "outline" = "outline";
+  let className = "";
+
+  switch (status) {
+    case "active":
+      variant = "default";
+      className = "bg-[#0077b5] hover:bg-[#0077b5]"; // LinkedIn Blue
+      break;
+    case "inactive":
+      variant = "secondary";
+      break;
+    case "not_found":
+      variant = "destructive";
+      break;
+  }
+
+  return (
+    <Badge variant={variant} className={className}>
+      {status.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')}
+    </Badge>
+  );
+};
+
+export const ContactHealthCard = () => {
+  const record = useRecordContext<Contact>();
+  if (!record) return null;
+
+  const daysSince = record.days_since_last_activity ?? 
+    (record.last_seen ? Math.floor((new Date().getTime() - new Date(record.last_seen).getTime()) / (1000 * 60 * 60 * 24)) : undefined);
+
+  const hasInternalHealth =
+    record.internal_heartbeat_score != null ||
+    record.internal_heartbeat_status != null ||
+    daysSince != null;
+
+  const hasExternalHealth =
+    record.external_heartbeat_status != null ||
+    record.email_validation_status != null ||
+    record.linkedin_profile_status != null;
+
+  return (
+    <AsideSection title="Contact Health">
+      {!hasInternalHealth && !hasExternalHealth && (
+        <div className="text-xs text-muted-foreground italic">
+          No health data calculated yet.
+        </div>
+      )}
+
+      {/* Internal Heartbeat (Relationship Strength) */}
+      {hasInternalHealth && (
+        <div className="mb-4">
+          <div className="flex items-center gap-2 mb-2">
+            <Activity className="w-4 h-4 text-muted-foreground" />
+            <span className="font-medium text-sm">Relationship Strength</span>
+          </div>
+
+          {record.internal_heartbeat_score != null && (
+            <div className="mb-2">
+              <div className="flex items-center justify-between mb-1">
+                <span className="text-xs text-muted-foreground">
+                  Engagement Score
+                </span>
+                <span className="text-xs font-medium">
+                  {record.internal_heartbeat_score}/100
+                </span>
+              </div>
+              <Progress
+                value={record.internal_heartbeat_score}
+                className="h-2"
+              />
+            </div>
+          )}
+
+          {record.internal_heartbeat_status && (
+            <div className="mb-2">
+              <InternalStatusBadge status={record.internal_heartbeat_status} />
+            </div>
+          )}
+
+          {daysSince != null && (
+            <div className="text-xs text-muted-foreground">
+              Last activity:{" "}
+              {daysSince === 0
+                ? "Today"
+                : daysSince === 1
+                  ? "Yesterday"
+                  : `${daysSince} days ago`}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* External Heartbeat (Contact Validation) */}
+      {hasExternalHealth && (
+        <div>
+          <div className="flex items-center gap-2 mb-2">
+            <HeartPulse className="w-4 h-4 text-muted-foreground" />
+            <span className="font-medium text-sm">Contact Validation</span>
+          </div>
+
+          {record.email_validation_status && (
+            <div className="flex items-center gap-2 mb-2">
+              <Mail className="w-3 h-3 text-muted-foreground" />
+              <EmailStatusBadge status={record.email_validation_status} />
+              {record.email_last_bounced_at && (
+                <span className="text-xs text-destructive">
+                  (bounced)
+                </span>
+              )}
+            </div>
+          )}
+
+          {record.linkedin_profile_status && (
+            <div className="flex items-center gap-2 mb-2">
+              <Linkedin className="w-3 h-3 text-muted-foreground" />
+              <LinkedInStatusBadge status={record.linkedin_profile_status} />
+            </div>
+          )}
+
+          {record.external_heartbeat_checked_at && (
+            <div className="text-xs text-muted-foreground">
+              Validated{" "}
+              {formatDistance(
+                new Date(record.external_heartbeat_checked_at),
+                new Date(),
+                { addSuffix: true },
+              )}
+            </div>
+          )}
+        </div>
+      )}
+    </AsideSection>
+  );
+};

package/src/components/atomic-crm/contacts/ContactListFilter.tsx

@@ -1,5 +1,5 @@
 import { endOfYesterday, startOfMonth, startOfWeek, subMonths } from "date-fns";
-import { CheckSquare, Clock, Tag, TrendingUp, Users } from "lucide-react";
+import { Activity, CheckSquare, Clock, HeartPulse, Tag, TrendingUp, Users } from "lucide-react";
 import { FilterLiveForm, useGetIdentity, useGetList } from "ra-core";
 import { ToggleFilterButton } from "@/components/admin/toggle-filter-button";
 import { SearchInput } from "@/components/admin/search-input";
@@ -69,6 +69,52 @@ export const ContactListFilter = () => {
         />
       </FilterCategory>
 
+      <FilterCategory label="Engagement" icon={<Activity />}>
+        <ToggleFilterButton
+          className="w-full justify-between"
+          label="Strong"
+          value={{ internal_heartbeat_status: "strong" }}
+        />
+        <ToggleFilterButton
+          className="w-full justify-between"
+          label="Active"
+          value={{ internal_heartbeat_status: "active" }}
+        />
+        <ToggleFilterButton
+          className="w-full justify-between"
+          label="Cooling"
+          value={{ internal_heartbeat_status: "cooling" }}
+        />
+        <ToggleFilterButton
+          className="w-full justify-between"
+          label="Cold"
+          value={{ internal_heartbeat_status: "cold" }}
+        />
+        <ToggleFilterButton
+          className="w-full justify-between"
+          label="Dormant"
+          value={{ internal_heartbeat_status: "dormant" }}
+        />
+      </FilterCategory>
+
+      <FilterCategory label="Validation" icon={<HeartPulse />}>
+        <ToggleFilterButton
+          className="w-full justify-between"
+          label="Valid Email"
+          value={{ email_validation_status: "valid" }}
+        />
+        <ToggleFilterButton
+          className="w-full justify-between"
+          label="Risky Email"
+          value={{ email_validation_status: "risky" }}
+        />
+        <ToggleFilterButton
+          className="w-full justify-between"
+          label="Invalid Email"
+          value={{ email_validation_status: "invalid" }}
+        />
+      </FilterCategory>
+
       <FilterCategory label="Status" icon={<TrendingUp />}>
         {noteStatuses.map((status) => (
           <ToggleFilterButton

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

@@ -5,6 +5,8 @@ import {
   name,
   phone,
   random,
+  date,
+  datatype,
 } from "faker/locale/en_US";
 
 import {
@@ -75,6 +77,38 @@ export const generateContacts = (db: Db, size = 500): Required<Contact>[] => {
     const first_seen = randomDate(new Date(company.created_at)).toISOString();
     const last_seen = first_seen;
 
+    // Heartbeat generation
+    const daysInactive = datatype.number({ min: 0, max: 365 });
+    
+    const computeScore = (days: number): number => {
+      if (days <= 7) return datatype.number({ min: 80, max: 100 });
+      if (days <= 30) return datatype.number({ min: 60, max: 79 });
+      if (days <= 90) return datatype.number({ min: 40, max: 59 });
+      if (days <= 180) return datatype.number({ min: 20, max: 39 });
+      return datatype.number({ min: 0, max: 19 });
+    };
+
+    const score = computeScore(daysInactive);
+    
+    // Internal heartbeat (70% populated)
+    const internalHeartbeat = Math.random() > 0.3 ? {
+      internal_heartbeat_score: score,
+      internal_heartbeat_status:
+        score >= 80 ? 'strong' :
+        score >= 60 ? 'active' :
+        score >= 40 ? 'cooling' :
+        score >= 20 ? 'cold' : 'dormant',
+      internal_heartbeat_updated_at: date.recent(7).toISOString(),
+    } : {};
+
+    // External heartbeat (50% populated)
+    const externalHeartbeat = Math.random() > 0.5 ? {
+      external_heartbeat_status: random.arrayElement(['valid', 'warning', 'invalid', 'unknown']),
+      external_heartbeat_checked_at: date.recent(30).toISOString(),
+      email_validation_status: random.arrayElement(['valid', 'risky', 'invalid', 'unknown']),
+      linkedin_profile_status: random.arrayElement(['active', 'inactive', 'not_found', 'unknown']),
+    } : {};
+
     return {
       id,
       first_name,
@@ -98,6 +132,9 @@ export const generateContacts = (db: Db, size = 500): Required<Contact>[] => {
       sales_id: company.sales_id,
       nb_tasks: 0,
       linkedin_url: null,
+      ...internalHeartbeat,
+      ...externalHeartbeat,
+      days_since_last_activity: daysInactive,
     };
   });
 };

package/src/components/atomic-crm/setup/SupabaseSetupWizard.tsx

@@ -10,7 +10,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Alert, AlertDescription } from "@/components/ui/alert";
-import { Loader2, Database, CheckCircle, AlertCircle } from "lucide-react";
+import { Loader2, Database, CheckCircle, AlertCircle, ExternalLink, Check } from "lucide-react";
 import {
   saveSupabaseConfig,
   validateSupabaseConnection,
@@ -24,6 +24,77 @@ interface SupabaseSetupWizardProps {
   canClose?: boolean;
 }
 
+/**
+ * Normalizes Supabase URL input - accepts either full URL or just project ID
+ */
+function normalizeSupabaseUrl(input: string): string {
+  const trimmed = input.trim();
+  if (!trimmed) return "";
+
+  // If it starts with http:// or https://, treat as full URL
+  if (trimmed.startsWith("http://") || trimmed.startsWith("https://")) {
+    return trimmed;
+  }
+
+  // Otherwise, treat as project ID and construct full URL
+  return `https://${trimmed}.supabase.co`;
+}
+
+/**
+ * Validates if input looks like a valid Supabase URL or project ID
+ */
+function validateUrlFormat(input: string): { valid: boolean; message?: string } {
+  const trimmed = input.trim();
+  if (!trimmed) return { valid: false };
+
+  // Check if it's a full URL
+  if (trimmed.startsWith("http://") || trimmed.startsWith("https://")) {
+    try {
+      const url = new URL(trimmed);
+      if (url.hostname.endsWith(".supabase.co")) {
+        return { valid: true, message: "Valid Supabase URL" };
+      }
+      return { valid: false, message: "URL must be a Supabase domain" };
+    } catch {
+      return { valid: false, message: "Invalid URL format" };
+    }
+  }
+
+  // Check if it's a project ID (alphanumeric, typically 20 chars)
+  if (/^[a-z0-9]+$/.test(trimmed)) {
+    return { valid: true, message: "Valid project ID (will expand to full URL)" };
+  }
+
+  return { valid: false, message: "Enter full URL or project ID" };
+}
+
+/**
+ * Validates if input looks like a valid Supabase API key
+ */
+function validateKeyFormat(input: string): { valid: boolean; message?: string } {
+  const trimmed = input.trim();
+  if (!trimmed) return { valid: false };
+
+  // New publishable keys start with "sb_publishable_" followed by key content
+  if (trimmed.startsWith("sb_publishable_")) {
+    // Check that there's actual key content after the prefix (at least 20 chars)
+    if (trimmed.length > "sb_publishable_".length + 20) {
+      return { valid: true, message: "Valid publishable key format" };
+    }
+    return { valid: false, message: "Publishable key seems incomplete" };
+  }
+
+  // Legacy anon keys are JWT tokens starting with "eyJ"
+  if (trimmed.startsWith("eyJ")) {
+    if (trimmed.length > 100) {
+      return { valid: true, message: "Valid anon key format" };
+    }
+    return { valid: false, message: "Anon key seems incomplete" };
+  }
+
+  return { valid: false, message: "Must be a valid Supabase API key (anon or publishable)" };
+}
+
 export function SupabaseSetupWizard({
   open,
   onComplete,
@@ -33,15 +104,21 @@ export function SupabaseSetupWizard({
   const [url, setUrl] = useState("");
   const [anonKey, setAnonKey] = useState("");
   const [error, setError] = useState<string | null>(null);
+  const [urlTouched, setUrlTouched] = useState(false);
+  const [keyTouched, setKeyTouched] = useState(false);
 
   const handleValidateAndSave = async () => {
     setError(null);
     setStep("validating");
 
-    const result = await validateSupabaseConnection(url, anonKey);
+    // Normalize the URL before validation
+    const normalizedUrl = normalizeSupabaseUrl(url);
+    const trimmedKey = anonKey.trim();
+
+    const result = await validateSupabaseConnection(normalizedUrl, trimmedKey);
 
     if (result.valid) {
-      saveSupabaseConfig({ url, anonKey });
+      saveSupabaseConfig({ url: normalizedUrl, anonKey: trimmedKey });
       setStep("success");
 
       // Reload after short delay to apply new config
@@ -55,6 +132,12 @@ export function SupabaseSetupWizard({
     }
   };
 
+  // Get validation states
+  const urlValidation = url ? validateUrlFormat(url) : { valid: false };
+  const keyValidation = anonKey ? validateKeyFormat(anonKey) : { valid: false };
+  const normalizedUrl = url ? normalizeSupabaseUrl(url) : "";
+  const showUrlExpansion = url && !url.startsWith("http") && urlValidation.valid;
+
   const handleClose = () => {
     if (canClose) {
       onComplete();
@@ -90,9 +173,10 @@ export function SupabaseSetupWizard({
                     href="https://supabase.com"
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="underline text-primary"
+                    className="underline text-primary inline-flex items-center gap-1"
                   >
                     supabase.com
+                    <ExternalLink className="h-3 w-3" />
                   </a>
                 </AlertDescription>
               </Alert>
@@ -100,11 +184,23 @@ export function SupabaseSetupWizard({
               <div className="space-y-2">
                 <h4 className="font-medium text-sm">What you'll need:</h4>
                 <ul className="list-disc list-inside text-sm text-muted-foreground space-y-1">
-                  <li>Your Supabase project URL</li>
-                  <li>Your anonymous (anon) API key</li>
+                  <li>Your Supabase project URL or project ID</li>
+                  <li>Your API key (anon or publishable key)</li>
                 </ul>
               </div>
 
+              <div className="space-y-2">
+                <a
+                  href="https://supabase.com/docs/guides/api#api-url-and-keys"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-sm text-primary hover:underline inline-flex items-center gap-1"
+                >
+                  Where do I find these?
+                  <ExternalLink className="h-3 w-3" />
+                </a>
+              </div>
+
               <Button onClick={() => setStep("credentials")} className="w-full">
                 Continue
               </Button>
@@ -130,30 +226,80 @@ export function SupabaseSetupWizard({
               )}
 
               <div className="space-y-2">
-                <Label htmlFor="supabase-url">Supabase URL</Label>
-                <Input
-                  id="supabase-url"
-                  placeholder="https://xxxxx.supabase.co"
-                  value={url}
-                  onChange={(e) => setUrl(e.target.value)}
-                />
-                <p className="text-xs text-muted-foreground">
-                  Found in Project Settings → API
-                </p>
+                <Label htmlFor="supabase-url">Project URL or ID</Label>
+                <div className="relative">
+                  <Input
+                    id="supabase-url"
+                    placeholder="xxxxx or https://xxxxx.supabase.co"
+                    value={url}
+                    onChange={(e) => {
+                      setUrl(e.target.value);
+                      setUrlTouched(true);
+                    }}
+                    onBlur={() => setUrlTouched(true)}
+                    className={
+                      urlTouched && url
+                        ? urlValidation.valid
+                          ? "pr-8 border-green-500"
+                          : "pr-8 border-destructive"
+                        : ""
+                    }
+                  />
+                  {urlTouched && url && urlValidation.valid && (
+                    <Check className="absolute right-2 top-1/2 -translate-y-1/2 h-4 w-4 text-green-500" />
+                  )}
+                </div>
+                {showUrlExpansion && (
+                  <div className="flex items-start gap-1.5 text-xs text-green-600 dark:text-green-400">
+                    <Check className="h-3 w-3 mt-0.5 flex-shrink-0" />
+                    <span>Will expand to: {normalizedUrl}</span>
+                  </div>
+                )}
+                {urlTouched && url && urlValidation.message && !urlValidation.valid && (
+                  <p className="text-xs text-destructive">{urlValidation.message}</p>
+                )}
+                {(!urlTouched || !url) && (
+                  <p className="text-xs text-muted-foreground">
+                    Enter full URL or just the project ID (from Project Settings → API)
+                  </p>
+                )}
               </div>
 
               <div className="space-y-2">
-                <Label htmlFor="anon-key">Anonymous Key</Label>
-                <Input
-                  id="anon-key"
-                  type="password"
-                  placeholder="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
-                  value={anonKey}
-                  onChange={(e) => setAnonKey(e.target.value)}
-                />
-                <p className="text-xs text-muted-foreground">
-                  Found in Project Settings → API → Project API keys
-                </p>
+                <Label htmlFor="anon-key">API Key</Label>
+                <div className="relative">
+                  <Input
+                    id="anon-key"
+                    type="password"
+                    placeholder="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
+                    value={anonKey}
+                    onChange={(e) => {
+                      setAnonKey(e.target.value);
+                      setKeyTouched(true);
+                    }}
+                    onBlur={() => setKeyTouched(true)}
+                    className={
+                      keyTouched && anonKey
+                        ? keyValidation.valid
+                          ? "pr-8 border-green-500"
+                          : "pr-8 border-destructive"
+                        : ""
+                    }
+                  />
+                  {keyTouched && anonKey && keyValidation.valid && (
+                    <Check className="absolute right-2 top-1/2 -translate-y-1/2 h-4 w-4 text-green-500" />
+                  )}
+                </div>
+                {keyTouched && anonKey && keyValidation.message && (
+                  <p className={`text-xs ${keyValidation.valid ? "text-green-600 dark:text-green-400" : "text-destructive"}`}>
+                    {keyValidation.message}
+                  </p>
+                )}
+                {(!keyTouched || !anonKey) && (
+                  <p className="text-xs text-muted-foreground">
+                    Anon or publishable key (from Project Settings → API)
+                  </p>
+                )}
               </div>
 
               <div className="flex gap-2">
@@ -166,7 +312,7 @@ export function SupabaseSetupWizard({
                 </Button>
                 <Button
                   onClick={handleValidateAndSave}
-                  disabled={!url || !anonKey}
+                  disabled={!urlValidation.valid || !keyValidation.valid}
                   className="flex-1"
                 >
                   Connect

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

@@ -142,6 +142,26 @@ export type Contact = {
   phone_jsonb: PhoneNumberAndType[];
   nb_tasks?: number;
   company_name?: string;
+
+  // Internal Heartbeat
+  internal_heartbeat_score?: number;
+  internal_heartbeat_status?: string; // 'strong' | 'active' | 'cooling' | 'cold' | 'dormant'
+  internal_heartbeat_updated_at?: string;
+
+  // External Heartbeat
+  external_heartbeat_status?: string; // 'valid' | 'warning' | 'invalid' | 'unknown'
+  external_heartbeat_checked_at?: string;
+  email_validation_status?: string; // 'valid' | 'risky' | 'invalid' | 'unknown'
+  email_last_bounced_at?: string;
+  linkedin_profile_status?: string; // 'active' | 'inactive' | 'not_found' | 'unknown'
+  employment_verified_at?: string;
+
+  // View-computed fields
+  nb_completed_tasks?: number;
+  task_completion_rate?: number;
+  last_note_date?: string;
+  last_task_activity?: string;
+  days_since_last_activity?: number;
 } & Pick<RaRecord, "id">;
 
 export type ContactNote = {

package/src/lib/supabase-config.ts

@@ -78,9 +78,18 @@ export async function validateSupabaseConnection(
       return { valid: false, error: 'Invalid URL format' };
     }
 
-    // Basic anon key validation (JWT format)
-    if (!anonKey.startsWith('eyJ')) {
-      return { valid: false, error: 'Invalid anon key format' };
+    // Basic API key validation (supports both JWT anon keys and publishable keys)
+    const isJwtKey = anonKey.startsWith('eyJ');
+    const isPublishableKey = anonKey.startsWith('sb_publishable_');
+
+    if (!isJwtKey && !isPublishableKey) {
+      return { valid: false, error: 'Invalid API key format (must be anon or publishable key)' };
+    }
+
+    // Skip network validation for publishable keys as they might not be standard JWTs
+    // compatible with the Postgrest root endpoint check
+    if (isPublishableKey) {
+      return { valid: true };
     }
 
     // Test connection by making a simple request