@suflon/rnmd-reporting 0.0.1

package/src/screens/NewConnectionModal.tsx

@@ -0,0 +1,282 @@
+import React, { useState, useMemo, useEffect } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
+import {
+    BottomModal,
+    Loader,
+    TextArea,
+    Button,
+    ModalTitle,
+    SearchFilter,
+    Toast,
+    useConnectionStore,
+} from '@suflon/native-ui';
+import { useConnectionI18n } from '@/context/ConnectionI18nContext';
+import { getBackendMessage } from '@/utils/errorMessage';
+
+interface NewConnectionModalProps {
+    visible: boolean;
+    onClose: () => void;
+    onSuccess?: (message?: string) => void;
+}
+
+const NewConnectionModal = ({ visible, onClose, onSuccess }: NewConnectionModalProps) => {
+    const [searchNum, setSearchNum] = useState('');
+    const [message, setMessage] = useState('');
+    const [toast, setToast] = useState({ visible: false, message: '' });
+    const [successToast, setSuccessToast] = useState({ visible: false, message: '' });
+
+    const { t } = useConnectionI18n();
+
+    const {
+        searchResult,
+        isSearching,
+        isSubmitting,
+        error,
+        searchCompany,
+        sendRequest,
+        clearSearch,
+        clearError,
+    } = useConnectionStore();
+
+    useEffect(() => {
+        if (error && !searchResult && !isSearching) {
+            setToast({ visible: true, message: error });
+        }
+    }, [error, searchResult, isSearching]);
+
+    const handleSearch = () => {
+        if (searchNum.trim()) {
+            searchCompany(searchNum);
+        }
+    };
+
+    const handleSendRequest = async () => {
+        if (searchResult) {
+            try {
+                await sendRequest(searchResult.id, message);
+                setSuccessToast({ visible: true, message: 'Connection request sent successfully' });
+                clearSearch();
+                setSearchNum('');
+                setMessage('');
+            } catch (err: any) {
+                const msg = getBackendMessage(err);
+                setTimeout(() => {
+                    setToast({ visible: true, message: msg });
+                }, 100);
+            }
+        }
+    };
+
+    const handleClose = () => {
+        onClose();
+        clearSearch();
+        clearError();
+        setSearchNum('');
+        setMessage('');
+        setToast({ visible: false, message: '' });
+        setSuccessToast({ visible: false, message: '' });
+    };
+
+    return (
+        <BottomModal
+            isVisible={visible}
+            onClose={handleClose}
+            heightMode="fixed"
+            fixedHeightPercent={88}
+            maxHeightPercent={90}
+        >
+            <View style={styles.contentWrap} className="bg-background-light dark:bg-background-darkSecondaryBg">
+                <View style={styles.toastWrapper} pointerEvents="box-none">
+                    <Toast
+                        key={toast.visible ? `toast-${toast.message}` : 'toast-hidden'}
+                        message={toast.visible ? toast.message : ''}
+                        visible={toast.visible}
+                        type="error"
+                        position="top"
+                        onClose={() => {
+                            setToast({ visible: false, message: '' });
+                            clearError();
+                        }}
+                    />
+                    <Toast
+                        key={successToast.visible ? `success-${successToast.message}` : 'success-hidden'}
+                        message={successToast.visible ? successToast.message : ''}
+                        visible={successToast.visible}
+                        type="success"
+                        position="top"
+                        onClose={() => setSuccessToast({ visible: false, message: '' })}
+                    />
+                </View>
+
+                <ModalTitle
+                    heading={t('newConnection')}
+                    showCloseIcon
+                    onClose={handleClose}
+                />
+
+                <View style={styles.body}>
+                    <KeyboardAwareScrollView
+                        style={styles.scrollView}
+                        contentContainerStyle={styles.scrollContent}
+                        keyboardShouldPersistTaps="handled"
+                        enableOnAndroid={true}
+                        extraScrollHeight={60}
+                        extraHeight={120}
+                    >
+                        <View style={styles.searchSection}>
+                            <Text className="text-sm font-semibold text-text-light-primary dark:text-text-dark-primary mb-2">{t('companyRegNumber')}</Text>
+                            <View style={styles.searchRow}>
+                                <View style={styles.searchInputWrap}>
+                                    <SearchFilter
+                                        placeholder="Search Company By ID"
+                                        value={searchNum}
+                                        onChangeText={setSearchNum}
+                                    />
+                                </View>
+                                <Button
+                                    title={t('search')}
+                                    type="primary"
+                                    size="md"
+                                    onPress={handleSearch}
+                                    icon={{ name: 'search', type: 'Feather' }}
+                                    iconPosition="left"
+                                    useSafeArea={false}
+                                />
+                            </View>
+                            <Text className="text-[11px] text-text-light-subHeading dark:text-text-dark-subHeading italic mt-2">
+                                {t('resultsValidated')}
+                            </Text>
+                        </View>
+
+                        <View key={`search-${isSearching}-${searchResult?.id ?? 'none'}`} style={styles.resultBlock}>
+                            {isSearching && (
+                                <Loader
+                                    message={t('searching')}
+                                    size="large"
+                                    className="mb-6"
+                                    show={true}
+                                />
+                            )}
+
+                            {!isSearching && searchResult != null && (
+                                <View className="rounded-2xl border border-background-lightGray dark:border-background-darkGray bg-background-light dark:bg-background-darkSecondaryBg overflow-hidden mb-6">
+                                    <View className="px-4 py-3 flex-row items-center justify-between border-b border-background-lightGray dark:border-background-darkGray bg-background-secondaryBg dark:bg-background-darkSecondaryBg">
+                                        <Text className="text-xs font-medium text-text-light-secondary dark:text-text-dark-secondary uppercase">{t('profileFound')}</Text>
+                                        <View className="flex-row items-center gap-1.5 px-2.5 py-1 rounded-full bg-green-100 dark:bg-background-darkGreen">
+                                            <Text className="text-[11px] font-bold text-green-700 dark:text-green-100 uppercase">{t('verified')}</Text>
+                                        </View>
+                                    </View>
+                                    <View className="p-4">
+                                        <Text className="text-lg font-bold text-text-light-primary dark:text-text-dark-primary mb-4">
+                                            {searchResult.display_name}
+                                        </Text>
+                                        <View className="space-y-4">
+                                            <View className="flex-row justify-between mb-4">
+                                                <View className="flex-1">
+                                                    <Text className="text-[10px] font-bold text-text-light-subHeading dark:text-text-dark-subHeading uppercase">{t('regId')}</Text>
+                                                    <Text className="text-sm font-medium text-text-light-primary dark:text-text-dark-primary">{searchResult.company_num}</Text>
+                                                </View>
+                                                <View className="flex-1">
+                                                    <Text className="text-[10px] font-bold text-text-light-subHeading dark:text-text-dark-subHeading uppercase">{t('email')}</Text>
+                                                    <Text className="text-sm font-medium text-text-light-primary dark:text-text-dark-primary" numberOfLines={1}>
+                                                        {searchResult.email}
+                                                    </Text>
+                                                </View>
+                                            </View>
+                                            <View className="flex-row justify-between">
+                                                <View className="flex-1">
+                                                    <Text className="text-[10px] font-bold text-text-light-subHeading dark:text-text-dark-subHeading uppercase">{t('phone')}</Text>
+                                                    <Text className="text-sm font-medium text-text-light-primary dark:text-text-dark-primary">{searchResult.phone}</Text>
+                                                </View>
+                                                <View className="flex-1">
+                                                    <Text className="text-[10px] font-bold text-text-light-subHeading dark:text-text-dark-subHeading uppercase">{t('location')}</Text>
+                                                    <Text className="text-sm font-medium text-text-light-primary dark:text-text-dark-primary">{searchResult.city}</Text>
+                                                </View>
+                                            </View>
+                                        </View>
+                                        <Button
+                                            title={t('clearSelection')}
+                                            type="outline"
+                                            size="md"
+                                            onPress={clearSearch}
+                                            className="mt-4"
+                                            useSafeArea={false}
+                                        />
+                                    </View>
+                                </View>
+                            )}
+                        </View>
+
+                        <View style={styles.messageSection}>
+                            <TextArea
+                                label={t('professionalMessage')}
+                                placeholder={t('messagePlaceholder')}
+                                value={message}
+                                onChangeText={setMessage}
+                                maxLength={512}
+                                showCharCount={true}
+                            />
+                        </View>
+                    </KeyboardAwareScrollView>
+                    <View className="px-4 py-4 border-t border-background-lightGray dark:border-background-darkGray bg-gray-100 dark:bg-background-darkSecondaryBg">
+                        <Button
+                            title={isSubmitting ? t('sending') : t('sendRequest')}
+                            type="primary"
+                            size="lg"
+                            onPress={handleSendRequest}
+                            disabled={!searchResult || isSubmitting}
+                            loading={isSubmitting}
+                            icon={!isSubmitting ? { name: 'send', type: 'Feather' } : undefined}
+                            iconPosition="right"
+                            useSafeArea={false}
+                        />
+                    </View>
+                </View>
+            </View>
+        </BottomModal>
+    );
+};
+
+const styles = StyleSheet.create({
+    contentWrap: {
+        flex: 1,
+    },
+    body: {
+        flex: 1,
+    },
+    toastWrapper: {
+        position: 'absolute',
+        top: 0,
+        left: 24,
+        right: 24,
+        zIndex: 10000,
+    },
+    scrollView: {
+        flex: 1,
+    },
+    scrollContent: {
+        paddingHorizontal: 16,
+        paddingBottom: 24,
+    },
+    searchSection: {
+        marginBottom: 20,
+        paddingVertical: 8,
+    },
+    searchRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    searchInputWrap: {
+        flex: 1,
+        marginRight: 8,
+    },
+    resultBlock: {
+        marginBottom: 16,
+    },
+    messageSection: {
+        marginBottom: 16,
+    },
+});
+
+export default NewConnectionModal;

