Initial commit

src/screens/status/ui/OrderDetailModal.tsx

@@ -0,0 +1,247 @@
+import React, { useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Animated,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import CloseIcon from 'svg/Close';
+import { DataInfo } from '../lib/data';
+
+interface Props {
+  visible: boolean;
+  setVisible: (val: boolean) => void;
+  selectedOrder: DataInfo | null;
+}
+
+const OrderDetailModal = ({ visible, setVisible, selectedOrder }: Props) => {
+  const opacity = useRef(new Animated.Value(0)).current;
+  const translateY = useRef(new Animated.Value(50)).current;
+  const { t } = useTranslation();
+
+  const parsePrice = (priceStr: string) => {
+    return Number(priceStr.replace(/[^\d]/g, ''));
+  };
+
+  const parseWeight = (weightStr: string) => {
+    return Number(weightStr.replace(/[^\d.]/g, ''));
+  };
+
+  const closeModal = () => {
+    Animated.timing(opacity, {
+      toValue: 0,
+      duration: 200,
+      useNativeDriver: true,
+    }).start(() => setVisible(false));
+  };
+
+  useEffect(() => {
+    if (visible) {
+      Animated.parallel([
+        Animated.timing(opacity, {
+          toValue: 1,
+          duration: 250,
+          useNativeDriver: true,
+        }),
+        Animated.spring(translateY, {
+          toValue: 0,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    }
+  }, [visible]);
+
+  if (!visible || !selectedOrder) return null;
+
+  return (
+    <View style={styles.overlay}>
+      <Animated.View
+        style={[
+          styles.modalContent,
+          {
+            opacity: opacity,
+            transform: [{ translateY }],
+          },
+        ]}
+      >
+        <View style={styles.header}>
+          <Text style={styles.title}>{selectedOrder.packetName}</Text>
+          <TouchableOpacity onPress={closeModal} style={styles.closeBtn}>
+            <CloseIcon width={15} height={15} color={'#000'} />
+          </TouchableOpacity>
+        </View>
+
+        <View style={styles.divider} />
+
+        <Text style={styles.sectionTitle}>{t('Mahsulotlar')}:</Text>
+        <ScrollView
+          showsVerticalScrollIndicator={false}
+          style={{ maxHeight: 250 }}
+        >
+          {selectedOrder.items.map((product, index) => {
+            const totalPrice = product.totalPrice;
+            const weight = product.weight;
+            const pricePerKg = Math.ceil(weight ? totalPrice / weight : 0);
+
+            return (
+              <View key={product.trekId + index} style={styles.productItem}>
+                <View style={styles.row}>
+                  <Text style={styles.productName}>{product.name}</Text>
+                  <Text style={styles.productTrekId}>{t('Trek ID')}:</Text>
+                </View>
+                <Text style={styles.productTrekId}>{product.trekId}</Text>
+                <View style={styles.row}>
+                  <Text style={styles.detail}>
+                    {t('Og’irligi')}: {product.weight}
+                  </Text>
+                  <Text style={styles.detail}>
+                    {t('Narxi')}: 1kg * {pricePerKg.toLocaleString('uz-UZ')}{' '}
+                    {t("so'm")}
+                  </Text>
+                </View>
+                <View style={styles.rowRight}>
+                  <Text style={styles.total}>
+                    {t('Umumiy narxi')}: {product.totalPrice} {t('so‘m')}
+                  </Text>
+                </View>
+              </View>
+            );
+          })}
+        </ScrollView>
+
+        <View style={styles.totalRow}>
+          <Text style={styles.totalLabel}>{t('Umumiy narx')}:</Text>
+          <Text style={styles.totalValue}>{selectedOrder.totalPrice}</Text>
+        </View>
+
+        <TouchableOpacity onPress={closeModal} style={styles.btn}>
+          <Text style={styles.btnText}>{t('Yopish')}</Text>
+        </TouchableOpacity>
+      </Animated.View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0,0,0,0.4)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 100,
+  },
+  rowRight: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    marginTop: 5,
+  },
+  total: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#1D1D1D',
+  },
+  modalContent: {
+    width: '90%',
+    backgroundColor: '#fff',
+    borderRadius: 10,
+    paddingBottom: 20,
+    shadowColor: '#000',
+    shadowOpacity: 0.3,
+    shadowRadius: 4,
+    elevation: 6,
+  },
+  header: {
+    padding: 20,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '600',
+  },
+  closeBtn: {
+    padding: 5,
+    width: 30,
+    height: 30,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#0000000D',
+    borderRadius: 50,
+  },
+  divider: {
+    height: 1,
+    backgroundColor: '#E0E0E0',
+    marginBottom: 10,
+  },
+  sectionTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    paddingHorizontal: 20,
+    marginBottom: 8,
+  },
+  productItem: {
+    paddingHorizontal: 20,
+    paddingBottom: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+    marginBottom: 10,
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  productName: {
+    fontWeight: '500',
+    fontSize: 15,
+  },
+  productTrekId: {
+    color: '#555',
+    textAlign: 'right',
+  },
+  detail: {
+    color: '#555',
+    marginTop: 8,
+  },
+  totalRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 20,
+    paddingTop: 10,
+    borderTopWidth: 1,
+    borderTopColor: '#eee',
+  },
+  totalLabel: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  totalValue: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#28A7E8',
+  },
+  btn: {
+    alignSelf: 'center',
+    marginTop: 20,
+    height: 48,
+    width: '90%',
+    borderRadius: 8,
+    justifyContent: 'center',
+    backgroundColor: '#28A7E8',
+  },
+  btnText: {
+    textAlign: 'center',
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});
+
+export default OrderDetailModal;