be-components 7.4.8 → 7.5.2

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

@@ -0,0 +1,596 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, Button } from "../../../Components/Themed";
+import { ActivityIndicator, TouchableOpacity, TextInput, Modal, ScrollView } from 'react-native';
+import { useColors } from '../../../constants/useColors';
+import { BetRouterApi } from '../../api';
+import { Icons, SearchBox } from '../../../Components';
+import moment from 'moment-mini';
+import type { ConfigProps } from '../../types';
+
+type ConfigData = {
+    configs: ConfigProps[];
+    loading: boolean;
+    searchValue: string;
+    showCreateModal: boolean;
+    showEditModal: boolean;
+    showDeleteModal: boolean;
+    selectedConfig: ConfigProps | null;
+    // Form state
+    formConfig: string;
+    formValue: string;
+    formFormat: 'string' | 'number' | 'boolean' | 'json';
+};
+
+const ConfigManager = () => {
+    const Colors = useColors();
+
+    const [data, setData] = useState<ConfigData>({
+        configs: [],
+        loading: true,
+        searchValue: '',
+        showCreateModal: false,
+        showEditModal: false,
+        showDeleteModal: false,
+        selectedConfig: null,
+        formConfig: '',
+        formValue: '',
+        formFormat: 'string'
+    });
+
+    useEffect(() => {
+        loadConfigs();
+    }, []);
+
+    const loadConfigs = async () => {
+        setData(prev => ({ ...prev, loading: true }));
+        try {
+            const result = await BetRouterApi.BetRouter.ConfigApi.getConfigs();
+            setData(prev => ({
+                ...prev,
+                configs: result.configs || [],
+                loading: false
+            }));
+        } catch (error) {
+            console.error('Failed to load configs:', error);
+            alert('Error loading configs: ' + (error as any).message);
+            setData(prev => ({ ...prev, loading: false }));
+        }
+    };
+
+    const openCreateModal = () => {
+        setData(prev => ({
+            ...prev,
+            showCreateModal: true,
+            formConfig: '',
+            formValue: '',
+            formFormat: 'string'
+        }));
+    };
+
+    const openEditModal = (config: ConfigProps) => {
+        setData(prev => ({
+            ...prev,
+            showEditModal: true,
+            selectedConfig: config,
+            formConfig: config.config,
+            formValue: config.value,
+            formFormat: config.config_format
+        }));
+    };
+
+    const openDeleteModal = (config: ConfigProps) => {
+        setData(prev => ({
+            ...prev,
+            showDeleteModal: true,
+            selectedConfig: config
+        }));
+    };
+
+    const closeModals = () => {
+        setData(prev => ({
+            ...prev,
+            showCreateModal: false,
+            showEditModal: false,
+            showDeleteModal: false,
+            selectedConfig: null,
+            formConfig: '',
+            formValue: '',
+            formFormat: 'string'
+        }));
+    };
+
+    const handleCreate = async () => {
+        if (!data.formConfig || !data.formValue) {
+            alert('Please fill in all fields');
+            return;
+        }
+
+        try {
+            setData(prev => ({ ...prev, loading: true }));
+
+            // Parse value based on format
+            let parsedValue: string | number | boolean | any = data.formValue;
+            if (data.formFormat === 'number') {
+                parsedValue = parseFloat(data.formValue);
+                if (isNaN(parsedValue as any)) {
+                    alert('Invalid number format');
+                    setData(prev => ({ ...prev, loading: false }));
+                    return;
+                }
+            } else if (data.formFormat === 'boolean') {
+                parsedValue = data.formValue.toLowerCase() === 'true' ? true : false;
+            } else if (data.formFormat === 'json') {
+                try {
+                    parsedValue = JSON.parse(data.formValue);
+                } catch (e) {
+                    alert('Invalid JSON format');
+                    setData(prev => ({ ...prev, loading: false }));
+                    return;
+                }
+            }
+
+            await BetRouterApi.BetRouter.ConfigApi.createConfig(
+                data.formConfig,
+                parsedValue,
+                data.formFormat
+            );
+
+            closeModals();
+            await loadConfigs();
+        } catch (error) {
+            console.error('Error creating config:', error);
+            alert('Error creating config: ' + (error as any).message);
+            setData(prev => ({ ...prev, loading: false }));
+        }
+    };
+
+    const handleUpdate = async () => {
+        if (!data.selectedConfig || !data.formValue) {
+            alert('Please fill in all fields');
+            return;
+        }
+
+        try {
+            setData(prev => ({ ...prev, loading: true }));
+
+            // Parse value based on format
+            let parsedValue: string | number | boolean | any = data.formValue;
+            if (data.formFormat === 'number') {
+                parsedValue = parseFloat(data.formValue);
+                if (isNaN(parsedValue as any)) {
+                    alert('Invalid number format');
+                    setData(prev => ({ ...prev, loading: false }));
+                    return;
+                }
+            } else if (data.formFormat === 'boolean') {
+                parsedValue = data.formValue.toLowerCase() === 'true' ? true : false;
+            } else if (data.formFormat === 'json') {
+                try {
+                    parsedValue = JSON.parse(data.formValue);
+                } catch (e) {
+                    alert('Invalid JSON format');
+                    setData(prev => ({ ...prev, loading: false }));
+                    return;
+                }
+            }
+
+            await BetRouterApi.BetRouter.ConfigApi.updateConfig(
+                data.selectedConfig.config,
+                parsedValue,
+                data.formFormat
+            );
+
+            closeModals();
+            await loadConfigs();
+        } catch (error) {
+            console.error('Error updating config:', error);
+            alert('Error updating config: ' + (error as any).message);
+            setData(prev => ({ ...prev, loading: false }));
+        }
+    };
+
+    const handleDelete = async () => {
+        if (!data.selectedConfig) return;
+
+        try {
+            setData(prev => ({ ...prev, loading: true }));
+            await BetRouterApi.BetRouter.ConfigApi.deleteConfig(data.selectedConfig.config);
+            closeModals();
+            await loadConfigs();
+        } catch (error) {
+            console.error('Error deleting config:', error);
+            alert('Error deleting config: ' + (error as any).message);
+            setData(prev => ({ ...prev, loading: false }));
+        }
+    };
+
+    const getFormattedValue = (config: ConfigProps) => {
+        if (config.config_format === 'json') {
+            try {
+                return JSON.stringify(JSON.parse(config.value), null, 2);
+            } catch (e) {
+                return config.value;
+            }
+        }
+        return config.value;
+    };
+
+    const filteredConfigs = data.configs.filter(config =>
+        data.searchValue === '' ||
+        config.config.toLowerCase().includes(data.searchValue.toLowerCase()) ||
+        config.value.toLowerCase().includes(data.searchValue.toLowerCase())
+    );
+
+    if (data.loading && data.configs.length === 0) {
+        return (
+            <View transparent style={{ padding: 40, alignItems: 'center' }}>
+                <ActivityIndicator size="large" color={Colors.text.h1} />
+            </View>
+        );
+    }
+
+    return (
+        <View transparent style={{ flex: 1 }}>
+            {/* Header */}
+            <View transparent style={{ marginBottom: 24 }}>
+                <View transparent style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                    <View transparent>
+                        <Text theme='h1' size={24}>Configuration Manager</Text>
+                        <Text theme='description' size={14} style={{ marginTop: 8 }}>
+                            Manage global system configuration settings
+                        </Text>
+                    </View>
+                    <View transparent style={{ flexDirection: 'row', gap: 12 }}>
+                        <Button
+                            type='action'
+                            title='Refresh'
+                            onPress={loadConfigs}
+                        />
+                        <Button
+                            type='success'
+                            title='+ New Config'
+                            onPress={openCreateModal}
+                        />
+                    </View>
+                </View>
+            </View>
+
+            {/* Stats Card */}
+            <View type='body' style={{ padding: 16, marginBottom: 24, borderRadius: 8, borderWidth: 1, borderColor: Colors.borders.light }}>
+                <Text theme='description' size={12}>TOTAL CONFIGURATIONS</Text>
+                <Text theme='h1' size={32} style={{ marginTop: 8 }}>{data.configs.length}</Text>
+                <Text theme='description' size={11} style={{ marginTop: 4 }}>
+                    Active system configurations
+                </Text>
+            </View>
+
+            {/* Search Box */}
+            <View transparent style={{ marginBottom: 16 }}>
+                <SearchBox
+                    placeholder="Search configs..."
+                    onChange={(text) => setData(prev => ({ ...prev, searchValue: text }))}
+                    hide_search_button
+                />
+            </View>
+
+            {/* Config List */}
+            <View type='body' style={{ borderRadius: 8, borderWidth: 1, borderColor: Colors.borders.light, overflow: 'hidden' }}>
+                <View type='header' style={{ padding: 16 }}>
+                    <Text theme='h2' size={16}>Configurations</Text>
+                    <Text theme='description' size={12} style={{ marginTop: 4 }}>
+                        {filteredConfigs.length} configuration{filteredConfigs.length !== 1 ? 's' : ''}
+                    </Text>
+                </View>
+
+                <ScrollView style={{ maxHeight: 600 }}>
+                    <View transparent style={{ padding: 16 }}>
+                        {filteredConfigs.length === 0 ? (
+                            <View transparent style={{ padding: 40, alignItems: 'center' }}>
+                                <Icons.AlertIcon size={48} color={Colors.text.descriptionLight} />
+                                <Text theme='description' size={14} style={{ marginTop: 16, textAlign: 'center' }}>
+                                    {data.searchValue
+                                        ? 'No configs match your search'
+                                        : 'No configurations found'}
+                                </Text>
+                            </View>
+                        ) : (
+                            filteredConfigs.map((config) => (
+                                <View
+                                    key={config.config_id}
+                                    transparent
+                                    style={{
+                                        marginBottom: 12,
+                                        padding: 16,
+                                        backgroundColor: Colors.views.header,
+                                        borderRadius: 8,
+                                        borderWidth: 1,
+                                        borderColor: Colors.borders.light
+                                    }}
+                                >
+                                    <View transparent style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+                                        <View transparent style={{ flex: 1 }}>
+                                            <Text theme='h2' size={16}>{config.config}</Text>
+                                            <View transparent style={{ flexDirection: 'row', gap: 8, marginTop: 6 }}>
+                                                <View
+                                                    transparent
+                                                    style={{
+                                                        paddingHorizontal: 8,
+                                                        paddingVertical: 4,
+                                                        borderRadius: 4,
+                                                        backgroundColor: Colors.views.header
+                                                    }}
+                                                >
+                                                    <Text theme='description' size={10} style={{ textTransform: 'uppercase' }}>
+                                                        {config.config_format}
+                                                    </Text>
+                                                </View>
+                                            </View>
+                                            <View transparent style={{ marginTop: 12 }}>
+                                                <Text theme='description' size={11} style={{ marginBottom: 4 }}>Value:</Text>
+                                                <View
+                                                    transparent
+                                                    style={{
+                                                        padding: 12,
+                                                        backgroundColor: Colors.views.header,
+                                                        borderRadius: 6,
+                                                        borderWidth: 1,
+                                                        borderColor: Colors.borders.light
+                                                    }}
+                                                >
+                                                    <Text theme='h2' size={13} style={{ fontFamily: 'monospace' }}>
+                                                        {getFormattedValue(config)}
+                                                    </Text>
+                                                </View>
+                                            </View>
+                                            <Text theme='description' size={10} style={{ marginTop: 8 }}>
+                                                Last updated: {moment(config.last_update_datetime).format('ddd, MMM D, YYYY [at] h:mm A')}
+                                            </Text>
+                                        </View>
+                                        <View transparent style={{ flexDirection: 'row', gap: 8, marginLeft: 16 }}>
+                                            <Button
+                                                type='action'
+                                                title='Edit'
+                                                onPress={() => openEditModal(config)}
+                                                style={{ paddingHorizontal: 12, paddingVertical: 6 }}
+                                            />
+                                            <Button
+                                                type='error'
+                                                title='Delete'
+                                                onPress={() => openDeleteModal(config)}
+                                                style={{ paddingHorizontal: 12, paddingVertical: 6 }}
+                                            />
+                                        </View>
+                                    </View>
+                                </View>
+                            ))
+                        )}
+                    </View>
+                </ScrollView>
+            </View>
+
+            {/* Create Modal */}
+            <Modal
+                visible={data.showCreateModal}
+                transparent
+                animationType="fade"
+                onRequestClose={closeModals}
+            >
+                <View style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'center', alignItems: 'center' }}>
+                    <View type='body' style={{ width: '90%', maxWidth: 500, borderRadius: 12, padding: 24, borderWidth: 1, borderColor: Colors.borders.light }}>
+                        <View transparent style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
+                            <Text theme='h2' size={20}>Create New Config</Text>
+                            <TouchableOpacity onPress={closeModals}>
+                                <Icons.CloseIcon size={24} color={Colors.text.h1} />
+                            </TouchableOpacity>
+                        </View>
+
+                        <View transparent style={{ marginBottom: 16 }}>
+                            <Text theme='description' size={12} style={{ marginBottom: 6 }}>Config Key *</Text>
+                            <TextInput
+                                value={data.formConfig}
+                                onChangeText={(text) => setData(prev => ({ ...prev, formConfig: text }))}
+                                placeholder="e.g., MAX_BET_AMOUNT"
+                                placeholderTextColor={Colors.text.descriptionLight}
+                                style={{
+                                    padding: 12,
+                                    borderRadius: 6,
+                                    borderWidth: 1,
+                                    borderColor: Colors.borders.light,
+                                    backgroundColor: Colors.views.header,
+                                    color: Colors.text.h1,
+                                    fontSize: 14
+                                }}
+                            />
+                        </View>
+
+                        <View transparent style={{ marginBottom: 16 }}>
+                            <Text theme='description' size={12} style={{ marginBottom: 6 }}>Format *</Text>
+                            <View transparent style={{ flexDirection: 'row', gap: 8 }}>
+                                {(['string', 'number', 'boolean', 'json'] as const).map(format => (
+                                    <TouchableOpacity
+                                        key={format}
+                                        onPress={() => setData(prev => ({ ...prev, formFormat: format }))}
+                                        style={{
+                                            paddingHorizontal: 16,
+                                            paddingVertical: 8,
+                                            borderRadius: 6,
+                                            borderWidth: 1,
+                                            borderColor: data.formFormat === format ? Colors.text.success : Colors.borders.light,
+                                            backgroundColor: data.formFormat === format ? Colors.views.header : 'transparent'
+                                        }}
+                                    >
+                                        <Text theme={data.formFormat === format ? 'h2' : 'description'} size={12}>
+                                            {format}
+                                        </Text>
+                                    </TouchableOpacity>
+                                ))}
+                            </View>
+                        </View>
+
+                        <View transparent style={{ marginBottom: 20 }}>
+                            <Text theme='description' size={12} style={{ marginBottom: 6 }}>Value *</Text>
+                            <TextInput
+                                value={data.formValue}
+                                onChangeText={(text) => setData(prev => ({ ...prev, formValue: text }))}
+                                placeholder={data.formFormat === 'json' ? '{"key": "value"}' : 'Enter value...'}
+                                placeholderTextColor={Colors.text.descriptionLight}
+                                multiline={data.formFormat === 'json'}
+                                numberOfLines={data.formFormat === 'json' ? 4 : 1}
+                                style={{
+                                    padding: 12,
+                                    borderRadius: 6,
+                                    borderWidth: 1,
+                                    borderColor: Colors.borders.light,
+                                    backgroundColor: Colors.views.header,
+                                    color: Colors.text.h1,
+                                    fontSize: 14,
+                                    fontFamily: data.formFormat === 'json' ? 'monospace' : undefined
+                                }}
+                            />
+                        </View>
+
+                        <View transparent style={{ flexDirection: 'row', gap: 12 }}>
+                            <Button
+                                type='action'
+                                title='Cancel'
+                                onPress={closeModals}
+                                style={{ flex: 1 }}
+                            />
+                            <Button
+                                type='success'
+                                title='Create'
+                                onPress={handleCreate}
+                                style={{ flex: 1 }}
+                            />
+                        </View>
+                    </View>
+                </View>
+            </Modal>
+
+            {/* Edit Modal */}
+            <Modal
+                visible={data.showEditModal}
+                transparent
+                animationType="fade"
+                onRequestClose={closeModals}
+            >
+                <View style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'center', alignItems: 'center' }}>
+                    <View type='body' style={{ width: '90%', maxWidth: 500, borderRadius: 12, padding: 24, borderWidth: 1, borderColor: Colors.borders.light }}>
+                        <View transparent style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
+                            <Text theme='h2' size={20}>Edit Config</Text>
+                            <TouchableOpacity onPress={closeModals}>
+                                <Icons.CloseIcon size={24} color={Colors.text.h1} />
+                            </TouchableOpacity>
+                        </View>
+
+                        <View transparent style={{ marginBottom: 16 }}>
+                            <Text theme='description' size={12} style={{ marginBottom: 6 }}>Config Key</Text>
+                            <Text theme='h2' size={16}>{data.formConfig}</Text>
+                        </View>
+
+                        <View transparent style={{ marginBottom: 16 }}>
+                            <Text theme='description' size={12} style={{ marginBottom: 6 }}>Format *</Text>
+                            <View transparent style={{ flexDirection: 'row', gap: 8 }}>
+                                {(['string', 'number', 'boolean', 'json'] as const).map(format => (
+                                    <TouchableOpacity
+                                        key={format}
+                                        onPress={() => setData(prev => ({ ...prev, formFormat: format }))}
+                                        style={{
+                                            paddingHorizontal: 16,
+                                            paddingVertical: 8,
+                                            borderRadius: 6,
+                                            borderWidth: 1,
+                                            borderColor: data.formFormat === format ? Colors.text.success : Colors.borders.light,
+                                            backgroundColor: data.formFormat === format ? Colors.views.header : 'transparent'
+                                        }}
+                                    >
+                                        <Text theme={data.formFormat === format ? 'h2' : 'description'} size={12}>
+                                            {format}
+                                        </Text>
+                                    </TouchableOpacity>
+                                ))}
+                            </View>
+                        </View>
+
+                        <View transparent style={{ marginBottom: 20 }}>
+                            <Text theme='description' size={12} style={{ marginBottom: 6 }}>Value *</Text>
+                            <TextInput
+                                value={data.formValue}
+                                onChangeText={(text) => setData(prev => ({ ...prev, formValue: text }))}
+                                placeholder={data.formFormat === 'json' ? '{"key": "value"}' : 'Enter value...'}
+                                placeholderTextColor={Colors.text.descriptionLight}
+                                multiline={data.formFormat === 'json'}
+                                numberOfLines={data.formFormat === 'json' ? 4 : 1}
+                                style={{
+                                    padding: 12,
+                                    borderRadius: 6,
+                                    borderWidth: 1,
+                                    borderColor: Colors.borders.light,
+                                    backgroundColor: Colors.views.header,
+                                    color: Colors.text.h1,
+                                    fontSize: 14,
+                                    fontFamily: data.formFormat === 'json' ? 'monospace' : undefined
+                                }}
+                            />
+                        </View>
+
+                        <View transparent style={{ flexDirection: 'row', gap: 12 }}>
+                            <Button
+                                type='action'
+                                title='Cancel'
+                                onPress={closeModals}
+                                style={{ flex: 1 }}
+                            />
+                            <Button
+                                type='success'
+                                title='Update'
+                                onPress={handleUpdate}
+                                style={{ flex: 1 }}
+                            />
+                        </View>
+                    </View>
+                </View>
+            </Modal>
+
+            {/* Delete Confirmation Modal */}
+            <Modal
+                visible={data.showDeleteModal}
+                transparent
+                animationType="fade"
+                onRequestClose={closeModals}
+            >
+                <View style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'center', alignItems: 'center' }}>
+                    <View type='body' style={{ width: '90%', maxWidth: 400, borderRadius: 12, padding: 24, borderWidth: 1, borderColor: Colors.borders.light }}>
+                        <View transparent style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
+                            <Text theme='h2' size={20}>Delete Config</Text>
+                            <TouchableOpacity onPress={closeModals}>
+                                <Icons.CloseIcon size={24} color={Colors.text.h1} />
+                            </TouchableOpacity>
+                        </View>
+
+                        <Text theme='description' size={14} style={{ marginBottom: 20 }}>
+                            Are you sure you want to delete the config "{data.selectedConfig?.config}"? This action cannot be undone.
+                        </Text>
+
+                        <View transparent style={{ flexDirection: 'row', gap: 12 }}>
+                            <Button
+                                type='action'
+                                title='Cancel'
+                                onPress={closeModals}
+                                style={{ flex: 1 }}
+                            />
+                            <Button
+                                type='error'
+                                title='Delete'
+                                onPress={handleDelete}
+                                style={{ flex: 1 }}
+                            />
+                        </View>
+                    </View>
+                </View>
+            </Modal>
+        </View>
+    );
+};
+
+export default ConfigManager;