TODO: Đã hoàn thiện một số phần của giao diện tạo thông báo

src/components/DropdownAlert/Dropdown.js

+import React, { useState } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, FlatList, Image } from 'react-native';
+import R from '../../assets/R';
+const Dropdown = ({ items, placeholder = "Chọn...", onSelect }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState(null);
+
+  const handleSelect = (item) => {
+    setSelected(item);
+    setIsOpen(false);
+    if (onSelect) onSelect(item);
+  };
+
+  return (
+    <View style={styles.container}>
+      {/* Nút hiển thị */}
+      <TouchableOpacity
+        style={styles.dropdownHeader}
+        onPress={() => setIsOpen(!isOpen)}
+      >
+        <Text style={styles.dropdownHeaderText}>
+          {selected ? selected.label : placeholder}
+        </Text>
+        <Image source={R.images.icDrop} style={styles.imageIcon} />
+        
+      </TouchableOpacity>
+
+      {/* Danh sách xổ xuống */}
+      {isOpen && (
+        <View style={[styles.dropdownList, { position: 'absolute', top: 35, left: 0, right: 0, zIndex: 999 }]}>
+          <FlatList
+            data={items}
+            keyExtractor={(item) => item.id.toString()}
+            renderItem={({ item }) => (
+              <TouchableOpacity
+                style={styles.dropdownItem}
+                onPress={() => handleSelect(item)}
+              >
+                <Text style={styles.dropdownItemText}>{item.label}</Text>
+              </TouchableOpacity>
+            )}
+          />
+        </View>
+      )}
+    </View>
+  );
+};
+
+export default Dropdown;
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+  },
+dropdownHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: '#ccc',
+    borderRadius: 5,
+    backgroundColor: '#fff',
+    height:35,
+    paddingHorizontal:15
+    
+  },
+  dropdownHeaderText: {
+    fontSize: 12,
+    color: '#333',
+
+  },
+  dropdownList: {
+    borderWidth: 1,
+    borderColor: '#ccc',
+    backgroundColor: '#fff',
+  },
+  dropdownItem: {
+    padding: 5,
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+  },
+  dropdownItemText: {
+    fontSize: 12,
+    color: '#333',
+  },
+  imageIcon:{
+    width:20,
+    height:20,
+    resizeMode:'contain',
+    tintColor:'#333',
+  }
+});

src/components/Input/TextField.js

