insforge 1.2.10 → 1.4.8

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';

package/frontend/src/features/realtime/pages/RealtimeChannelsPage.tsx

@@ -0,0 +1,172 @@
+import { useState } from 'react';
+import RefreshIcon from '@/assets/icons/refresh.svg?react';
+import {
+  Button,
+  ConfirmDialog,
+  Skeleton,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components';
+import { useConfirm } from '@/lib/hooks/useConfirm';
+import { useRealtime } from '../hooks/useRealtime';
+import { ChannelRow } from '../components/ChannelRow';
+import { EditChannelModal } from '../components/EditChannelModal';
+import RealtimeEmptyState from '../components/RealtimeEmptyState';
+import type { RealtimeChannel } from '../services/realtime.service';
+
+export default function RealtimeChannelsPage() {
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [selectedChannel, setSelectedChannel] = useState<RealtimeChannel | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const {
+    channels,
+    isLoadingChannels,
+    refetchChannels,
+    updateChannel,
+    isUpdating,
+    deleteChannel,
+    isDeleting,
+  } = useRealtime();
+
+  const { confirm, confirmDialogProps } = useConfirm();
+
+  const handleRefresh = async () => {
+    setIsRefreshing(true);
+    try {
+      await refetchChannels();
+    } finally {
+      setIsRefreshing(false);
+    }
+  };
+
+  const handleRowClick = (channel: RealtimeChannel) => {
+    setSelectedChannel(channel);
+    setIsModalOpen(true);
+  };
+
+  const handleToggleEnabled = (channel: RealtimeChannel, enabled: boolean) => {
+    updateChannel({ id: channel.id, data: { enabled } });
+  };
+
+  const handleDelete = async (channel: RealtimeChannel) => {
+    const shouldDelete = await confirm({
+      title: 'Delete Channel',
+      description: `Are you sure you want to delete the channel "${channel.pattern}"? This action cannot be undone.`,
+      confirmText: 'Delete',
+      destructive: true,
+    });
+
+    if (shouldDelete) {
+      deleteChannel(channel.id);
+    }
+  };
+
+  const handleModalSave = (id: string, data: Parameters<typeof updateChannel>[0]['data']) => {
+    updateChannel(
+      { id, data },
+      {
+        onSuccess: () => {
+          setIsModalOpen(false);
+          setSelectedChannel(null);
+        },
+      }
+    );
+  };
+  return (
+    <div className="h-full flex flex-col overflow-hidden">
+      <div className="flex flex-col gap-6 p-4">
+        <div className="flex items-center gap-3">
+          <h1 className="text-xl font-normal text-zinc-950 dark:text-white">Channels</h1>
+
+          {/* Separator */}
+          <div className="h-6 w-px bg-gray-200 dark:bg-neutral-700" />
+
+          {/* Refresh button */}
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="p-1 h-9 w-9"
+                  onClick={() => void handleRefresh()}
+                  disabled={isRefreshing}
+                >
+                  <RefreshIcon className="h-5 w-5 text-zinc-400 dark:text-neutral-400" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent side="bottom" align="center">
+                <p>{isRefreshing ? 'Refreshing...' : 'Refresh'}</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+
+        {/* Table Header */}
+        <div className="flex items-center pl-3 pr-[44px] text-sm text-muted-foreground dark:text-neutral-400">
+          <div className="w-[76px] shrink-0 py-1 px-3">Enabled</div>
+          <div className="flex-1 py-1 px-3">Pattern</div>
+          <div className="w-[640px] py-1 px-3">Description</div>
+          <div className="flex-1 py-1 px-3">Created</div>
+        </div>
+      </div>
+
+      {/* Scrollable Table Body */}
+      <div className="flex-1 min-h-0 overflow-y-auto px-4 pb-4 relative">
+        <div className="flex flex-col gap-2">
+          {isLoadingChannels ? (
+            <>
+              {[...Array(4)].map((_, i) => (
+                <Skeleton key={i} className="h-14 rounded-[8px]" />
+              ))}
+            </>
+          ) : channels.length >= 1 ? (
+            <>
+              {channels.map((channel) => (
+                <ChannelRow
+                  key={channel.id}
+                  channel={channel}
+                  onClick={() => handleRowClick(channel)}
+                  onToggleEnabled={(enabled) => handleToggleEnabled(channel, enabled)}
+                  onDelete={() => void handleDelete(channel)}
+                  isUpdating={isUpdating}
+                  isDeleting={isDeleting}
+                />
+              ))}
+            </>
+          ) : (
+            <RealtimeEmptyState type="channels" />
+          )}
+        </div>
+
+        {/* Loading mask overlay */}
+        {isRefreshing && (
+          <div className="absolute inset-0 bg-white dark:bg-neutral-800 flex items-center justify-center z-50">
+            <div className="flex items-center gap-1">
+              <div className="w-5 h-5 border-2 border-zinc-500 dark:border-neutral-700 border-t-transparent rounded-full animate-spin" />
+              <span className="text-sm text-zinc-500 dark:text-zinc-400">Loading</span>
+            </div>
+          </div>
+        )}
+      </div>
+
+      <EditChannelModal
+        channel={selectedChannel}
+        open={isModalOpen}
+        onOpenChange={(open) => {
+          setIsModalOpen(open);
+          if (!open) {
+            setSelectedChannel(null);
+          }
+        }}
+        onSave={handleModalSave}
+        isUpdating={isUpdating}
+      />
+
+      <ConfirmDialog {...confirmDialogProps} />
+    </div>
+  );
+}

package/frontend/src/features/realtime/pages/RealtimeMessagesPage.tsx

@@ -0,0 +1,211 @@
+import { useState } from 'react';
+import { ChevronRight } from 'lucide-react';
+import RefreshIcon from '@/assets/icons/refresh.svg?react';
+import {
+  Button,
+  PaginationControls,
+  Skeleton,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components';
+import { useRealtime } from '../hooks/useRealtime';
+import { MessageRow } from '../components/MessageRow';
+import RealtimeEmptyState from '../components/RealtimeEmptyState';
+import type { RealtimeMessage } from '../services/realtime.service';
+
+export default function RealtimeMessagesPage() {
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [selectedMessage, setSelectedMessage] = useState<RealtimeMessage | null>(null);
+
+  const {
+    messages,
+    isLoadingMessages,
+    refetchMessages,
+    messagesPageSize,
+    messagesCurrentPage,
+    messagesTotalCount,
+    messagesTotalPages,
+    setMessagesPage,
+  } = useRealtime();
+
+  const handleRefresh = async () => {
+    setIsRefreshing(true);
+    try {
+      await refetchMessages();
+    } finally {
+      setIsRefreshing(false);
+    }
+  };
+
+  // Message detail view
+  if (selectedMessage) {
+    return (
+      <div className="h-full flex flex-col overflow-hidden">
+        <div className="flex items-center gap-2.5 p-4 border-b border-border-gray dark:border-neutral-600">
+          <button
+            onClick={() => setSelectedMessage(null)}
+            className="text-xl text-zinc-500 dark:text-neutral-400 hover:text-zinc-950 dark:hover:text-white transition-colors"
+          >
+            Messages
+          </button>
+          <ChevronRight className="w-5 h-5 text-muted-foreground dark:text-neutral-400" />
+          <p className="text-xl text-zinc-950 dark:text-white">{selectedMessage.eventName}</p>
+        </div>
+
+        <div className="flex-1 min-h-0 p-4 overflow-auto">
+          <div className="space-y-4">
+            <div className="grid grid-cols-3 gap-4">
+              <div className="p-4 rounded-lg bg-neutral-100 dark:bg-[#333333]">
+                <p className="text-sm text-muted-foreground dark:text-neutral-400 mb-1">Channel</p>
+                <p className="text-sm text-zinc-950 dark:text-white">
+                  {selectedMessage.channelName}
+                </p>
+              </div>
+              <div className="p-4 rounded-lg bg-neutral-100 dark:bg-[#333333]">
+                <p className="text-sm text-muted-foreground dark:text-neutral-400 mb-1">
+                  Sender Type
+                </p>
+                <p className="text-sm text-zinc-950 dark:text-white">
+                  {selectedMessage.senderType}
+                </p>
+              </div>
+              <div className="p-4 rounded-lg bg-neutral-100 dark:bg-[#333333]">
+                <p className="text-sm text-muted-foreground dark:text-neutral-400 mb-1">Created</p>
+                <p className="text-sm text-zinc-950 dark:text-white">{selectedMessage.createdAt}</p>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-3 gap-4">
+              <div className="p-4 rounded-lg bg-neutral-100 dark:bg-[#333333]">
+                <p className="text-sm text-muted-foreground dark:text-neutral-400 mb-1">
+                  WS Audience
+                </p>
+                <p className="text-sm text-zinc-950 dark:text-white">
+                  {selectedMessage.wsAudienceCount}
+                </p>
+              </div>
+              <div className="p-4 rounded-lg bg-neutral-100 dark:bg-[#333333]">
+                <p className="text-sm text-muted-foreground dark:text-neutral-400 mb-1">
+                  WH Audience
+                </p>
+                <p className="text-sm text-zinc-950 dark:text-white">
+                  {selectedMessage.whAudienceCount}
+                </p>
+              </div>
+              <div className="p-4 rounded-lg bg-neutral-100 dark:bg-[#333333]">
+                <p className="text-sm text-muted-foreground dark:text-neutral-400 mb-1">
+                  WH Delivered
+                </p>
+                <p className="text-sm text-zinc-950 dark:text-white">
+                  {selectedMessage.whDeliveredCount}
+                </p>
+              </div>
+            </div>
+
+            <div className="p-4 rounded-lg bg-neutral-100 dark:bg-[#333333]">
+              <p className="text-sm text-muted-foreground dark:text-neutral-400 mb-2">Payload</p>
+              <pre className="text-sm text-zinc-950 dark:text-white font-mono whitespace-pre-wrap overflow-auto">
+                {JSON.stringify(selectedMessage.payload, null, 2)}
+              </pre>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Default list view
+  return (
+    <div className="h-full flex flex-col overflow-hidden">
+      {/* Fixed Page Header */}
+      <div className="shrink-0 flex items-center gap-3 p-4 pb-0">
+        <h1 className="text-xl font-normal text-zinc-950 dark:text-white">Messages</h1>
+
+        {/* Separator */}
+        <div className="h-6 w-px bg-gray-200 dark:bg-neutral-700" />
+
+        {/* Refresh button */}
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="p-1 h-9 w-9"
+                onClick={() => void handleRefresh()}
+                disabled={isRefreshing}
+              >
+                <RefreshIcon className="h-5 w-5 text-zinc-400 dark:text-neutral-400" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom" align="center">
+              <p>{isRefreshing ? 'Refreshing...' : 'Refresh'}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+
+      {/* Fixed Table Header */}
+      <div className="shrink-0 grid grid-cols-12 px-7 pt-6 pb-2 text-sm text-muted-foreground dark:text-neutral-400">
+        <div className="col-span-2 py-1 px-3">Event</div>
+        <div className="col-span-2 py-1 px-3">Channel</div>
+        <div className="col-span-1 py-1 px-3">Sender</div>
+        <div className="col-span-3 py-1 px-3">Payload</div>
+        <div className="col-span-1 py-1 px-3">WebSockets</div>
+        <div className="col-span-1 py-1 px-3">Webhooks</div>
+        <div className="col-span-2 py-1 px-3">Sent At</div>
+      </div>
+
+      {/* Scrollable Content Area */}
+      <div className="flex-1 min-h-0 overflow-auto px-4 pb-4 relative">
+        <div className="flex flex-col gap-2">
+          {isLoadingMessages ? (
+            <>
+              {[...Array(4)].map((_, i) => (
+                <Skeleton key={i} className="h-14 rounded-[8px]" />
+              ))}
+            </>
+          ) : messages.length >= 1 ? (
+            <>
+              {messages.map((message) => (
+                <MessageRow
+                  key={message.id}
+                  message={message}
+                  onClick={() => setSelectedMessage(message)}
+                />
+              ))}
+            </>
+          ) : (
+            <RealtimeEmptyState type="messages" />
+          )}
+        </div>
+
+        {/* Loading mask overlay */}
+        {isRefreshing && (
+          <div className="absolute inset-0 bg-white dark:bg-neutral-800 flex items-center justify-center z-50">
+            <div className="flex items-center gap-1">
+              <div className="w-5 h-5 border-2 border-zinc-500 dark:border-neutral-700 border-t-transparent rounded-full animate-spin" />
+              <span className="text-sm text-zinc-500 dark:text-zinc-400">Loading</span>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Pagination */}
+      {messages.length > 0 && (
+        <div className="shrink-0">
+          <PaginationControls
+            currentPage={messagesCurrentPage}
+            totalPages={messagesTotalPages}
+            onPageChange={setMessagesPage}
+            totalRecords={messagesTotalCount}
+            pageSize={messagesPageSize}
+            recordLabel="messages"
+          />
+        </div>
+      )}
+    </div>
+  );
+}