package/src/services/ApiService.ts

@@ -0,0 +1,22 @@
+import { axiosInstance } from './api';
+
+export const ApiService = {
+    get: async (url: string, params?: Record<string, any>) => {
+        const response = await axiosInstance.get(url, { params });
+        return response.data;
+    },
+
+    post: async (url: string, body: unknown) => {
+        const response = await axiosInstance.post(url, body);
+        return response.data;
+    },
+
+    patch: async (url: string, body: unknown) => {
+        const response = await axiosInstance.patch(url, body);
+        return response.data;
+    },
+
+    fetchList: async (url: string, params?: Record<string, any>) => {
+        return ApiService.get(url, params);
+    },
+};

package/src/services/ConnectionService.ts

@@ -0,0 +1,81 @@
+import { ApiService } from './ApiService';
+import { API_ENDPOINTS } from '@/config';
+import type { ConnectionFilterParams } from '@/types/connection';
+
+export const ConnectionService = {
+    getConnections: async (page = 1, limit = 10, filters?: ConnectionFilterParams | null) => {
+        const params: Record<string, any> = {
+            sort_by: 'updated_at',
+            sort_mode: 'desc',
+            page_number: page,
+            page_limit: limit,
+        };
+        if (filters?.connection_status) params.connection_status = filters.connection_status;
+        if (filters?.direction) params.direction = filters.direction;
+        try {
+            return await ApiService.fetchList(API_ENDPOINTS.getConnections, params);
+        } catch (error) {
+            throw error;
+        }
+    },
+
+    createRequest: async (body: {
+        requested_company_id: number;
+        request_message?: string;
+        expires_at?: string;
+    }) => {
+        try {
+            return await ApiService.post(API_ENDPOINTS.createConnectionRequest, {
+                id: 0,
+                ...body,
+            });
+        } catch (error) {
+            throw error;
+        }
+    },
+
+    searchByNum: async (num: string) => {
+        const url = `${API_ENDPOINTS.searchCompany}${num}`;
+        try {
+            return await ApiService.get(url);
+        } catch (error) {
+            throw error;
+        }
+    },
+
+    acceptConnection: async (id: number) => {
+        const url = API_ENDPOINTS.connectionAction(id, 'accept');
+        try {
+            return await ApiService.patch(url, {});
+        } catch (error) {
+            throw error;
+        }
+    },
+
+    rejectConnection: async (id: number) => {
+        const url = API_ENDPOINTS.connectionAction(id, 'reject');
+        try {
+            return await ApiService.patch(url, {});
+        } catch (error) {
+            throw error;
+        }
+    },
+
+    cancelConnection: async (id: number) => {
+        const url = API_ENDPOINTS.connectionAction(id, 'cancel');
+        try {
+            return await ApiService.patch(url, {});
+        } catch (error) {
+            throw error;
+        }
+    },
+
+    disconnectConnection: async (id: number) => {
+        const url = API_ENDPOINTS.connectionAction(id, 'disconnect');
+        try {
+            return await ApiService.patch(url, {});
+        } catch (error) {
+            throw error;
+        }
+    },
+};

