home changes

src/components/CostomAlart.tsx

@@ -1,5 +1,3 @@
-// src/components/CustomAlert.tsx
-
 import React from "react";
 import {
   Modal,
@@ -10,31 +8,35 @@ import {
   Platform,
 } from "react-native";
 import { BlurView } from "@react-native-community/blur";
-import Ionicons from '@react-native-vector-icons/ionicons';
-import colors from "./colors"; // Import centralized colors
+import { Ionicons } from "@react-native-vector-icons/ionicons";
+import colors from "./colors";
 
-interface AlertButton {
+export interface AlertButton {
   text: string;
   onPress: () => void;
-  style?: "cancel" | "destructive" | "default";
+  style?: "cancel" | "destructive" | "default" | "primary" | "secondary" | "outline";
 }
 
-interface CustomAlertProps {
+export interface CustomAlertProps {
   visible: boolean;
   title: string;
   message: string;
-  buttons: AlertButton[];
+  buttons?: AlertButton[];
   alertType?: 'error' | 'success' | 'info';
+  onClose?: () => void;
 }
 
+const BORDER_WIDTH = 6;
+const RADIUS = 24;
+
 const CustomAlert: React.FC<CustomAlertProps> = ({
   visible,
   title,
   message,
-  buttons,
+  buttons = [],
   alertType = 'info',
+  onClose,
 }) => {
-
   const getIcon = () => {
     switch (alertType) {
       case 'error':
@@ -45,18 +47,57 @@ const CustomAlert: React.FC<CustomAlertProps> = ({
         return { name: "information-circle", color: colors.primary };
     }
   };
-
   const icon = getIcon();
 
+  const handleRequestClose = () => {
+    if (buttons.length > 0) {
+      const closeButton = buttons.find(b => b.style === 'cancel') || buttons[0];
+      closeButton?.onPress();
+    } else {
+      onClose?.();
+    }
+  };
+
+  const getButtonStyle = (styleType:string|undefined) => {
+    switch (styleType) {
+      case "primary":
+        return [styles.button, styles.primaryButton];
+      case "secondary":
+        return [styles.button, styles.secondaryButton];
+      case "outline":
+        return [styles.button, styles.outlineButton];
+      case "destructive":
+        return [styles.button, styles.destructiveButton];
+      case "cancel":
+        return [styles.button, styles.cancelButton];
+      default:
+        return [styles.button, styles.defaultButton];
+    }
+  };
+
+  const getButtonTextStyle = (styleType:string|undefined) => {
+    switch (styleType) {
+      case "primary":
+        return [styles.buttonText, styles.primaryButtonText];
+      case "secondary":
+        return [styles.buttonText, styles.secondaryButtonText];
+      case "outline":
+        return [styles.buttonText, styles.outlineButtonText];
+      case "destructive":
+        return [styles.buttonText, styles.destructiveButtonText];
+      case "cancel":
+        return [styles.buttonText, styles.cancelButtonText];
+      default:
+        return [styles.buttonText, styles.defaultButtonText];
+    }
+  };
+
   return (
     <Modal
       animationType="fade"
       transparent={true}
       visible={visible}
-      onRequestClose={() => {
-        const closeButton = buttons.find(b => b.style === 'cancel') || buttons[0];
-        closeButton?.onPress();
-      }}
+      onRequestClose={handleRequestClose}
     >
       <View style={styles.centeredView}>
         {Platform.OS === 'ios' ? (
@@ -65,31 +106,29 @@ const CustomAlert: React.FC<CustomAlertProps> = ({
           <View style={[styles.absolute, { backgroundColor: colors.androidBackdrop }]} />
         )}
 
-        <View style={styles.alertBox}>
-          <View style={styles.iconContainer}>
-            <Ionicons name={icon.name} size={48} color={icon.color} />
-          </View>
-          <Text style={styles.alertTitle}>{title}</Text>
-          <Text style={styles.alertMessage}>{message}</Text>
-
-          <View style={styles.buttonContainer}>
-            {buttons.map((button, index) => (
-              <TouchableOpacity
-                key={index}
-                style={[
-                  styles.button,
-                  button.style === 'destructive' ? styles.destructiveButton : styles.defaultButton,
-                ]}
-                onPress={button.onPress}
-              >
-                <Text style={[
-                  styles.buttonText,
-                  button.style === 'destructive' ? styles.destructiveButtonText : styles.defaultButtonText
-                ]}>
-                  {button.text}
-                </Text>
-              </TouchableOpacity>
-            ))}
+        <View style={styles.box}>
+          <View style={styles.faintOverlay} />
+          <View style={styles.contentContainer}>
+            <View style={styles.iconContainer}>
+              <Ionicons name={icon.name} size={48} color={icon.color} />
+            </View>
+            <Text style={styles.alertTitle}>{title}</Text>
+            <Text style={styles.alertMessage}>{message}</Text>
+            {buttons.length > 0 && (
+              <View style={styles.buttonContainer}>
+                {buttons.map((button, index) => (
+                  <TouchableOpacity
+                    key={index}
+                    style={getButtonStyle(button.style)}
+                    onPress={button.onPress}
+                  >
+                    <Text style={getButtonTextStyle(button.style)}>
+                      {button.text}
+                    </Text>
+                  </TouchableOpacity>
+                ))}
+              </View>
+            )}
           </View>
         </View>
       </View>
@@ -110,21 +149,28 @@ const styles = StyleSheet.create({
     bottom: 0,
     right: 0,
   },
-  alertBox: {
-    backgroundColor: colors.alertBackground,
-    borderRadius: 24,
-    padding: 24,
-    alignItems: "center",
-    margin: 24,
-    borderWidth: 1,
-    borderColor: 'rgba(255, 255, 255, 0.5)',
-    shadowColor: colors.black,
-    shadowOffset: { width: 0, height: 10 },
-    shadowOpacity: 0.1,
-    shadowRadius: 30,
-    elevation: 20,
+  box: {
+    paddingHorizontal: 4,
+    padding: BORDER_WIDTH + 4,
+    borderRadius: RADIUS + BORDER_WIDTH,
     width: '90%',
     maxWidth: 400,
+    alignSelf: 'center',
+    margin: 20,
+    backgroundColor: colors.pastelPink,
+    position: 'relative',
+    overflow: 'hidden',
+  },
+  faintOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "rgba(255,255,255,0.77)",
+    zIndex: 1,
+    borderRadius: RADIUS,
+  },
+  contentContainer: {
+    zIndex: 2,
+    padding: 24,
+    alignItems: "center",
   },
   iconContainer: {
     marginBottom: 16,
@@ -155,13 +201,33 @@ const styles = StyleSheet.create({
     borderRadius: 16,
     justifyContent: 'center',
     alignItems: 'center',
+    minWidth: 80,
+    borderWidth: 0, // default border, override for outline/cancel
   },
+  // === BUTTON STYLE VARIANTS ===
   defaultButton: {
-    backgroundColor: colors.primary,
+    backgroundColor: colors.pastelPink,
   },
   destructiveButton: {
     backgroundColor: colors.error,
   },
+  primaryButton: {
+    backgroundColor: colors.primary,
+  },
+  secondaryButton: {
+    backgroundColor: colors.pastelBlue,
+  },
+  outlineButton: {
+    borderColor: colors.primary,
+    borderWidth: 2,
+    backgroundColor: "transparent",
+  },
+  cancelButton: {
+    borderColor: colors.error,
+    borderWidth: 1,
+    backgroundColor: "transparent",
+  },
+  // === BUTTON TEXT COLOR VARIANTS ===
   buttonText: {
     fontSize: 16,
     fontWeight: "700",
@@ -172,6 +238,18 @@ const styles = StyleSheet.create({
   destructiveButtonText: {
     color: colors.white,
   },
+  primaryButtonText: {
+    color: colors.white,
+  },
+  secondaryButtonText: {
+    color: colors.textDark,
+  },
+  outlineButtonText: {
+    color: colors.primary,
+  },
+  cancelButtonText: {
+    color: colors.error,
+  },
 });
 
 export default CustomAlert;

src/components/JoinedGroupCard.tsx

@@ -1,17 +1,15 @@
-// src/components/JoinedGroupCard.tsx
-
 import React, { FC } from 'react';
 import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
 import colors from './colors';
 import { useNavigation } from '@react-navigation/native';
-// Update the type to match the full data structure
+
 interface JoinedGroup {
   id: string;
   groupName: string;
   description: string;
   visibility: 'PUBLIC' | 'PRIVATE';
   createdByUserId: number;
-  createdByName: string; // Renamed from createdBy for clarity
+  createdByName: string;
   startDate: [number, number, number] | null;
   endDate: [number, number, number] | null;
   minParticipants: number;
@@ -24,33 +22,33 @@ interface JoinedGroup {
 
 interface JoinedGroupCardProps {
   item: JoinedGroup | any;
-  onViewPress: () => void; // Function prop for the View button
+  onViewPress: () => void;
+  onPayPress: () => void;         // function for Pay button
+  hasPaid?: boolean;              // whether user has already paid
 }
 
-// Helper function to format dates
 const formatDate = (dateArray: [number, number, number] | null): string => {
   if (!dateArray) return 'N/A';
   const date = new Date(dateArray[0], dateArray[1] - 1, dateArray[2]);
   return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
 };
 
-// Helper to determine status color
 const getStatusStyle = (status: JoinedGroup['status']) => {
     switch (status) {
         case 'ACTIVE':
             return {
-                backgroundColor: '#D1FAE5', // Green tint
-                textColor: '#065F46',       // Dark Green
+                backgroundColor: '#D1FAE5',
+                textColor: '#065F46',
             };
         case 'PENDING':
             return {
-                backgroundColor: '#FEF3C7', // Yellow tint
-                textColor: '#92400E',       // Dark Yellow/Brown
+                backgroundColor: '#FEF3C7',
+                textColor: '#92400E',
             };
         case 'COMPLETED':
             return {
-                backgroundColor: '#E5E7EB', // Gray tint
-                textColor: '#4B5563',       // Dark Gray
+                backgroundColor: '#E5E7EB',
+                textColor: '#4B5563',
             };
         default:
             return {
@@ -60,13 +58,13 @@ const getStatusStyle = (status: JoinedGroup['status']) => {
     }
 };
 
-export const JoinedGroupCard: FC<JoinedGroupCardProps> = ({ item, onViewPress }) => {
+export const JoinedGroupCard: FC<JoinedGroupCardProps> = ({ item, onViewPress, onPayPress, hasPaid }) => {
   const progress = (item.currentParticipants / item.maxParticipants) * 100;
   const statusStyle = getStatusStyle(item.status);
-  const navigation = useNavigation<any>()
+  const navigation = useNavigation<any>();
 
   return (
-    <TouchableOpacity style={styles.card} onPress={()=> navigation.navigate("GroupDetails", {item, color:colors.black})}>
+    <TouchableOpacity style={styles.card} onPress={() => navigation.navigate("GroupDetails", {item, color:colors.black})}>
       {/* Header */}
       <View style={styles.header}>
         <Text style={styles.groupName}>{item.groupName}</Text>
@@ -75,27 +73,32 @@ export const JoinedGroupCard: FC<JoinedGroupCardProps> = ({ item, onViewPress })
         </View>
       </View>
       <Text style={styles.createdBy}>Created by {item.createdByName}</Text>
-      
       {/* Financial Info */}
       <View style={styles.infoRow}>
         <View style={styles.infoItem}>
-
-              <Text style={styles.infoLabel}>Contribution</Text>
-              <Text style={styles.infoValue}>₹{item.contributionAmount.toLocaleString('en-IN')}</Text>
-     
+          <Text style={styles.infoLabel}>Contribution</Text>
+          <Text style={styles.infoValue}>₹{item.contributionAmount.toLocaleString('en-IN')}</Text>
         </View>
         <View style={styles.infoItem}>
           <Text style={styles.infoLabel}>Cycle</Text>
           <Text style={styles.infoValue}>{item.cycleType}</Text>
         </View>
       </View>
-
-      {/* Footer with Dates and View Button */}
+      {/* Footer with Dates & Buttons */}
       <View style={styles.footer}>
         <Text style={styles.dateText}>
             {formatDate(item.startDate)} - {formatDate(item.endDate)}
         </Text>
-
+        {/* Add Pay / Paid button here */}
+        {hasPaid ? (
+          <View style={styles.paidButton}>
+            <Text style={styles.paidButtonText}>Paid</Text>
+          </View>
+        ) : (
+          <TouchableOpacity style={styles.payButton} onPress={onPayPress}>
+            <Text style={styles.payButtonText}>Pay</Text>
+          </TouchableOpacity>
+        )}
       </View>
     </TouchableOpacity>
   );
@@ -149,13 +152,12 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
     borderColor: colors.pastelOrange,
     marginBottom: 16,
-     backgroundColor:colors.white,
-        borderRadius:15,
+    backgroundColor: colors.white,
+    borderRadius:15,
   },
   infoItem: {
     padding:5,
     paddingHorizontal:10,
- 
     backgroundColor:colors.white,
     alignItems: 'flex-start',
   },
@@ -202,14 +204,37 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-
   },
   dateText: {
     fontSize: 14,
     color: '#4B5563',
     fontWeight: '500',
   },
-  // --- NEW STYLES for the View Button ---
+  // Pay button
+  payButton: {
+    elevation:5,
+    backgroundColor: colors.white,
+    paddingHorizontal: 25,
+    paddingVertical: 10,
+    borderRadius: 10,
+  },
+  payButtonText: {
+    color: colors.black,
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  // Paid button
+  paidButton: {
+    backgroundColor: '#D1FAE5',
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    borderRadius: 10,
+  },
+  paidButtonText: {
+    color: '#065F46',
+    fontSize: 14,
+    fontWeight: '600',
+  },
   viewButton: {
     backgroundColor: colors.pastelOrange,
     paddingHorizontal: 20,

src/components/common/PastelActivityIndicator.tsx

@@ -0,0 +1,86 @@
+import React, { useRef, useEffect } from 'react';
+import { View, Animated, StyleSheet, Easing, ViewStyle } from 'react-native';
+import colors from '../colors';
+
+const pastelColors: string[] = [
+  colors.pastelPink, // pastelPink
+  '#D7E9F7', // pastelBlue
+  '#DFF6DD', // pastelGreen
+  '#FFF4D2', // pastelOrange
+];
+
+const DOT_SIZE = 16;
+const RADIUS = 30;
+const DURATION = 1200;
+
+const PastelActivityIndicator: React.FC = () => {
+  const rotateAnim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.timing(rotateAnim, {
+        toValue: 1,
+        duration: DURATION,
+        easing: Easing.inOut(Easing.ease),
+        useNativeDriver: true,
+      })
+    ).start();
+  }, [rotateAnim]);
+
+  const getDotStyle = (index: number): ViewStyle => {
+    const angle = (index * (360 / pastelColors.length)) * (Math.PI / 180);
+    return {
+      position: 'absolute',
+      left: RADIUS + Math.cos(angle) * RADIUS - DOT_SIZE / 2,
+      top: RADIUS + Math.sin(angle) * RADIUS - DOT_SIZE / 2,
+      backgroundColor: pastelColors[index],
+    };
+  };
+
+  // Pulsating scale for each dot (same scale for demo)
+  const scales = pastelColors.map((_color, idx) =>
+    rotateAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [1, 1.3],
+      extrapolate: 'clamp',
+    })
+  );
+
+  return (
+    <Animated.View
+      style={{
+        width: RADIUS * 2,
+        height: RADIUS * 2,
+        transform: [
+          {
+            rotate: rotateAnim.interpolate({
+              inputRange: [0, 1],
+              outputRange: ['0deg', '360deg'],
+            }),
+          },
+        ],
+      }}
+    >
+      {pastelColors.map((color, idx) => (
+        <Animated.View
+          key={color}
+          style={[
+            styles.dot,
+            getDotStyle(idx),
+            { backgroundColor: color, transform: [{ scale: scales[idx] }] },
+          ]}
+        />
+      ))}
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  dot: {
+    width: DOT_SIZE,
+    height: DOT_SIZE,
+    borderRadius: DOT_SIZE / 2,
+  },
+});
+
+export default PastelActivityIndicator;