fitst commit

screens/profile/ui/BonusesTab.tsx

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