package/src/services/api.ts

@@ -0,0 +1,83 @@
+import axios, { type InternalAxiosRequestConfig } from 'axios';
+import { getData, removeData } from '@/utils/AsyncStorageUtils';
+import { BASE_URL } from '@/config';
+
+const DEFAULT_BASE = BASE_URL;
+
+export const axiosInstance = axios.create({
+    baseURL: DEFAULT_BASE,
+    headers: {
+        accept: 'application/json',
+        'Content-Type': 'application/json',
+    },
+});
+
+function toNum(v: string | number | null | undefined): number | null {
+    if (v == null) return null;
+    const n = typeof v === 'number' ? v : Number(v);
+    return Number.isNaN(n) ? null : n;
+}
+
+axiosInstance.interceptors.request.use(
+    async (config: InternalAxiosRequestConfig) => {
+        const tokenRaw = await getData<string>('token');
+        let token: string | null =
+            tokenRaw != null && typeof tokenRaw === 'string' ? tokenRaw : null;
+        const apiBaseRaw = await getData<string>('api_base_url');
+        const base =
+            apiBaseRaw != null && typeof apiBaseRaw === 'string' && apiBaseRaw.trim()
+                ? apiBaseRaw.trim().replace(/\/+$/, '')
+                : null;
+        if (base) {
+            if (/\/platform\/api\/online$/i.test(base)) {
+                config.baseURL = base;
+            } else {
+                config.baseURL = `${base}/platform/api/online`;
+            }
+        }
+        if (__DEV__) {
+            const method = (config.method ?? 'get').toUpperCase();
+            const fullUrl = config.baseURL && config.url ? `${config.baseURL}${config.url}` : config.url ?? '';
+            console.log('[Connection API]', method, fullUrl);
+        }
+        const region_id = toNum((await getData('region_id')) as number | string | null);
+        const company_id = toNum((await getData('company_id')) as number | string | null);
+        const staff_id = toNum((await getData('staff_id')) as number | string | null);
+        const user_id = toNum((await getData('user_id')) as number | string | null);
+        const bu_id = toNum((await getData('bu_id')) as number | string | null);
+
+        if (token && typeof token === 'string') {
+            let cleanToken = token.trim();
+            if (cleanToken.startsWith('"') && cleanToken.endsWith('"')) {
+                cleanToken = cleanToken.slice(1, -1);
+            }
+            if (cleanToken && cleanToken !== 'null' && cleanToken !== 'undefined') {
+                const authValue = cleanToken.startsWith('Bearer ')
+                    ? cleanToken
+                    : `Bearer ${cleanToken}`;
+                config.headers.set('Authorization', authValue);
+                config.headers.set('authorization', authValue);
+            }
+        }
+        if (region_id != null) config.headers.set('region_id', String(region_id));
+        if (company_id != null) config.headers.set('company_id', String(company_id));
+        if (staff_id != null) config.headers.set('staff_id', String(staff_id));
+        if (user_id != null) config.headers.set('user_id', String(user_id));
+        if (bu_id != null) config.headers.set('bu_id', String(bu_id));
+
+        return config;
+    },
+    (error: unknown) => Promise.reject(error)
+);
+
+axiosInstance.interceptors.response.use(
+    (response) => response,
+    async (error: { response?: { status?: number } }) => {
+        if (error?.response?.status === 401) {
+            await removeData('token').catch(() => { });
+        }
+        return Promise.reject(error);
+    }
+);
+
+export default axiosInstance;

