updated code with dsc and device binding

src/Screens/Ragistration/PartnerShip.tsx

@@ -3,23 +3,22 @@ import {
   SafeAreaView,
   ScrollView,
   StyleSheet,
-  Text,
   TouchableOpacity,
   View,
   Platform,
 } from 'react-native';
-import React, { use, useState } from 'react';
-import { useNavigation, useRoute, NavigationProp, RouteProp } from '@react-navigation/native';
-import colors from '../../Constant/Color';
+import React, { useMemo, useState } from 'react';
+import { useNavigation, useRoute, RouteProp } from '@react-navigation/native';
 import PrimaryButton from '../../Component/PrimaryButton/PrimaryButton';
-import MyInput from '../../Component/MyInput';
+import MyInput from '../../components/MyInput';
 import { showToast } from '../../Constant/ShowDailog';
-import { PARTNER_API_ENDPOINT } from '../../Services/ApiCall/ApiUrls';
 import { usePartnerShipSubmit } from '../../Services/ApiCall/Hooks';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Navigation } from 'lucide-react-native';
 import { NavigationString } from '../../Constant/AllImports';
-
+import Animated, { FadeInUp } from 'react-native-reanimated';
+import { useTheme } from '../../Hooks/useTheme';
+import AppText from '../../components/AppText';
+import { Trash2, UserPlus } from 'lucide-react-native';
 
 type Partner = {
   partnerName: string;
@@ -32,11 +31,12 @@ type Navigation = {
   replace: (route: string) => void;
 };
 type PartnershipParams = {
-  otherId: string | number
+  otherId: string | number;
 };
+
 const Partnership = () => {
   const route = useRoute<RouteProp<{ params: PartnershipParams }, 'params'>>();
-
+  const { colors, spacing, typography, shadows } = useTheme();
   const navigation = useNavigation() as Navigation;
   const [partners, setPartners] = useState<Partner[]>([
     {
@@ -49,9 +49,11 @@ const Partnership = () => {
   ]);
 
   const [focusedField, setFocusedField] = useState<string>('');
-  const [loading, setLoading] = useState(false)
-  const { mutateAsync:partnerShipSubmit } = usePartnerShipSubmit();
-   const insets = useSafeAreaInsets();
+  const [loading, setLoading] = useState(false);
+  const { mutateAsync: partnerShipSubmit } = usePartnerShipSubmit();
+  const insets = useSafeAreaInsets();
+  const styles = useMemo(() => makeStyles(colors, spacing, shadows, typography), [colors, spacing, shadows, typography]);
+
   const handleChange = (index: number, name: keyof Partner, value: string) => {
     const updated = [...partners];
     updated[index][name] = value;
@@ -90,9 +92,8 @@ const Partnership = () => {
   };
 
   const handleSubmit = async () => {
-    setLoading(true)
+    setLoading(true);
     try {
-      // Convert percentage strings to numbers and validate
       const payload = partners.map((p, i) => {
         const percentage = Number(p.percentage);
 
@@ -105,13 +106,12 @@ const Partnership = () => {
           ptnrAadharNo: p.aadharNumber,
           ptnrMobNo: p.mobileNumber,
           ptnrName: p.partnerName,
-          ptnrPop: percentage,  // Ensure this is a number
+          ptnrPop: percentage,
           ptnrPANNo: p.partnerPan,
           ptnrNo: i,
         };
       });
 
-      // Validate total percentage equals 100%
       const totalPercentage = payload.reduce((sum, p) => sum + p.ptnrPop, 0);
       if (totalPercentage !== 100) {
         showToast(`Total percentage must equal 100% (currently ${totalPercentage}%)`);
@@ -123,153 +123,179 @@ const Partnership = () => {
       if (response?.statusCode === 200) {
         showToast(response.message || 'Submitted successfully!');
         navigation.replace(NavigationString.Home);
-
       }
     } catch (error: any) {
       console.error('❌ Submission failed:', error.message);
       showToast(error.message || 'Submission failed. Please check partner details.');
-    }finally{
-      setLoading(false)
+    } finally {
+      setLoading(false);
     }
   };
 
   return (
-    <View style={{ flex: 1 }}>
-      <Text style={[styles.heading, { paddingTop: insets.top }]}>Partnership Details</Text>
+    <View style={{ flex: 1, backgroundColor: colors.background }}>
+      <View style={[styles.header, { paddingTop: insets.top + spacing.s }]}>
+        <AppText variant="h3" color={colors.text} style={{ fontWeight: '700' }}>
+          Partnership Details
+        </AppText>
+        <AppText variant="caption" color={colors.textSecondary}>
+          Add all partners and their share percentages
+        </AppText>
+      </View>
+
       <SafeAreaView style={{ flex: 1 }}>
         <KeyboardAvoidingView
           style={{ flex: 1 }}
           behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
           keyboardVerticalOffset={40}
         >
-          <ScrollView contentContainerStyle={styles.scrollContainer} keyboardShouldPersistTaps="handled">
+          <ScrollView
+            contentContainerStyle={styles.scrollContainer}
+            keyboardShouldPersistTaps="handled"
+            showsVerticalScrollIndicator={false}
+          >
             {partners.map((partner, index) => (
-              <View style={{ marginBottom: 20 }} key={index}>
-                <Text style={styles.partnerTitle}>Partner {index + 1}</Text>
+              <Animated.View
+                key={index}
+                entering={FadeInUp.delay(index * 80).springify()}
+                style={[styles.card, shadows.medium]}
+              >
+                <View style={styles.cardHeader}>
+                  <AppText variant="bodySmall" color={colors.primary} style={{ fontWeight: '700' }}>
+                    Partner {index + 1}
+                  </AppText>
+                  {partners.length > 1 && (
+                    <TouchableOpacity onPress={() => handleRemove(index)} activeOpacity={0.7}>
+                      <Trash2 size={18} color={colors.error} />
+                    </TouchableOpacity>
+                  )}
+                </View>
 
                 <MyInput
-                  icon="user"
-                  placeholder="Name of Partner *"
+                  label="Partner Name"
+                  placeholder="Enter Partner Name"
                   value={partner.partnerName}
                   onChangeText={text => handleChange(index, 'partnerName', text)}
                   onFocus={() => setFocusedField(`partnerName-${index}`)}
                   onBlur={() => setFocusedField('')}
                   focused={focusedField === `partnerName-${index}`}
+                  containerStyle={{ marginBottom: spacing.s }}
                 />
 
                 <MyInput
-                  icon="percent"
-                  placeholder="Partnership Percentage *"
+                  label="Share Percentage"
+                  placeholder="Enter Percentage"
                   value={partner.percentage}
                   onChangeText={text => handleChange(index, 'percentage', text)}
                   onFocus={() => setFocusedField(`percentage-${index}`)}
                   onBlur={() => setFocusedField('')}
                   focused={focusedField === `percentage-${index}`}
                   keyboardType="numeric"
-                  maxlength={3}
+                  maxLength={3}
+                  containerStyle={{ marginBottom: spacing.s }}
                 />
 
                 <MyInput
-                  icon="id-card"
-                  placeholder="PAN of Partner *"
+                  label="PAN of Partner"
+                  placeholder="Enter PAN Number"
                   value={partner.partnerPan}
                   onChangeText={text => handleChange(index, 'partnerPan', text)}
                   onFocus={() => setFocusedField(`partnerPan-${index}`)}
                   onBlur={() => setFocusedField('')}
                   focused={focusedField === `partnerPan-${index}`}
                   autoCapitalize="characters"
-                  maxlength={10}
-
+                  maxLength={10}
+                  containerStyle={{ marginBottom: spacing.s }}
                 />
 
                 <MyInput
-                  icon="credit-card"
-                  placeholder="Aadhar Number *"
+                  label="Aadhaar Number"
+                  placeholder="Enter 12-digit Aadhaar"
                   value={partner.aadharNumber}
                   onChangeText={text => handleChange(index, 'aadharNumber', text)}
                   onFocus={() => setFocusedField(`aadharNumber-${index}`)}
                   onBlur={() => setFocusedField('')}
                   focused={focusedField === `aadharNumber-${index}`}
                   keyboardType="numeric"
-                  maxlength={12}
+                  maxLength={12}
+                  containerStyle={{ marginBottom: spacing.s }}
                 />
 
                 <MyInput
-                  icon="phone"
-                  placeholder="Mobile Number *"
+                  label="Mobile Number"
+                  placeholder="Enter Mobile Number"
                   value={partner.mobileNumber}
                   onChangeText={text => handleChange(index, 'mobileNumber', text)}
                   onFocus={() => setFocusedField(`mobileNumber-${index}`)}
                   onBlur={() => setFocusedField('')}
                   focused={focusedField === `mobileNumber-${index}`}
                   keyboardType="phone-pad"
-                  maxlength={10}
+                  maxLength={10}
                 />
-
-                {partners.length > 1 && (
-                  <TouchableOpacity style={styles.deleteButton} onPress={() => handleRemove(index)}>
-                    <Text style={styles.deleteText}>Delete Partner</Text>
-                  </TouchableOpacity>
-                )}
-              </View>
+              </Animated.View>
             ))}
 
-            <TouchableOpacity style={styles.addButton} onPress={handleAddMore}>
-              <Text style={styles.addText}>+ Add Partner</Text>
+            <TouchableOpacity style={styles.addButton} onPress={handleAddMore} activeOpacity={0.8}>
+              <UserPlus size={16} color={colors.buttonText} />
+              <AppText variant="bodySmall" color={colors.buttonText} style={{ fontWeight: '700', marginLeft: 8 }}>
+                Add Partner
+              </AppText>
             </TouchableOpacity>
           </ScrollView>
         </KeyboardAvoidingView>
       </SafeAreaView>
 
-      <PrimaryButton title={loading ? "Loading..." : "Submit" }onPress={handleSubmit} />
+      <View style={styles.footer}>
+        <PrimaryButton title={loading ? 'Loading...' : 'Submit'} onPress={handleSubmit} />
+      </View>
     </View>
   );
 };
 
 export default Partnership;
 
-const styles = StyleSheet.create({
-  heading: {
-    fontSize: 18,
-    fontWeight: 'bold',
-    marginBottom: 10,
-    marginTop: 10,
-    textAlign: 'center',
-
-  },
-  partnerTitle: {
-    fontWeight: '600',
-    fontSize: 16,
-    marginBottom: 10,
+const makeStyles = (colors: any, spacing: any, shadows: any, typography: any) => StyleSheet.create({
+  header: {
+    paddingHorizontal: spacing.m,
+    paddingBottom: spacing.m,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.border,
+    backgroundColor: colors.surface,
   },
   scrollContainer: {
-    // backgroundColor: color.background,
     flexGrow: 1,
+    padding: spacing.m,
+    paddingBottom: 30,
+  },
+  card: {
+    backgroundColor: colors.surface,
+    borderRadius: 14,
+    padding: 14,
+    marginBottom: spacing.m,
+  },
+  cardHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: spacing.s,
+    paddingBottom: spacing.xs,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: colors.border,
   },
   addButton: {
     backgroundColor: colors.primary,
-    padding: 10,
-    marginTop: 10,
-    borderRadius: 10,
+    flexDirection: 'row',
     alignItems: 'center',
-    width: 140,
+    justifyContent: 'center',
+    paddingVertical: 12,
+    paddingHorizontal: 20,
+    borderRadius: 12,
     alignSelf: 'flex-end',
   },
-  addText: {
-    color: 'white',
-    fontWeight: '600',
-  },
-  deleteButton: {
-    backgroundColor: '#FF5C5C',
-    padding: 10,
-    marginTop: 10,
-    borderRadius: 10,
-    alignItems: 'center',
-    width: 140,
-    alignSelf: 'flex-end',
-  },
-  deleteText: {
-    color: 'white',
-    fontWeight: '600',
+  footer: {
+    padding: spacing.m,
+    borderTopWidth: 1,
+    borderTopColor: colors.border,
+    backgroundColor: colors.surface,
   },
 });