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/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
\ 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,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>
   );
 };