Refactor/rename subscribers component

.env.development

@@ -1,5 +1,5 @@
 REACT_APP_BASE_URL=http://localhost:9002
-REACT_APP_WALLET_BASE_URL=http://localhost:9003  # New wallet base URL
+REACT_APP_WALLET_BASE_URL=http://localhost:9003
 REACT_APP_ASSETS_BUCKET=http://localhost
 REACT_APP_DEMO_MODE=false
 

.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

.yarnrc.yml

@@ -1 +1,13 @@
+enableGlobalCache: false
+
 nodeLinker: node-modules
+
+packageExtensions:
+  react-scripts@*:
+    dependencies:
+      typescript: 4.5.5
+  react@*:
+    peerDependencies:
+      react-dom: "*"
+
+yarnPath: .yarn/releases/yarn-1.22.19.cjs

package.json

@@ -66,7 +66,7 @@
     "styled-components": "^5.3.0",
     "typeface-lato": "^1.1.13",
     "typeface-montserrat": "^1.1.13",
-    "typescript": "^5.4.5",
+    "typescript": "5.1.6",
     "uuid": "^8.3.2",
     "web-vitals": "^1.0.1",
     "workbox-background-sync": "^5.1.3",
@@ -99,6 +99,7 @@
     "not IE 11"
   ],
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@types/country-list": "^2.1.0",
     "@types/leaflet": "^1.7.9",
     "@types/react": "^18.0.28",
@@ -136,7 +137,7 @@
     "@types/react": "^18.0.28",
     "react-error-overlay": "6.0.9"
   },
