be-components 7.4.3 → 7.4.4

package/src/NotificationManager/index.tsx

@@ -0,0 +1,894 @@
+import React, { useEffect, useState, useMemo } from 'react';
+import { FlatList, TouchableOpacity, ActivityIndicator } from 'react-native';
+import { View, Text, Button, TextInput } from '../Components/Themed';
+import { useColors } from '../constants/useColors';
+import { NotificationApi, NotificationHelpers } from './api';
+import type { PlayerNotificationProps, MyPlayerProps, NotificationGroupProps, FocusPositionProps } from '../types';
+import { Icons } from '../Components';
+import DropDown from '../Components/Dropdown';
+import { showConfirmAlert } from '../Components/ConfirmAlert';
+
+type NotificationManagerProps = {
+    player_ids: string[];
+    me: MyPlayerProps;
+    notification_type?: 'order_notifications' | 'competition_notifications' | 'social_notifications';
+    default_path_name?: string;
+    onFocusPosition?:(pos:FocusPositionProps) => void,
+    default_params?: Record<string, string>;
+    onComplete?: (notification: PlayerNotificationProps) => void;
+    onClose?: () => void;
+};
+
+const notification_types = [
+    { label: 'Order Notifications', value: 'order_notifications' },
+    { label: 'Competition Notifications', value: 'competition_notifications' },
+    { label: 'Social Notifications', value: 'social_notifications' }
+];
+
+const sections = ['header','top_row', 'preview', 'second_row']
+
+const NotificationManager = ({
+    player_ids,
+    me,
+    notification_type,
+    default_path_name,
+    onFocusPosition,
+    default_params,
+    onComplete,
+    onClose
+}: NotificationManagerProps) => {
+    const Colors = useColors();
+    const [loading, setLoading] = useState(false);
+    const [loadingGroups, setLoadingGroups] = useState(false);
+    const [notificationGroups, setNotificationGroups] = useState<NotificationGroupProps[]>([]);
+    const [selectedGroup, setSelectedGroup] = useState<NotificationGroupProps | null>(null);
+    const [showGroupsModal, setShowGroupsModal] = useState(false);
+    const [groupMemberIds, setGroupMemberIds] = useState<string[]>([]);
+    const [showEditCustomGroupModal, setShowEditCustomGroupModal] = useState(false);
+    const [customGroupCsv, setCustomGroupCsv] = useState('');
+    const [sendingProgress, setSendingProgress] = useState<{ current: number; total: number } | null>(null);
+
+    // Create a custom group from initial player_ids
+    const customGroup: NotificationGroupProps | null = player_ids.length > 0 ? {
+        notification_group_id: 'custom_group',
+        name: 'Custom Recipients',
+        description: `${player_ids.length} selected recipients`,
+        status: 'active',
+        grouping_function:'',
+        player_count: player_ids.length,
+        create_datetime: new Date().toISOString(),
+        last_update_datetime: new Date().toISOString()
+    } : null;
+
+    // Initialize selectedPath based on default_path_name if provided
+    const initialPath = default_path_name
+        ? NotificationHelpers.app_paths.find(p => p.path_name === default_path_name) || NotificationHelpers.app_paths[0]
+        : NotificationHelpers.app_paths[0];
+
+    const [selectedPath, setSelectedPath] = useState<typeof NotificationHelpers.app_paths[0] | undefined>(initialPath);
+    const [customPathName, setCustomPathName] = useState('');
+    const [pathParams, setPathParams] = useState<Record<string, string>>(default_params || {});
+    const [pathSearch, setPathSearch] = useState('');
+    const [notification, setNotification] = useState<Partial<PlayerNotificationProps>>({
+        type: notification_type || 'order_notifications',
+        notify_body_type: 'custom',
+        title: '',
+        body: '',
+        status: 'pending',
+        expire_time: Date.now() + (7 * 24 * 60 * 60 * 1000), // 7 days from now
+    });
+
+    useEffect(() => {
+        startUp();
+        // Auto-select custom group if initial player_ids provided
+        if (customGroup) {
+            setSelectedGroup(customGroup);
+            setGroupMemberIds(player_ids);
+        }
+    }, []);
+
+    useEffect(() => {
+        // Initialize pathParams when selectedPath changes, merging with default_params
+        const mergedParams = { ...selectedPath?.params, ...(default_params || {}) };
+        setPathParams(mergedParams as any);
+    }, [selectedPath]);
+
+    const startUp = () => {
+        NotificationApi.setEnvironment();
+    };
+
+    const loadNotificationGroups = async () => {
+        setLoadingGroups(true);
+        const groups = await NotificationApi.getActiveNotificationGroups();
+        setNotificationGroups(groups);
+        setLoadingGroups(false);
+    };
+
+    const handleSelectGroup = async (group_id: string) => {
+        setLoadingGroups(true);
+
+        // Check if it's the custom group
+        if (group_id === 'custom_group' && customGroup) {
+            setSelectedGroup(customGroup);
+            setGroupMemberIds(player_ids);
+            setLoadingGroups(false);
+            setShowGroupsModal(false);
+            return;
+        }
+
+        const group = notificationGroups.find(g => g.notification_group_id === group_id);
+        setSelectedGroup(group || null);
+
+        // Fetch all members for this group
+        const members = await NotificationApi.getNotificationGroupMembersByGroup(group_id);
+
+        // Flatten all player_ids arrays from all member objects
+        const memberPlayerIds = members.flatMap(m => m.player_ids);
+        setGroupMemberIds(memberPlayerIds);
+
+        setLoadingGroups(false);
+        setShowGroupsModal(false);
+    };
+
+    const handleRemoveGroup = () => {
+        setSelectedGroup(null);
+        setGroupMemberIds([]);
+    };
+
+    const handleOpenEditCustomGroup = () => {
+        // Populate CSV with current groupMemberIds
+        setCustomGroupCsv(groupMemberIds.join(','));
+        setShowEditCustomGroupModal(true);
+    };
+
+    const handleSaveCustomGroup = () => {
+        // Parse CSV and update groupMemberIds
+        const ids = customGroupCsv
+            .split(',')
+            .map(id => id.trim())
+            .filter(id => id.length > 0);
+
+        setGroupMemberIds(ids);
+
+        // Update the custom group description
+        if (customGroup && selectedGroup?.notification_group_id === 'custom_group') {
+            const updatedGroup = {
+                ...customGroup,
+                description: `${ids.length} selected recipients`,
+                player_count: ids.length
+            };
+            setSelectedGroup(updatedGroup);
+        }
+
+        setShowEditCustomGroupModal(false);
+    };
+
+    // Filter and sort paths: primary first (alphabetically), then others (alphabetically), limited by search
+    const filteredPaths = useMemo(() => {
+        let filtered = NotificationHelpers.app_paths;
+
+        // Apply search filter
+        if (pathSearch) {
+            filtered = filtered.filter(path =>
+                path.label.toLowerCase().includes(pathSearch.toLowerCase()) ||
+                path.path_name.toLowerCase().includes(pathSearch.toLowerCase())
+            );
+        }
+
+        // Sort: primary paths first (alphabetically), then non-primary (alphabetically)
+        const sorted = [...filtered].sort((a, b) => {
+            if (a.primary && !b.primary) return -1;
+            if (!a.primary && b.primary) return 1;
+            return a.label.localeCompare(b.label);
+        });
+
+        // Limit to 15 results
+        return sorted.slice(0, 15);
+    }, [pathSearch]);
+
+    const isValid = (): string[] => {
+        const errors: string[] = [];
+
+        if (!notification.title || notification.title.trim() === '') {
+            errors.push('Notification title is required');
+        }
+
+        if (!notification.body || notification.body.trim() === '') {
+            errors.push('Notification body is required');
+        }
+
+        if (groupMemberIds.length === 0) {
+            errors.push('At least one recipient is required');
+        }
+
+        // Check required params
+        if (selectedPath?.requiredParams && selectedPath.requiredParams.length > 0) {
+            selectedPath.requiredParams.forEach(paramKey => {
+                if (!pathParams[paramKey] || pathParams[paramKey].trim() === '') {
+                    errors.push(`Required parameter "${paramKey}" is missing`);
+                }
+            });
+        }
+
+        // Check custom path name
+        if (selectedPath?.path_name === 'custom' && (!customPathName || customPathName.trim() === '')) {
+            errors.push('Custom path name is required');
+        }
+
+        return errors;
+    };
+
+    const confirmSendNotification = (options?:{ test:boolean }) => {
+        const errors = isValid();
+
+        if (errors.length > 0) {
+            const errorMessage = 'Please fix the following errors:\n\n' + errors.map((err, idx) => `${idx + 1}. ${err}`).join('\n');
+            alert(errorMessage);
+            return;
+        }
+
+        showConfirmAlert('Are you sure?', options?.test ? 'This will send a test notification to you only':'This will send a notification to all users selected',
+            () => handleSendNotification(options),
+            () => console.log('Done')
+        )
+    };
+
+    const handleSendNotification = async (options?:{ test:boolean }) => {
+        // Use only group member IDs (no individual player_ids)
+        let player_ids_to_send = [...groupMemberIds];
+
+        if(options?.test){
+            //Change to the admin
+            player_ids_to_send = [me.player_id]
+        }
+
+        setLoading(true);
+        try {
+            // Determine final path_name
+            const finalPathName = selectedPath?.path_name === 'custom' ? customPathName : selectedPath?.path_name;
+
+            // Construct the complete notification object with all required fields
+            const completeNotification: PlayerNotificationProps = {
+                player_notification_id: '', // Will be generated by backend
+                player_id: me.player_id,
+                type: notification.type as 'order_notifications' | 'competition_notifications' | 'social_notifications',
+                notify_body_type: notification.notify_body_type || 'custom',
+                title: notification.title!,
+                body: notification.body!,
+                options: {
+                    id: Date.now().toString(),
+                    body: notification.body!,
+                    icon: 'default',
+                    type: notification.type || 'order_notifications',
+                    data: {
+                        id: Date.now().toString(),
+                        player_id: me.player_id,
+                        pageStack: 'MainStack',
+                        page: 'Notifications',
+                        pageParams: {},
+                        url: notification.link_override,
+                        path_name: finalPathName,
+                        params: pathParams
+                    }
+                },
+                status: 'unread',
+                link_override: notification.link_override,
+                expire_time: 0,
+                create_datetime: new Date().toISOString(),
+                last_update_datetime: new Date().toISOString(),
+            };
+
+            // Split into batches of 500
+            const BATCH_SIZE = 500;
+            const batches: string[][] = [];
+            for (let i = 0; i < player_ids_to_send.length; i += BATCH_SIZE) {
+                batches.push(player_ids_to_send.slice(i, i + BATCH_SIZE));
+            }
+
+            // Send notifications in batches
+            for (let i = 0; i < batches.length; i++) {
+                const batch = batches[i];
+                if (!batch) continue;
+
+                setSendingProgress({ current: i + 1, total: batches.length });
+                await NotificationApi.broadcastNotifications(
+                    completeNotification,
+                    batch
+                );
+            }
+
+            setSendingProgress(null);
+
+            if (onComplete) {
+                onComplete(completeNotification);
+            }
+
+            // Only reset form if not a test send
+            if (!options?.test) {
+                setNotification({
+                    type: 'order_notifications',
+                    notify_body_type: 'custom',
+                    title: '',
+                    body: '',
+                    status: 'pending',
+                    expire_time: Date.now() + (7 * 24 * 60 * 60 * 1000),
+                });
+            }
+
+            const recipientCount = options?.test ? 1 : groupMemberIds.length;
+            const recipientMessage = options?.test ? 'Test notification sent to you!' : `Notification sent successfully to ${recipientCount} user${recipientCount !== 1 ? 's' : ''}!`;
+            alert(recipientMessage);
+        } catch (error) {
+            console.error('Error sending notification:', error);
+            alert('Failed to send notification. Please try again.');
+        }
+        setLoading(false);
+    };
+
+    
+    const renderSections = (data:{ item:string, index:number }) => {
+        switch(data.item){
+            case 'header':
+                const headerTotalRecipients = groupMemberIds.length;
+                return (
+                    <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                      <View transparent style={{ flex:1 }}>
+                        <Text theme='h1'>Send Notification</Text>
+                        <Text theme='description' style={{ marginTop:3 }}>Sending to {headerTotalRecipients} users</Text>
+                      </View>
+                        {onClose && (
+                            <Button transparent onPress={onClose}>
+                                <Icons.CloseIcon size={16} color={Colors.text.h1} />
+                            </Button>
+                        )}
+                    </View>
+                )
+            case 'preview':
+                return (
+                    <View float style={{ margin: 5 }}>
+                        <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                          <View transparent style={{ flex:1 }}>
+                            <Text theme='h1'>Preview</Text>
+                            <Text theme='description' style={{ marginTop:3 }}>What will this notification look like?</Text>
+                          </View>
+                        </View>
+                        <View
+                            float
+                            style={{
+                                padding: 15,
+                                margin:10,
+                                borderRadius: 8,
+                                borderWidth: 1,
+                                borderColor: Colors.borders.light,
+                            }}
+                        >
+                            <View transparent style={{ flexDirection: 'row', alignItems: 'center' }}>
+                                <View
+                                    style={{
+                                        width: 40,
+                                        height: 40,
+                                        borderRadius: 8,
+                                        justifyContent: 'center',
+                                        alignItems: 'center',
+                                        marginRight: 12,
+                                    }}
+                                >
+                                    <Icons.NotificationIcon size={20} color={Colors.text.h1} />
+                                </View>
+                                <View transparent style={{ flex: 1 }}>
+                                    <Text theme="h1">
+                                        {notification.title || 'Notification Title'}
+                                    </Text>
+                                    <Text theme="description" style={{ marginTop: 4 }}>
+                                        {notification.body || 'Notification message will appear here'}
+                                    </Text>
+                                </View>
+                            </View>
+                        </View>
+                    </View>
+                )
+            case 'top_row':
+                const totalRecipients = groupMemberIds.length;
+                return (
+                    <View style={{ flexDirection:'row', flexWrap:'wrap' }}>
+                        <View
+                            float
+                            style={{
+                                flexGrow:1,
+                                minWidth:300,
+                                padding:10,
+                                margin:5
+                            }}
+                        >
+                            <View transparent style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
+                                <View transparent style={{ flex:1 }}>
+                                    <Text theme="h2">Recipients ({totalRecipients})</Text>
+                                    <Text theme="description" style={{ marginTop: 4 }}>
+                                        {totalRecipients === 0 ? 'No recipients selected' : 'Selected group'}
+                                    </Text>
+                                </View>
+                                <Button
+                                    type="action"
+                                    onPress={() => {
+                                        loadNotificationGroups();
+                                        setShowGroupsModal(true);
+                                    }}
+                                    style={{ padding: 8 }}
+                                >
+                                    <Text theme="h1" color={Colors.text.white}>
+                                        Select Group
+                                    </Text>
+                                </Button>
+                            </View>
+
+                            {/* Display Selected Group */}
+                            {selectedGroup && (
+                                <View
+                                    float
+                                    style={{
+                                        flexDirection: 'row',
+                                        alignItems: 'center',
+                                        justifyContent: 'space-between',
+                                        padding: 12,
+                                        borderRadius: 8,
+                                        marginTop: 5
+                                    }}
+                                >
+                                    <View transparent style={{ flex: 1 }}>
+                                        <Text theme="h1">{selectedGroup.name}</Text>
+                                        <Text theme="description" style={{ marginTop: 2 }}>
+                                            {groupMemberIds.length} members
+                                        </Text>
+                                    </View>
+                                    <View transparent style={{ flexDirection: 'row' }}>
+                                        {selectedGroup.notification_group_id === 'custom_group' && (
+                                            <Button
+                                                type="action"
+                                                onPress={handleOpenEditCustomGroup}
+                                                style={{ padding: 8, marginRight: 8 }}
+                                            >
+                                                <Icons.EditIcon size={16} color={Colors.text.white} />
+                                            </Button>
+                                        )}
+                                        <Button
+                                            type="error"
+                                            onPress={handleRemoveGroup}
+                                            style={{ padding: 8 }}
+                                        >
+                                            <Icons.CloseIcon size={16} color={Colors.text.white} />
+                                        </Button>
+                                    </View>
+                                </View>
+                            )}
+                        </View>
+                    </View>
+                )
+
+            case 'second_row':
+                return (
+                     <View style={{ flexDirection:'row', flexWrap:'wrap' }}>
+                        <View float style={{ minWidth:300, flexGrow :1, margin:5 }}>
+                            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                              <View transparent style={{ flex:1 }}>
+                                <Text theme='h1'>Notification Message</Text>
+                                <Text theme='description' style={{ marginTop:3 }}>Update notification message below</Text>
+                              </View>
+                            </View>
+                            <View transparent type='body'>
+                                <View transparent style={{ padding:10 }}>
+                                    <Text theme="h2" style={{ marginBottom:10 }}>
+                                        Notification Title
+                                    </Text>
+                                    <TextInput
+                                        value={notification.title}
+                                        onFocusPosition={onFocusPosition}
+                                        placeholder="Enter notification title"
+                                        onChangeText={(title) => setNotification({ ...notification, title })}
+                                        
+                                    />
+                                </View>
+                                <View transparent style={{ padding:10 }}>
+                                    <Text theme="h2" style={{ marginBottom:10 }}>
+                                        Notification Body
+                                    </Text>
+                                    <TextInput
+                                        value={notification.body}
+                                        onFocusPosition={onFocusPosition}
+                                        placeholder="Enter notification message"
+                                        onChangeText={(body) => setNotification({ ...notification, body })}
+                                        multiline
+                                        numberOfLines={6}
+                                        style={{ padding: 12, borderRadius: 8, minHeight: 120 }}
+                                    />
+                                </View>
+                            </View>
+                        </View>
+                        <View float style={{ flexGrow:1, minWidth:300, margin:5 }}>
+                            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                              <View transparent style={{ flex:1 }}>
+                                <Text theme='h1'>Notification Settings</Text>
+                                <Text theme='description' style={{ marginTop:3 }}>Manage settigns below</Text>
+                              </View>
+                            </View>
+                            <View transparent type='body'>
+                                <View type='row' style={{ padding:10 }}>
+                                    <Text theme="h2" style={{ flex:1 }}>
+                                        Notification Type
+                                    </Text>
+                                    <DropDown
+                                        selected_value={
+                                            notification_types.find((t) => t.value === notification.type)?.label ?? ''
+                                        }
+                                        dropdown_options={[
+                                            { value: 'type', eligible_options: notification_types.map((t) => t.label) },
+                                        ]}
+                                        onOptionSelect={(selected) => {
+                                            const type = notification_types.find((t) => t.label === selected)?.value;
+                                            setNotification({ ...notification, type: type as any });
+                                        }}
+                                    />
+                                </View>
+                                 <View transparent style={{ padding:10 }}>
+                                    <Text theme="h2" style={{ marginBottom:10 }}>
+                                        Link Override (Optional)
+                                    </Text>
+                                    <TextInput
+                                        value={notification.link_override || ''}
+                                        onFocusPosition={onFocusPosition}
+                                        placeholder="https://example.com"
+                                        onChangeText={(link_override) =>
+                                            setNotification({ ...notification, link_override })
+                                        }
+                                        style={{ padding: 12, borderRadius: 8 }}
+                                    />
+                                </View>
+                                <View transparent style={{ padding:10 }}>
+                                    <Text theme="h2" style={{ marginBottom: 10 }}>
+                                        Deep Link Path
+                                    </Text>
+
+                                    {/* Selected Path Display */}
+                                    <View
+                                        type="header"
+                                        style={{
+                                            padding: 12,
+                                            borderRadius: 8,
+                                            marginBottom: 8,
+                                            flexDirection: 'row',
+                                            alignItems: 'center',
+                                            justifyContent: 'space-between'
+                                        }}
+                                    >
+                            <View transparent style={{ flex: 1 }}>
+                                <Text theme="h1" style={{ marginBottom: 2 }}>
+                                    {selectedPath?.label}
+                                </Text>
+                                <Text theme="description" style={{ fontSize: 12 }}>
+                                    {selectedPath?.path_name}
+                                </Text>
+                            </View>
+                            {selectedPath?.primary && (
+                                <View transparent style={{ paddingHorizontal: 8, paddingVertical: 4, borderRadius: 4 }}>
+                                    <Text theme="description" color={Colors.text.white} style={{ fontSize: 10 }}>
+                                        Primary
+                                    </Text>
+                                </View>
+                            )}
+                        </View>
+
+                        {/* Search Box */}
+                        <TextInput
+                            value={pathSearch}
+                            placeholder="Search paths to change..."
+                            onFocusPosition={onFocusPosition}
+                            onChangeText={setPathSearch}
+                            style={{ padding: 12, borderRadius: 8, marginBottom: 8 }}
+                        />
+
+                        {/* Path Results List */}
+                        {pathSearch && (
+                            <View
+                                float
+                                style={{
+                                    maxHeight: 300,
+                                    borderRadius: 8,
+                                    borderWidth: 1,
+                                    borderColor: Colors.borders.light,
+                                }}
+                            >
+                                <FlatList
+                                    data={filteredPaths}
+                                    keyExtractor={(item) => item.path_name}
+                                    renderItem={({ item }) => (
+                                        <TouchableOpacity
+                                            onPress={() => {
+                                                setSelectedPath(item);
+                                                setPathSearch('');
+                                            }}
+                                            style={{
+                                                padding: 12,
+                                                borderBottomWidth: 1,
+                                                borderColor: Colors.borders.light,
+                                            }}
+                                        >
+                                            <View transparent style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+                                                <View transparent style={{ flex: 1 }}>
+                                                    <Text theme="h2" style={{ marginBottom: 2 }}>
+                                                        {item.label}
+                                                    </Text>
+                                                    <Text theme="description" style={{ fontSize: 11 }}>
+                                                        {item.path_name}
+                                                    </Text>
+                                                </View>
+                                                {item.primary && (
+                                                    <View transparent style={{ paddingHorizontal: 6, paddingVertical: 2, borderRadius: 4, marginLeft: 8 }}>
+                                                        <Text theme="description" color={Colors.text.white} style={{ fontSize: 9 }}>
+                                                            Primary
+                                                        </Text>
+                                                    </View>
+                                                )}
+                                            </View>
+                                        </TouchableOpacity>
+                                    )}
+                                    ListEmptyComponent={
+                                        <View style={{ padding: 20, alignItems: 'center' }}>
+                                            <Text theme="description">No paths found</Text>
+                                        </View>
+                                    }
+                                />
+                            </View>
+                        )}
+                    </View>
+                    {Object.keys(selectedPath?.params ?? {}).length > 0 && (
+                        <View style={{ padding:10 }}>
+                            <Text theme="h2" style={{ marginBottom: 8 }}>
+                                Path Parameters
+                            </Text>
+                            <View type="header" style={{ padding: 12, borderRadius: 8 }}>
+                                {Object.keys(selectedPath?.params ?? {}).map((paramKey) => {
+                                    const isRequired = selectedPath?.requiredParams.includes(paramKey);
+                                    return (
+                                        <View key={paramKey} transparent style={{ marginBottom: 12 }}>
+                                            <View transparent style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 4 }}>
+                                                <Text theme="description">
+                                                    {paramKey}
+                                                </Text>
+                                                {isRequired ? (
+                                                    <View transparent style={{ marginLeft: 4, paddingHorizontal: 6, paddingVertical: 2, backgroundColor: Colors.text.error, borderRadius: 4 }}>
+                                                        <Text theme="description" color={Colors.text.white} style={{ fontSize: 10 }}>
+                                                            Required
+                                                        </Text>
+                                                    </View>
+                                                ) : (
+                                                    <View transparent style={{ marginLeft: 4, paddingHorizontal: 6, paddingVertical: 2, backgroundColor: Colors.borders.light, borderRadius: 4 }}>
+                                                        <Text theme="description" style={{ fontSize: 10 }}>
+                                                            Optional
+                                                        </Text>
+                                                    </View>
+                                                )}
+                                            </View>
+                                            <TextInput
+                                                value={pathParams[paramKey] || ''}
+                                                onFocusPosition={onFocusPosition}
+                                                placeholder={`Enter ${paramKey}${isRequired ? ' (required)' : ' (optional)'}`}
+                                                onChangeText={(value) =>
+                                                    setPathParams({ ...pathParams, [paramKey]: value })
+                                                }
+                                                style={{
+                                                    padding: 10,
+                                                    borderRadius: 8,
+                                                    borderWidth: isRequired ? 2 : 1,
+                                                    borderColor: isRequired && !pathParams[paramKey] ? Colors.text.error : Colors.borders.light
+                                                }}
+                                            />
+                                        </View>
+                                    );
+                                })}
+                            </View>
+                        </View>
+                    )}
+                            </View>
+                            {selectedPath?.path_name === 'custom' && (
+                                <View style={{ marginBottom: 20 }}>
+                                    <Text theme="h2" style={{ marginBottom: 8 }}>
+                                        Custom Path Name
+                                    </Text>
+                                    <TextInput
+                                        value={customPathName}
+                                        onFocusPosition={onFocusPosition}
+                                        placeholder="/your/custom/path"
+                                        onChangeText={setCustomPathName}
+                                        style={{ padding: 12, borderRadius: 8 }}
+                                    />
+                                </View>
+                            )}
+                        </View>
+                         
+                     </View>
+                )
+            default: return <></>
+        }
+    }
+
+    return (
+        <View
+            style={{ flex: 1 }}
+            >   
+            <View transparent style={{ flex:1 }}>
+                <FlatList
+                    data={sections}
+                    keyExtractor={item => item}
+                    key={'notification_manager_list'}
+                    renderItem={renderSections}
+                />
+            </View>
+            
+            {/* Footer with Send Button */}
+            <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>
+              <Button
+                    type="action"
+                    disabled={loading}
+                    loading={loading}
+                    onPress={() => confirmSendNotification({ test: true })}
+                    style={{
+                        flex:1,
+                        opacity: loading || isValid().length > 0 ? 0.5 : 1,
+                    }}
+                >
+                    <Text textAlign='center' theme="h1" color={Colors.text.white}>
+                        {loading
+                            ? (sendingProgress ? `Sending ${sendingProgress.current}/${sendingProgress.total}` : 'Sending...')
+                            : 'Send Test'}
+                    </Text>
+                </Button>
+              <Button
+                    type="success"
+                    disabled={loading}
+                    loading={loading}
+                    onPress={() => confirmSendNotification()}
+                    style={{
+                        flex:2,
+                        marginLeft:5,
+                        opacity: loading || isValid().length > 0 ? 0.5 : 1,
+                    }}
+                >
+                    <Text textAlign='center' theme="h1" color={Colors.text.white}>
+                        {loading
+                            ? (sendingProgress ? `Sending batch ${sendingProgress.current} of ${sendingProgress.total}` : 'Sending...')
+                            : 'Send Notification'}
+                    </Text>
+                </Button>
+            </View>
+
+            {/* Notification Groups Modal */}
+            {showGroupsModal && (
+                <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0, padding:20 }}>
+                    <View float style={{ flex:1 }}>
+                        <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                            <View transparent style={{ flex:1 }}>
+                                <Text theme='h1'>Notification Groups</Text>
+                                <Text theme='description' style={{ marginTop:3 }}>Select a group to send to</Text>
+                            </View>
+                        </View>
+                        <View style={{flex:1}}>
+                            {loadingGroups ? (
+                                <View style={{ padding: 40, alignItems: 'center' }}>
+                                    <ActivityIndicator size="large" color={Colors.text.action} />
+                                </View>
+                            ) : (
+                                <FlatList
+                                    data={customGroup ? [customGroup, ...notificationGroups] : notificationGroups}
+                                    keyExtractor={(item) => item.notification_group_id}
+                                    renderItem={({ item }) => (
+                                        <TouchableOpacity
+                                            onPress={() => handleSelectGroup(item.notification_group_id)}
+                                            style={{
+                                                padding: 15,
+                                                borderBottomWidth: 1,
+                                                borderColor: Colors.borders.light,
+                                                backgroundColor: item.notification_group_id === 'custom_group' ? Colors.views.header : 'transparent'
+                                            }}
+                                        >
+                                            <View transparent>
+                                                <View transparent style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+                                                    <View transparent style={{ flexDirection: 'row', alignItems: 'center', flex: 1 }}>
+                                                        <Text theme="h1">{item.name}</Text>
+                                                        {item.notification_group_id === 'custom_group' && (
+                                                            <View transparent style={{ marginLeft: 8, paddingHorizontal: 6, paddingVertical: 2, backgroundColor: Colors.buttons.background.action, borderRadius: 4 }}>
+                                                                <Text theme="description" color={Colors.text.white} style={{ fontSize: 10 }}>
+                                                                    CUSTOM
+                                                                </Text>
+                                                            </View>
+                                                        )}
+                                                    </View>
+                                                    {item.player_count !== undefined && (
+                                                        <View transparent style={{ marginLeft: 8, paddingHorizontal: 8, paddingVertical: 4, backgroundColor: Colors.views.header, borderRadius: 4 }}>
+                                                            <Text theme="description" style={{ fontSize: 12, fontWeight: '600' }}>
+                                                                {item.player_count.toLocaleString()} users
+                                                            </Text>
+                                                        </View>
+                                                    )}
+                                                </View>
+                                                {item.description && (
+                                                    <Text theme="description" style={{ marginTop: 4 }}>
+                                                        {item.description}
+                                                    </Text>
+                                                )}
+                                            </View>
+                                        </TouchableOpacity>
+                                    )}
+                                    ListEmptyComponent={
+                                        <View style={{ padding: 40, alignItems: 'center' }}>
+                                            <Text theme="description">No groups found</Text>
+                                        </View>
+                                    }
+                                />
+                            )}
+                        </View>
+                        <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>
+                            <Button
+                                style={{ flex:1 }}
+                                type='close'
+                                title='CLOSE'
+                                onPress={() => setShowGroupsModal(false)}
+                            />
+                        </View>
+                    </View>
+                </View>
+            )}
+
+            {/* Edit Custom Group Modal */}
+            {showEditCustomGroupModal && (
+                <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0, padding:20 }}>
+                    <View float style={{ maxHeight: '80%', minHeight: 400 }}>
+                        <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                            <View transparent style={{ flex:1 }}>
+                                <Text theme='h1'>Edit Custom Recipients</Text>
+                                <Text theme='description' style={{ marginTop:3 }}>Paste comma-separated player IDs</Text>
+                            </View>
+                        </View>
+                        <View style={{ flex: 1, padding: 15 }}>
+                            <Text theme="h2" style={{ marginBottom: 10 }}>
+                                Player IDs (CSV format)
+                            </Text>
+                            <TextInput
+                                value={customGroupCsv}
+                                onFocusPosition={onFocusPosition}
+                                placeholder="98,100,2485,etc"
+                                onChangeText={setCustomGroupCsv}
+                                multiline
+                                numberOfLines={10}
+                                style={{
+                                    padding: 12,
+                                    borderRadius: 8,
+                                    minHeight: 200,
+                                    textAlignVertical: 'top'
+                                }}
+                            />
+                            <Text theme="description" style={{ marginTop: 8 }}>
+                                Current count: {customGroupCsv.split(',').filter(id => id.trim().length > 0).length} IDs
+                            </Text>
+                        </View>
+                        <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>
+                            <Button
+                                style={{ flex:1, marginRight: 5 }}
+                                type='close'
+                                title='CANCEL'
+                                onPress={() => setShowEditCustomGroupModal(false)}
+                            />
+                            <Button
+                                style={{ flex:1 }}
+                                type='success'
+                                title='SAVE'
+                                onPress={handleSaveCustomGroup}
+                            />
+                        </View>
+                    </View>
+                </View>
+            )}
+        </View>
+    );
+};
+
+export default NotificationManager;
+export { NotificationApi, NotificationHelpers };