package/src/stores/connection.store.ts

@@ -0,0 +1,3 @@
+import { useConnectionStore } from '@suflon/native-ui';
+export { useConnectionStore };
+export * from '@suflon/native-ui';

package/src/stores/language.store.ts

@@ -0,0 +1,54 @@
+import { I18nManager, NativeModules } from 'react-native';
+import { create } from 'zustand';
+import { getData, saveData } from '@/utils/AsyncStorageUtils';
+
+export type LanguageCode = 'en' | 'hi' | 'ar';
+
+interface LanguageState {
+    language: LanguageCode;
+    setLanguage: (lang: LanguageCode) => Promise<void>;
+    /** Call once on app init to load saved language from AsyncStorage */
+    loadSavedLanguage: () => Promise<void>;
+}
+
+/** Reload the app so RTL/LTR layout change takes effect (required by React Native) */
+function reloadApp() {
+    if (__DEV__ && NativeModules.DevSettings?.reload) {
+        NativeModules.DevSettings.reload();
+        return;
+    }
+    // Production: use react-native-restart if installed: require('react-native-restart').Restart();
+    if (NativeModules.DevSettings?.reload) {
+        NativeModules.DevSettings.reload();
+    }
+}
+
+export const useLanguageStore = create<LanguageState>((set) => ({
+    language: 'en',
+
+    setLanguage: async (lang: LanguageCode) => {
+        const wantRTL = lang === 'ar';
+        const wasRTL = I18nManager.isRTL;
+
+        set({ language: lang });
+        await saveData('language', lang);
+
+        // Switch layout direction when moving to/from Arabic (RTL requires app reload in RN)
+        if (wantRTL !== wasRTL) {
+            I18nManager.allowRTL(true);
+            I18nManager.forceRTL(wantRTL);
+            reloadApp();
+        }
+    },
+
+    loadSavedLanguage: async () => {
+        try {
+            const saved = await getData<string>('language');
+            if (saved === 'en' || saved === 'hi' || saved === 'ar') {
+                set({ language: saved });
+            }
+        } catch {
+            // keep default 'en'
+        }
+    },
+}));

