TODO: Đã hoàn thiện giao diện modal add work

src/components/Input/TextMulti.js

@@ -21,8 +21,10 @@ const TextField = props => {
     containerMarginTop,
     containerBackgroundColor,
     onFocus,
-    fontFamily,
+    fontFamily = R.fonts.fontMedium,
+    fontWeight = '600',
     height,
+    color = R.colors.black,
     numberOfLines = 5,
   } = props;
 
@@ -36,9 +38,9 @@ const TextField = props => {
       <Text
         style={{
           fontSize: titleFontSize,
-          color: 'black',
+          color: color,
           fontFamily:fontFamily,
-          fontWeight:'400',
+          fontWeight:fontWeight,
           marginBottom: 5,
         }}>
         {title ? title : ''}

src/screens/list_work/modal_add/index.js

+import AddWorkModal from './view';
+
+export default AddWorkModal;

src/screens/list_work/modal_add/view.js

+import React, {useState} from 'react';
+import {
+  Modal,
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  ScrollView,
+  StyleSheet,
+  Image,
+  FlatList,
+} from 'react-native';
+import R from '../../../assets/R';
+import PickerItem from '../../../components/Picker/PickerItem';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import TextField from '../../../components/Input/TextField';
+import TextMulti from '../../../components/Input/TextMulti';
+import Dropdown from '../../../components/DropdownAlert/Dropdown';
+import Button from '../../../components/Button';
+
+const AddWorkModal = ({visible, onClose, onSave}) => {
+  const [formData, setFormData] = useState({
+    title: '',
+    content: '',
+    category: null,
+    responsible: null,
+    deadline: null,
+    assignee: null,
+    implementer: null,
+    attachments: [],
+  });
+
+   const [dataList, setDataList] = useState([
+                { id: 1, name: 'Nguyễn Minh Đức' },
+                { id: 2, name: 'Trần Văn Hùng' },
+                { id: 3, name: 'Lê Thị Mai' },
+                { id: 4, name: 'Phạm Quốc Khánh' },
+                { id: 5, name: 'Hoàng Anh Tuấn' },
+                { id: 6, name: 'Vũ Thị Hằng' },
+                { id: 7, name: 'Ngô Văn Nam' },
+                { id: 8, name: 'Đinh Thị Lan' },
+                { id: 9, name: 'Bùi Văn Phúc' },
+                { id: 10, name: 'Lý Thị Hoa' },
+                { id: 11, name: 'Phan Minh Hoàng' },
+                { id: 12, name: 'Tạ Thị Hương' },
+                { id: 13, name: 'Đoàn Văn Dũng' },
+                { id: 14, name: 'Nguyễn Thị Vân' },
+                { id: 15, name: 'Trương Văn Long' },
+                { id: 16, name: 'Mai Thị Ngọc' },
+                { id: 17, name: 'Huỳnh Quốc Việt' },
+                { id: 18, name: 'Lâm Thị Thu' },
+                { id: 19, name: 'Nguyễn Hữu Tài' },
+                { id: 20, name: 'Phạm Thị Kim' }
+              ]);
+
+  const categoryData = [
+    {name: 'Công việc theo văn bản', value: 'document'},
+    {name: 'Công việc khác', value: 'other'},
+  ];
+  const items = [
+    { id: 1, label: 'Option 1' },
+    { id: 2, label: 'Option 2' },
+    { id: 3, label: 'Option 3' },
+  ];
+
+  const responsibleData = [
+    {name: 'Công việc theo văn bản', value: 'document'},
+    {name: 'Công việc cá nhân', value: 'personal'},
+  ];
+
+  const assigneeData = [
+    {name: 'BM255, Nguyễn Minh Đức', value: 'duc'},
+    {name: 'Khác', value: 'other'},
+  ];
+
+  const implementerData = [
+    {name: 'BM255, Nguyễn Minh Đức', value: 'duc'},
+    {name: 'Khác', value: 'other'},
+  ];
+
+  const handleSave = () => {
+    onSave(formData);
+    onClose();
+  };
+
+  const handleCancel = () => {
+    setFormData({
+      title: '',
+      content: '',
+      category: null,
+      responsible: null,
+      deadline: null,
+      assignee: null,
+      implementer: null,
+      attachments: [],
+    });
+    onClose();
+  };
+  const renderItem_1 = ({item, onPress}) => {
+    return (
+      <View style={styles.chip}>
+        <TouchableOpacity style={styles.containerIcon} onPress={onPress}>
+          <Image
+            resizeMode="cover"
+            source={R.images.icCancel}
+            style={styles.imageIcon}
+            tintColor={R.colors.blue}
+          />
+        </TouchableOpacity>
+        <Text style={styles.textChip}> {`${item.id}, ${item.name}`}</Text>
+      </View>
+    );
+  };
+  return (
+    <Modal
+      visible={visible}
+      animationType="slide"
+      transparent={true}
+      onRequestClose={onClose}>
+      <View style={styles.overlay}>
+        <View style={styles.modalContainer}>
+          <ScrollView showsVerticalScrollIndicator={false}>
+            <View style={styles.header}>
+              <Text style={styles.headerTitle}>Thêm công việc</Text>
+            </View>
+
+            <View style={styles.formContainer}>
+              <TextField
+                title="Tiêu đề"
+                required
+                value={formData.title}
+                containerMarginBottom={10}
+              />
+
+              <TextMulti
+                title="Mô tả"
+                required
+                value={formData.content}
+                containerMarginBottom={10}
+                fontFamily={R.fonts.fontMedium}
+                titleFontSize={R.fontsize.fontSizeContent}
+              />
+
+              <View style={styles.containerDropDown}>
+                <Text
+                  style={[
+                    styles.text,
+                    {
+                      marginBottom: 3,
+                      fontSize: R.fontsize.fontSizeLabel,
+                      fontFamily: R.fonts.fontMedium,
+                      fontWeight: '600',
+                      color: R.colors.black,
+                    },
+                  ]}>
+                  Thẻ
+                </Text>
+                <Dropdown
+                  height={35}
+                  items={items}
+                  placeholder="Công việc theo văn bản"
+                  onSelect={item => console.log('Bạn đã chọn:', item)}
+                />
+              </View>
+              <Text style={[styles.text_2, {marginBottom: 3}]}>
+                Danh sách thẻ đã chọn
+              </Text>
+              <FlatList
+                data={dataList}
+                renderItem={({item}) => renderItem_1({item, onPress: () => {}})}
+                keyExtractor={(item, index) =>
+                  item.id?.toString() || index.toString()
+                }
+                numColumns={2}
+                style={{maxHeight: 150, marginBottom: 10}}
+                showsVerticalScrollIndicator={true}
+                columnWrapperStyle={styles.flatListSelect}
+                nestedScrollEnabled={true}
+                scrollEnabled={true}
+              />
+
+<View style={styles.containerDropDown}>
+                <Text
+                  style={[
+                    styles.text,
+                    {
+                      marginBottom: 3,
+                      fontSize: R.fontsize.fontSizeLabel,
+                      fontFamily: R.fonts.fontMedium,
+                      fontWeight: '600',
+                      color: R.colors.black,
+                    },
+                  ]}>
+                  Văn bản liên quan
+                </Text>
+                <Dropdown
+                  height={35}
+                  items={items}
+                  placeholder="Công việc theo văn bản"
+                  onSelect={item => console.log('Bạn đã chọn:', item)}
+                />
+              </View>
+              <Text style={[styles.text_2, {marginBottom: 3}]}>
+                Danh sách văn bản đã chọn
+              </Text>
+              <FlatList
+                data={dataList}
+                renderItem={({item}) => renderItem_1({item, onPress: () => {}})}
+                keyExtractor={(item, index) =>
+                  item.id?.toString() || index.toString()
+                }
+                numColumns={2}
+                style={{maxHeight: 150, marginBottom: 10}}
+                showsVerticalScrollIndicator={true}
+                columnWrapperStyle={styles.flatListSelect}
+                nestedScrollEnabled={true}
+                scrollEnabled={true}
+              />
+
+<TextField
+                title="Ngày đến hạn"
+                required
+                value={formData.title}
+                containerMarginBottom={10}
+              />
+
+<View style={styles.containerDropDown}>
+                <Text
+                  style={[
+                    styles.text,
+                    {
+                      marginBottom: 3,
+                      fontSize: R.fontsize.fontSizeLabel,
+                      fontFamily: R.fonts.fontMedium,
+                      fontWeight: '600',
+                      color: R.colors.black,
+                    },
+                  ]}>
+                  Người theo dõi
+                </Text>
+                <Dropdown
+                  height={35}
+                  items={items}
+                  onSelect={item => console.log('Bạn đã chọn:', item)}
+                />
+              </View>
+              <Text style={[styles.text_2, {marginBottom: 3}]}>
+                Danh sách người theo dõi đã chọn
+              </Text>
+              <FlatList
+                data={dataList}
+                renderItem={({item}) => renderItem_1({item, onPress: () => {}})}
+                keyExtractor={(item, index) =>
+                  item.id?.toString() || index.toString()
+                }
+                numColumns={2}
+                style={{maxHeight: 150, marginBottom: 10}}
+                showsVerticalScrollIndicator={true}
+                columnWrapperStyle={styles.flatListSelect}
+                nestedScrollEnabled={true}
+                scrollEnabled={true}
+              />
+
+<View style={styles.containerDropDown}>
+                <Text
+                  style={[
+                    styles.text,
+                    {
+                      marginBottom: 3,
+                      fontSize: R.fontsize.fontSizeLabel,
+                      fontFamily: R.fonts.fontMedium,
+                      fontWeight: '600',
+                      color: R.colors.black,
+                    },
+                  ]}>
+                  Người thực hiện công việc
+                </Text>
+                <Dropdown
+                  height={35}
+                  items={items}
+                  onSelect={item => console.log('Bạn đã chọn:', item)}
+                />
+              </View>
+              <Text style={[styles.text_2, {marginBottom: 3}]}>
+                Danh sách người thực hiện công việc 
+              </Text>
+              <FlatList
+                data={dataList}
+                renderItem={({item}) => renderItem_1({item, onPress: () => {}})}
+                keyExtractor={(item, index) =>
+                  item.id?.toString() || index.toString()
+                }
+                numColumns={2}
+                style={{maxHeight: 150, marginBottom: 10}}
+                showsVerticalScrollIndicator={true}
+                columnWrapperStyle={styles.flatListSelect}
+                nestedScrollEnabled={true}
+                scrollEnabled={true}
+              />
+
+              {/* Action Buttons */}
+            <View style={styles.buttonContainer}>
+            <Button
+              title="Hủy"
+              textColor={R.colors.white}
+              onPress={handleCancel}
+              backgroundColor={R.colors.orange}
+              fontSize={R.sizes.sm}
+              fontFamily={R.fonts.fontMedium}
+              height={35}
+              width={100}
+              containerStyle={{paddingHorizontal: 15, borderRadius: 30}}
+            />
+                <Button
+              title="Thêm mới"
+              textColor={R.colors.white}
+              onPress={handleSave}
+              backgroundColor={R.colors.blue}
+              fontSize={R.sizes.sm}
+              fontFamily={R.fonts.fontMedium}
+              height={35}
+              width={100}
+              containerStyle={{paddingHorizontal: 15, borderRadius: 30}}
+            />
+            </View>
+            </View>
+
+            
+          </ScrollView>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: R.colors.blackShadow,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalContainer: {
+    backgroundColor: 'white',
+    borderRadius: 15,
+    maxHeight: '70%',
+    paddingVertical: 20,
+    marginHorizontal: 15,
+  },
+  header: {
+    alignItems: 'center',
+    paddingBottom: 20,
+    marginHorizontal: 20,
+  },
+  headerTitle: {
+    fontSize: R.fontsize.fontsSizeTitle,
+    fontFamily: R.fonts.fontMedium,
+    fontWeight: '600',
+    color: R.colors.blue,
+  },
+  formContainer: {
+    paddingHorizontal: 20,
+  },
+  fieldContainer: {
+    marginBottom: 20,
+  },
+  containerDropDown:{
+    marginBottom:10
+},
+imageIcon:{
+    width: 15,
+    height: 15,
+},
+  label: {
+    fontSize: R.fontsize.fontSizeLabel,
+    fontFamily: R.fonts.fontMedium,
+    fontWeight: '600',
+    color: R.colors.black,
+  },
+  required: {
+    color: 'red',
+  },
+  textInput: {
+    borderWidth: 1,
+    borderColor: R.colors.grayBorderInputTextHeader,
+    borderRadius: 10,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+  },
+  textArea: {
+    height: 80,
+    textAlignVertical: 'top',
+  },
+  flatListSelect:{
+    flexDirection:'row',
+    flexWrap:'wrap',
+  },
+  textChip:{
+    fontSize: R.fontsize.fontSizeContent,
+    fontWeight: '400',
+    fontFamily:R.fonts.fontRegular,
+    color:R.colors.blueTextChip,
+  },
+  text_2:{
+    fontSize: R.fontsize.fontSizeContent,
+    fontFamily: R.fonts.fontMedium,
+    fontWeight: '600',
+    color: R.colors.black,
+  },
+  pickerContainer: {
+    borderWidth: 1,
+    borderColor: '#ddd',
+    borderRadius: 8,
+    backgroundColor: 'white',
+  },
+  datePickerContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: '#ddd',
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 12,
+    backgroundColor: 'white',
+  },
+  datePickerText: {
+    fontSize: 14,
+    color: '#666',
+  },
+  containerIcon:{
+    marginRight:2
+  },
+  fileUploadContainer: {
+    borderWidth: 2,
+    borderColor: '#ddd',
+    borderStyle: 'dashed',
+    borderRadius: 8,
+    paddingVertical: 30,
+    alignItems: 'center',
+    backgroundColor: '#f9f9f9',
+  },
+  fileUploadText: {
+    marginTop: 8,
+    fontSize: 14,
+    color: R.colors.blue,
+    fontWeight: '500',
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    paddingHorizontal: 20,
+    paddingTop: 20,
+    gap: 10,
+  },
+  cancelButton: {
+    flex: 1,
+    justifyContent:'center',
+    backgroundColor: R.colors.orange,
+    alignItems: 'center',
+  },
+  cancelButtonText: {
+    fontSize: 16,
+    color: '#666',
+    fontWeight: '500',
+  },
+  saveButton: {
+    flex: 1,
+    paddingVertical: 12,
+    borderRadius: 8,
+    backgroundColor: R.colors.blue,
+    alignItems: 'center',
+  },
+  saveButtonText: {
+    fontSize: 16,
+    color: 'white',
+    fontWeight: '500',
+  },
+  chip: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    // position: 'relative',
+    paddingLeft: 10,
+    paddingRight:10,
+    height: 25,
+    borderRadius: 10,
+    marginBottom:10,
+    marginRight:5,
+    backgroundColor: R.colors.blue2,
+    alignSelf:'flex-start'
+  },
+});
+
+export default AddWorkModal;

