realtimex-crm 0.9.1 → 0.9.2

package/src/components/atomic-crm/integrations/CreateChannelDialog.tsx

@@ -0,0 +1,139 @@
+import { useState } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useDataProvider, useNotify } from "ra-core";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Loader2 } from "lucide-react";
+
+interface CreateChannelDialogProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export const CreateChannelDialog = ({
+  open,
+  onClose,
+}: CreateChannelDialogProps) => {
+  const [providerCode, setProviderCode] = useState<string>("twilio");
+  const [name, setName] = useState("");
+  const [authToken, setAuthToken] = useState("");
+  const dataProvider = useDataProvider();
+  const notify = useNotify();
+  const queryClient = useQueryClient();
+
+  const createMutation = useMutation({
+    mutationFn: async () => {
+      // Generate a cryptographically secure random ingestion key
+      const ingestionKey = "ik_live_" + crypto.randomUUID().replace(/-/g, '');
+
+      const config: any = {};
+      if (authToken) {
+          config.auth_token = authToken;
+      }
+
+      await dataProvider.create("ingestion_providers", {
+        data: {
+          name,
+          provider_code: providerCode,
+          is_active: true,
+          config,
+          ingestion_key: ingestionKey
+        },
+      });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["ingestion_providers"] });
+      notify("Ingestion Channel created successfully");
+      onClose();
+      // Reset form
+      setName("");
+      setAuthToken("");
+      setProviderCode("twilio");
+    },
+    onError: (error: Error) => {
+      notify(`Failed to create channel: ${error.message}`, { type: "error" });
+    },
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Add Ingestion Channel</DialogTitle>
+          <DialogDescription>
+            Configure a new source for incoming activities.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid gap-2">
+            <Label htmlFor="name">Channel Name</Label>
+            <Input
+              id="name"
+              placeholder="e.g. US Support Line"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+            />
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="provider">Provider</Label>
+            <Select value={providerCode} onValueChange={setProviderCode}>
+              <SelectTrigger>
+                <SelectValue placeholder="Select provider" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="twilio">Twilio (Voice/SMS)</SelectItem>
+                <SelectItem value="postmark">Postmark (Email)</SelectItem>
+                <SelectItem value="generic">Generic / Internal</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          
+          {providerCode === "twilio" && (
+              <div className="grid gap-2">
+                <Label htmlFor="token">Auth Token (Validation)</Label>
+                <Input
+                  id="token"
+                  type="password"
+                  placeholder="Twilio Auth Token"
+                  value={authToken}
+                  onChange={(e) => setAuthToken(e.target.value)}
+                />
+                <p className="text-xs text-muted-foreground">Required to validate inbound requests.</p>
+              </div>
+          )}
+          
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button
+            onClick={() => createMutation.mutate()}
+            disabled={!name || createMutation.isPending}
+          >
+            {createMutation.isPending && (
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            )}
+            Create Channel
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/components/atomic-crm/integrations/IngestionChannelsTab.tsx

@@ -0,0 +1,188 @@
+import { useState } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useDataProvider, useNotify } from "ra-core";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { Plus, Trash2, Copy, Activity } from "lucide-react";
+import { CreateChannelDialog } from "./CreateChannelDialog";
+import { Badge } from "@/components/ui/badge";
+import { format } from "date-fns";
+import { getSupabaseConfig } from "@/lib/supabase-config";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+
+export const IngestionChannelsTab = () => {
+  const [showCreateDialog, setShowCreateDialog] = useState(false);
+  const [channelToDelete, setChannelToDelete] = useState<string | null>(null);
+  const dataProvider = useDataProvider();
+  const notify = useNotify();
+  const queryClient = useQueryClient();
+
+  const { data: channels, isLoading } = useQuery({
+    queryKey: ["ingestion_providers"],
+    queryFn: async () => {
+      const { data } = await dataProvider.getList("ingestion_providers", {
+        pagination: { page: 1, perPage: 100 },
+        sort: { field: "created_at", order: "DESC" },
+        filter: {},
+      });
+      return data;
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: async (id: string) => {
+      await dataProvider.delete("ingestion_providers", { id, previousData: {} });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["ingestion_providers"] });
+      notify("Channel deleted successfully");
+      setChannelToDelete(null);
+    },
+    onError: () => {
+      notify("Failed to delete channel", { type: "error" });
+    },
+  });
+
+  return (
+    <div className="space-y-4">
+      <div className="flex justify-between items-center">
+        <p className="text-sm text-muted-foreground">
+          Configure inbound channels (Email, Voice, SMS) to ingest activities into your CRM.
+        </p>
+        <Button onClick={() => setShowCreateDialog(true)}>
+          <Plus className="h-4 w-4 mr-2" />
+          Add Channel
+        </Button>
+      </div>
+
+      {isLoading ? (
+        <Card>
+          <CardContent className="py-8 text-center text-muted-foreground">
+            Loading...
+          </CardContent>
+        </Card>
+      ) : channels && channels.length > 0 ? (
+        <div className="grid gap-4 md:grid-cols-2">
+          {channels.map((channel: any) => (
+            <ChannelCard
+              key={channel.id}
+              channel={channel}
+              onDelete={() => setChannelToDelete(channel.id)}
+            />
+          ))}
+        </div>
+      ) : (
+        <Card>
+          <CardContent className="py-12 text-center">
+            <p className="text-muted-foreground mb-4">No ingestion channels configured</p>
+            <Button onClick={() => setShowCreateDialog(true)}>
+              <Plus className="h-4 w-4 mr-2" />
+              Add your first channel
+            </Button>
+          </CardContent>
+        </Card>
+      )}
+
+      <CreateChannelDialog
+        open={showCreateDialog}
+        onClose={() => setShowCreateDialog(false)}
+      />
+
+      <AlertDialog
+        open={channelToDelete !== null}
+        onOpenChange={() => setChannelToDelete(null)}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete Channel?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This will stop all ingestion from this source. This action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={() => channelToDelete && deleteMutation.mutate(channelToDelete)}
+              className="bg-destructive hover:bg-destructive/90"
+            >
+              Delete
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+};
+
+const ChannelCard = ({
+  channel,
+  onDelete,
+}: {
+  channel: any;
+  onDelete: () => void;
+}) => {
+  const notify = useNotify();
+
+  // Get the actual Supabase URL from config (localStorage or env vars)
+  const supabaseConfig = getSupabaseConfig();
+  const webhookUrl = supabaseConfig
+    ? `${supabaseConfig.url}/functions/v1/ingest-activity?key=${channel.ingestion_key}`
+    : `https://your-project.supabase.co/functions/v1/ingest-activity?key=${channel.ingestion_key}`;
+
+  const copyUrl = () => {
+    navigator.clipboard.writeText(webhookUrl);
+    notify("Webhook URL copied to clipboard");
+  };
+
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <div className="flex justify-between items-start">
+          <div className="flex items-center gap-3">
+             <div className="p-2 bg-primary/10 rounded-full">
+                 <Activity className="h-5 w-5 text-primary" />
+             </div>
+             <div>
+                <CardTitle className="text-base">{channel.name}</CardTitle>
+                <div className="flex gap-2 mt-1">
+                <Badge variant="outline">{channel.provider_code}</Badge>
+                {channel.is_active ? (
+                    <Badge className="bg-green-500 hover:bg-green-600">Active</Badge>
+                ) : (
+                    <Badge variant="secondary">Inactive</Badge>
+                )}
+                </div>
+             </div>
+          </div>
+          <Button variant="ghost" size="icon" onClick={onDelete}>
+            <Trash2 className="h-4 w-4 text-destructive" />
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        <div className="space-y-1">
+            <Label className="text-xs text-muted-foreground">Webhook URL</Label>
+            <div className="flex items-center gap-2 font-mono text-xs bg-muted p-2 rounded overflow-hidden">
+            <span className="truncate">{webhookUrl}</span>
+            <Button variant="ghost" size="icon" className="h-6 w-6 ml-auto flex-shrink-0" onClick={copyUrl}>
+                <Copy className="h-3 w-3" />
+            </Button>
+            </div>
+        </div>
+        <div className="text-xs text-muted-foreground">
+          <p>Created: {format(new Date(channel.created_at), "PPP")}</p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};

