fitst commit

screens/profile/ui/ProfileScreen.tsx

@@ -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',
+  },
+});