TODO: Đã hoàn thiện giao diện tạo công việc

src/screens/list_work/index.js

@@ -2,10 +2,8 @@ import React from 'react';
 import {Text, View, StyleSheet} from 'react-native';
 import ListWorkView from './view';
 
-const ListWork = (props) => {
-  return (
-    <ListWorkView />
-  );
+const ListWork = props => {
+  return <ListWorkView />;
 };
 
 export default ListWork;

src/screens/list_work/modal_add/style.js

+import {StyleSheet} from 'react-native';
+import R from '../../../assets/R';
+
+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',
+    paddingLeft: 10,
+    paddingRight: 10,
+    height: 25,
+    borderRadius: 10,
+    marginBottom: 10,
+    marginRight: 5,
+    backgroundColor: R.colors.blue2,
+    alignSelf: 'flex-start',
+  },
+});
+export default styles;

src/screens/list_work/modal_add/view.js

@@ -11,8 +11,7 @@ import {
   FlatList,
 } from 'react-native';
 import R from '../../../assets/R';
-import PickerItem from '../../../components/Picker/PickerItem';
-import Icon from 'react-native-vector-icons/MaterialIcons';
+import styles from './style';
 import TextField from '../../../components/Input/TextField';
 import TextMulti from '../../../components/Input/TextMulti';
 import Dropdown from '../../../components/DropdownAlert/Dropdown';
@@ -31,26 +30,26 @@ const AddWorkModal = ({visible, onClose, onSave}) => {
   });
 
   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' }
