realtimex-crm 0.7.14 → 0.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "realtimex-crm",
-  "version": "0.7.14",
+  "version": "0.9.1",
   "description": "RealTimeX CRM - A full-featured CRM built with React, shadcn-admin-kit, and Supabase. Fork of Atomic CRM with RealTimeX App SDK integration.",
   "type": "module",
   "main": "./dist/index.js",
@@ -75,6 +75,7 @@
     "@inquirer/prompts": "^8.1.0",
     "@nivo/bar": "^0.99.0",
     "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-avatar": "^1.1.11",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",

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

@@ -0,0 +1,184 @@
+import { useState } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useDataProvider, useNotify, useGetIdentity } from "ra-core";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Plus, Trash2, Copy } from "lucide-react";
+import { CreateApiKeyDialog } from "./CreateApiKeyDialog";
+import { Badge } from "@/components/ui/badge";
+import { format } from "date-fns";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+
+export const ApiKeysTab = () => {
+  const [showCreateDialog, setShowCreateDialog] = useState(false);
+  const [keyToDelete, setKeyToDelete] = useState<number | null>(null);
+  const dataProvider = useDataProvider();
+  const notify = useNotify();
+  const queryClient = useQueryClient();
+  const { identity: _identity } = useGetIdentity();
+
+  const { data: apiKeys, isLoading } = useQuery({
+    queryKey: ["api_keys"],
+    queryFn: async () => {
+      const { data } = await dataProvider.getList("api_keys", {
+        pagination: { page: 1, perPage: 100 },
+        sort: { field: "created_at", order: "DESC" },
+        filter: {},
+      });
+      return data;
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: async (id: number) => {
+      await dataProvider.delete("api_keys", { id, previousData: {} });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["api_keys"] });
+      notify("API key deleted successfully");
+      setKeyToDelete(null);
+    },
+    onError: () => {
+      notify("Failed to delete API key", { type: "error" });
+    },
+  });
+
+  return (
+    <div className="space-y-4">
+      <div className="flex justify-between items-center">
+        <p className="text-sm text-muted-foreground">
+          API keys allow external applications to access your CRM data
+          programmatically.
+        </p>
+        <Button onClick={() => setShowCreateDialog(true)}>
+          <Plus className="h-4 w-4 mr-2" />
+          Create API Key
+        </Button>
+      </div>
+
+      {isLoading ? (
+        <Card>
+          <CardContent className="py-8 text-center text-muted-foreground">
+            Loading...
+          </CardContent>
+        </Card>
+      ) : apiKeys && apiKeys.length > 0 ? (
+        <div className="space-y-3">
+          {apiKeys.map((key: any) => (
+            <ApiKeyCard
+              key={key.id}
+              apiKey={key}
+              onDelete={() => setKeyToDelete(key.id)}
+            />
+          ))}
+        </div>
+      ) : (
+        <Card>
+          <CardContent className="py-12 text-center">
+            <p className="text-muted-foreground mb-4">No API keys yet</p>
+            <Button onClick={() => setShowCreateDialog(true)}>
+              <Plus className="h-4 w-4 mr-2" />
+              Create your first API key
+            </Button>
+          </CardContent>
+        </Card>
+      )}
+
+      <CreateApiKeyDialog
+        open={showCreateDialog}
+        onClose={() => setShowCreateDialog(false)}
+      />
+
+      <AlertDialog
+        open={keyToDelete !== null}
+        onOpenChange={() => setKeyToDelete(null)}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete API Key?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This will permanently delete this API key. Any applications using
+              this key will stop working immediately. This action cannot be
+              undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={() => keyToDelete && deleteMutation.mutate(keyToDelete)}
+              className="bg-destructive hover:bg-destructive/90"
+            >
+              Delete
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+};
+
+const ApiKeyCard = ({
+  apiKey,
+  onDelete,
+}: {
+  apiKey: any;
+  onDelete: () => void;
+}) => {
+  const notify = useNotify();
+
+  const copyKey = () => {
+    navigator.clipboard.writeText(apiKey.key_prefix + "••••••••");
+    notify("Key prefix copied (full key only shown once at creation)");
+  };
+
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <div className="flex justify-between items-start">
+          <div>
+            <CardTitle className="text-lg">{apiKey.name}</CardTitle>
+            <div className="flex gap-2 mt-2">
+              {apiKey.is_active ? (
+                <Badge variant="default">Active</Badge>
+              ) : (
+                <Badge variant="secondary">Inactive</Badge>
+              )}
+              {apiKey.scopes && apiKey.scopes.length > 0 && (
+                <Badge variant="outline">{apiKey.scopes.join(", ")}</Badge>
+              )}
+            </div>
+          </div>
+          <Button variant="ghost" size="icon" onClick={onDelete}>
+            <Trash2 className="h-4 w-4 text-destructive" />
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-2">
+        <div className="flex items-center gap-2 font-mono text-sm bg-muted p-2 rounded">
+          <span>{apiKey.key_prefix}••••••••••••••••••••</span>
+          <Button variant="ghost" size="icon" onClick={copyKey}>
+            <Copy className="h-4 w-4" />
+          </Button>
+        </div>
+        <div className="text-xs text-muted-foreground space-y-1">
+          <p>Created: {format(new Date(apiKey.created_at), "PPP")}</p>
+          {apiKey.last_used_at && (
+            <p>Last used: {format(new Date(apiKey.last_used_at), "PPp")}</p>
+          )}
+          {apiKey.expires_at && (
+            <p>Expires: {format(new Date(apiKey.expires_at), "PPP")}</p>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};

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

@@ -0,0 +1,217 @@
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useDataProvider, useNotify, useGetIdentity } from "ra-core";
+import { generateApiKey, hashApiKey } from "@/lib/api-key-utils";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Copy, CheckCircle } from "lucide-react";
+
+interface CreateApiKeyDialogProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+const AVAILABLE_SCOPES = [
+  { value: "contacts:read", label: "Contacts: Read" },
+  { value: "contacts:write", label: "Contacts: Write" },
+  { value: "companies:read", label: "Companies: Read" },
+  { value: "companies:write", label: "Companies: Write" },
+  { value: "deals:read", label: "Deals: Read" },
+  { value: "deals:write", label: "Deals: Write" },
+  { value: "activities:write", label: "Activities: Write" },
+];
+
+export const CreateApiKeyDialog = ({
+  open,
+  onClose,
+}: CreateApiKeyDialogProps) => {
+  const [createdKey, setCreatedKey] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
+  const dataProvider = useDataProvider();
+  const notify = useNotify();
+  const queryClient = useQueryClient();
+  const { identity } = useGetIdentity();
+
+  const { register, handleSubmit, watch, setValue, reset } = useForm({
+    defaultValues: {
+      name: "",
+      scopes: [] as string[],
+      expires_at: "",
+    },
+  });
+
+  const createMutation = useMutation({
+    mutationFn: async (values: any) => {
+      const apiKey = generateApiKey();
+      const keyHash = await hashApiKey(apiKey);
+      const keyPrefix = apiKey.substring(0, 12);
+
+      const { data } = await dataProvider.create("api_keys", {
+        data: {
+          name: values.name,
+          key_hash: keyHash,
+          key_prefix: keyPrefix,
+          scopes: values.scopes,
+          is_active: true,
+          expires_at: values.expires_at || null,
+          sales_id: identity?.id,
+          created_by_sales_id: identity?.id,
+        },
+      });
+
+      return { data, apiKey };
+    },
+    onSuccess: ({ apiKey }) => {
+      setCreatedKey(apiKey);
+      queryClient.invalidateQueries({ queryKey: ["api_keys"] });
+      notify("API key created successfully");
+    },
+    onError: () => {
+      notify("Failed to create API key", { type: "error" });
+    },
+  });
+
+  const handleClose = () => {
+    setCreatedKey(null);
+    setCopied(false);
+    reset();
+    onClose();
+  };
+
+  const copyApiKey = () => {
+    if (createdKey) {
+      navigator.clipboard.writeText(createdKey);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  const toggleScope = (scope: string) => {
+    const currentScopes = watch("scopes");
+    if (currentScopes.includes(scope)) {
+      setValue(
+        "scopes",
+        currentScopes.filter((s) => s !== scope)
+      );
+    } else {
+      setValue("scopes", [...currentScopes, scope]);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>
+            {createdKey ? "API Key Created" : "Create API Key"}
+          </DialogTitle>
+          <DialogDescription>
+            {createdKey
+              ? "Copy this key now - it won't be shown again!"
+              : "Create a new API key to access the CRM API"}
+          </DialogDescription>
+        </DialogHeader>
+
+        {createdKey ? (
+          <div className="space-y-4">
+            <Alert>
+              <AlertDescription>
+                Make sure to copy your API key now. You won't be able to see it
+                again!
+              </AlertDescription>
+            </Alert>
+
+            <div className="space-y-2">
+              <Label>Your API Key</Label>
+              <div className="flex gap-2">
+                <Input
+                  value={createdKey}
+                  readOnly
+                  className="font-mono text-sm"
+                />
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="icon"
+                  onClick={copyApiKey}
+                >
+                  {copied ? (
+                    <CheckCircle className="h-4 w-4 text-green-500" />
+                  ) : (
+                    <Copy className="h-4 w-4" />
+                  )}
+                </Button>
+              </div>
+            </div>
+
+            <div className="flex justify-end">
+              <Button onClick={handleClose}>Done</Button>
+            </div>
+          </div>
+        ) : (
+          <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., Production API Key"
+                  {...register("name", { required: true })}
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label>Scopes</Label>
+                <div className="space-y-2">
+                  {AVAILABLE_SCOPES.map((scope) => (
+                    <div key={scope.value} className="flex items-center space-x-2">
+                      <Checkbox
+                        id={scope.value}
+                        checked={watch("scopes").includes(scope.value)}
+                        onCheckedChange={() => toggleScope(scope.value)}
+                      />
+                      <label htmlFor={scope.value} className="text-sm cursor-pointer">
+                        {scope.label}
+                      </label>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="expires_at">Expiration (optional)</Label>
+                <Input
+                  id="expires_at"
+                  type="date"
+                  {...register("expires_at")}
+                />
+              </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/integrations/IntegrationsPage.tsx

@@ -0,0 +1,34 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { ApiKeysTab } from "./ApiKeysTab";
+import { WebhooksTab } from "./WebhooksTab";
+
+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 and webhooks to integrate Atomic CRM with external
+          systems.
+        </p>
+      </div>
+
+      <Tabs defaultValue="api-keys">
+        <TabsList className="mb-4">
+          <TabsTrigger value="api-keys">API Keys</TabsTrigger>
+          <TabsTrigger value="webhooks">Webhooks</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="api-keys">
+          <ApiKeysTab />
+        </TabsContent>
+
+        <TabsContent value="webhooks">
+          <WebhooksTab />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+};
+
+IntegrationsPage.path = "/integrations";