TODO: Đã hoàn thiện xong các phần cơ bản

src/components/DropdownAlert/Dropdown.js

@@ -78,7 +78,7 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     alignItems: 'center',
     borderWidth: 1,
-    borderColor: '#ccc',
+    borderColor: R.colors.grayBorderInputTextHeader,
     borderRadius: 5,
     backgroundColor: '#fff',
     height: 35,

src/screens/compensate/register/style.js

@@ -8,6 +8,24 @@ container:{
     body:{
         flex:1,
         backgroundColor:R.colors.white,
+        padding:15,
     },
+    containerInput:{
+        flexDirection:'row',
+        justifyContent:'space-between',
+        marginBottom:15
+    },
+    txtSubtitle:{
+        fontWeight:'400',
+        fontFamily:R.fonts.fontRegular,
+        fontSize:R.fontsize.fontSizeLabel,
+        color:R.colors.black,
+    },
+    containerDropDown:{
+        marginBottom:15
+    },
+    btnRegister:{
+        alignItems:'flex-end',
+    }
 })
 export default styles
\ No newline at end of file

src/screens/compensate/register/view.js

@@ -2,13 +2,110 @@ import React from 'react';
 import {Text, View, TouchableOpacity, StyleSheet} from 'react-native';
 import styles from './style';
 import Header from '../../../components/Header/Header';
-
-const CompensateRegisterView = (props) => {
-  const {  } = props;
+import TextField from '../../../components/Input/TextField';
+import R from '../../../assets/R';
+import Dropdown from '../../../components/DropdownAlert/Dropdown';
+import TextMulti from '../../../components/Input/TextMulti';
+import Button from '../../../components/Button';
+const CompensateRegisterView = props => {
+  const {} = props;
   return (
-    <View
-      style={styles.container}>
-        <Header title={'Đăng kí báo bù'} isBack />
+    <View style={styles.container}>
+      <Header title={'Đăng kí báo bù'} isBack />
+      <View style={styles.body}>
+        <View style={styles.containerInput}>
+          <TextField
+            title={'Học kì'}
+            color={R.colors.black}
+            fontSize={R.sizes.sm}
+            backgroundColor={R.colors.gray}
+            required
+            fontSizeTitle={R.sizes.sm}
+            containerBackgroundColor={R.colors.white}
+            width={'48%'}
+          />
+          <View style={styles.sizedBox}></View>
+          <TextField
+            title={'Năm học'}
+            color={R.colors.black}
+            fontSize={R.sizes.sm}
+            backgroundColor={R.colors.gray}
+            required
+            fontSizeTitle={R.sizes.sm}
+            containerBackgroundColor={R.colors.white}
+            width={'48%'}
+          />
+        </View>
+        <View style={styles.containerInput}>
+          <TextField
+            title={'Mã CBGV'}
+            color={R.colors.black}
+            fontSize={R.sizes.sm}
+            required
+            backgroundColor={R.colors.gray}
+            fontSizeTitle={R.sizes.sm}
+            width={'100%'}
+            containerBackgroundColor={R.colors.white}
+          />
+        </View>
+        <View style={styles.containerDropDown}>
+          <View style={{flexDirection: 'row'}}>
+            <Text style={[styles.txtSubtitle , {marginBottom: 5}]}>Mã lớp </Text> 
+            <Text style={{color: R.colors.red}}>*</Text>
+          </View>
+          <Dropdown title={'Giảng viên thay thế'} />
+        </View>
+        <View style={styles.containerDropDown}>
+          <View style={{flexDirection: 'row'}}>
+            <Text style={[styles.txtSubtitle , {marginBottom: 5}]}>Lịch báo cần bù </Text>
+            <Text style={{color: R.colors.red}}>*</Text>
+          </View>
+          <Dropdown title={'Lịch báo cần bù'} />
+        </View>
+        <View style={styles.containerInput}>
+          <TextField
+            title={'Số tiết đã nghỉ'}
+            color={R.colors.black}
+            fontSize={R.sizes.sm}
+            backgroundColor={R.colors.white}
+            fontSizeTitle={R.sizes.sm}
+            containerBackgroundColor={R.colors.white}
+            width={'38%'}
+          />
+          <View style={styles.sizedBox}></View>
+          <TextField
+            title={'Ngày học bù'}
+            color={R.colors.black}
+            fontSize={R.sizes.sm}
+            backgroundColor={R.colors.white}
+            required
+            fontSizeTitle={R.sizes.sm}
+            containerBackgroundColor={R.colors.white}
+            width={'58%'}
+          />
+        </View>
+        <TextMulti
+          title={'Ghi chú'}
+          color={R.colors.black}
+          fontSize={R.sizes.sm}
+          titleFontSize={R.sizes.sm}
+          containerMarginBottom={15}
+          containerBackgroundColor={R.colors.white}
+        />
+        <View style={styles.btnRegister}>
+          <Button
+            title={'Xem lịch rảnh SV'}
+            textColor={R.colors.white}
+            onPress={() => {}}
+            backgroundColor={R.colors.blue}
+            fontSize={R.sizes.sm}
+            fontFamily={R.fonts.fontMedium}
+            height={35}
+            containerStyle={{paddingHorizontal: 15, borderRadius: 10}}
+          />
+        </View>
+
+      </View>
     </View>
   );
 };