loan paid off detail better

src/screens/Loan/LoanPaidOffLetterOrderDetailsScreen.js

@@ -6,6 +6,35 @@ import apiService from '../../services/apiService';
 import { COLORS } from '../../constants/colors';
 import { StatusBar } from 'expo-status-bar';
 
+// Add helper format functions
+const formatDate = (dateStr) => {
+  if (!dateStr) return '';
+  const d = new Date(dateStr);
+  if (isNaN(d)) return dateStr;
+  return d.toLocaleDateString('tk-TM');
+};
+
+const formatDateTime = (dateStr) => {
+  if (!dateStr) return '';
+  const d = new Date(dateStr);
+  if (isNaN(d)) return dateStr;
+  return d.toLocaleString('tk-TM', {
+    hour: '2-digit',
+    minute: '2-digit',
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+  });
+};
+
+// Inline component for a key/value row
+const DetailRow = ({ label, value, showBorder = true }) => (
+  <View style={[styles.detailRow, showBorder && styles.detailRowBorder]}> 
+    <Text style={styles.detailKey}>{label}</Text>
+    <Text style={styles.detailValue}>{String(value)}</Text>
+  </View>
+);
+
 const LoanPaidOffLetterOrderDetailsScreen = () => {
   const navigation = useNavigation();
   const route = useRoute();
@@ -71,55 +100,50 @@ const LoanPaidOffLetterOrderDetailsScreen = () => {
       </TouchableOpacity>
 
       <ScrollView contentContainerStyle={{ paddingBottom: 40, paddingHorizontal: 24 }}>
-        <Text style={styles.title}>Güwanama {order.id}</Text>
+        <Text style={styles.title}>Karzyň ýapylandygy barada güwanama maglumatlary</Text>
 
+        {/* Basic order info */}
         <View style={styles.detailCard}>
-          {[
+          <DetailRow label="ID" value={order.id} />
-            'id',
+          {order.created_at && (
-            'region',
+            <DetailRow label="Döredilen wagty" value={formatDateTime(order.created_at)} />
-            'branch_id',
+          )}
-            'customer_name',
+          {order.status && <DetailRow label="Status" value={order.status} />}
-            'customer_surname',
+          {<DetailRow label="Bellik" value={order.notes ?? '-'} showBorder={false} />}
-            'customer_patronic_name',
+        </View>
-            'born_at',
+
-            'phone',
+        {/* Lokasiýa */}
-            'passport_serie',
+        {(order.region || order.branch_id) && (
-            'passport_id',
+          <>
-            'status',
+            <Text style={styles.sectionTitle}>Lokasiýa</Text>
-            'notes',
+            <View style={styles.detailCard}>
-            'loan_contract_number',
+              {order.region && <DetailRow label="Welaýat" value={order.region} />}
-            'loan_contract_date',
+              {order.branch_id && <DetailRow label="Şahamça" value={order.branch_id} showBorder={false} />}
-            'loan_amount',
+            </View>
-            'loan_reason',
+          </>
-          ].filter((k) => order[k] !== undefined && order[k] !== null).map((key, idx, arr) => {
+        )}
-            const titles = {
+
-              id: 'ID',
+        {/* Şahsy maglumatlar */}
-              region: 'Welaýat',
+        <Text style={styles.sectionTitle}>Şahsy maglumatlar</Text>
-              branch_id: 'Şahamça',
+        <View style={styles.detailCard}>
-              customer_name: 'Ady',
+          <DetailRow label="Doly ady" value={`${order.customer_name} ${order.customer_surname} ${order.customer_patronic_name ?? ''}`.trim()} />
-              customer_surname: 'Familiýasy',
+          {order.born_at && (
-              customer_patronic_name: 'Atasynyň ady',
+            <DetailRow label="Doglan güni" value={formatDate(order.born_at)} />
-              born_at: 'Doglan senesi',
+          )}
-              phone: 'Telefon',
+          {order.phone && <DetailRow label="Telefon" value={order.phone} />}
-              passport_serie: 'Passport seriýa',
+          {order.passport_serie && <DetailRow label="Pasport seriýasy" value={order.passport_serie} />}
-              passport_id: 'Passport nomer',
+          {order.passport_id && <DetailRow label="Pasport belgisi" value={order.passport_id} showBorder={false} />}
-              status: 'Status',
+        </View>
-              notes: 'Bellikler',
+
-              loan_contract_number: 'Karz şertnamanyň belgisi',
+        {/* Karz barada maglumatlar */}
-              loan_contract_date: 'Karz şertnamanyň senesi',
+        <Text style={styles.sectionTitle}>Karz barada maglumatlar</Text>
-              loan_amount: 'Karzyň möçberi',
+        <View style={styles.detailCard}>
-              loan_reason: 'Karzyň maksady',
+          {order.loan_contract_number && <DetailRow label="Karz şertnamanyň belgisi" value={order.loan_contract_number} />}
-            };
+          {order.loan_contract_date && (
-            return (
+            <DetailRow label="Karz şertnamanyň senesi" value={formatDate(order.loan_contract_date)} />
-              <View
+          )}
-                key={key}
+          {order.loan_amount && <DetailRow label="Karzyň möçberi" value={order.loan_amount} />}
-                style={[styles.detailRow, idx !== arr.length - 1 && styles.detailRowBorder]}
+          {order.loan_reason && <DetailRow label="Karzyň maksady" value={order.loan_reason} showBorder={false} />}
-              >
-                <Text style={styles.detailKey}>{titles[key]}</Text>
-                <Text style={styles.detailValue}>{String(order[key])}</Text>
-              </View>
-            );
-          })}
         </View>
 
         <TouchableOpacity style={styles.deleteBtn} onPress={handleDelete}>
@@ -188,6 +212,12 @@ const styles = StyleSheet.create({
     fontSize: 16,
     fontWeight: '600',
   },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: COLORS.textPrimary,
+    marginBottom: 12,
+  },
 });
 
 export default LoanPaidOffLetterOrderDetailsScreen;