realtimex-crm 0.9.1 → 0.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "realtimex-crm",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "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",
@@ -68,6 +68,7 @@
     "registry:gen": "node ./scripts/generate-registry.mjs",
     "ghpages:deploy": "node ./scripts/ghpages-deploy.mjs",
     "supabase:remote:init": "node ./scripts/supabase-remote-init.mjs",
+    "supabase:configure:cron": "bash ./scripts/configure-webhook-cron.sh",
     "prepare": "husky"
   },
   "dependencies": {

package/src/components/atomic-crm/activities/ActivitiesPage.tsx

@@ -0,0 +1,16 @@
+import { ActivityFeed } from "./ActivityFeed";
+
+export const ActivitiesPage = () => {
+  return (
+    <div className="container mx-auto py-6">
+      <div className="mb-6">
+        <h1 className="text-3xl font-bold">Activity Timeline</h1>
+        <p className="text-muted-foreground mt-2">
+          All activities from ingestion channels and manual entries
+        </p>
+      </div>
+
+      <ActivityFeed />
+    </div>
+  );
+};

package/src/components/atomic-crm/activities/ActivityFeed.tsx

@@ -0,0 +1,212 @@
+import { useEffect, useMemo } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { supabase } from "@/components/atomic-crm/providers/supabase/supabase";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Mail, Phone, MessageSquare, StickyNote, Play, Calendar, User, Clock, CheckCircle2, AlertCircle } from "lucide-react";
+import { formatDistanceToNow } from "date-fns";
+import { Button } from "@/components/ui/button";
+
+interface ActivityFeedProps {
+  contactId?: number;
+  salesId?: number; // Optional: filter by agent
+  className?: string;
+}
+
+export const ActivityFeed = ({ contactId, salesId, className }: ActivityFeedProps) => {
+  const queryClient = useQueryClient();
+  const queryKey = useMemo(() => ["activities", contactId, salesId], [contactId, salesId]);
+
+  // 1. Initial Fetch
+  const { data: activities, isLoading } = useQuery({
+    queryKey,
+    queryFn: async () => {
+      let query = supabase
+        .from("activities")
+        .select(`
+            *,
+            sales:sales_id (first_name, last_name)
+        `)
+        .order("created_at", { ascending: false })
+        .limit(50);
+
+      if (contactId) {
+        query = query.eq("contact_id", contactId);
+      }
+      if (salesId) {
+        query = query.eq("sales_id", salesId);
+      }
+
+      const { data, error } = await query;
+      if (error) throw error;
+      return data;
+    },
+  });
+
+  // 2. Realtime Subscription
+  useEffect(() => {
+    const channel = supabase
+      .channel("activities-feed")
+      .on(
+        "postgres_changes",
+        {
+          event: "*",
+          schema: "public",
+          table: "activities",
+          filter: contactId ? `contact_id=eq.${contactId}` : undefined,
+        },
+        (payload) => {
+          console.log("Realtime update:", payload);
+          // Invalidate query to refetch (simplest way to keep sync)
+          queryClient.invalidateQueries({ queryKey });
+        }
+      )
+      .subscribe();
+
+    return () => {
+      supabase.removeChannel(channel);
+    };
+  }, [contactId, queryClient, queryKey]);
+
+  if (isLoading) {
+    return (
+      <div className={`space-y-4 ${className}`}>
+        <Skeleton className="h-24 w-full" />
+        <Skeleton className="h-24 w-full" />
+        <Skeleton className="h-24 w-full" />
+      </div>
+    );
+  }
+
+  if (!activities || activities.length === 0) {
+    return (
+      <div className={`text-center py-8 text-muted-foreground bg-muted/20 rounded-lg border border-dashed ${className}`}>
+        No activities yet.
+      </div>
+    );
+  }
+
+  return (
+    <div className={`space-y-4 ${className}`}>
+        {activities.map((activity) => (
+            <ActivityCard key={activity.id} activity={activity} />
+        ))}
+    </div>
+  );
+};
+
+const ActivityCard = ({ activity }: { activity: any }) => {
+  const isPending = activity.processing_status === "raw" || activity.processing_status === "processing";
+  const isFailed = activity.processing_status === "failed";
+
+  return (
+    <Card className={`relative overflow-hidden transition-all ${isPending ? 'border-blue-200 bg-blue-50/30 dark:bg-blue-950/10' : ''}`}>
+      {isPending && (
+          <div className="absolute top-0 left-0 right-0 h-1 bg-blue-100">
+              <div className="h-full bg-blue-500 animate-progress origin-left w-full"></div>
+          </div>
+      )}
+      
+      <CardHeader className="py-3 px-4 flex flex-row items-start justify-between space-y-0">
+        <div className="flex items-center gap-3">
+          <ActivityIcon type={activity.type} />
+          <div>
+            <CardTitle className="text-base font-medium flex items-center gap-2">
+              <span className="capitalize">{activity.type}</span>
+              {activity.direction === "inbound" && (
+                  <Badge variant="outline" className="text-[10px] h-5">Inbound</Badge>
+              )}
+               {activity.direction === "outbound" && (
+                  <Badge variant="secondary" className="text-[10px] h-5">Outbound</Badge>
+              )}
+            </CardTitle>
+            <div className="text-xs text-muted-foreground flex items-center gap-2 mt-0.5">
+              <Clock className="h-3 w-3" />
+              {formatDistanceToNow(new Date(activity.created_at), { addSuffix: true })}
+              {activity.sales && (
+                  <>
+                    <span>•</span>
+                    <User className="h-3 w-3" />
+                    {activity.sales.first_name} {activity.sales.last_name}
+                  </>
+              )}
+            </div>
+          </div>
+        </div>
+        
+        <StatusBadge status={activity.processing_status} />
+      </CardHeader>
+
+      <CardContent className="pb-4 px-4 pt-0">
+        {/* Content Body */}
+        <div className="mt-2 text-sm">
+            {isPending ? (
+                <div className="flex items-center gap-2 text-muted-foreground italic">
+                    <div className="h-2 w-2 bg-blue-500 rounded-full animate-bounce" style={{ animationDelay: '0ms' }}></div>
+                    <div className="h-2 w-2 bg-blue-500 rounded-full animate-bounce" style={{ animationDelay: '150ms' }}></div>
+                    <div className="h-2 w-2 bg-blue-500 rounded-full animate-bounce" style={{ animationDelay: '300ms' }}></div>
+                    <span>Processing content...</span>
+                </div>
+            ) : isFailed ? (
+                 <p className="text-destructive">Processing failed.</p>
+            ) : (
+                <div className="space-y-2">
+                    {/* Transcript / Text */}
+                    {activity.processed_data?.transcript ? (
+                        <div className="bg-muted/50 p-3 rounded-md border text-foreground/90 whitespace-pre-wrap">
+                            {activity.processed_data.transcript}
+                        </div>
+                    ) : activity.raw_data?.source_type === "text" ? (
+                        <p className="whitespace-pre-wrap">{activity.raw_data.content}</p>
+                    ) : null}
+                    
+                    {/* Audio Player */}
+                    {activity.raw_data?.source_type === "url" && (
+                         <div className="flex items-center gap-2 bg-secondary p-2 rounded-md w-fit">
+                             <Button size="icon" variant="ghost" className="h-8 w-8 rounded-full">
+                                 <Play className="h-4 w-4" />
+                             </Button>
+                             <span className="text-xs font-mono">Audio Recording</span>
+                         </div>
+                    )}
+                    
+                    {/* Atomic Facts / Summary */}
+                    {activity.processed_data?.summary && (
+                        <div className="bg-yellow-50 dark:bg-yellow-950/20 p-2 rounded border border-yellow-200 dark:border-yellow-800 text-xs">
+                            <span className="font-semibold text-yellow-700 dark:text-yellow-500 block mb-1">Summary:</span>
+                            {activity.processed_data.summary}
+                        </div>
+                    )}
+                </div>
+            )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+const ActivityIcon = ({ type }: { type: string }) => {
+  const className = "h-5 w-5 text-muted-foreground";
+  switch (type) {
+    case "email": return <Mail className={className} />;
+    case "call": return <Phone className={className} />;
+    case "sms": return <MessageSquare className={className} />;
+    case "meeting": return <Calendar className={className} />;
+    default: return <StickyNote className={className} />;
+  }
+};
+
+const StatusBadge = ({ status }: { status: string }) => {
+    switch (status) {
+        case "raw":
+        case "processing":
+            return <Badge variant="outline" className="border-blue-200 text-blue-600 bg-blue-50">Processing</Badge>;
+        case "completed":
+            return <CheckCircle2 className="h-4 w-4 text-green-500" />;
+        case "failed":
+            return <AlertCircle className="h-4 w-4 text-destructive" />;
+        default:
+            return null;
+    }
+}

package/src/components/atomic-crm/activities/FileUpload.tsx

@@ -0,0 +1,359 @@
+import { useState, useCallback, useEffect } from 'react';
+import { useDropzone } from 'react-dropzone';
+import { useNotify, useGetIdentity, useGetList } from 'ra-core';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Progress } from '@/components/ui/progress';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Label } from '@/components/ui/label';
+import { Upload, FileIcon, CheckCircle, XCircle, Loader2 } from 'lucide-react';
+import { getSupabaseConfig } from '@/lib/supabase-config';
+
+interface UploadFile {
+  file: File;
+  status: 'pending' | 'uploading' | 'success' | 'error';
+  progress: number;
+  activityId?: string;
+  error?: string;
+}
+
+interface IngestionProvider {
+  id: string;
+  name: string;
+  provider_code: string;
+  ingestion_key: string;
+}
+
+export const FileUpload = () => {
+  const [files, setFiles] = useState<UploadFile[]>([]);
+  const [activityType, setActivityType] = useState<string>('note');
+  const [selectedProvider, setSelectedProvider] = useState<string>('');
+
+  const notify = useNotify();
+  const { data: identity } = useGetIdentity();
+
+  // Load ingestion providers using React-Admin hook (cleaner than manual useEffect)
+  const { data: providers = [] } = useGetList<IngestionProvider>('ingestion_providers', {
+    filter: { is_active: true },
+    pagination: { page: 1, perPage: 100 },
+    sort: { field: 'created_at', order: 'DESC' }
+  });
+
+  // Auto-select first provider when data loads
+  useEffect(() => {
+    if (providers.length > 0 && !selectedProvider) {
+      setSelectedProvider(providers[0].id);
+    }
+  }, [providers, selectedProvider]);
+
+  const onDrop = useCallback((acceptedFiles: File[]) => {
+    const newFiles = acceptedFiles.map(file => ({
+      file,
+      status: 'pending' as const,
+      progress: 0
+    }));
+
+    setFiles(prev => [...prev, ...newFiles]);
+  }, []);
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    // Accept all file types (removed restrictive accept prop)
+    // Only block dangerous executable files for security
+    validator: (file) => {
+      // Guard against missing file name
+      if (!file.name) {
+        return null; // Allow files without names (edge case)
+      }
+
+      const dangerous = ['.exe', '.bat', '.cmd', '.com', '.scr', '.vbs', '.ps1', '.msi'];
+      const fileName = file.name.toLowerCase();
+      const dotIndex = fileName.lastIndexOf('.');
+
+      // If no extension, allow the file
+      if (dotIndex === -1) {
+        return null;
+      }
+
+      const ext = fileName.slice(dotIndex);
+
+      if (dangerous.includes(ext)) {
+        return {
+          code: 'dangerous-file',
+          message: 'Executable files are not allowed for security reasons'
+        };
+      }
+      return null;
+    }
+  });
+
+  const uploadFile = async (index: number) => {
+    const fileToUpload = files[index];
+    const provider = providers.find(p => p.id === selectedProvider);
+
+    if (!provider) {
+      notify('Please select an ingestion channel', { type: 'error' });
+      return;
+    }
+
+    const config = getSupabaseConfig();
+    const webhookUrl = `${config.url}/functions/v1/ingest-activity`;
+
+    // Update status to uploading
+    setFiles(prev => prev.map((f, i) =>
+      i === index ? { ...f, status: 'uploading', progress: 0 } : f
+    ));
+
+    try {
+      const formData = new FormData();
+      formData.append('file', fileToUpload.file);
+      formData.append('type', activityType);
+      formData.append('from', identity?.email || 'manual-upload');
+      formData.append('subject', `File Upload: ${fileToUpload.file.name}`);
+
+      const xhr = new XMLHttpRequest();
+
+      // Track upload progress
+      xhr.upload.addEventListener('progress', (e) => {
+        if (e.lengthComputable) {
+          const progress = Math.round((e.loaded / e.total) * 100);
+          setFiles(prev => prev.map((f, i) =>
+            i === index ? { ...f, progress } : f
+          ));
+        }
+      });
+
+      xhr.addEventListener('load', () => {
+        if (xhr.status >= 200 && xhr.status < 300) {
+          const response = JSON.parse(xhr.responseText);
+          setFiles(prev => prev.map((f, i) =>
+            i === index ? { ...f, status: 'success', progress: 100, activityId: response.id } : f
+          ));
+          notify(`File uploaded: ${fileToUpload.file.name}`, { type: 'success' });
+        } else {
+          throw new Error(`Upload failed with status ${xhr.status}`);
+        }
+      });
+
+      xhr.addEventListener('error', () => {
+        setFiles(prev => prev.map((f, i) =>
+          i === index ? { ...f, status: 'error', error: 'Network error' } : f
+        ));
+        notify(`Upload failed: ${fileToUpload.file.name}`, { type: 'error' });
+      });
+
+      xhr.open('POST', webhookUrl);
+      // Security: Move ingestion key from URL to header (prevents key leakage in logs)
+      xhr.setRequestHeader('x-ingestion-key', provider.ingestion_key);
+      xhr.send(formData);
+
+    } catch (error) {
+      setFiles(prev => prev.map((f, i) =>
+        i === index ? { ...f, status: 'error', error: String(error) } : f
+      ));
+      notify(`Upload failed: ${fileToUpload.file.name}`, { type: 'error' });
+    }
+  };
+
+  const uploadAll = async () => {
+    const pendingFiles = files
+      .map((f, index) => ({ file: f, index }))
+      .filter(({ file }) => file.status === 'pending');
+
+    // Upload all files in parallel for better performance
+    // Browsers manage connection limits automatically (usually 6 concurrent)
+    await Promise.all(
+      pendingFiles.map(({ index }) => uploadFile(index))
+    );
+  };
+
+  const clearCompleted = () => {
+    setFiles(prev => prev.filter(f => f.status !== 'success'));
+  };
+
+  const formatFileSize = (bytes: number) => {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
+  };
+
+  return (
+    <div className="p-6 max-w-4xl mx-auto space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>Upload Files</CardTitle>
+          <CardDescription>
+            Upload documents, images, audio, or video files to create activities.
+            Files are automatically stored and linked to your account.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {/* Configuration */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="provider">Ingestion Channel</Label>
+              <Select value={selectedProvider} onValueChange={setSelectedProvider}>
+                <SelectTrigger id="provider">
+                  <SelectValue placeholder="Select channel..." />
+                </SelectTrigger>
+                <SelectContent>
+                  {providers.map(provider => (
+                    <SelectItem key={provider.id} value={provider.id}>
+                      {provider.name} ({provider.provider_code})
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="type">Activity Type</Label>
+              <Select value={activityType} onValueChange={setActivityType}>
+                <SelectTrigger id="type">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="note">Note</SelectItem>
+                  <SelectItem value="email">Email</SelectItem>
+                  <SelectItem value="call">Call Recording</SelectItem>
+                  <SelectItem value="meeting">Meeting Recording</SelectItem>
+                  <SelectItem value="other">Other</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          {/* Dropzone */}
+          <div
+            {...getRootProps()}
+            className={`
+              border-2 border-dashed rounded-lg p-12 text-center cursor-pointer
+              transition-all duration-200
+              ${isDragActive
+                ? 'border-green-500 bg-green-50 scale-[1.02] shadow-lg'
+                : 'border-gray-300 hover:border-primary/50 hover:bg-gray-50'
+              }
+            `}
+          >
+            <input {...getInputProps()} />
+            <Upload className="w-12 h-12 mx-auto mb-4 text-gray-400" />
+            {isDragActive ? (
+              <p className="text-lg font-medium">Drop files here...</p>
+            ) : (
+              <>
+                <p className="text-lg font-medium mb-2">
+                  Drag & drop files here, or click to select
+                </p>
+                <p className="text-sm text-gray-500">
+                  Supports all file types (executables blocked for security)
+                </p>
+              </>
+            )}
+          </div>
+
+          {/* File List */}
+          {files.length > 0 && (
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <h3 className="font-medium">Files ({files.length})</h3>
+                <div className="space-x-2">
+                  <Button
+                    size="sm"
+                    onClick={uploadAll}
+                    disabled={!files.some(f => f.status === 'pending')}
+                  >
+                    Upload All
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    onClick={clearCompleted}
+                    disabled={!files.some(f => f.status === 'success')}
+                  >
+                    Clear Completed
+                  </Button>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                {files.map((fileItem, index) => (
+                  <div
+                    key={index}
+                    className="border rounded-lg p-4 space-y-2"
+                  >
+                    <div className="flex items-start justify-between gap-4">
+                      <div className="flex items-start gap-3 flex-1 min-w-0">
+                        <FileIcon className="w-5 h-5 mt-0.5 flex-shrink-0 text-gray-400" />
+                        <div className="flex-1 min-w-0">
+                          <p className="font-medium truncate">
+                            {fileItem.file.name}
+                          </p>
+                          <p className="text-sm text-gray-500">
+                            {formatFileSize(fileItem.file.size)}
+                            {fileItem.activityId && (
+                              <span className="ml-2 text-xs">
+                                ID: {fileItem.activityId.substring(0, 8)}...
+                              </span>
+                            )}
+                          </p>
+                        </div>
+                      </div>
+
+                      <div className="flex items-center gap-2 flex-shrink-0">
+                        {fileItem.status === 'pending' && (
+                          <Button
+                            size="sm"
+                            onClick={() => uploadFile(index)}
+                          >
+                            Upload
+                          </Button>
+                        )}
+                        {fileItem.status === 'uploading' && (
+                          <Loader2 className="w-5 h-5 animate-spin text-primary" />
+                        )}
+                        {fileItem.status === 'success' && (
+                          <CheckCircle className="w-5 h-5 text-green-500" />
+                        )}
+                        {fileItem.status === 'error' && (
+                          <XCircle className="w-5 h-5 text-red-500" />
+                        )}
+                      </div>
+                    </div>
+
+                    {/* Progress bar */}
+                    {fileItem.status === 'uploading' && (
+                      <Progress value={fileItem.progress} className="h-1" />
+                    )}
+
+                    {/* Error message */}
+                    {fileItem.status === 'error' && fileItem.error && (
+                      <p className="text-sm text-red-500">
+                        Error: {fileItem.error}
+                      </p>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Info Card */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">How it works</CardTitle>
+        </CardHeader>
+        <CardContent className="text-sm text-gray-600 space-y-2">
+          <p>• Files are uploaded directly to secure storage (no database bloat)</p>
+          <p>• Each file creates an activity record for tracking and search</p>
+          <p>• Large files are handled automatically (no size limits)</p>
+          <p>• Files are linked to your selected ingestion channel</p>
+          <p>• Activities appear in the Activity Feed immediately</p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};

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

@@ -9,6 +9,7 @@ import { NoteCreate, NotesIterator } from "../notes";
 import type { Contact } from "../types";
 import { Avatar } from "./Avatar";
 import { ContactAside } from "./ContactAside";
+import { ActivityFeed } from "../activities/ActivityFeed";
 
 export const ContactShow = () => (
   <ShowBase>
@@ -57,16 +58,33 @@ const ContactShowContent = () => {
                 </ReferenceField>
               </div>
             </div>
-            <ReferenceManyField
-              target="contact_id"
-              reference="contactNotes"
-              sort={{ field: "date", order: "DESC" }}
-              empty={
-                <NoteCreate reference="contacts" showStatus className="mt-4" />
-              }
-            >
-              <NotesIterator reference="contacts" showStatus />
-            </ReferenceManyField>
+
+            {/* Activity Timeline - Shows processing status (temporary) */}
+            <div className="mt-6">
+                <h3 className="text-lg font-semibold mb-4">Activity Timeline</h3>
+                <p className="text-sm text-muted-foreground mb-3">
+                  Real-time processing status of incoming activities
+                </p>
+                <ActivityFeed contactId={record.id as number} />
+            </div>
+
+            {/* Notes - Permanent record of outcomes */}
+            <div className="mt-8">
+                <h3 className="text-lg font-semibold mb-4">Notes</h3>
+                <p className="text-sm text-muted-foreground mb-3">
+                  Permanent record of interactions and outcomes
+                </p>
+                <ReferenceManyField
+                  target="contact_id"
+                  reference="contactNotes"
+                  sort={{ field: "date", order: "DESC" }}
+                  empty={
+                    <NoteCreate reference="contacts" showStatus className="mt-4" />
+                  }
+                >
+                  <NotesIterator reference="contacts" showStatus />
+                </ReferenceManyField>
+            </div>
           </CardContent>
         </Card>
       </div>