@suflon/rnmd-reporting 0.0.1

package/src/screens/ConnectionListScreen.tsx

@@ -0,0 +1,471 @@
+import React, { useEffect, useState, useRef, useMemo } from 'react';
+import { View, Text, ScrollView, Alert } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useConnectionStore, Header, SearchFilter, Button, Loader, BottomModal, ModalTitle, Dropdown, ServerErrorWrapper, Toast, PermissionActions } from '@suflon/native-ui';
+import type { ConnectionFilterParams, ConnectionStatus, Direction } from '@/types/connection';
+import { useConnectionI18n } from '@/context/ConnectionI18nContext';
+
+const ConnectionListScreen = ({
+    onOpenModal,
+    onBackPress,
+    title,
+    isModalVisible,
+}: {
+    onOpenModal?: () => void;
+    onBackPress?: () => void;
+    title?: string;
+    isModalVisible?: boolean;
+}) => {
+    const {
+        connections,
+        isFetching,
+        error,
+        errorStatus,
+        isActioning,
+        activeFilters,
+        _hasHydrated,
+        fetchConnections,
+        acceptConnection,
+        rejectConnection,
+        cancelConnection,
+        disconnectConnection,
+        clearError,
+    } = useConnectionStore();
+
+    const [filterModalVisible, setFilterModalVisible] = useState(false);
+    const [draftStatus, setDraftStatus] = useState('');
+    const [draftDirection, setDraftDirection] = useState('');
+    const [toast, setToast] = useState({ visible: false, message: '' });
+    const prevErrorRef = useRef<string | null>(null);
+    const initialFetchDone = useRef(false);
+
+    const [searchQuery, setSearchQuery] = useState('');
+
+    const filteredConnections = useMemo(() => {
+        const conns = connections || [];
+        if (!searchQuery.trim()) return conns;
+        const query = searchQuery.toLowerCase().trim();
+        return conns.filter((item) => {
+            const reqName = item.requesting_company?.display_name?.toLowerCase() ?? '';
+            const destName = item.requested_company?.display_name?.toLowerCase() ?? '';
+            const reqNum = item.requesting_company?.company_num ?? '';
+            const destNum = item.requested_company?.company_num ?? '';
+            const msg = item.request_message?.toLowerCase() ?? '';
+            return (
+                reqName.includes(query) ||
+                destName.includes(query) ||
+                reqNum.includes(query) ||
+                destNum.includes(query) ||
+                msg.includes(query)
+            );
+        });
+    }, [connections, searchQuery]);
+
+    const { t } = useConnectionI18n();
+
+    const statusOptions = useMemo(
+        () => [
+            { label: t('allStatuses'), value: '' },
+            { label: 'PENDING', value: 'PENDING' },
+            { label: 'ACCEPTED', value: 'ACCEPTED' },
+            { label: 'REJECTED', value: 'REJECTED' },
+            { label: 'CANCELLED', value: 'CANCELLED' },
+            { label: 'EXPIRED', value: 'EXPIRED' },
+            { label: 'DISCONNECTED', value: 'DISCONNECTED' },
+        ],
+        [t],
+    );
+    const directionOptions = useMemo(
+        () => [
+            { label: t('allDirections'), value: '' },
+            { label: t('incoming'), value: 'INCOMING' },
+            { label: t('outgoing'), value: 'OUTGOING' },
+        ],
+        [t],
+    );
+
+    // 🐛 DEBUG: render-time log — fires on EVERY render frame (not just after paint)
+    console.log('[ConnectionList] RENDER ▶', {
+        _hasHydrated,
+        isFetching,
+        connectionsLength: connections.length,
+        showLoader: isFetching && _hasHydrated && connections.length === 0,
+    });
+
+    useEffect(() => {
+        console.log('[ConnectionList] Hydration check — _hasHydrated:', _hasHydrated, '| initialFetchDone:', initialFetchDone.current);
+        if (!_hasHydrated) return;
+        if (initialFetchDone.current) return;
+        initialFetchDone.current = true;
+        console.log('[ConnectionList] Triggering fetchConnections()');
+        fetchConnections();
+    }, [_hasHydrated, fetchConnections]);
+
+    useEffect(() => {
+        if (error && error !== prevErrorRef.current) {
+            prevErrorRef.current = error;
+            if (!isModalVisible) {
+                setToast({ visible: true, message: error });
+            }
+            clearError();
+        }
+    }, [error, clearError, isModalVisible]);
+
+    const handleToastClose = () => {
+        setToast((t) => ({ ...t, visible: false }));
+        prevErrorRef.current = null;
+    };
+
+    const openFilter = () => {
+        setDraftStatus(activeFilters.connection_status ?? '');
+        setDraftDirection(activeFilters.direction ?? '');
+        setFilterModalVisible(true);
+    };
+
+    const applyFilter = () => {
+        const filters: ConnectionFilterParams = {};
+        if (draftStatus) filters.connection_status = draftStatus as ConnectionStatus;
+        if (draftDirection) filters.direction = draftDirection as Direction;
+        fetchConnections(1, filters);
+        setFilterModalVisible(false);
+    };
+
+    const clearFilter = () => {
+        setDraftStatus('');
+        setDraftDirection('');
+        fetchConnections(1, {});
+        setFilterModalVisible(false);
+    };
+
+    const hasActiveFilter = !!(activeFilters.connection_status || activeFilters.direction);
+
+    // Header: actionIconName2 = left (outline), actionIconName = right (solid). Order: [filter, refresh].
+    const primaryIconName = 'refresh-cw';
+    const secondaryIconName = 'sliders';
+    const handlePrimaryAction = () => fetchConnections(1, undefined, true);
+    const handleSecondaryAction = openFilter;
+
+    return (
+        <SafeAreaView style={{ flex: 1 }} edges={['bottom']}>
+            <View className="flex-1 bg-background-light dark:bg-background-darkBg">
+                <Header
+                    title={title ?? t('title')}
+                    showBackButton={true}
+                    onBackPress={onBackPress}
+                    actionIconName={primaryIconName}
+                    actionIconType="Feather"
+                    onActionPress={handlePrimaryAction}
+                    actionIconName2={secondaryIconName}
+                    actionIconType2="Feather"
+                    onSecondActionPress={handleSecondaryAction}
+                />
+                <PermissionActions
+                    app="connection"
+                    module="company_connection"
+                    action="read"
+                    hideWhenReadOnly={true}
+                >
+                    <View className="px-4 py-2 bg-background-light dark:bg-background-darkBg ">
+                        {hasActiveFilter && (
+                            <View className="flex-row items-center mb-2">
+                                <Text className="text-xs text-text-light-secondary dark:text-text-dark-secondary mr-1">{t('filter')}</Text>
+                                <Text className="text-xs font-medium text-text-light-violet dark:text-text-light-violet">
+                                    {[activeFilters.connection_status, activeFilters.direction].filter(Boolean).join(' • ') || '—'}
+                                </Text>
+                            </View>
+                        )}
+                        <View className="flex-row items-center gap-2">
+                            <View className="flex-1">
+                                <SearchFilter
+                                    placeholder={t('searchPlaceholder')}
+                                    value={searchQuery}
+                                    onChangeText={setSearchQuery}
+                                />
+                            </View>
+                            <PermissionActions
+                                app="connection"
+                                module="company_connection"
+                                action="create"
+                                hideWhenReadOnly={true}
+                            >
+                                <Button
+                                    title={t('create')}
+                                    type="primary"
+                                    size="md"
+                                    onPress={onOpenModal}
+                                    icon={{ name: 'plus', type: 'Feather' }}
+                                    iconPosition="left"
+                                    useSafeArea={false}
+                                />
+                            </PermissionActions>
+                        </View>
+                    </View>
+
+                    <ServerErrorWrapper
+                        errorStatus={errorStatus}
+                        onRetry={() => fetchConnections()}
+                        className="flex-1"
+                    >
+                        <ScrollView className="p-4 flex-1">
+                            {/* 🐛 DEBUG — remove before release */
+                            /* isFetching={String(isFetching)} | _hasHydrated={String(_hasHydrated)} | connections={connections.length} */}
+                            {isFetching && _hasHydrated && connections.length === 0 && (
+                                <Loader message={t('loading')} size="large" className="mt-10" />
+                            )}
+
+                            {filteredConnections.map((item) => (
+                                <View
+                                    key={item.id}
+                                    className="bg-background-light dark:bg-background-darkSecondaryBg rounded-2xl border border-background-lightGray dark:border-background-darkGray shadow-sm overflow-hidden mb-4"
+                                >
+                                    <View className="p-4">
+                                        <View className="flex-row justify-between items-start gap-3 mb-3">
+                                            <View className="flex-1 min-w-0">
+                                                <Text className="font-bold text-lg text-text-light-primary dark:text-text-dark-primary" numberOfLines={1}>
+                                                    {item.direction === 'OUTGOING' ? item.requested_company.display_name : item.requesting_company.display_name}
+                                                </Text>
+                                                <View className="flex-row items-center mt-1">
+                                                    <Text className="text-xs text-text-light-secondary dark:text-text-dark-secondary">{t('from')} </Text>
+                                                    <Text className="text-xs font-medium text-text-light-primary dark:text-text-dark-secondary">
+                                                        {item.direction === 'OUTGOING' ? item.requesting_company.display_name : item.requested_company.display_name}
+                                                    </Text>
+                                                </View>
+                                            </View>
+                                            <View
+                                                className={`px-2 py-1 rounded-md border mt-1 flex-shrink-0 ${item.connection_status === 'PENDING'
+                                                    ? 'bg-yellow-100 dark:bg-yellow-900 border-yellow-400 dark:border-yellow-900'
+                                                    : item.connection_status === 'ACCEPTED'
+                                                        ? 'bg-green-100 dark:bg-background-darkGreen border-green-400 dark:border-background-darkGreen'
+                                                        : item.connection_status === 'REJECTED'
+                                                            ? 'bg-red-100 dark:bg-red-900 border-red-400 dark:border-red-900'
+                                                            : item.connection_status === 'CANCELLED' || item.connection_status === 'EXPIRED'
+                                                                ? 'bg-red-100 dark:bg-red-900 border-red-400 dark:border-red-900'
+                                                                : item.connection_status === 'DISCONNECTED'
+                                                                    ? 'bg-background-secondaryBg dark:bg-background-darkSecondaryBg border-background-lightGray dark:border-background-darkGray'
+                                                                    : 'bg-background-secondaryBg dark:bg-background-darkSecondaryBg border-background-lightGray dark:border-background-darkGray'
+                                                    }`}
+                                            >
+                                                <Text
+                                                    className={`text-[10px] font-bold uppercase tracking-wider ${item.connection_status === 'PENDING'
+                                                        ? 'text-yellow-800 dark:text-yellow-100'
+                                                        : item.connection_status === 'ACCEPTED'
+                                                            ? 'text-green-700 dark:text-green-100'
+                                                            : item.connection_status === 'REJECTED'
+                                                                ? 'text-red-700 dark:text-red-100'
+                                                                : item.connection_status === 'CANCELLED' || item.connection_status === 'EXPIRED'
+                                                                    ? 'text-red-700 dark:text-red-100'
+                                                                    : 'text-text-light-secondary dark:text-text-dark-secondary'
+                                                        }`}
+                                                >
+                                                    {item.connection_status}
+                                                </Text>
+                                            </View>
+                                        </View>
+
+                                        <View className="flex-row py-3 border-y border-background-lightGray dark:border-background-darkGray">
+                                            <View className="flex-1">
+                                                <Text className="text-[10px] uppercase text-text-light-subHeading dark:text-text-dark-subHeading font-bold mb-0.5">
+                                                    {t('requestedAt')}
+                                                </Text>
+                                                <Text className="text-sm font-medium text-text-light-primary dark:text-text-dark-primary">
+                                                    {new Date(item.requested_at).toLocaleDateString()}
+                                                </Text>
+                                            </View>
+                                            <View className="flex-1">
+                                                <Text className="text-[10px] uppercase text-text-light-subHeading dark:text-text-dark-subHeading font-bold mb-0.5">
+                                                    {t('direction')}
+                                                </Text>
+                                                <View className="flex-row items-center gap-1.5">
+                                                    <Text className={item.direction === 'OUTGOING' ? 'text-blue-400' : 'text-green-400'}>
+                                                        {item.direction === 'OUTGOING' ? '↗' : '↙'}
+                                                    </Text>
+                                                    <Text
+                                                        className={`text-sm font-semibold ${item.direction === 'OUTGOING'
+                                                            ? 'text-blue-400 dark:text-blue-100'
+                                                            : 'text-green-400 dark:text-green-100'
+                                                            }`}
+                                                    >
+                                                        {item.direction === 'OUTGOING' ? t('outgoing') : t('incoming')}
+                                                    </Text>
+                                                </View>
+                                            </View>
+                                        </View>
+
+                                        <View className="mt-4 flex-row items-center justify-between">
+                                            <View className="flex-row -space-x-2">
+                                                <View className="w-8 h-8 rounded-full bg-background-lightBlue dark:bg-background-lightBlack border-2 border-background-light dark:border-background-darkSecondaryBg items-center justify-center">
+                                                    <Text className="text-[10px] font-bold text-text-light-gray dark:text-text-dark-primary">
+                                                        {item.requesting_company.display_name.substring(0, 2).toUpperCase()}
+                                                    </Text>
+                                                </View>
+                                                <View className="w-8 h-8 rounded-full bg-background-lightPink dark:bg-background-violet border-2 border-background-light dark:border-background-darkSecondaryBg items-center justify-center">
+                                                    <Text className="text-[10px] font-bold text-text-light-violet dark:text-text-light-white">
+                                                        {item.requested_company.display_name.substring(0, 2).toUpperCase()}
+                                                    </Text>
+                                                </View>
+                                            </View>
+
+                                            <View className="flex-row items-center gap-2">
+                                                <PermissionActions
+                                                    app="connection"
+                                                    module="company_connection"
+                                                    action="update"
+                                                    hideWhenReadOnly={true}
+                                                >
+                                                    {item.connection_status === 'PENDING' && (
+                                                        <>
+                                                            {item.direction === 'INCOMING' ? (
+                                                                <View className="flex-row gap-2">
+                                                                    <Button
+                                                                        title={t('reject')}
+                                                                        type="outline"
+                                                                        size="sm"
+                                                                        onPress={() => {
+                                                                            Alert.alert(
+                                                                                t('confirmTitle'),
+                                                                                t('rejectConfirm'),
+                                                                                [
+                                                                                    { text: t('cancel'), style: 'cancel' },
+                                                                                    { text: t('yes'), style: 'destructive', onPress: () => rejectConnection(item.id) }
+                                                                                ]
+                                                                            );
+                                                                        }}
+                                                                        disabled={isActioning}
+                                                                    />
+                                                                    <Button
+                                                                        title={t('accept')}
+                                                                        type="primary"
+                                                                        size="sm"
+                                                                        onPress={() => {
+                                                                            Alert.alert(
+                                                                                t('confirmTitle'),
+                                                                                t('acceptConfirm'),
+                                                                                [
+                                                                                    { text: t('cancel'), style: 'cancel' },
+                                                                                    { text: t('yes'), onPress: () => acceptConnection(item.id) }
+                                                                                ]
+                                                                            );
+                                                                        }}
+                                                                        disabled={isActioning}
+                                                                    />
+                                                                </View>
+                                                            ) : (
+                                                                <Button
+                                                                    title={t('cancel')}
+                                                                    type="outline"
+                                                                    size="sm"
+                                                                    onPress={() => {
+                                                                        Alert.alert(
+                                                                            t('confirmTitle'),
+                                                                            t('cancelConfirm'),
+                                                                            [
+                                                                                { text: t('cancel'), style: 'cancel' },
+                                                                                { text: t('yes'), style: 'destructive', onPress: () => cancelConnection(item.id) }
+                                                                            ]
+                                                                        );
+                                                                    }}
+                                                                    disabled={isActioning}
+                                                                />
+                                                            )}
+                                                        </>
+                                                    )}
+
+                                                    {item.connection_status === 'ACCEPTED' && (
+                                                        <Button
+                                                            title={t('disconnect')}
+                                                            type="outline"
+                                                            size="sm"
+                                                            onPress={() => {
+                                                                Alert.alert(
+                                                                    t('confirmTitle'),
+                                                                    t('disconnectConfirm'),
+                                                                    [
+                                                                        { text: t('cancel'), style: 'cancel' },
+                                                                        { text: t('yes'), style: 'destructive', onPress: () => disconnectConnection(item.id) }
+                                                                    ]
+                                                                );
+                                                            }}
+                                                            disabled={isActioning}
+                                                        />
+                                                    )}
+                                                </PermissionActions>
+                                            </View>
+                                        </View>
+                                    </View>
+                                </View>
+                            ))}
+
+                            <View className="items-center justify-center py-6">
+                                <Text className="text-xs text-slate-400 dark:text-slate-500">
+                                    {filteredConnections.length > 0
+                                        ? t('showingCount', { count: filteredConnections.length })
+                                        : t('noConnections')}
+                                </Text>
+                            </View>
+                        </ScrollView>
+                    </ServerErrorWrapper>
+
+                    <BottomModal
+                        isVisible={filterModalVisible}
+                        onClose={() => setFilterModalVisible(false)}
+                        heightMode="fixed"
+                        fixedHeightPercent={55}
+                        className="bg-background-light dark:bg-background-darkSecondaryBg"
+                    >
+                        <ModalTitle
+                            heading={t('filterConnections')}
+                            showCloseIcon
+                            onClose={() => setFilterModalVisible(false)}
+                        />
+                        <View className="px-4">
+                            <Dropdown
+                                label={t('status')}
+                                placeholder={t('allStatuses')}
+                                items={statusOptions}
+                                value={draftStatus}
+                                onValueChange={(v) => setDraftStatus(v ?? '')}
+                            />
+                            <View className="mt-4">
+                                <Dropdown
+                                    label={t('direction')}
+                                    placeholder={t('allDirections')}
+                                    items={directionOptions}
+                                    value={draftDirection}
+                                    onValueChange={(v) => setDraftDirection(v ?? '')}
+                                />
+                            </View>
+                            <View className="flex-row mt-6 gap-3">
+                                <Button
+                                    title={t('clear')}
+                                    type="outline"
+                                    size="md"
+                                    onPress={clearFilter}
+                                    className="flex-1"
+                                    useSafeArea={false}
+                                />
+                                <Button
+                                    title={t('apply')}
+                                    type="primary"
+                                    size="md"
+                                    onPress={applyFilter}
+                                    className="flex-1"
+                                    useSafeArea={false}
+                                />
+                            </View>
+                        </View>
+                    </BottomModal>
+
+                    <Toast
+                        message={toast.message}
+                        visible={toast.visible}
+                        type="error"
+                        position="bottom"
+                        onClose={handleToastClose}
+                    />
+                </PermissionActions>
+            </View>
+        </SafeAreaView>
+    );
+};
+
+export default ConnectionListScreen;