create orgnizer screen and intrigate api

src/components/common/Custom.tsx

@@ -5,48 +5,46 @@ import {
   Text,
   TextInput,
   TouchableOpacity,
+  TextInputProps,
 } from "react-native";
-import { TextInputProps } from "react-native";
-import {Ionicons} from "@react-native-vector-icons/ionicons";
+import {Ionicons, IoniconsIconName} from "@react-native-vector-icons/ionicons";
+import colors from "../colors";
 
+// --- Custom Input ---
 type CustomInputProps = TextInputProps & {
-  label: string;
-  value: string;
-  placeholder: string;
-  onChangeText: (text: string) => void;
-  icon?: string;
+  label?: string;
+  icon?: IoniconsIconName;
 };
 
 const CustomInput: React.FC<CustomInputProps> = ({
   label,
-  value,
-  placeholder,
-  onChangeText,
   icon,
+  style,
   ...rest
-}) => (
-  <View style={styles.inputContainer}>
-    <Text style={styles.inputLabel}>{label}</Text>
-    <View style={styles.inputWrapper}>
-      {icon && <Ionicons name={icon} size={20} color="#555" style={styles.inputIcon} />}
-      <TextInput
-        style={[styles.input, icon && { paddingLeft: 36 }]}
-        placeholder={placeholder}
-        value={value}
-        placeholderTextColor="#999"
-        onChangeText={onChangeText}
-        {...rest}
-      />
+}) => {
+  return (
+    <View style={styles.inputContainer}>
+      {label ? <Text style={styles.inputLabel}>{label}</Text> : null}
+      <View style={styles.inputWrapper}>
+        {icon && <Ionicons name={icon} size={20} color={colors.textDark} style={styles.inputIcon} />}
+        <TextInput
+          style={[styles.input, icon && { paddingLeft: 36 }, style]}
+          placeholderTextColor={colors.textLight}
+          {...rest}
+        />
+      </View>
     </View>
-  </View>
-);
+  );
+};
 
+// --- Custom Button ---
 type CustomButtonProps = {
   title: string;
   onPress: () => void;
-  type?: "primary" | "secondary" | "danger" | "outline";
-  icon?: string | null;
+  type?: "primary" | "secondary" | "danger";
+  icon?: IoniconsIconName;
   style?: object;
+  buttonBackground?: string;
 };
 
 const CustomButton: React.FC<CustomButtonProps> = ({
@@ -54,77 +52,37 @@ const CustomButton: React.FC<CustomButtonProps> = ({
   onPress,
   type = "primary",
   icon,
-}) => (
-  <TouchableOpacity
-    style={[
-      styles.button,
-      type === "secondary" && styles.buttonSecondary,
-      type === "danger" && styles.buttonDanger,
-    ]}
-    onPress={onPress}
-    activeOpacity={0.8}
-  >
-    <View style={styles.buttonContent}>
-      {icon && <Ionicons name={icon || 'user'} size={20} color={type === "secondary" ? "#333" : "#fff"} style={{ marginRight: 8 }} />}
-      <Text
-        style={[
-          styles.buttonText,
-          type === "secondary" && styles.buttonTextSecondary,
-          type === "danger" && styles.buttonTextDanger,
-        ]}
-      >
-        {title}
-      </Text>
-    </View>
-  </TouchableOpacity>
-);
+  style = {},
+  buttonBackground,
+}) => {
+  const backgroundColor =
+    buttonBackground ??
+    (type === "secondary"
+      ? colors.pastelBlue
+      : type === "danger"
+      ? colors.pastelOrange
+      : colors.primary);
 
+  const textColor = type === "secondary" ? colors.textDark : colors.white;
+
+  return (
+    <TouchableOpacity
+      style={[styles.button, { backgroundColor }, style]}
+      onPress={onPress}
+      activeOpacity={0.8}
+    >
+      <View style={styles.buttonContent}>
+        {icon && <Ionicons name={icon} size={20} color={textColor} style={{ marginRight: 8 }} />}
+        <Text style={[styles.buttonText, { color: textColor }]}>{title}</Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+// --- Styles ---
 const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: "#f5f7fb" },
-  loadingContainer: { flex: 1, justifyContent: "center", alignItems: "center" },
-  loadingText: { marginTop: 10, fontSize: 16, color: "#007AFF" },
-  header: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    padding: 16,
-    paddingTop: 40,
-    backgroundColor: "#fff",
-    alignItems: "center",
-    borderBottomWidth: 1,
-    borderColor: "#eee",
-  },
-  headerTitle: { fontSize: 20, fontWeight: "600", color: "#333" },
-  profileCard: {
-    borderRadius: 16,
-    margin: 16,
-    backgroundColor: "#fff",
-    padding: 20,
-    shadowColor: "#000",
-    shadowOpacity: 0.1,
-    shadowRadius: 6,
-    elevation: 4,
-  },
-  profileHeader: { alignItems: "center", marginBottom: 16 },
-  avatar: { width: 100, height: 100, borderRadius: 50, marginBottom: 8 },
-  cameraIcon: {
-    position: "absolute",
-    right: 110,
-    bottom: 10,
-    backgroundColor: "#007AFF",
-    borderRadius: 15,
-    width: 32,
-    height: 32,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  detail: {
-    fontSize: 16,
-    marginBottom: 10,
-    color: "#444",
-    paddingLeft: 4,
-  },
   inputContainer: { marginBottom: 12 },
-  inputLabel: { fontSize: 14, fontWeight: "500", color: "#555", marginBottom: 6 },
+  inputLabel: { fontSize: 14, fontWeight: "500", color: colors.textDark, marginBottom: 6 },
   inputWrapper: {
     flexDirection: "row",
     alignItems: "center",
@@ -138,38 +96,29 @@ const styles = StyleSheet.create({
   input: {
     flex: 1,
     borderWidth: 1,
-    borderColor: "#ddd",
+    borderColor: colors.textLight,
     borderRadius: 10,
     padding: 12,
     paddingLeft: 12,
-    backgroundColor: "#fdfdfd",
-    color: "#000",
+    backgroundColor: colors.white,
+    color: colors.textDark,
     fontSize: 15,
   },
   button: {
-    backgroundColor: "#007AFF",
     paddingVertical: 12,
     borderRadius: 12,
     alignItems: "center",
     marginVertical: 6,
-    shadowColor: "#007AFF",
-    shadowOpacity: 0.2,
-    shadowRadius: 4,
-    elevation: 3,
-  },
-  buttonSecondary: {
-    backgroundColor: "#e5e5ea",
-  },
-  buttonDanger: {
-    backgroundColor: "#ff3b30",
   },
   buttonContent: {
     flexDirection: "row",
     alignItems: "center",
+    justifyContent: "center",
+  },
+  buttonText: {
+    fontSize: 16,
+    fontWeight: "600",
   },
-  buttonText: { color: "#fff", fontSize: 16, fontWeight: "600" },
-  buttonTextSecondary: { color: "#333" },
-  buttonTextDanger: { color: "#fff" },
 });
 
-export { CustomInput, styles, CustomButton };
+export { CustomInput, CustomButton, styles };