fitst commit
This commit is contained in:
Samandar Turgunboyev
80
screens/profile/lib/ProfileDataContext.tsx
Normal file
80
screens/profile/lib/ProfileDataContext.tsx
Normal file
@@ -0,0 +1,80 @@
|
||||
import createContextHook from '@nkzw/create-context-hook';
|
||||
import { useState } from 'react';
|
||||
import { Announcement, Bonus, Employee, ProductService } from './type';
|
||||
|
||||
export const [ProfileDataProvider, useProfileData] = createContextHook(() => {
|
||||
const [employees, setEmployees] = useState<Employee[]>([
|
||||
{
|
||||
id: '1',
|
||||
firstName: 'Aziz',
|
||||
lastName: 'Rahimov',
|
||||
phoneNumber: '+998901234567',
|
||||
addedAt: new Date().toISOString(),
|
||||
},
|
||||
]);
|
||||
|
||||
const [announcements] = useState<Announcement[]>([
|
||||
{
|
||||
id: '1',
|
||||
name: "Yangi loyiha bo'yicha hamkorlik",
|
||||
companyTypes: ['IT', 'Qurilish'],
|
||||
totalAmount: 5000000,
|
||||
paymentStatus: 'paid',
|
||||
createdAt: new Date().toISOString(),
|
||||
},
|
||||
]);
|
||||
|
||||
const [bonuses] = useState<Bonus[]>([
|
||||
{
|
||||
id: '1',
|
||||
title: 'Yillik bonus',
|
||||
description: "Yil davomida ko'rsatilgan yuqori natijalarga oid bonus",
|
||||
percentage: 15,
|
||||
bonusAmount: 3000000,
|
||||
createdAt: new Date().toISOString(),
|
||||
},
|
||||
]);
|
||||
|
||||
const [productServices, setProductServices] = useState<ProductService[]>([]);
|
||||
|
||||
const addEmployee = (employee: Omit<Employee, 'id' | 'addedAt'>) => {
|
||||
setEmployees((prev) => [
|
||||
...prev,
|
||||
{
|
||||
...employee,
|
||||
id: Date.now().toString(),
|
||||
addedAt: new Date().toISOString(),
|
||||
},
|
||||
]);
|
||||
};
|
||||
|
||||
const removeEmployee = (id: string) => {
|
||||
setEmployees((prev) => prev.filter((e) => e.id !== id));
|
||||
};
|
||||
|
||||
const updateEmployee = (id: string, data: Partial<Employee>) => {
|
||||
setEmployees((prev) => prev.map((e) => (e.id === id ? { ...e, ...data } : e)));
|
||||
};
|
||||
|
||||
const addProductService = (service: Omit<ProductService, 'id' | 'createdAt'>) => {
|
||||
setProductServices((prev) => [
|
||||
...prev,
|
||||
{
|
||||
...service,
|
||||
id: Date.now().toString(),
|
||||
createdAt: new Date().toISOString(),
|
||||
},
|
||||
]);
|
||||
};
|
||||
|
||||
return {
|
||||
employees,
|
||||
addEmployee,
|
||||
removeEmployee,
|
||||
updateEmployee,
|
||||
announcements,
|
||||
bonuses,
|
||||
productServices,
|
||||
addProductService,
|
||||
};
|
||||
});
|
||||
108
screens/profile/lib/api.ts
Normal file
108
screens/profile/lib/api.ts
Normal file
@@ -0,0 +1,108 @@
|
||||
import httpClient from '@/api/httpClient';
|
||||
import { API_URLS } from '@/api/URLs';
|
||||
import { ProductBody, ProductResponse } from '@/screens/home/lib/types';
|
||||
import { AxiosResponse } from 'axios';
|
||||
import {
|
||||
ExployeesResponse,
|
||||
MyAdsData,
|
||||
MyAdsDataRes,
|
||||
MyBonusesData,
|
||||
UserInfoResponseData,
|
||||
} from './type';
|
||||
|
||||
export const user_api = {
|
||||
async getMe(): Promise<AxiosResponse<UserInfoResponseData>> {
|
||||
const res = await httpClient.get(API_URLS.Get_Me);
|
||||
return res;
|
||||
},
|
||||
|
||||
async updateMe(body: {
|
||||
first_name: string;
|
||||
industries: {
|
||||
id: number;
|
||||
name: string;
|
||||
code: string;
|
||||
external_id: null | number;
|
||||
level: number;
|
||||
is_leaf: boolean;
|
||||
icon_name: null | string;
|
||||
parent: {
|
||||
id: number;
|
||||
name: string;
|
||||
code: string;
|
||||
};
|
||||
}[];
|
||||
person_type: 'employee' | 'legal_entity' | 'ytt' | 'band';
|
||||
phone: string;
|
||||
activate_types: number[];
|
||||
}) {
|
||||
const res = await httpClient.patch(API_URLS.User_Update, body);
|
||||
return res;
|
||||
},
|
||||
|
||||
async employess(params: {
|
||||
page: number;
|
||||
page_size: number;
|
||||
}): Promise<AxiosResponse<ExployeesResponse>> {
|
||||
const res = await httpClient.get(API_URLS.Employee_List, { params });
|
||||
return res;
|
||||
},
|
||||
|
||||
async create_employee(body: { first_name: string; last_name: string; phone: string }) {
|
||||
const res = await httpClient.post(API_URLS.Employee_List, body);
|
||||
return res;
|
||||
},
|
||||
|
||||
async my_ads(params: { page: number; page_size: number }): Promise<AxiosResponse<MyAdsData>> {
|
||||
const res = await httpClient.get(API_URLS.My_Ads, { params });
|
||||
return res;
|
||||
},
|
||||
|
||||
async my_ads_detail(id: number): Promise<AxiosResponse<{ status: boolean; data: MyAdsDataRes }>> {
|
||||
const res = await httpClient.get(API_URLS.My_Ads_Detail(id));
|
||||
return res;
|
||||
},
|
||||
|
||||
async my_bonuses(params: {
|
||||
page: number;
|
||||
page_size: number;
|
||||
}): Promise<AxiosResponse<MyBonusesData>> {
|
||||
const res = await httpClient.get(API_URLS.My_Bonuses, { params });
|
||||
return res;
|
||||
},
|
||||
|
||||
async my_sevices(params: {
|
||||
page: number;
|
||||
page_size: number;
|
||||
my: boolean;
|
||||
}): Promise<AxiosResponse<ProductBody>> {
|
||||
const res = await httpClient.get(API_URLS.Get_Products, { params });
|
||||
return res;
|
||||
},
|
||||
|
||||
async add_service(body: FormData) {
|
||||
const res = await httpClient.post(API_URLS.Get_Products, body, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
});
|
||||
return res;
|
||||
},
|
||||
|
||||
async update_service({ body, id }: { body: FormData; id: number }) {
|
||||
const res = await httpClient.patch(API_URLS.Detail_Products(id), body, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
});
|
||||
return res;
|
||||
},
|
||||
|
||||
async delete_service(id: number) {
|
||||
const res = await httpClient.delete(API_URLS.Delete_Products(id));
|
||||
return res;
|
||||
},
|
||||
|
||||
async detail_service(
|
||||
id: number
|
||||
): Promise<AxiosResponse<{ status: boolean; data: ProductResponse }>> {
|
||||
const res = await httpClient.get(API_URLS.Detail_Products(id));
|
||||
return res;
|
||||
},
|
||||
};
|
||||
168
screens/profile/lib/type.ts
Normal file
168
screens/profile/lib/type.ts
Normal file
@@ -0,0 +1,168 @@
|
||||
export interface Employee {
|
||||
id: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
phoneNumber: string;
|
||||
addedAt: string;
|
||||
}
|
||||
|
||||
export interface Announcement {
|
||||
id: string;
|
||||
name: string;
|
||||
companyTypes: string[];
|
||||
totalAmount: number;
|
||||
paymentStatus: 'paid' | 'pending' | 'failed';
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export interface Bonus {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
percentage: number;
|
||||
bonusAmount: number;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export interface ProductService {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
mediaUrl: string;
|
||||
mediaType: 'image' | 'video';
|
||||
categories: string[];
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export interface UserInfoResponseData {
|
||||
status: boolean;
|
||||
data: {
|
||||
id: number;
|
||||
activate_types: {
|
||||
id: number;
|
||||
name: string;
|
||||
code: string;
|
||||
external_id: null | number;
|
||||
level: number;
|
||||
is_leaf: boolean;
|
||||
icon_name: null | string;
|
||||
parent: {
|
||||
id: number;
|
||||
name: string;
|
||||
code: string;
|
||||
};
|
||||
}[];
|
||||
|
||||
last_login: null | string;
|
||||
is_superuser: boolean;
|
||||
is_staff: boolean;
|
||||
is_active: boolean;
|
||||
date_joined: string;
|
||||
first_name: string;
|
||||
last_name: null | string;
|
||||
email: null | string;
|
||||
phone: string;
|
||||
username: string;
|
||||
validated_at: string;
|
||||
company_name: string;
|
||||
stir: string;
|
||||
director_full_name: string;
|
||||
referral: null | string;
|
||||
referral_amount: number;
|
||||
referral_share: number;
|
||||
telegram_id: null | string;
|
||||
can_create_referral: boolean;
|
||||
role: string;
|
||||
person_type: 'employee' | 'legal_entity' | 'ytt' | 'band';
|
||||
company_image: null | string;
|
||||
address: null | string;
|
||||
district: number;
|
||||
parent: null | string;
|
||||
user_tg_ids: number[];
|
||||
};
|
||||
}
|
||||
|
||||
export interface ExployeesResponse {
|
||||
status: boolean;
|
||||
data: {
|
||||
links: {
|
||||
previous: null | string;
|
||||
next: null | string;
|
||||
};
|
||||
total_items: number;
|
||||
total_pages: number;
|
||||
page_size: number;
|
||||
current_page: number;
|
||||
results: ExployeesDataResponse[];
|
||||
};
|
||||
}
|
||||
|
||||
export interface ExployeesDataResponse {
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
phone: string;
|
||||
}
|
||||
|
||||
export interface MyAdsData {
|
||||
status: boolean;
|
||||
data: {
|
||||
links: {
|
||||
previous: null | string;
|
||||
next: null | string;
|
||||
};
|
||||
total_items: number;
|
||||
total_pages: number;
|
||||
page_size: number;
|
||||
current_page: number;
|
||||
results: MyAdsDataRes[];
|
||||
};
|
||||
}
|
||||
|
||||
export interface MyAdsDataRes {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string;
|
||||
total_view_count: number;
|
||||
files: {
|
||||
id: number;
|
||||
file: string;
|
||||
}[];
|
||||
|
||||
status: 'paid' | 'pending' | 'verified' | 'canceled';
|
||||
types: {
|
||||
id: number;
|
||||
name: string;
|
||||
}[];
|
||||
|
||||
letters: string[];
|
||||
total_price: number;
|
||||
phone_number: string;
|
||||
payments_type: 'OTHER' | 'PAYME' | 'REFERRAL';
|
||||
created_at: string;
|
||||
username: string;
|
||||
}
|
||||
|
||||
export interface MyBonusesData {
|
||||
status: boolean;
|
||||
data: {
|
||||
links: {
|
||||
previous: null | string;
|
||||
next: null | string;
|
||||
};
|
||||
total_items: number;
|
||||
total_pages: number;
|
||||
page_size: number;
|
||||
current_page: number;
|
||||
results: MyBonusesDataRes[];
|
||||
};
|
||||
}
|
||||
export interface MyBonusesDataRes {
|
||||
id: number;
|
||||
ad: {
|
||||
title: string;
|
||||
description: string;
|
||||
};
|
||||
amount: number;
|
||||
percent: number;
|
||||
created_at: string;
|
||||
}
|
||||
219
screens/profile/ui/AddEmployee.tsx
Normal file
219
screens/profile/ui/AddEmployee.tsx
Normal file
@@ -0,0 +1,219 @@
|
||||
import { useTheme } from '@/components/ThemeContext';
|
||||
import { formatPhone, normalizeDigits } from '@/constants/formatPhone';
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { AxiosError } from 'axios';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { ArrowLeft } from 'lucide-react-native';
|
||||
import { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Alert,
|
||||
Pressable,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TextInput,
|
||||
ToastAndroid,
|
||||
View,
|
||||
} from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { user_api } from '../lib/api';
|
||||
|
||||
export default function AddEmployee() {
|
||||
const router = useRouter();
|
||||
const queryClient = useQueryClient();
|
||||
const { isDark } = useTheme();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const theme = {
|
||||
background: isDark ? '#0f172a' : '#f8fafc',
|
||||
inputBg: isDark ? '#1e293b' : '#f1f5f9',
|
||||
inputBorder: isDark ? '#1e293b' : '#e2e8f0',
|
||||
text: isDark ? '#f8fafc' : '#0f172a',
|
||||
textSecondary: isDark ? '#64748b' : '#94a3b8',
|
||||
primary: '#3b82f6',
|
||||
placeholder: isDark ? '#94a3b8' : '#94a3b8',
|
||||
divider: isDark ? '#fff' : '#cbd5e1',
|
||||
};
|
||||
|
||||
const [firstName, setFirstName] = useState('');
|
||||
const [lastName, setLastName] = useState('');
|
||||
const [phoneNumber, setPhoneNumber] = useState('');
|
||||
const [focused, setFocused] = useState(false);
|
||||
|
||||
const { mutate, isPending } = useMutation({
|
||||
mutationFn: (body: { first_name: string; last_name: string; phone: string }) =>
|
||||
user_api.create_employee(body),
|
||||
onSuccess: () => {
|
||||
router.push('/profile/employees');
|
||||
queryClient.refetchQueries({ queryKey: ['employees-list'] });
|
||||
},
|
||||
onError: (err: AxiosError) => {
|
||||
const errMessage = (err.response?.data as { data: { phone: string[] } }).data.phone[0];
|
||||
Alert.alert(t('Xatolik yuz berdi'), errMessage || t('Xatolik yuz berdi'));
|
||||
},
|
||||
});
|
||||
|
||||
const handleChange = (text: string) => {
|
||||
setPhoneNumber(normalizeDigits(text));
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
if (!firstName.trim() || !lastName.trim() || !phoneNumber.trim()) {
|
||||
ToastAndroid.show(t("Barcha maydonlarni to'ldiring"), ToastAndroid.SHORT);
|
||||
return;
|
||||
}
|
||||
|
||||
mutate({
|
||||
first_name: firstName.trim(),
|
||||
last_name: lastName.trim(),
|
||||
phone: phoneNumber.trim(),
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<SafeAreaView style={[styles.container, { backgroundColor: theme.background }]}>
|
||||
<View style={styles.topHeader}>
|
||||
<Pressable onPress={() => router.push('/profile/employees')}>
|
||||
<ArrowLeft color={theme.text} />
|
||||
</Pressable>
|
||||
<Text style={[styles.headerTitle, { color: theme.text }]}>{t("Yangi xodim qo'shish")}</Text>
|
||||
<Pressable onPress={handleSave} disabled={isPending}>
|
||||
{isPending ? (
|
||||
<ActivityIndicator size={'small'} />
|
||||
) : (
|
||||
<Text style={[styles.saveButton, { color: theme.primary }]}>{t('Saqlash')}</Text>
|
||||
)}
|
||||
</Pressable>
|
||||
</View>
|
||||
|
||||
<ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
|
||||
<View style={styles.form}>
|
||||
<View style={styles.field}>
|
||||
<Text style={[styles.label, { color: theme.textSecondary }]}>{t('Ism')}</Text>
|
||||
<TextInput
|
||||
style={[styles.input, { backgroundColor: theme.inputBg, color: theme.text }]}
|
||||
value={firstName}
|
||||
onChangeText={setFirstName}
|
||||
placeholder={t('Ism kiriting')}
|
||||
placeholderTextColor={theme.placeholder}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.field}>
|
||||
<Text style={[styles.label, { color: theme.textSecondary }]}>{t('Familiya')}</Text>
|
||||
<TextInput
|
||||
style={[styles.input, { backgroundColor: theme.inputBg, color: theme.text }]}
|
||||
value={lastName}
|
||||
onChangeText={setLastName}
|
||||
placeholder={t('Familiya kiriting')}
|
||||
placeholderTextColor={theme.placeholder}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View
|
||||
style={[
|
||||
styles.inputContainer,
|
||||
{ backgroundColor: theme.inputBg, borderColor: theme.inputBorder },
|
||||
focused && styles.inputFocused,
|
||||
]}
|
||||
>
|
||||
<View style={styles.prefixContainer}>
|
||||
<Text style={[styles.prefix, { color: theme.text }, focused && styles.prefixFocused]}>
|
||||
+998
|
||||
</Text>
|
||||
<View style={[styles.divider, { backgroundColor: theme.divider }]} />
|
||||
</View>
|
||||
|
||||
<TextInput
|
||||
value={formatPhone(phoneNumber)}
|
||||
onChangeText={handleChange}
|
||||
onFocus={() => setFocused(true)}
|
||||
onBlur={() => setFocused(false)}
|
||||
keyboardType="phone-pad"
|
||||
placeholder="90 123 45 67"
|
||||
placeholderTextColor={theme.placeholder}
|
||||
style={[styles.input, { color: theme.text }]}
|
||||
maxLength={12}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
content: {
|
||||
flex: 1,
|
||||
},
|
||||
saveButton: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
paddingHorizontal: 8,
|
||||
},
|
||||
form: {
|
||||
padding: 16,
|
||||
gap: 20,
|
||||
},
|
||||
field: {
|
||||
gap: 12,
|
||||
},
|
||||
label: {
|
||||
fontSize: 13,
|
||||
fontWeight: '600',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 0.5,
|
||||
},
|
||||
input: {
|
||||
borderRadius: 16,
|
||||
padding: 16,
|
||||
fontSize: 17,
|
||||
fontWeight: '600',
|
||||
},
|
||||
inputContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
borderRadius: 14,
|
||||
borderWidth: 2,
|
||||
paddingHorizontal: 16,
|
||||
height: 56,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 8,
|
||||
elevation: 2,
|
||||
},
|
||||
inputFocused: {
|
||||
shadowOpacity: 0.15,
|
||||
shadowRadius: 12,
|
||||
elevation: 4,
|
||||
},
|
||||
prefixContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginRight: 12,
|
||||
},
|
||||
prefix: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
letterSpacing: 0.3,
|
||||
},
|
||||
prefixFocused: {},
|
||||
divider: {
|
||||
width: 1.5,
|
||||
height: 24,
|
||||
marginLeft: 12,
|
||||
},
|
||||
topHeader: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
padding: 16,
|
||||
alignItems: 'center',
|
||||
},
|
||||
headerTitle: { fontSize: 18, fontWeight: '700' },
|
||||
});
|
||||
197
screens/profile/ui/AddService.tsx
Normal file
197
screens/profile/ui/AddService.tsx
Normal file
@@ -0,0 +1,197 @@
|
||||
import { useTheme } from '@/components/ThemeContext';
|
||||
import StepTwo from '@/screens/create-ads/ui/StepTwo';
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { ArrowLeft } from 'lucide-react-native';
|
||||
import { useRef, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Alert,
|
||||
Pressable,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
} from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { user_api } from '../lib/api';
|
||||
import StepOneServices from './StepOneService';
|
||||
|
||||
type MediaFile = {
|
||||
uri: string;
|
||||
type: string;
|
||||
name: string;
|
||||
};
|
||||
|
||||
interface formDataType {
|
||||
title: string;
|
||||
description: string;
|
||||
media: MediaFile[];
|
||||
category: any[];
|
||||
}
|
||||
|
||||
const getMimeType = (uri: string) => {
|
||||
const ext = uri.split('.').pop()?.toLowerCase();
|
||||
switch (ext) {
|
||||
case 'jpg':
|
||||
case 'jpeg':
|
||||
return 'image/jpeg';
|
||||
case 'png':
|
||||
return 'image/png';
|
||||
case 'webp':
|
||||
return 'image/webp';
|
||||
case 'heic':
|
||||
return 'image/heic';
|
||||
default:
|
||||
return 'application/octet-stream';
|
||||
}
|
||||
};
|
||||
|
||||
export default function AddService() {
|
||||
const router = useRouter();
|
||||
const queryClient = useQueryClient();
|
||||
const { isDark } = useTheme();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [step, setStep] = useState(1);
|
||||
const stepOneRef = useRef<any>(null);
|
||||
const stepTwoRef = useRef<any>(null);
|
||||
|
||||
const [formData, setFormData] = useState<formDataType>({
|
||||
title: '',
|
||||
description: '',
|
||||
media: [],
|
||||
category: [],
|
||||
});
|
||||
|
||||
const { mutate, isPending } = useMutation({
|
||||
mutationFn: (body: FormData) => user_api.add_service(body),
|
||||
onSuccess: () => {
|
||||
queryClient.refetchQueries({ queryKey: ['my_services'] });
|
||||
router.back();
|
||||
},
|
||||
onError: (err: any) => {
|
||||
if (err?.response?.data?.data?.description[0]) {
|
||||
Alert.alert(t('Xatolik yuz berdi'), err?.response?.data?.data?.description[0]);
|
||||
} else if (err?.response?.data?.data?.files[0]) {
|
||||
Alert.alert(t('Xatolik yuz berdi'), err?.response?.data?.data?.title[0]);
|
||||
} else if (err?.response?.data?.data?.title[0]) {
|
||||
Alert.alert(t('Xatolik yuz berdi'), err?.response?.data?.data?.title[0]);
|
||||
} else {
|
||||
Alert.alert(t('Xatolik yuz berdi'), err?.message);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const updateForm = (key: string, value: any) =>
|
||||
setFormData((prev: any) => ({ ...prev, [key]: value }));
|
||||
|
||||
const handleNext = () => {
|
||||
if (step === 1) {
|
||||
const valid = stepOneRef.current?.validate();
|
||||
if (!valid) return;
|
||||
setStep(2);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBack = () => {
|
||||
if (step === 2) setStep(1);
|
||||
else router.back();
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
const valid = stepTwoRef.current?.validate();
|
||||
if (!valid) return;
|
||||
const form = new FormData();
|
||||
form.append('title', formData.title);
|
||||
form.append('description', formData.description);
|
||||
formData.media.forEach((file) => {
|
||||
form.append(`files`, {
|
||||
uri: file.uri,
|
||||
type: getMimeType(file.uri),
|
||||
name: file.uri.split('/').pop(),
|
||||
} as any);
|
||||
});
|
||||
formData.category.forEach((e) => {
|
||||
form.append(`category`, e.id);
|
||||
});
|
||||
|
||||
mutate(form);
|
||||
};
|
||||
|
||||
const removeMedia = (i: number) =>
|
||||
updateForm(
|
||||
'media',
|
||||
formData.media.filter((_: any, idx: number) => idx !== i)
|
||||
);
|
||||
|
||||
return (
|
||||
<SafeAreaView style={{ flex: 1, backgroundColor: isDark ? '#0f172a' : '#f8fafc' }}>
|
||||
<View style={[styles.header, { backgroundColor: isDark ? '#0f172a' : '#ffffff' }]}>
|
||||
<View
|
||||
style={{ flexDirection: 'row', gap: 10, alignContent: 'center', alignItems: 'center' }}
|
||||
>
|
||||
<Pressable onPress={handleBack}>
|
||||
<ArrowLeft color={isDark ? '#fff' : '#0f172a'} />
|
||||
</Pressable>
|
||||
<Text style={[styles.headerTitle, { color: isDark ? '#fff' : '#0f172a' }]}>
|
||||
{step === 1 ? t('Yangi xizmat (1/2)') : t('Yangi xizmat (2/2)')}
|
||||
</Text>
|
||||
</View>
|
||||
{step === 2 ? (
|
||||
<Pressable
|
||||
onPress={handleSave}
|
||||
style={({ pressed }) => [
|
||||
{
|
||||
opacity: pressed || isPending ? 0.6 : 1,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
},
|
||||
]}
|
||||
disabled={isPending}
|
||||
>
|
||||
{isPending ? (
|
||||
<ActivityIndicator size={'small'} />
|
||||
) : (
|
||||
<Text style={styles.saveButton}>{t('Saqlash')}</Text>
|
||||
)}
|
||||
</Pressable>
|
||||
) : (
|
||||
<Pressable onPress={handleNext}>
|
||||
<Text style={styles.saveButton}>{t('Keyingi')}</Text>
|
||||
</Pressable>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<ScrollView contentContainerStyle={styles.container}>
|
||||
{step === 1 && (
|
||||
<StepOneServices
|
||||
ref={stepOneRef}
|
||||
formData={formData}
|
||||
updateForm={updateForm}
|
||||
removeMedia={removeMedia}
|
||||
/>
|
||||
)}
|
||||
{step === 2 && <StepTwo ref={stepTwoRef} formData={formData} updateForm={updateForm} />}
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
padding: 16,
|
||||
alignItems: 'center',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 4,
|
||||
elevation: 3,
|
||||
},
|
||||
headerTitle: { fontSize: 18, fontWeight: '700' },
|
||||
saveButton: { color: '#3b82f6', fontSize: 16, fontWeight: '600' },
|
||||
container: { padding: 16, paddingBottom: 10 },
|
||||
});
|
||||
368
screens/profile/ui/AnnouncementsTab.tsx
Normal file
368
screens/profile/ui/AnnouncementsTab.tsx
Normal file
@@ -0,0 +1,368 @@
|
||||
import { useTheme } from '@/components/ThemeContext';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { BottomSheetBackdrop, BottomSheetModal, BottomSheetScrollView } from '@gorhom/bottom-sheet';
|
||||
import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
|
||||
import { ResizeMode, Video } from 'expo-av';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { ArrowLeft, EyeIcon, Megaphone, Plus } from 'lucide-react-native';
|
||||
import React, { useCallback, useRef, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Dimensions,
|
||||
FlatList,
|
||||
Image,
|
||||
Pressable,
|
||||
RefreshControl,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
} from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { user_api } from '../lib/api';
|
||||
|
||||
const PAGE_SIZE = 10;
|
||||
const { width } = Dimensions.get('window');
|
||||
|
||||
export function AnnouncementsTab() {
|
||||
const router = useRouter();
|
||||
const bottomSheetRef = useRef<BottomSheetModal>(null);
|
||||
const { isDark } = useTheme();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const theme = {
|
||||
background: isDark ? '#0f172a' : '#f8fafc',
|
||||
cardBg: isDark ? '#1e293b' : '#ffffff',
|
||||
text: isDark ? '#ffffff' : '#0f172a',
|
||||
textSecondary: isDark ? '#94a3b8' : '#64748b',
|
||||
textTertiary: isDark ? '#fff6' : '#64748b',
|
||||
primary: '#3b82f6',
|
||||
sheetBg: isDark ? '#0f172a' : '#ffffff',
|
||||
indicator: isDark ? '#94a3b8' : '#cbd5e1',
|
||||
statusBadge: '#2563eb',
|
||||
typeColor: '#38bdf8',
|
||||
priceColor: '#10b981',
|
||||
error: '#ef4444',
|
||||
};
|
||||
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const [selectedAnnouncement, setSelectedAnnouncement] = useState<any>(null);
|
||||
const [sheetOpen, setSheetOpen] = useState(false);
|
||||
|
||||
const { data, isLoading, isError, fetchNextPage, hasNextPage, refetch } = useInfiniteQuery({
|
||||
queryKey: ['my_ads'],
|
||||
queryFn: async ({ pageParam = 1 }) => {
|
||||
const res = await user_api.my_ads({
|
||||
page: pageParam,
|
||||
page_size: PAGE_SIZE,
|
||||
});
|
||||
|
||||
const d = res?.data?.data;
|
||||
return {
|
||||
results: d?.results ?? [],
|
||||
current_page: d?.current_page ?? 1,
|
||||
total_pages: d?.total_pages ?? 1,
|
||||
};
|
||||
},
|
||||
getNextPageParam: (lastPage) =>
|
||||
lastPage.current_page < lastPage.total_pages ? lastPage.current_page + 1 : undefined,
|
||||
initialPageParam: 1,
|
||||
});
|
||||
|
||||
const allAds = data?.pages.flatMap((p) => p.results) ?? [];
|
||||
|
||||
const {
|
||||
data: detail,
|
||||
isLoading: loadingDetail,
|
||||
isError: detailError,
|
||||
} = useQuery({
|
||||
queryKey: ['my_ads_id', selectedAnnouncement?.id],
|
||||
queryFn: () => user_api.my_ads_detail(selectedAnnouncement.id),
|
||||
select: (res) => res.data.data,
|
||||
enabled: !!selectedAnnouncement && sheetOpen,
|
||||
});
|
||||
|
||||
const openSheet = (item: any) => {
|
||||
setSelectedAnnouncement(item);
|
||||
setSheetOpen(true);
|
||||
requestAnimationFrame(() => bottomSheetRef.current?.present());
|
||||
};
|
||||
|
||||
const onRefresh = async () => {
|
||||
setRefreshing(true);
|
||||
await refetch();
|
||||
setRefreshing(false);
|
||||
};
|
||||
|
||||
const renderBackdrop = useCallback(
|
||||
(props: any) => (
|
||||
<BottomSheetBackdrop {...props} appearsOnIndex={0} disappearsOnIndex={-1} opacity={0.4} />
|
||||
),
|
||||
[]
|
||||
);
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'paid':
|
||||
case 'verified':
|
||||
return '#10b981';
|
||||
case 'pending':
|
||||
return '#f59e0b';
|
||||
case 'canceled':
|
||||
return '#ef4444';
|
||||
default:
|
||||
return '#94a3b8';
|
||||
}
|
||||
};
|
||||
|
||||
const statusLabel: Record<string, string> = {
|
||||
pending: 'Kutilmoqda',
|
||||
paid: "To'langan",
|
||||
verified: 'Tasdiqlangan',
|
||||
canceled: 'Bekor qilingan',
|
||||
};
|
||||
|
||||
const formatAmount = (amount: number) => new Intl.NumberFormat('uz-UZ').format(amount) + " so'm";
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<SafeAreaView>
|
||||
<View style={styles.topHeader}>
|
||||
<Pressable onPress={() => router.push('/profile')}>
|
||||
<ArrowLeft color={theme.text} />
|
||||
</Pressable>
|
||||
<Text style={[styles.headerTitle, { color: theme.text }]}>{t("E'lonlar")}</Text>
|
||||
<Pressable onPress={() => router.push('/(dashboard)/create-announcements')}>
|
||||
<Plus color={theme.primary} />
|
||||
</Pressable>
|
||||
</View>
|
||||
<ActivityIndicator size={'large'} />
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
if (isError) {
|
||||
return (
|
||||
<View style={[styles.center, { backgroundColor: theme.background }]}>
|
||||
<Text style={[styles.error, { color: theme.error }]}>{t('Xatolik yuz berdi')}</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={[styles.container, { backgroundColor: theme.background }]}>
|
||||
<View style={styles.topHeader}>
|
||||
<Pressable onPress={() => router.push('/profile')}>
|
||||
<ArrowLeft color={theme.text} />
|
||||
</Pressable>
|
||||
<Text style={[styles.headerTitle, { color: theme.text }]}>{t("E'lonlar")}</Text>
|
||||
<Pressable onPress={() => router.push('/(dashboard)/create-announcements')}>
|
||||
<Plus color={theme.primary} />
|
||||
</Pressable>
|
||||
</View>
|
||||
|
||||
<FlatList
|
||||
data={allAds}
|
||||
keyExtractor={(item) => item.id.toString()}
|
||||
contentContainerStyle={styles.list}
|
||||
refreshControl={
|
||||
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor={theme.primary} />
|
||||
}
|
||||
onEndReached={() => hasNextPage && fetchNextPage()}
|
||||
renderItem={({ item }) => (
|
||||
<Pressable
|
||||
style={[styles.card, { backgroundColor: theme.cardBg }]}
|
||||
onPress={() => openSheet(item)}
|
||||
>
|
||||
{item.files?.[0]?.file && (
|
||||
<Image source={{ uri: item.files[0].file }} style={styles.cardImage} />
|
||||
)}
|
||||
|
||||
<View style={styles.cardHeader}>
|
||||
<Megaphone size={18} color={theme.primary} />
|
||||
<Text style={{ color: getStatusColor(item.status), fontWeight: '600' }}>
|
||||
{t(statusLabel[item.status])}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<Text style={[styles.title, { color: theme.text }]}>{item.title}</Text>
|
||||
|
||||
<Text numberOfLines={2} style={[styles.desc, { color: theme.textTertiary }]}>
|
||||
{item.description}
|
||||
</Text>
|
||||
|
||||
<View style={styles.footer}>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignContent: 'center',
|
||||
alignItems: 'center',
|
||||
gap: 5,
|
||||
}}
|
||||
>
|
||||
<EyeIcon size={20} color={theme.textSecondary} />
|
||||
<Text style={[styles.metaText, { color: theme.textSecondary }]}>
|
||||
{item.total_view_count}
|
||||
</Text>
|
||||
</View>
|
||||
<Text style={[styles.date, { color: theme.textSecondary }]}>
|
||||
{new Date(item.created_at).toLocaleDateString('uz-UZ')}
|
||||
</Text>
|
||||
</View>
|
||||
</Pressable>
|
||||
)}
|
||||
/>
|
||||
|
||||
<BottomSheetModal
|
||||
ref={bottomSheetRef}
|
||||
snapPoints={['70%', '95%']}
|
||||
backdropComponent={renderBackdrop}
|
||||
enablePanDownToClose
|
||||
backgroundStyle={{ backgroundColor: theme.sheetBg }}
|
||||
handleIndicatorStyle={{ backgroundColor: theme.indicator }}
|
||||
onDismiss={() => {
|
||||
setSheetOpen(false);
|
||||
setSelectedAnnouncement(null);
|
||||
}}
|
||||
>
|
||||
<BottomSheetScrollView contentContainerStyle={styles.sheet}>
|
||||
{loadingDetail && <ActivityIndicator size={'large'} />}
|
||||
{detailError && (
|
||||
<Text style={[styles.error, { color: theme.error }]}>{t('Xatolik yuz berdi')}</Text>
|
||||
)}
|
||||
|
||||
{detail && (
|
||||
<>
|
||||
{detail.files?.length > 0 && (
|
||||
<ScrollView horizontal pagingEnabled showsHorizontalScrollIndicator={false}>
|
||||
{detail.files.map((file: any) => {
|
||||
const isVideo = file.file.endsWith('.mp4');
|
||||
return (
|
||||
<View key={file.id} style={styles.mediaContainer}>
|
||||
{isVideo ? (
|
||||
<Video
|
||||
source={{ uri: file.file }}
|
||||
style={styles.media}
|
||||
resizeMode={ResizeMode.CONTAIN}
|
||||
useNativeControls
|
||||
/>
|
||||
) : (
|
||||
<Image source={{ uri: file.file }} style={styles.media} />
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
})}
|
||||
</ScrollView>
|
||||
)}
|
||||
|
||||
<Text style={[styles.sheetTitle, { color: theme.text }]}>{detail.title}</Text>
|
||||
|
||||
<View style={styles.metaRow}>
|
||||
<Ionicons name="eye-outline" size={16} color={theme.textSecondary} />
|
||||
<Text style={[styles.metaText, { color: theme.textSecondary }]}>
|
||||
{detail.total_view_count} {t("ko'rildi")}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View style={[styles.statusBadge, { backgroundColor: theme.statusBadge }]}>
|
||||
<Text style={styles.statusText}>{statusLabel[detail.status]}</Text>
|
||||
</View>
|
||||
<View style={styles.infoRowColumn}>
|
||||
<Text style={[styles.label, { color: theme.textSecondary }]}>
|
||||
{t('Kategoriyalar')}:
|
||||
</Text>
|
||||
{detail.types?.map((type: any) => (
|
||||
<Text key={type.id} style={[styles.typeItem, { color: theme.typeColor }]}>
|
||||
{type.name}
|
||||
</Text>
|
||||
))}
|
||||
</View>
|
||||
|
||||
<View style={styles.infoRow}>
|
||||
<Text style={[styles.label, { color: theme.textSecondary }]}>
|
||||
{t('Tanlangan kompaniyalar')}:
|
||||
</Text>
|
||||
<Text style={[styles.value, { color: theme.text }]}>
|
||||
{detail.letters?.join(', ')}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.infoRow}>
|
||||
<Text style={[styles.label, { color: theme.textSecondary }]}>{t('Narxi')}:</Text>
|
||||
<Text style={[styles.price, { color: theme.priceColor }]}>
|
||||
{formatAmount(detail.total_price)}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.infoRow}>
|
||||
<Text style={[styles.label, { color: theme.textSecondary }]}>{t('Tavsif')}:</Text>
|
||||
<Text style={[styles.desc, { color: theme.textTertiary }]}>
|
||||
{detail.description}
|
||||
</Text>
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
</BottomSheetScrollView>
|
||||
</BottomSheetModal>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1 },
|
||||
center: { flex: 1, justifyContent: 'center', alignItems: 'center' },
|
||||
|
||||
topHeader: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
padding: 16,
|
||||
alignItems: 'center',
|
||||
},
|
||||
headerTitle: { fontSize: 18, fontWeight: '700' },
|
||||
|
||||
list: { padding: 16, gap: 12 },
|
||||
card: { borderRadius: 16, padding: 16, gap: 8 },
|
||||
cardImage: { width: '100%', height: 160, borderRadius: 12 },
|
||||
|
||||
cardHeader: { flexDirection: 'row', justifyContent: 'space-between' },
|
||||
title: { fontSize: 16, fontWeight: '700' },
|
||||
desc: { lineHeight: 20 },
|
||||
|
||||
footer: { flexDirection: 'row', justifyContent: 'space-between' },
|
||||
metaText: {},
|
||||
date: {},
|
||||
|
||||
sheet: { padding: 20, gap: 12 },
|
||||
sheetTitle: { fontSize: 18, fontWeight: '700' },
|
||||
|
||||
mediaContainer: { width: width - 40, height: 200, marginRight: 12 },
|
||||
media: { width: '100%', height: '100%', borderRadius: 12 },
|
||||
|
||||
metaRow: { flexDirection: 'row', gap: 6, alignItems: 'center' },
|
||||
|
||||
statusBadge: {
|
||||
alignSelf: 'flex-start',
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 6,
|
||||
borderRadius: 12,
|
||||
},
|
||||
statusText: { color: '#fff', fontWeight: '600' },
|
||||
|
||||
infoRow: { flexDirection: 'column', gap: 6 },
|
||||
infoRowColumn: {
|
||||
marginTop: 8,
|
||||
gap: 4,
|
||||
},
|
||||
|
||||
typeItem: {
|
||||
fontSize: 14,
|
||||
},
|
||||
|
||||
label: {},
|
||||
value: { flex: 1 },
|
||||
price: { fontWeight: '700' },
|
||||
|
||||
loading: {},
|
||||
error: {},
|
||||
});
|
||||
281
screens/profile/ui/BonusesScreen.tsx
Normal file
281
screens/profile/ui/BonusesScreen.tsx
Normal file
@@ -0,0 +1,281 @@
|
||||
import { useTheme } from '@/components/ThemeContext';
|
||||
import { useGlobalRefresh } from '@/components/ui/RefreshContext';
|
||||
import { useInfiniteQuery } from '@tanstack/react-query';
|
||||
import { router } from 'expo-router';
|
||||
import { ArrowLeft, Award, Percent } from 'lucide-react-native';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { ActivityIndicator, FlatList, Pressable, StyleSheet, Text, View } from 'react-native';
|
||||
import { RefreshControl } from 'react-native-gesture-handler';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { user_api } from '../lib/api';
|
||||
|
||||
const PAGE_SIZE = 10;
|
||||
|
||||
export default function BonusesScreen() {
|
||||
const { onRefresh, refreshing } = useGlobalRefresh();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { isDark } = useTheme();
|
||||
|
||||
const formatAmount = (amount: number) => {
|
||||
return new Intl.NumberFormat('uz-UZ').format(amount) + " so'm";
|
||||
};
|
||||
|
||||
const { data, isLoading, isError, fetchNextPage, hasNextPage } = useInfiniteQuery({
|
||||
queryKey: ['my_bonuses'],
|
||||
queryFn: async ({ pageParam = 1 }) => {
|
||||
const res = await user_api.my_bonuses({
|
||||
page: pageParam,
|
||||
page_size: PAGE_SIZE,
|
||||
});
|
||||
|
||||
const d = res?.data?.data;
|
||||
return {
|
||||
results: d?.results ?? [],
|
||||
current_page: d?.current_page ?? 1,
|
||||
total_pages: d?.total_pages ?? 1,
|
||||
};
|
||||
},
|
||||
getNextPageParam: (lastPage) =>
|
||||
lastPage.current_page < lastPage.total_pages ? lastPage.current_page + 1 : undefined,
|
||||
initialPageParam: 1,
|
||||
});
|
||||
|
||||
const allBonuses = data?.pages.flatMap((p) => p.results) ?? [];
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<View style={[styles.center, { backgroundColor: isDark ? '#0f172a' : '#f8fafc' }]}>
|
||||
<ActivityIndicator size={'large'} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
if (isError) {
|
||||
return (
|
||||
<View style={[styles.center, { backgroundColor: isDark ? '#0f172a' : '#f8fafc' }]}>
|
||||
<Text style={styles.error}>{t('Xatolik yuz berdi')}</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<SafeAreaView style={[styles.container, { backgroundColor: isDark ? '#0f172a' : '#f8fafc' }]}>
|
||||
<View style={[styles.topHeader, { backgroundColor: isDark ? '#0f172a' : '#ffffff' }]}>
|
||||
<Pressable onPress={() => router.push('/profile')}>
|
||||
<ArrowLeft color={isDark ? '#fff' : '#0f172a'} />
|
||||
</Pressable>
|
||||
<Text style={[styles.headerTitle, { color: isDark ? '#fff' : '#0f172a' }]}>
|
||||
{t('Bonuslar')}
|
||||
</Text>
|
||||
</View>
|
||||
<FlatList
|
||||
data={allBonuses}
|
||||
keyExtractor={(item) => item.id.toString()}
|
||||
onEndReached={() => hasNextPage && fetchNextPage()}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={refreshing}
|
||||
onRefresh={onRefresh}
|
||||
colors={['#2563eb']}
|
||||
tintColor="#2563eb"
|
||||
/>
|
||||
}
|
||||
contentContainerStyle={styles.list}
|
||||
renderItem={({ item }) => (
|
||||
<View
|
||||
style={[
|
||||
styles.card,
|
||||
{
|
||||
backgroundColor: isDark ? '#1e293b' : '#ffffff',
|
||||
borderColor: isDark ? '#fbbf2420' : '#e2e8f0',
|
||||
shadowColor: isDark ? '#000' : '#0f172a',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: isDark ? 0.3 : 0.08,
|
||||
shadowRadius: 12,
|
||||
elevation: 4,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<View style={styles.header}>
|
||||
<View
|
||||
style={[
|
||||
styles.iconContainer,
|
||||
{ backgroundColor: isDark ? '#3b82f614' : '#dbeafe' },
|
||||
]}
|
||||
>
|
||||
<Award size={28} color="#3b82f6" />
|
||||
</View>
|
||||
<View
|
||||
style={[
|
||||
styles.percentageBadge,
|
||||
{ backgroundColor: isDark ? '#10b98120' : '#d1fae5' },
|
||||
]}
|
||||
>
|
||||
<Text style={[styles.percentageText, { color: isDark ? '#10b981' : '#059669' }]}>
|
||||
{item.percent}
|
||||
</Text>
|
||||
<Percent size={16} color={isDark ? '#10b981' : '#059669'} />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<Text style={[styles.title, { color: isDark ? '#f8fafc' : '#0f172a' }]}>
|
||||
{item.ad.title}
|
||||
</Text>
|
||||
<Text style={[styles.description, { color: isDark ? '#94a3b8' : '#64748b' }]}>
|
||||
{item.ad.description}
|
||||
</Text>
|
||||
|
||||
<View style={[styles.footer, { borderTopColor: isDark ? '#334155' : '#e2e8f0' }]}>
|
||||
<View style={styles.amountContainer}>
|
||||
<Text style={[styles.amountLabel, { color: isDark ? '#64748b' : '#94a3b8' }]}>
|
||||
{t('Bonus miqdori')}
|
||||
</Text>
|
||||
<Text style={styles.amount}>{formatAmount(item.amount)}</Text>
|
||||
</View>
|
||||
<View style={styles.dateContainer}>
|
||||
<Text style={[styles.dateLabel, { color: isDark ? '#64748b' : '#94a3b8' }]}>
|
||||
{t('Yaratilgan sana')}
|
||||
</Text>
|
||||
<Text style={[styles.date, { color: isDark ? '#94a3b8' : '#64748b' }]}>
|
||||
{new Date(item.created_at).toLocaleDateString('uz-UZ')}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
ListEmptyComponent={
|
||||
<View style={styles.emptyContainer}>
|
||||
<Award size={64} color={isDark ? '#334155' : '#cbd5e1'} />
|
||||
<Text style={[styles.emptyText, { color: isDark ? '#64748b' : '#94a3b8' }]}>
|
||||
{t("Hozircha bonuslar yo'q")}
|
||||
</Text>
|
||||
</View>
|
||||
}
|
||||
/>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
list: {
|
||||
padding: 16,
|
||||
gap: 16,
|
||||
},
|
||||
card: {
|
||||
borderRadius: 20,
|
||||
padding: 20,
|
||||
gap: 16,
|
||||
borderWidth: 1.5,
|
||||
},
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
},
|
||||
iconContainer: {
|
||||
width: 64,
|
||||
height: 64,
|
||||
borderRadius: 32,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
percentageBadge: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 4,
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 10,
|
||||
borderRadius: 20,
|
||||
},
|
||||
percentageText: {
|
||||
fontSize: 17,
|
||||
fontWeight: '700' as const,
|
||||
},
|
||||
title: {
|
||||
fontSize: 20,
|
||||
fontWeight: '700' as const,
|
||||
lineHeight: 26,
|
||||
},
|
||||
description: {
|
||||
fontSize: 15,
|
||||
lineHeight: 22,
|
||||
},
|
||||
footer: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'flex-start',
|
||||
paddingTop: 12,
|
||||
borderTopWidth: 1,
|
||||
},
|
||||
amountContainer: {
|
||||
gap: 6,
|
||||
},
|
||||
amountLabel: {
|
||||
fontSize: 12,
|
||||
fontWeight: '500' as const,
|
||||
},
|
||||
amount: {
|
||||
fontSize: 22,
|
||||
fontWeight: '700' as const,
|
||||
color: '#3b82f6',
|
||||
},
|
||||
dateContainer: {
|
||||
gap: 6,
|
||||
alignItems: 'flex-end',
|
||||
},
|
||||
dateLabel: {
|
||||
fontSize: 12,
|
||||
fontWeight: '500' as const,
|
||||
},
|
||||
date: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600' as const,
|
||||
},
|
||||
emptyContainer: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingVertical: 80,
|
||||
gap: 16,
|
||||
},
|
||||
emptyText: {
|
||||
fontSize: 17,
|
||||
fontWeight: '600' as const,
|
||||
},
|
||||
topHeader: {
|
||||
flexDirection: 'row',
|
||||
gap: 10,
|
||||
padding: 16,
|
||||
alignItems: 'center',
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 4,
|
||||
elevation: 3,
|
||||
},
|
||||
headerTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: '700',
|
||||
flex: 1,
|
||||
},
|
||||
themeToggle: {
|
||||
padding: 8,
|
||||
},
|
||||
center: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
loading: {
|
||||
fontSize: 16,
|
||||
fontWeight: '500',
|
||||
},
|
||||
error: {
|
||||
color: '#ef4444',
|
||||
fontSize: 16,
|
||||
fontWeight: '500',
|
||||
},
|
||||
});
|
||||
164
screens/profile/ui/BonusesTab.tsx
Normal file
164
screens/profile/ui/BonusesTab.tsx
Normal file
@@ -0,0 +1,164 @@
|
||||
import { Award, Percent } from 'lucide-react-native';
|
||||
import { FlatList, StyleSheet, Text, View } from 'react-native';
|
||||
import { useProfileData } from '../lib/ProfileDataContext';
|
||||
|
||||
export function BonusesTab() {
|
||||
const { bonuses } = useProfileData();
|
||||
|
||||
const formatAmount = (amount: number) => {
|
||||
return new Intl.NumberFormat('uz-UZ').format(amount) + " so'm";
|
||||
};
|
||||
|
||||
return (
|
||||
<FlatList
|
||||
data={bonuses}
|
||||
keyExtractor={(item) => item.id}
|
||||
contentContainerStyle={styles.list}
|
||||
renderItem={({ item }) => (
|
||||
<View style={styles.card}>
|
||||
<View style={styles.header}>
|
||||
<View style={styles.iconContainer}>
|
||||
<Award size={24} color="#fbbf24" />
|
||||
</View>
|
||||
<View style={styles.percentageBadge}>
|
||||
<Percent size={14} color="#10b981" />
|
||||
<Text style={styles.percentageText}>{item.percentage}%</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<Text style={styles.title}>{item.title}</Text>
|
||||
<Text style={styles.description}>{item.description}</Text>
|
||||
|
||||
<View style={styles.divider} />
|
||||
|
||||
<View style={styles.footer}>
|
||||
<View style={styles.amountContainer}>
|
||||
<Text style={styles.amountLabel}>Bonus miqdori</Text>
|
||||
<Text style={styles.amount}>{formatAmount(item.bonusAmount)}</Text>
|
||||
</View>
|
||||
<View style={styles.dateContainer}>
|
||||
<Text style={styles.dateLabel}>Yaratilgan sana</Text>
|
||||
<Text style={styles.date}>
|
||||
{new Date(item.createdAt).toLocaleDateString('uz-UZ')}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
ListEmptyComponent={
|
||||
<View style={styles.emptyContainer}>
|
||||
<Award size={48} color="#475569" />
|
||||
<Text style={styles.emptyText}>Hozircha bonuslar yo'q</Text>
|
||||
<Text style={styles.emptySubtext}>Faoliyat ko'rsating va bonuslar qo'lga kiriting</Text>
|
||||
</View>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
list: {
|
||||
padding: 16,
|
||||
gap: 16,
|
||||
paddingBottom: 100,
|
||||
},
|
||||
card: {
|
||||
backgroundColor: '#1e293b',
|
||||
borderRadius: 16,
|
||||
padding: 20,
|
||||
gap: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: '#fbbf2420',
|
||||
},
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
},
|
||||
iconContainer: {
|
||||
width: 56,
|
||||
height: 56,
|
||||
borderRadius: 28,
|
||||
backgroundColor: '#fbbf2420',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
percentageBadge: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 4,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 8,
|
||||
borderRadius: 20,
|
||||
backgroundColor: '#10b98120',
|
||||
},
|
||||
percentageText: {
|
||||
fontSize: 16,
|
||||
fontWeight: '700' as const,
|
||||
color: '#10b981',
|
||||
},
|
||||
title: {
|
||||
fontSize: 20,
|
||||
fontWeight: '700' as const,
|
||||
color: '#f8fafc',
|
||||
},
|
||||
description: {
|
||||
fontSize: 14,
|
||||
color: '#94a3b8',
|
||||
lineHeight: 20,
|
||||
},
|
||||
divider: {
|
||||
height: 1,
|
||||
backgroundColor: '#334155',
|
||||
marginVertical: 4,
|
||||
},
|
||||
footer: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'flex-start',
|
||||
},
|
||||
amountContainer: {
|
||||
gap: 6,
|
||||
},
|
||||
amountLabel: {
|
||||
fontSize: 13,
|
||||
color: '#64748b',
|
||||
fontWeight: '500' as const,
|
||||
},
|
||||
amount: {
|
||||
fontSize: 22,
|
||||
fontWeight: '700' as const,
|
||||
color: '#fbbf24',
|
||||
},
|
||||
dateContainer: {
|
||||
gap: 6,
|
||||
alignItems: 'flex-end',
|
||||
},
|
||||
dateLabel: {
|
||||
fontSize: 13,
|
||||
color: '#64748b',
|
||||
fontWeight: '500' as const,
|
||||
},
|
||||
date: {
|
||||
fontSize: 14,
|
||||
color: '#94a3b8',
|
||||
fontWeight: '600' as const,
|
||||
},
|
||||
emptyContainer: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingVertical: 80,
|
||||
gap: 12,
|
||||
},
|
||||
emptyText: {
|
||||
fontSize: 18,
|
||||
fontWeight: '600' as const,
|
||||
color: '#64748b',
|
||||
},
|
||||
emptySubtext: {
|
||||
fontSize: 14,
|
||||
color: '#475569',
|
||||
textAlign: 'center',
|
||||
paddingHorizontal: 40,
|
||||
},
|
||||
});
|
||||
200
screens/profile/ui/EditServices.tsx
Normal file
200
screens/profile/ui/EditServices.tsx
Normal file
@@ -0,0 +1,200 @@
|
||||
import { useTheme } from '@/components/ThemeContext';
|
||||
import StepTwo from '@/screens/create-ads/ui/StepTwo';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { useLocalSearchParams, useRouter } from 'expo-router';
|
||||
import { ArrowLeft, Loader } from 'lucide-react-native';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Alert, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { user_api } from '../lib/api';
|
||||
import StepOneServices from './StepOneService';
|
||||
|
||||
type MediaFile = { id?: number; uri: string; type: 'image' | 'video'; name?: string };
|
||||
|
||||
interface formDataType {
|
||||
title: string;
|
||||
description: string;
|
||||
media: MediaFile[];
|
||||
category: any[];
|
||||
}
|
||||
|
||||
const getMimeType = (uri: string) => {
|
||||
const ext = uri.split('.').pop()?.toLowerCase();
|
||||
switch (ext) {
|
||||
case 'jpg':
|
||||
case 'jpeg':
|
||||
return 'image/jpeg';
|
||||
case 'png':
|
||||
return 'image/png';
|
||||
case 'webp':
|
||||
return 'image/webp';
|
||||
case 'heic':
|
||||
return 'image/heic';
|
||||
case 'mp4':
|
||||
return 'video/mp4';
|
||||
default:
|
||||
return 'application/octet-stream';
|
||||
}
|
||||
};
|
||||
|
||||
export default function EditService() {
|
||||
const router = useRouter();
|
||||
const queryClient = useQueryClient();
|
||||
const { id } = useLocalSearchParams<{ id: string }>();
|
||||
const { isDark } = useTheme();
|
||||
const stepOneRef = useRef<any>(null);
|
||||
const stepTwoRef = useRef<any>(null);
|
||||
const [step, setStep] = useState(1);
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [formData, setFormData] = useState<formDataType>({
|
||||
title: '',
|
||||
description: '',
|
||||
media: [],
|
||||
category: [],
|
||||
});
|
||||
|
||||
const [removedFileIds, setRemovedFileIds] = useState<number[]>([]);
|
||||
|
||||
const updateForm = (key: string, value: any) =>
|
||||
setFormData((prev) => ({ ...prev, [key]: value }));
|
||||
|
||||
const { data: product, isLoading } = useQuery({
|
||||
queryKey: ['service_detail', id],
|
||||
queryFn: () => user_api.detail_service(Number(id)),
|
||||
select(data) {
|
||||
return data.data.data;
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (product) {
|
||||
setFormData({
|
||||
title: product.title,
|
||||
description: product.description,
|
||||
media: product.files.map((f: any) => ({
|
||||
id: f.id,
|
||||
uri: f.file,
|
||||
type: f.type,
|
||||
name: f.name || '',
|
||||
})),
|
||||
category: product.category,
|
||||
});
|
||||
}
|
||||
}, [product]);
|
||||
|
||||
const { mutate, isPending } = useMutation({
|
||||
mutationFn: (body: FormData) => user_api.update_service({ body, id: Number(id) }),
|
||||
onSuccess: (res) => {
|
||||
console.log(res);
|
||||
queryClient.invalidateQueries({ queryKey: ['my_services'] });
|
||||
queryClient.invalidateQueries({ queryKey: ['service_detail'] });
|
||||
router.back();
|
||||
},
|
||||
onError: (err: any) => {
|
||||
console.log(err);
|
||||
Alert.alert(t('Xatolik yuz berdi'), err?.message || t('Yangilashda xato yuz berdi'));
|
||||
},
|
||||
});
|
||||
|
||||
const handleNext = () => {
|
||||
if (step === 1) {
|
||||
const valid = stepOneRef.current?.validate();
|
||||
if (!valid) return;
|
||||
setStep(2);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBack = () => {
|
||||
if (step === 2) setStep(1);
|
||||
else router.back();
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
const valid = stepTwoRef.current?.validate();
|
||||
if (!valid) return;
|
||||
|
||||
const form = new FormData();
|
||||
form.append('title', formData.title);
|
||||
form.append('description', formData.description);
|
||||
|
||||
formData.media.forEach((file, i) => {
|
||||
if (!file.id) {
|
||||
form.append(`files`, {
|
||||
uri: file.uri,
|
||||
type: getMimeType(file.uri),
|
||||
name: file.uri.split('/').pop(),
|
||||
} as any);
|
||||
}
|
||||
});
|
||||
|
||||
removedFileIds.forEach((id) => form.append(`delete_files`, id.toString()));
|
||||
formData.category.forEach((cat) => form.append(`category`, cat.id));
|
||||
|
||||
mutate(form);
|
||||
};
|
||||
|
||||
const removeMedia = (index: number) => {
|
||||
const file = formData.media[index];
|
||||
if (file.id) setRemovedFileIds((prev) => [...prev, file.id!]);
|
||||
updateForm(
|
||||
'media',
|
||||
formData.media.filter((_, i) => i !== index)
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<SafeAreaView style={{ flex: 1, backgroundColor: isDark ? '#0f172a' : '#f8fafc' }}>
|
||||
<View style={[styles.header, { backgroundColor: isDark ? '#0f172a' : '#ffffff' }]}>
|
||||
<View style={{ flexDirection: 'row', gap: 10, alignItems: 'center' }}>
|
||||
<Pressable onPress={handleBack}>
|
||||
<ArrowLeft color={isDark ? '#fff' : '#0f172a'} />
|
||||
</Pressable>
|
||||
<Text style={[styles.headerTitle, { color: isDark ? '#fff' : '#0f172a' }]}>
|
||||
{step === 1 ? t('Xizmatni tahrirlash (1/2)') : t('Xizmatni tahrirlash (2/2)')}
|
||||
</Text>
|
||||
</View>
|
||||
<Pressable
|
||||
onPress={step === 2 ? handleSave : handleNext}
|
||||
style={({ pressed }) => ({ opacity: pressed || isPending ? 0.6 : 1 })}
|
||||
disabled={isPending}
|
||||
>
|
||||
{isPending ? (
|
||||
<Loader color="#3b82f6" size={20} />
|
||||
) : (
|
||||
<Text style={styles.saveButton}>{step === 2 ? t('Saqlash') : t('Keyingi')}</Text>
|
||||
)}
|
||||
</Pressable>
|
||||
</View>
|
||||
|
||||
<ScrollView contentContainerStyle={styles.container}>
|
||||
{step === 1 && (
|
||||
<StepOneServices
|
||||
ref={stepOneRef}
|
||||
formData={formData}
|
||||
updateForm={updateForm}
|
||||
removeMedia={removeMedia}
|
||||
/>
|
||||
)}
|
||||
{step === 2 && <StepTwo ref={stepTwoRef} formData={formData} updateForm={updateForm} />}
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
padding: 16,
|
||||
alignItems: 'center',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 4,
|
||||
elevation: 3,
|
||||
},
|
||||
headerTitle: { fontSize: 18, fontWeight: '700' },
|
||||
saveButton: { color: '#3b82f6', fontSize: 16, fontWeight: '600' },
|
||||
container: { padding: 16, paddingBottom: 10 },
|
||||
});
|
||||
199
screens/profile/ui/EmployeesTab.tsx
Normal file
199
screens/profile/ui/EmployeesTab.tsx
Normal file
@@ -0,0 +1,199 @@
|
||||
import { useTheme } from '@/components/ThemeContext';
|
||||
import { formatNumber } from '@/constants/formatPhone';
|
||||
import { useInfiniteQuery } from '@tanstack/react-query';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { ArrowLeft, Plus, User } from 'lucide-react-native';
|
||||
import { useCallback, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
ActivityIndicator,
|
||||
FlatList,
|
||||
Pressable,
|
||||
RefreshControl,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
} from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { user_api } from '../lib/api';
|
||||
import { ExployeesDataResponse } from '../lib/type';
|
||||
|
||||
const PAGE_SIZE = 20;
|
||||
|
||||
export function EmployeesTab() {
|
||||
const router = useRouter();
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const { isDark } = useTheme();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const theme = {
|
||||
background: isDark ? '#0f172a' : '#f8fafc',
|
||||
cardBg: isDark ? '#1e293b' : '#ffffff',
|
||||
text: isDark ? '#f8fafc' : '#0f172a',
|
||||
textSecondary: isDark ? '#94a3b8' : '#64748b',
|
||||
iconBg: isDark ? '#1e40af15' : '#dbeafe',
|
||||
primary: '#3b82f6',
|
||||
emptyIcon: isDark ? '#334155' : '#cbd5e1',
|
||||
};
|
||||
|
||||
const { data, isLoading, isError, fetchNextPage, hasNextPage, isFetchingNextPage, refetch } =
|
||||
useInfiniteQuery({
|
||||
queryKey: ['employees_list'],
|
||||
queryFn: async ({ pageParam = 1 }) => {
|
||||
const response = await user_api.employess({
|
||||
page: pageParam,
|
||||
page_size: PAGE_SIZE,
|
||||
});
|
||||
return response.data.data;
|
||||
},
|
||||
getNextPageParam: (lastPage) =>
|
||||
lastPage && lastPage.current_page && lastPage.total_pages
|
||||
? lastPage.current_page < lastPage.total_pages
|
||||
? lastPage.current_page + 1
|
||||
: undefined
|
||||
: undefined,
|
||||
initialPageParam: 1,
|
||||
});
|
||||
|
||||
const allEmployees = data?.pages.flatMap((p) => p.results) ?? [];
|
||||
|
||||
const renderItem = useCallback(
|
||||
({ item }: { item: ExployeesDataResponse }) => (
|
||||
<View style={[styles.card, { backgroundColor: theme.cardBg }]}>
|
||||
<View style={[styles.iconContainer, { backgroundColor: theme.iconBg }]}>
|
||||
<User size={24} color={theme.primary} />
|
||||
</View>
|
||||
<View style={styles.infoContainer}>
|
||||
<Text style={[styles.name, { color: theme.text }]}>
|
||||
{item.first_name} {item.last_name}
|
||||
</Text>
|
||||
<Text style={[styles.phone, { color: theme.textSecondary }]}>
|
||||
{formatNumber(item.phone)}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
),
|
||||
[theme]
|
||||
);
|
||||
|
||||
const onRefresh = async () => {
|
||||
setRefreshing(true);
|
||||
await refetch();
|
||||
setRefreshing(false);
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<SafeAreaView style={[styles.container, { backgroundColor: theme.background }]}>
|
||||
<View style={styles.topHeader}>
|
||||
<Pressable onPress={() => router.push('/profile')}>
|
||||
<ArrowLeft color={theme.text} />
|
||||
</Pressable>
|
||||
<Text style={[styles.headerTitle, { color: theme.text }]}>{t('Xodimlar')}</Text>
|
||||
<Pressable onPress={() => router.push('/profile/employees/add')}>
|
||||
<Plus color={theme.primary} />
|
||||
</Pressable>
|
||||
</View>
|
||||
<ActivityIndicator size={'large'} />
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
if (isError) {
|
||||
return (
|
||||
<View style={[styles.container, { backgroundColor: theme.background }]}>
|
||||
<Text style={{ color: 'red', marginTop: 50, textAlign: 'center' }}>
|
||||
{t('Xatolik yuz berdi')}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<SafeAreaView style={[styles.container, { backgroundColor: theme.background }]}>
|
||||
<View style={styles.topHeader}>
|
||||
<Pressable onPress={() => router.push('/profile')}>
|
||||
<ArrowLeft color={theme.text} />
|
||||
</Pressable>
|
||||
<Text style={[styles.headerTitle, { color: theme.text }]}>{t('Xodimlar')}</Text>
|
||||
<Pressable onPress={() => router.push('/profile/employees/add')}>
|
||||
<Plus color={theme.primary} />
|
||||
</Pressable>
|
||||
</View>
|
||||
|
||||
<FlatList
|
||||
data={allEmployees}
|
||||
keyExtractor={(item) => item.phone}
|
||||
renderItem={renderItem}
|
||||
contentContainerStyle={styles.list}
|
||||
onEndReached={() => {
|
||||
if (hasNextPage && !isFetchingNextPage) {
|
||||
fetchNextPage();
|
||||
}
|
||||
}}
|
||||
onEndReachedThreshold={0.5}
|
||||
refreshControl={
|
||||
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor={theme.primary} />
|
||||
}
|
||||
ListFooterComponent={isFetchingNextPage ? <ActivityIndicator size={'large'} /> : null}
|
||||
ListEmptyComponent={
|
||||
<View style={styles.emptyContainer}>
|
||||
<User size={64} color={theme.emptyIcon} />
|
||||
<Text style={[styles.emptyText, { color: theme.textSecondary }]}>
|
||||
{t("Hozircha xodimlar yo'q")}
|
||||
</Text>
|
||||
<Pressable
|
||||
style={[styles.emptyButton, { backgroundColor: theme.primary }]}
|
||||
onPress={() => router.push('/profile/employees/add')}
|
||||
>
|
||||
<Plus size={20} color="#fff" />
|
||||
<Text style={styles.emptyButtonText}>{t("Xodim qo'shish")}</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
}
|
||||
/>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1 },
|
||||
addButton: { padding: 8 },
|
||||
list: { padding: 16, gap: 12 },
|
||||
card: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
borderRadius: 16,
|
||||
padding: 16,
|
||||
gap: 12,
|
||||
},
|
||||
iconContainer: {
|
||||
width: 56,
|
||||
height: 56,
|
||||
borderRadius: 28,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
infoContainer: { flex: 1, gap: 4 },
|
||||
name: { fontSize: 17, fontWeight: '700' },
|
||||
phone: { fontSize: 15, fontWeight: '500' },
|
||||
emptyContainer: { alignItems: 'center', justifyContent: 'center', paddingVertical: 80, gap: 16 },
|
||||
emptyText: { fontSize: 17, fontWeight: '600' },
|
||||
emptyButton: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
paddingHorizontal: 24,
|
||||
paddingVertical: 12,
|
||||
borderRadius: 12,
|
||||
marginTop: 8,
|
||||
},
|
||||
emptyButtonText: { fontSize: 16, fontWeight: '600', color: '#fff' },
|
||||
topHeader: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
padding: 16,
|
||||
alignItems: 'center',
|
||||
},
|
||||
headerTitle: { fontSize: 18, fontWeight: '700' },
|
||||
});
|
||||
302
screens/profile/ui/MyServices.tsx
Normal file
302
screens/profile/ui/MyServices.tsx
Normal file
@@ -0,0 +1,302 @@
|
||||
import { useTheme } from '@/components/ThemeContext';
|
||||
import { useGlobalRefresh } from '@/components/ui/RefreshContext';
|
||||
import { useInfiniteQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { Image as ExpoImage } from 'expo-image';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { ArrowLeft, Edit2, Package, Plus, Trash2 } from 'lucide-react-native';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Alert,
|
||||
FlatList,
|
||||
Pressable,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
} from 'react-native';
|
||||
import { RefreshControl } from 'react-native-gesture-handler';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { user_api } from '../lib/api';
|
||||
|
||||
const PAGE_SIZE = 5;
|
||||
|
||||
export default function MyServicesScreen() {
|
||||
const router = useRouter();
|
||||
const { onRefresh, refreshing } = useGlobalRefresh();
|
||||
const queryClient = useQueryClient();
|
||||
const { isDark } = useTheme();
|
||||
const { t } = useTranslation();
|
||||
|
||||
/* ================= QUERY ================= */
|
||||
const { data, isLoading, isError, fetchNextPage, hasNextPage } = useInfiniteQuery({
|
||||
queryKey: ['my_services'],
|
||||
queryFn: async ({ pageParam = 1 }) => {
|
||||
const res = await user_api.my_sevices({
|
||||
page: pageParam,
|
||||
my: true,
|
||||
page_size: PAGE_SIZE,
|
||||
});
|
||||
|
||||
const d = res?.data?.data;
|
||||
return {
|
||||
results: d?.results ?? [],
|
||||
current_page: d?.current_page ?? 1,
|
||||
total_pages: d?.total_pages ?? 1,
|
||||
};
|
||||
},
|
||||
getNextPageParam: (lastPage) =>
|
||||
lastPage.current_page < lastPage.total_pages ? lastPage.current_page + 1 : undefined,
|
||||
initialPageParam: 1,
|
||||
});
|
||||
|
||||
const allServices = data?.pages.flatMap((p) => p.results) ?? [];
|
||||
|
||||
const { mutate } = useMutation({
|
||||
mutationFn: (id: number) => user_api.delete_service(id),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['my_services'] });
|
||||
},
|
||||
});
|
||||
|
||||
const handleDelete = (id: number) => {
|
||||
Alert.alert(t("Xizmatni o'chirish"), t("Rostdan ham bu xizmatni o'chirmoqchimisiz?"), [
|
||||
{ text: t('Bekor qilish'), style: 'cancel' },
|
||||
{
|
||||
text: t("O'chirish"),
|
||||
style: 'destructive',
|
||||
onPress: () => mutate(id),
|
||||
},
|
||||
]);
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<SafeAreaView style={[styles.container, { backgroundColor: isDark ? '#0f172a' : '#f8fafc' }]}>
|
||||
<View style={[styles.topHeader, { backgroundColor: isDark ? '#0f172a' : '#ffffff' }]}>
|
||||
<Pressable onPress={() => router.push('/profile')}>
|
||||
<ArrowLeft color={isDark ? '#fff' : '#0f172a'} />
|
||||
</Pressable>
|
||||
<Text style={[styles.headerTitle, { color: isDark ? '#fff' : '#0f172a' }]}>
|
||||
{t('Xizmatlar')}
|
||||
</Text>
|
||||
<Pressable onPress={() => router.push('/profile/products/add')}>
|
||||
<Plus color="#3b82f6" />
|
||||
</Pressable>
|
||||
</View>
|
||||
<ActivityIndicator size={'large'} />
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
if (isError) {
|
||||
return (
|
||||
<View style={[styles.center, { backgroundColor: isDark ? '#0f172a' : '#f8fafc' }]}>
|
||||
<Text style={styles.error}>{t('Xatolik yuz berdi')}</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<SafeAreaView style={[styles.container, { backgroundColor: isDark ? '#0f172a' : '#f8fafc' }]}>
|
||||
{/* HEADER */}
|
||||
<View style={[styles.topHeader, { backgroundColor: isDark ? '#0f172a' : '#ffffff' }]}>
|
||||
<Pressable onPress={() => router.push('/profile')}>
|
||||
<ArrowLeft color={isDark ? '#fff' : '#0f172a'} />
|
||||
</Pressable>
|
||||
<Text style={[styles.headerTitle, { color: isDark ? '#fff' : '#0f172a' }]}>
|
||||
{t('Xizmatlar')}
|
||||
</Text>
|
||||
<Pressable onPress={() => router.push('/profile/products/add')}>
|
||||
<Plus color="#3b82f6" />
|
||||
</Pressable>
|
||||
</View>
|
||||
|
||||
{/* LIST */}
|
||||
<FlatList
|
||||
data={allServices}
|
||||
keyExtractor={(item) => item.id.toString()}
|
||||
contentContainerStyle={styles.list}
|
||||
onEndReached={() => hasNextPage && fetchNextPage()}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={refreshing}
|
||||
onRefresh={onRefresh}
|
||||
colors={['#2563eb']}
|
||||
tintColor="#2563eb"
|
||||
/>
|
||||
}
|
||||
renderItem={({ item }) => {
|
||||
const fileUrl = item.files?.length > 0 ? item.files[0]?.file : null;
|
||||
|
||||
return (
|
||||
<Pressable
|
||||
style={[
|
||||
styles.card,
|
||||
{
|
||||
backgroundColor: isDark ? '#1e293b' : '#ffffff',
|
||||
shadowColor: isDark ? '#000' : '#0f172a',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: isDark ? 0.3 : 0.08,
|
||||
shadowRadius: 12,
|
||||
elevation: 4,
|
||||
},
|
||||
]}
|
||||
onPress={() =>
|
||||
router.push({ pathname: `/profile/products/edit/[id]`, params: { id: item.id } })
|
||||
}
|
||||
>
|
||||
{/* MEDIA */}
|
||||
<View
|
||||
style={[styles.mediaContainer, { backgroundColor: isDark ? '#334155' : '#e2e8f0' }]}
|
||||
>
|
||||
{fileUrl ? (
|
||||
<ExpoImage
|
||||
source={{ uri: fileUrl }}
|
||||
style={styles.media}
|
||||
contentFit="cover"
|
||||
transition={200}
|
||||
/>
|
||||
) : (
|
||||
<View style={styles.videoPlaceholder}>
|
||||
<Text style={{ color: isDark ? '#64748b' : '#94a3b8' }}>{t("Media yo'q")}</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* CONTENT */}
|
||||
<View style={styles.actions}>
|
||||
<Pressable
|
||||
style={styles.actionButton}
|
||||
onPress={(e) => {
|
||||
e.stopPropagation();
|
||||
router.push({
|
||||
pathname: `/profile/products/edit/[id]`,
|
||||
params: { id: item.id },
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Edit2 size={18} color="#3b82f6" />
|
||||
</Pressable>
|
||||
<Pressable
|
||||
style={styles.actionButton}
|
||||
onPress={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDelete(item.id);
|
||||
}}
|
||||
>
|
||||
<Trash2 size={18} color="#ef4444" />
|
||||
</Pressable>
|
||||
</View>
|
||||
<View style={styles.contentContainer}>
|
||||
<Text style={[styles.title, { color: isDark ? '#f8fafc' : '#0f172a' }]}>
|
||||
{item.title}
|
||||
</Text>
|
||||
<Text
|
||||
style={[styles.description, { color: isDark ? '#94a3b8' : '#64748b' }]}
|
||||
numberOfLines={2}
|
||||
>
|
||||
{item.description}
|
||||
</Text>
|
||||
|
||||
<View style={styles.categoriesContainer}>
|
||||
{item.category.map((category, index) => (
|
||||
<View
|
||||
key={index}
|
||||
style={[
|
||||
styles.categoryChip,
|
||||
{ backgroundColor: isDark ? '#334155' : '#e2e8f0' },
|
||||
]}
|
||||
>
|
||||
<Text
|
||||
style={[styles.categoryText, { color: isDark ? '#94a3b8' : '#64748b' }]}
|
||||
>
|
||||
{category.name}
|
||||
</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
</Pressable>
|
||||
);
|
||||
}}
|
||||
ListEmptyComponent={
|
||||
<View style={styles.emptyContainer}>
|
||||
<Package size={64} color={isDark ? '#334155' : '#cbd5e1'} />
|
||||
<Text style={[styles.emptyText, { color: isDark ? '#64748b' : '#94a3b8' }]}>
|
||||
{t("Hozircha xizmatlar yo'q")}
|
||||
</Text>
|
||||
<Pressable
|
||||
style={styles.emptyButton}
|
||||
onPress={() => router.push('/profile/products/add')}
|
||||
>
|
||||
<Plus size={20} color="#ffffff" />
|
||||
<Text style={styles.emptyButtonText}>{t("Xizmat qo'shish")}</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
}
|
||||
/>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
/* ================= STYLES ================= */
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1 },
|
||||
topHeader: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
padding: 16,
|
||||
alignItems: 'center',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 4,
|
||||
elevation: 3,
|
||||
},
|
||||
headerTitle: { fontSize: 18, fontWeight: '700', flex: 1, marginLeft: 10 },
|
||||
list: { padding: 16, gap: 16 },
|
||||
card: { borderRadius: 20, overflow: 'hidden' },
|
||||
mediaContainer: { width: '100%', height: 200 },
|
||||
media: { width: '100%', height: '100%' },
|
||||
videoPlaceholder: { flex: 1, justifyContent: 'center', alignItems: 'center' },
|
||||
contentContainer: { padding: 20, gap: 12 },
|
||||
title: { fontSize: 18, fontWeight: '700' as const },
|
||||
description: { fontSize: 15, lineHeight: 22 },
|
||||
categoriesContainer: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 },
|
||||
categoryChip: {
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 6,
|
||||
borderRadius: 12,
|
||||
},
|
||||
categoryText: { fontSize: 13, fontWeight: '500' as const },
|
||||
emptyContainer: { alignItems: 'center', justifyContent: 'center', paddingVertical: 80, gap: 16 },
|
||||
emptyText: { fontSize: 17, fontWeight: '600' as const },
|
||||
emptyButton: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
backgroundColor: '#3b82f6',
|
||||
paddingHorizontal: 24,
|
||||
paddingVertical: 12,
|
||||
borderRadius: 12,
|
||||
marginTop: 8,
|
||||
},
|
||||
emptyButtonText: { fontSize: 16, fontWeight: '600' as const, color: '#ffffff' },
|
||||
center: { flex: 1, justifyContent: 'center', alignItems: 'center' },
|
||||
loading: { fontSize: 16, fontWeight: '500' },
|
||||
error: { color: '#ef4444', fontSize: 16, fontWeight: '500' },
|
||||
actions: {
|
||||
flexDirection: 'row',
|
||||
position: 'absolute',
|
||||
right: 5,
|
||||
top: 5,
|
||||
gap: 8,
|
||||
},
|
||||
actionButton: {
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: 18,
|
||||
backgroundColor: '#ffffff',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
});
|
||||
460
screens/profile/ui/PersonalInfoTab.tsx
Normal file
460
screens/profile/ui/PersonalInfoTab.tsx
Normal file
@@ -0,0 +1,460 @@
|
||||
import { formatPhone, normalizeDigits } from '@/constants/formatPhone';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { Edit2, Plus } from 'lucide-react-native';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Alert, Modal, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
|
||||
import { user_api } from '../lib/api';
|
||||
import { useProfileData } from '../lib/ProfileDataContext';
|
||||
import { UserInfoResponseData } from '../lib/type';
|
||||
|
||||
export function PersonalInfoTab() {
|
||||
const { personalInfo, updatePersonalInfo } = useProfileData();
|
||||
const [editModalVisible, setEditModalVisible] = useState(false);
|
||||
const [addFieldModalVisible, setAddFieldModalVisible] = useState(false);
|
||||
const [newField, setNewField] = useState('');
|
||||
const [focused, setFocused] = useState(false);
|
||||
const [editData, setEditData] = useState<UserInfoResponseData | undefined>(undefined);
|
||||
const [phone, setPhone] = useState('');
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
// GET ME
|
||||
const {
|
||||
data: me,
|
||||
isLoading,
|
||||
isError,
|
||||
} = useQuery({
|
||||
queryKey: ['get_me'],
|
||||
queryFn: () => user_api.getMe(),
|
||||
select: (res) => {
|
||||
setEditData(res.data.data);
|
||||
setPhone(res.data.data.phone || '');
|
||||
return res;
|
||||
},
|
||||
});
|
||||
|
||||
// UPDATE ME mutation
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: (body: {
|
||||
first_name: string;
|
||||
industries: {
|
||||
id: number;
|
||||
name: string;
|
||||
code: string;
|
||||
external_id: null | number;
|
||||
level: number;
|
||||
is_leaf: boolean;
|
||||
icon_name: null | string;
|
||||
parent: {
|
||||
id: number;
|
||||
name: string;
|
||||
code: string;
|
||||
};
|
||||
}[];
|
||||
phone: string;
|
||||
person_type: 'employee' | 'legal_entity' | 'ytt' | 'band';
|
||||
}) => user_api.updateMe(body),
|
||||
onSuccess: (res) => {
|
||||
queryClient.invalidateQueries({ queryKey: ['get_me'] });
|
||||
setEditModalVisible(false);
|
||||
Alert.alert('Muvaffaqiyat', 'Ma’lumotlar yangilandi');
|
||||
},
|
||||
onError: () => {
|
||||
Alert.alert('Xatolik', 'Ma’lumotlarni yangilashda xatolik yuz berdi');
|
||||
},
|
||||
});
|
||||
|
||||
// const handleSave = () => {
|
||||
// if (!editData) return;
|
||||
|
||||
// // Backendga yuboriladigan data
|
||||
// const payload: {
|
||||
// first_name: string;
|
||||
// industries: {
|
||||
// id: number;
|
||||
// name: string;
|
||||
// code: string;
|
||||
// external_id: null | number;
|
||||
// level: number;
|
||||
// is_leaf: boolean;
|
||||
// icon_name: null | string;
|
||||
// parent: {
|
||||
// id: number;
|
||||
// name: string;
|
||||
// code: string;
|
||||
// };
|
||||
// }[];
|
||||
// person_type: 'employee' | 'legal_entity' | 'ytt' | 'band';
|
||||
// phone: string;
|
||||
// } = {
|
||||
// first_name: editData.director_full_name,
|
||||
// phone: normalizeDigits(phone),
|
||||
// industries:
|
||||
// };
|
||||
|
||||
// updateMutation.mutate();
|
||||
// };
|
||||
|
||||
const handlePhone = (text: string) => {
|
||||
const n = normalizeDigits(text);
|
||||
setPhone(n);
|
||||
};
|
||||
|
||||
const handleAddField = () => {
|
||||
if (newField.trim()) {
|
||||
updatePersonalInfo({
|
||||
activityFields: [...personalInfo.activityFields, newField.trim()],
|
||||
});
|
||||
setNewField('');
|
||||
setAddFieldModalVisible(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveField = (field: string) => {
|
||||
Alert.alert('Soha olib tashlash', `"${field}" sohasini olib tashlashni xohlaysizmi?`, [
|
||||
{ text: 'Bekor qilish', style: 'cancel' },
|
||||
{
|
||||
text: 'Olib tashlash',
|
||||
style: 'destructive',
|
||||
onPress: () => {
|
||||
updatePersonalInfo({
|
||||
activityFields: personalInfo.activityFields.filter((f) => f !== field),
|
||||
});
|
||||
},
|
||||
},
|
||||
]);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (me?.data.data) {
|
||||
setEditData(me.data.data);
|
||||
setPhone(me.data.data.phone || '');
|
||||
}
|
||||
}, [me]);
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
{/* Personal Info Card */}
|
||||
<View style={styles.card}>
|
||||
<View style={styles.cardHeader}>
|
||||
<Text style={styles.cardTitle}>Shaxsiy ma'lumotlar</Text>
|
||||
<Pressable onPress={() => setEditModalVisible(true)} style={styles.editButton}>
|
||||
<Edit2 size={18} color="#3b82f6" />
|
||||
<Text style={styles.editButtonText}>Tahrirlash</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
|
||||
<View style={styles.infoRow}>
|
||||
<Text style={styles.label}>Ism</Text>
|
||||
<Text style={styles.value}>{me?.data.data.director_full_name}</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.infoRow}>
|
||||
<Text style={styles.label}>Telefon raqam</Text>
|
||||
<Text style={styles.value}>+{me?.data.data.phone}</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.infoRow}>
|
||||
<Text style={styles.label}>Foydalanuvchi turi</Text>
|
||||
<Text style={styles.value}>
|
||||
{me?.data.data.person_type === 'employee'
|
||||
? 'Xodim'
|
||||
: me?.data.data.person_type === 'legal_entity'
|
||||
? 'Yuridik shaxs'
|
||||
: me?.data.data.person_type === 'ytt'
|
||||
? 'Yakka tartibdagi tadbirkor'
|
||||
: "O'zini o'zi band qilgan shaxs"}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Activity Fields Card */}
|
||||
<View style={styles.card}>
|
||||
<View style={styles.cardHeader}>
|
||||
<Text style={styles.cardTitle}>Faoliyat sohalari</Text>
|
||||
<Pressable onPress={() => setAddFieldModalVisible(true)} style={styles.addButton}>
|
||||
<Plus size={18} color="#10b981" />
|
||||
<Text style={styles.addButtonText}>Qo'shish</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
|
||||
<View style={styles.fieldsContainer}>
|
||||
{me?.data.data.activate_types.map((field) => (
|
||||
<View key={field.id} style={styles.fieldChip}>
|
||||
<Text style={styles.fieldText}>{field.name}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Edit Modal */}
|
||||
<Modal
|
||||
visible={editModalVisible}
|
||||
transparent
|
||||
animationType="slide"
|
||||
onRequestClose={() => setEditModalVisible(false)}
|
||||
>
|
||||
<View style={styles.modalOverlay}>
|
||||
<View style={styles.modalContent}>
|
||||
<Text style={styles.modalTitle}>Ma'lumotlarni tahrirlash</Text>
|
||||
|
||||
<Text style={styles.inputLabel}>Ism</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={editData?.director_full_name}
|
||||
onChangeText={(text) =>
|
||||
setEditData((prev) => prev && { ...prev, director_full_name: text })
|
||||
}
|
||||
placeholderTextColor="#64748b"
|
||||
/>
|
||||
|
||||
<Text style={styles.label}>Telefon</Text>
|
||||
<View style={styles.inputBox}>
|
||||
<View style={styles.prefixContainer}>
|
||||
<Text style={[styles.prefix, focused && styles.prefixFocused]}>+998</Text>
|
||||
<View style={styles.divider} />
|
||||
</View>
|
||||
<TextInput
|
||||
style={{ ...styles.input, borderWidth: 0 }}
|
||||
value={formatPhone(phone)}
|
||||
onChangeText={handlePhone}
|
||||
onFocus={() => setFocused(true)}
|
||||
onBlur={() => setFocused(false)}
|
||||
keyboardType="phone-pad"
|
||||
placeholder="90 123 45 67"
|
||||
maxLength={12}
|
||||
placeholderTextColor="#94a3b8"
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.modalButtons}>
|
||||
<Pressable
|
||||
onPress={() => setEditModalVisible(false)}
|
||||
style={[styles.modalButton, styles.cancelButton]}
|
||||
>
|
||||
<Text style={styles.cancelButtonText}>Bekor qilish</Text>
|
||||
</Pressable>
|
||||
<Pressable style={[styles.modalButton, styles.saveButton]}>
|
||||
<Text style={styles.saveButtonText}>Saqlash</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
|
||||
{/* Add Field Modal */}
|
||||
<Modal
|
||||
visible={addFieldModalVisible}
|
||||
transparent
|
||||
animationType="slide"
|
||||
onRequestClose={() => setAddFieldModalVisible(false)}
|
||||
>
|
||||
<View style={styles.modalOverlay}>
|
||||
<View style={styles.modalContent}>
|
||||
<Text style={styles.modalTitle}>Faoliyat sohasini qo'shish</Text>
|
||||
|
||||
<Text style={styles.inputLabel}>Soha nomi</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={newField}
|
||||
onChangeText={setNewField}
|
||||
placeholder="Masalan: IT"
|
||||
placeholderTextColor="#64748b"
|
||||
/>
|
||||
|
||||
<View style={styles.modalButtons}>
|
||||
<Pressable
|
||||
onPress={() => {
|
||||
setNewField('');
|
||||
setAddFieldModalVisible(false);
|
||||
}}
|
||||
style={[styles.modalButton, styles.cancelButton]}
|
||||
>
|
||||
<Text style={styles.cancelButtonText}>Bekor qilish</Text>
|
||||
</Pressable>
|
||||
<Pressable onPress={handleAddField} style={[styles.modalButton, styles.saveButton]}>
|
||||
<Text style={styles.saveButtonText}>Qo'shish</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
padding: 16,
|
||||
gap: 16,
|
||||
paddingBottom: 100,
|
||||
},
|
||||
divider: {
|
||||
width: 1.5,
|
||||
height: 24,
|
||||
backgroundColor: '#fff',
|
||||
marginLeft: 12,
|
||||
},
|
||||
prefix: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
color: '#fff',
|
||||
letterSpacing: 0.3,
|
||||
},
|
||||
prefixFocused: {
|
||||
color: '#fff',
|
||||
},
|
||||
prefixContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginRight: 12,
|
||||
},
|
||||
inputBox: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#1e293b',
|
||||
borderRadius: 16,
|
||||
borderWidth: 1,
|
||||
borderColor: '#334155',
|
||||
paddingHorizontal: 16,
|
||||
height: 56,
|
||||
},
|
||||
card: {
|
||||
backgroundColor: '#1e293b',
|
||||
borderRadius: 16,
|
||||
padding: 20,
|
||||
gap: 16,
|
||||
},
|
||||
cardHeader: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
},
|
||||
cardTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: '700' as const,
|
||||
color: '#f8fafc',
|
||||
},
|
||||
editButton: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 6,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 8,
|
||||
borderRadius: 8,
|
||||
backgroundColor: '#1e40af20',
|
||||
},
|
||||
editButtonText: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600' as const,
|
||||
color: '#3b82f6',
|
||||
},
|
||||
addButton: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 6,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 8,
|
||||
borderRadius: 8,
|
||||
backgroundColor: '#10b98120',
|
||||
},
|
||||
addButtonText: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600' as const,
|
||||
color: '#10b981',
|
||||
},
|
||||
infoRow: {
|
||||
gap: 6,
|
||||
},
|
||||
label: {
|
||||
fontSize: 13,
|
||||
color: '#94a3b8',
|
||||
fontWeight: '500' as const,
|
||||
},
|
||||
value: {
|
||||
fontSize: 16,
|
||||
color: '#f8fafc',
|
||||
fontWeight: '600' as const,
|
||||
},
|
||||
fieldsContainer: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
gap: 8,
|
||||
},
|
||||
fieldChip: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 8,
|
||||
borderRadius: 20,
|
||||
backgroundColor: '#334155',
|
||||
},
|
||||
fieldText: {
|
||||
fontSize: 14,
|
||||
color: '#f8fafc',
|
||||
fontWeight: '600' as const,
|
||||
},
|
||||
modalOverlay: {
|
||||
flex: 1,
|
||||
backgroundColor: '#00000090',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
padding: 20,
|
||||
},
|
||||
modalContent: {
|
||||
width: '100%',
|
||||
maxWidth: 400,
|
||||
backgroundColor: '#1e293b',
|
||||
borderRadius: 20,
|
||||
padding: 24,
|
||||
gap: 16,
|
||||
},
|
||||
modalTitle: {
|
||||
fontSize: 20,
|
||||
fontWeight: '700' as const,
|
||||
color: '#f8fafc',
|
||||
marginBottom: 8,
|
||||
},
|
||||
inputLabel: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600' as const,
|
||||
color: '#94a3b8',
|
||||
marginBottom: -8,
|
||||
},
|
||||
input: {
|
||||
borderRadius: 12,
|
||||
padding: 14,
|
||||
fontSize: 16,
|
||||
color: '#f8fafc',
|
||||
borderWidth: 1,
|
||||
borderColor: '#334155',
|
||||
},
|
||||
modalButtons: {
|
||||
flexDirection: 'row',
|
||||
gap: 12,
|
||||
marginTop: 8,
|
||||
},
|
||||
modalButton: {
|
||||
flex: 1,
|
||||
paddingVertical: 14,
|
||||
borderRadius: 12,
|
||||
alignItems: 'center',
|
||||
},
|
||||
cancelButton: {
|
||||
backgroundColor: '#334155',
|
||||
},
|
||||
saveButton: {
|
||||
backgroundColor: '#3b82f6',
|
||||
},
|
||||
cancelButtonText: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600' as const,
|
||||
color: '#f8fafc',
|
||||
},
|
||||
saveButtonText: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600' as const,
|
||||
color: '#ffffff',
|
||||
},
|
||||
});
|
||||
550
screens/profile/ui/ProductServicesTab.tsx
Normal file
550
screens/profile/ui/ProductServicesTab.tsx
Normal file
@@ -0,0 +1,550 @@
|
||||
import { Image as ExpoImage } from 'expo-image';
|
||||
import { FileVideo, Image as ImageIcon, Plus } from 'lucide-react-native';
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
Alert,
|
||||
FlatList,
|
||||
Modal,
|
||||
Pressable,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TextInput,
|
||||
View,
|
||||
} from 'react-native';
|
||||
import { useProfileData } from '../lib/ProfileDataContext';
|
||||
|
||||
const CATEGORIES = [
|
||||
'Qurilish',
|
||||
'Savdo',
|
||||
'IT',
|
||||
'Dizayn',
|
||||
'Transport',
|
||||
"Ta'lim",
|
||||
"Sog'liqni saqlash",
|
||||
'Restoran',
|
||||
'Turizm',
|
||||
'Sport',
|
||||
];
|
||||
|
||||
export function ProductServicesTab() {
|
||||
const { productServices, addProductService } = useProfileData();
|
||||
const [modalVisible, setModalVisible] = useState(false);
|
||||
const [step, setStep] = useState<1 | 2>(1);
|
||||
|
||||
const [title, setTitle] = useState('');
|
||||
const [description, setDescription] = useState('');
|
||||
const [mediaUrl, setMediaUrl] = useState('');
|
||||
const [mediaType, setMediaType] = useState<'image' | 'video'>('image');
|
||||
const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
|
||||
|
||||
const resetForm = () => {
|
||||
setTitle('');
|
||||
setDescription('');
|
||||
setMediaUrl('');
|
||||
setMediaType('image');
|
||||
setSelectedCategories([]);
|
||||
setStep(1);
|
||||
};
|
||||
|
||||
const handleNext = () => {
|
||||
if (!title.trim() || !description.trim() || !mediaUrl.trim()) {
|
||||
Alert.alert('Xato', "Barcha maydonlarni to'ldiring");
|
||||
return;
|
||||
}
|
||||
setStep(2);
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
if (selectedCategories.length === 0) {
|
||||
Alert.alert('Xato', 'Kamida bitta kategoriya tanlang');
|
||||
return;
|
||||
}
|
||||
|
||||
addProductService({
|
||||
title: title.trim(),
|
||||
description: description.trim(),
|
||||
mediaUrl: mediaUrl.trim(),
|
||||
mediaType,
|
||||
categories: selectedCategories,
|
||||
});
|
||||
|
||||
resetForm();
|
||||
setModalVisible(false);
|
||||
Alert.alert('Muvaffaqiyat', "Xizmat muvaffaqiyatli qo'shildi");
|
||||
};
|
||||
|
||||
const toggleCategory = (category: string) => {
|
||||
setSelectedCategories((prev) =>
|
||||
prev.includes(category) ? prev.filter((c) => c !== category) : [...prev, category]
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Pressable onPress={() => setModalVisible(true)} style={styles.addButton}>
|
||||
<Plus size={20} color="#ffffff" />
|
||||
<Text style={styles.addButtonText}>Xizmat qo'shish</Text>
|
||||
</Pressable>
|
||||
|
||||
<FlatList
|
||||
data={productServices}
|
||||
keyExtractor={(item) => item.id}
|
||||
contentContainerStyle={styles.list}
|
||||
renderItem={({ item }) => (
|
||||
<View style={styles.card}>
|
||||
<View style={styles.mediaContainer}>
|
||||
{item.mediaType === 'image' ? (
|
||||
<ExpoImage
|
||||
source={{ uri: item.mediaUrl }}
|
||||
style={styles.media}
|
||||
contentFit="cover"
|
||||
/>
|
||||
) : (
|
||||
<View style={styles.videoPlaceholder}>
|
||||
<FileVideo size={40} color="#64748b" />
|
||||
<Text style={styles.videoText}>Video</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View style={styles.contentContainer}>
|
||||
<Text style={styles.title}>{item.title}</Text>
|
||||
<Text style={styles.description} numberOfLines={2}>
|
||||
{item.description}
|
||||
</Text>
|
||||
|
||||
<View style={styles.categoriesContainer}>
|
||||
{item.categories.map((category, index) => (
|
||||
<View key={index} style={styles.categoryChip}>
|
||||
<Text style={styles.categoryText}>{category}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
ListEmptyComponent={
|
||||
<View style={styles.emptyContainer}>
|
||||
<ImageIcon size={48} color="#475569" />
|
||||
<Text style={styles.emptyText}>Hozircha xizmatlar yo'q</Text>
|
||||
<Text style={styles.emptySubtext}>
|
||||
Yangi xizmat qo'shish uchun yuqoridagi tugmani bosing
|
||||
</Text>
|
||||
</View>
|
||||
}
|
||||
/>
|
||||
|
||||
<Modal
|
||||
visible={modalVisible}
|
||||
transparent
|
||||
animationType="slide"
|
||||
onRequestClose={() => {
|
||||
resetForm();
|
||||
setModalVisible(false);
|
||||
}}
|
||||
>
|
||||
<View style={styles.modalOverlay}>
|
||||
<View style={styles.modalContent}>
|
||||
<View style={styles.modalHeader}>
|
||||
<Text style={styles.modalTitle}>
|
||||
{step === 1 ? "Xizmat ma'lumotlari" : 'Kategoriyalarni tanlang'}
|
||||
</Text>
|
||||
<View style={styles.stepIndicator}>
|
||||
<View style={[styles.stepDot, step >= 1 && styles.stepDotActive]} />
|
||||
<View style={[styles.stepLine, step >= 2 && styles.stepLineActive]} />
|
||||
<View style={[styles.stepDot, step >= 2 && styles.stepDotActive]} />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{step === 1 ? (
|
||||
<ScrollView showsVerticalScrollIndicator={false}>
|
||||
<Text style={styles.inputLabel}>Nomi</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={title}
|
||||
onChangeText={setTitle}
|
||||
placeholder="Xizmat nomi"
|
||||
placeholderTextColor="#64748b"
|
||||
/>
|
||||
|
||||
<Text style={styles.inputLabel}>Tavsif</Text>
|
||||
<TextInput
|
||||
style={[styles.input, styles.textArea]}
|
||||
value={description}
|
||||
onChangeText={setDescription}
|
||||
placeholder="Xizmat haqida batafsil ma'lumot"
|
||||
placeholderTextColor="#64748b"
|
||||
multiline
|
||||
numberOfLines={4}
|
||||
textAlignVertical="top"
|
||||
/>
|
||||
|
||||
<Text style={styles.inputLabel}>Media turi</Text>
|
||||
<View style={styles.mediaTypeContainer}>
|
||||
<Pressable
|
||||
onPress={() => setMediaType('image')}
|
||||
style={[
|
||||
styles.mediaTypeButton,
|
||||
mediaType === 'image' && styles.mediaTypeButtonActive,
|
||||
]}
|
||||
>
|
||||
<ImageIcon size={20} color={mediaType === 'image' ? '#3b82f6' : '#64748b'} />
|
||||
<Text
|
||||
style={[
|
||||
styles.mediaTypeText,
|
||||
mediaType === 'image' && styles.mediaTypeTextActive,
|
||||
]}
|
||||
>
|
||||
Rasm
|
||||
</Text>
|
||||
</Pressable>
|
||||
<Pressable
|
||||
onPress={() => setMediaType('video')}
|
||||
style={[
|
||||
styles.mediaTypeButton,
|
||||
mediaType === 'video' && styles.mediaTypeButtonActive,
|
||||
]}
|
||||
>
|
||||
<FileVideo size={20} color={mediaType === 'video' ? '#3b82f6' : '#64748b'} />
|
||||
<Text
|
||||
style={[
|
||||
styles.mediaTypeText,
|
||||
mediaType === 'video' && styles.mediaTypeTextActive,
|
||||
]}
|
||||
>
|
||||
Video
|
||||
</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
|
||||
<Text style={styles.inputLabel}>Media URL</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={mediaUrl}
|
||||
onChangeText={setMediaUrl}
|
||||
placeholder="https://..."
|
||||
placeholderTextColor="#64748b"
|
||||
keyboardType="url"
|
||||
/>
|
||||
|
||||
<View style={styles.modalButtons}>
|
||||
<Pressable
|
||||
onPress={() => {
|
||||
resetForm();
|
||||
setModalVisible(false);
|
||||
}}
|
||||
style={[styles.modalButton, styles.cancelButton]}
|
||||
>
|
||||
<Text style={styles.cancelButtonText}>Bekor qilish</Text>
|
||||
</Pressable>
|
||||
<Pressable onPress={handleNext} style={[styles.modalButton, styles.nextButton]}>
|
||||
<Text style={styles.nextButtonText}>Keyingisi</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</ScrollView>
|
||||
) : (
|
||||
<>
|
||||
<ScrollView showsVerticalScrollIndicator={false}>
|
||||
<View style={styles.categoriesGrid}>
|
||||
{CATEGORIES.map((category) => (
|
||||
<Pressable
|
||||
key={category}
|
||||
onPress={() => toggleCategory(category)}
|
||||
style={[
|
||||
styles.categoryOption,
|
||||
selectedCategories.includes(category) && styles.categoryOptionSelected,
|
||||
]}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.categoryOptionText,
|
||||
selectedCategories.includes(category) &&
|
||||
styles.categoryOptionTextSelected,
|
||||
]}
|
||||
>
|
||||
{category}
|
||||
</Text>
|
||||
</Pressable>
|
||||
))}
|
||||
</View>
|
||||
</ScrollView>
|
||||
|
||||
<View style={styles.modalButtons}>
|
||||
<Pressable
|
||||
onPress={() => setStep(1)}
|
||||
style={[styles.modalButton, styles.backButton]}
|
||||
>
|
||||
<Text style={styles.backButtonText}>Ortga</Text>
|
||||
</Pressable>
|
||||
<Pressable onPress={handleAdd} style={[styles.modalButton, styles.saveButton]}>
|
||||
<Text style={styles.saveButtonText}>Qo'shish</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
padding: 16,
|
||||
paddingBottom: 100,
|
||||
},
|
||||
addButton: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 8,
|
||||
backgroundColor: '#3b82f6',
|
||||
paddingVertical: 14,
|
||||
borderRadius: 12,
|
||||
marginBottom: 16,
|
||||
},
|
||||
addButtonText: {
|
||||
fontSize: 16,
|
||||
fontWeight: '700' as const,
|
||||
color: '#ffffff',
|
||||
},
|
||||
list: {
|
||||
gap: 16,
|
||||
},
|
||||
card: {
|
||||
backgroundColor: '#1e293b',
|
||||
borderRadius: 16,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
mediaContainer: {
|
||||
width: '100%',
|
||||
height: 200,
|
||||
backgroundColor: '#334155',
|
||||
},
|
||||
media: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
},
|
||||
videoPlaceholder: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 8,
|
||||
},
|
||||
videoText: {
|
||||
fontSize: 14,
|
||||
color: '#64748b',
|
||||
fontWeight: '600' as const,
|
||||
},
|
||||
contentContainer: {
|
||||
padding: 16,
|
||||
gap: 8,
|
||||
},
|
||||
title: {
|
||||
fontSize: 18,
|
||||
fontWeight: '700' as const,
|
||||
color: '#f8fafc',
|
||||
},
|
||||
description: {
|
||||
fontSize: 14,
|
||||
color: '#94a3b8',
|
||||
lineHeight: 20,
|
||||
},
|
||||
categoriesContainer: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
gap: 8,
|
||||
marginTop: 4,
|
||||
},
|
||||
categoryChip: {
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 6,
|
||||
borderRadius: 12,
|
||||
backgroundColor: '#334155',
|
||||
},
|
||||
categoryText: {
|
||||
fontSize: 12,
|
||||
color: '#94a3b8',
|
||||
fontWeight: '500' as const,
|
||||
},
|
||||
emptyContainer: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingVertical: 80,
|
||||
gap: 12,
|
||||
},
|
||||
emptyText: {
|
||||
fontSize: 18,
|
||||
fontWeight: '600' as const,
|
||||
color: '#64748b',
|
||||
},
|
||||
emptySubtext: {
|
||||
fontSize: 14,
|
||||
color: '#475569',
|
||||
textAlign: 'center',
|
||||
paddingHorizontal: 40,
|
||||
},
|
||||
modalOverlay: {
|
||||
flex: 1,
|
||||
backgroundColor: '#00000090',
|
||||
justifyContent: 'flex-end',
|
||||
},
|
||||
modalContent: {
|
||||
maxHeight: '90%',
|
||||
backgroundColor: '#1e293b',
|
||||
borderTopLeftRadius: 24,
|
||||
borderTopRightRadius: 24,
|
||||
padding: 24,
|
||||
gap: 20,
|
||||
},
|
||||
modalHeader: {
|
||||
gap: 12,
|
||||
},
|
||||
modalTitle: {
|
||||
fontSize: 22,
|
||||
fontWeight: '700' as const,
|
||||
color: '#f8fafc',
|
||||
},
|
||||
stepIndicator: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 4,
|
||||
},
|
||||
stepDot: {
|
||||
width: 10,
|
||||
height: 10,
|
||||
borderRadius: 5,
|
||||
backgroundColor: '#334155',
|
||||
},
|
||||
stepDotActive: {
|
||||
backgroundColor: '#3b82f6',
|
||||
},
|
||||
stepLine: {
|
||||
flex: 1,
|
||||
height: 2,
|
||||
backgroundColor: '#334155',
|
||||
},
|
||||
stepLineActive: {
|
||||
backgroundColor: '#3b82f6',
|
||||
},
|
||||
inputLabel: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600' as const,
|
||||
color: '#94a3b8',
|
||||
marginBottom: 8,
|
||||
marginTop: 8,
|
||||
},
|
||||
input: {
|
||||
backgroundColor: '#0f172a',
|
||||
borderRadius: 12,
|
||||
padding: 14,
|
||||
fontSize: 16,
|
||||
color: '#f8fafc',
|
||||
borderWidth: 1,
|
||||
borderColor: '#334155',
|
||||
},
|
||||
textArea: {
|
||||
height: 100,
|
||||
paddingTop: 14,
|
||||
},
|
||||
mediaTypeContainer: {
|
||||
flexDirection: 'row',
|
||||
gap: 12,
|
||||
},
|
||||
mediaTypeButton: {
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 8,
|
||||
paddingVertical: 14,
|
||||
borderRadius: 12,
|
||||
backgroundColor: '#0f172a',
|
||||
borderWidth: 1,
|
||||
borderColor: '#334155',
|
||||
},
|
||||
mediaTypeButtonActive: {
|
||||
borderColor: '#3b82f6',
|
||||
backgroundColor: '#1e40af20',
|
||||
},
|
||||
mediaTypeText: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600' as const,
|
||||
color: '#64748b',
|
||||
},
|
||||
mediaTypeTextActive: {
|
||||
color: '#3b82f6',
|
||||
},
|
||||
categoriesGrid: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
gap: 12,
|
||||
},
|
||||
categoryOption: {
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 12,
|
||||
borderRadius: 12,
|
||||
backgroundColor: '#0f172a',
|
||||
borderWidth: 1,
|
||||
borderColor: '#334155',
|
||||
},
|
||||
categoryOptionSelected: {
|
||||
backgroundColor: '#1e40af20',
|
||||
borderColor: '#3b82f6',
|
||||
},
|
||||
categoryOptionText: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600' as const,
|
||||
color: '#94a3b8',
|
||||
},
|
||||
categoryOptionTextSelected: {
|
||||
color: '#3b82f6',
|
||||
},
|
||||
modalButtons: {
|
||||
flexDirection: 'row',
|
||||
gap: 12,
|
||||
marginTop: 8,
|
||||
},
|
||||
modalButton: {
|
||||
flex: 1,
|
||||
paddingVertical: 14,
|
||||
borderRadius: 12,
|
||||
alignItems: 'center',
|
||||
},
|
||||
cancelButton: {
|
||||
backgroundColor: '#334155',
|
||||
},
|
||||
backButton: {
|
||||
backgroundColor: '#334155',
|
||||
},
|
||||
nextButton: {
|
||||
backgroundColor: '#3b82f6',
|
||||
},
|
||||
saveButton: {
|
||||
backgroundColor: '#10b981',
|
||||
},
|
||||
cancelButtonText: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600' as const,
|
||||
color: '#f8fafc',
|
||||
},
|
||||
backButtonText: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600' as const,
|
||||
color: '#f8fafc',
|
||||
},
|
||||
nextButtonText: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600' as const,
|
||||
color: '#ffffff',
|
||||
},
|
||||
saveButtonText: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600' as const,
|
||||
color: '#ffffff',
|
||||
},
|
||||
});
|
||||
182
screens/profile/ui/ProfileScreen.tsx
Normal file
182
screens/profile/ui/ProfileScreen.tsx
Normal file
@@ -0,0 +1,182 @@
|
||||
import { useTheme } from '@/components/ThemeContext';
|
||||
import { useGlobalRefresh } from '@/components/ui/RefreshContext';
|
||||
import { useRouter } from 'expo-router';
|
||||
import {
|
||||
Award,
|
||||
ChevronRight,
|
||||
Megaphone,
|
||||
Package,
|
||||
Settings,
|
||||
User,
|
||||
Users,
|
||||
} from 'lucide-react-native';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
||||
import { RefreshControl } from 'react-native-gesture-handler';
|
||||
|
||||
export default function Profile() {
|
||||
const router = useRouter();
|
||||
const { onRefresh, refreshing } = useGlobalRefresh();
|
||||
const { isDark } = useTheme();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const sections = [
|
||||
{
|
||||
title: 'Shaxsiy',
|
||||
items: [
|
||||
{ icon: User, label: "Shaxsiy ma'lumotlar", route: '/profile/personal-info' },
|
||||
{ icon: Users, label: 'Xodimlar', route: '/profile/employees' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Faoliyat',
|
||||
items: [
|
||||
{ icon: Megaphone, label: "E'lonlar", route: '/profile/my-ads' },
|
||||
{ icon: Award, label: 'Bonuslar', route: '/profile/bonuses' },
|
||||
{ icon: Package, label: 'Xizmatlar', route: '/profile/products' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Sozlamalar',
|
||||
items: [{ icon: Settings, label: 'Sozlamalar', route: '/profile/settings' }],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ScrollView
|
||||
style={[styles.content, isDark ? styles.darkBg : styles.lightBg]}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={refreshing}
|
||||
onRefresh={onRefresh}
|
||||
colors={['#3b82f6']}
|
||||
tintColor="#3b82f6"
|
||||
/>
|
||||
}
|
||||
>
|
||||
{sections.map((section, index) => (
|
||||
<View key={index} style={styles.section}>
|
||||
<Text style={[styles.sectionTitle, isDark ? styles.darkSubText : styles.lightSubText]}>
|
||||
{t(section.title)}
|
||||
</Text>
|
||||
|
||||
<View style={styles.sectionContent}>
|
||||
{section.items.map((item, idx) => (
|
||||
<TouchableOpacity
|
||||
key={idx}
|
||||
style={[styles.card, isDark ? styles.darkCard : styles.lightCard]}
|
||||
onPress={() => router.push(item.route as any)}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<View
|
||||
style={[styles.iconContainer, isDark ? styles.darkIconBg : styles.lightIconBg]}
|
||||
>
|
||||
<item.icon size={24} color="#3b82f6" />
|
||||
</View>
|
||||
|
||||
<Text style={[styles.cardLabel, isDark ? styles.darkText : styles.lightText]}>
|
||||
{t(item.label)}
|
||||
</Text>
|
||||
|
||||
<ChevronRight size={20} color={isDark ? '#64748b' : '#94a3b8'} />
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
content: {
|
||||
flex: 1,
|
||||
marginBottom: 50,
|
||||
},
|
||||
|
||||
darkBg: {
|
||||
backgroundColor: '#0f172a',
|
||||
},
|
||||
lightBg: {
|
||||
backgroundColor: '#f8fafc',
|
||||
},
|
||||
|
||||
section: {
|
||||
marginBottom: 4,
|
||||
paddingTop: 16,
|
||||
},
|
||||
|
||||
sectionTitle: {
|
||||
fontSize: 12,
|
||||
fontWeight: '700',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 1,
|
||||
paddingHorizontal: 20,
|
||||
marginBottom: 12,
|
||||
},
|
||||
|
||||
darkSubText: {
|
||||
color: '#64748b',
|
||||
},
|
||||
lightSubText: {
|
||||
color: '#64748b',
|
||||
},
|
||||
|
||||
sectionContent: {
|
||||
paddingHorizontal: 16,
|
||||
gap: 10,
|
||||
},
|
||||
|
||||
card: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
borderRadius: 14,
|
||||
padding: 16,
|
||||
gap: 14,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 8,
|
||||
elevation: 2,
|
||||
},
|
||||
|
||||
darkCard: {
|
||||
backgroundColor: '#1e293b',
|
||||
borderWidth: 1,
|
||||
borderColor: '#334155',
|
||||
},
|
||||
lightCard: {
|
||||
backgroundColor: '#ffffff',
|
||||
borderWidth: 1,
|
||||
borderColor: '#f1f5f9',
|
||||
},
|
||||
|
||||
iconContainer: {
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: 12,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
|
||||
darkIconBg: {
|
||||
backgroundColor: 'rgba(59, 130, 246, 0.15)',
|
||||
},
|
||||
lightIconBg: {
|
||||
backgroundColor: 'rgba(59, 130, 246, 0.1)',
|
||||
},
|
||||
|
||||
cardLabel: {
|
||||
flex: 1,
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
letterSpacing: 0.2,
|
||||
},
|
||||
|
||||
darkText: {
|
||||
color: '#f1f5f9',
|
||||
},
|
||||
lightText: {
|
||||
color: '#0f172a',
|
||||
},
|
||||
});
|
||||
211
screens/profile/ui/StepOneService.tsx
Normal file
211
screens/profile/ui/StepOneService.tsx
Normal file
@@ -0,0 +1,211 @@
|
||||
import { useTheme } from '@/components/ThemeContext';
|
||||
import * as ImagePicker from 'expo-image-picker';
|
||||
import { Camera, Play, X } from 'lucide-react-native';
|
||||
import React, { forwardRef, useImperativeHandle, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Image, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
|
||||
|
||||
type MediaType = { uri: string; type: 'image' | 'video' };
|
||||
type StepProps = {
|
||||
formData: any;
|
||||
updateForm: (key: string, value: any) => void;
|
||||
removeMedia: (index: number) => void;
|
||||
};
|
||||
|
||||
type Errors = {
|
||||
title?: string;
|
||||
description?: string;
|
||||
media?: string;
|
||||
};
|
||||
|
||||
const MAX_MEDIA = 10;
|
||||
|
||||
const StepOneServices = forwardRef(({ formData, updateForm, removeMedia }: StepProps, ref) => {
|
||||
const { isDark } = useTheme();
|
||||
const { t } = useTranslation();
|
||||
const [errors, setErrors] = useState<Errors>({});
|
||||
|
||||
const validate = () => {
|
||||
const e: Errors = {};
|
||||
|
||||
if (!formData.title || formData.title.trim().length < 5)
|
||||
e.title = t("Sarlavha kamida 5 ta belgidan iborat bo'lishi kerak");
|
||||
|
||||
if (!formData.description || formData.description.trim().length < 10)
|
||||
e.description = t("Tavsif kamida 10 ta belgidan iborat bo'lishi kerak");
|
||||
|
||||
if (!formData.media || formData.media.length === 0)
|
||||
e.media = t('Kamida bitta rasm yoki video yuklang');
|
||||
|
||||
setErrors(e);
|
||||
return Object.keys(e).length === 0;
|
||||
};
|
||||
|
||||
useImperativeHandle(ref, () => ({ validate }));
|
||||
|
||||
const pickMedia = async () => {
|
||||
if (formData.media.length >= MAX_MEDIA) return;
|
||||
|
||||
const result = await ImagePicker.launchImageLibraryAsync({
|
||||
mediaTypes: ImagePicker.MediaTypeOptions.All,
|
||||
allowsMultipleSelection: true,
|
||||
quality: 0.8,
|
||||
});
|
||||
|
||||
if (!result.canceled) {
|
||||
const assets = result.assets
|
||||
.slice(0, MAX_MEDIA - formData.media.length)
|
||||
.map((a) => ({ uri: a.uri, type: a.type as 'image' | 'video' }));
|
||||
|
||||
updateForm('media', [...formData.media, ...assets]);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.stepContainer}>
|
||||
{/* Sarlavha */}
|
||||
<Text style={[styles.label, { color: isDark ? '#f8fafc' : '#0f172a' }]}>{t('Sarlavha')}</Text>
|
||||
<View
|
||||
style={[
|
||||
styles.inputBox,
|
||||
{
|
||||
backgroundColor: isDark ? '#1e293b' : '#ffffff',
|
||||
borderColor: isDark ? '#334155' : '#e2e8f0',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<TextInput
|
||||
style={[styles.input, { color: isDark ? '#fff' : '#0f172a' }]}
|
||||
placeholder={t('Xizmat sarlavhasi')}
|
||||
placeholderTextColor={isDark ? '#94a3b8' : '#94a3b8'}
|
||||
value={formData.title}
|
||||
onChangeText={(t) => updateForm('title', t)}
|
||||
/>
|
||||
</View>
|
||||
{errors.title && <Text style={styles.error}>{errors.title}</Text>}
|
||||
|
||||
{/* Tavsif */}
|
||||
<Text style={[styles.label, { color: isDark ? '#f8fafc' : '#0f172a' }]}>{t('Tavsif')}</Text>
|
||||
<View
|
||||
style={[
|
||||
styles.inputBox,
|
||||
styles.textArea,
|
||||
{
|
||||
backgroundColor: isDark ? '#1e293b' : '#ffffff',
|
||||
borderColor: isDark ? '#334155' : '#e2e8f0',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<TextInput
|
||||
style={[styles.input, { color: isDark ? '#fff' : '#0f172a' }]}
|
||||
placeholder={t('Batafsil yozing...')}
|
||||
placeholderTextColor={isDark ? '#94a3b8' : '#94a3b8'}
|
||||
multiline
|
||||
value={formData.description}
|
||||
onChangeText={(t) => updateForm('description', t)}
|
||||
/>
|
||||
</View>
|
||||
{errors.description && <Text style={styles.error}>{errors.description}</Text>}
|
||||
|
||||
{/* Media */}
|
||||
<Text style={[styles.label, { color: isDark ? '#f8fafc' : '#0f172a' }]}>
|
||||
{t('Media')} ({formData.media.length}/{MAX_MEDIA})
|
||||
</Text>
|
||||
<View style={styles.media}>
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.upload,
|
||||
{
|
||||
borderColor: '#2563eb',
|
||||
backgroundColor: isDark ? '#1e293b' : '#f8fafc',
|
||||
},
|
||||
]}
|
||||
onPress={pickMedia}
|
||||
>
|
||||
<Camera size={28} color="#2563eb" />
|
||||
<Text style={styles.uploadText}>{t('Yuklash')}</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
{formData.media.map((m: MediaType, i: number) => (
|
||||
<View key={i} style={styles.preview}>
|
||||
<Image source={{ uri: m.uri }} style={styles.image} />
|
||||
{m.type === 'video' && (
|
||||
<View style={styles.play}>
|
||||
<Play size={14} color="#fff" fill="#fff" />
|
||||
</View>
|
||||
)}
|
||||
<TouchableOpacity style={styles.remove} onPress={() => removeMedia(i)}>
|
||||
<X size={12} color="#fff" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
{errors.media && <Text style={styles.error}>{errors.media}</Text>}
|
||||
</View>
|
||||
);
|
||||
});
|
||||
|
||||
export default StepOneServices;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
stepContainer: { gap: 10 },
|
||||
label: { fontWeight: '700', fontSize: 15 },
|
||||
error: { color: '#ef4444', fontSize: 13, marginLeft: 6 },
|
||||
inputBox: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
borderRadius: 16,
|
||||
borderWidth: 1,
|
||||
paddingHorizontal: 16,
|
||||
height: 56,
|
||||
},
|
||||
textArea: { height: 120, alignItems: 'flex-start', paddingTop: 16 },
|
||||
input: { flex: 1, fontSize: 16 },
|
||||
media: { flexDirection: 'row', flexWrap: 'wrap', gap: 10 },
|
||||
upload: {
|
||||
width: 100,
|
||||
height: 100,
|
||||
borderRadius: 16,
|
||||
borderWidth: 2,
|
||||
borderStyle: 'dashed',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
uploadText: { color: '#2563eb', fontSize: 11, marginTop: 4, fontWeight: '600' },
|
||||
preview: { width: 100, height: 100 },
|
||||
image: { width: '100%', height: '100%', borderRadius: 16 },
|
||||
play: {
|
||||
position: 'absolute',
|
||||
top: '40%',
|
||||
left: '40%',
|
||||
backgroundColor: 'rgba(0,0,0,.5)',
|
||||
padding: 6,
|
||||
borderRadius: 20,
|
||||
},
|
||||
remove: {
|
||||
position: 'absolute',
|
||||
top: -6,
|
||||
right: -6,
|
||||
backgroundColor: '#ef4444',
|
||||
padding: 4,
|
||||
borderRadius: 10,
|
||||
},
|
||||
prefixContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginRight: 12,
|
||||
},
|
||||
prefix: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
letterSpacing: 0.3,
|
||||
},
|
||||
prefixFocused: {
|
||||
color: '#fff',
|
||||
},
|
||||
divider: {
|
||||
width: 1.5,
|
||||
height: 24,
|
||||
marginLeft: 12,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user