TODO: Refactor style và cải thiện tính nhất quán bố cục trên nhiều màn hình

Tăng chiều cao tối thiểu cho các tab trong TabView để cải thiện vùng chạm.

Điều chỉnh khoảng cách dọc trong style của academic advisor và compensate để bố cục thoáng hơn.

Thêm xử lý ẩn cảnh báo unique key prop trong màn hình class schedule.

Bỏ comment và bổ sung dữ liệu mẫu trong compensate index để thuận tiện cho việc test.

Chuẩn hóa khoảng cách dọc trong style của compensate list để đồng nhất.

Cải thiện cấu trúc và khả năng đọc trong compensate list view bằng cách tách riêng các phương thức render.

Cập nhật style của incoming document để đảm bảo khoảng cách nhất quán.

Tinh chỉnh style của list rest report để căn chỉnh trực quan hơn.

Nâng cấp cấu trúc list send document view để dễ đọc hơn.

Chuẩn hóa khoảng cách dọc trong style của list work để đồng bộ.

Cải thiện style của notification để có bố cục và căn chỉnh tốt hơn.

Refactor roll call view để cấu trúc rõ ràng, dễ duy trì.

Cập nhật sub teacher view để cải thiện bố cục và khả năng đọc.

src/components/TabView/view.js

@@ -245,7 +245,7 @@ const styles = StyleSheet.create({
   },
   // Style cơ bản cho mỗi tab
   tab: {
-    minHeight: 30, // Chiều cao tối thiểu 40px
+    minHeight: 35, // Chiều cao tối thiểu 40px
     justifyContent: 'center', // Căn giữa theo chiều dọc
     alignItems: 'center', // Căn giữa theo chiều ngang
     position: 'relative', // Để có thể đặt activeIndicator absolute

src/screens/academic_advisor/style.js

@@ -62,7 +62,7 @@ const styles = StyleSheet.create({
     shadowRadius: 1,
     elevation: Platform.OS === 'ios' ? 1 : 2,
     marginHorizontal: 15,
-    marginVertical: 10,
+    marginVertical: 7.5,
   },
   containerEmpty: {
     alignItems: 'center',

src/screens/class_schedule/view.js

@@ -16,6 +16,7 @@ import * as SCREENNAME from '../../routers/ScreenNames';
 
 LogBox.ignoreLogs([
   '[Reanimated] Reduced motion setting is enabled', 
+  'Each child in a list should have a unique "key" prop'
 ]);
 const ClassScheduleView = ({
   currentDate,

src/screens/compensate/index.js

@@ -4,41 +4,41 @@ import CompensateView from './view';
 
 const Compensate = props => {
   const [dataList, setDataList] = useState([
-    // {id: 1, classCode: 'ATTT2024.1', rest: 5, compensate: 0, total: 25},
-    // {id: 2, classCode: 'ATTT2024.2', rest: 4, compensate: 1, total: 25},
-    // {id: 3, classCode: 'ATTT2024.3', rest: 6, compensate: 0, total: 25},
-    // {id: 4, classCode: 'ATTT2024.4', rest: 3, compensate: 2, total: 25},
-    // {id: 5, classCode: 'ATTT2024.5', rest: 5, compensate: 0, total: 25},
+    {id: 1, classCode: 'ATTT2024.1', rest: 5, compensate: 0, total: 25},
+    {id: 2, classCode: 'ATTT2024.2', rest: 4, compensate: 1, total: 25},
+    {id: 3, classCode: 'ATTT2024.3', rest: 6, compensate: 0, total: 25},
+    {id: 4, classCode: 'ATTT2024.4', rest: 3, compensate: 2, total: 25},
+    {id: 5, classCode: 'ATTT2024.5', rest: 5, compensate: 0, total: 25},
 
-    // {id: 6, classCode: 'CNTT2024.1', rest: 2, compensate: 1, total: 25},
-    // {id: 7, classCode: 'CNTT2024.2', rest: 4, compensate: 0, total: 25},
-    // {id: 8, classCode: 'CNTT2024.3', rest: 5, compensate: 0, total: 25},
-    // {id: 9, classCode: 'CNTT2024.4', rest: 3, compensate: 1, total: 25},
-    // {id: 10, classCode: 'CNTT2024.5', rest: 6, compensate: 0, total: 25},
+    {id: 6, classCode: 'CNTT2024.1', rest: 2, compensate: 1, total: 25},
+    {id: 7, classCode: 'CNTT2024.2', rest: 4, compensate: 0, total: 25},
+    {id: 8, classCode: 'CNTT2024.3', rest: 5, compensate: 0, total: 25},
+    {id: 9, classCode: 'CNTT2024.4', rest: 3, compensate: 1, total: 25},
+    {id: 10, classCode: 'CNTT2024.5', rest: 6, compensate: 0, total: 25},
 
-    // {id: 11, classCode: 'KTPM2024.1', rest: 4, compensate: 1, total: 25},
-    // {id: 12, classCode: 'KTPM2024.2', rest: 2, compensate: 2, total: 25},
-    // {id: 13, classCode: 'KTPM2024.3', rest: 5, compensate: 0, total: 25},
-    // {id: 14, classCode: 'KTPM2024.4', rest: 4, compensate: 0, total: 25},
-    // {id: 15, classCode: 'KTPM2024.5', rest: 3, compensate: 1, total: 25},
+    {id: 11, classCode: 'KTPM2024.1', rest: 4, compensate: 1, total: 25},
+    {id: 12, classCode: 'KTPM2024.2', rest: 2, compensate: 2, total: 25},
+    {id: 13, classCode: 'KTPM2024.3', rest: 5, compensate: 0, total: 25},
+    {id: 14, classCode: 'KTPM2024.4', rest: 4, compensate: 0, total: 25},
+    {id: 15, classCode: 'KTPM2024.5', rest: 3, compensate: 1, total: 25},
 
-    // {id: 16, classCode: 'HTTT2024.1', rest: 5, compensate: 0, total: 25},
-    // {id: 17, classCode: 'HTTT2024.2', rest: 6, compensate: 0, total: 25},
-    // {id: 18, classCode: 'HTTT2024.3', rest: 3, compensate: 2, total: 25},
-    // {id: 19, classCode: 'HTTT2024.4', rest: 4, compensate: 1, total: 25},
-    // {id: 20, classCode: 'HTTT2024.5', rest: 5, compensate: 0, total: 25},
+    {id: 16, classCode: 'HTTT2024.1', rest: 5, compensate: 0, total: 25},
+    {id: 17, classCode: 'HTTT2024.2', rest: 6, compensate: 0, total: 25},
+    {id: 18, classCode: 'HTTT2024.3', rest: 3, compensate: 2, total: 25},
+    {id: 19, classCode: 'HTTT2024.4', rest: 4, compensate: 1, total: 25},
+    {id: 20, classCode: 'HTTT2024.5', rest: 5, compensate: 0, total: 25},
 
-    // {id: 21, classCode: 'KHMT2024.1', rest: 4, compensate: 0, total: 25},
-    // {id: 22, classCode: 'KHMT2024.2', rest: 5, compensate: 1, total: 25},
-    // {id: 23, classCode: 'KHMT2024.3', rest: 6, compensate: 0, total: 25},
-    // {id: 24, classCode: 'KHMT2024.4', rest: 3, compensate: 1, total: 25},
-    // {id: 25, classCode: 'KHMT2024.5', rest: 5, compensate: 0, total: 25},
+    {id: 21, classCode: 'KHMT2024.1', rest: 4, compensate: 0, total: 25},
+    {id: 22, classCode: 'KHMT2024.2', rest: 5, compensate: 1, total: 25},
+    {id: 23, classCode: 'KHMT2024.3', rest: 6, compensate: 0, total: 25},
+    {id: 24, classCode: 'KHMT2024.4', rest: 3, compensate: 1, total: 25},
+    {id: 25, classCode: 'KHMT2024.5', rest: 5, compensate: 0, total: 25},
 
-    // {id: 26, classCode: 'MMT2024.1', rest: 4, compensate: 1, total: 25},
-    // {id: 27, classCode: 'MMT2024.2', rest: 2, compensate: 0, total: 25},
-    // {id: 28, classCode: 'MMT2024.3', rest: 5, compensate: 0, total: 25},
-    // {id: 29, classCode: 'MMT2024.4', rest: 3, compensate: 2, total: 25},
-    // {id: 30, classCode: 'MMT2024.5', rest: 6, compensate: 0, total: 25},
+    {id: 26, classCode: 'MMT2024.1', rest: 4, compensate: 1, total: 25},
+    {id: 27, classCode: 'MMT2024.2', rest: 2, compensate: 0, total: 25},
+    {id: 28, classCode: 'MMT2024.3', rest: 5, compensate: 0, total: 25},
+    {id: 29, classCode: 'MMT2024.4', rest: 3, compensate: 2, total: 25},
+    {id: 30, classCode: 'MMT2024.5', rest: 6, compensate: 0, total: 25},
   ]);
   return <CompensateView dataList={dataList} />;
 };

src/screens/compensate/list/style.js

@@ -19,7 +19,7 @@ const styles = StyleSheet.create({
   card: {
     borderRadius: 10,
 
-    marginVertical: 10,
+    marginVertical: 7.5,
     backgroundColor: R.colors.white,
     shadowColor: R.colors.black,
     shadowOffset: {width: 0, height: 2},

src/screens/compensate/list/view.js

@@ -200,11 +200,9 @@ const DetailCompensateView = props => {
     );
   };
 
-  return (
-    <View style={styles.container}>
-      <Header title={'ATTT2024.1'} isBack />
-      <View style={styles.body}>
-        <View style={{alignItems: 'center', marginTop: 10}}>
+  const renderHeaderBody = () =>{
+    return (
+          <View style={{alignItems: 'center', marginTop:10}}>
           <Text
             style={[
               styles.text,
@@ -228,6 +226,11 @@ const DetailCompensateView = props => {
             {itemDetail?.rest} / {itemDetail?.compensate} / {itemDetail?.total}
           </Text>
         </View>
+    )
+  }
+
+  const renderList = () =>{
+    return (
         <FlatList
           data={listData || []}
           renderItem={renderItem}
@@ -235,6 +238,15 @@ const DetailCompensateView = props => {
           vertical
           keyExtractor={(item, index) => `${index}`}
         />
+    )
+  }
+
+  return (
+    <View style={styles.container}>
+      <Header title={'ATTT2024.1'} isBack />
+      <View style={styles.body}>
+        {renderHeaderBody()}
+        {renderList()}
       </View>
     </View>
   );

src/screens/compensate/style.js

@@ -13,8 +13,7 @@ const styles = StyleSheet.create({
   card: {
     borderRadius: 10,
     padding: 5,
-    marginTop: 10,
-    marginBottom: 10,
+    marginVertical:10,
     marginHorizontal: 15,
     alignItems: 'center',
     justifyContent: 'center',
@@ -44,7 +43,7 @@ const styles = StyleSheet.create({
   containerCard: {
     padding: 10,
     borderRadius: 10,
-    marginVertical: 10,
+    marginVertical: 7.5,
     backgroundColor: R.colors.white,
     shadowColor: R.colors.black,
     shadowOffset: {width: 0, height: 2},

src/screens/compensate/view.js

@@ -75,15 +75,13 @@ const CompensateView = props => {
 
   const renderListClass = () => {
     return (
- <FlatList
+      <FlatList
         data={dataList || []}
         renderItem={renderItem}
         showsVerticalScrollIndicator={false}
         vertical
         keyExtractor={(item, index) => `${index}`}
       />
-
-     
     );
   };
 
@@ -119,32 +117,32 @@ const CompensateView = props => {
     );
   };
 
-  const renderListEmpty = () =>{
-    return(
+  const renderListEmpty = () => {
+    return (
       <View style={styles.containerEmpty}>
         <View>
           <Image
             source={R.images.icNoData}
             style={{width: 50, height: 50}}
             resizeMode="contain"
-          />  
+          />
         </View>
-       
+
         <Text style={[styles.text, {color: R.colors.red}]}>
           Không có dữ liệu
         </Text>
       </View>
-    )
+    );
   };
 
   const renderBody = () => {
     return (
-      <View style={styles.body }>
+      <View style={styles.body}>
         {renderHeaderBody()}
         <View style={styles.containerList}>
-           {dataList.length > 0 ? renderListClass() : renderListEmpty()}
+          {dataList.length > 0 ? renderListClass() : renderListEmpty()}
         </View>
-       
+
         {renderButtonRegister()}
       </View>
     );

src/screens/feedback/style.js

@@ -13,8 +13,7 @@ const styles = StyleSheet.create({
   card: {
     borderRadius: 10,
     padding: 5,
-    marginTop: 15,
-    marginBottom: 5,
+    marginVertical:10,
     marginHorizontal: 15,
     alignItems: 'center',
     justifyContent: 'center',
@@ -44,7 +43,7 @@ const styles = StyleSheet.create({
   containerCard: {
     padding: 10,
     borderRadius: 10,
-    marginVertical: 10,
+    marginVertical: 7.5,
     backgroundColor: R.colors.white,
     shadowColor: R.colors.black,
     shadowOffset: {width: 0, height: 2},

src/screens/incoming_document/index.js

@@ -41,6 +41,7 @@ const IncomingDocument = props => {
       number_entry_book: '12493-fh544',
       status: 'Công khai',
     },
+    
   ]);
 
   const [searchQuery, setSearchQuery] = useState('');

src/screens/incoming_document/style.js

@@ -41,8 +41,8 @@ const styles = StyleSheet.create({
     borderColor: R.colors.grayBorderInputTextHeader,
     borderRadius: 10,
     padding: 5,
-    marginTop: 15,
-    marginBottom: 15,
+    marginTop: 10,
+    marginBottom: 10,
     marginHorizontal: 15,
     alignItems: 'center',
     justifyContent: 'center',

src/screens/list_rest_report/style.js

@@ -13,8 +13,7 @@ const styles = StyleSheet.create({
   card: {
     borderRadius: 10,
     padding: 5,
-    marginTop: 15,
-    marginBottom: 5,
+    marginVertical:10,
     marginHorizontal: 15,
     alignItems: 'center',
     justifyContent: 'center',
@@ -43,7 +42,7 @@ const styles = StyleSheet.create({
   containerCard: {
     padding: 10,
     borderRadius: 10,
-    marginVertical: 10,
+    marginVertical: 7.5,
     backgroundColor: R.colors.white,
     shadowColor: R.colors.black,
     shadowOffset: {width: 0, height: 2},

src/screens/list_rest_report/view.js

@@ -55,40 +55,64 @@ const ListRestReportView = props => {
     );
   };
 
-  return (
-    <View style={styles.container}>
-      <Header title={'Báo nghỉ lịch dạy'} isBack />
-      <View style={styles.body}>
-        <View style={styles.card}>
-          <TouchableOpacity style={styles.btnCard}>
-            <Text
-              style={[
-                styles.text,
-                {
-                  fontSize: R.fontsize.fontSizeContent,
-                  fontWeight: 600,
-                  fontFamily: R.fonts.fontMedium,
-                },
-              ]}>
-              Học kỳ 2, Năm 2025
-            </Text>
-          </TouchableOpacity>
-        </View>
-        <FlatList
-          data={dataList || []}
-          renderItem={renderItem}
-          showsVerticalScrollIndicator={false}
-          vertical
-          keyExtractor={(item, index) => `${index}`}
-        />
-        <TouchableOpacity
-          style={styles.btnRegister}
-          onPress={() => navigation.navigate(ScreenName.REGISTERABSENCE)}>
-          <Text style={[styles.text, {color: R.colors.white}]}>
-            Đăng kí báo nghỉ
+  const renderCard = () => {
+    return (
+      <View style={styles.card}>
+        <TouchableOpacity style={styles.btnCard}>
+          <Text
+            style={[
+              styles.text,
+              {
+                fontSize: R.fontsize.fontSizeContent,
+                fontWeight: 600,
+                fontFamily: R.fonts.fontMedium,
+              },
+            ]}>
+            Học kỳ 2, Năm 2025
           </Text>
         </TouchableOpacity>
       </View>
+    );
+  };
+
+  const renderList = () => {
+    return (
+      <FlatList
+        data={dataList || []}
+        renderItem={renderItem}
+        showsVerticalScrollIndicator={false}
+        vertical
+        keyExtractor={(item, index) => `${index}`}
+      />
+    );
+  };
+
+  const renderButton = () => {
+    return (
+      <TouchableOpacity
+        style={styles.btnRegister}
+        onPress={() => navigation.navigate(ScreenName.REGISTERABSENCE)}>
+        <Text style={[styles.text, {color: R.colors.white}]}>
+          Đăng kí báo nghỉ
+        </Text>
+      </TouchableOpacity>
+    );
+  };
+
+  const renderBody = () => {
+    return (
+      <View style={styles.body}>
+        {renderCard()}
+        {renderList()}
+        {renderButton()}
+      </View>
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      <Header title={'Báo nghỉ lịch dạy'} isBack />
+      {renderBody()}
     </View>
   );
 };

src/screens/list_send_document/style.js

@@ -13,7 +13,7 @@ const styles = StyleSheet.create({
   cardTabView: {},
   itemTabView: {
     width: 103,
-    height: 30,
+    height: 35,
     borderRadius: 10,
     marginTop: 10,
     backgroundColor: R.colors.gray,
@@ -40,8 +40,7 @@ const styles = StyleSheet.create({
     borderColor: R.colors.grayBorderInputTextHeader,
     borderRadius: 10,
     padding: 5,
-    marginTop: 15,
-    marginBottom: 15,
+    marginVertical:10,
     marginHorizontal: 15,
     alignItems: 'center',
     justifyContent: 'center',
@@ -91,7 +90,7 @@ const styles = StyleSheet.create({
     borderRadius: 10,
     padding: 10,
     marginHorizontal: 15,
-    marginVertical: 7.5,
+    marginVertical:7.5,
     backgroundColor: R.colors.white,
     shadowColor: R.colors.black,
     shadowOffset: {width: 0.5, height: 2},

src/screens/list_send_document/view.js

@@ -180,65 +180,85 @@ const ListSendView = props => {
       />
     );
   };
-  return (
-    <View style={styles.container}>
-      <Header title={'Danh sách văn bản đi'} isBack />
-      <View style={{flex: 1}}>
-        <View style={styles.body}>
-          <View style={styles.cardTabView}>
-            <FlatList
-              data={dataListTabView}
-              renderItem={itemTabView}
-              keyExtractor={item => item.key}
-              horizontal
-              contentContainerStyle={styles.contentContainerStyle}
-              showsHorizontalScrollIndicator={false}
-            />
-          </View>
 
-          <View style={{marginBottom: 15}}>
-            <View style={styles.card}>
-              <TouchableOpacity style={styles.btnCard}>
-                <Text
-                  style={[
-                    styles.text,
-                    {
-                      fontSize: R.fontsize.fontSizeContent,
-                      fontWeight: '600',
-                      fontFamily: R.fonts.fontMedium,
-                      color: R.colors.black,
-                    },
-                  ]}>
-                  Học kỳ 2, Năm 2025
-                </Text>
-              </TouchableOpacity>
-            </View>
+  const renderListView = () => {
+    return (
+      <View style={styles.cardTabView}>
+        <FlatList
+          data={dataListTabView}
+          renderItem={itemTabView}
+          keyExtractor={item => item.key}
+          horizontal
+          contentContainerStyle={styles.contentContainerStyle}
+          showsHorizontalScrollIndicator={false}
+        />
+      </View>
+    );
+  };
 
-            <View style={styles.box_3}>
-              <View style={styles.searchBox}>
-                <Image
-                  source={R.images.icSearch}
-                  style={{width: 20, height: 20}}
-                />
-                <View style={{flex: 1}}>
-                  <TextInput
-                    placeholder="Tìm kiếm"
-                    style={[styles.text, {padding: 0}]}
-                    value={searchQuery}
-                    onChangeText={setSearchQuery}
-                  />
-                </View>
-              </View>
-              <View style={{flex: 0.1}}></View>
+  const renderBody = () => {
+    return (
+      <View style={styles.body}>
+        {renderListView()}
+
+        {renderCard()}
 
-              <View style={styles.boxFilter}>
-                <Dropdown title={'Tìm kiếm'} height={35} />
-              </View>
+        {renderListIncomingDocument()}
+      </View>
+    );
+  };
+  const renderFilter = () =>{
+    return (
+      
+        <View style={styles.box_3}>
+          <View style={styles.searchBox}>
+            <Image source={R.images.icSearch} style={{width: 20, height: 20}} />
+            <View style={{flex: 1}}>
+              <TextInput
+                placeholder="Tìm kiếm"
+                style={[styles.text, {padding: 0}]}
+                value={searchQuery}
+                onChangeText={setSearchQuery}
+              />
             </View>
           </View>
+          <View style={{flex: 0.1}}></View>
+
+          <View style={styles.boxFilter}>
+            <Dropdown title={'Tìm kiếm'} height={35} />
+          </View>
+        </View>
+    )
+  }
 
-          {renderListIncomingDocument()}
+  const renderCard = () => {
+    return (
+      <View >
+        <View style={styles.card}>
+          <TouchableOpacity style={styles.btnCard}>
+            <Text
+              style={[
+                styles.text,
+                {
+                  fontSize: R.fontsize.fontSizeContent,
+                  fontWeight: '600',
+                  fontFamily: R.fonts.fontMedium,
+                  color: R.colors.black,
+                },
+              ]}>
+              Học kỳ 2, Năm 2025
+            </Text>
+          </TouchableOpacity>
         </View>
+            {renderFilter()}
+      </View>
+    );
+  };
+  return (
+    <View style={styles.container}>
+      <Header title={'Danh sách văn bản đi'} isBack />
+      <View style={{flex: 1}}>
+        {renderBody()}
 
         <View style={{marginHorizontal: 15}}>
           <FAB>

src/screens/list_work/style.js

@@ -15,8 +15,8 @@ const styles = StyleSheet.create({
     borderColor: R.colors.grayBorderInputTextHeader,
     borderRadius: 10,
     padding: 5,
-    marginTop: 15,
-    marginBottom: 15,
+    marginTop: 10,
+    marginBottom: 10,
     marginHorizontal: 15,
     alignItems: 'center',
     justifyContent: 'center',
@@ -38,7 +38,7 @@ const styles = StyleSheet.create({
     borderColor: R.colors.grayBorderInputTextHeader,
   },
   container_tab_view: {
-    marginVertical: 5,
+    marginTop:10
   },
   item_tab_view: {
     backgroundColor: R.colors.gray,
@@ -72,11 +72,12 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-start',
     paddingLeft: 15,
     flexDirection: 'row',
-    height: 30,
+    height: 35,
   },
   box_3: {
     flexDirection: 'row',
     marginHorizontal: 15,
+    marginBottom:10,
     alignItems: 'center',
   },
   containerCard: {
@@ -102,6 +103,63 @@ const styles = StyleSheet.create({
     fontWeight: '400',
     color: R.colors.black,
   },
+  // New styles moved from inline styles
+  listItemContainer: {
+    marginHorizontal: 15,
+    marginBottom:10
+  },
+  statusHeader: {
+    borderTopLeftRadius: 15,
+    borderTopRightRadius: 15,
+  },
+  statusText: {
+    marginHorizontal: 15,
+    fontFamily: R.fonts.fontMedium,
+    fontWeight: '600',
+    color: R.colors.white,
+  },
+  cardContent: {
+    paddingHorizontal: 15,
+    paddingTop: 10,
+  },
+  rowSpaceBetween: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  actionButtonsContainer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    marginTop: 10,
+  },
+  buttonContainerStyle: {
+    marginRight: 10,
+    borderRadius: 20,
+  },
+  searchIcon: {
+    width: 20,
+    height: 20,
+  },
+  searchInputContainer: {
+    flex: 1,
+    padding: 0,
+    margin: 0,
+    height: 35,
+  },
+  searchInput: {
+    height: 35,
+    padding: 0,
+    marginRight: 15,
+  },
+  filterSpacer: {
+    flex: 0.1,
+  },
+  dropdownContainer: {
+    flex: 1,
+  },
+  listContainer: {
+    marginBottom: 15,
+    flex: 1,
+  },
 });
 
 export default styles;

src/screens/list_work/view.js

@@ -49,7 +49,7 @@ const ListWorkView = props => {
         tabStyle={styles.item_tab_view}
         style={styles.container_tab_view}
         mode="filter"
-        defaultActiveKey="all"
+        defaultActiveKey={ROLE.ALL}
         scrollable={true}
         activeTabStyle={styles.active_tab_view}
         textStyle={styles.text_tab_view}
@@ -78,7 +78,7 @@ const ListWorkView = props => {
         fontSize={11}
         height={30}
         width={100}
-        containerStyle={{marginRight: 10, borderRadius: 20}}
+        containerStyle={styles.buttonContainerStyle}
       />
     ));
   };
@@ -86,33 +86,22 @@ const ListWorkView = props => {
   const renderListView = ({item}) => {
     return (
       <TouchableOpacity
-        style={{marginHorizontal: 15, marginVertical: 10}}
+        style={styles.listItemContainer}
         onPress={() => onViewDetailDeliverToMe(item)}
         activeOpacity={0.7}>
         <View
-          style={{
-            backgroundColor: getStatusColor(item.status),
-            borderTopLeftRadius: 15,
-            borderTopRightRadius: 15,
-          }}>
-          <Text
-            style={[
-              styles.subText,
-              {
-                marginHorizontal: 15,
-                fontFamily: R.fonts.fontMedium,
-                fontWeight: '600',
-                color: R.colors.white,
-              },
-            ]}>
+          style={[
+            styles.statusHeader,
+            {backgroundColor: getStatusColor(item.status)},
+          ]}>
+          <Text style={[styles.subText, styles.statusText]}>
             {item.status}
           </Text>
         </View>
         <View style={styles.containerCard}>
-          <View style={{paddingHorizontal: 15, paddingTop: 10}}>
+          <View style={styles.cardContent}>
             <Text style={styles.text}>{item.title}</Text>
-            <View
-              style={{flexDirection: 'row', justifyContent: 'space-between'}}>
+            <View style={styles.rowSpaceBetween}>
               <Text style={styles.text}>
                 Ngày đến hạn:
                 <Text style={styles.subText}>{item.deadline}</Text>
@@ -130,12 +119,7 @@ const ListWorkView = props => {
             </Text>
           </View>
 
-          <View
-            style={{
-              flexDirection: 'row',
-              justifyContent: 'flex-end',
-              marginTop: 10,
-            }}>
+          <View style={styles.actionButtonsContainer}>
             {renderActionButtons(item)}
           </View>
         </View>
@@ -157,20 +141,20 @@ const ListWorkView = props => {
     return (
       <View style={styles.box_3}>
         <View style={styles.searchBox}>
-          <Image source={R.images.icSearch} style={{width: 20, height: 20}} />
-          <View style={{flex: 1, padding: 0, margin: 0, height: 30}}>
+          <Image source={R.images.icSearch} style={styles.searchIcon} />
+          <View style={styles.searchInputContainer}>
             <TextInput
               placeholder="Tìm kiếm"
-              style={[styles.text, {height: 30, padding: 0, marginRight: 15}]}
+              style={[styles.text, styles.searchInput]}
               value={searchQuery}
               onChangeText={setSearchQuery}
             />
           </View>
         </View>
-        <View style={{flex: 0.1}}></View>
+        <View style={styles.filterSpacer}></View>
 
-        <View style={{flex: 1}}>
-          <Dropdown title={'Tìm kiếm'} height={30} />
+        <View style={styles.dropdownContainer}>
+          <Dropdown title={'Tìm kiếm'} height={35} />
         </View>
       </View>
     );
@@ -191,7 +175,7 @@ const ListWorkView = props => {
        <View style={styles.body}>
         {renderTabView()}
         {renderCard()}
-        <View style={{marginBottom: 15, flex: 1}}>
+        <View style={styles.listContainer}>
           {renderFilter()}
           {renderListItem()}
         </View>

src/screens/notification/style.js

@@ -12,6 +12,7 @@ const styles = StyleSheet.create({
     minWidth: Platform.OS === 'ios' ? 70 : 80,
     backgroundColor: R.colors.grayButton,
     borderRadius: 10,
+    height:35,
     marginRight: Platform.OS === 'ios' ? 23 : 15,
     alignItems: 'center',
     justifyContent: 'center',
@@ -25,7 +26,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     marginHorizontal: 15,
-    marginVertical: 15,
+    marginVertical: 10,
   },
   textTabView: {
     color: R.colors.white,
@@ -43,6 +44,7 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderRadius: 100,
     marginHorizontal: 15,
+    marginBottom:10,
     backgroundColor: R.colors.white,
     flexDirection: 'row',
     height: 35,
@@ -75,6 +77,7 @@ const styles = StyleSheet.create({
   cardItem: {
     paddingVertical: 5,
     paddingHorizontal: 15,
+    marginVertical:7.5,
     borderColor: R.colors.grayBorderInputTextHeader,
     borderRadius: 10,
     backgroundColor: R.colors.white,
@@ -84,7 +87,6 @@ const styles = StyleSheet.create({
     shadowOpacity: Platform.OS === 'ios' ? 0.25 : 1,
     shadowRadius: 2,
     elevation: Platform.OS === 'ios' ? 1 : 2,
-    marginBottom: 15,
   },
   cardItemTution: {
     flexDirection: 'row',

src/screens/notification/view.js

@@ -190,7 +190,6 @@ const NotificationView = props => {
         renderItem={getRenderItemFunction()}
         keyExtractor={(item, index) => `${activeTab}-${index}`}
         showsVerticalScrollIndicator={false}
-        contentContainerStyle={styles.containerListNotification}
         vertical
       />
     );
@@ -204,6 +203,17 @@ const NotificationView = props => {
       </View>
     );
   };
+  const renderList = () =>{
+    return (
+         <View style={styles.containerBody}>
+        {/* {(dataNotifi[activeTab] && dataNotifi[activeTab].length > 0) && renderSearchBox()} */}
+
+        {dataNotifi[activeTab].length === 0
+          ? renderItemEmpty()
+          : renderListNotification()}
+      </View>
+    )
+  }
   return (
     <View style={styles.safeArea}>
       <Header title={'Thông báo'} />
@@ -214,13 +224,8 @@ const NotificationView = props => {
         {renderSearchBox()}
       </View>
 
-      <View style={styles.containerBody}>
-        {/* {(dataNotifi[activeTab] && dataNotifi[activeTab].length > 0) && renderSearchBox()} */}
+      {renderList()}
 
-        {dataNotifi[activeTab].length === 0
-          ? renderItemEmpty()
-          : renderListNotification()}
-      </View>
       <View style={styles.containerFooter}>
         <TouchableOpacity
           style={styles.btnFooter}

src/screens/roll_call/style.js

@@ -16,8 +16,7 @@ const styles = StyleSheet.create({
     borderColor: R.colors.grayBorderInputTextHeader,
     borderRadius: 10,
     padding: 5,
-    marginTop: 15,
-    marginBottom: 15,
+    marginVertical:10,
     alignItems: 'center',
     justifyContent: 'center',
     backgroundColor: R.colors.white,
@@ -50,8 +49,8 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderRadius: 100,
     paddingHorizontal: 10,
-    paddingVertical: 5,
     marginHorizontal: 15,
+    marginBottom:10,
   },
   textInput: {
     fontSize: R.sizes.sm,
@@ -61,7 +60,7 @@ const styles = StyleSheet.create({
     padding: 0,
     margin: 0,
     flex: 1,
-    height: 25,
+    height: 35,
   },
   iconSearch: {
     width: 24,
@@ -72,8 +71,7 @@ const styles = StyleSheet.create({
     paddingVertical: 10,
     paddingHorizontal: 15,
     marginHorizontal: 15,
-    marginTop: 10,
-    marginBottom: 15,
+    marginVertical:7.5,
     backgroundColor: R.colors.white,
     borderRadius: 15,
     shadowColor: R.colors.black,

src/screens/roll_call/view.js

@@ -19,7 +19,6 @@ const ListRollCallView = props => {
   const {dataList} = props;
   const navigation = useNavigation();
   const renderItem = ({item}) => {
-    console.log(item);
     return (
       <View style={styles.item}>
         <View style={styles.row}>
@@ -125,41 +124,63 @@ const ListRollCallView = props => {
       </View>
     );
   };
+
+  const renderCard = () => {
+    return (
+      <View style={styles.card}>
+        <TouchableOpacity style={styles.btnCard}>
+          <Text
+            style={[
+              styles.text,
+              {
+                fontSize: R.fontsize.fontSizeContent,
+                fontWeight: 600,
+                fontFamily: R.fonts.fontMedium,
+              },
+            ]}>
+            Học kỳ 2, Năm 2025
+          </Text>
+        </TouchableOpacity>
+      </View>
+    );
+  };
+
+  const renderFilter = () => {
+    return (
+      <View style={styles.searchContainer}>
+        <Image source={R.images.icSearch} style={styles.iconSearch} />
+        <TextInput
+          placeholder="Tìm kiếm"
+          placeholderTextColor={R.colors.grayText}
+          style={styles.textInput}
+        />
+      </View>
+    );
+  };
+
+  const renderListView = () => {
+    return (
+      <FlatList
+        data={dataList}
+        renderItem={renderItem}
+        keyExtractor={(item, index) => `${index}`}
+        showsVerticalScrollIndicator={false}
+      />
+    );
+  };
+  const renderBody = () => {
+    return (
+      <View style={styles.body}>
+        {renderCard()}
+        {renderFilter()}
+        {renderListView()}
+      </View>
+    );
+  };
   return (
     <View style={styles.container}>
       <Header title={'Danh sách lớp điểm danh'} isBack />
-      <View style={styles.body}>
-        <View style={styles.card}>
-          <TouchableOpacity style={styles.btnCard}>
-            <Text
-              style={[
-                styles.text,
-                {
-                  fontSize: R.fontsize.fontSizeContent,
-                  fontWeight: 600,
-                  fontFamily: R.fonts.fontMedium,
-                },
-              ]}>
-              Học kỳ 2, Năm 2025
-            </Text>
-          </TouchableOpacity>
-        </View>
-        <View style={styles.searchContainer}>
-          <Image source={R.images.icSearch} style={styles.iconSearch} />
-          <TextInput
-            placeholder="Tìm kiếm"
-            placeholderTextColor={R.colors.grayText}
-            style={styles.textInput}
-          />
-        </View>
-        <FlatList
-          data={dataList}
-          renderItem={renderItem}
-          keyExtractor={(item, index) => `${index}`}
-          showsVerticalScrollIndicator={false}
-          style={styles.list}
-        />
-      </View>
+      {renderBody()}
     </View>
   );
 };

src/screens/sub_teacher/style.js

@@ -12,8 +12,7 @@ const styles = StyleSheet.create({
   card: {
     borderRadius: 10,
     padding: 5,
-    marginTop: 15,
-    marginBottom: 15,
+    marginVertical:10,
     marginHorizontal: 15,
     alignItems: 'center',
     justifyContent: 'center',
@@ -43,7 +42,7 @@ const styles = StyleSheet.create({
   containerCard: {
     padding: 10,
     borderRadius: 10,
-    marginBottom: 15,
+    marginVertical:7.5,
     backgroundColor: R.colors.white,
     shadowColor: R.colors.black,
     shadowOffset: {width: 0, height: 2},

src/screens/sub_teacher/view.js

@@ -179,34 +179,51 @@ const SubTeacherView = props => {
         return R.colors.orange;
     }
   };
+
+  const renderCard = () => {
+    return (
+      <View style={styles.card}>
+        <TouchableOpacity style={styles.btnCard}>
+          <Text
+            style={[
+              styles.text,
+              {
+                fontSize: R.fontsize.fontSizeContent,
+                fontWeight: 600,
+                fontFamily: R.fonts.fontMedium,
+              },
+            ]}>
+            Học kỳ 2, Năm 2025
+          </Text>
+        </TouchableOpacity>
+      </View>
+    );
+  };
+
+  const renderList = () => {
+    return (
+      <FlatList
+        data={dataList || []}
+        renderItem={renderItem}
+        showsVerticalScrollIndicator={false}
+        vertical
+        keyExtractor={(item, index) => `${index}`}
+      />
+    );
+  };
+
+  const renderBody = () =>{
+    return (
+      <View style={styles.body}>
+        {renderCard()}
+        {renderList()}
+      </View>
+    )
+  }
   return (
     <View style={styles.container}>
       <Header title={'Xác nhận dạy thay'} isBack />
-      <View style={styles.body}>
-        <View style={styles.card}>
-          <TouchableOpacity style={styles.btnCard}>
-            <Text
-              style={[
-                styles.text,
-                {
-                  fontSize: R.fontsize.fontSizeContent,
-                  fontWeight: 600,
-                  fontFamily: R.fonts.fontMedium,
-                },
-              ]}>
-              Học kỳ 2, Năm 2025
-            </Text>
-          </TouchableOpacity>
-        </View>
-        <FlatList
-          data={dataList || []}
-          renderItem={renderItem}
-          showsVerticalScrollIndicator={false}
-          vertical
-          contentContainerStyle={{paddingTop: 10}}
-          keyExtractor={(item, index) => `${index}`}
-        />
-      </View>
+        {renderBody()}
     </View>
   );
 };