+    {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 = [
@@ -58,9 +57,9 @@ const AddWorkModal = ({visible, onClose, onSave}) => {
     {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' },
+    {id: 1, label: 'Option 1'},
+    {id: 2, label: 'Option 2'},
+    {id: 3, label: 'Option 3'},
   ];
 
   const responsibleData = [
@@ -179,7 +178,7 @@ const AddWorkModal = ({visible, onClose, onSave}) => {
                 scrollEnabled={true}
               />
 
-<View style={styles.containerDropDown}>
+              <View style={styles.containerDropDown}>
                 <Text
                   style={[
                     styles.text,
@@ -217,14 +216,14 @@ const AddWorkModal = ({visible, onClose, onSave}) => {
                 scrollEnabled={true}
               />
 
-<TextField
+              <TextField
                 title="Ngày đến hạn"
                 required
                 value={formData.title}
                 containerMarginBottom={10}
               />
 
-<View style={styles.containerDropDown}>
+              <View style={styles.containerDropDown}>
                 <Text
                   style={[
                     styles.text,
@@ -261,7 +260,7 @@ const AddWorkModal = ({visible, onClose, onSave}) => {
                 scrollEnabled={true}
               />
 
-<View style={styles.containerDropDown}>
+              <View style={styles.containerDropDown}>
                 <Text
                   style={[
                     styles.text,
@@ -298,7 +297,6 @@ const AddWorkModal = ({visible, onClose, onSave}) => {
                 scrollEnabled={true}
               />
 
-              {/* Action Buttons */}
               <View style={styles.buttonContainer}>
                 <Button
                   title="Hủy"
@@ -324,8 +322,6 @@ const AddWorkModal = ({visible, onClose, onSave}) => {
                 />
               </View>
             </View>
-
-            
           </ScrollView>
         </View>
       </View>
@@ -333,162 +329,4 @@ const AddWorkModal = ({visible, onClose, onSave}) => {
   );
 };
 
-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/style.js

-import { StyleSheet, Text, View } from 'react-native'
-import R from '../../assets/R'
+import {StyleSheet, Text, View} from 'react-native';
+import R from '../../assets/R';
 
 const styles = StyleSheet.create({
-    container:{
-        flex:1,
-        backgroundColor:R.colors.white
+  container: {
+    flex: 1,
+    backgroundColor: R.colors.white,
   },
-    body:{
-        flex:1,
-        backgroundColor:R.colors.white
+  body: {
+    flex: 1,
+    backgroundColor: R.colors.white,
   },
-    card:{
-        borderWidth:1,
-        borderColor:R.colors.grayBorderInputTextHeader,
-        borderRadius:10,
-        padding:5,
-        marginTop:15,
-        marginBottom:15,
-        marginHorizontal:15,
-        alignItems:'center',
-        justifyContent:'center',
+  card: {
+    borderWidth: 1,
+    borderColor: R.colors.grayBorderInputTextHeader,
+    borderRadius: 10,
+    padding: 5,
+    marginTop: 15,
+    marginBottom: 15,
+    marginHorizontal: 15,
+    alignItems: 'center',
+    justifyContent: 'center',
 
-        backgroundColor:R.colors.white,
-        shadowColor:R.colors.black,
-        shadowOffset:{width:0.5,height:2},
-        shadowOpacity:Platform.OS === 'ios' ? 0.25 : 1,
-        shadowRadius:5,
-        elevation:Platform.OS === 'ios' ?  1 : 2,
+    backgroundColor: R.colors.white,
+    shadowColor: R.colors.black,
+    shadowOffset: {width: 0.5, height: 2},
+    shadowOpacity: Platform.OS === 'ios' ? 0.25 : 1,
+    shadowRadius: 5,
+    elevation: Platform.OS === 'ios' ? 1 : 2,
   },
-    btnCard:{
-        borderRadius:10,
-        borderWidth:1,
-        padding:5,
-        width:'100%',
-        alignItems:'center',
-        justifyContent:'center',
-        borderColor:R.colors.grayBorderInputTextHeader,
+  btnCard: {
+    borderRadius: 10,
+    borderWidth: 1,
+    padding: 5,
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderColor: R.colors.grayBorderInputTextHeader,
   },
-    text:{
-        fontSize:R.sizes.sm,
-        color:R.colors.black,
-        fontFamily:R.fonts.fontRegular,
-        fontWeight:'400',
+  text: {
+    fontSize: R.sizes.sm,
+    color: R.colors.black,
+    fontFamily: R.fonts.fontRegular,
+    fontWeight: '400',
   },
-    searchBox:{
-        flex:1,
-        borderWidth:1,
-        borderColor:R.colors.grayBorderInputTextHeader,
-        borderRadius:20,
-        alignItems:'center',
-        justifyContent:'flex-start',
-        paddingLeft:15,
-        flexDirection:'row',
-        height:42
+  searchBox: {
+    flex: 1,
+    borderWidth: 1,
+    borderColor: R.colors.grayBorderInputTextHeader,
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    paddingLeft: 15,
+    flexDirection: 'row',
+    height: 42,
   },
-    box_3:{
-        flexDirection:'row',
-        marginHorizontal:15,
-        alignItems:'center',
+  box_3: {
+    flexDirection: 'row',
+    marginHorizontal: 15,
+    alignItems: 'center',
   },
-})
+});
 
-export default styles
\ No newline at end of file
+export default styles;

src/screens/list_work/view.js

-import React, { useState } from 'react';
-import {Text, View, TouchableOpacity, StyleSheet, Image, TextInput} from 'react-native';
+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';
 import SubButton from '../../components/FAB/sub_button';
@@ -9,15 +16,12 @@ import R from '../../assets/R';
 import TabViewComponent from '../../components/TabView';
 import AddWorkModal from '../list_work/modal_add/index';
 
-const ListWorkView = (props) => {
-  const { 
-    searchQuery,
-    setSearchQuery,
-   } = props;
+const ListWorkView = props => {
+  const {searchQuery, setSearchQuery} = props;
 
   const [modalVisible, setModalVisible] = useState(false);
 
-  const handleFilterChange = (item) => {
+  const handleFilterChange = item => {
     console.log(item);
   };
 
@@ -25,7 +29,7 @@ const ListWorkView = (props) => {
     setModalVisible(true);
   };
 
-  const handleSaveWork = (workData) => {
+  const handleSaveWork = workData => {
     console.log('Saving work:', workData);
   };
 
@@ -34,7 +38,8 @@ const ListWorkView = (props) => {
   };
 
   const renderTabView = () => {
-    return ( <TabViewComponent 
+    return (
+      <TabViewComponent
         data={[
           {key: 'all', label: 'Tất cả'},
           {key: 'public', label: 'Công khai'},
@@ -45,10 +50,10 @@ const ListWorkView = (props) => {
           backgroundColor: R.colors.gray,
           marginHorizontal: 5,
           borderRadius: 10,
-              width : 100,
-              height : 35,
-              justifyContent : 'center',
-              alignItems : 'center',
+          width: 100,
+          height: 35,
+          justifyContent: 'center',
+          alignItems: 'center',
         }}
         style={{
           marginVertical: 5,
@@ -61,23 +66,20 @@ const ListWorkView = (props) => {
         }}
         textStyle={{
           color: R.colors.white,
-              fontWeight : '400',
-              fontFamily : R.fonts.fontRegular,
-              fontSize : R.fontsize.fontSizeContent,
-
+          fontWeight: '400',
+          fontFamily: R.fonts.fontRegular,
+          fontSize: R.fontsize.fontSizeContent,
         }}
         showActiveIndicator={false}
-            
         onFilterChange={handleFilterChange}
       />
-        )
-  }
+    );
+  };
 
   return (
-    <View
-      style={styles.container}>
+    <View style={styles.container}>
       <Header title={'Danh sách công việc'} isBack />
-        <View style = {styles.body}>
+      <View style={styles.body}>
         {renderTabView()}
 
         <View style={{marginBottom: 15}}>
@@ -93,7 +95,7 @@ const ListWorkView = (props) => {
                 source={R.images.icSearch}
                 style={{width: 20, height: 20}}
               />
-              <View style={{flex:1}}>
+              <View style={{flex: 1}}>
                 <TextInput
                   placeholder="Tìm kiếm"
                   style={styles.text}
@@ -101,19 +103,14 @@ const ListWorkView = (props) => {
                   onChangeText={setSearchQuery}
                 />
               </View>
-             
-         
             </View>
             <View style={{flex: 0.1}}></View>
 
             <View style={styles.boxFilter}>
-              <Dropdown title={'Tìm kiếm'} height={40}/>
+              <Dropdown title={'Tìm kiếm'} height={40} />
             </View>
           </View>
         </View>
-
-
-          
       </View>
       <FAB>
         <SubButton