be-components 7.6.3 → 7.6.4

package/src/NotificationManager/components/JobManagement.tsx

@@ -0,0 +1,569 @@
+import React, { useState, useEffect } from 'react';
+import { FlatList, TouchableOpacity, ActivityIndicator } from 'react-native';
+import { View, Text, Button, TextInput } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
+import { NotificationApi } from '../api';
+import { showConfirmAlert } from '../../Components/ConfirmAlert';
+import { Icons } from '../../Components';
+import StatusBadge from './shared/StatusBadge';
+import type { NotificationJobProps, NotificationJobStatus, NotificationGroupProps, FocusPositionProps } from '../../types';
+import DropDown from '../../Components/Dropdown';
+import Pagination from '../../Components/Pagination';
+
+interface JobManagementProps {
+    onEditJob?: (job: NotificationJobProps) => void;
+    onFocusPosition?:(pos:FocusPositionProps) => void
+}
+
+const STATUS_FILTERS: { label: string; value: NotificationJobStatus | 'all' }[] = [
+    { label: 'All Jobs', value: 'all' },
+    { label: 'Drafts', value: 'pending' },
+    { label: 'Scheduled', value: 'ready' },
+    { label: 'Sending', value: 'processing' },
+    { label: 'Sent', value: 'sent' },
+    { label: 'Failed', value: 'failed' },
+    { label: 'Cancelled', value: 'cancelled' },
+];
+
+type ListItemType =
+    | { type: 'header' }
+    | { type: 'search' }
+    | { type: 'filter' }
+    | { type: 'results-count' }
+    | { type: 'job'; data: NotificationJobProps }
+    | { type: 'empty' }
+    | { type: 'loading' }
+    | { type: 'pagination' };
+
+const JobManagement = ({ onEditJob, onFocusPosition }: JobManagementProps) => {
+    const Colors = useColors();
+    const [loading, setLoading] = useState(false);
+    const [jobs, setJobs] = useState<NotificationJobProps[]>([]);
+    const [groups, setGroups] = useState<NotificationGroupProps[]>([]);
+    const [statusFilter, setStatusFilter] = useState<NotificationJobStatus | 'all'>('all');
+    const [selectedJob, setSelectedJob] = useState<NotificationJobProps | null>(null);
+    const [showDetailsModal, setShowDetailsModal] = useState(false);
+    const [autoRefreshEnabled, setAutoRefreshEnabled] = useState(true);
+
+    // Pagination state
+    const [currentPage, setCurrentPage] = useState(0);
+    const pageSize = 20;
+    const [hasMore, setHasMore] = useState(false);
+
+    // Search state
+    const [searchQuery, setSearchQuery] = useState('');
+
+    useEffect(() => {
+        loadJobs();
+        loadGroups();
+    }, []);
+
+    useEffect(() => {
+        // Reload jobs when status filter or current page changes
+        loadJobs();
+    }, [statusFilter, currentPage]);
+
+    useEffect(() => {
+        // Auto-refresh every 30 seconds
+        if (!autoRefreshEnabled) return;
+
+        const interval = setInterval(() => {
+            loadJobs();
+        }, 30000);
+
+        return () => clearInterval(interval);
+    }, [autoRefreshEnabled, statusFilter, currentPage]);
+
+    const loadJobs = async () => {
+        setLoading(true);
+        const offset = currentPage * pageSize;
+
+        let fetchedJobs: NotificationJobProps[] = [];
+        if (statusFilter === 'all') {
+            fetchedJobs = await NotificationApi.getAllNotificationJobs(pageSize, offset);
+        } else {
+            fetchedJobs = await NotificationApi.getNotificationJobsByStatus(statusFilter, pageSize, offset);
+        }
+
+        // Sort by scheduled_time descending (most recent first)
+        fetchedJobs.sort((a, b) => new Date(b.scheduled_time).getTime() - new Date(a.scheduled_time).getTime());
+
+        // Check if there are more results (if we got the full page size, there might be more)
+        setHasMore(fetchedJobs.length === pageSize);
+
+        setJobs(fetchedJobs);
+        setLoading(false);
+    };
+
+    const loadGroups = async () => {
+        const allGroups = await NotificationApi.getAllNotificationGroups();
+        setGroups(allGroups);
+    };
+
+    const getGroupName = (groupId: string) => {
+        const group = groups.find(g => g.notification_group_id === groupId);
+        return group?.name || 'Unknown Group';
+    };
+
+    const handleStatusFilterChange = (newStatus: NotificationJobStatus | 'all') => {
+        setStatusFilter(newStatus);
+        setCurrentPage(0); // Reset to first page when filter changes
+    };
+
+    const handlePreviousPage = () => {
+        if (currentPage > 0) {
+            setCurrentPage(currentPage - 1);
+        }
+    };
+
+    const handleNextPage = () => {
+        if (hasMore) {
+            setCurrentPage(currentPage + 1);
+        }
+    };
+
+    const handleSelectPage = (page: number) => {
+        setCurrentPage(page);
+    };
+
+    // Client-side search filtering
+    const filteredJobs = React.useMemo(() => {
+        if (!searchQuery.trim()) {
+            return jobs;
+        }
+        const query = searchQuery.toLowerCase();
+        return jobs.filter(job => {
+            const title = (job.notification.title || '').toLowerCase();
+            const body = (job.notification.body || '').toLowerCase();
+            return title.includes(query) || body.includes(query);
+        });
+    }, [jobs, searchQuery]);
+
+    // Build list data for FlatList
+    const listData: ListItemType[] = React.useMemo(() => {
+        const data: ListItemType[] = [];
+
+        // Always add header, search, and filter sections
+        data.push({ type: 'header' });
+        data.push({ type: 'search' });
+        data.push({ type: 'filter' });
+
+        // If loading, show loading indicator
+        if (loading) {
+            data.push({ type: 'loading' });
+            return data;
+        }
+
+        // If no jobs, show empty state
+        if (filteredJobs.length === 0) {
+            data.push({ type: 'empty' });
+            return data;
+        }
+
+        // Show results count
+        data.push({ type: 'results-count' });
+
+        // Add all job items
+        filteredJobs.forEach(job => {
+            data.push({ type: 'job', data: job });
+        });
+
+        // Add pagination
+        data.push({ type: 'pagination' });
+
+        return data;
+    }, [loading, filteredJobs, currentPage, searchQuery]);
+
+    const handleCancel = (job: NotificationJobProps) => {
+        if (job.status !== 'pending' && job.status !== 'ready') {
+            alert('Only pending or scheduled jobs can be cancelled.');
+            return;
+        }
+
+        showConfirmAlert(
+            'Cancel Job',
+            `Are you sure you want to cancel this scheduled notification?`,
+            async () => {
+                try {
+                    setLoading(true);
+                    await NotificationApi.cancelNotificationJob(job.notification_job_id);
+                    await loadJobs();
+                } catch (error) {
+                    console.error('Error cancelling job:', error);
+                    alert('Failed to cancel job. Please try again.');
+                } finally {
+                    setLoading(false);
+                }
+            }
+        );
+    };
+
+    const handleRetry = (job: NotificationJobProps) => {
+        if (job.status !== 'failed') {
+            alert('Only failed jobs can be retried.');
+            return;
+        }
+
+        showConfirmAlert(
+            'Retry Failed Job',
+            `This will create a new job with the same notification. The original failed job will remain in history.`,
+            async () => {
+                try {
+                    setLoading(true);
+                    // Create a new job with same notification
+                    await NotificationApi.createNotificationJob({
+                        notification_group_id: job.notification_group_id,
+                        notification: job.notification,
+                        scheduled_time: new Date(),
+                        status: 'pending'
+                    });
+                    await loadJobs();
+                    alert('New job created! Edit and finalize it when ready.');
+                } catch (error) {
+                    console.error('Error retrying job:', error);
+                    alert('Failed to create retry job. Please try again.');
+                } finally {
+                    setLoading(false);
+                }
+            }
+        );
+    };
+
+    const handleViewDetails = (job: NotificationJobProps) => {
+        setSelectedJob(job);
+        setShowDetailsModal(true);
+    };
+
+    const formatDateTime = (dateTime: any) => {
+        const date = new Date(dateTime);
+        return date.toLocaleString();
+    };
+
+    // Render functions for each section type
+    const renderHeader = () => (
+        <View type='header' style={{ flexDirection: 'row', alignItems: 'center', padding: 10 }}>
+            <View transparent style={{ flex: 1 }}>
+                <Text theme='h1'>Manage Jobs</Text>
+                <Text theme='description' style={{ marginTop: 3 }}>
+                    View and manage scheduled notifications
+                </Text>
+            </View>
+            <View transparent style={{ flexDirection: 'row', alignItems: 'center' }}>
+                <TouchableOpacity
+                    onPress={() => setAutoRefreshEnabled(!autoRefreshEnabled)}
+                    style={{ padding: 8, marginRight: 5 }}
+                >
+                    <View transparent style={{ flexDirection: 'row', alignItems: 'center' }}>
+                        <Icons.RefreshIcon
+                            size={16}
+                            color={autoRefreshEnabled ? Colors.text.success : Colors.text.h2}
+                        />
+                        <Text
+                            theme="description"
+                            color={autoRefreshEnabled ? Colors.text.success : Colors.text.h2}
+                            style={{ marginLeft: 4, fontSize: 11 }}
+                        >
+                            Auto
+                        </Text>
+                    </View>
+                </TouchableOpacity>
+                <Button type="action" onPress={loadJobs} style={{ padding: 10, marginLeft: 5, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
+                    <Icons.RefreshIcon size={14} color={Colors.text.white} />
+                    <Text theme="h2" color={Colors.text.white} style={{ marginLeft: 6 }}>
+                        Refresh
+                    </Text>
+                </Button>
+            </View>
+        </View>
+    );
+
+    const renderSearch = () => (
+        <View type='row' style={{ padding: 10, margin: 10, marginBottom: 5 }}>
+            <View transparent style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
+                <Icons.SearchIcon size={16} color={Colors.text.h2} />
+                <TextInput
+                    placeholder="Search by title or message..."
+                    value={searchQuery}
+                    onChangeText={setSearchQuery}
+                    onFocusPosition={onFocusPosition}
+                    style={{ flex: 1, padding: 10, fontSize: 14, marginLeft:5 }}
+                />
+                {searchQuery.length > 0 && (
+                    <TouchableOpacity onPress={() => setSearchQuery('')} style={{ padding: 8 }}>
+                        <Icons.CloseIcon size={14} color={Colors.text.h2} />
+                    </TouchableOpacity>
+                )}
+            </View>
+        </View>
+    );
+
+    const renderFilter = () => (
+        <View type='row' style={{ padding: 10, margin: 10, marginTop: 5 }}>
+            <Text theme="h2" style={{ flex: 1 }}>Filter by Status</Text>
+            <DropDown
+                selected_value={STATUS_FILTERS.find((f) => f.value === statusFilter)?.label ?? 'All Jobs'}
+                dropdown_options={[
+                    { value: 'status', eligible_options: STATUS_FILTERS.map((f) => f.label) },
+                ]}
+                onOptionSelect={(selected) => {
+                    const filter = STATUS_FILTERS.find((f) => f.label === selected);
+                    if (filter) {
+                        handleStatusFilterChange(filter.value);
+                    }
+                }}
+            />
+        </View>
+    );
+
+    const renderResultsCount = () => (
+        <View transparent style={{ paddingHorizontal: 20, paddingVertical: 5 }}>
+            <Text theme="description" style={{ fontSize: 12 }}>
+                Showing {filteredJobs.length} result{filteredJobs.length !== 1 ? 's' : ''} on page {currentPage + 1}
+                {searchQuery && ` (filtered by search)`}
+            </Text>
+        </View>
+    );
+
+    const renderJobCard = (job: NotificationJobProps) => {
+        const canCancel = job.status === 'pending' || job.status === 'ready';
+        const canEdit = job.status === 'pending';
+        const canRetry = job.status === 'failed';
+
+        return (
+            <View
+                float
+                style={{
+                    padding: 15,
+                    margin: 10,
+                    borderRadius: 8,
+                }}
+            >
+                <View transparent style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 10 }}>
+                    <View transparent style={{ flex: 1 }}>
+                        <View transparent style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 6 }}>
+                            <StatusBadge status={job.status} />
+                            <Text theme="h2" style={{ marginLeft: 8, flex: 1 }}>
+                                {getGroupName(job.notification_group_id)}
+                            </Text>
+                        </View>
+                        <Text theme="h1" style={{ marginBottom: 4 }}>
+                            {job.notification.title || 'No Title'}
+                        </Text>
+                        <Text theme="description" numberOfLines={2}>
+                            {job.notification.body || 'No message'}
+                        </Text>
+                        <Text theme="description" style={{ marginTop: 6, fontSize: 11 }}>
+                            Scheduled: {formatDateTime(job.scheduled_time)}
+                        </Text>
+                        {job.sent_datetime && (
+                            <Text theme="description" style={{ fontSize: 11, color: Colors.text.success }}>
+                                Sent: {formatDateTime(job.sent_datetime)}
+                            </Text>
+                        )}
+                        {job.error_message && (
+                            <Text theme="description" style={{ fontSize: 11, color: Colors.text.error, marginTop: 4 }}>
+                                Error: {job.error_message}
+                            </Text>
+                        )}
+                    </View>
+                </View>
+                <View transparent style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+                    <Button
+                        type="action"
+                        onPress={() => handleViewDetails(job)}
+                        style={{ flex: 1, minWidth: 100, padding: 10, marginRight: 4, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}
+                    >
+                        <Icons.EyeOnIcon size={14} color={Colors.text.white} />
+                        <Text theme="h2" color={Colors.text.white} style={{ marginLeft: 6 }}>
+                            Details
+                        </Text>
+                    </Button>
+                    {canEdit && onEditJob && (
+                        <Button
+                            type="success"
+                            onPress={() => onEditJob(job)}
+                            style={{ flex: 1, minWidth: 100, padding: 10, marginHorizontal: 4, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}
+                        >
+                            <Icons.EditIcon size={14} color={Colors.text.white} />
+                            <Text theme="h2" color={Colors.text.white} style={{ marginLeft: 6 }}>
+                                Edit
+                            </Text>
+                        </Button>
+                    )}
+                    {canRetry && (
+                        <Button
+                            type="warning"
+                            onPress={() => handleRetry(job)}
+                            style={{ flex: 1, minWidth: 100, padding: 10, marginHorizontal: 4, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}
+                        >
+                            <Icons.RefreshIcon size={14} color={Colors.text.white} />
+                            <Text theme="h2" color={Colors.text.white} style={{ marginLeft: 6 }}>
+                                Retry
+                            </Text>
+                        </Button>
+                    )}
+                    {canCancel && (
+                        <Button
+                            type="error"
+                            onPress={() => handleCancel(job)}
+                            style={{ flex: 1, minWidth: 100, padding: 10, marginLeft: 4, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}
+                        >
+                            <Icons.CloseIcon size={14} color={Colors.text.white} />
+                            <Text theme="h2" color={Colors.text.white} style={{ marginLeft: 6 }}>
+                                Cancel
+                            </Text>
+                        </Button>
+                    )}
+                </View>
+            </View>
+        );
+    };
+
+    const renderEmpty = () => (
+        <View style={{ padding: 40, alignItems: 'center' }}>
+            <Text theme="description">
+                {searchQuery
+                    ? 'No jobs match your search query.'
+                    : statusFilter === 'all'
+                        ? 'No jobs found. Schedule your first notification!'
+                        : `No ${STATUS_FILTERS.find((f) => f.value === statusFilter)?.label.toLowerCase()} found.`}
+            </Text>
+        </View>
+    );
+
+    const renderLoading = () => (
+        <View style={{ padding: 40, justifyContent: 'center', alignItems: 'center' }}>
+            <ActivityIndicator size="large" color={Colors.text.action} />
+        </View>
+    );
+
+    const renderPagination = () => (
+        <View transparent style={{ padding: 15, paddingBottom: 20 }}>
+            <Pagination
+                offset={currentPage}
+                pages={hasMore ? currentPage + 2 : currentPage + 1}
+                onPrevious={handlePreviousPage}
+                onNext={handleNextPage}
+                onSelectPage={handleSelectPage}
+            />
+        </View>
+    );
+
+    // Main render item function with switch statement
+    const renderItem = ({ item }: { item: ListItemType }) => {
+        switch (item.type) {
+            case 'header':
+                return renderHeader();
+            case 'search':
+                return renderSearch();
+            case 'filter':
+                return renderFilter();
+            case 'results-count':
+                return renderResultsCount();
+            case 'job':
+                return renderJobCard(item.data);
+            case 'empty':
+                return renderEmpty();
+            case 'loading':
+                return renderLoading();
+            case 'pagination':
+                return renderPagination();
+            default:
+                return null;
+        }
+    };
+
+    const getItemKey = (item: ListItemType, index: number) => {
+        if (item.type === 'job') {
+            return item.data.notification_job_id;
+        }
+        return `${item.type}-${index}`;
+    };
+
+    return (
+        <View style={{ flex: 1 }}>
+            {/* Single FlatList for entire component */}
+            <FlatList
+                data={listData}
+                keyExtractor={getItemKey}
+                renderItem={renderItem}
+                showsVerticalScrollIndicator={true}
+            />
+
+            {/* Details Modal */}
+            {showDetailsModal && selectedJob && (
+                <View type='blur' style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, padding: 20 }}>
+                    <View float style={{ maxWidth: 600, alignSelf: 'center', width: '100%', maxHeight: '80%' }}>
+                        <View type='header' style={{ flexDirection: 'row', alignItems: 'center', padding: 10, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
+                            <View transparent style={{ flex: 1 }}>
+                                <Text theme='h1'>Job Details</Text>
+                                <Text theme='description' style={{ marginTop: 3 }}>
+                                    Full notification information
+                                </Text>
+                            </View>
+                            <StatusBadge status={selectedJob.status} />
+                        </View>
+                        <View style={{ flex: 1, padding: 15 }}>
+                            <View transparent style={{ marginBottom: 15 }}>
+                                <Text theme="h2" style={{ marginBottom: 4 }}>Group</Text>
+                                <Text theme="description">{getGroupName(selectedJob.notification_group_id)}</Text>
+                            </View>
+                            <View transparent style={{ marginBottom: 15 }}>
+                                <Text theme="h2" style={{ marginBottom: 4 }}>Title</Text>
+                                <Text theme="h1">{selectedJob.notification.title || 'No Title'}</Text>
+                            </View>
+                            <View transparent style={{ marginBottom: 15 }}>
+                                <Text theme="h2" style={{ marginBottom: 4 }}>Message</Text>
+                                <Text theme="description">{selectedJob.notification.body || 'No message'}</Text>
+                            </View>
+                            <View transparent style={{ marginBottom: 15 }}>
+                                <Text theme="h2" style={{ marginBottom: 4 }}>Notification Type</Text>
+                                <Text theme="description">{selectedJob.notification.type}</Text>
+                            </View>
+                            {selectedJob.notification.options?.data?.path_name && (
+                                <View transparent style={{ marginBottom: 15 }}>
+                                    <Text theme="h2" style={{ marginBottom: 4 }}>Deep Link</Text>
+                                    <Text theme="description">{selectedJob.notification.options.data.path_name}</Text>
+                                </View>
+                            )}
+                            <View transparent style={{ marginBottom: 15 }}>
+                                <Text theme="h2" style={{ marginBottom: 4 }}>Scheduled Time</Text>
+                                <Text theme="description">{formatDateTime(selectedJob.scheduled_time)}</Text>
+                            </View>
+                            {selectedJob.sent_datetime && (
+                                <View transparent style={{ marginBottom: 15 }}>
+                                    <Text theme="h2" style={{ marginBottom: 4 }}>Sent Time</Text>
+                                    <Text theme="description" color={Colors.text.success}>
+                                        {formatDateTime(selectedJob.sent_datetime)}
+                                    </Text>
+                                </View>
+                            )}
+                            {selectedJob.error_message && (
+                                <View transparent style={{ marginBottom: 15 }}>
+                                    <Text theme="h2" style={{ marginBottom: 4, color: Colors.text.error }}>Error Message</Text>
+                                    <Text theme="description" color={Colors.text.error}>
+                                        {selectedJob.error_message}
+                                    </Text>
+                                </View>
+                            )}
+                            <View transparent style={{ marginBottom: 15 }}>
+                                <Text theme="h2" style={{ marginBottom: 4 }}>Created</Text>
+                                <Text theme="description">{formatDateTime(selectedJob.create_datetime)}</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={() => setShowDetailsModal(false)}
+                            />
+                        </View>
+                    </View>
+                </View>
+            )}
+        </View>
+    );
+};
+
+export default JobManagement;