realtimex-crm 0.14.2 → 0.14.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "realtimex-crm",
-  "version": "0.14.2",
+  "version": "0.14.3",
   "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/integrations/ApiKeysTab.tsx

@@ -1,12 +1,13 @@
 import { useState } from "react";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { useDataProvider, useNotify, useGetIdentity } from "ra-core";
+import { useDataProvider, useNotify } 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 { decryptValue } from "@/lib/encryption-utils";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -24,7 +25,6 @@ export const ApiKeysTab = () => {
   const dataProvider = useDataProvider();
   const notify = useNotify();
   const queryClient = useQueryClient();
-  const { identity: _identity } = useGetIdentity();
 
   const { data: apiKeys, isLoading } = useQuery({
     queryKey: ["api_keys"],
@@ -135,9 +135,18 @@ const ApiKeyCard = ({
 }) => {
   const notify = useNotify();
 
-  const copyKey = () => {
-    navigator.clipboard.writeText(apiKey.key_prefix + "••••••••");
-    notify("Key prefix copied (full key only shown once at creation)");
+  const copyFullKey = async () => {
+    try {
+      if (apiKey.encrypted_key) {
+        const fullKey = await decryptValue(apiKey.encrypted_key);
+        await navigator.clipboard.writeText(fullKey);
+        notify("Full API key copied to clipboard");
+      } else {
+        notify("API key not available for copying", { type: "warning" });
+      }
+    } catch {
+      notify("Failed to copy API key", { type: "error" });
+    }
   };
 
   return (
@@ -163,11 +172,16 @@ const ApiKeyCard = ({
         </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="flex items-center gap-2 font-mono text-sm bg-muted p-2 rounded">
+            <span className="flex-1">{apiKey.key_prefix}••••••••••••••••••••</span>
+            <Button variant="ghost" size="icon" onClick={copyFullKey}>
+              <Copy className="h-4 w-4" />
+            </Button>
+          </div>
+          <p className="text-xs text-muted-foreground mt-1">
+            Click copy to get the full unmasked key
+          </p>
         </div>
         <div className="text-xs text-muted-foreground space-y-1">
           <p>Created: {format(new Date(apiKey.created_at), "PPP")}</p>

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

@@ -3,6 +3,7 @@ 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 { encryptValue } from "@/lib/encryption-utils";
 import {
   Dialog,
   DialogContent,
@@ -56,12 +57,14 @@ export const CreateApiKeyDialog = ({
       const apiKey = generateApiKey();
       const keyHash = await hashApiKey(apiKey);
       const keyPrefix = apiKey.substring(0, 12);
+      const encryptedKey = await encryptValue(apiKey);
 
       const { data } = await dataProvider.create("api_keys", {
         data: {
           name: values.name,
           key_hash: keyHash,
           key_prefix: keyPrefix,
+          encrypted_key: encryptedKey,
           scopes: values.scopes,
           is_active: true,
           expires_at: values.expires_at || null,

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

@@ -1,11 +1,11 @@
-import { useState } from "react";
+import React, { 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 { Plus, Trash2, Power, PowerOff, Pencil } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { format } from "date-fns";
 import {
@@ -61,6 +61,7 @@ const AVAILABLE_EVENTS = [
 
 export const WebhooksTab = () => {
   const [showCreateDialog, setShowCreateDialog] = useState(false);
+  const [webhookToEdit, setWebhookToEdit] = useState<any | null>(null);
   const [webhookToDelete, setWebhookToDelete] = useState<number | null>(null);
   const dataProvider = useDataProvider();
   const notify = useNotify();
@@ -133,6 +134,7 @@ export const WebhooksTab = () => {
             <WebhookCard
               key={webhook.id}
               webhook={webhook}
+              onEdit={() => setWebhookToEdit(webhook)}
               onDelete={() => setWebhookToDelete(webhook.id)}
               onToggle={() =>
                 toggleMutation.mutate({
@@ -160,6 +162,12 @@ export const WebhooksTab = () => {
         onClose={() => setShowCreateDialog(false)}
       />
 
+      <EditWebhookDialog
+        open={!!webhookToEdit}
+        webhook={webhookToEdit}
+        onClose={() => setWebhookToEdit(null)}
+      />
+
       <AlertDialog
         open={webhookToDelete !== null}
         onOpenChange={() => setWebhookToDelete(null)}
@@ -191,10 +199,12 @@ export const WebhooksTab = () => {
 
 const WebhookCard = ({
   webhook,
+  onEdit,
   onDelete,
   onToggle,
 }: {
   webhook: any;
+  onEdit: () => void;
   onDelete: () => void;
   onToggle: () => void;
 }) => {
@@ -225,6 +235,9 @@ const WebhookCard = ({
             </div>
           </div>
           <div className="flex gap-2">
+            <Button variant="ghost" size="icon" onClick={onEdit}>
+              <Pencil className="h-4 w-4" />
+            </Button>
             <Button variant="ghost" size="icon" onClick={onToggle}>
               {webhook.is_active ? (
                 <PowerOff className="h-4 w-4" />
@@ -410,3 +423,163 @@ const CreateWebhookDialog = ({
     </Dialog>
   );
 };
+
+const EditWebhookDialog = ({
+  open,
+  webhook,
+  onClose,
+}: {
+  open: boolean;
+  webhook: any | null;
+  onClose: () => void;
+}) => {
+  const dataProvider = useDataProvider();
+  const notify = useNotify();
+  const queryClient = useQueryClient();
+
+  const { register, handleSubmit, watch, setValue, reset } = useForm({
+    defaultValues: {
+      name: webhook?.name || "",
+      url: webhook?.url || "",
+      events: webhook?.events || ([] as string[]),
+    },
+  });
+
+  // Update form when webhook changes
+  React.useEffect(() => {
+    if (webhook) {
+      setValue("name", webhook.name);
+      setValue("url", webhook.url);
+      setValue("events", webhook.events || []);
+    }
+  }, [webhook, setValue]);
+
+  const updateMutation = useMutation({
+    mutationFn: async (values: any) => {
+      await dataProvider.update("webhooks", {
+        id: webhook.id,
+        data: {
+          name: values.name,
+          url: values.url,
+          events: values.events,
+        },
+        previousData: webhook,
+      });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["webhooks"] });
+      notify("Webhook updated successfully");
+      reset();
+      onClose();
+    },
+    onError: () => {
+      notify("Failed to update 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>);
+
+  if (!webhook) return null;
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-[600px] max-h-[80vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>Edit Webhook</DialogTitle>
+          <DialogDescription>
+            Update webhook configuration
+          </DialogDescription>
+        </DialogHeader>
+
+        <form
+          onSubmit={handleSubmit((values) => updateMutation.mutate(values))}
+        >
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="edit-name">Name</Label>
+              <Input
+                id="edit-name"
+                placeholder="e.g., Slack Notifications"
+                {...register("name", { required: true })}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="edit-url">Webhook URL</Label>
+              <Input
+                id="edit-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={`edit-${event.value}`}
+                            checked={watch("events").includes(event.value)}
+                            onCheckedChange={() => toggleEvent(event.value)}
+                          />
+                          <label
+                            htmlFor={`edit-${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={updateMutation.isPending}>
+                Update
+              </Button>
+            </div>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/lib/encryption-utils.ts

@@ -0,0 +1,78 @@
+/**
+ * Simple encryption utilities for storing sensitive data
+ * Uses Web Crypto API for encryption/decryption
+ */
+
+// Get or generate encryption key
+// In production, this should be stored securely (e.g., environment variable)
+// For now, we'll use a derivation from a fixed string + user context
+const getEncryptionKey = async (): Promise<CryptoKey> => {
+  const keyMaterial = await crypto.subtle.importKey(
+    "raw",
+    new TextEncoder().encode(
+      // In production, use a secure environment variable
+      import.meta.env.VITE_ENCRYPTION_KEY || "atomic-crm-default-key-change-in-production"
+    ),
+    "PBKDF2",
+    false,
+    ["deriveBits", "deriveKey"]
+  );
+
+  return crypto.subtle.deriveKey(
+    {
+      name: "PBKDF2",
+      salt: new TextEncoder().encode("atomic-crm-salt"),
+      iterations: 100000,
+      hash: "SHA-256",
+    },
+    keyMaterial,
+    { name: "AES-GCM", length: 256 },
+    false,
+    ["encrypt", "decrypt"]
+  );
+};
+
+/**
+ * Encrypt a string value
+ */
+export const encryptValue = async (value: string): Promise<string> => {
+  const key = await getEncryptionKey();
+  const iv = crypto.getRandomValues(new Uint8Array(12));
+  const encoded = new TextEncoder().encode(value);
+
+  const encrypted = await crypto.subtle.encrypt(
+    { name: "AES-GCM", iv },
+    key,
+    encoded
+  );
+
+  // Combine IV and encrypted data
+  const combined = new Uint8Array(iv.length + encrypted.byteLength);
+  combined.set(iv);
+  combined.set(new Uint8Array(encrypted), iv.length);
+
+  // Convert to base64
+  return btoa(String.fromCharCode(...combined));
+};
+
+/**
+ * Decrypt an encrypted string value
+ */
+export const decryptValue = async (encryptedValue: string): Promise<string> => {
+  const key = await getEncryptionKey();
+
+  // Decode from base64
+  const combined = Uint8Array.from(atob(encryptedValue), (c) => c.charCodeAt(0));
+
+  // Extract IV and encrypted data
+  const iv = combined.slice(0, 12);
+  const encrypted = combined.slice(12);
+
+  const decrypted = await crypto.subtle.decrypt(
+    { name: "AES-GCM", iv },
+    key,
+    encrypted
+  );
+
+  return new TextDecoder().decode(decrypted);
+};

package/supabase/migrations/20251226052529_add_encrypted_key_to_api_keys.sql

@@ -0,0 +1,9 @@
+-- Add encrypted_key column to api_keys table to allow key retrieval
+-- This improves UX by letting users copy their keys after creation
+-- Keys are encrypted at rest for security
+
+-- Add column to store encrypted API key
+ALTER TABLE public.api_keys
+  ADD COLUMN IF NOT EXISTS encrypted_key text;
+
+COMMENT ON COLUMN public.api_keys.encrypted_key IS 'Encrypted full API key for retrieval. Encrypted using application-level encryption.';