realtimex-crm 0.8.1 → 0.9.2

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

@@ -0,0 +1,46 @@
+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 (
+    <div className="max-w-6xl mx-auto mt-8 px-4">
+      <div className="mb-6">
+        <h1 className="text-3xl font-bold">Integrations</h1>
+        <p className="text-muted-foreground mt-2">
+          Manage API keys, webhooks, and ingestion channels to integrate Atomic CRM with external
+          systems.
+        </p>
+      </div>
+
+      <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 (Outbound)</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="ingestion">
+          <IngestionChannelsTab />
+        </TabsContent>
+
+        <TabsContent value="file-upload">
+          <FileUpload />
+        </TabsContent>
+
+        <TabsContent value="api-keys">
+          <ApiKeysTab />
+        </TabsContent>
+
+        <TabsContent value="webhooks">
+          <WebhooksTab />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+};
+
+IntegrationsPage.path = "/integrations";

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

@@ -0,0 +1,402 @@
+import { useState } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useDataProvider, useNotify, useGetIdentity } from "ra-core";
+import { useForm } from "react-hook-form";
+import { generateApiKey } from "@/lib/api-key-utils";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Plus, Trash2, Power, PowerOff } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { format } from "date-fns";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+
+const AVAILABLE_EVENTS = [
+  { value: "contact.created", label: "Contact Created", category: "Contacts" },
+  { value: "contact.updated", label: "Contact Updated", category: "Contacts" },
+  { value: "contact.deleted", label: "Contact Deleted", category: "Contacts" },
+  { value: "company.created", label: "Company Created", category: "Companies" },
+  { value: "company.updated", label: "Company Updated", category: "Companies" },
+  { value: "company.deleted", label: "Company Deleted", category: "Companies" },
+  { value: "deal.created", label: "Deal Created", category: "Deals" },
+  { value: "deal.updated", label: "Deal Updated", category: "Deals" },
+  { value: "deal.deleted", label: "Deal Deleted", category: "Deals" },
+  {
+    value: "deal.stage_changed",
+    label: "Deal Stage Changed",
+    category: "Deals",
+  },
+  { value: "deal.won", label: "Deal Won", category: "Deals" },
+  { value: "deal.lost", label: "Deal Lost", category: "Deals" },
+  { value: "task.completed", label: "Task Completed", category: "Tasks" },
+];
+
+export const WebhooksTab = () => {
+  const [showCreateDialog, setShowCreateDialog] = useState(false);
+  const [webhookToDelete, setWebhookToDelete] = useState<number | null>(null);
+  const dataProvider = useDataProvider();
+  const notify = useNotify();
+  const queryClient = useQueryClient();
+
+  const { data: webhooks, isLoading } = useQuery({
+    queryKey: ["webhooks"],
+    queryFn: async () => {
+      const { data } = await dataProvider.getList("webhooks", {
+        pagination: { page: 1, perPage: 100 },
+        sort: { field: "created_at", order: "DESC" },
+        filter: {},
+      });
+      return data;
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: async (id: number) => {
+      await dataProvider.delete("webhooks", { id, previousData: {} });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["webhooks"] });
+      notify("Webhook deleted successfully");
+      setWebhookToDelete(null);
+    },
+    onError: () => {
+      notify("Failed to delete webhook", { type: "error" });
+    },
+  });
+
+  const toggleMutation = useMutation({
+    mutationFn: async ({ id, is_active }: { id: number; is_active: boolean }) => {
+      await dataProvider.update("webhooks", {
+        id,
+        data: { is_active },
+        previousData: {},
+      });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["webhooks"] });
+      notify("Webhook updated successfully");
+    },
+    onError: () => {
+      notify("Failed to update webhook", { type: "error" });
+    },
+  });
+
+  return (
+    <div className="space-y-4">
+      <div className="flex justify-between items-center">
+        <p className="text-sm text-muted-foreground">
+          Webhooks notify external systems when events occur in your CRM.
+        </p>
+        <Button onClick={() => setShowCreateDialog(true)}>
+          <Plus className="h-4 w-4 mr-2" />
+          Create Webhook
+        </Button>
+      </div>
+
+      {isLoading ? (
+        <Card>
+          <CardContent className="py-8 text-center text-muted-foreground">
+            Loading...
+          </CardContent>
+        </Card>
+      ) : webhooks && webhooks.length > 0 ? (
+        <div className="space-y-3">
+          {webhooks.map((webhook: any) => (
+            <WebhookCard
+              key={webhook.id}
+              webhook={webhook}
+              onDelete={() => setWebhookToDelete(webhook.id)}
+              onToggle={() =>
+                toggleMutation.mutate({
+                  id: webhook.id,
+                  is_active: !webhook.is_active,
+                })
+              }
+            />
+          ))}
+        </div>
+      ) : (
+        <Card>
+          <CardContent className="py-12 text-center">
+            <p className="text-muted-foreground mb-4">No webhooks yet</p>
+            <Button onClick={() => setShowCreateDialog(true)}>
+              <Plus className="h-4 w-4 mr-2" />
+              Create your first webhook
+            </Button>
+          </CardContent>
+        </Card>
+      )}
+
+      <CreateWebhookDialog
+        open={showCreateDialog}
+        onClose={() => setShowCreateDialog(false)}
+      />
+
+      <AlertDialog
+        open={webhookToDelete !== null}
+        onOpenChange={() => setWebhookToDelete(null)}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete Webhook?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This will permanently delete this webhook. No more events will be
+              sent to this endpoint. This action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={() =>
+                webhookToDelete && deleteMutation.mutate(webhookToDelete)
+              }
+              className="bg-destructive hover:bg-destructive/90"
+            >
+              Delete
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+};
+
+const WebhookCard = ({
+  webhook,
+  onDelete,
+  onToggle,
+}: {
+  webhook: any;
+  onDelete: () => void;
+  onToggle: () => void;
+}) => {
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <div className="flex justify-between items-start">
+          <div className="flex-1">
+            <CardTitle className="text-lg">{webhook.name}</CardTitle>
+            <p className="text-sm text-muted-foreground mt-1 break-all">
+              {webhook.url}
+            </p>
+            <div className="flex flex-wrap gap-1 mt-2">
+              {webhook.is_active ? (
+                <Badge variant="default">Active</Badge>
+              ) : (
+                <Badge variant="secondary">Inactive</Badge>
+              )}
+              {webhook.events &&
+                webhook.events.slice(0, 3).map((event: string) => (
+                  <Badge key={event} variant="outline">
+                    {event}
+                  </Badge>
+                ))}
+              {webhook.events && webhook.events.length > 3 && (
+                <Badge variant="outline">+{webhook.events.length - 3} more</Badge>
+              )}
+            </div>
+          </div>
+          <div className="flex gap-2">
+            <Button variant="ghost" size="icon" onClick={onToggle}>
+              {webhook.is_active ? (
+                <PowerOff className="h-4 w-4" />
+              ) : (
+                <Power className="h-4 w-4" />
+              )}
+            </Button>
+            <Button variant="ghost" size="icon" onClick={onDelete}>
+              <Trash2 className="h-4 w-4 text-destructive" />
+            </Button>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="text-xs text-muted-foreground space-y-1">
+          <p>Created: {format(new Date(webhook.created_at), "PPP")}</p>
+          {webhook.last_triggered_at && (
+            <p>
+              Last triggered:{" "}
+              {format(new Date(webhook.last_triggered_at), "PPp")}
+            </p>
+          )}
+          {webhook.failure_count > 0 && (
+            <p className="text-destructive">
+              Failed deliveries: {webhook.failure_count}
+            </p>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+const CreateWebhookDialog = ({
+  open,
+  onClose,
+}: {
+  open: boolean;
+  onClose: () => void;
+}) => {
+  const dataProvider = useDataProvider();
+  const notify = useNotify();
+  const queryClient = useQueryClient();
+  const { identity } = useGetIdentity();
+
+  const { register, handleSubmit, watch, setValue, reset } = useForm({
+    defaultValues: {
+      name: "",
+      url: "",
+      events: [] as string[],
+    },
+  });
+
+  const createMutation = useMutation({
+    mutationFn: async (values: any) => {
+      // Generate a random secret for webhook signature
+      const secret = generateApiKey();
+
+      await dataProvider.create("webhooks", {
+        data: {
+          name: values.name,
+          url: values.url,
+          events: values.events,
+          is_active: true,
+          secret,
+          sales_id: identity?.id,
+          created_by_sales_id: identity?.id,
+        },
+      });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["webhooks"] });
+      notify("Webhook created successfully");
+      reset();
+      onClose();
+    },
+    onError: () => {
+      notify("Failed to create webhook", { type: "error" });
+    },
+  });
+
+  const toggleEvent = (event: string) => {
+    const currentEvents = watch("events");
+    if (currentEvents.includes(event)) {
+      setValue(
+        "events",
+        currentEvents.filter((e) => e !== event)
+      );
+    } else {
+      setValue("events", [...currentEvents, event]);
+    }
+  };
+
+  const handleClose = () => {
+    reset();
+    onClose();
+  };
+
+  // Group events by category
+  const eventsByCategory = AVAILABLE_EVENTS.reduce((acc, event) => {
+    if (!acc[event.category]) {
+      acc[event.category] = [];
+    }
+    acc[event.category].push(event);
+    return acc;
+  }, {} as Record<string, typeof AVAILABLE_EVENTS>);
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-[600px] max-h-[80vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>Create Webhook</DialogTitle>
+          <DialogDescription>
+            Create a new webhook to receive event notifications
+          </DialogDescription>
+        </DialogHeader>
+
+        <form
+          onSubmit={handleSubmit((values) => createMutation.mutate(values))}
+        >
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="name">Name</Label>
+              <Input
+                id="name"
+                placeholder="e.g., Slack Notifications"
+                {...register("name", { required: true })}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="url">Webhook URL</Label>
+              <Input
+                id="url"
+                type="url"
+                placeholder="https://example.com/webhook"
+                {...register("url", { required: true })}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label>Events to Subscribe</Label>
+              <div className="space-y-3 max-h-60 overflow-y-auto border rounded-md p-3">
+                {Object.entries(eventsByCategory).map(([category, events]) => (
+                  <div key={category}>
+                    <p className="text-sm font-semibold mb-2">{category}</p>
+                    <div className="space-y-2 ml-2">
+                      {events.map((event) => (
+                        <div
+                          key={event.value}
+                          className="flex items-center space-x-2"
+                        >
+                          <Checkbox
+                            id={event.value}
+                            checked={watch("events").includes(event.value)}
+                            onCheckedChange={() => toggleEvent(event.value)}
+                          />
+                          <label
+                            htmlFor={event.value}
+                            className="text-sm cursor-pointer"
+                          >
+                            {event.label}
+                          </label>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div className="flex justify-end gap-2">
+              <Button type="button" variant="outline" onClick={handleClose}>
+                Cancel
+              </Button>
+              <Button type="submit" disabled={createMutation.isPending}>
+                Create
+              </Button>
+            </div>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/components/atomic-crm/layout/Header.tsx

@@ -3,7 +3,7 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
 } from "@/components/ui/dropdown-menu";
-import { Database, Settings, User } from "lucide-react";
+import { Database, Settings, User, Webhook } from "lucide-react";
 import { CanAccess } from "ra-core";
 import { Link, matchPath, useLocation } from "react-router";
 import { RefreshButton } from "@/components/admin/refresh-button";
@@ -64,6 +64,7 @@ const Header = () => {
             <UserMenu>
               <ConfigurationMenu />
               <DatabaseMenu />
+              <IntegrationsMenu />
               <CanAccess resource="sales" action="list">
                 <UsersMenu />
               </CanAccess>
@@ -165,4 +166,16 @@ const DatabaseMenu = () => {
   );
 };
 
+const IntegrationsMenu = () => {
+  const { onClose } = useUserMenu() ?? {};
+  return (
+    <DropdownMenuItem asChild onClick={onClose}>
+      <Link to="/integrations" className="flex items-center gap-2">
+        <Webhook className="h-4 w-4" />
+        Integrations
+      </Link>
+    </DropdownMenuItem>
+  );
+};
+
 export default Header;

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

@@ -26,6 +26,7 @@ import {
 import sales from "../sales";
 import { DatabasePage } from "../settings/DatabasePage";
 import { SettingsPage } from "../settings/SettingsPage";
+import { IntegrationsPage } from "../integrations/IntegrationsPage";
 import type { ConfigurationContextValue } from "./ConfigurationContext";
 import { ConfigurationProvider } from "./ConfigurationContext";
 import {
@@ -163,6 +164,7 @@ export const CRM = ({
           <CustomRoutes>
             <Route path={SettingsPage.path} element={<SettingsPage />} />
             <Route path={DatabasePage.path} element={<DatabasePage />} />
+            <Route path={IntegrationsPage.path} element={<IntegrationsPage />} />
           </CustomRoutes>
           <Resource name="deals" {...deals} />
           <Resource name="contacts" {...contacts} />