be-components 7.4.7 → 7.5.1

package/src/BetRouter/components/admin/JobManager.tsx

@@ -0,0 +1,758 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, Button } from "../../../Components/Themed";
+import { ActivityIndicator, TouchableOpacity, ScrollView, TextInput, Modal } from 'react-native';
+import { useColors } from '../../../constants/useColors';
+import { BetRouterApi } from '../../api';
+import { Icons } from '../../../Components';
+import type { RouterJobProps, RouterJobStatusProps } from '../../types';
+
+const JobManager = () => {
+    const Colors = useColors();
+
+    // State
+    const [loading, setLoading] = useState(true);
+    const [jobs, setJobs] = useState<RouterJobProps[]>([]);
+    const [statusJobs, setStatusJobs] = useState<RouterJobProps[]>([]); // Jobs related to statuses
+    const [recentStatuses, setRecentStatuses] = useState<RouterJobStatusProps[]>([]);
+    const [statusesLoading, setStatusesLoading] = useState(false);
+    const [statusesPage, setStatusesPage] = useState(0);
+    const [hasMoreStatuses, setHasMoreStatuses] = useState(false);
+    const [totalStatusCount, setTotalStatusCount] = useState(0);
+
+    // Modal states
+    const [showCreateModal, setShowCreateModal] = useState(false);
+    const [showEditModal, setShowEditModal] = useState(false);
+    const [showChildStatusModal, setShowChildStatusModal] = useState(false);
+    const [selectedJob, setSelectedJob] = useState<RouterJobProps | null>(null);
+    const [selectedParentStatus, setSelectedParentStatus] = useState<RouterJobStatusProps | null>(null);
+    const [childStatuses, setChildStatuses] = useState<RouterJobStatusProps[]>([]);
+
+    // Form states
+    const [formData, setFormData] = useState({
+        job_key: '',
+        name: '',
+        description: '',
+        frequency: '',
+        frequency_type: 'minutes' as 'minutes' | 'hours' | 'days' | 'seconds'
+    });
+
+    const STATUSES_PER_PAGE = 50;
+
+    useEffect(() => {
+        loadJobs();
+        loadRecentStatuses(0);
+    }, []);
+
+    const loadJobs = async () => {
+        setLoading(true);
+        try {
+            const result = await BetRouterApi.BetRouter.JobApi.getJobs();
+            if (result.jobs) {
+                setJobs(result.jobs);
+            }
+        } catch (error) {
+            console.error('Failed to load jobs:', error);
+            alert('Error loading jobs: ' + (error as any).message);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const loadRecentStatuses = async (offset: number) => {
+        setStatusesLoading(true);
+        try {
+            const result = await BetRouterApi.BetRouter.JobApi.getRecentStatuses(STATUSES_PER_PAGE, offset);
+            if (result.statuses) {
+                setRecentStatuses(result.statuses);
+                setStatusJobs(result.jobs || []); // Store the jobs related to these statuses
+                setTotalStatusCount(result.count || 0);
+                setHasMoreStatuses(false);
+            }
+        } catch (error) {
+            console.error('Failed to load job statuses:', error);
+        } finally {
+            setStatusesLoading(false);
+        }
+    };
+
+    const handlePageChange = (newPage: number) => {
+        setStatusesPage(newPage);
+        loadRecentStatuses(newPage * STATUSES_PER_PAGE);
+    };
+
+    const handleCreateJob = async () => {
+        try {
+            if (!formData.job_key || !formData.name || !formData.frequency) {
+                alert('Please fill in all required fields');
+                return;
+            }
+
+            const frequency = parseInt(formData.frequency);
+            if (isNaN(frequency) || frequency <= 0) {
+                alert('Frequency must be a positive number');
+                return;
+            }
+
+            await BetRouterApi.BetRouter.JobApi.createJob(
+                formData.job_key,
+                formData.name,
+                formData.description,
+                frequency,
+                formData.frequency_type as any
+            );
+
+            alert(`Job "${formData.name}" created successfully!`);
+            setShowCreateModal(false);
+            resetForm();
+            loadJobs();
+        } catch (error) {
+            console.error('Failed to create job:', error);
+            alert('Error creating job: ' + (error as any).message);
+        }
+    };
+
+    const handleUpdateJob = async () => {
+        if (!selectedJob) return;
+
+        try {
+            const frequency = parseInt(formData.frequency);
+            if (isNaN(frequency) || frequency <= 0) {
+                alert('Frequency must be a positive number');
+                return;
+            }
+
+            await BetRouterApi.BetRouter.JobApi.updateJob(
+                selectedJob.router_job_id,
+                {
+                    name: formData.name,
+                    description: formData.description,
+                    frequency: frequency,
+                    frequency_type: formData.frequency_type as any
+                }
+            );
+
+            alert(`Job "${formData.name}" updated successfully!`);
+            setShowEditModal(false);
+            resetForm();
+            loadJobs();
+        } catch (error) {
+            console.error('Failed to update job:', error);
+            alert('Error updating job: ' + (error as any).message);
+        }
+    };
+
+    const handleDeleteJob = async (job: RouterJobProps) => {
+        if (!confirm(`Are you sure you want to delete job "${job.name}"?`)) {
+            return;
+        }
+
+        try {
+            await BetRouterApi.BetRouter.JobApi.deleteJob(job.router_job_id);
+            alert(`Job "${job.name}" deleted successfully!`);
+            loadJobs();
+        } catch (error) {
+            console.error('Failed to delete job:', error);
+            alert('Error deleting job: ' + (error as any).message);
+        }
+    };
+
+    const handleRunJob = async (job: RouterJobProps) => {
+        try {
+            setLoading(true);
+            await BetRouterApi.BetRouter.JobApi.queueJob(job.job_key);
+            alert(`Job "${job.name}" queued successfully! Created status record(s).`);
+            loadRecentStatuses(statusesPage * STATUSES_PER_PAGE);
+            loadJobs(); // Refresh to update last_success_datetime
+        } catch (error) {
+            console.error('Failed to queue job:', error);
+            alert('Error running job: ' + (error as any).message);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleViewChildStatuses = async (parentStatus: RouterJobStatusProps) => {
+        try {
+            setSelectedParentStatus(parentStatus);
+            // Child statuses reference their parent via parent_job_id
+            // Filter recentStatuses to find children of this parent
+            const children = recentStatuses.filter(s => s.parent_job_id === parentStatus.job_status_id);
+            setChildStatuses(children);
+            setShowChildStatusModal(true);
+        } catch (error) {
+            console.error('Failed to load child statuses:', error);
+            alert('Error loading child job statuses: ' + (error as any).message);
+        }
+    };
+
+    const openEditModal = (job: RouterJobProps) => {
+        setSelectedJob(job);
+        setFormData({
+            job_key: job.job_key,
+            name: job.name,
+            description: job.description,
+            frequency: job.frequency.toString(),
+            frequency_type: job.frequency_type
+        });
+        setShowEditModal(true);
+    };
+
+    const resetForm = () => {
+        setFormData({
+            job_key: '',
+            name: '',
+            description: '',
+            frequency: '',
+            frequency_type: 'minutes'
+        });
+        setSelectedJob(null);
+    };
+
+    // Helper to look up job details for a status
+    const getJobForStatus = (status: RouterJobStatusProps): RouterJobProps | undefined => {
+        return statusJobs.find(job => job.router_job_id === status.router_job_id);
+    };
+
+    const getStatusIcon = (status: string) => {
+        switch (status) {
+            case 'success':
+                return '✅';
+            case 'failed':
+                return '❌';
+            case 'in_progress':
+                return '⏳';
+            case 'scheduled':
+                return '📅';
+            default:
+                return '⚪';
+        }
+    };
+
+    const getStatusColor = (status: string) => {
+        switch (status) {
+            case 'success':
+                return Colors.text.success;
+            case 'failed':
+                return Colors.text.error;
+            case 'in_progress':
+                return Colors.text.warning;
+            default:
+                return Colors.text.descriptionLight;
+        }
+    };
+
+    const formatDuration = (start: string, end: string | null) => {
+        if (!end) return 'In progress...';
+        const duration = new Date(end).getTime() - new Date(start).getTime();
+        const seconds = Math.floor(duration / 1000);
+        if (seconds < 60) return `${seconds}s`;
+        const minutes = Math.floor(seconds / 60);
+        return `${minutes}m ${seconds % 60}s`;
+    };
+
+    const formatLastRun = (datetime: string | null) => {
+        if (!datetime) return 'Never';
+        const diff = Date.now() - new Date(datetime).getTime();
+        const minutes = Math.floor(diff / 60000);
+        const hours = Math.floor(minutes / 60);
+        const days = Math.floor(hours / 24);
+
+        if (days > 0) return `${days} day${days > 1 ? 's' : ''} ago`;
+        if (hours > 0) return `${hours} hour${hours > 1 ? 's' : ''} ago`;
+        if (minutes > 0) return `${minutes} minute${minutes > 1 ? 's' : ''} ago`;
+        return 'Just now';
+    };
+
+    const renderFormModal = (isEdit: boolean) => (
+        <Modal
+            visible={isEdit ? showEditModal : showCreateModal}
+            animationType="slide"
+            transparent={true}
+            onRequestClose={() => {
+                isEdit ? setShowEditModal(false) : setShowCreateModal(false);
+                resetForm();
+            }}
+        >
+            <TouchableOpacity
+                activeOpacity={1}
+                onPress={() => {
+                    isEdit ? setShowEditModal(false) : setShowCreateModal(false);
+                    resetForm();
+                }}
+                style={{
+                    flex: 1,
+                    backgroundColor: 'rgba(0,0,0,0.5)',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    padding: 20
+                }}
+            >
+                <TouchableOpacity
+                    activeOpacity={1}
+                    onPress={(e) => e.stopPropagation()}
+                    style={{ width: '100%', maxWidth: 500 }}
+                >
+                    <View type='body' style={{
+                        borderRadius: 8,
+                        borderWidth: 1,
+                        borderColor: Colors.borders.light,
+                        overflow: 'hidden'
+                    }}>
+                        <View type='header' style={{ padding: 16, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                            <Text theme='h1' size={18}>{isEdit ? 'Edit Job' : 'Create New Job'}</Text>
+                            <TouchableOpacity onPress={() => {
+                                isEdit ? setShowEditModal(false) : setShowCreateModal(false);
+                                resetForm();
+                            }}>
+                                <Icons.CloseIcon size={20} color={Colors.text.h1} />
+                            </TouchableOpacity>
+                        </View>
+
+                        <ScrollView style={{ maxHeight: 500 }}>
+                            <View transparent style={{ padding: 16 }}>
+                                <Text theme='h2' size={13} style={{ marginBottom: 6 }}>Job Key *</Text>
+                                <TextInput
+                                    style={{
+                                        backgroundColor: Colors.views.input,
+                                        borderRadius: 6,
+                                        padding: 10,
+                                        color: Colors.text.h1,
+                                        marginBottom: 16,
+                                        borderWidth: 1,
+                                        borderColor: Colors.borders.light,
+                                        fontSize: 13
+                                    }}
+                                    value={formData.job_key}
+                                    onChangeText={(text) => setFormData({ ...formData, job_key: text })}
+                                    placeholder="loadContests"
+                                    placeholderTextColor={Colors.text.descriptionLight}
+                                    editable={!isEdit}
+                                />
+
+                                <Text theme='h2' size={13} style={{ marginBottom: 6 }}>Name *</Text>
+                                <TextInput
+                                    style={{
+                                        backgroundColor: Colors.views.input,
+                                        borderRadius: 6,
+                                        padding: 10,
+                                        color: Colors.text.h1,
+                                        marginBottom: 16,
+                                        borderWidth: 1,
+                                        borderColor: Colors.borders.light,
+                                        fontSize: 13
+                                    }}
+                                    value={formData.name}
+                                    onChangeText={(text) => setFormData({ ...formData, name: text })}
+                                    placeholder="Load Contests"
+                                    placeholderTextColor={Colors.text.descriptionLight}
+                                />
+
+                                <Text theme='h2' size={13} style={{ marginBottom: 6 }}>Description</Text>
+                                <TextInput
+                                    style={{
+                                        backgroundColor: Colors.views.input,
+                                        borderRadius: 6,
+                                        padding: 10,
+                                        color: Colors.text.h1,
+                                        marginBottom: 16,
+                                        borderWidth: 1,
+                                        borderColor: Colors.borders.light,
+                                        minHeight: 70,
+                                        fontSize: 13
+                                    }}
+                                    value={formData.description}
+                                    onChangeText={(text) => setFormData({ ...formData, description: text })}
+                                    placeholder="Loads contests for all active leagues"
+                                    placeholderTextColor={Colors.text.descriptionLight}
+                                    multiline
+                                    textAlignVertical="top"
+                                />
+
+                                <Text theme='h2' size={13} style={{ marginBottom: 6 }}>Frequency *</Text>
+                                <View transparent style={{ flexDirection: 'row', gap: 8, marginBottom: 20 }}>
+                                    <TextInput
+                                        style={{
+                                            flex: 1,
+                                            backgroundColor: Colors.views.input,
+                                            borderRadius: 6,
+                                            padding: 10,
+                                            color: Colors.text.h1,
+                                            borderWidth: 1,
+                                            borderColor: Colors.borders.light,
+                                            fontSize: 13
+                                        }}
+                                        value={formData.frequency}
+                                        onChangeText={(text) => setFormData({ ...formData, frequency: text })}
+                                        placeholder="15"
+                                        placeholderTextColor={Colors.text.descriptionLight}
+                                        keyboardType="number-pad"
+                                    />
+                                    <View transparent style={{ flex: 1, gap: 4 }}>
+                                        {['minutes', 'hours', 'days'].map((type) => (
+                                            <TouchableOpacity
+                                                key={type}
+                                                onPress={() => setFormData({ ...formData, frequency_type: type as any })}
+                                                style={{
+                                                    padding: 8,
+                                                    backgroundColor: formData.frequency_type === type ? Colors.buttons.background.action : Colors.views.header,
+                                                    borderRadius: 4,
+                                                    borderWidth: 1,
+                                                    borderColor: formData.frequency_type === type ? Colors.buttons.background.action : Colors.borders.light
+                                                }}
+                                            >
+                                                <Text
+                                                    theme={formData.frequency_type === type ? 'h2' : 'description'}
+                                                    size={11}
+                                                    style={{
+                                                        textAlign: 'center',
+                                                        color: formData.frequency_type === type ? Colors.text.white : Colors.text.description
+                                                    }}
+                                                >
+                                                    {type}
+                                                </Text>
+                                            </TouchableOpacity>
+                                        ))}
+                                    </View>
+                                </View>
+
+                                <Button
+                                    type='success'
+                                    title={isEdit ? 'Update Job' : 'Create Job'}
+                                    onPress={isEdit ? handleUpdateJob : handleCreateJob}
+                                />
+                            </View>
+                        </ScrollView>
+                    </View>
+                </TouchableOpacity>
+            </TouchableOpacity>
+        </Modal>
+    );
+
+    const renderChildStatusModal = () => (
+        <Modal
+            visible={showChildStatusModal}
+            animationType="slide"
+            transparent={true}
+            onRequestClose={() => {
+                setShowChildStatusModal(false);
+                setSelectedParentStatus(null);
+                setChildStatuses([]);
+            }}
+        >
+            <TouchableOpacity
+                activeOpacity={1}
+                onPress={() => {
+                    setShowChildStatusModal(false);
+                    setSelectedParentStatus(null);
+                    setChildStatuses([]);
+                }}
+                style={{
+                    flex: 1,
+                    backgroundColor: 'rgba(0,0,0,0.5)',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    padding: 20
+                }}
+            >
+                <TouchableOpacity
+                    activeOpacity={1}
+                    onPress={(e) => e.stopPropagation()}
+                    style={{ width: '100%', maxWidth: 600 }}
+                >
+                    <View type='body' style={{
+                        borderRadius: 8,
+                        borderWidth: 1,
+                        borderColor: Colors.borders.light,
+                        overflow: 'hidden'
+                    }}>
+                        <View type='header' style={{ padding: 16 }}>
+                            <View transparent style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                                <View transparent>
+                                    <Text theme='h1' size={18}>Child Jobs</Text>
+                                    {selectedParentStatus && (
+                                        <Text theme='description' size={11} style={{ marginTop: 4 }}>
+                                            {getJobForStatus(selectedParentStatus)?.name || selectedParentStatus.router_job_id} - {new Date(selectedParentStatus.start_datetime).toLocaleString()}
+                                        </Text>
+                                    )}
+                                </View>
+                                <TouchableOpacity onPress={() => {
+                                    setShowChildStatusModal(false);
+                                    setSelectedParentStatus(null);
+                                    setChildStatuses([]);
+                                }}>
+                                    <Icons.CloseIcon size={20} color={Colors.text.h1} />
+                                </TouchableOpacity>
+                            </View>
+                        </View>
+
+                        <ScrollView style={{ maxHeight: 500 }}>
+                            <View transparent style={{ padding: 16 }}>
+                                {childStatuses.length === 0 ? (
+                                    <View transparent style={{ padding: 40, alignItems: 'center' }}>
+                                        <Text theme='description'>No child jobs found</Text>
+                                    </View>
+                                ) : (
+                                    childStatuses.map((status, index) => {
+                                        const job = getJobForStatus(status);
+                                        return (
+                                            <View
+                                                key={status.job_status_id}
+                                                transparent
+                                                style={{
+                                                    padding: 12,
+                                                    backgroundColor: Colors.views.header,
+                                                    borderRadius: 6,
+                                                    marginBottom: 8,
+                                                    borderLeftWidth: 3,
+                                                    borderLeftColor: getStatusColor(status.status)
+                                                }}
+                                            >
+                                                <View transparent style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 6 }}>
+                                                    <Text theme='h2' size={14}>
+                                                        {index + 1}. {job?.name || status.router_job_id}
+                                                    </Text>
+                                                    <Text size={16}>{getStatusIcon(status.status)}</Text>
+                                                </View>
+                                                <Text theme='description' size={11} style={{ marginBottom: 3 }}>
+                                                    Job Key: {job?.job_key || 'Unknown'}
+                                                </Text>
+                                                <Text theme='description' size={11} style={{ marginBottom: 3 }}>
+                                                    Started: {new Date(status.start_datetime).toLocaleTimeString()}
+                                                </Text>
+                                                <Text theme='description' size={11}>
+                                                    Duration: {formatDuration(status.start_datetime, status.end_datetime)}
+                                                </Text>
+                                            </View>
+                                        );
+                                    })
+                                )}
+                            </View>
+                        </ScrollView>
+                    </View>
+                </TouchableOpacity>
+            </TouchableOpacity>
+        </Modal>
+    );
+
+    if (loading) {
+        return (
+            <View transparent style={{ padding: 40, alignItems: 'center' }}>
+                <ActivityIndicator size="large" color={Colors.text.h1} />
+            </View>
+        );
+    }
+
+    const totalPages = Math.ceil(totalStatusCount / STATUSES_PER_PAGE);
+
+    return (
+        <View transparent>
+            {/* Header */}
+            <View transparent style={{ marginBottom: 24 }}>
+                <View transparent style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                    <View transparent>
+                        <Text theme='h1' size={24}>Job Manager</Text>
+                        <Text theme='description' size={14} style={{ marginTop: 8 }}>
+                            Manage automated background jobs
+                        </Text>
+                    </View>
+                    <Button
+                        type='success'
+                        title='+ New Job'
+                        onPress={() => setShowCreateModal(true)}
+                    />
+                </View>
+            </View>
+
+            {/* Jobs List */}
+            <View type='body' style={{ borderRadius: 8, borderWidth: 1, borderColor: Colors.borders.light, overflow: 'hidden', marginBottom: 24 }}>
+                <View type='header' style={{ padding: 16 }}>
+                    <Text theme='h2' size={16}>Configured Jobs</Text>
+                    <Text theme='description' size={12} style={{ marginTop: 4 }}>
+                        {jobs.length} job{jobs.length !== 1 ? 's' : ''} configured
+                    </Text>
+                </View>
+
+                <View transparent style={{ padding: 16 }}>
+                    {jobs.length === 0 ? (
+                        <View transparent style={{ padding: 40, alignItems: 'center' }}>
+                            <Text theme='description'>No jobs configured yet</Text>
+                        </View>
+                    ) : (
+                        jobs.map((job) => (
+                            <View
+                                key={job.router_job_id}
+                                transparent
+                                style={{
+                                    padding: 12,
+                                    backgroundColor: Colors.views.header,
+                                    borderRadius: 6,
+                                    marginBottom: 8
+                                }}
+                            >
+                                <View transparent style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                                    <View transparent style={{ flex: 1, marginRight: 12 }}>
+                                        <Text theme='h2' size={14}>{job.name}</Text>
+                                        <Text theme='description' size={11} style={{ marginTop: 4 }}>
+                                            {job.description}
+                                        </Text>
+                                        <Text theme='description' size={11} style={{ marginTop: 6 }}>
+                                            Runs every {job.frequency} {job.frequency_type}
+                                        </Text>
+                                        <Text theme='description' size={11} style={{ marginTop: 2 }}>
+                                            Last success: {formatLastRun(job.last_success_datetime)}
+                                        </Text>
+                                    </View>
+                                    <View transparent style={{ gap: 6, minWidth: 100 }}>
+                                        <Button
+                                            type='success'
+                                            title='Run Now'
+                                            onPress={() => handleRunJob(job)}
+                                            style={{ paddingVertical: 6, paddingHorizontal: 12 }}
+                                        />
+                                        <Button
+                                            type='action'
+                                            title='Edit'
+                                            onPress={() => openEditModal(job)}
+                                            style={{ paddingVertical: 6, paddingHorizontal: 12 }}
+                                        />
+                                        <Button
+                                            type='error'
+                                            title='Delete'
+                                            onPress={() => handleDeleteJob(job)}
+                                            style={{ paddingVertical: 6, paddingHorizontal: 12 }}
+                                        />
+                                    </View>
+                                </View>
+                            </View>
+                        ))
+                    )}
+                </View>
+            </View>
+
+            {/* Job Execution History */}
+            <View type='body' style={{ borderRadius: 8, borderWidth: 1, borderColor: Colors.borders.light, overflow: 'hidden' }}>
+                <View type='header' style={{ padding: 16, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                    <View transparent>
+                        <Text theme='h2' size={16}>Job Execution History</Text>
+                        <Text theme='description' size={12} style={{ marginTop: 4 }}>
+                            Recent job runs and their status
+                        </Text>
+                    </View>
+                    <Button
+                        type='action'
+                        title='Refresh'
+                        onPress={() => loadRecentStatuses(statusesPage * STATUSES_PER_PAGE)}
+                        style={{ paddingVertical: 6, paddingHorizontal: 12 }}
+                    />
+                </View>
+
+                <View transparent style={{ padding: 16 }}>
+                    {statusesLoading ? (
+                        <View transparent style={{ padding: 40, alignItems: 'center' }}>
+                            <ActivityIndicator size="large" color={Colors.text.h1} />
+                        </View>
+                    ) : recentStatuses.length === 0 ? (
+                        <View transparent style={{ padding: 40, alignItems: 'center' }}>
+                            <Text theme='description'>No job executions yet</Text>
+                        </View>
+                    ) : (
+                        <>
+                            <Text theme='description' size={11} style={{ marginBottom: 12 }}>
+                                Showing {statusesPage * STATUSES_PER_PAGE + 1}-{Math.min((statusesPage + 1) * STATUSES_PER_PAGE, totalStatusCount)} of {totalStatusCount} executions
+                            </Text>
+
+                            {recentStatuses.map((status) => {
+                                const job = getJobForStatus(status);
+                                const isParent = !!status.parent_job_id === false; // If it has no parent, it could be a parent
+                                const childCount = recentStatuses.filter(s => s.parent_job_id === status.job_status_id).length;
+
+                                return (
+                                    <View
+                                        key={status.job_status_id}
+                                        transparent
+                                        style={{
+                                            padding: 12,
+                                            backgroundColor: Colors.views.header,
+                                            borderRadius: 6,
+                                            marginBottom: 8,
+                                            borderLeftWidth: 3,
+                                            borderLeftColor: getStatusColor(status.status)
+                                        }}
+                                    >
+                                        <View transparent style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                                            <View transparent style={{ flex: 1, marginRight: 12 }}>
+                                                <View transparent style={{ flexDirection: 'row', alignItems: 'center', gap: 8, marginBottom: 4 }}>
+                                                    <Text size={16}>{getStatusIcon(status.status)}</Text>
+                                                    <Text theme='h2' size={14}>{job?.name || status.router_job_id}</Text>
+                                                    {isParent && childCount > 0 && (
+                                                        <View transparent style={{
+                                                            backgroundColor: Colors.buttons.background.action,
+                                                            paddingHorizontal: 6,
+                                                            paddingVertical: 2,
+                                                            borderRadius: 3
+                                                        }}>
+                                                            <Text size={9} style={{ color: Colors.text.white }}>PARENT</Text>
+                                                        </View>
+                                                    )}
+                                                </View>
+                                                <Text theme='description' size={11} style={{ marginTop: 2 }}>
+                                                    Started: {new Date(status.start_datetime).toLocaleString()}
+                                                </Text>
+                                                <Text theme='description' size={11} style={{ marginTop: 2 }}>
+                                                    Duration: {formatDuration(status.start_datetime, status.end_datetime)}
+                                                </Text>
+                                                {isParent && childCount > 0 && (
+                                                    <Text theme='description' size={11} style={{ marginTop: 2 }}>
+                                                        {childCount} child job{childCount > 1 ? 's' : ''} executed
+                                                    </Text>
+                                                )}
+                                            </View>
+                                            {isParent && childCount > 0 && (
+                                                <Button
+                                                    type='action'
+                                                    title='View Children'
+                                                    onPress={() => handleViewChildStatuses(status)}
+                                                    style={{ paddingVertical: 6, paddingHorizontal: 10 }}
+                                                />
+                                            )}
+                                        </View>
+                                    </View>
+                                );
+                            })}
+
+                            {/* Pagination */}
+                            {totalPages > 1 && (
+                                <View transparent style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', gap: 12, marginTop: 16 }}>
+                                    <Button
+                                        type='action'
+                                        title='Previous'
+                                        onPress={() => handlePageChange(statusesPage - 1)}
+                                        disabled={statusesPage === 0}
+                                        style={{ paddingVertical: 6, paddingHorizontal: 12 }}
+                                    />
+                                    <Text theme='description' size={12}>
+                                        Page {statusesPage + 1} of {totalPages}
+                                    </Text>
+                                    <Button
+                                        type='action'
+                                        title='Next'
+                                        onPress={() => handlePageChange(statusesPage + 1)}
+                                        disabled={!hasMoreStatuses}
+                                        style={{ paddingVertical: 6, paddingHorizontal: 12 }}
+                                    />
+                                </View>
+                            )}
+                        </>
+                    )}
+                </View>
+            </View>
+
+            {/* Modals */}
+            {renderFormModal(false)}
+            {renderFormModal(true)}
+            {renderChildStatusModal()}
+        </View>
+    );
+};
+
+export default JobManager;