src/screens/list_work/view.js

-import React from 'react';
+import React, { useState } from 'react';
 import {Text, View, TouchableOpacity, StyleSheet, Image, TextInput} from 'react-native';
 import styles from './style';
 import FAB from '../../components/FAB/fab';
@@ -7,6 +7,7 @@ import Header from '../../components/Header/Header';
 import Dropdown from '../../components/DropdownAlert/Dropdown';
 import R from '../../assets/R';
 import TabViewComponent from '../../components/TabView';
+import AddWorkModal from '../list_work/modal_add/index';
 
 const ListWorkView = (props) => {
   const { 
@@ -14,10 +15,24 @@ const ListWorkView = (props) => {
     setSearchQuery,
    } = props;
   
+  const [modalVisible, setModalVisible] = useState(false);
+  
   const handleFilterChange = (item) => {
     console.log(item);
   };
 
+  const handleAddWork = () => {
+    setModalVisible(true);
+  };
+
+  const handleSaveWork = (workData) => {
+    console.log('Saving work:', workData);
+  };
+
+  const handleCloseModal = () => {
+    setModalVisible(false);
+  };
+
   const renderTabView = () => {
     return ( <TabViewComponent 
             data={[
@@ -36,7 +51,6 @@ const ListWorkView = (props) => {
               alignItems : 'center',
             }}
             style={{
-              // marginHorizontal: 5,
               marginVertical: 5,
             }}
             mode="filter"
@@ -103,12 +117,18 @@ const ListWorkView = (props) => {
         </View>
      <FAB>
       <SubButton
-        onPress={() =>({})}
+        onPress={handleAddWork}
         label="Tạo công việc"
         images={R.images.icMenuEdit}
         backgroundColor={R.colors.blue}
       />
      </FAB>
+
+     <AddWorkModal
+       visible={modalVisible}
+       onClose={handleCloseModal}
+       onSave={handleSaveWork}
+     />
     </View>
   );
 };