government ui complated
This commit is contained in:
Samandar Turgunboyev
@@ -1,199 +0,0 @@
|
||||
// EServicesScreen.tsx
|
||||
import { useTheme } from '@/components/ThemeContext';
|
||||
import { useInfiniteQuery } from '@tanstack/react-query';
|
||||
import { Image } from 'expo-image';
|
||||
import { ChevronLeft, XIcon } from 'lucide-react-native';
|
||||
import React, { useCallback, useRef, useState } from 'react';
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Dimensions,
|
||||
FlatList,
|
||||
Modal,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { WebView } from 'react-native-webview';
|
||||
import { eservices_api } from '../lib/api';
|
||||
|
||||
const { width: SCREEN_WIDTH } = Dimensions.get('window');
|
||||
const PAGE_SIZE = 10;
|
||||
|
||||
export interface GovermentServiceDataRes {
|
||||
id: number;
|
||||
name: string;
|
||||
url: string;
|
||||
logo: string;
|
||||
}
|
||||
|
||||
export default function EServicesScreen() {
|
||||
const { isDark } = useTheme();
|
||||
const [webUrl, setWebUrl] = useState<string | null>(null);
|
||||
const [modalVisible, setModalVisible] = useState(false);
|
||||
const webviewRef = useRef<WebView>(null); // WebView ref for goBack
|
||||
|
||||
const { data, isLoading, isError, fetchNextPage, hasNextPage, isFetchingNextPage } =
|
||||
useInfiniteQuery({
|
||||
queryKey: ['goverment_service'],
|
||||
queryFn: async ({ pageParam = 1 }) => {
|
||||
const response = await eservices_api.list({
|
||||
page: pageParam,
|
||||
page_size: PAGE_SIZE,
|
||||
});
|
||||
return response.data.data;
|
||||
},
|
||||
getNextPageParam: (lastPage) =>
|
||||
lastPage.current_page < lastPage.total_pages ? lastPage.current_page + 1 : undefined,
|
||||
initialPageParam: 1,
|
||||
});
|
||||
|
||||
const services: GovermentServiceDataRes[] = data?.pages.flatMap((p) => p.results) ?? [];
|
||||
|
||||
const openWebView = (url: string) => {
|
||||
setWebUrl(url);
|
||||
setModalVisible(true);
|
||||
};
|
||||
|
||||
const renderItem = useCallback(
|
||||
({ item }: { item: GovermentServiceDataRes }) => (
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.card,
|
||||
{ backgroundColor: isDark ? '#1e293b' : '#f8fafc' },
|
||||
isDark ? styles.darkShadow : styles.lightShadow,
|
||||
]}
|
||||
onPress={() => openWebView(item.url)}
|
||||
>
|
||||
<Image source={{ uri: item.logo }} style={styles.logo} resizeMode="contain" />
|
||||
<Text style={[styles.name, { color: isDark ? '#f1f5f9' : '#0f172a' }]}>{item.name}</Text>
|
||||
</TouchableOpacity>
|
||||
),
|
||||
[isDark]
|
||||
);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<View style={[styles.center, { backgroundColor: isDark ? '#0f172a' : '#f8fafc' }]}>
|
||||
<ActivityIndicator size="large" color="#3b82f6" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
if (isError) {
|
||||
return (
|
||||
<View style={[styles.center, { backgroundColor: isDark ? '#0f172a' : '#f8fafc' }]}>
|
||||
<Text style={{ color: 'red' }}>Xatolik yuz berdi</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1, backgroundColor: isDark ? '#0f172a' : '#f8fafc' }}>
|
||||
<FlatList
|
||||
data={services}
|
||||
keyExtractor={(item) => item.id.toString()}
|
||||
renderItem={renderItem}
|
||||
numColumns={2}
|
||||
columnWrapperStyle={{ justifyContent: 'space-between', marginBottom: 12 }}
|
||||
contentContainerStyle={{ padding: 16 }}
|
||||
onEndReached={() => hasNextPage && fetchNextPage()}
|
||||
onEndReachedThreshold={0.4}
|
||||
ListFooterComponent={
|
||||
isFetchingNextPage ? <ActivityIndicator color="#3b82f6" style={{ margin: 20 }} /> : null
|
||||
}
|
||||
showsVerticalScrollIndicator={false}
|
||||
/>
|
||||
|
||||
{/* WebView Modal */}
|
||||
{/* WebView Modal */}
|
||||
<Modal visible={modalVisible} animationType="slide">
|
||||
<SafeAreaView
|
||||
style={{
|
||||
flex: 1,
|
||||
backgroundColor: isDark ? '#0f172a' : '#f8fafc', // modal background
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
padding: 12,
|
||||
backgroundColor: isDark ? '#1e293b' : '#f8fafc', // header background
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
{/* Back tugmasi */}
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
if (webviewRef.current) webviewRef.current.goBack();
|
||||
}}
|
||||
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
|
||||
>
|
||||
<ChevronLeft color={isDark ? '#f1f5f9' : '#0f172a'} size={24} />
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* Close tugmasi */}
|
||||
<TouchableOpacity
|
||||
onPress={() => setModalVisible(false)}
|
||||
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
|
||||
>
|
||||
<XIcon color={isDark ? '#f1f5f9' : '#0f172a'} size={24} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* WebView */}
|
||||
{webUrl && (
|
||||
<WebView
|
||||
ref={webviewRef}
|
||||
source={{ uri: webUrl }}
|
||||
style={{ flex: 1, backgroundColor: isDark ? '#0f172a' : '#f8fafc' }} // webview background
|
||||
startInLoadingState
|
||||
renderLoading={() => (
|
||||
<ActivityIndicator color="#3b82f6" size="large" style={{ flex: 1 }} />
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</SafeAreaView>
|
||||
</Modal>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const CARD_WIDTH = (SCREEN_WIDTH - 48) / 2;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
center: { flex: 1, justifyContent: 'center', alignItems: 'center' },
|
||||
card: {
|
||||
width: CARD_WIDTH,
|
||||
borderRadius: 12,
|
||||
padding: 12,
|
||||
alignItems: 'center',
|
||||
},
|
||||
logo: {
|
||||
width: 60,
|
||||
height: 60,
|
||||
marginBottom: 8,
|
||||
},
|
||||
name: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
textAlign: 'center',
|
||||
},
|
||||
darkShadow: {
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.4,
|
||||
shadowRadius: 6,
|
||||
elevation: 3,
|
||||
},
|
||||
lightShadow: {
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 4,
|
||||
elevation: 2,
|
||||
},
|
||||
});
|
||||
258
screens/e-services/ui/EServicesCategoryScreen.tsx
Normal file
258
screens/e-services/ui/EServicesCategoryScreen.tsx
Normal file
@@ -0,0 +1,258 @@
|
||||
import Express_diagnistika from '@/assets/images/Express_diagnistika.png';
|
||||
import { useTheme } from '@/components/ThemeContext';
|
||||
import { useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { Image } from 'expo-image';
|
||||
import { router } from 'expo-router';
|
||||
import { ChevronLeft, XIcon } from 'lucide-react-native';
|
||||
import React, { useRef, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { ActivityIndicator, FlatList, Modal, Text, TouchableOpacity, View } from 'react-native';
|
||||
import { RefreshControl } from 'react-native-gesture-handler';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { WebView } from 'react-native-webview';
|
||||
import { eservices_api } from '../lib/api';
|
||||
|
||||
const dark = {
|
||||
bg: '#0f172a',
|
||||
card: '#1f2937',
|
||||
border: '#1e293b',
|
||||
muted: '#334155',
|
||||
text: '#f8fafc',
|
||||
subText: '#cbd5f5',
|
||||
};
|
||||
|
||||
export default function EServicesCategoryScreen() {
|
||||
const { isDark } = useTheme();
|
||||
const { t } = useTranslation();
|
||||
const [modalVisible, setModalVisible] = useState(false);
|
||||
const webviewRef = useRef<WebView>(null);
|
||||
const [webUrl, setWebUrl] = React.useState<string | null>(null);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ['goverment_category'],
|
||||
queryFn: () => eservices_api.category(),
|
||||
});
|
||||
|
||||
const onRefresh = async () => {
|
||||
setRefreshing(true);
|
||||
try {
|
||||
await queryClient.refetchQueries({ queryKey: ['goverment_category'] });
|
||||
} finally {
|
||||
setRefreshing(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<View className="flex-1 items-center justify-center">
|
||||
<ActivityIndicator size="large" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const staticCategory = {
|
||||
id: 0,
|
||||
name: 'Express Diagnostika',
|
||||
image: Express_diagnistika,
|
||||
url: 'https://myorg.uz/ru',
|
||||
};
|
||||
|
||||
const categories = [staticCategory, ...(data?.data?.data?.results ?? [])];
|
||||
|
||||
const handlePress = (item: any) => {
|
||||
if (item.id === 0 && item.url) {
|
||||
setWebUrl(item.url);
|
||||
setModalVisible(true);
|
||||
return;
|
||||
}
|
||||
|
||||
router.push({
|
||||
pathname: '/(dashboard)/e-service/e-services-category',
|
||||
params: {
|
||||
categoryId: item.id,
|
||||
categoryName: item.name,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
flex: 1,
|
||||
backgroundColor: isDark ? dark.bg : '#f8fafc',
|
||||
padding: 16,
|
||||
}}
|
||||
>
|
||||
<FlatList
|
||||
data={categories}
|
||||
keyExtractor={(item) => `${item.id}-${item.name}`}
|
||||
contentContainerStyle={{ gap: 12 }}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={refreshing}
|
||||
onRefresh={onRefresh}
|
||||
tintColor={isDark ? '#f8fafc' : '#020617'}
|
||||
colors={['#3b82f6']}
|
||||
/>
|
||||
}
|
||||
ListHeaderComponent={() => (
|
||||
<View>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 22,
|
||||
fontWeight: '800',
|
||||
color: isDark ? dark.text : '#020617',
|
||||
}}
|
||||
>
|
||||
{t('Davlat xizmatlari kategoriyalari')}
|
||||
</Text>
|
||||
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 14,
|
||||
marginTop: 4,
|
||||
color: isDark ? dark.subText : '#64748b',
|
||||
}}
|
||||
>
|
||||
{t('Kerakli xizmat turini tanlang')}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
renderItem={({ item }) => (
|
||||
<TouchableOpacity
|
||||
activeOpacity={0.7}
|
||||
onPress={() => handlePress(item)}
|
||||
style={{
|
||||
backgroundColor: isDark ? dark.card : '#ffffff',
|
||||
padding: 14,
|
||||
borderRadius: 16,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
borderWidth: isDark ? 1 : 0,
|
||||
borderColor: isDark ? dark.border : 'transparent',
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
width: 120,
|
||||
height: 70,
|
||||
borderRadius: 12,
|
||||
backgroundColor: isDark ? dark.muted : '#e2e8f0',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginRight: 14,
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
{item.image ? (
|
||||
<Image
|
||||
source={item.image}
|
||||
style={{ width: '100%', height: '100%' }}
|
||||
contentFit="contain"
|
||||
/>
|
||||
) : (
|
||||
<Text style={{ fontWeight: '700', color: dark.text }}>{item.name[0]}</Text>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text
|
||||
numberOfLines={2}
|
||||
style={{
|
||||
fontSize: 16,
|
||||
fontWeight: item.id === 0 ? '700' : '600',
|
||||
color: isDark ? dark.text : '#020617',
|
||||
}}
|
||||
>
|
||||
{item.name}
|
||||
</Text>
|
||||
|
||||
{item.id === 0 && (
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 13,
|
||||
marginTop: 4,
|
||||
color: dark.subText,
|
||||
}}
|
||||
>
|
||||
Tezkor va qulay xizmat
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
/>
|
||||
<Modal visible={modalVisible} animationType="slide">
|
||||
<SafeAreaView
|
||||
style={{
|
||||
flex: 1,
|
||||
backgroundColor: isDark ? '#0f172a' : '#f8fafc',
|
||||
}}
|
||||
>
|
||||
{/* WebView Header */}
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 12,
|
||||
backgroundColor: isDark ? '#1e293b' : '#f8fafc',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: isDark ? '#334155' : '#e2e8f0',
|
||||
}}
|
||||
>
|
||||
<TouchableOpacity
|
||||
onPress={() => webviewRef.current?.goBack()}
|
||||
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
|
||||
>
|
||||
<ChevronLeft size={28} color={isDark ? '#f1f5f9' : '#0f172a'} />
|
||||
</TouchableOpacity>
|
||||
|
||||
<Text
|
||||
style={{
|
||||
flex: 1,
|
||||
textAlign: 'center',
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
color: isDark ? '#f1f5f9' : '#0f172a',
|
||||
}}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{webUrl}
|
||||
</Text>
|
||||
|
||||
<TouchableOpacity
|
||||
onPress={() => setModalVisible(false)}
|
||||
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
|
||||
>
|
||||
<XIcon size={28} color={isDark ? '#f1f5f9' : '#0f172a'} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* WebView */}
|
||||
{webUrl && (
|
||||
<WebView
|
||||
ref={webviewRef}
|
||||
originWhitelist={['*']}
|
||||
javaScriptEnabled
|
||||
domStorageEnabled
|
||||
onShouldStartLoadWithRequest={(request) => {
|
||||
// iOS va Android uchun barcha URLlarni WebView ichida ochish
|
||||
return true;
|
||||
}}
|
||||
source={{ uri: webUrl }}
|
||||
style={{ flex: 1, backgroundColor: isDark ? '#0f172a' : '#f8fafc' }}
|
||||
startInLoadingState
|
||||
renderLoading={() => (
|
||||
<ActivityIndicator color="#3b82f6" size="large" style={{ flex: 1 }} />
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</SafeAreaView>
|
||||
</Modal>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
313
screens/e-services/ui/EServicesScreen.tsx
Normal file
313
screens/e-services/ui/EServicesScreen.tsx
Normal file
@@ -0,0 +1,313 @@
|
||||
// EServicesScreen.tsx
|
||||
import { useTheme } from '@/components/ThemeContext';
|
||||
import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { Image } from 'expo-image';
|
||||
import { router, useLocalSearchParams } from 'expo-router';
|
||||
import { ChevronLeft, XIcon } from 'lucide-react-native';
|
||||
import React, { useCallback, useRef, useState } from 'react';
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Dimensions,
|
||||
FlatList,
|
||||
Modal,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { WebView } from 'react-native-webview';
|
||||
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { RefreshControl } from 'react-native-gesture-handler';
|
||||
import { eservices_api } from '../lib/api';
|
||||
|
||||
const { width: SCREEN_WIDTH } = Dimensions.get('window');
|
||||
const PAGE_SIZE = 10;
|
||||
|
||||
export interface GovermentServiceDataRes {
|
||||
id: number;
|
||||
name: string;
|
||||
url: string;
|
||||
logo: string;
|
||||
}
|
||||
|
||||
export default function EServicesScreen() {
|
||||
const { isDark } = useTheme();
|
||||
const [webUrl, setWebUrl] = useState<string | null>(null);
|
||||
const [modalVisible, setModalVisible] = useState(false);
|
||||
const webviewRef = useRef<WebView>(null);
|
||||
const params = useLocalSearchParams();
|
||||
const { t } = useTranslation();
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const { data, isLoading, isError, fetchNextPage, hasNextPage, isFetchingNextPage } =
|
||||
useInfiniteQuery({
|
||||
queryKey: ['goverment_service', params.categoryId],
|
||||
queryFn: async ({ pageParam = 1 }) => {
|
||||
const response = await eservices_api.list({
|
||||
page: pageParam,
|
||||
page_size: PAGE_SIZE,
|
||||
category: Number(params.categoryId),
|
||||
});
|
||||
return response.data.data;
|
||||
},
|
||||
getNextPageParam: (lastPage) =>
|
||||
lastPage.current_page < lastPage.total_pages ? lastPage.current_page + 1 : undefined,
|
||||
initialPageParam: 1,
|
||||
});
|
||||
|
||||
const services: GovermentServiceDataRes[] = data?.pages.flatMap((p) => p.results) ?? [];
|
||||
|
||||
const onRefresh = async () => {
|
||||
setRefreshing(true);
|
||||
try {
|
||||
await queryClient.refetchQueries({ queryKey: ['goverment_service'] });
|
||||
} finally {
|
||||
setRefreshing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const openWebView = (url: string) => {
|
||||
setWebUrl(url);
|
||||
setModalVisible(true);
|
||||
};
|
||||
|
||||
const renderItem = useCallback(
|
||||
({ item }: { item: GovermentServiceDataRes }) => (
|
||||
<View style={{ alignItems: 'center', marginTop: 12, width: CARD_WIDTH }}>
|
||||
{/* Logo (bosilganda WebView ochiladi) */}
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.card,
|
||||
{ backgroundColor: isDark ? '#1e293b' : '#f8fafc' },
|
||||
isDark ? styles.darkShadow : styles.lightShadow,
|
||||
]}
|
||||
onPress={() => openWebView(item.url)}
|
||||
>
|
||||
<Image source={{ uri: item.logo }} style={styles.logo} resizeMode="contain" />
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* Name (alog‘ifa, faqat ko‘rsatish) */}
|
||||
<Text
|
||||
style={[
|
||||
styles.name,
|
||||
{ color: isDark ? '#f1f5f9' : '#0f172a', marginTop: 4, paddingHorizontal: 5 },
|
||||
]}
|
||||
>
|
||||
{item.name}
|
||||
</Text>
|
||||
</View>
|
||||
),
|
||||
[isDark]
|
||||
);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<View style={[styles.center, { backgroundColor: isDark ? '#0f172a' : '#f8fafc' }]}>
|
||||
<ActivityIndicator size="large" color="#3b82f6" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
if (isError) {
|
||||
return (
|
||||
<View style={[styles.center, { backgroundColor: isDark ? '#0f172a' : '#f8fafc' }]}>
|
||||
<Text style={{ color: 'red' }}>Xatolik yuz berdi</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1, backgroundColor: isDark ? '#0f172a' : '#f8fafc' }}>
|
||||
{/* Header */}
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 16,
|
||||
gap: 10,
|
||||
paddingVertical: 12,
|
||||
backgroundColor: isDark ? '#1e293b' : '#f8fafc',
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: isDark ? '#334155' : '#e2e8f0',
|
||||
}}
|
||||
>
|
||||
<TouchableOpacity
|
||||
onPress={() => router.back()}
|
||||
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
|
||||
>
|
||||
<ChevronLeft size={28} color={isDark ? '#f1f5f9' : '#0f172a'} />
|
||||
</TouchableOpacity>
|
||||
|
||||
<Text
|
||||
style={{
|
||||
flex: 1,
|
||||
fontSize: 18,
|
||||
fontWeight: '600',
|
||||
color: isDark ? '#f1f5f9' : '#0f172a',
|
||||
}}
|
||||
>
|
||||
{params.categoryName}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Empty / List */}
|
||||
{services.length === 0 && !isLoading ? (
|
||||
<View style={[styles.center, { flex: 1, padding: 16, gap: 5 }]}>
|
||||
<Text
|
||||
style={{
|
||||
color: isDark ? '#f1f5f9' : '#0f172a',
|
||||
fontSize: 18,
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
{t("Bu kategoriya bo'yicha xizmat topilmadi")}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
color: isDark ? '#f1f5f9' : '#0f172a',
|
||||
fontSize: 16,
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
{t("Tez orada xizmat qo'shiladi")}
|
||||
</Text>
|
||||
</View>
|
||||
) : (
|
||||
<FlatList
|
||||
data={services}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={refreshing}
|
||||
onRefresh={onRefresh}
|
||||
tintColor={isDark ? '#f8fafc' : '#020617'}
|
||||
colors={['#3b82f6']}
|
||||
/>
|
||||
}
|
||||
keyExtractor={(item) => item.id.toString()}
|
||||
renderItem={renderItem}
|
||||
numColumns={3}
|
||||
columnWrapperStyle={{ justifyContent: 'space-between', marginBottom: 12 }}
|
||||
contentContainerStyle={{ padding: 16, paddingBottom: 32 }}
|
||||
onEndReached={() => hasNextPage && fetchNextPage()}
|
||||
onEndReachedThreshold={0.4}
|
||||
ListFooterComponent={
|
||||
isFetchingNextPage ? (
|
||||
<ActivityIndicator color="#3b82f6" size="large" style={{ marginVertical: 20 }} />
|
||||
) : null
|
||||
}
|
||||
showsVerticalScrollIndicator={false}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* WebView Modal */}
|
||||
<Modal visible={modalVisible} animationType="slide">
|
||||
<SafeAreaView
|
||||
style={{
|
||||
flex: 1,
|
||||
backgroundColor: isDark ? '#0f172a' : '#f8fafc',
|
||||
}}
|
||||
>
|
||||
{/* WebView Header */}
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 12,
|
||||
backgroundColor: isDark ? '#1e293b' : '#f8fafc',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: isDark ? '#334155' : '#e2e8f0',
|
||||
}}
|
||||
>
|
||||
<TouchableOpacity
|
||||
onPress={() => webviewRef.current?.goBack()}
|
||||
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
|
||||
>
|
||||
<ChevronLeft size={28} color={isDark ? '#f1f5f9' : '#0f172a'} />
|
||||
</TouchableOpacity>
|
||||
|
||||
<Text
|
||||
style={{
|
||||
flex: 1,
|
||||
textAlign: 'center',
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
color: isDark ? '#f1f5f9' : '#0f172a',
|
||||
}}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{webUrl}
|
||||
</Text>
|
||||
|
||||
<TouchableOpacity
|
||||
onPress={() => setModalVisible(false)}
|
||||
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
|
||||
>
|
||||
<XIcon size={28} color={isDark ? '#f1f5f9' : '#0f172a'} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* WebView */}
|
||||
{webUrl && (
|
||||
<WebView
|
||||
ref={webviewRef}
|
||||
originWhitelist={['*']}
|
||||
javaScriptEnabled
|
||||
domStorageEnabled
|
||||
onShouldStartLoadWithRequest={(request) => {
|
||||
// iOS va Android uchun barcha URLlarni WebView ichida ochish
|
||||
return true;
|
||||
}}
|
||||
source={{ uri: webUrl }}
|
||||
style={{ flex: 1, backgroundColor: isDark ? '#0f172a' : '#f8fafc' }}
|
||||
startInLoadingState
|
||||
renderLoading={() => (
|
||||
<ActivityIndicator color="#3b82f6" size="large" style={{ flex: 1 }} />
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</SafeAreaView>
|
||||
</Modal>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const CARD_WIDTH = (SCREEN_WIDTH - 50) / 3;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
center: { flex: 1, justifyContent: 'center', alignItems: 'center' },
|
||||
card: {
|
||||
width: CARD_WIDTH,
|
||||
borderRadius: 12,
|
||||
padding: 12,
|
||||
alignItems: 'center',
|
||||
},
|
||||
logo: {
|
||||
width: 80,
|
||||
height: 80,
|
||||
marginBottom: 8,
|
||||
},
|
||||
name: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
textAlign: 'center',
|
||||
},
|
||||
darkShadow: {
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.4,
|
||||
shadowRadius: 6,
|
||||
elevation: 3,
|
||||
},
|
||||
lightShadow: {
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 4,
|
||||
elevation: 2,
|
||||
},
|
||||
});
|
||||
658
screens/e-services/ui/SearchResultsScreen.tsx
Normal file
658
screens/e-services/ui/SearchResultsScreen.tsx
Normal file
@@ -0,0 +1,658 @@
|
||||
// SearchResultsScreen.tsx
|
||||
import { useTheme } from '@/components/ThemeContext';
|
||||
import {
|
||||
Award,
|
||||
Building2,
|
||||
Calendar,
|
||||
ChevronLeft,
|
||||
DollarSign,
|
||||
Info,
|
||||
Mail,
|
||||
MapPin,
|
||||
Phone,
|
||||
User,
|
||||
} from 'lucide-react-native';
|
||||
import React, { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { FlatList, Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
|
||||
type TabType = 'entity' | 'entrepreneur' | 'trademark';
|
||||
|
||||
interface SearchResult {
|
||||
entity: any;
|
||||
entrepreneur: any;
|
||||
trademark: any;
|
||||
}
|
||||
|
||||
interface SearchResultsScreenProps {
|
||||
searchData: SearchResult;
|
||||
onBack: () => void;
|
||||
}
|
||||
|
||||
export default function SearchResultsScreen({ searchData, onBack }: SearchResultsScreenProps) {
|
||||
const { isDark } = useTheme();
|
||||
const { t } = useTranslation();
|
||||
const [activeTab, setActiveTab] = useState<TabType>('entity');
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
key: 'entity' as TabType,
|
||||
label: 'Korxonalar',
|
||||
icon: Building2,
|
||||
count:
|
||||
searchData.entity.name.total +
|
||||
searchData.entity.director.total +
|
||||
searchData.entity.founder.total,
|
||||
},
|
||||
{
|
||||
key: 'entrepreneur' as TabType,
|
||||
label: 'Tadbirkorlar',
|
||||
icon: User,
|
||||
count: searchData.entrepreneur.total,
|
||||
},
|
||||
{
|
||||
key: 'trademark' as TabType,
|
||||
label: 'Tovar belgilari',
|
||||
icon: Award,
|
||||
count: searchData.trademark.total,
|
||||
},
|
||||
];
|
||||
|
||||
const renderTabs = () => (
|
||||
<View style={styles.tabsContainer}>
|
||||
{tabs.map((tab) => {
|
||||
const Icon = tab.icon;
|
||||
const isActive = activeTab === tab.key;
|
||||
return (
|
||||
<TouchableOpacity
|
||||
key={tab.key}
|
||||
style={[
|
||||
styles.tab,
|
||||
isActive && styles.activeTab,
|
||||
{
|
||||
backgroundColor: isActive
|
||||
? isDark
|
||||
? '#3b82f6'
|
||||
: '#3b82f6'
|
||||
: isDark
|
||||
? '#1e293b'
|
||||
: '#f1f5f9',
|
||||
},
|
||||
]}
|
||||
onPress={() => setActiveTab(tab.key)}
|
||||
>
|
||||
<Icon size={18} color={isActive ? '#ffffff' : isDark ? '#94a3b8' : '#64748b'} />
|
||||
<Text
|
||||
style={[
|
||||
styles.tabText,
|
||||
{ color: isActive ? '#ffffff' : isDark ? '#94a3b8' : '#64748b' },
|
||||
]}
|
||||
>
|
||||
{tab.label}
|
||||
</Text>
|
||||
{tab.count > 0 && (
|
||||
<View style={[styles.badge, { backgroundColor: isActive ? '#60a5fa' : '#3b82f6' }]}>
|
||||
<Text style={styles.badgeText}>{tab.count > 9999 ? '9999+' : tab.count}</Text>
|
||||
</View>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
);
|
||||
|
||||
const renderEntityCard = (item: any, variant: string) => (
|
||||
<View
|
||||
style={[
|
||||
styles.card,
|
||||
{
|
||||
backgroundColor: isDark ? '#1e293b' : '#ffffff',
|
||||
borderColor: isDark ? '#334155' : '#e2e8f0',
|
||||
},
|
||||
]}
|
||||
>
|
||||
{/* Header */}
|
||||
<View style={styles.cardHeader}>
|
||||
<View
|
||||
style={[
|
||||
styles.statusBadge,
|
||||
{ backgroundColor: item.activity_state === 1 ? '#22c55e' : '#ef4444' },
|
||||
]}
|
||||
>
|
||||
<Text style={styles.statusText}>{item.activity_state === 1 ? 'Faol' : 'Faol emas'}</Text>
|
||||
</View>
|
||||
{variant && (
|
||||
<View style={[styles.variantBadge, { backgroundColor: isDark ? '#334155' : '#f1f5f9' }]}>
|
||||
<Text style={[styles.variantText, { color: isDark ? '#94a3b8' : '#64748b' }]}>
|
||||
{variant === 'director' ? 'Direktor' : variant === 'founder' ? "Ta'sischi" : 'Nomi'}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* Company Name */}
|
||||
<Text style={[styles.cardTitle, { color: isDark ? '#f1f5f9' : '#0f172a' }]}>{item.name}</Text>
|
||||
|
||||
{/* INN */}
|
||||
<View style={styles.infoRow}>
|
||||
<Info size={16} color={isDark ? '#94a3b8' : '#64748b'} />
|
||||
<Text style={[styles.infoLabel, { color: isDark ? '#94a3b8' : '#64748b' }]}>INN:</Text>
|
||||
<Text style={[styles.infoValue, { color: isDark ? '#f1f5f9' : '#0f172a' }]}>
|
||||
{item.inn}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Director */}
|
||||
{item.director && (
|
||||
<View style={styles.infoRow}>
|
||||
<User size={16} color={isDark ? '#94a3b8' : '#64748b'} />
|
||||
<Text style={[styles.infoLabel, { color: isDark ? '#94a3b8' : '#64748b' }]}>
|
||||
Direktor:
|
||||
</Text>
|
||||
<Text style={[styles.infoValue, { color: isDark ? '#f1f5f9' : '#0f172a' }]}>
|
||||
{item.director}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Address */}
|
||||
{item.address && (
|
||||
<View style={styles.infoRow}>
|
||||
<MapPin size={16} color={isDark ? '#94a3b8' : '#64748b'} />
|
||||
<Text style={[styles.infoLabel, { color: isDark ? '#94a3b8' : '#64748b' }]}>Manzil:</Text>
|
||||
<Text
|
||||
style={[styles.infoValue, { color: isDark ? '#f1f5f9' : '#0f172a' }]}
|
||||
numberOfLines={2}
|
||||
>
|
||||
{item.address}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Registration Date */}
|
||||
{item.registration_date && (
|
||||
<View style={styles.infoRow}>
|
||||
<Calendar size={16} color={isDark ? '#94a3b8' : '#64748b'} />
|
||||
<Text style={[styles.infoLabel, { color: isDark ? '#94a3b8' : '#64748b' }]}>
|
||||
Ro'yxatga olingan:
|
||||
</Text>
|
||||
<Text style={[styles.infoValue, { color: isDark ? '#f1f5f9' : '#0f172a' }]}>
|
||||
{new Date(item.registration_date).toLocaleDateString('uz-UZ')}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Activity */}
|
||||
<View style={[styles.activityBox, { backgroundColor: isDark ? '#0f172a' : '#f8fafc' }]}>
|
||||
<Text style={[styles.activityCode, { color: isDark ? '#60a5fa' : '#3b82f6' }]}>
|
||||
{item.oked_code}
|
||||
</Text>
|
||||
<Text style={[styles.activityName, { color: isDark ? '#cbd5e1' : '#475569' }]}>
|
||||
{item.oked_name}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Contact Info */}
|
||||
<View style={styles.contactRow}>
|
||||
{item.email && (
|
||||
<View style={styles.contactItem}>
|
||||
<Mail size={14} color={isDark ? '#94a3b8' : '#64748b'} />
|
||||
<Text style={[styles.contactText, { color: isDark ? '#94a3b8' : '#64748b' }]}>
|
||||
{item.email}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
{item.phones?.length > 0 && (
|
||||
<View style={styles.contactItem}>
|
||||
<Phone size={14} color={isDark ? '#94a3b8' : '#64748b'} />
|
||||
<Text style={[styles.contactText, { color: isDark ? '#94a3b8' : '#64748b' }]}>
|
||||
{item.phones[0]}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* Statutory Fund */}
|
||||
{item.statutory_fund && (
|
||||
<View style={styles.fundRow}>
|
||||
<DollarSign size={16} color={isDark ? '#94a3b8' : '#64748b'} />
|
||||
<Text style={[styles.fundLabel, { color: isDark ? '#94a3b8' : '#64748b' }]}>
|
||||
Ustav fondi:
|
||||
</Text>
|
||||
<Text style={[styles.fundValue, { color: isDark ? '#22c55e' : '#16a34a' }]}>
|
||||
{parseFloat(item.statutory_fund).toLocaleString('uz-UZ')} so'm
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
|
||||
const renderEntrepreneurCard = (item: any) => (
|
||||
<View
|
||||
style={[
|
||||
styles.card,
|
||||
{
|
||||
backgroundColor: isDark ? '#1e293b' : '#ffffff',
|
||||
borderColor: isDark ? '#334155' : '#e2e8f0',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<View style={styles.entrepreneurHeader}>
|
||||
<View style={[styles.avatarCircle, { backgroundColor: isDark ? '#334155' : '#e2e8f0' }]}>
|
||||
<User size={32} color={isDark ? '#94a3b8' : '#64748b'} />
|
||||
</View>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={[styles.entrepreneurName, { color: isDark ? '#f1f5f9' : '#0f172a' }]}>
|
||||
{item.entrepreneur}
|
||||
</Text>
|
||||
<Text style={[styles.pinfl, { color: isDark ? '#94a3b8' : '#64748b' }]}>
|
||||
PINFL: {item.pinfl}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{item.registration_date && (
|
||||
<View style={styles.infoRow}>
|
||||
<Calendar size={16} color={isDark ? '#94a3b8' : '#64748b'} />
|
||||
<Text style={[styles.infoLabel, { color: isDark ? '#94a3b8' : '#64748b' }]}>
|
||||
Ro'yxatga olingan:
|
||||
</Text>
|
||||
<Text style={[styles.infoValue, { color: isDark ? '#f1f5f9' : '#0f172a' }]}>
|
||||
{new Date(item.registration_date).toLocaleDateString('uz-UZ')}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{item.email && (
|
||||
<View style={styles.contactItem}>
|
||||
<Mail size={14} color={isDark ? '#94a3b8' : '#64748b'} />
|
||||
<Text style={[styles.contactText, { color: isDark ? '#94a3b8' : '#64748b' }]}>
|
||||
{item.email}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{item.phone && (
|
||||
<View style={styles.contactItem}>
|
||||
<Phone size={14} color={isDark ? '#94a3b8' : '#64748b'} />
|
||||
<Text style={[styles.contactText, { color: isDark ? '#94a3b8' : '#64748b' }]}>
|
||||
{item.phone}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
|
||||
const renderTrademarkCard = (item: any) => (
|
||||
<View
|
||||
style={[
|
||||
styles.card,
|
||||
{
|
||||
backgroundColor: isDark ? '#1e293b' : '#ffffff',
|
||||
borderColor: isDark ? '#334155' : '#e2e8f0',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<View style={styles.trademarkHeader}>
|
||||
{item.logo && (
|
||||
<Image source={{ uri: item.logo }} style={styles.trademarkLogo} resizeMode="contain" />
|
||||
)}
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={[styles.trademarkName, { color: isDark ? '#f1f5f9' : '#0f172a' }]}>
|
||||
{item.transliteration}
|
||||
</Text>
|
||||
<View
|
||||
style={[
|
||||
styles.statusBadge,
|
||||
{
|
||||
backgroundColor:
|
||||
item.status_name === 'COMPLETED'
|
||||
? '#22c55e'
|
||||
: item.status_name === 'WAITING'
|
||||
? '#f59e0b'
|
||||
: '#ef4444',
|
||||
alignSelf: 'flex-start',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Text style={styles.statusText}>{item.status_name}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.infoRow}>
|
||||
<User size={16} color={isDark ? '#94a3b8' : '#64748b'} />
|
||||
<Text style={[styles.infoLabel, { color: isDark ? '#94a3b8' : '#64748b' }]}>
|
||||
Ariza beruvchi:
|
||||
</Text>
|
||||
<Text style={[styles.infoValue, { color: isDark ? '#f1f5f9' : '#0f172a' }]}>
|
||||
{item.applicant}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{item.registration_date && (
|
||||
<View style={styles.infoRow}>
|
||||
<Calendar size={16} color={isDark ? '#94a3b8' : '#64748b'} />
|
||||
<Text style={[styles.infoLabel, { color: isDark ? '#94a3b8' : '#64748b' }]}>
|
||||
Ro'yxatga olingan:
|
||||
</Text>
|
||||
<Text style={[styles.infoValue, { color: isDark ? '#f1f5f9' : '#0f172a' }]}>
|
||||
{new Date(item.registration_date).toLocaleDateString('uz-UZ')}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{item.relevance_date && (
|
||||
<View style={styles.infoRow}>
|
||||
<Calendar size={16} color={isDark ? '#94a3b8' : '#64748b'} />
|
||||
<Text style={[styles.infoLabel, { color: isDark ? '#94a3b8' : '#64748b' }]}>
|
||||
Amal qilish muddati:
|
||||
</Text>
|
||||
<Text style={[styles.infoValue, { color: isDark ? '#f1f5f9' : '#0f172a' }]}>
|
||||
{new Date(item.relevance_date).toLocaleDateString('uz-UZ')}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
|
||||
const renderContent = () => {
|
||||
switch (activeTab) {
|
||||
case 'entity':
|
||||
const allEntities = [
|
||||
...searchData.entity.name.rows.map((r: any) => ({ ...r, variant: 'name' })),
|
||||
...searchData.entity.director.rows.map((r: any) => ({ ...r, variant: 'director' })),
|
||||
...searchData.entity.founder.rows.map((r: any) => ({ ...r, variant: 'founder' })),
|
||||
];
|
||||
|
||||
return (
|
||||
<FlatList
|
||||
data={allEntities}
|
||||
keyExtractor={(item, index) => `entity-${item.id}-${index}`}
|
||||
renderItem={({ item }) => renderEntityCard(item, item.variant)}
|
||||
contentContainerStyle={styles.listContent}
|
||||
showsVerticalScrollIndicator={false}
|
||||
ListEmptyComponent={
|
||||
<View style={styles.emptyState}>
|
||||
<Building2 size={48} color={isDark ? '#475569' : '#94a3b8'} />
|
||||
<Text style={[styles.emptyText, { color: isDark ? '#94a3b8' : '#64748b' }]}>
|
||||
Korxonalar topilmadi
|
||||
</Text>
|
||||
</View>
|
||||
}
|
||||
/>
|
||||
);
|
||||
|
||||
case 'entrepreneur':
|
||||
return (
|
||||
<FlatList
|
||||
data={searchData.entrepreneur.rows}
|
||||
keyExtractor={(item) => `entrepreneur-${item.id}`}
|
||||
renderItem={({ item }) => renderEntrepreneurCard(item)}
|
||||
contentContainerStyle={styles.listContent}
|
||||
showsVerticalScrollIndicator={false}
|
||||
ListEmptyComponent={
|
||||
<View style={styles.emptyState}>
|
||||
<User size={48} color={isDark ? '#475569' : '#94a3b8'} />
|
||||
<Text style={[styles.emptyText, { color: isDark ? '#94a3b8' : '#64748b' }]}>
|
||||
Tadbirkorlar topilmadi
|
||||
</Text>
|
||||
</View>
|
||||
}
|
||||
/>
|
||||
);
|
||||
|
||||
case 'trademark':
|
||||
return (
|
||||
<FlatList
|
||||
data={searchData.trademark.rows}
|
||||
keyExtractor={(item) => `trademark-${item.id}`}
|
||||
renderItem={({ item }) => renderTrademarkCard(item)}
|
||||
contentContainerStyle={styles.listContent}
|
||||
showsVerticalScrollIndicator={false}
|
||||
ListEmptyComponent={
|
||||
<View style={styles.emptyState}>
|
||||
<Award size={48} color={isDark ? '#475569' : '#94a3b8'} />
|
||||
<Text style={[styles.emptyText, { color: isDark ? '#94a3b8' : '#64748b' }]}>
|
||||
Tovar belgilari topilmadi
|
||||
</Text>
|
||||
</View>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<SafeAreaView style={[styles.container, { backgroundColor: isDark ? '#0f172a' : '#f8fafc' }]}>
|
||||
{/* Header */}
|
||||
<View style={styles.header}>
|
||||
<TouchableOpacity onPress={onBack} style={styles.backButton}>
|
||||
<ChevronLeft size={24} color={isDark ? '#f1f5f9' : '#0f172a'} />
|
||||
</TouchableOpacity>
|
||||
<Text style={[styles.headerTitle, { color: isDark ? '#f1f5f9' : '#0f172a' }]}>
|
||||
Qidiruv natijalari
|
||||
</Text>
|
||||
<View style={{ width: 24 }} />
|
||||
</View>
|
||||
|
||||
{/* Tabs */}
|
||||
{renderTabs()}
|
||||
|
||||
{/* Content */}
|
||||
{renderContent()}
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 12,
|
||||
},
|
||||
backButton: {
|
||||
padding: 4,
|
||||
},
|
||||
headerTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: '700',
|
||||
},
|
||||
tabsContainer: {
|
||||
flexDirection: 'row',
|
||||
paddingHorizontal: 16,
|
||||
gap: 8,
|
||||
marginBottom: 16,
|
||||
},
|
||||
tab: {
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 8,
|
||||
borderRadius: 12,
|
||||
gap: 6,
|
||||
},
|
||||
activeTab: {
|
||||
shadowColor: '#3b82f6',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 4,
|
||||
elevation: 3,
|
||||
},
|
||||
tabText: {
|
||||
fontSize: 13,
|
||||
fontWeight: '600',
|
||||
},
|
||||
badge: {
|
||||
paddingHorizontal: 6,
|
||||
paddingVertical: 2,
|
||||
borderRadius: 10,
|
||||
minWidth: 20,
|
||||
alignItems: 'center',
|
||||
},
|
||||
badgeText: {
|
||||
color: '#ffffff',
|
||||
fontSize: 10,
|
||||
fontWeight: '700',
|
||||
},
|
||||
listContent: {
|
||||
paddingHorizontal: 16,
|
||||
paddingBottom: 24,
|
||||
},
|
||||
card: {
|
||||
borderRadius: 16,
|
||||
padding: 16,
|
||||
marginBottom: 12,
|
||||
borderWidth: 1,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 4,
|
||||
elevation: 2,
|
||||
},
|
||||
cardHeader: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: 12,
|
||||
},
|
||||
statusBadge: {
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 8,
|
||||
},
|
||||
statusText: {
|
||||
color: '#ffffff',
|
||||
fontSize: 12,
|
||||
fontWeight: '600',
|
||||
},
|
||||
variantBadge: {
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 8,
|
||||
},
|
||||
variantText: {
|
||||
fontSize: 12,
|
||||
fontWeight: '600',
|
||||
},
|
||||
cardTitle: {
|
||||
fontSize: 16,
|
||||
fontWeight: '700',
|
||||
marginBottom: 12,
|
||||
},
|
||||
infoRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
marginBottom: 8,
|
||||
},
|
||||
infoLabel: {
|
||||
fontSize: 13,
|
||||
fontWeight: '500',
|
||||
},
|
||||
infoValue: {
|
||||
fontSize: 13,
|
||||
fontWeight: '600',
|
||||
flex: 1,
|
||||
},
|
||||
activityBox: {
|
||||
padding: 12,
|
||||
borderRadius: 8,
|
||||
marginTop: 8,
|
||||
marginBottom: 8,
|
||||
},
|
||||
activityCode: {
|
||||
fontSize: 14,
|
||||
fontWeight: '700',
|
||||
marginBottom: 4,
|
||||
},
|
||||
activityName: {
|
||||
fontSize: 12,
|
||||
lineHeight: 18,
|
||||
},
|
||||
contactRow: {
|
||||
gap: 8,
|
||||
marginTop: 8,
|
||||
},
|
||||
contactItem: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 6,
|
||||
},
|
||||
contactText: {
|
||||
fontSize: 12,
|
||||
},
|
||||
fundRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
marginTop: 12,
|
||||
paddingTop: 12,
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: '#334155',
|
||||
},
|
||||
fundLabel: {
|
||||
fontSize: 13,
|
||||
fontWeight: '500',
|
||||
},
|
||||
fundValue: {
|
||||
fontSize: 14,
|
||||
fontWeight: '700',
|
||||
},
|
||||
entrepreneurHeader: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 12,
|
||||
marginBottom: 16,
|
||||
},
|
||||
avatarCircle: {
|
||||
width: 56,
|
||||
height: 56,
|
||||
borderRadius: 28,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
entrepreneurName: {
|
||||
fontSize: 16,
|
||||
fontWeight: '700',
|
||||
marginBottom: 4,
|
||||
},
|
||||
pinfl: {
|
||||
fontSize: 12,
|
||||
fontWeight: '500',
|
||||
},
|
||||
trademarkHeader: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 12,
|
||||
marginBottom: 16,
|
||||
},
|
||||
trademarkLogo: {
|
||||
width: 64,
|
||||
height: 64,
|
||||
borderRadius: 8,
|
||||
},
|
||||
trademarkName: {
|
||||
fontSize: 15,
|
||||
fontWeight: '700',
|
||||
marginBottom: 8,
|
||||
},
|
||||
emptyState: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingVertical: 60,
|
||||
},
|
||||
emptyText: {
|
||||
fontSize: 16,
|
||||
fontWeight: '500',
|
||||
marginTop: 12,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user