@@ -21,6 +21,7 @@ const TextField = props => {
     color,
     required,
     containerMarginVertical,
+    containerMarginTop,
     containerMarginHorizontal,
     containerMarginBottom,
     containerBackgroundColor,
@@ -31,7 +32,7 @@ const TextField = props => {
   };
 
   return (
-    <View style={{marginVertical: containerMarginVertical, marginHorizontal: containerMarginHorizontal, marginBottom: containerMarginBottom , backgroundColor: containerBackgroundColor}}>
+    <View style={{marginVertical: containerMarginVertical, marginHorizontal: containerMarginHorizontal, marginBottom: containerMarginBottom , backgroundColor: containerBackgroundColor, marginTop: containerMarginTop}}>
       <Text
         style={{
           fontSize: fontSizeTitle,
@@ -45,6 +46,7 @@ const TextField = props => {
         <Text style={{color: R.colors.red}}> {required ? "*" : ""}</Text>
       </Text>
       <TextInput
+
         placeholder={placeholder}
         maxLength={maxLength ? maxLength : 256}
         placeholderTextColor={R.colors.placeHolder}
@@ -58,6 +60,8 @@ const TextField = props => {
         style={{
           height: HEIGHT(35),
           color: color,
+          borderColor:R.colors.grayBorderInputTextHeader,
+          borderWidth:1,
           borderRadius: HEIGHT(6),
           fontSize: fontSize,
           paddingVertical: 5,

src/components/Input/TextMulti.js

@@ -53,6 +53,8 @@ const TextField = props => {
           textAlign: 'left',
           color: 'black',
           height: 210,
+          borderColor:R.colors.grayBorderInputTextHeader,
+          borderWidth:1,
           width: '100%',
           borderRadius: 7,
           fontSize: fontSizePlaceHolder,

src/routers/StackNavigation.js

@@ -5,6 +5,7 @@ import Home from '../screens/home';
 import NotificationDetail from '../screens/notification/detail';
 import TabNavigator from './TabNavigation';
 import * as ScreenName from './ScreenNames';
+import NotificationAdd from '../screens/notification/add';
 
 const Stack = createStackNavigator();
 
@@ -15,10 +16,11 @@ function MyStack(props) {
         headerStatusBarHeight: 0,
       }}
       headerMode={'none'}
-      initialRouteName={ScreenName.DETAILNOTIFICATION}>
+      initialRouteName={ScreenName.ADDNOTIFICATION}>
       <Stack.Screen name={ScreenName.HOMESCREEN} component={Home} />
       <Stack.Screen name={ScreenName.TABNAVIGATOR} component={TabNavigator} />
       <Stack.Screen name={ScreenName.DETAILNOTIFICATION} component={NotificationDetail} />
+      <Stack.Screen name={ScreenName.ADDNOTIFICATION} component={NotificationAdd} />
     </Stack.Navigator>
   );
 }

src/screens/notification/add/index.js

-import React from 'react';
+import React, {useState} from 'react';
 import {Text, View, StyleSheet} from 'react-native';
 import NotificationAddView from './view';
 
 const NotificationAdd = (props) => {
+      const [selectedValue, setSelectedValue] = useState('1');
+      const options = [
+          {label: 'Gửi cá nhân', value: '1'},
+          {label: 'Gửi tập thể lớp', value: '2'},
+        ];
+      const onValueChange = value => {
+          setSelectedValue(value);
+        };
+        const items = [
+          { id: 1, label: 'Option 1' },
+          { id: 2, label: 'Option 2' },
+          { id: 3, label: 'Option 3' },
+        ];
+      
   return (
-    <NotificationAddView />
+    <NotificationAddView 
+    options={options}
+    selectedValue={selectedValue}
+    onValueChange={onValueChange}
+    items={items}
+    />
   );
 };
 

src/screens/notification/add/style.js

+import { StyleSheet, Platform } from "react-native";
+import R from "../../../assets/R";
+
+const styles = StyleSheet.create({
+    safeArea:{
+        flex:1,
+        backgroundColor:R.colors.white,
+    },
+    container:{
+        marginHorizontal:15,
+    },
+    boxInput:{
+        padding:7,
+        borderColor:R.colors.grayBorderInputTextHeader,
+        borderWidth:1,
+        borderRadius:10,
+        marginVertical:10,
+        backgroundColor:R.colors.brown,
+        
+    },
+    txtInput:{
+        color:R.colors.white,
+        fontSize:R.fontsize.fontSizeLabel,
+        fontFamily:R.fonts.fontMedium,
+        fontWeight:'600',
+    },
+    containerRow:{
+        flexDirection:'row',
+        alignItems:'center',
+        justifyContent:'center',
+    },
+    text:{
+        fontSize:R.fontsize.fontSizeLabel,
+        fontFamily:R.fonts.fontMedium,
+        fontWeight:'600',
+        color:R.colors.black,
+    },
+    //Item
+    chip: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        // position: 'relative',
+        paddingLeft: 10,
+        height: 25,
+        borderRadius: 10,
+        marginBottom:10,
+        marginHorizontal:5,
+        // top: 10,
+        // left: 10,
+        backgroundColor: R.colors.blue2,
+        alignSelf:'flex-start'
+      },
+      imageIcon: {
+        width: 15,
+        height: 15,
+      },
+      containerIcon: {
+        marginRight: 2,
+      },
+      text: {
+        fontSize: 12,
+        fontWeight: '300',
+        fontFamily:R.fonts.fontRegular,
+        color:R.colors.blueTextChip,
+        marginRight:10
+      },
+      //FlatList
+      flatList:{
+        height:200,
+        backgroundColor:R.colors.blue1,
+        paddingHorizontal:10,
+        borderRadius:10,
+        paddingVertical:15,
+        flexDirection:'row',
+        marginBottom:15,
+      },
+      //ContainerBtn
+      containerBtn:{
+        flexDirection:'row',
+        justifyContent:'space-between',
+      },
+      containerInput:{
+        flex:10,
+      },
+      txtSubtitle:{
+        fontSize:R.fontsize.fontSizeSubTitle,
+        fontFamily:R.fonts.fontMedium,
+        fontWeight:'600',
+        color:R.colors.black,
+        marginBottom:15,
+      },
+      text:{
+        fontSize:R.fontsize.fontSizeContent,
+        fontFamily:R.fonts.fontRegular,
+        fontWeight:'400',
+        color:R.colors.black,
+      },
+      containerDropdown:{
+        marginBottom:15,
+        position: 'relative', 
+        zIndex: 1000
+      },
+});
+export default styles;
\ No newline at end of file

src/screens/notification/add/view.js

 import React from 'react';
-import {Text, View, TouchableOpacity, StyleSheet} from 'react-native';
+import {Text, View, FlatList, ScrollView} from 'react-native';
+import styles from './style';
+import Header from '../../../components/Header/Header';
+import TextField from '../../../components/Input/TextField';
+import R from '../../../assets/R';
+import TextMulti from '../../../components/Input/TextMulti';
+import RadioGroup from '../../../components/RadioButton/RadioGroup';
+import Button from '../../../components/Button';
+import Dropdown from '../../../components/DropdownAlert/Dropdown';
+const NotificationDetailView = props => {
+  const {
+    showWarning,
+    title,
+    onTitleChange,
+    options,
+    selectedValue,
+    onValueChange,
+    disabled,
+    size,
+    color,
+    direction,
+    dataList,
+    items,
+  } = props;
+
+  const renderItem = ({item, onPress}) => {
+    return (
+      <View style={styles.chip}>
+        {/* <TouchableOpacity style={styles.containerIcon} onPress={onPress}>
+        <Image
+          resizeMode="cover"
+          source={R.images.icCancel}
+          style={styles.imageIcon}
+        />
+      </TouchableOpacity> */}
+        <Text style={styles.text}> {`${item.id}, ${item.name}`}</Text>
+      </View>
+    );
+  };
 
-const NotificationAddView = (props) => {
-  const {  } = props;
   return (
-    <View
-      style={{
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}>
-      <TouchableOpacity>
-        <Text>NotificationAdd</Text>
-      </TouchableOpacity>
+    <View style={styles.safeArea}>
+      <Header isBack title={'Tạo mới thông báo'} />
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={{paddingBottom: 20}}>
+        <View style={styles.container}>
+          <TextField
+            containerMarginTop={15}
+            title="Tiêu đề thông báo"
+            value={title}
+            onChangeText={onTitleChange}
+            placeholder="HS"
+            backgroundColor={R.colors.white}
+            color={R.colors.white}
+            fontSize={R.sizes.sm}
+            onFocus={() => {}}
+            fontSizeTitle={R.sizes.sm}
+            containerMarginBottom={15}
+            required
+          />
+
+          <TextField
+            title="Mã CBGV"
+            value={title}
+            onChangeText={onTitleChange}
+            backgroundColor={R.colors.grayBorderInputTextHeader}
+            color={R.colors.white}
+            fontSize={R.sizes.sm}
+            onFocus={() => {}}
+            fontSizeTitle={R.sizes.sm}
+            required
+            containerMarginBottom={15}
+            editable={false}
+          />
+          <TextMulti
+            title="Nội dung thông báo"
+            fontFamily={R.fonts.fontRegular}
+            titleFontSize={R.sizes.sm}
+            value={title}
+            onChangeText={onTitleChange}
+            color={R.colors.white}
+            fontSize={R.sizes.sm}
+            onFocus={() => {}}
+            fontSizeTitle={R.sizes.sm}
+            fontSizePlaceHolder={R.sizes.sm}
+            required
+            containerMarginBottom={15}
+            editable={false}
+          />
+
+          <RadioGroup
+            options={options}
+            selectedValue={selectedValue}
+            onValueChange={onValueChange}
+            disabled={false}
+            size={20}
+            backgroundBoxColor={R.colors.blue}
+            borderBoxColor={R.colors.black}
+            direction={'row'}
+            marginBtnAndLabel={10}
+            // justifyContent={'space-between'}
+            containerMarginRight={39}
+            containerMarginBottom={15}
+            editable={true}
+          />
+          <Text style={[styles.text]}>Chọn những sinh viên nhận thông báo <Text style={{color: R.colors.red}}>*</Text></Text>
+          <View style={styles.containerDropdown}>
+            <Dropdown
+              items={items}
+              placeholder="Chọn tùy chọn"
+              onSelect={item => console.log('Bạn đã chọn:', item)}
+            />
+          </View>
+          <Text style={[styles.text]}> Danh sách đã chọn :</Text>
+          <View>
+            
+          </View>
+
+          <View style={styles.containerBtn}>
+            <View style={styles.containerInput}>
+              <TextField
+                title="Ngày gửi"
+                value={title}
+                onChangeText={onTitleChange}
+                backgroundColor={R.colors.blue1}
+                color={R.colors.white}
+                fontSize={R.sizes.sm}
+                onFocus={() => {}}
+                fontSizeTitle={R.sizes.sm}
+                containerMarginBottom={15}
+                editable={false}
+              />
+            </View>
+            <View style={{flex: 1}}></View>
+            <View style={styles.containerInput}>
+              <TextField
+                title="Thời gian gửi"
+                value={title}
+                onChangeText={onTitleChange}
+                backgroundColor={R.colors.blue1}
+                color={R.colors.white}
+                fontSize={R.sizes.sm}
+                onFocus={() => {}}
+                fontSizeTitle={R.sizes.sm}
+                containerMarginBottom={15}
+                editable={false}
+              />
+            </View>
+          </View>
+          <Text style={[styles.txtSubtitle]}>Tài liệu đính kèm</Text>
+          <View>
+            <Button
+              title="Thêm tài liệu"
+              onPress={() => {}}
+              backgroundColor={R.colors.blue1}
+              fontSize={R.sizes.sm}
+              editable={false}
+              height={25}
+              width={176}
+              borderRadius={10}
+              textColor={R.colors.blue}
+              fontWeight={'600'}
+              fontFamily={R.fonts.fontMedium}
+              icon={R.images.icDownload}
+              iconStyle={{
+                width: 15,
+                height: 15,
+              }}
+              containerStyle={{
+                alignSelf: 'flex-start',
+              }}
+            />
+          </View>
+        </View>
+      </ScrollView>
     </View>
   );
 };
 
-export default NotificationAddView;
-
-const styles = StyleSheet.create({})
+export default NotificationDetailView;
\ No newline at end of file

src/screens/notification/detail/index.js

@@ -3,14 +3,7 @@ import {Text, View, StyleSheet} from 'react-native';
 import NotificationDetailView from './view';
 import R from '../../../assets/R';
 const NotificationDetail = (props) => {
-    const [selectedValue, setSelectedValue] = useState('1');
-    const options = [
-        {label: 'Gửi cá nhân', value: '1'},
-        {label: 'Gửi tập thể lớp', value: '2'},
-      ];
-    const onValueChange = value => {
-        setSelectedValue(value);
-      };
+
     const [dataList, setDataList] = useState([
       { id: 1, name: 'Nguyễn Minh Đức' },
       { id: 2, name: 'Trần Văn Hùng' },