TODO: Đã hoàn thiện giao diện phần tạo văn bản đi

src/components/DropdownAlert/Dropdown.js

-import React, {useState} from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   View,
   Text,
   TouchableOpacity,
   StyleSheet,
-  FlatList,
   Image,
   ScrollView,
 } from 'react-native';
 import R from '../../assets/R';
-const Dropdown = ({items, placeholder = 'Chọn...', onSelect, height}) => {
+
+const Dropdown = ({
+  items = [],
+  placeholder = 'Chọn...',
+  onSelect,
+  height,
+  backgroundColor,
+
+  // mới thêm
+  editable = true,
+  disabledBackgroundColor = R.colors.blue1,
+  disabledTextColor = '#999',
+  disabledIconColor = '#999',
+}) => {
   const [isOpen, setIsOpen] = useState(false);
   const [selected, setSelected] = useState(null);
 
-  const handleSelect = item => {
+  const headerHeight = height ?? 35;
+
+  useEffect(() => {
+    if (!editable && isOpen) setIsOpen(false);
+  }, [editable, isOpen]);
+
+  const handleToggle = () => {
+    if (!editable) return;
+    setIsOpen(prev => !prev);
+  };
+
+  const handleSelect = (item) => {
+    if (!editable) return;
     setSelected(item);
     setIsOpen(false);
-    if (onSelect) onSelect(item);
+    onSelect && onSelect(item);
   };
 
+  const resolvedBg = editable ? (backgroundColor || '#fff') : disabledBackgroundColor;
+  const resolvedTextColor = editable ? '#333' : disabledTextColor;
+  const resolvedIconTint = editable ? '#333' : disabledIconColor;
+  const resolvedBorderColor = editable ? R.colors?.grayBorderInputTextHeader || '#ccc' : '#ddd';
+
   return (
-    <View style={[styles.container]}>
-      {/* Nút hiển thị */}
+    <View style={styles.container}>
+      {/* Header */}
       <TouchableOpacity
-        style={[styles.dropdownHeader,{height:height}]}
-        onPress={() => setIsOpen(!isOpen)}>
-        <Text style={styles.dropdownHeaderText}>
+        activeOpacity={editable ? 0.7 : 1}
+        onPress={handleToggle}
+        disabled={!editable}
+        style={[
+          styles.dropdownHeader,
+          {
+            height: headerHeight,
+            backgroundColor: resolvedBg,
+            borderColor: resolvedBorderColor,
+            opacity: editable ? 1 : 0.8,
+          },
+        ]}
+      >
+        <Text style={[styles.dropdownHeaderText, { color: resolvedTextColor }]}>
           {selected ? selected.label : placeholder}
         </Text>
-        <Image source={R.images.icDrop} style={styles.imageIcon} />
+        <Image
+          source={R.images.icDrop}
+          style={[styles.imageIcon, { tintColor: resolvedIconTint }]}
+        />
       </TouchableOpacity>
 
-      {/* Danh sách xổ xuống */}
+      {/* List */}
       {isOpen && (
         <View
           style={[
             styles.dropdownList,
-            {position: 'absolute', top: 35, left: 0, right: 0, zIndex: 999},
-          ]}>
-          {/* <FlatList
-          nestedScrollEnabled={true}
-            data={items}
-            keyExtractor={(item) => item.id.toString()}
-            renderItem={({ item }) => (
+            {
+              top: headerHeight,
+              backgroundColor: '#fff',
+              borderColor: '#e5e5e5',
+            },
+          ]}
+        >
+          <ScrollView style={{ maxHeight: 220 }}>
+            {items.map((item) => (
               <TouchableOpacity
+                key={String(item.id)}
                 style={styles.dropdownItem}
                 onPress={() => handleSelect(item)}
               >
                 <Text style={styles.dropdownItemText}>{item.label}</Text>
               </TouchableOpacity>
-            )}
-          /> */}
-          <ScrollView style={{maxHeight: 200}}>
-            {items.map(item => (
-              <TouchableOpacity
-                key={item.id.toString()}
-                style={styles.dropdownItem}
-                onPress={() => handleSelect(item)}>
-                <Text style={styles.dropdownItemText}>{item.label}</Text>
-              </TouchableOpacity>
             ))}
           </ScrollView>
         </View>
@@ -72,29 +108,35 @@ export default Dropdown;
 const styles = StyleSheet.create({
   container: {
     width: '100%',
+    position: 'relative',
   },
   dropdownHeader: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
     borderWidth: 1,
-    borderColor: R.colors.grayBorderInputTextHeader,
     borderRadius: 5,
-    backgroundColor: '#fff',
-    height: 35,
     paddingHorizontal: 15,
   },
   dropdownHeaderText: {
     fontSize: 12,
-    color: '#333',
   },
   dropdownList: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    zIndex: 999,
+    elevation: 8,              // Android
     borderWidth: 1,
-    borderColor: '#ccc',
-    backgroundColor: '#fff',
+    borderRadius: 6,
+    shadowColor: '#000',       // iOS
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    shadowOffset: { width: 0, height: 4 },
   },
   dropdownItem: {
-    padding: 5,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
     borderBottomWidth: 1,
     borderBottomColor: '#eee',
   },
@@ -106,6 +148,5 @@ const styles = StyleSheet.create({
     width: 20,
     height: 20,
     resizeMode: 'contain',
-    tintColor: '#333',
   },
 });

src/components/Input/TextField.js

@@ -51,7 +51,10 @@ const TextField = props => {
 
         placeholder={placeholder}
         maxLength={maxLength ? maxLength : 256}
-        placeholderTextColor={R.colors.gray}
+        placeholderTextColor= {
+          editable === false 
+      ? (backgroundColor || R.colors.black) // khi disabled thì lấy màu xám
+      : backgroundColor        }
         editable={editable != null ? editable : true}
         secureTextEntry={isPassword}
         autoCapitalize="none"
@@ -68,7 +71,9 @@ const TextField = props => {
           fontSize: fontSize,
           paddingVertical: 5,
           paddingHorizontal: 10,
-          backgroundColor: backgroundColor,
+          backgroundColor:  editable === false 
+      ? (backgroundColor || R.colors.blue1) // khi disabled thì lấy màu xám
+      : backgroundColor, // khi enable thì lấy màu bạn truyền,
         }}
       />
       {error && <View

src/components/Input/TextMulti.js

@@ -54,7 +54,10 @@ const TextField = props => {
         multiline={true}
         numberOfLines={numberOfLines}
         onFocus={onFocus}
-        placeholderTextColor={R.colors.gray}
+           placeholderTextColor= {
+          editable === false 
+      ? (backgroundColor || R.colors.black) // khi disabled thì lấy màu xám
+      : backgroundColor || R.colors.gray        }
         autoCapitalize="none"
         style={{
           textAlignVertical: 'top',
@@ -68,8 +71,9 @@ const TextField = props => {
           fontSize: fontSizePlaceHolder,
           paddingVertical: 10,
           paddingHorizontal: 10,
-          backgroundColor: backgroundColor,
-          
+            backgroundColor:  editable === false 
+      ? (backgroundColor || R.colors.blue1) // khi disabled thì lấy màu xám
+      : backgroundColor, // khi enable thì lấy màu bạn truyền,
         }}
       />
     </View>

src/screens/list_send_document/status/style.js

@@ -30,6 +30,7 @@ row_1:{
         fontFamily:R.fonts.fontRegular,
         color:R.colors.black,
     },
+
     containerDropdown:{
         marginBottom:10,
         position: 'relative', 
@@ -84,6 +85,12 @@ row_1:{
         borderWidth:1,
         borderColor:R.colors.blue1,
         height:80
+      },
+      textBtn:{
+        fontSize: R.fontsize.fontSizeContent,
+        fontWeight: '400',
+        fontFamily:R.fonts.fontRegular,
+        color:R.colors.black,
       }