government ui complated
This commit is contained in:
Samandar Turgunboyev
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user