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';
@@ -30,37 +29,37 @@ const AddWorkModal = ({visible, onClose, onSave}) => {
     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 [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' },
+    {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,
@@ -282,7 +281,7 @@ const AddWorkModal = ({visible, onClose, onSave}) => {
                 />
               </View>
               <Text style={[styles.text_2, {marginBottom: 3}]}>
-                Danh sách người thực hiện công việc 
+                Danh sách người thực hiện công việc
               </Text>
               <FlatList
                 data={dataList}
@@ -298,34 +297,31 @@ const AddWorkModal = ({visible, onClose, onSave}) => {
                 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}}
-            />
+              <View style={styles.buttonContainer}>
                 <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>
+                  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>
@@ -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
-    },
-    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',
+  container: {
+    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',
 
-        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,
-    },
-    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
-    },
-    box_3:{
-        flexDirection:'row',
-        marginHorizontal:15,
-        alignItems:'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,
+  },
+  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',
+  },
+  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',
+  },
+});
 
-export default styles
+export default styles;
\ No newline at end of file

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,53 +38,51 @@ const ListWorkView = (props) => {
   };
 
   const renderTabView = () => {
-    return ( <TabViewComponent 
-            data={[
-              {key: 'all', label: 'Tất cả'},
-              {key: 'public', label: 'Công khai'},
-              {key: 'private', label: 'Hạn chế'},
-              {key: 'draft', label: 'Nháp'},
-            ]}
-            tabStyle={{
-              backgroundColor: R.colors.gray,
-              marginHorizontal: 5,
-              borderRadius: 10,
-              width : 100,
-              height : 35,
-              justifyContent : 'center',
-              alignItems : 'center',
-            }}
-            style={{
-              marginVertical: 5,
-            }}
-            mode="filter"
-            defaultActiveKey="all"
-            scrollable={true}
-            activeTabStyle={{
-              backgroundColor: R.colors.blue,
-            }}
-            textStyle={{
-              color: R.colors.white,
-              fontWeight : '400',
-              fontFamily : R.fonts.fontRegular,
-              fontSize : R.fontsize.fontSizeContent,
-
-            }}
-            showActiveIndicator={false}
-            
-            onFilterChange={handleFilterChange}
-          />  
-        )
-  }
+    return (
+      <TabViewComponent
+        data={[
+          {key: 'all', label: 'Tất cả'},
+          {key: 'public', label: 'Công khai'},
+          {key: 'private', label: 'Hạn chế'},
+          {key: 'draft', label: 'Nháp'},
+        ]}
+        tabStyle={{
+          backgroundColor: R.colors.gray,
+          marginHorizontal: 5,
+          borderRadius: 10,
+          width: 100,
+          height: 35,
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+        style={{
+          marginVertical: 5,
+        }}
+        mode="filter"
+        defaultActiveKey="all"
+        scrollable={true}
+        activeTabStyle={{
+          backgroundColor: R.colors.blue,
+        }}
+        textStyle={{
+          color: R.colors.white,
+          fontWeight: '400',
+          fontFamily: R.fonts.fontRegular,
+          fontSize: R.fontsize.fontSizeContent,
+        }}
+        showActiveIndicator={false}
+        onFilterChange={handleFilterChange}
+      />
+    );
+  };
 
   return (
-    <View
-      style={styles.container}>
-        <Header title={'Danh sách công việc'} isBack />
-        <View style = {styles.body}>
-          {renderTabView()}
+    <View style={styles.container}>
+      <Header title={'Danh sách công việc'} isBack />
+      <View style={styles.body}>
+        {renderTabView()}
 
-          <View style={{marginBottom: 15}}>
+        <View style={{marginBottom: 15}}>
           <View style={styles.card}>
             <TouchableOpacity style={styles.btnCard}>
               <Text style={styles.text}>Học kỳ 2, Năm 2025</Text>
@@ -93,42 +95,37 @@ const ListWorkView = (props) => {
                 source={R.images.icSearch}
                 style={{width: 20, height: 20}}
               />
-              <View style={{flex:1}}>
-              <TextInput
-                placeholder="Tìm kiếm"
-                style={styles.text}
-                value={searchQuery}
-                onChangeText={setSearchQuery}
-              />
+              <View style={{flex: 1}}>
+                <TextInput
+                  placeholder="Tìm kiếm"
+                  style={styles.text}
+                  value={searchQuery}
+                  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
+          onPress={handleAddWork}
+          label="Tạo công việc"
+          images={R.images.icMenuEdit}
+          backgroundColor={R.colors.blue}
+        />
+      </FAB>
 
-
-          
-        </View>
-     <FAB>
-      <SubButton
-        onPress={handleAddWork}
-        label="Tạo công việc"
-        images={R.images.icMenuEdit}
-        backgroundColor={R.colors.blue}
+      <AddWorkModal
+        visible={modalVisible}
+        onClose={handleCloseModal}
+        onSave={handleSaveWork}
       />
-     </FAB>
-
-     <AddWorkModal
-       visible={modalVisible}
-       onClose={handleCloseModal}
-       onSave={handleSaveWork}
-     />
     </View>
   );
 };