package/src/components/atomic-crm/integrations/IntegrationsPage.tsx

@@ -1,6 +1,8 @@
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { ApiKeysTab } from "./ApiKeysTab";
 import { WebhooksTab } from "./WebhooksTab";
+import { IngestionChannelsTab } from "./IngestionChannelsTab";
+import { FileUpload } from "../activities/FileUpload";
 
 export const IntegrationsPage = () => {
   return (
@@ -8,17 +10,27 @@ export const IntegrationsPage = () => {
       <div className="mb-6">
         <h1 className="text-3xl font-bold">Integrations</h1>
         <p className="text-muted-foreground mt-2">
-          Manage API keys and webhooks to integrate Atomic CRM with external
+          Manage API keys, webhooks, and ingestion channels to integrate Atomic CRM with external
           systems.
         </p>
       </div>
 
-      <Tabs defaultValue="api-keys">
+      <Tabs defaultValue="ingestion">
         <TabsList className="mb-4">
+          <TabsTrigger value="ingestion">Ingestion Channels</TabsTrigger>
+          <TabsTrigger value="file-upload">File Upload</TabsTrigger>
           <TabsTrigger value="api-keys">API Keys</TabsTrigger>
-          <TabsTrigger value="webhooks">Webhooks</TabsTrigger>
+          <TabsTrigger value="webhooks">Webhooks (Outbound)</TabsTrigger>
         </TabsList>
 
+        <TabsContent value="ingestion">
+          <IngestionChannelsTab />
+        </TabsContent>
+
+        <TabsContent value="file-upload">
+          <FileUpload />
+        </TabsContent>
+
         <TabsContent value="api-keys">
           <ApiKeysTab />
         </TabsContent>

package/supabase/fix_webhook_hardcoded.sql

@@ -0,0 +1,34 @@
+-- ==================================================================================
+-- HARDCODED WEBHOOK FIX (Bypasses Permission Issues)
+-- ==================================================================================
+
+-- 1. Ensure extensions are active
+CREATE EXTENSION IF NOT EXISTS pg_net WITH SCHEMA extensions;
+CREATE EXTENSION IF NOT EXISTS pg_cron WITH SCHEMA extensions;
+
+-- 2. Remove the old dynamic job that relies on missing settings
+SELECT cron.unschedule(jobid) 
+FROM cron.job 
+WHERE jobname = 'webhook-dispatcher';
+
+-- 3. Schedule the new job with HARDCODED credentials
+-- !!! IMPORTANT: Replace [YOUR_SERVICE_ROLE_KEY] below before running !!!
+
+SELECT cron.schedule(
+    'webhook-dispatcher',
+    '* * * * *', -- Run every minute
+    $$
+    select
+      net.http_post(
+          url:='https://xydvyhnspkzcsocewhuy.supabase.co/functions/v1/webhook-dispatcher',
+          headers:=jsonb_build_object(
+              'Content-Type','application/json',
+              'Authorization', 'Bearer [YOUR_SERVICE_ROLE_KEY]'
+          ),
+          body:='{}'::jsonb
+      ) as request_id;
+    $$
+);
+
+-- 4. Check that the job is scheduled
+SELECT jobid, jobname, command FROM cron.job WHERE jobname = 'webhook-dispatcher';

package/supabase/functions/_shared/ingestionGuard.ts

@@ -0,0 +1,128 @@
+import { createErrorResponse } from "./utils.ts";
+import { supabaseAdmin } from "./supabaseAdmin.ts";
+
+/**
+ * Validates the request signature or API key.
+ * Returns the resolved provider config or an error response.
+ * Note: For Twilio, signature validation must be done separately after body parsing
+ * using validateTwilioWebhook()
+ */
+export async function validateIngestionRequest(req: Request) {
+  const url = new URL(req.url);
+  const providerCode = url.searchParams.get("provider");
+
+  // Check for ingestion key in header (preferred) or URL query param (backward compatibility)
+  const ingestionKey = req.headers.get("x-ingestion-key") || url.searchParams.get("key");
+
+  // 1. Internal/Manual API Key (Bearer)
+  const authHeader = req.headers.get("Authorization");
+  if (authHeader?.startsWith("Bearer ak_live_")) {
+    // Validate Internal API Key (already implemented in apiKeyAuth.ts)
+    // For V1, we trust internal keys as "generic" provider
+    return { provider: { id: null, provider_code: "generic", sales_id: null } };
+  }
+
+  // 2. Identify Provider by 'ingestion_key' (Preferred)
+  if (ingestionKey) {
+    const { data: provider, error } = await supabaseAdmin
+      .from("ingestion_providers")
+      .select("*")
+      .eq("ingestion_key", ingestionKey)
+      .eq("is_active", true)
+      .single();
+
+    if (error || !provider) {
+      return { error: createErrorResponse(401, "Invalid Ingestion Key") };
+    }
+
+    return { provider };
+  }
+
+  // 3. Fallback: Identify by Query Param (Legacy/Public Webhooks)
+  if (providerCode === "twilio") {
+      // In this case, we need to find WHICH Twilio config to use.
+      // Usually, we match by the 'To' phone number in the body, but that requires parsing the body first.
+      // For strict security, we REJECT requests without an ingestion_key in the URL.
+      return { error: createErrorResponse(401, "Missing 'key' parameter in webhook URL") };
+  }
+
+  return { error: createErrorResponse(400, "Unknown Provider or Missing Authentication") };
+}
+
+/**
+ * Validates a Twilio webhook request after body parsing
+ * Call this after validateIngestionRequest() and body parsing
+ */
+export async function validateTwilioWebhook(
+  req: Request,
+  authToken: string,
+  body: Record<string, any>
+): Promise<boolean> {
+  return await validateTwilioSignature(req, authToken, body);
+}
+
+/**
+ * Validates Twilio X-Twilio-Signature using HMAC-SHA1
+ * Implementation follows Twilio's security specification:
+ * https://www.twilio.com/docs/usage/security#validating-requests
+ */
+async function validateTwilioSignature(
+  req: Request,
+  authToken: string,
+  body: Record<string, any>
+): Promise<boolean> {
+  const signature = req.headers.get("X-Twilio-Signature");
+  if (!signature) return false;
+
+  try {
+    // 1. Get the full URL (including protocol, host, path, and query params)
+    const url = req.url;
+
+    // 2. Sort POST parameters alphabetically and concatenate
+    const sortedParams = Object.keys(body)
+      .sort()
+      .map((key) => `${key}${body[key]}`)
+      .join("");
+
+    // 3. Concatenate URL + sorted params
+    const data = url + sortedParams;
+
+    // 4. Compute HMAC-SHA1
+    const encoder = new TextEncoder();
+    const keyData = encoder.encode(authToken);
+    const messageData = encoder.encode(data);
+
+    const cryptoKey = await crypto.subtle.importKey(
+      "raw",
+      keyData,
+      { name: "HMAC", hash: "SHA-1" },
+      false,
+      ["sign"]
+    );
+
+    const signatureBuffer = await crypto.subtle.sign("HMAC", cryptoKey, messageData);
+
+    // 5. Convert to Base64
+    const signatureArray = Array.from(new Uint8Array(signatureBuffer));
+    const signatureBase64 = btoa(String.fromCharCode(...signatureArray));
+
+    // 6. Constant-time comparison to prevent timing attacks
+    return constantTimeCompare(signature, signatureBase64);
+  } catch (error) {
+    console.error("Twilio signature validation error:", error);
+    return false;
+  }
+}
+
+/**
+ * Constant-time string comparison to prevent timing attacks
+ */
+function constantTimeCompare(a: string, b: string): boolean {
+  if (a.length !== b.length) return false;
+
+  let result = 0;
+  for (let i = 0; i < a.length; i++) {
+    result |= a.charCodeAt(i) ^ b.charCodeAt(i);
+  }
+  return result === 0;
+}

package/supabase/functions/_shared/utils.ts

@@ -1,7 +1,7 @@
 export const corsHeaders = {
   "Access-Control-Allow-Origin": "*",
   "Access-Control-Allow-Headers":
-    "authorization, x-client-info, apikey, content-type",
+    "authorization, x-client-info, apikey, content-type, x-ingestion-key",
   "Access-Control-Allow-Methods": "POST, PATCH, PUT, DELETE",
 };
 

package/supabase/functions/ingest-activity/.well-known/supabase/config.toml

@@ -0,0 +1,4 @@
+# Disable JWT verification for this function
+# Webhooks from Twilio, Postmark, etc. don't have Supabase JWTs
+# Security is handled via ingestion_key parameter and provider-specific signatures
+verify_jwt = false