payment added
This commit is contained in:
Abin Toppo
@@ -15,6 +15,8 @@ export interface AlertButton {
|
||||
text: string;
|
||||
onPress: () => void;
|
||||
style?: "cancel" | "destructive" | "default" | "primary" | "secondary" | "outline";
|
||||
buttonColor?: string;
|
||||
textColor?: string;
|
||||
}
|
||||
|
||||
export interface CustomAlertProps {
|
||||
@@ -58,7 +60,7 @@ const CustomAlert: React.FC<CustomAlertProps> = ({
|
||||
}
|
||||
};
|
||||
|
||||
const getButtonStyle = (styleType:string|undefined) => {
|
||||
const getButtonStyle = (styleType: string | undefined) => {
|
||||
switch (styleType) {
|
||||
case "primary":
|
||||
return [styles.button, styles.primaryButton];
|
||||
@@ -75,7 +77,7 @@ const CustomAlert: React.FC<CustomAlertProps> = ({
|
||||
}
|
||||
};
|
||||
|
||||
const getButtonTextStyle = (styleType:string|undefined) => {
|
||||
const getButtonTextStyle = (styleType: string | undefined) => {
|
||||
switch (styleType) {
|
||||
case "primary":
|
||||
return [styles.buttonText, styles.primaryButtonText];
|
||||
@@ -110,7 +112,7 @@ const CustomAlert: React.FC<CustomAlertProps> = ({
|
||||
<View style={styles.faintOverlay} />
|
||||
<View style={styles.contentContainer}>
|
||||
<View style={styles.iconContainer}>
|
||||
<Ionicons name={icon.name} size={48} color={icon.color} />
|
||||
<Ionicons name={icon.name} size={36} color={icon.color} /> {/* smaller icon for vertical compression */}
|
||||
</View>
|
||||
<Text style={styles.alertTitle}>{title}</Text>
|
||||
<Text style={styles.alertMessage}>{message}</Text>
|
||||
@@ -119,10 +121,17 @@ const CustomAlert: React.FC<CustomAlertProps> = ({
|
||||
{buttons.map((button, index) => (
|
||||
<TouchableOpacity
|
||||
key={index}
|
||||
style={getButtonStyle(button.style)}
|
||||
style={[
|
||||
...getButtonStyle(button.style),
|
||||
button.style !== "cancel" && button.buttonColor ? { backgroundColor: button.buttonColor } : null,
|
||||
button.style === "outline" && button.buttonColor ? { borderColor: button.buttonColor } : null,
|
||||
]}
|
||||
onPress={button.onPress}
|
||||
>
|
||||
<Text style={getButtonTextStyle(button.style)}>
|
||||
<Text style={[
|
||||
...getButtonTextStyle(button.style),
|
||||
button.style !== "cancel" && button.textColor ? { color: button.textColor } : null,
|
||||
]}>
|
||||
{button.text}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
@@ -150,13 +159,13 @@ const styles = StyleSheet.create({
|
||||
right: 0,
|
||||
},
|
||||
box: {
|
||||
paddingHorizontal: 4,
|
||||
padding: BORDER_WIDTH + 4,
|
||||
paddingHorizontal: 2, // reduce horizontal padding
|
||||
padding: BORDER_WIDTH + 2, // reduce overall padding
|
||||
borderRadius: RADIUS + BORDER_WIDTH,
|
||||
width: '90%',
|
||||
maxWidth: 400,
|
||||
alignSelf: 'center',
|
||||
margin: 20,
|
||||
margin: 10, // reduce margin for vertical compression
|
||||
backgroundColor: colors.pastelPink,
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
@@ -169,40 +178,40 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
contentContainer: {
|
||||
zIndex: 2,
|
||||
padding: 24,
|
||||
padding: 12, // reduce container padding
|
||||
alignItems: "center",
|
||||
},
|
||||
iconContainer: {
|
||||
marginBottom: 16,
|
||||
marginBottom: 8, // reduce vertical space below icon
|
||||
},
|
||||
alertTitle: {
|
||||
fontSize: 22,
|
||||
fontSize: 18, // smaller font size
|
||||
fontWeight: "bold",
|
||||
color: colors.textDark,
|
||||
marginBottom: 8,
|
||||
marginBottom: 4, // less space below title
|
||||
textAlign: "center",
|
||||
},
|
||||
alertMessage: {
|
||||
fontSize: 16,
|
||||
fontSize: 14, // smaller font size
|
||||
color: colors.textLight,
|
||||
textAlign: "center",
|
||||
marginBottom: 24,
|
||||
lineHeight: 22,
|
||||
marginBottom: 12, // tighter spacing
|
||||
lineHeight: 18, // reduced line height
|
||||
},
|
||||
buttonContainer: {
|
||||
flexDirection: "row",
|
||||
justifyContent: 'flex-end',
|
||||
width: "100%",
|
||||
gap: 12,
|
||||
gap: 8, // reduce gap between buttons
|
||||
},
|
||||
button: {
|
||||
paddingVertical: 14,
|
||||
paddingHorizontal: 24,
|
||||
paddingVertical: 8, // less vertical padding
|
||||
paddingHorizontal: 16, // less horizontal padding
|
||||
borderRadius: 16,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
minWidth: 80,
|
||||
borderWidth: 0, // default border, override for outline/cancel
|
||||
minWidth: 72, // slightly smaller minimum width
|
||||
borderWidth: 0,
|
||||
},
|
||||
// === BUTTON STYLE VARIANTS ===
|
||||
defaultButton: {
|
||||
@@ -229,7 +238,7 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
// === BUTTON TEXT COLOR VARIANTS ===
|
||||
buttonText: {
|
||||
fontSize: 16,
|
||||
fontSize: 14, // smaller text
|
||||
fontWeight: "700",
|
||||
},
|
||||
defaultButtonText: {
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
// src/components/UserRequested.tsx
|
||||
|
||||
import React, { FC } from "react";
|
||||
import { View, Text, StyleSheet } from "react-native";
|
||||
import {Ionicons} from "@react-native-vector-icons/ionicons";
|
||||
import { Ionicons } from "@react-native-vector-icons/ionicons";
|
||||
import colors from "./colors";
|
||||
import { UserJoinRequest } from "../types";
|
||||
import { formatDate } from "../utils/HelperFunction";
|
||||
@@ -15,24 +13,23 @@ const getStatusStyle = (status: UserJoinRequest["status"]) => {
|
||||
switch (status) {
|
||||
case "APPROVED":
|
||||
return {
|
||||
backgroundColor: "#D1FAE5", // light green
|
||||
textColor: "#065F46", // dark green
|
||||
backgroundColor: "#D1FAE5",
|
||||
textColor: "#065F46",
|
||||
label: "Approved",
|
||||
icon: "checkmark-circle-outline",
|
||||
|
||||
};
|
||||
case "PENDING":
|
||||
return {
|
||||
backgroundColor: "#FEF3C7", // light yellow
|
||||
textColor: "#92400E", // dark yellow/brown
|
||||
backgroundColor: "#FEF3C7",
|
||||
textColor: "#92400E",
|
||||
label: "Pending",
|
||||
icon: "time-outline",
|
||||
};
|
||||
case "REJECT":
|
||||
return {
|
||||
backgroundColor: "#E5E7EB", // light gray
|
||||
textColor: "#4B5563", // dark gray
|
||||
label: "Reject",
|
||||
backgroundColor: "#FEE2E2",
|
||||
textColor: "#B91C1C",
|
||||
label: "Rejected",
|
||||
icon: "close-circle-outline",
|
||||
};
|
||||
default:
|
||||
@@ -48,38 +45,39 @@ const getStatusStyle = (status: UserJoinRequest["status"]) => {
|
||||
export const UserRequested: FC<UserRequestedProps> = ({ item }) => {
|
||||
const { backgroundColor, textColor, label, icon } = getStatusStyle(item.status);
|
||||
|
||||
// Optionally, initials avatar (remove/comment if you want):
|
||||
const initials = item.createdBy?.trim().split(" ").map((w) => w[0])?.join("").toUpperCase();
|
||||
|
||||
return (
|
||||
<View style={styles.card}>
|
||||
{/* Top row: User info + Status */}
|
||||
<View style={styles.topRow}>
|
||||
<View style={styles.avatarContainer}>
|
||||
<View style={styles.avatarCircle}>
|
||||
<Text style={styles.avatarText}>{initials}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.userInfoSection}>
|
||||
|
||||
<Text style={styles.groupName}>{item.groupName}</Text>
|
||||
|
||||
<Text style={styles.userMeta}>
|
||||
<Ionicons name="time-outline" size={14} color={colors.textLight} />{" "}
|
||||
<Ionicons name="time-outline" size={13} color={colors.textLight} />{" "}
|
||||
{formatDate(item.requestDate)}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Status Badge */}
|
||||
<View style={[styles.statusBadge, { backgroundColor }]}>
|
||||
<Ionicons name={icon as any} size={16} color={textColor} />
|
||||
<Ionicons name={icon as any} size={17} color={textColor} />
|
||||
<Text style={[styles.statusText, { color: textColor }]}>{label}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Group Info */}
|
||||
<View style={styles.groupInfoSection}>
|
||||
<Text style={styles.requestText}>
|
||||
Group Created By :{" "}
|
||||
<Text style={styles.userName} numberOfLines={1}>
|
||||
{item.createdBy}
|
||||
</Text>
|
||||
<Ionicons name="person-outline" size={13} color={colors.textLight} />
|
||||
{" "}Group Created By:{" "}
|
||||
<Text style={styles.userName} numberOfLines={1}>{item.createdBy}</Text>
|
||||
</Text>
|
||||
{item.reason ? (
|
||||
<Text style={styles.reasonText} numberOfLines={2}>
|
||||
Reason: {item.reason}
|
||||
<Ionicons name="chatbubbles-outline" size={13} color={colors.textLight} /> {item.reason}
|
||||
</Text>
|
||||
) : null}
|
||||
</View>
|
||||
@@ -91,64 +89,95 @@ const styles = StyleSheet.create({
|
||||
card: {
|
||||
backgroundColor: colors.white,
|
||||
borderRadius: 16,
|
||||
marginVertical: 8,
|
||||
elevation: 3,
|
||||
marginVertical: 14, // More space
|
||||
marginHorizontal: 10,
|
||||
elevation: 4,
|
||||
shadowColor: "#000",
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 6,
|
||||
shadowOffset: { width: 0, height: 3 },
|
||||
padding: 12,
|
||||
shadowOpacity: 0.12,
|
||||
shadowRadius: 8,
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
padding: 16,
|
||||
},
|
||||
topRow: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "flex-start",
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: colors.Settings,
|
||||
paddingBottom: 8,
|
||||
borderBottomColor: "#e5e7eb",
|
||||
paddingBottom: 10,
|
||||
marginBottom: 6
|
||||
},
|
||||
avatarContainer: {
|
||||
marginRight: 10,
|
||||
marginTop: 2,
|
||||
},
|
||||
avatarCircle: {
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: 18,
|
||||
backgroundColor: colors.pastelBlue,
|
||||
justifyContent: "center",
|
||||
alignItems: "center"
|
||||
},
|
||||
avatarText: {
|
||||
fontWeight: "700",
|
||||
fontSize: 15,
|
||||
color: colors.white,
|
||||
},
|
||||
userInfoSection: {
|
||||
flex: 1,
|
||||
paddingRight: 8,
|
||||
},
|
||||
userName: {
|
||||
// fontSize: 16,
|
||||
fontWeight: "bold",
|
||||
color: colors.textDark,
|
||||
fontSize: 15,
|
||||
},
|
||||
userMeta: {
|
||||
fontSize: 13,
|
||||
fontSize: 12,
|
||||
color: colors.textLight,
|
||||
marginTop: 2,
|
||||
marginTop: 3,
|
||||
marginBottom: -3,
|
||||
},
|
||||
groupInfoSection: {
|
||||
paddingVertical: 12,
|
||||
paddingTop: 10,
|
||||
paddingBottom: 6,
|
||||
},
|
||||
requestText: {
|
||||
// fontSize: 15,
|
||||
color: colors.textDark,
|
||||
lineHeight: 20,
|
||||
fontSize: 15,
|
||||
marginBottom: 2,
|
||||
lineHeight: 22,
|
||||
},
|
||||
groupName: {
|
||||
fontWeight: "600",
|
||||
color: colors.Settings,
|
||||
fontSize:18
|
||||
fontSize: 18,
|
||||
marginBottom: 2,
|
||||
},
|
||||
reasonText: {
|
||||
fontSize: 13,
|
||||
fontSize: 12,
|
||||
color: colors.textLight,
|
||||
marginTop: 4,
|
||||
marginTop: 6,
|
||||
paddingLeft: 1,
|
||||
lineHeight: 18,
|
||||
fontStyle: "italic",
|
||||
},
|
||||
statusBadge: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
borderRadius: 12,
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 10,
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 5,
|
||||
marginLeft: 4,
|
||||
minWidth: 90,
|
||||
justifyContent: "center",
|
||||
alignSelf: "flex-start",
|
||||
marginTop: 2
|
||||
},
|
||||
statusText: {
|
||||
fontSize: 13,
|
||||
fontWeight: "600",
|
||||
marginLeft: 4,
|
||||
fontSize: 14,
|
||||
fontWeight: "700",
|
||||
marginLeft: 6,
|
||||
letterSpacing: 0.5
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user