-  "packageManager": "yarn@3.1.1",
+  "packageManager": "yarn@1.22.19",
   "keywords": [
     "lightence",
     "admin",

sidebar-changes.patch

@@ -0,0 +1,34 @@
+diff --git a/src/components/layouts/main/sider/sidebarNavigation.tsx b/src/components/layouts/main/sider/sidebarNavigation.tsx
+index fa18628..f2161cd 100644
+--- a/src/components/layouts/main/sider/sidebarNavigation.tsx
++++ b/src/components/layouts/main/sider/sidebarNavigation.tsx
+@@ -1,5 +1,5 @@
+ import React, { useMemo } from 'react';
+-import { DashboardOutlined, TableOutlined } from '@ant-design/icons';
++import { DashboardOutlined, TableOutlined, StopOutlined, FlagOutlined } from '@ant-design/icons';
+ import { ReactComponent as NestIcon } from '@app/assets/icons/hive.svg';
+ import { ReactComponent as BtcIcon } from '@app/assets/icons/btc.svg';
+ import { ReactComponent as StatsIcon } from '@app/assets/icons/stats.svg';
+@@ -20,8 +20,8 @@ export const useSidebarNavigation = (): SidebarNavigationItem[] => {
+   return useMemo(() => {
+     const items: SidebarNavigationItem[] = [
+       {
+         title: 'common.relay-dashboard',
+-        key: 'relay-dashboard',
++        key: 'relay-dashboard',
+         url: '/',
+         icon: <NestIcon />,
+       },
+@@ -31,6 +31,12 @@ export const useSidebarNavigation = (): SidebarNavigationItem[] => {
+         url: '/relay-settings',
+         icon: <StorageSettingsIcon />,
+       },
++      {
++        title: 'Access Control',
++        key: 'blocked-pubkeys',
++        url: '/blocked-pubkeys',
++        icon: <StopOutlined />,
++      },
+       {
+         title: 'Nostr Statistics',
+         key: 'dataTables',

sidebar-clean.patch

@@ -0,0 +1,22 @@
+--- a/src/components/layouts/main/sider/sidebarNavigation.tsx
++++ b/src/components/layouts/main/sider/sidebarNavigation.tsx
+@@ -1,5 +1,5 @@
+ import React, { useMemo } from 'react';
+-import { DashboardOutlined, TableOutlined } from '@ant-design/icons';
++import { DashboardOutlined, TableOutlined, StopOutlined, FlagOutlined } from '@ant-design/icons';
+ import { ReactComponent as NestIcon } from '@app/assets/icons/hive.svg';
+ import { ReactComponent as BtcIcon } from '@app/assets/icons/btc.svg';
+ import { ReactComponent as StatsIcon } from '@app/assets/icons/stats.svg';
+@@ -31,6 +31,12 @@ export const useSidebarNavigation = (): SidebarNavigationItem[] => {
+         url: '/relay-settings',
+         icon: <StorageSettingsIcon />,
+       },
++      {
++        title: 'Access Control',
++        key: 'blocked-pubkeys',
++        url: '/blocked-pubkeys',
++        icon: <StopOutlined />,
++      },
+       {
+         title: 'Nostr Statistics',
+         key: 'dataTables',

src/api/activity.api.ts

@@ -41,9 +41,10 @@ export const getUserActivities = (handleLogout: () => void): Promise<WalletTrans
     }
     // Assuming your backend response matches the WalletTransaction interface
     // eslint-disable-next-line
+    console.log("User Activity Data: ", data)
     return data.map((item: any) => ({
       id: item.ID,
-      witness_tx_id: item.WitnessTxId,
+      witness_tx_id: item.Address,
       date: new Date(item.Date).getTime(),
       output: item.Output,
       value: item.Value,

src/api/blockedPubkeys.api.ts

@@ -0,0 +1,51 @@
+import config from '@app/config/config';
+import { readToken } from '@app/services/localStorage.service';
+
+export interface BlockedPubkey {
+  pubkey: string;
+  reason: string;
+  blocked_at: string;
+}
+
+export const getBlockedPubkeys = async (): Promise<{ blocked_pubkeys: BlockedPubkey[], count: number }> => {
+  const token = readToken();
+  const response = await fetch(`${config.baseURL}/api/blocked-pubkeys`, {
+    headers: {
+      'Authorization': `Bearer ${token}`,
+    },
+  });
+
+  if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+  return response.json();
+};
+
+export const blockPubkey = async (pubkey: string, reason?: string): Promise<{ success: boolean, message: string }> => {
+  const token = readToken();
+  const response = await fetch(`${config.baseURL}/api/blocked-pubkeys`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'Authorization': `Bearer ${token}`,
+    },
+    body: JSON.stringify({ pubkey, reason }),
+  });
+
+  if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+  return response.json();
+};
+
+export const unblockPubkey = async (pubkey: string): Promise<{ success: boolean, message: string }> => {
+  const token = readToken();
+  // Strip the "blocked_pubkey:" prefix if it exists
+  const cleanPubkey = pubkey.replace('blocked_pubkey:', '');
+
+  const response = await fetch(`${config.baseURL}/api/blocked-pubkeys/${cleanPubkey}`, {
+    method: 'DELETE',
+    headers: {
+      'Authorization': `Bearer ${token}`,
+    },
+  });
+
+  if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+  return response.json();
+};

src/api/moderationNotifications.api.ts

@@ -0,0 +1,66 @@
+import { httpApi } from './http.api';
+
+export interface ModerationNotificationParams {
+  page?: number;
+  limit?: number;
+  filter?: 'all' | 'unread' | 'user';
+  pubkey?: string;
+}
+
+export interface ModerationNotification {
+  id: number;
+  pubkey: string;
+  event_id: string;
+  reason: string;
+  created_at: string;
+  is_read: boolean;
+  content_type: string;
+  media_url?: string;
+  thumbnail_url?: string;
+}
+
+export interface PaginationData {
+  currentPage: number;
+  pageSize: number;
+  totalItems: number;
+  totalPages: number;
+  hasNext: boolean;
+  hasPrevious: boolean;
+}
+
+export interface ModerationNotificationsResponse {
+  notifications: ModerationNotification[];
+  pagination: PaginationData;
+}
+
+export interface ModerationStats {
+  total_blocked: number;
+  total_blocked_today: number;
+  by_content_type: Array<{ type: string; count: number }>;
+  by_user: Array<{ pubkey: string; count: number }>;
+  recent_reasons: string[];
+}
+
+// Fetch moderation notifications with filtering and pagination
+export const getModerationNotifications = async (
+  params: ModerationNotificationParams = {},
+): Promise<ModerationNotificationsResponse> => {
+  const response = await httpApi.get<ModerationNotificationsResponse>('/api/moderation/notifications', { params });
+  return response.data;
+};
+
+// Mark a specific notification as read
+export const markNotificationAsRead = async (id: number): Promise<void> => {
+  await httpApi.post('/api/moderation/notifications/read', { id: [id] });
+};
+
+// Mark all notifications as read
+export const markAllNotificationsAsRead = async (): Promise<void> => {
+  await httpApi.post('/api/moderation/notifications/read-all');
+};
+
+// Get moderation statistics
+export const getModerationStats = async (): Promise<ModerationStats> => {
+  const response = await httpApi.get<ModerationStats>('/api/moderation/stats');
+  return response.data;
+};

src/api/moderationStats.api.ts

@@ -0,0 +1,32 @@
+import config from '@app/config/config';
+import { readToken } from '@app/services/localStorage.service';
+
+export interface TypeStat {
+  type: string;  // Content type (image/video)
+  count: number; // Number of items
+}
+
+export interface UserStat {
+  pubkey: string; // User public key
+  count: number;  // Number of blocked items
+}
+
+export interface ModerationStats {
+  total_blocked: number;       // Total number of blocked events
+  total_blocked_today: number; // Number of events blocked today
+  by_content_type: TypeStat[]; // Breakdown by content type
+  by_user: UserStat[];         // Top users with blocked content
+  recent_reasons: string[];    // Recent blocking reasons
+}
+
+export const getModerationStats = async (): Promise<ModerationStats> => {
+  const token = readToken();
+  const response = await fetch(`${config.baseURL}/api/moderation/stats`, {
+    headers: {
+      'Authorization': `Bearer ${token}`,
+    },
+  });
+
+  if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+  return response.json();
+};

src/api/notifications.api.ts

@@ -1,6 +1,17 @@
 export interface Message {
   id: number;
   description: string;
+  moderationData?: {
+    id: number;
+    pubkey: string;
+    event_id: string;
+    reason: string;
+    created_at: string;
+    is_read: boolean;
+    content_type: string;
+    media_url?: string;
+    thumbnail_url?: string;
+  };
 }
 
 export interface Mention extends Message {
@@ -12,26 +23,5 @@ export interface Mention extends Message {
 
 export type Notification = Mention | Message;
 
-export const notifications = [
-  {
-    id: 2,
-    description: 'header.notifications.loginAttempt',
-  },
-  {
-    id: 1,
-    description: 'header.notifications.successPayment',
-  },
-  {
-    id: 3,
-    description: 'header.notifications.serverError',
-  },
-  {
-    id: 4,
-    description: 'header.notifications.mention',
-    userName: 'Steve Manson',
-    userIcon:
-      'https://res.cloudinary.com/lapkinthegod/image/upload/v1629187274/young-male-doctor-white-uniform_x7dcrs.jpg',
-    place: 'medical-dashboard.latestScreenings.title',
-    href: `/#latest-screenings`,
-  },
-];
+// Export an empty array now that we're using real moderation notifications
+export const notifications: Notification[] = [];

src/api/paidSubscribers.ts

@@ -0,0 +1,20 @@
+export interface PaidSubscriber {
+  pubkey: string;
+  picture: string;
+  name?: string;
+  about?: string;
+  metadata?: {
+    subscriptionTier?: string;
+    subscribedSince?: string;
+  };
+}
+
+// This is a placeholder function if needed in the future
+// Currently the hook directly fetches from the API
+export const getPaidSubscribers = (): Promise<PaidSubscriber[]> => {
+  return new Promise((res) => {
+    setTimeout(() => {
+      res([]);
+    }, 0);
+  });
+};