Android_Retail/src/Pages/MemberShipSelfBooking/MemberShipCard.jsx

import React, { useEffect, useState } from 'react';
import { Radio, Space } from 'antd'; // Make sure to import Space if using Antd
import './MemberShipCard.scss';
import { useDispatch } from 'react-redux';
import { ExtractDateFormate, getSession } from '../../Services/Others';
import { getCustomerMembership, GlobalSelfBookingCustomerDtls } from '../../Features/BookingScreen/BookingData/KioskBookingData';
import { useSelector } from 'react-redux';

export default function SubscriptionCard() {
	const dispatch = useDispatch();
	const AppId = getSession('AppId');
	const CompId = getSession('CompId');
	const BranchId = getSession('BranchId');
	const CustDetail = useSelector(GlobalSelfBookingCustomerDtls)


	const [custMembership, setCustMembership] = useState([]);
	const [filter, setFilter] = useState('Active'); // Default to Active
	console.log(custMembership, 'bdsvvsvsbvsdvjd');

	useEffect(() => {
		getMembershipData();
	}, []);


	const getMembershipData = async () => {
		const Cust = CustDetail?.CustId
		const data = { CompId, BranchId, AppId, CustId: Cust };

		const response = await dispatch(getCustomerMembership(data)).unwrap();
		if (response?.data?.statusCode === 1) {
			const CustBooking = response?.data?.data;
			setCustMembership(CustBooking[0]?.MembershipDetail || []);
		} else {
			setCustMembership([]);
		}
	};

	// Function to check if plan is expired
	const isPlanExpired = (member) => {
		const today = new Date();
		const planEndDate = new Date(member.PlanEndDate);
		return planEndDate < today || member.RemainingDays <= 0;
	};

	// Function to get status class
	const getStatusClass = (member) => {
		return isPlanExpired(member) ? 'expired' : member.MembershipStatus?.toLowerCase();
	};

	// Filter membership data based on selected filter
	const filteredMembership = custMembership.filter((member) => {
		if (filter === 'Active') {
			return !isPlanExpired(member);
		} else if (filter === 'Expired') {
			return isPlanExpired(member);
		}
		return true;
	});

	return (
		<div className="Self-sub-card-app-container">
			{/* Filter Tabs */}
			<div className="membership-filter-tabs">
				<Space>
					<Radio.Group
						value={filter}
						onChange={(e) => setFilter(e.target.value)}
						buttonStyle="solid"
					>
						<Radio.Button value="Active">Active</Radio.Button>
						<Radio.Button value="Expired">Expired</Radio.Button>
					</Radio.Group>
				</Space>
			</div>

			{/* Membership Cards */}
			{filteredMembership.length === 0 ? (
				<div className="no-membership-message">
					<p>
						{filter === 'Active'
							? 'No Active Memberships Found'
							: 'No Expired Memberships Found'
						}
					</p>
				</div>
			) : (
				filteredMembership.map((member, index) => (
					<div key={index} className={`sub-card-wrapper ${getStatusClass(member)}`}>
						{/* ---------- Header ---------- */}
						<div className="sub-card-header">
							<div className="sub-card-header-content">
								<div className="sub-card-plan-info">
									<h2 className="sub-card-plan-name">{member.MemberName}</h2>
									<div className="sub-card-status-badge">
										<span className="sub-card-status-dot"></span>
										<span className="sub-card-status-text">
											{isPlanExpired(member) ? 'Expired' : member.MembershipStatus}
										</span>
									</div>
								</div>
								<div className="sub-card-discount-badge">
									<span className="sub-card-discount-value">
										{member.Discount}%
									</span>
									<p className="sub-card-discount-label">Discount</p>
								</div>
							</div>
						</div>

						{/* ---------- Content ---------- */}
						<div className="sub-card-content">
							{/* Duration Section */}
							<div className="sub-card-info-grid">
								<div className="sub-card-info-box">
									<p className="sub-card-info-label">Duration</p>
									<p className="sub-card-info-value">
										{member.PlanDuration} days
									</p>
								</div>
								<div className="sub-card-info-box">
									<p className="sub-card-info-label">Remaining</p>
									<p className={`sub-card-info-value ${isPlanExpired(member) ? 'sub-card-expired' : 'sub-card-remaining'}`}>
										{isPlanExpired(member) ? '0 days left' : `${member.RemainingDays} days left`}
									</p>
								</div>
							</div>

							{/* Hours Section */}
							<div className="sub-card-info-grid">
								<div className="sub-card-info-box">
									<p className="sub-card-info-label">Free Hours</p>
									<p className="sub-card-info-value">
										{member.FreeSessionHrs} hrs
									</p>
								</div>
								<div className="sub-card-info-box">
									<p className="sub-card-info-label">Sessions Left</p>
									<p className="sub-card-info-value">
										{isPlanExpired(member) ? '0 hrs' : `${member.RemainingSessionHrs} hrs`}
									</p>
								</div>
							</div>
						</div>

						{/* ---------- Footer ---------- */}
						<div className="sub-card-footer">
							{isPlanExpired(member) ? (
								<>
									<span className="sub-card-footer-label">Plan Ended On</span>
									<span className="sub-card-footer-value">
										{ExtractDateFormate(member.PlanEndDate)} (Expired)
									</span>
								</>
							) : (
								<>
									<span className="sub-card-footer-label">Plan Ends On</span>
									<span className="sub-card-footer-value">
										{ExtractDateFormate(member.PlanEndDate)}
									</span>
								</>
							)}
						</div>
					</div>
				))
			)}
		</div>
	);
}