package/src/theme/colors.ts

@@ -0,0 +1,56 @@
+export const themeColors = {
+  brand: {
+    50: '#f5f3ff',
+    100: '#ede9fe',
+    200: '#ddd6fe',
+    400: '#a78bfa',
+    500: '#8b5cf6',
+    600: '#7c3aed',
+    700: '#6d28d9',
+    900: '#4c1d95',
+    DEFAULT: '#7c3aed',
+  },
+  slate: {
+    50: '#f8fafc',
+    100: '#f1f5f9',
+    200: '#e2e8f0',
+    300: '#cbd5e1',
+    400: '#94a3b8',
+    500: '#64748b',
+    600: '#475569',
+    700: '#334155',
+    800: '#1e293b',
+    900: '#0f172a',
+    950: '#020617',
+  },
+  emerald: {
+    50: '#ecfdf5',
+    100: '#d1fae5',
+    500: '#10b981',
+    600: '#059669',
+    700: '#047857',
+    800: '#065f46',
+  },
+  amber: {
+    50: '#fffbeb',
+    100: '#fef3c7',
+    500: '#f59e0b',
+    800: '#92400e',
+  },
+  rose: {
+    100: '#ffe4e6',
+    500: '#f43f5e',
+    800: '#9f1239',
+  },
+  blue: {
+    100: '#dbeafe',
+    400: '#60a5fa',
+    600: '#2563eb',
+    700: '#1d4ed8',
+    900: '#1e3a8a',
+  },
+  white: '#ffffff',
+  transparent: 'transparent',
+};
+
+export type ThemeColors = typeof themeColors;

package/src/types/connection.ts

@@ -0,0 +1,69 @@
+/** Connection status filter – matches backend IConnectionStatusEnum */
+export type ConnectionStatusFilter =
+    | 'PENDING'
+    | 'ACCEPTED'
+    | 'REJECTED'
+    | 'CANCELLED'
+    | 'EXPIRED'
+    | 'DISCONNECTED';
+
+/** Direction filter – matches backend IDirectionEnum */
+export type DirectionFilter = 'INCOMING' | 'OUTGOING';
+
+export interface ConnectionFilterParams {
+    connection_status?: ConnectionStatusFilter | null;
+    direction?: DirectionFilter | null;
+}
+
+/** Connection status filter – matches backend IConnectionStatusEnum */
+export type ConnectionStatus =
+    | 'PENDING'
+    | 'ACCEPTED'
+    | 'REJECTED'
+    | 'CANCELLED'
+    | 'EXPIRED'
+    | 'DISCONNECTED';
+
+/** Direction filter – matches backend IDirectionEnum */
+export type Direction = 'INCOMING' | 'OUTGOING';
+
+export interface ConnectionFilterParams {
+    connection_status?: ConnectionStatus;
+    direction?: Direction;
+}
+
+export interface CompanyBasic {
+    id: number;
+    sysid: string;
+    slug: string;
+    display_name: string;
+    company_num: string;
+    logo: string;
+    phone: string;
+    email: string;
+    business_reg_address: string;
+    city: string;
+    country: string;
+}
+
+export interface Connection {
+    id: number;
+    sysid: string;
+    requesting_company_id: number;
+    requested_company_id: number;
+    connection_status: ConnectionStatus;
+    requested_at: string;
+    connected_at: string | null;
+    direction: Direction;
+    request_message: string;
+    response_message: string | null;
+    is_active: boolean;
+    requesting_company: CompanyBasic;
+    requested_company: CompanyBasic;
+}
+
+export interface CompanyDetails extends CompanyBasic {
+    is_active: boolean;
+    is_verified: boolean;
+    // Add other fields from the schema as needed
+}