insforge 1.2.10 → 1.3.0

package/frontend/src/features/realtime/components/EditChannelModal.tsx

@@ -0,0 +1,246 @@
+import { useState, useEffect } from 'react';
+import { Plus, X } from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  Button,
+  Input,
+  Label,
+  Switch,
+  Textarea,
+} from '@/components';
+import type { RealtimeChannel } from '../services/realtime.service';
+import type { UpdateChannelRequest } from '@insforge/shared-schemas';
+
+interface EditChannelModalProps {
+  channel: RealtimeChannel | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSave: (id: string, data: UpdateChannelRequest) => void;
+  isUpdating?: boolean;
+}
+
+export function EditChannelModal({
+  channel,
+  open,
+  onOpenChange,
+  onSave,
+  isUpdating,
+}: EditChannelModalProps) {
+  const [pattern, setPattern] = useState('');
+  const [description, setDescription] = useState('');
+  const [enabled, setEnabled] = useState(true);
+  const [webhookUrls, setWebhookUrls] = useState<string[]>(['']);
+
+  useEffect(() => {
+    if (channel) {
+      setPattern(channel.pattern);
+      setDescription(channel.description || '');
+      setEnabled(channel.enabled);
+      // Default to at least one empty input if no webhooks configured
+      const urls =
+        channel.webhookUrls && channel.webhookUrls.length > 0 ? channel.webhookUrls : [''];
+      setWebhookUrls(urls);
+    }
+  }, [channel]);
+
+  const handleAddWebhook = () => {
+    setWebhookUrls([...webhookUrls, '']);
+  };
+
+  const handleRemoveWebhook = (index: number) => {
+    if (webhookUrls.length === 1) {
+      // Keep at least one input, just clear it
+      setWebhookUrls(['']);
+    } else {
+      setWebhookUrls(webhookUrls.filter((_, i) => i !== index));
+    }
+  };
+
+  const handleWebhookChange = (index: number, value: string) => {
+    const updated = [...webhookUrls];
+    updated[index] = value;
+    setWebhookUrls(updated);
+  };
+
+  const handleSave = () => {
+    if (!channel) {
+      return;
+    }
+
+    const updates: UpdateChannelRequest = {};
+
+    if (pattern !== channel.pattern) {
+      updates.pattern = pattern;
+    }
+    if (description !== (channel.description || '')) {
+      updates.description = description || undefined;
+    }
+    if (enabled !== channel.enabled) {
+      updates.enabled = enabled;
+    }
+
+    // Filter out empty webhook URLs and compare
+    const filteredWebhooks = webhookUrls.filter((url) => url.trim() !== '');
+    const originalWebhooks = channel.webhookUrls || [];
+    const webhooksChanged =
+      filteredWebhooks.length !== originalWebhooks.length ||
+      filteredWebhooks.some((url, i) => url !== originalWebhooks[i]);
+
+    if (webhooksChanged) {
+      updates.webhookUrls = filteredWebhooks;
+    }
+
+    onSave(channel.id, updates);
+  };
+
+  const hasChanges = () => {
+    if (!channel) {
+      return false;
+    }
+
+    const filteredWebhooks = webhookUrls.filter((url) => url.trim() !== '');
+    const originalWebhooks = channel.webhookUrls || [];
+    const webhooksChanged =
+      filteredWebhooks.length !== originalWebhooks.length ||
+      filteredWebhooks.some((url, i) => url !== originalWebhooks[i]);
+
+    return (
+      pattern !== channel.pattern ||
+      description !== (channel.description || '') ||
+      enabled !== channel.enabled ||
+      webhooksChanged
+    );
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-[560px] dark:bg-neutral-800 p-0 gap-0">
+        <DialogHeader className="px-6 py-4 border-b border-zinc-200 dark:border-neutral-700">
+          <DialogTitle className="text-lg font-semibold text-zinc-950 dark:text-white">
+            Edit Channel
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-6 p-6">
+          {/* Pattern */}
+          <div className="flex flex-row justify-between gap-6">
+            <Label
+              htmlFor="pattern"
+              className="w-28 shrink-0 text-sm font-medium text-zinc-950 dark:text-white pt-2"
+            >
+              Pattern
+            </Label>
+            <div className="flex-1 flex flex-col gap-1">
+              <Input
+                id="pattern"
+                value={pattern}
+                onChange={(e) => setPattern(e.target.value)}
+                placeholder="e.g., room:%, chat:lobby"
+                className="dark:bg-neutral-900 dark:placeholder:text-neutral-500 dark:border-neutral-700 dark:text-white"
+              />
+              <p className="text-xs text-zinc-500 dark:text-neutral-400">
+                Use alphanumeric characters, colons, hyphens, and % as wildcard
+              </p>
+            </div>
+          </div>
+
+          {/* Description */}
+          <div className="flex flex-row justify-between gap-6">
+            <Label
+              htmlFor="description"
+              className="w-28 shrink-0 text-sm font-medium text-zinc-950 dark:text-white pt-2"
+            >
+              Description
+            </Label>
+            <Textarea
+              id="description"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="Optional description for this channel"
+              rows={2}
+              className="flex-1 dark:bg-neutral-900 dark:placeholder:text-neutral-500 dark:border-neutral-700 dark:text-white resize-none"
+            />
+          </div>
+
+          {/* Enabled Toggle */}
+          <div className="flex flex-row justify-between gap-6">
+            <Label
+              htmlFor="enabled"
+              className="w-28 shrink-0 text-sm font-medium text-zinc-950 dark:text-white"
+            >
+              Enabled
+            </Label>
+            <div className="flex-1">
+              <Switch id="enabled" checked={enabled} onCheckedChange={setEnabled} />
+            </div>
+          </div>
+
+          {/* Webhook URLs */}
+          <div className="flex flex-row justify-between gap-6">
+            <Label className="w-28 shrink-0 text-sm font-medium text-zinc-950 dark:text-white pt-2">
+              Webhook URLs
+            </Label>
+            <div className="flex-1 flex flex-col gap-2">
+              {webhookUrls.map((url, index) => (
+                <div key={index} className="flex items-center gap-2">
+                  <Input
+                    value={url}
+                    onChange={(e) => handleWebhookChange(index, e.target.value)}
+                    placeholder="https://example.com/webhook"
+                    className="flex-1 dark:bg-neutral-900 dark:placeholder:text-neutral-500 dark:border-neutral-700 dark:text-white"
+                  />
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => handleRemoveWebhook(index)}
+                    className="h-9 w-9 shrink-0 text-zinc-400 hover:text-red-500 dark:text-neutral-500 dark:hover:text-red-400"
+                  >
+                    <X className="h-4 w-4" />
+                  </Button>
+                </div>
+              ))}
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={handleAddWebhook}
+                className="w-fit h-8 px-2 text-sm text-zinc-600 hover:text-zinc-900 dark:text-neutral-400 dark:hover:text-white"
+              >
+                <Plus className="h-4 w-4 mr-1" />
+                Add URL
+              </Button>
+              <p className="text-xs text-zinc-500 dark:text-neutral-400">
+                Messages published to this channel will be forwarded to these URLs
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter className="px-6 py-4 gap-3 border-t border-zinc-200 dark:border-neutral-700">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={isUpdating}
+            className="h-9 px-4 dark:bg-neutral-600 dark:text-white dark:border-transparent dark:hover:bg-neutral-700"
+          >
+            Cancel
+          </Button>
+          <Button
+            type="button"
+            onClick={handleSave}
+            disabled={!hasChanges() || isUpdating}
+            className="h-9 px-4 bg-zinc-950 text-white hover:bg-zinc-800 disabled:opacity-40 dark:bg-emerald-300 dark:text-zinc-950 dark:hover:bg-emerald-400"
+          >
+            {isUpdating ? 'Saving...' : 'Save Changes'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/frontend/src/features/realtime/components/MessageRow.tsx

@@ -0,0 +1,85 @@
+import { cn, formatTime } from '@/lib/utils/utils';
+import type { RealtimeMessage } from '../services/realtime.service';
+
+interface MessageRowProps {
+  message: RealtimeMessage;
+  onClick: () => void;
+  className?: string;
+}
+
+export function MessageRow({ message, onClick, className }: MessageRowProps) {
+  const payloadStr = JSON.stringify(message.payload);
+
+  return (
+    <div
+      className={cn(
+        'group h-14 px-3 bg-white hover:bg-neutral-100 dark:bg-[#333333] dark:hover:bg-neutral-700 rounded-[8px] transition-all cursor-pointer',
+        className
+      )}
+      onClick={onClick}
+    >
+      <div className="grid grid-cols-12 h-full items-center">
+        {/* Event Name Column */}
+        <div className="col-span-2 min-w-0 px-3 py-1.5">
+          <p className="text-sm text-zinc-950 dark:text-white truncate" title={message.eventName}>
+            {message.eventName}
+          </p>
+        </div>
+
+        {/* Channel Column */}
+        <div className="col-span-2 min-w-0 px-3 py-1.5">
+          <span
+            className="text-sm text-muted-foreground dark:text-neutral-400 truncate block"
+            title={message.channelName}
+          >
+            {message.channelName}
+          </span>
+        </div>
+
+        {/* Sender Type Column */}
+        <div className="col-span-1 px-3 py-1.5">
+          <span
+            className={cn(
+              'inline-flex items-center justify-center h-5 px-1.5 rounded-sm text-xs font-medium text-white capitalize',
+              message.senderType === 'system' ? 'bg-sky-700' : 'bg-teal-700'
+            )}
+          >
+            {message.senderType}
+          </span>
+        </div>
+
+        {/* Payload Preview Column */}
+        <div className="col-span-3 min-w-0 px-3 py-1.5">
+          <span className="text-sm text-muted-foreground dark:text-neutral-400 truncate block">
+            {payloadStr.slice(0, 50)}
+            {payloadStr.length > 50 ? '...' : ''}
+          </span>
+        </div>
+
+        {/* WS Audience Column */}
+        <div className="col-span-1 px-3 py-1.5">
+          <span className="text-sm text-muted-foreground dark:text-neutral-400">
+            {message.wsAudienceCount}
+          </span>
+        </div>
+
+        {/* WH Delivered Column */}
+        <div className="col-span-1 px-3 py-1.5">
+          <span className="text-sm text-muted-foreground dark:text-neutral-400">
+            {message.whDeliveredCount}/{message.whAudienceCount}
+          </span>
+        </div>
+
+        {/* Created Column */}
+        <div className="col-span-2 px-3 py-1.5">
+          <span
+            className="text-sm text-muted-foreground dark:text-neutral-400 truncate"
+            title={message.createdAt}
+          >
+            {formatTime(message.createdAt)}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}

package/frontend/src/features/realtime/components/RealtimeEmptyState.tsx

@@ -0,0 +1,30 @@
+import { Radio } from 'lucide-react';
+
+interface RealtimeEmptyStateProps {
+  type: 'channels' | 'messages';
+}
+
+export default function RealtimeEmptyState({ type }: RealtimeEmptyStateProps) {
+  const content = {
+    channels: {
+      title: 'No channels available',
+      description: 'Create a channel to start receiving realtime events',
+    },
+    messages: {
+      title: 'No messages yet',
+      description: 'Messages will appear here when events are published to channels',
+    },
+  };
+
+  return (
+    <div className="flex flex-col items-center justify-center py-8 text-center gap-3 rounded-[8px] bg-neutral-100 dark:bg-[#333333]">
+      <Radio size={40} className="text-neutral-400 dark:text-neutral-600" />
+      <div className="flex flex-col items-center justify-center gap-1">
+        <p className="text-sm font-medium text-zinc-950 dark:text-white">{content[type].title}</p>
+        <p className="text-neutral-500 dark:text-neutral-400 text-xs">
+          {content[type].description}
+        </p>
+      </div>
+    </div>
+  );
+}

package/frontend/src/features/realtime/hooks/useRealtime.ts

@@ -0,0 +1,218 @@
+import { useState, useCallback } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import {
+  realtimeService,
+  type RealtimeChannel,
+  type RealtimePermissionsResponse,
+} from '../services/realtime.service';
+import { useToast } from '@/lib/hooks/useToast';
+import type {
+  CreateChannelRequest,
+  UpdateChannelRequest,
+  ListMessagesRequest,
+} from '@insforge/shared-schemas';
+
+export function useRealtime() {
+  const queryClient = useQueryClient();
+  const { showToast } = useToast();
+  const [selectedChannel, setSelectedChannel] = useState<RealtimeChannel | null>(null);
+
+  // ============================================================================
+  // Channels Query
+  // ============================================================================
+
+  const {
+    data: channels = [],
+    isLoading: isLoadingChannels,
+    error: channelsError,
+    refetch: refetchChannels,
+  } = useQuery({
+    queryKey: ['realtime', 'channels'],
+    queryFn: () => realtimeService.listChannels(),
+    staleTime: 2 * 60 * 1000,
+  });
+
+  // ============================================================================
+  // Messages Query
+  // ============================================================================
+
+  const [messagesParams, setMessagesParams] = useState<ListMessagesRequest>({
+    limit: 100,
+    offset: 0,
+  });
+
+  const {
+    data: messages = [],
+    isLoading: isLoadingMessages,
+    error: messagesError,
+    refetch: refetchMessages,
+  } = useQuery({
+    queryKey: ['realtime', 'messages', messagesParams],
+    queryFn: () => realtimeService.listMessages(messagesParams),
+    staleTime: 30 * 1000, // 30 seconds for messages
+  });
+
+  // ============================================================================
+  // Stats Query
+  // ============================================================================
+
+  const {
+    data: stats,
+    isLoading: isLoadingStats,
+    refetch: refetchStats,
+  } = useQuery({
+    queryKey: ['realtime', 'stats'],
+    queryFn: () => realtimeService.getMessageStats(),
+    staleTime: 60 * 1000, // 1 minute for stats
+  });
+
+  // ============================================================================
+  // Permissions Query
+  // ============================================================================
+
+  const {
+    data: permissions,
+    isLoading: isLoadingPermissions,
+    error: permissionsError,
+    refetch: refetchPermissions,
+  } = useQuery<RealtimePermissionsResponse>({
+    queryKey: ['realtime', 'permissions'],
+    queryFn: () => realtimeService.getPermissions(),
+    staleTime: 2 * 60 * 1000,
+  });
+
+  // ============================================================================
+  // Channel Mutations
+  // ============================================================================
+
+  const createChannelMutation = useMutation({
+    mutationFn: (data: CreateChannelRequest) => realtimeService.createChannel(data),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ['realtime', 'channels'] });
+      showToast('Channel created successfully', 'success');
+    },
+    onError: (error: Error) => {
+      showToast(error.message || 'Failed to create channel', 'error');
+    },
+  });
+
+  const updateChannelMutation = useMutation({
+    mutationFn: ({ id, data }: { id: string; data: UpdateChannelRequest }) =>
+      realtimeService.updateChannel(id, data),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ['realtime', 'channels'] });
+      showToast('Channel updated successfully', 'success');
+    },
+    onError: (error: Error) => {
+      showToast(error.message || 'Failed to update channel', 'error');
+    },
+  });
+
+  const deleteChannelMutation = useMutation({
+    mutationFn: (id: string) => realtimeService.deleteChannel(id),
+    onSuccess: (_, id) => {
+      void queryClient.invalidateQueries({ queryKey: ['realtime', 'channels'] });
+      showToast('Channel deleted successfully', 'success');
+      if (selectedChannel?.id === id) {
+        setSelectedChannel(null);
+      }
+    },
+    onError: (error: Error) => {
+      showToast(error.message || 'Failed to delete channel', 'error');
+    },
+  });
+
+  // ============================================================================
+  // Actions
+  // ============================================================================
+
+  const selectChannel = useCallback((channel: RealtimeChannel | null) => {
+    setSelectedChannel(channel);
+  }, []);
+
+  const clearSelection = useCallback(() => {
+    setSelectedChannel(null);
+  }, []);
+
+  const filterMessages = useCallback((params: Partial<ListMessagesRequest>) => {
+    setMessagesParams((prev) => ({ ...prev, offset: 0, ...params }));
+  }, []);
+
+  const refetch = useCallback(() => {
+    void refetchChannels();
+    void refetchMessages();
+    void refetchStats();
+  }, [refetchChannels, refetchMessages, refetchStats]);
+
+  // ============================================================================
+  // Computed Values
+  // ============================================================================
+
+  const channelsCount = channels.length;
+  const messagesCount = messages.length;
+
+  // Pagination computed values
+  const messagesPageSize = messagesParams.limit || 100;
+  const messagesCurrentPage = Math.floor((messagesParams.offset || 0) / messagesPageSize) + 1;
+  const messagesTotalCount = stats?.totalMessages || 0;
+  const messagesTotalPages = Math.ceil(messagesTotalCount / messagesPageSize) || 1;
+
+  const setMessagesPage = useCallback((page: number) => {
+    setMessagesParams((prev) => ({
+      ...prev,
+      offset: (page - 1) * (prev.limit || 100),
+    }));
+  }, []);
+
+  return {
+    // Channels
+    channels,
+    channelsCount,
+    selectedChannel,
+    isLoadingChannels,
+    channelsError,
+
+    // Messages
+    messages,
+    messagesCount,
+    messagesParams,
+    isLoadingMessages,
+    messagesError,
+
+    // Messages Pagination
+    messagesPageSize,
+    messagesCurrentPage,
+    messagesTotalCount,
+    messagesTotalPages,
+    setMessagesPage,
+
+    // Stats
+    stats,
+    isLoadingStats,
+
+    // Permissions
+    permissions,
+    isLoadingPermissions,
+    permissionsError,
+    refetchPermissions,
+
+    // Loading states
+    isLoading: isLoadingChannels || isLoadingMessages,
+
+    // Mutations states
+    isCreating: createChannelMutation.isPending,
+    isUpdating: updateChannelMutation.isPending,
+    isDeleting: deleteChannelMutation.isPending,
+
+    // Actions
+    selectChannel,
+    clearSelection,
+    createChannel: createChannelMutation.mutate,
+    updateChannel: updateChannelMutation.mutate,
+    deleteChannel: deleteChannelMutation.mutate,
+    filterMessages,
+    refetch,
+    refetchChannels,
+    refetchMessages,
+  };
+}

package/frontend/src/features/realtime/index.ts

@@ -0,0 +1,11 @@
+export { default as RealtimeChannelsPage } from './pages/RealtimeChannelsPage';
+export { default as RealtimeMessagesPage } from './pages/RealtimeMessagesPage';
+export { default as RealtimePermissionsPage } from './pages/RealtimePermissionsPage';
+export { useRealtime } from './hooks/useRealtime';
+export { realtimeService } from './services/realtime.service';
+export type {
+  RealtimeChannel,
+  RealtimeMessage,
+  RealtimePermissionsResponse,
+  RlsPolicy,
+} from './services/realtime.service';