DEV Community: Nebula

commands

Nebula — Tue, 15 Jul 2025 18:12:13 +0000

npm i axios framer-motion lucide-react react-dom react-hook-form react-hot-toast react-icons react-router react-router-dom recharts styled-components unleash-proxy-client

npm install @eslint/js @types/react @types/react-dom @vitejs/plugin-react eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-refresh globals husky lint-staged prettier vite --save-dev

npm install @unleash/proxy-client-react unleash-proxy-client

npm install @vitejs/plugin-react --save-dev

# Delete node_modules and package-lock.json
rm -rf node_modules package-lock.json

# Clear npm cache
npm cache clean --force

# Reinstall dependencies
npm install

presentation

Nebula — Mon, 07 Jul 2025 10:25:14 +0000

Slide 1: Title Slide
Title: Implementing Feature Flag Management with Unleash: A Banking Application Case Study
Subtitle: Showcasing Modern Software Development & Release Strategies
Your Name: [Your Name]
Company/Internship: [Company Name]
Date: [Date]

Slide 2: Introduction - The Challenge of Modern Software Delivery
In today's fast-paced digital world, delivering new software features quickly and reliably is paramount. However, traditional release processes often come with significant hurdles:
High-Risk Deployments: Releasing new features can be a nerve-wracking event, often leading to "big bang" deployments with a high risk of introducing bugs or breaking existing functionality for all users.
Slow Iteration & Feedback: Getting new features into users' hands quickly for feedback and iteration is challenging when every change requires a full deployment cycle.
Limited Experimentation: A/B testing or rolling out features to specific user groups for targeted feedback is complex, if not impossible, without flexible control mechanisms.
Difficulty in Personalization: Tailoring user experiences based on individual preferences or demographics becomes cumbersome when features are hard-coded into the application.
This project, demonstrated through a banking application, addresses these very challenges. We explored how to achieve safer releases, enable testing directly in production environments, and personalize user experiences dynamically – all without the complexities of continuous redeployments.
The core problem: Traditional software release cycles are often slow, inherently risky, and severely limit our ability to experiment and adapt.

Slide 3: What is Feature Flagging?
At its core, Feature Flagging (also known as Feature Toggling or Feature Flipping) is a powerful software development technique that allows you to turn functionality on and off without deploying new code.
Think of it like the light switches in your house or circuit breakers in an electrical panel. Just as you can control individual lights or sections of your home's power independently, feature flags give you granular control over specific features within your application.
Why is this so transformative? Feature flags provide several high-level benefits that address the challenges we just discussed:
Decoupling Deployment from Release: You can deploy code containing new features at any time, but only release those features to users when you're ready, by simply toggling a flag.
Reducing Risk: If a new feature causes issues, you can instantly turn it off for all or a subset of users, minimizing impact without needing an emergency hotfix deployment.
Enabling A/B Testing & Experimentation: Easily test different versions of a feature with different user groups to gather data and make informed decisions.
Personalization: Deliver tailored experiences to specific user segments based on their attributes or preferences.
Faster Iteration & Feedback: Get new features into production quickly and iterate based on real-world usage and feedback.
Visuals: Imagine a simple diagram showing a user request entering your application. Instead of a direct path to a feature, there's a "decision point" (the feature flag) that directs the request to either the "new feature" path or the "old/disabled" path.

Slide 4: Introducing Unleash - Your Feature Flag Management Tool
To effectively manage our feature flags, we chose Unleash, a leading open-source and enterprise-ready feature flag management system.
Why Unleash?
We selected Unleash for several compelling reasons:
• Centralized Control: It provides a single, intuitive dashboard to manage all feature flags across different applications and environments.
• Powerful Strategies: Unleash offers a rich set of built-in strategies and the flexibility to create custom ones, allowing for highly granular control over who sees which feature.
• Extensive SDK Support: With Software Development Kits (SDKs) available for numerous programming languages (like React and Java, which we used), integration into existing applications is straightforward.
• User-Friendly Interface: Its intuitive UI makes it easy for developers, product managers, and even non-technical stakeholders to understand and manage feature rollouts.
Key Components of Unleash:
Understanding Unleash involves grasping its core building blocks:
• Feature Flags: These are the fundamental "on/off" toggles for specific functionalities in your application. Each flag represents a decision point in your code.
• Strategies: These are the rules that determine if a feature flag is "on" for a given user or environment. Examples include percentage rollouts, user ID targeting, or IP-based access.
• Context: This is the dynamic data about the user or the environment that Unleash uses to evaluate strategies. Common context fields include userId, sessionId, remoteAddress (IP), and custom fields like region.
Visuals: A compelling screenshot of the Unleash UI, perhaps showing the dashboard with a list of flags, or a detailed view of a single flag's configuration, would be highly effective here.

Slide 5: Unleash Integration in Our Banking Application
Now, let's look at how Unleash was seamlessly integrated into our banking application to enable dynamic feature management.
Our Integration Architecture:
The setup involved a straightforward connection between our application components and the hosted Unleash instance:
Frontend (React.js): This is where our user interface resides.
Backend (Spring Boot): This handles our business logic, data persistence, and API endpoints.
Unleash Instance: Our centralized server for managing all feature flags.
(Visuals: A simple block diagram showing arrows from Frontend to Backend, and both Frontend and Backend communicating with the Unleash Instance)
SDKs Utilized for Integration:
To facilitate communication with Unleash, we leveraged its official Software Development Kits:
React Client SDK: This SDK was integrated directly into our React frontend. It's ideal for controlling UI elements, enabling or disabling client-side features, and performing A/B tests that are primarily visual.
Java Server SDK: Our Spring Boot backend utilized the Java Server SDK. This allowed us to control backend logic, API access, and more complex business rules based on feature flag states, ensuring robust and secure feature management.
How it Works:
The integration allows our application to dynamically adapt its behavior. When a user interacts with the application, or a specific piece of logic is invoked:
Our application (either frontend or backend, depending on the feature) queries the Unleash instance through the respective SDK.
Unleash evaluates the status of the requested feature flag based on its configured strategies and the provided user/environment context.
Unleash then returns the flag's status (enabled or disabled) to our application.
Based on this status, our application renders the appropriate UI, executes specific backend logic, or displays relevant messages.
This dynamic evaluation ensures that features are delivered precisely when and to whom they are intended, without requiring any code redeployments for simple toggles

Slide 6: Core Feature Flag Use Cases - Risk Mitigation & UI Control
Now that we understand how Unleash is integrated, let's dive into some fundamental feature flag use cases that directly address common software delivery challenges.

Kill Switch: The Filtering Feature Concept: This is perhaps the most critical and straightforward use of feature flags. A "kill switch" allows you to instantly disable a problematic or underperforming feature in production without requiring any code redeployment. It's your immediate safety net. Unleash Implementation: For this, we used a simple on/off toggle for the feature flag, typically with a 100% rollout. When the flag is "off," the feature is disabled for everyone. Banking App Scenario: In our banking application, the filtering functionality on the transactions page serves as a perfect example. If a bug were discovered in the filtering logic, or if it caused performance issues, we could simply turn off the associated Unleash flag. User Experience: When the flag is turned off, the filtering options disappear, and a clear message is displayed to the user, indicating that the feature has been temporarily taken down. Demo Cue: "Let's see how we can instantly disable the transaction filtering feature in our banking application using Unleash." (Prepare to show turning off the flag in Unleash, then refreshing the app to demonstrate the filtering options disappearing and the message appearing.)
A/B Testing / UI Toggle: The New UI Feature Concept: Feature flags are invaluable for A/B testing and dynamically controlling user interface (UI) elements. This allows you to roll out new UI experiences or test different visual layouts with specific user segments, gathering feedback and data before a full release. Unleash Implementation: This also involves a simple on/off toggle. When the flag is "on," the new UI is displayed; when "off," the default UI is shown. Banking App Scenario: By default, the transactions on our banking application's transactions page are displayed in a traditional tabulated way. We implemented a "New UI Feature" flag. User Experience: If we toggle this flag "on" from the Unleash instance, the entire UI of those transactions changes from the tabular format to a more modern, card-based layout. Toggling it "off" reverts it to the original tabular view. Demo Cue: "Now, let's explore how we can switch between different UI experiences for our transaction list, demonstrating a dynamic UI toggle." (Prepare to show toggling the flag in Unleash, then refreshing the app to show the UI changing between tabular and card formats.)

Slide 7: Advanced Strategies - Gradual Rollouts & Experimentation
Beyond simple on/off toggles, Unleash truly shines with its advanced strategies, allowing for sophisticated control over feature delivery. These enable controlled experimentation and phased rollouts, minimizing risk while maximizing learning.

Gradual Rollout Simulator • Concept: This strategy is fundamental for safe and controlled feature releases. Instead of deploying a new feature to all users at once, a gradual rollout allows you to release it to a small percentage of your user base first, and then progressively increase that percentage over time. This approach is ideal for monitoring performance, identifying unforeseen issues early, and gathering targeted feedback before a wider release. • Unleash Implementation: Unleash provides a built-in "Gradual Rollout" (or "Percentage Rollout") strategy. You simply define the percentage of users who should see the feature, and Unleash handles the distribution based on a consistent hashing mechanism. • Banking App Scenario: To demonstrate this, I've developed a "Gradual Rollout Simulator" page within the banking application. This simulator generates a specified number of dummy users. For each dummy user, it sends a request to Unleash to check the status of a particular feature flag. Based on the percentage set in Unleash, a corresponding number of dummy users will receive the flag as "enabled," showcasing the rollout in action. • Demo Cue: "Unleash allows for controlled, gradual rollouts, giving us immense flexibility. I've built a simulator to demonstrate this in real-time." (Prepare to show the simulator, explain how it creates dummy users and queries Unleash, and then demonstrate how changing the rollout percentage in the Unleash UI directly impacts the number of 'enabled' users in the simulator results.)
A/B / Multivariate Test Simulator • Concept: When you have multiple variations of a feature or UI element and want to determine which performs best, A/B testing (or Multivariate Testing for more than two variations) is crucial. This strategy allows you to simultaneously expose different user groups to distinct versions of a feature and measure their impact. • Unleash Implementation: Unleash supports this through its "Variants" feature. You can define multiple variants for a single feature flag (e.g., variantA, variantB, variantC) and assign a distribution percentage to each. Unleash ensures that users are consistently assigned to a specific variant. • Banking App Scenario: I've created a flag with three distinct variants, each distributed equally (approximately 33.33%). The A/B / Multivariate Test Simulator creates a certain number of dummy users. For each user, it queries Unleash for the flag's status and the assigned variant. The simulator then visually demonstrates that, statistically, roughly one-third of the users receive each particular variant, proving the equitable distribution. • Demo Cue: "For more complex experiments and data-driven decisions, Unleash supports A/B and multivariate testing with its powerful variant management." (Prepare to show the simulator, explain the concept of variants, and demonstrate the distribution of different variants among the dummy users, highlighting how the percentages align with the Unleash configuration.)

Slide 8: Advanced Strategies - Context-Based Targeting
Unleash's power extends to targeting specific user segments based on various contextual data. This allows for highly precise control over who sees which feature, enabling tailored experiences and controlled rollouts.

IP-Based Strategy & Simulator • Concept: This strategy enables features only for users originating from specific IP addresses or defined IP ranges. It's incredibly useful for internal testing, providing early access to beta users, or delivering features relevant to a particular network. • Unleash Implementation: Unleash provides a dedicated "IP Strategy" where you can specify individual IP addresses or CIDR ranges. • Banking App Scenario: To illustrate this, I've built an IP Strategy Simulator. This tool allows us to input a range or discrete IP addresses and then test the flag status for each. Only those IP addresses falling within the range configured in Unleash will receive the flag as "enabled." • Demo Cue: "Beyond percentages, Unleash allows targeting based on specific user attributes, like IP addresses. Let's see how our IP simulator demonstrates this." (Prepare to show the IP strategy configuration in Unleash, then use the simulator to demonstrate how only allowed IPs receive the enabled flag, while others do not.)
Geo-Targeted Feature Flag (with Custom Context) • Concept: For features that are relevant to users in specific geographical locations, Unleash allows for geo-targeting. This ensures that a feature is only accessible to users within a defined region, country, or city. • Unleash Implementation: This is achieved by combining the IP strategy with a custom context field, such as region. We define the region as a context property, and then add a constraint to the flag that checks this region value. • Banking App Scenario: We've created a flag that is available only to users whose region context matches a specific geographical location. This demonstrates how you can provide region-specific features or comply with local regulations. • Demo Cue: "Combining strategies with custom contexts, we can even target users by their geographical region. Our flag, for instance, is configured to be available only to users in a specific region." (Explain the region custom context and show the constraint in Unleash. You can verbally explain how the simulator or a live user from that region would experience the enabled flag, while others wouldn't.)

Slide 9: Advanced Strategies - User Targeting & Permissions
Unleash excels at managing access to features based on individual users or specific user groups. This is crucial for premium features, internal testing, or controlled rollouts to a select audience.

Permission Flag (User Targeting) • Concept: This strategy allows you to grant access to specific features, modules, or premium content only to a predefined set of users. It's perfect for enabling premium subscriptions, beta testing with a select group, or providing internal tools. • Unleash Implementation: We achieve this by adding a constraint based on the userId context field. You can specify a list of user IDs who should have access to the feature. • Banking App Scenario: In our banking application, the "Analytics & Insights" page is a premium feature. Access to this page is controlled by an Unleash flag with a userId constraint. Only users whose IDs are explicitly listed in Unleash will be able to view this page. • Demo Cue: "Finally, Unleash is excellent for managing user permissions and premium features. Let's see how it controls access to our Analytics page." (Prepare to log in as a user without the specified User ID and show the Analytics page is hidden or inaccessible. Then, log in as a user with the specified User ID in Unleash and show full access to the Analytics page.)
Money Transfer Feature (Backend-Driven Kill Switch) • Concept: While we've seen UI-driven kill switches, it's equally vital to control critical backend functionalities. This demonstrates how a feature flag can disable core business logic directly on the server side, providing a robust safety mechanism. • Unleash Implementation: This feature is integrated with the Java Server SDK. The backend application queries Unleash for the flag status before processing a money transfer request. It's a simple on/off toggle for critical functionality. • Banking App Scenario: We've implemented a kill switch for the money transfer feature. If this flag is disabled from Unleash, any attempt by a user to perform a money transfer will result in a response from the backend indicating that the feature is currently disabled. • Demo Cue: "This isn't just for the UI; backend features can also be controlled. For instance, the money transfer functionality." (Prepare to attempt a money transfer while the flag is disabled, show the backend response indicating it's disabled, and then show the flag's status in the Unleash UI.)

Slide 10: Key Takeaways & Impact of Unleash
Having explored Unleash's capabilities, let's summarize the profound impact it has on modern software development and delivery:
Empowered Development Teams: Unleash enables faster iteration cycles, significantly reduces deployment risk, and fosters a culture of continuous experimentation.
Improved User Experience: Through A/B testing and personalized features, Unleash allows for tailored experiences, leading to higher user satisfaction. It also facilitates quick bug fixes and rollbacks, minimizing user disruption.
Enhanced Business Agility: Businesses can respond rapidly to market changes, launch new initiatives with confidence, and instantly roll back features if needed, maintaining competitive edge.
Decoupling Deployment from Release: This is a fundamental shift. Code can be deployed to production at any time, while the actual release of features is controlled independently via feature flags, reducing deployment stress.
Confidence in Production: Unleash allows for safely testing new features with a small subset of users in a live environment, building confidence before a full rollout.
Visuals: Consider using simple, impactful icons representing concepts like speed, safety, and flexibility to visually reinforce these key takeaways.

Slide 11: Conclusion & Q&A
Goal: Wrap up the presentation and invite questions.
Content:
Recap: Briefly reiterate how Unleash transforms software delivery.
Call to Action (Optional): Encourage adoption of feature flagging practices.
Thank You!
Questions?
Contact Information (Optional): [Your Email/LinkedIn]

analytics2

Nebula — Fri, 04 Jul 2025 06:13:58 +0000

import React, { useState, useEffect, useMemo, useCallback } from 'react';
import styled from 'styled-components';
import { motion, AnimatePresence } from 'framer-motion';
import { Search, Filter, X, RefreshCw, AlertCircle, TrendingUp, TrendingDown, ArrowUpDown } from 'lucide-react';
import {
  ResponsiveContainer,
  BarChart,
  Bar,
  LineChart,
  Line,
  PieChart,
  Pie,
  Cell,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
} from 'recharts';
import { toast } from 'react-hot-toast'; // Assuming you use react-hot-toast

// Assume 'api' is configured and imported from your api setup
// import api from '../api';
// Assume 'user' object is available from a context or props
// const { user } = useAuth();

// Styled Components (as provided in the prompt)
const colors = {
  primary: '#667eea',
  primaryDark: '#5a67d8',
  secondary: '#764ba2',
  success: '#48bb78',
  error: '#ff6b6b',
  warning: '#f6ad55',
  text: '#1a202c',
  textSecondary: '#4a5568',
  textMuted: '#a0aec0',
  background: 'rgba(255, 255, 255, 0.95)',
  border: 'rgba(102, 126, 234, 0.2)',
  borderHover: '#667eea',
  glass: 'rgba(255, 255, 255, 0.95)',
  glassLight: 'rgba(255, 255, 255, 0.8)',
  shadow: 'rgba(0, 0, 0, 0.1)',
  shadowHover: 'rgba(102, 126, 234, 0.1)'
};

const gradients = {
  primary: `linear-gradient(135deg, ${colors.primary}, ${colors.secondary})`,
};

const spacing = {
  sm: '8px',
  md: '12px',
  lg: '16px',
  xl: '20px',
  xxl: '24px',
  xxxl: '32px'
};

const Container = styled(motion.div)`
  padding: ${spacing.xxxl};
  max-width: 1600px;
  margin: 0 auto;
  h2 {
    font-size: 32px;
    font-weight: 800;
    color: ${colors.text};
    margin-bottom: ${spacing.xxxl};
    background: ${gradients.primary};
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
  }
  @media (max-width: 768px) { padding: ${spacing.xl}; }
`;

const FilterSection = styled(motion.div)`
  background: ${colors.glass};
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: ${spacing.xxl};
  margin-bottom: ${spacing.xxxl};
  box-shadow: 0 8px 32px ${colors.shadow};
  border: 1px solid rgba(255, 255, 255, 0.2);
`;

const SearchContainer = styled.div`
  position: relative;
  margin-bottom: ${spacing.xl};
  svg {
    position: absolute;
    left: ${spacing.lg};
    top: 50%;
    transform: translateY(-50%);
    color: ${colors.textMuted};
  }
`;

const SearchInput = styled.input`
  width: 100%;
  padding: ${spacing.lg} ${spacing.lg} ${spacing.lg} 48px;
  border: 2px solid ${colors.border};
  border-radius: 12px;
  font-size: 16px;
  background: ${colors.glassLight};
  &:focus {
    outline: none;
    border-color: ${colors.borderHover};
    box-shadow: 0 0 0 4px ${colors.shadowHover};
  }
`;

const FiltersGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: ${spacing.lg};
  margin-bottom: ${spacing.xl};
`;

const FilterSelect = styled.select`
  padding: ${spacing.lg};
  border: 2px solid ${colors.border};
  border-radius: 12px;
  font-size: 16px;
  background: ${colors.glassLight};
  cursor: pointer;
  &:focus {
    outline: none;
    border-color: ${colors.borderHover};
    box-shadow: 0 0 0 4px ${colors.shadowHover};
  }
`;

const DateInput = styled.input`
    padding: ${spacing.lg};
    border: 2px solid ${colors.border};
    border-radius: 12px;
    font-size: 16px;
    background: ${colors.glassLight};
    color: ${colors.textSecondary};
    cursor: pointer;
    &:focus {
        outline: none;
        border-color: ${colors.borderHover};
        box-shadow: 0 0 0 4px ${colors.shadowHover};
    }
`;

const ButtonGroup = styled.div`
  display: flex;
  gap: ${spacing.md};
  justify-content: flex-end;
  margin-top: ${spacing.xl};
`;

const Button = styled(motion.button)`
  display: flex;
  align-items: center;
  gap: ${spacing.sm};
  padding: ${spacing.md} ${spacing.xl};
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.3s ease;

  ${props => props.variant === 'primary' ? `
    background: ${gradients.primary};
    color: white;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
    &:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5);
    }
  ` : `
    background: transparent;
    color: ${colors.textSecondary};
    border-color: #e2e8f0;
    &:hover:not(:disabled) {
      background: #f7fafc;
      border-color: #cbd5e0;
    }
  `}

  &:disabled { opacity: 0.6; cursor: not-allowed; }
`;

const AnalyticsGrid = styled(motion.div)`
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: ${spacing.xxl};
    margin-bottom: ${spacing.xxxl};
`;

const ChartContainer = styled.div`
    background: ${colors.glass};
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: ${spacing.xl};
    box-shadow: 0 8px 32px ${colors.shadow};
    border: 1px solid rgba(255, 255, 255, 0.2);
    h3 {
        font-size: 18px;
        font-weight: 600;
        color: ${colors.text};
        margin-bottom: ${spacing.xl};
    }
`;

const TableContainer = styled.div`
  background: ${colors.glass};
  backdrop-filter: blur(20px);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 32px ${colors.shadow};
`;

const Table = styled.table`
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  th {
    background: ${gradients.primary};
    color: white;
    padding: ${spacing.lg};
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    &:hover { background: ${colors.primaryDark}; }
  }
  td {
    padding: ${spacing.lg};
    color: ${colors.textSecondary};
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  }
  tr:last-child td { border-bottom: none; }
  tr:hover { background: ${colors.shadowHover}; }
`;

const StatusBadge = styled.span`
  padding: 6px ${spacing.md};
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  ${({ status }) => {
    switch (status) {
      case 'SUCCESS': return `background-color: ${colors.success}20; color: ${colors.success};`;
      case 'PENDING': return `background-color: ${colors.warning}20; color: ${colors.warning};`;
      case 'FAILED': return `background-color: ${colors.error}20; color: ${colors.error};`;
      default: return `background-color: ${colors.textMuted}20; color: ${colors.textMuted};`;
    }
  }}
`;

const TypeBadge = styled.span`
  padding: 6px ${spacing.md};
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  ${({ type }) => {
    switch (type) {
      case 'DEPOSIT': return `background-color: ${colors.success}20; color: ${colors.success};`;
      case 'WITHDRAW': return `background-color: ${colors.error}20; color: ${colors.error};`;
      case 'TRANSFER': return `background-color: ${colors.primary}20; color: ${colors.primary};`;
      default: return `background-color: ${colors.textMuted}20; color: ${colors.textMuted};`;
    }
  }}
`;

const LoadingSpinner = styled(motion.div)`
  display: flex; justify-content: center; padding: 64px;
  svg { animation: spin 1s linear infinite; }
  @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
`;

const ErrorMessage = styled(motion.div)`
  display: flex; flex-direction: column; align-items: center; gap: ${spacing.lg};
  padding: 64px; text-align: center; color: ${colors.error};
`;

const EmptyState = styled(motion.div)`
  display: flex; flex-direction: column; align-items: center; gap: ${spacing.lg};
  padding: 64px; text-align: center; color: ${colors.textMuted};
`;


// Mock user for demonstration. In a real app, this would come from an auth context.
const user = { id: 1, name: 'Kishan' };

// Mock API for demonstration
const api = {
    get: async (url) => {
        console.log(`Fetching ${url}...`);
        await new Promise(res => setTimeout(res, 500)); // Simulate network delay
        if (url.startsWith('/accounts/user/')) {
            return { data: { message: "Accounts retrieved successfully", data: [ { id: 1, accountNumber: "98765432155", accountType: "SAVINGS", balance: 1450.01, userDTO: { id: 1, name: "kishan" } }, { id: 52, accountNumber: "98765432188", accountType: "SALARY", balance: 25000.00, userDTO: { id: 1, name: "kishan" } } ] }};
        }
        if (url.startsWith('/transactions/user/')) {
            return { data: { message: "Transactions fetched successfully", data: [ { id: 1, fromAccount: { id: 52, accountNumber: "98765432188" }, toAccount: { id: 1, accountNumber: "98765432155" }, type: "TRANSFER", amount: 500.00, description: "Monthly savings", timestamp: "2025-07-01T10:00:00Z", status: "SUCCESS" }, { id: 2, toAccount: { id: 52, accountNumber: "98765432188" }, type: "DEPOSIT", amount: 25000.00, description: "July Salary", timestamp: "2025-07-01T09:00:00Z", status: "SUCCESS" }, { id: 3, fromAccount: { id: 1, accountNumber: "98765432155" }, type: "WITHDRAW", amount: 150.00, description: "Grocery Shopping", timestamp: "2025-07-02T18:30:00Z", status: "SUCCESS" }, { id: 4, fromAccount: { id: 1, accountNumber: "98765432155" }, type: "WITHDRAW", amount: 80.00, description: "Dinner with friends", timestamp: "2025-06-15T20:00:00Z", status: "SUCCESS" }, { id: 5, toAccount: { id: 1, accountNumber: "98765432155" }, type: "DEPOSIT", amount: 1000.00, description: "Freelance Payment", timestamp: "2025-06-20T14:00:00Z", status: "SUCCESS" } ] }};
        }
        return { data: { data: [] } };
    }
};

const TransactionAnalytics = () => {
  const [transactions, setTransactions] = useState([]);
  const [userAccounts, setUserAccounts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [accountsLoading, setAccountsLoading] = useState(true);
  const [error, setError] = useState(null);

  const [filters, setFilters] = useState({
    searchTerm: '',
    account: 'all',
    type: 'all',
    startDate: '',
    endDate: '',
  });

  const [sortConfig, setSortConfig] = useState({ key: 'timestamp', direction: 'desc' });

  // --- DATA FETCHING ---
  const fetchUserAccounts = useCallback(async () => {
    if (!user?.id) return;
    try {
      setAccountsLoading(true);
      const response = await api.get(`/accounts/user/${user.id}`);
      setUserAccounts(response.data.data);
    } catch (err) {
      console.error('Error fetching user accounts:', err);
      toast.error('Failed to load user accounts');
    } finally {
      setAccountsLoading(false);
    }
  }, []); // user.id is static in this example

  const fetchTransactions = useCallback(async () => {
    if (!user?.id) return;
    try {
      setLoading(true);
      setError(null);
      const response = await api.get(`/transactions/user/${user.id}`);
      setTransactions(response.data.data);
    } catch (err) {
      setError('Failed to load transactions. Please try again.');
      console.error('Error fetching transactions:', err);
    } finally {
      setLoading(false);
    }
  }, []); // user.id is static

  const handleRefresh = () => {
      toast.success('Refreshing data...');
      fetchUserAccounts();
      fetchTransactions();
  }

  useEffect(() => {
    handleRefresh();
  }, [fetchUserAccounts, fetchTransactions]);


  // --- FILTERING & SORTING ---
  const filteredAndSortedTransactions = useMemo(() => {
    let filtered = transactions.filter(t => {
      const transactionDate = new Date(t.timestamp);
      const startDate = filters.startDate ? new Date(filters.startDate) : null;
      const endDate = filters.endDate ? new Date(filters.endDate) : null;

      if(startDate) startDate.setHours(0,0,0,0);
      if(endDate) endDate.setHours(23,59,59,999);

      const inDateRange = (!startDate || transactionDate >= startDate) && (!endDate || transactionDate <= endDate);
      const inSearch = t.description.toLowerCase().includes(filters.searchTerm.toLowerCase());
      const inAccount = filters.account === 'all' || t.fromAccount?.accountNumber === filters.account || t.toAccount?.accountNumber === filters.account;
      const inType = filters.type === 'all' || t.type === filters.type;

      return inDateRange && inSearch && inAccount && inType;
    });

    return filtered.sort((a, b) => {
      if (a[sortConfig.key] < b[sortConfig.key]) {
        return sortConfig.direction === 'asc' ? -1 : 1;
      }
      if (a[sortConfig.key] > b[sortConfig.key]) {
        return sortConfig.direction === 'asc' ? 1 : -1;
      }
      return 0;
    });
  }, [transactions, filters, sortConfig]);

  const handleSort = (key) => {
    setSortConfig(prev => ({
      key,
      direction: prev.key === key && prev.direction === 'asc' ? 'desc' : 'asc'
    }));
  };

  const handleFilterChange = (e) => {
    const { name, value } = e.target;
    setFilters(prev => ({ ...prev, [name]: value }));
  };

  const resetFilters = () => {
    setFilters({ searchTerm: '', account: 'all', type: 'all', startDate: '', endDate: '' });
    setSortConfig({ key: 'timestamp', direction: 'desc' });
    toast.success("Filters Reset");
  };


  // --- CHART DATA PROCESSING ---
  const analyticsData = useMemo(() => {
    const incomeVsExpense = [
        { name: 'Income', amount: filteredAndSortedTransactions.filter(t => t.type === 'DEPOSIT').reduce((sum, t) => sum + t.amount, 0) },
        { name: 'Expenses', amount: filteredAndSortedTransactions.filter(t => ['WITHDRAW', 'TRANSFER'].includes(t.type)).reduce((sum, t) => sum + t.amount, 0) }
    ];

    const typeDistribution = Object.entries(
      filteredAndSortedTransactions.reduce((acc, t) => {
        acc[t.type] = (acc[t.type] || 0) + 1;
        return acc;
      }, {})
    ).map(([name, value]) => ({ name, value }));

    const trendData = filteredAndSortedTransactions
      .map(t => ({ ...t, date: new Date(t.timestamp).toISOString().split('T')[0] }))
      .reduce((acc, t) => {
        if (!acc[t.date]) acc[t.date] = { date: t.date, amount: 0 };
        acc[t.date].amount += t.amount;
        return acc;
      }, {});

    const sortedTrendData = Object.values(trendData).sort((a,b) => new Date(a.date) - new Date(b.date));

    return { incomeVsExpense, typeDistribution, trendData: sortedTrendData };
  }, [filteredAndSortedTransactions]);

  const PIE_COLORS = {
      DEPOSIT: colors.success,
      WITHDRAW: colors.error,
      TRANSFER: colors.primary
  };

  const CustomTooltip = ({ active, payload, label }) => {
    if (active && payload && payload.length) {
      return (
        <div style={{ background: 'white', padding: '10px', border: `1px solid ${colors.border}`, borderRadius: '10px' }}>
          <p style={{ fontWeight: 600, color: colors.text }}>{`Date: ${label}`}</p>
          <p style={{ color: colors.primary }}>{`Amount: $${payload[0].value.toFixed(2)}`}</p>
        </div>
      );
    }
    return null;
  };

  // --- RENDER LOGIC ---
  if (error) {
    return (
      <Container>
        <ErrorMessage initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}>
          <AlertCircle size={48} />
          <h3>Oops! Something went wrong.</h3>
          <p>{error}</p>
          <Button variant="primary" onClick={handleRefresh}><RefreshCw size={16} /> Try Again</Button>
        </ErrorMessage>
      </Container>
    );
  }

  return (
    <Container initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.5 }}>
      <h2>Transaction Analytics</h2>

      <FilterSection initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.2 }}>
        <SearchContainer>
          <Search size={20} />
          <SearchInput
            type="text"
            name="searchTerm"
            placeholder="Search by description..."
            value={filters.searchTerm}
            onChange={handleFilterChange}
          />
        </SearchContainer>
        <FiltersGrid>
          <FilterSelect name="account" value={filters.account} onChange={handleFilterChange} disabled={accountsLoading}>
            <option value="all">All Accounts</option>
            {userAccounts.map(acc => (
              <option key={acc.id} value={acc.accountNumber}>
                {acc.accountType} - {acc.accountNumber}
              </option>
            ))}
          </FilterSelect>
          <FilterSelect name="type" value={filters.type} onChange={handleFilterChange}>
            <option value="all">All Types</option>
            <option value="DEPOSIT">Deposit</option>
            <option value="WITHDRAW">Withdraw</option>
            <option value="TRANSFER">Transfer</option>
          </FilterSelect>
          <DateInput type="date" name="startDate" value={filters.startDate} onChange={handleFilterChange} />
          <DateInput type="date" name="endDate" value={filters.endDate} onChange={handleFilterChange} />
        </FiltersGrid>
        <ButtonGroup>
            <Button onClick={resetFilters} whileTap={{ scale: 0.95 }}>
                <X size={16} /> Reset
            </Button>
            <Button variant="primary" onClick={handleRefresh} disabled={loading || accountsLoading} whileTap={{ scale: 0.95 }}>
                <RefreshCw size={16} /> Refresh Data
            </Button>
        </ButtonGroup>
      </FilterSection>

      {loading ? (
        <LoadingSpinner><RefreshCw size={48} /></LoadingSpinner>
      ) : (
        <>
            <AnalyticsGrid initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.4 }}>
                <ChartContainer>
                    <h3>Income vs. Expense</h3>
                    <ResponsiveContainer width="100%" height={300}>
                        <BarChart data={analyticsData.incomeVsExpense} margin={{ top: 5, right: 20, left: -10, bottom: 5 }}>
                            <CartesianGrid strokeDasharray="3 3" stroke={colors.border}/>
                            <XAxis dataKey="name" stroke={colors.textSecondary} />
                            <YAxis stroke={colors.textSecondary}/>
                            <Tooltip cursor={{fill: 'rgba(102, 126, 234, 0.1)'}}/>
                            <Legend />
                            <Bar dataKey="amount" name="Amount">
                                {analyticsData.incomeVsExpense.map((entry, index) => (
                                    <Cell key={`cell-${index}`} fill={entry.name === 'Income' ? colors.success : colors.error} />
                                ))}
                            </Bar>
                        </BarChart>
                    </ResponsiveContainer>
                </ChartContainer>
                 <ChartContainer>
                    <h3>Transaction Trend</h3>
                    <ResponsiveContainer width="100%" height={300}>
                        <LineChart data={analyticsData.trendData} margin={{ top: 5, right: 20, left: -10, bottom: 5 }}>
                            <CartesianGrid strokeDasharray="3 3" stroke={colors.border} />
                            <XAxis dataKey="date" stroke={colors.textSecondary} tickFormatter={(str) => new Date(str).toLocaleDateString('en-US', {month: 'short', day: 'numeric'})} />
                            <YAxis stroke={colors.textSecondary}/>
                            <Tooltip content={<CustomTooltip />}/>
                            <Legend />
                            <Line type="monotone" dataKey="amount" stroke={colors.primary} strokeWidth={2} dot={{ r: 4 }} activeDot={{ r: 8 }} name="Total Amount"/>
                        </LineChart>
                    </ResponsiveContainer>
                </ChartContainer>
                <ChartContainer>
                    <h3>Transaction by Type</h3>
                    <ResponsiveContainer width="100%" height={300}>
                        <PieChart>
                            <Pie data={analyticsData.typeDistribution} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={100} label>
                                {analyticsData.typeDistribution.map((entry, index) => (
                                    <Cell key={`cell-${index}`} fill={PIE_COLORS[entry.name]} />
                                ))}
                            </Pie>
                            <Tooltip />
                            <Legend />
                        </PieChart>
                    </ResponsiveContainer>
                </ChartContainer>
            </AnalyticsGrid>

            <AnimatePresence>
                {filteredAndSortedTransactions.length > 0 ? (
                <TableContainer initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.6 }}>
                    <Table>
                    <thead>
                        <tr>
                            <th onClick={() => handleSort('timestamp')}>Date <ArrowUpDown size={14} /></th>
                            <th onClick={() => handleSort('description')}>Description <ArrowUpDown size={14} /></th>
                            <th>From</th>
                            <th>To</th>
                            <th onClick={() => handleSort('type')}>Type <ArrowUpDown size={14} /></th>
                            <th onClick={() => handleSort('amount')}>Amount <ArrowUpDown size={14} /></th>
                            <th onClick={() => handleSort('status')}>Status <ArrowUpDown size={14} /></th>
                        </tr>
                    </thead>
                    <tbody>
                        {filteredAndSortedTransactions.map(t => (
                        <motion.tr key={t.id} initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
                            <td>{new Date(t.timestamp).toLocaleDateString()}</td>
                            <td>{t.description}</td>
                            <td>{t.fromAccount?.accountNumber || 'N/A'}</td>
                            <td>{t.toAccount?.accountNumber || 'N/A'}</td>
                            <td><TypeBadge type={t.type}>{t.type}</TypeBadge></td>
                            <td style={{ color: ['DEPOSIT'].includes(t.type) ? colors.success : colors.error, fontWeight: '600' }}>
                               {['DEPOSIT'].includes(t.type) ? '+' : '-'} ${t.amount.toFixed(2)}
                            </td>
                            <td><StatusBadge status={t.status}>{t.status}</StatusBadge></td>
                        </motion.tr>
                        ))}
                    </tbody>
                    </Table>
                </TableContainer>
                ) : (
                <EmptyState initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.6 }}>
                    <Filter size={48} />
                    <h3>No Transactions Found</h3>
                    <p>Try adjusting your filters or click Refresh to fetch the latest data.</p>
                </EmptyState>
                )}
            </AnimatePresence>
        </>
      )}
    </Container>
  );
};

export default TransactionAnalytics;

apikey

Nebula — Wed, 02 Jul 2025 19:45:00 +0000

ira_T7H78xibLqmLD7LyC1Z7VCyfNP8fha1wBL63

Subject: Feedback on Internship Buddy Program - Rasika [Last Name]
Dear [Manager's Name/HR Team],
I am writing to provide feedback on my internship experience with the Morpheus team, specifically regarding the buddy program.
I would like to commend Rasika for her exceptional support throughout my internship tenure. As my assigned buddy, she has been consistently helpful and considerate, always making time in her busy schedule to assist me whenever I encountered challenges or needed guidance.
Rasika's willingness to share her knowledge and provide direction has significantly contributed to my smooth integration into the team and overall positive internship experience. Her mentorship has been invaluable in helping me navigate both technical and organizational aspects of my role.
I believe the buddy program is highly effective, and Rasika exemplifies the qualities that make this initiative successful. I wanted to ensure her contributions are recognized and appreciated.
Thank you for providing such a supportive learning environment.
Best regards,
[Your Name]
[Your Position - Intern, Morpheus Team]
[Your Contact Information]

analytics

Nebula — Wed, 02 Jul 2025 05:44:48 +0000

import { useState, useEffect, useCallback, useMemo } from "react";
import { Search, Filter, X, RefreshCw, AlertCircle, TrendingUp, TrendingDown, Calendar, DollarSign, PieChart, BarChart3, Download, Eye, EyeOff } from "lucide-react";
import styled from 'styled-components';
import { motion, AnimatePresence } from 'framer-motion';
import { LineChart, Line, AreaChart, Area, BarChart, Bar, PieChart as RechartsPieChart, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

// Design tokens (from your original file)
const colors = {
  primary: '#667eea',
  primaryDark: '#5a67d8',
  secondary: '#764ba2',
  success: '#48bb78',
  error: '#ff6b6b',
  warning: '#f6ad55',
  text: '#1a202c',
  textSecondary: '#4a5568',
  textMuted: '#a0aec0',
  background: 'rgba(255, 255, 255, 0.95)',
  border: 'rgba(102, 126, 234, 0.2)',
  borderHover: '#667eea',
  glass: 'rgba(255, 255, 255, 0.95)',
  glassLight: 'rgba(255, 255, 255, 0.8)',
  shadow: 'rgba(0, 0, 0, 0.1)',
  shadowHover: 'rgba(102, 126, 234, 0.1)'
};

const gradients = {
  primary: `linear-gradient(135deg, ${colors.primary}, ${colors.secondary})`,
  success: `linear-gradient(135deg, ${colors.success}, #38b2ac)`,
  error: `linear-gradient(135deg, ${colors.error}, #ee5a52)`,
  warning: `linear-gradient(135deg, ${colors.warning}, #ff8c00)`
};

const spacing = {
  xs: '4px',
  sm: '8px',
  md: '12px',
  lg: '16px',
  xl: '20px',
  xxl: '24px',
  xxxl: '32px'
};

// Styled Components
const Container = styled(motion.div)`
  padding: ${spacing.xxxl};
  max-width: 1400px;
  margin: 0 auto;
  min-height: calc(100vh - 120px);

  h1 {
    font-size: 36px;
    font-weight: 800;
    color: ${colors.text};
    margin-bottom: ${spacing.sm};
    background: ${gradients.primary};
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: center;
  }

  .subtitle {
    text-align: center;
    color: ${colors.textMuted};
    margin-bottom: ${spacing.xxxl};
    font-size: 16px;
  }

  @media (max-width: 768px) {
    padding: ${spacing.xl};

    h1 {
      font-size: 28px;
      margin-bottom: ${spacing.xs};
    }
  }
`;

const StatsGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: ${spacing.xl};
  margin-bottom: ${spacing.xxxl};

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
    gap: ${spacing.lg};
  }
`;

const StatCard = styled(motion.div)`
  background: ${colors.glass};
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: ${spacing.xxl};
  box-shadow: 0 8px 32px ${colors.shadow};
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: ${props => props.color || gradients.primary};
  }

  .stat-header {
    display: flex;
    align-items: center;
    gap: ${spacing.md};
    margin-bottom: ${spacing.lg};

    svg {
      color: ${props => props.iconColor || colors.primary};
    }

    h3 {
      margin: 0;
      font-size: 14px;
      font-weight: 600;
      color: ${colors.textSecondary};
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
  }

  .stat-value {
    font-size: 32px;
    font-weight: 800;
    color: ${colors.text};
    margin-bottom: ${spacing.sm};
  }

  .stat-change {
    display: flex;
    align-items: center;
    gap: ${spacing.xs};
    font-size: 14px;
    font-weight: 600;

    &.positive {
      color: ${colors.success};
    }

    &.negative {
      color: ${colors.error};
    }
  }
`;

const FilterSection = styled(motion.div)`
  background: ${colors.glass};
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: ${spacing.xxl};
  margin-bottom: ${spacing.xxxl};
  box-shadow: 0 8px 32px ${colors.shadow};
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: ${gradients.primary};
  }

  .filter-header {
    display: flex;
    align-items: center;
    gap: ${spacing.md};
    margin-bottom: ${spacing.xl};

    h3 {
      margin: 0;
      font-size: 18px;
      font-weight: 600;
      color: ${colors.text};
    }
  }
`;

const FiltersGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: ${spacing.lg};
  margin-bottom: ${spacing.xl};

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
`;

const FilterSelect = styled.select`
  padding: ${spacing.lg} ${spacing.xl};
  border: 2px solid ${colors.border};
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  color: ${colors.text};
  background: ${colors.glassLight};
  backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;

  &:focus {
    outline: none;
    border-color: ${colors.borderHover};
    box-shadow: 0 0 0 4px ${colors.shadowHover};
    background: ${colors.background};
  }
`;

const DateInput = styled.input`
  padding: ${spacing.lg} ${spacing.xl};
  border: 2px solid ${colors.border};
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  color: ${colors.text};
  background: ${colors.glassLight};
  backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  &:focus {
    outline: none;
    border-color: ${colors.borderHover};
    box-shadow: 0 0 0 4px ${colors.shadowHover};
    background: ${colors.background};
  }
`;

const AmountRangeContainer = styled.div`
  display: flex;
  gap: ${spacing.md};
  align-items: center;

  input {
    flex: 1;
    padding: ${spacing.lg};
    border: 2px solid ${colors.border};
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    color: ${colors.text};
    background: ${colors.glassLight};
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    &:focus {
      outline: none;
      border-color: ${colors.borderHover};
      box-shadow: 0 0 0 4px ${colors.shadowHover};
      background: ${colors.background};
    }
  }

  span {
    color: ${colors.textMuted};
    font-weight: 600;
  }
`;

const ButtonGroup = styled.div`
  display: flex;
  gap: ${spacing.md};
  justify-content: flex-end;

  @media (max-width: 768px) {
    justify-content: stretch;
  }
`;

const Button = styled(motion.button)`
  display: flex;
  align-items: center;
  gap: ${spacing.sm};
  padding: ${spacing.md} ${spacing.xl};
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid transparent;

  ${props => props.variant === 'primary' ? `
    background: ${gradients.primary};
    color: white;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);

    &:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5);
    }
  ` : `
    background: transparent;
    color: ${colors.textSecondary};
    border-color: #e2e8f0;

    &:hover:not(:disabled) {
      background: #f7fafc;
      border-color: #cbd5e0;
    }
  `}

  &:active {
    transform: translateY(0);
  }

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  @media (max-width: 768px) {
    flex: 1;
    justify-content: center;
  }
`;

const ChartsGrid = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: ${spacing.xl};
  margin-bottom: ${spacing.xxxl};

  @media (max-width: 1024px) {
    grid-template-columns: 1fr;
  }
`;

const ChartContainer = styled(motion.div)`
  background: ${colors.glass};
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: ${spacing.xxl};
  box-shadow: 0 8px 32px ${colors.shadow};
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
  grid-column: ${props => props.fullWidth ? 'span 2' : 'span 1'};

  @media (max-width: 1024px) {
    grid-column: span 1;
  }

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: ${gradients.primary};
  }

  .chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: ${spacing.xl};

    h3 {
      margin: 0;
      font-size: 18px;
      font-weight: 600;
      color: ${colors.text};
    }

    .chart-controls {
      display: flex;
      gap: ${spacing.sm};
    }
  }

  .chart-wrapper {
    height: 300px;
  }
`;

const ToggleButton = styled(motion.button)`
  padding: ${spacing.sm} ${spacing.md};
  border: 2px solid ${colors.border};
  border-radius: 8px;
  background: ${props => props.active ? gradients.primary : 'transparent'};
  color: ${props => props.active ? 'white' : colors.textSecondary};
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    border-color: ${colors.borderHover};
  }
`;

const LoadingSpinner = styled(motion.div)`
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px;
  color: ${colors.primary};

  svg {
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
`;

// Mock data generator
const generateMockTransactions = (count = 100) => {
  const types = ['DEPOSIT', 'WITHDRAW', 'TRANSFER', 'LOAN'];
  const statuses = ['SUCCESS', 'PENDING', 'FAILED'];
  const merchants = ['Amazon', 'Starbucks', 'Uber', 'Netflix', 'Spotify', 'Apple', 'Google', 'Microsoft', 'Target', 'Walmart'];
  const categories = ['Food & Dining', 'Shopping', 'Transportation', 'Entertainment', 'Bills & Utilities', 'Healthcare', 'Travel', 'Education'];

  return Array.from({ length: count }, (_, index) => {
    const type = types[Math.floor(Math.random() * types.length)];
    const amount = type === 'DEPOSIT' 
      ? Math.floor(Math.random() * 5000) + 100
      : -(Math.floor(Math.random() * 1000) + 10);

    return {
      id: `txn_${index + 1}`,
      type,
      amount,
      status: statuses[Math.floor(Math.random() * statuses.length)],
      date: new Date(Date.now() - Math.floor(Math.random() * 90) * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
      merchant: merchants[Math.floor(Math.random() * merchants.length)],
      category: categories[Math.floor(Math.random() * categories.length)],
      description: `Transaction with ${merchants[Math.floor(Math.random() * merchants.length)]}`
    };
  });
};

// Custom tooltip component
const CustomTooltip = ({ active, payload, label }) => {
  if (active && payload && payload.length) {
    return (
      <div style={{
        background: colors.glass,
        backdropFilter: 'blur(20px)',
        border: `1px solid ${colors.border}`,
        borderRadius: '12px',
        padding: spacing.md,
        boxShadow: `0 8px 32px ${colors.shadow}`
      }}>
        <p style={{ margin: 0, color: colors.text, fontWeight: '600' }}>{label}</p>
        {payload.map((entry, index) => (
          <p key={index} style={{ margin: '4px 0', color: entry.color, fontSize: '14px' }}>
            {`${entry.name}: $${Math.abs(entry.value).toLocaleString()}`}
          </p>
        ))}
      </div>
    );
  }
  return null;
};

const BankingAnalyticsDashboard = () => {
  const [transactions, setTransactions] = useState([]);
  const [loading, setLoading] = useState(true);
  const [filters, setFilters] = useState({
    type: 'ALL',
    status: 'ALL',
    category: 'ALL',
    dateFrom: '',
    dateTo: '',
    amountMin: '',
    amountMax: ''
  });
  const [chartView, setChartView] = useState({
    timeChart: 'line',
    showBalance: true
  });

  // Simulate API call
  useEffect(() => {
    const fetchTransactions = async () => {
      setLoading(true);
      // Simulate API delay
      await new Promise(resolve => setTimeout(resolve, 1000));
      setTransactions(generateMockTransactions(150));
      setLoading(false);
    };

    fetchTransactions();
  }, []);

  // Filter transactions
  const filteredTransactions = useMemo(() => {
    return transactions.filter(transaction => {
      if (filters.type !== 'ALL' && transaction.type !== filters.type) return false;
      if (filters.status !== 'ALL' && transaction.status !== filters.status) return false;
      if (filters.category !== 'ALL' && transaction.category !== filters.category) return false;
      if (filters.dateFrom && transaction.date < filters.dateFrom) return false;
      if (filters.dateTo && transaction.date > filters.dateTo) return false;
      if (filters.amountMin && Math.abs(transaction.amount) < parseFloat(filters.amountMin)) return false;
      if (filters.amountMax && Math.abs(transaction.amount) > parseFloat(filters.amountMax)) return false;
      return true;
    });
  }, [transactions, filters]);

  // Calculate statistics
  const stats = useMemo(() => {
    const totalIncome = filteredTransactions
      .filter(t => t.amount > 0)
      .reduce((sum, t) => sum + t.amount, 0);

    const totalExpenses = filteredTransactions
      .filter(t => t.amount < 0)
      .reduce((sum, t) => sum + Math.abs(t.amount), 0);

    const netBalance = totalIncome - totalExpenses;
    const avgTransaction = filteredTransactions.length > 0 
      ? filteredTransactions.reduce((sum, t) => sum + Math.abs(t.amount), 0) / filteredTransactions.length 
      : 0;

    // Calculate month-over-month changes (mock data)
    const incomeChange = Math.random() * 20 - 10; // -10% to +10%
    const expenseChange = Math.random() * 20 - 10;
    const balanceChange = Math.random() * 30 - 15;

    return {
      totalIncome,
      totalExpenses,
      netBalance,
      avgTransaction,
      transactionCount: filteredTransactions.length,
      incomeChange,
      expenseChange,
      balanceChange
    };
  }, [filteredTransactions]);

  // Prepare chart data
  const timeSeriesData = useMemo(() => {
    const dataMap = {};
    let runningBalance = 0;

    filteredTransactions
      .sort((a, b) => new Date(a.date) - new Date(b.date))
      .forEach(transaction => {
        const date = transaction.date;
        if (!dataMap[date]) {
          dataMap[date] = { date, income: 0, expenses: 0, balance: runningBalance };
        }

        if (transaction.amount > 0) {
          dataMap[date].income += transaction.amount;
        } else {
          dataMap[date].expenses += Math.abs(transaction.amount);
        }

        runningBalance += transaction.amount;
        dataMap[date].balance = runningBalance;
      });

    return Object.values(dataMap);
  }, [filteredTransactions]);

  const categoryData = useMemo(() => {
    const categoryMap = {};
    filteredTransactions.forEach(transaction => {
      if (transaction.amount < 0) { // Only expenses
        const category = transaction.category;
        categoryMap[category] = (categoryMap[category] || 0) + Math.abs(transaction.amount);
      }
    });

    return Object.entries(categoryMap).map(([name, value]) => ({ name, value }));
  }, [filteredTransactions]);

  const typeData = useMemo(() => {
    const typeMap = {};
    filteredTransactions.forEach(transaction => {
      const type = transaction.type;
      typeMap[type] = (typeMap[type] || 0) + Math.abs(transaction.amount);
    });

    return Object.entries(typeMap).map(([name, value]) => ({ name, value }));
  }, [filteredTransactions]);

  const handleFilterChange = (key, value) => {
    setFilters(prev => ({ ...prev, [key]: value }));
  };

  const resetFilters = () => {
    setFilters({
      type: 'ALL',
      status: 'ALL',
      category: 'ALL',
      dateFrom: '',
      dateTo: '',
      amountMin: '',
      amountMax: ''
    });
  };

  const refreshData = () => {
    setTransactions(generateMockTransactions(150));
  };

  const exportData = () => {
    // Mock export functionality
    const dataStr = JSON.stringify(filteredTransactions, null, 2);
    const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);

    const exportFileDefaultName = 'transaction-analytics.json';

    const linkElement = document.createElement('a');
    linkElement.setAttribute('href', dataUri);
    linkElement.setAttribute('download', exportFileDefaultName);
    linkElement.click();
  };

  const pieColors = [colors.primary, colors.secondary, colors.success, colors.warning, colors.error, '#9f7aea', '#38b2ac', '#ed8936'];

  if (loading) {
    return (
      <Container>
        <LoadingSpinner
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
        >
          <RefreshCw size={32} />
          <span style={{ marginLeft: spacing.md, fontSize: '18px', fontWeight: '600' }}>
            Loading Analytics...
          </span>
        </LoadingSpinner>
      </Container>
    );
  }

  return (
    <Container
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.6 }}
    >
      <h1>Transaction Analytics</h1>
      <p className="subtitle">Comprehensive insights into your financial activities</p>

      {/* Statistics Cards */}
      <StatsGrid>
        <StatCard
          color={gradients.success}
          iconColor={colors.success}
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.1 }}
        >
          <div className="stat-header">
            <TrendingUp size={20} />
            <h3>Total Income</h3>
          </div>
          <div className="stat-value">${stats.totalIncome.toLocaleString()}</div>
          <div className={`stat-change ${stats.incomeChange >= 0 ? 'positive' : 'negative'}`}>
            {stats.incomeChange >= 0 ? <TrendingUp size={16} /> : <TrendingDown size={16} />}
            {Math.abs(stats.incomeChange).toFixed(1)}% from last month
          </div>
        </StatCard>

        <StatCard
          color={gradients.error}
          iconColor={colors.error}
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.2 }}
        >
          <div className="stat-header">
            <TrendingDown size={20} />
            <h3>Total Expenses</h3>
          </div>
          <div className="stat-value">${stats.totalExpenses.toLocaleString()}</div>
          <div className={`stat-change ${stats.expenseChange <= 0 ? 'positive' : 'negative'}`}>
            {stats.expenseChange <= 0 ? <TrendingDown size={16} /> : <TrendingUp size={16} />}
            {Math.abs(stats.expenseChange).toFixed(1)}% from last month
          </div>
        </StatCard>

        <StatCard
          color={stats.netBalance >= 0 ? gradients.success : gradients.error}
          iconColor={stats.netBalance >= 0 ? colors.success : colors.error}
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.3 }}
        >
          <div className="stat-header">
            <DollarSign size={20} />
            <h3>Net Balance</h3>
          </div>
          <div className="stat-value">${stats.netBalance.toLocaleString()}</div>
          <div className={`stat-change ${stats.balanceChange >= 0 ? 'positive' : 'negative'}`}>
            {stats.balanceChange >= 0 ? <TrendingUp size={16} /> : <TrendingDown size={16} />}
            {Math.abs(stats.balanceChange).toFixed(1)}% from last month
          </div>
        </StatCard>

        <StatCard
          color={gradients.primary}
          iconColor={colors.primary}
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.4 }}
        >
          <div className="stat-header">
            <BarChart3 size={20} />
            <h3>Avg Transaction</h3>
          </div>
          <div className="stat-value">${stats.avgTransaction.toLocaleString()}</div>
          <div className="stat-change positive">
            <Calendar size={16} />
            {stats.transactionCount} transactions
          </div>
        </StatCard>
      </StatsGrid>

      {/* Filters */}
      <FilterSection
        initial={{ opacity: 0, y: 30 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.5 }}
      >
        <div className="filter-header">
          <Filter size={20} />
          <h3>Filters & Controls</h3>
        </div>

        <FiltersGrid>
          <FilterSelect 
            value={filters.type} 
            onChange={(e) => handleFilterChange('type', e.target.value)}
          >
            <option value="ALL">All Types</option>
            <option value="DEPOSIT">Deposits</option>
            <option value="WITHDRAW">Withdrawals</option>
            <option value="TRANSFER">Transfers</option>
            <option value="LOAN">Loans</option>
          </FilterSelect>

          <FilterSelect 
            value={filters.status} 
            onChange={(e) => handleFilterChange('status', e.target.value)}
          >
            <option value="ALL">All Status</option>
            <option value="SUCCESS">Success</option>
            <option value="PENDING">Pending</option>
            <option value="FAILED">Failed</option>
          </FilterSelect>

          <FilterSelect 
            value={filters.category} 
            onChange={(e) => handleFilterChange('category', e.target.value)}
          >
            <option value="ALL">All Categories</option>
            <option value="Food & Dining">Food & Dining</option>
            <option value="Shopping">Shopping</option>
            <option value="Transportation">Transportation</option>
            <option value="Entertainment">Entertainment</option>
            <option value="Bills & Utilities">Bills & Utilities</option>
            <option value="Healthcare">Healthcare</option>
            <option value="Travel">Travel</option>
            <option value="Education">Education</option>
          </FilterSelect>

          <DateInput
            type="date"
            placeholder="From Date"
            value={filters.dateFrom}
            onChange={(e) => handleFilterChange('dateFrom', e.target.value)}
          />

          <DateInput
            type="date"
            placeholder="To Date"
            value={filters.dateTo}
            onChange={(e) => handleFilterChange('dateTo', e.target.value)}
          />

          <AmountRangeContainer>
            <input
              type="number"
              placeholder="Min Amount"
              value={filters.amountMin}
              onChange={(e) => handleFilterChange('amountMin', e.target.value)}
            />
            <span>-</span>
            <input
              type="number"
              placeholder="Max Amount"
              value={filters.amountMax}
              onChange={(e) => handleFilterChange('amountMax', e.target.value)}
            />
          </AmountRangeContainer>
        </FiltersGrid>

        <ButtonGroup>
          <Button onClick={resetFilters}>
            <X size={16} />
            Clear Filters
          </Button>
          <Button onClick={refreshData}>
            <RefreshCw size={16} />
            Refresh Data
          </Button>
          <Button variant="primary" onClick={exportData}>
            <Download size={16} />
            Export Data
          </Button>
        </ButtonGroup>
      </FilterSection>

      {/* Charts */}
      <ChartsGrid>
        {/* Time Series Chart */}
        <ChartContainer
          fullWidth
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.6 }}
        >
          <div className="chart-header">
            <h3>Financial Flow Over Time</h3>
            <div className="chart-controls">
              <ToggleButton
                active={chartView.timeChart === 'line'}
                onClick={() => setChartView(prev => ({...prev, timeChart: 'line'}))}
              >
                Line
              </ToggleButton>
              <ToggleButton
                active={chartView.timeChart === 'area'}
                onClick={() => setChartView(prev => ({...prev, timeChart: 'area'}))}
              >
                Area
              </ToggleButton>
              <ToggleButton
                active={chartView.showBalance}
                onClick={() => setChartView(prev => ({...prev, showBalance: !prev.showBalance}))}
              >
                {chartView.showBalance ? <Eye size={14} /> : <EyeOff size={14} />}
                Balance
              </ToggleButton>
            </div>
          </div>
          <div className="chart-wrapper">
            <ResponsiveContainer width="100%" height="100%">
              {chartView.timeChart === 'line' ? (
                <LineChart data={timeSeriesData}>
                  <CartesianGrid strokeDasharray="3 3" stroke={colors.border} />
                  <XAxis dataKey="date" stroke={colors.textMuted} />
                  <YAxis stroke={colors.textMuted} />
                  <Tooltip content={<CustomTooltip />} />
                  <Legend />
                  <Line 
                    type="monotone" 
                    dataKey="income" 
                    stroke={colors.success} 
                    strokeWidth={3}
                    dot={{ fill: colors.success, strokeWidth: 2, r: 4 }}
                    name="Income"
                  />
                  <Line 
                    type="monotone" 
                    dataKey="expenses" 
                    stroke={colors.error} 
                    strokeWidth={3}
                    dot={{ fill: colors.error, strokeWidth: 2, r: 4 }}
                    name="Expenses"
                  />
                  {chartView.showBalance && (
                    <Line 
                      type="monotone" 
                      dataKey="balance" 
                      stroke={colors.primary} 
                      strokeWidth={3}
                      dot={{ fill: colors.primary, strokeWidth: 2, r: 4 }}
                      name="Running Balance"
                    />
                  )}
                </LineChart>
              ) : (
                <AreaChart data={timeSeriesData}>
                  <CartesianGrid strokeDasharray="3 3" stroke={colors.border} />
                  <XAxis dataKey="date" stroke={colors.textMuted} />
                  <YAxis stroke={colors.textMuted} />
                  <Tooltip content={<CustomTooltip />} />
                  <Legend />
                  <Area 
                    type="monotone" 
                    dataKey="income" 
                    stackId="1"
                    stroke={colors.success} 
                    fill={colors.success}
                    fillOpacity={0.6}
                    name="Income"
                  />
                  <Area 
                    type="monotone" 
                    dataKey="expenses" 
                    stackId="2"
                    stroke={colors.error} 
                    fill={colors.error}
                    fillOpacity={0.6}
                    name="Expenses"
                  />
                  {chartView.showBalance && (
                    <Area 
                      type="monotone" 
                      dataKey="balance" 
                      stroke={colors.primary} 
                      fill={colors.primary}
                      fillOpacity={0.3}
                      name="Running Balance"
                    />
                  )}
                </AreaChart>
              )}
            </ResponsiveContainer>
          </div>
        </ChartContainer>

        {/* Category Breakdown */}
        <ChartContainer
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.7 }}
        >
          <div className="chart-header">
            <h3>Expenses by Category</h3>
          </div>
          <div className="chart-wrapper">
            <ResponsiveContainer width="100%" height="100%">
              <RechartsPieChart>
                <Pie
                  data={categoryData}
                  cx="50%"
                  cy="50%"
                  innerRadius={60}
                  outerRadius={100}
                  paddingAngle={5}
                  dataKey="value"
                >
                  {categoryData.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={pieColors[index % pieColors.length]} />
                  ))}
                </Pie>
                <Tooltip content={<CustomTooltip />} />
                <Legend />
              </RechartsPieChart>
            </ResponsiveContainer>
          </div>
        </ChartContainer>

        {/* Transaction Types */}
        <ChartContainer
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.8 }}
        >
          <div className="chart-header">
            <h3>Transaction Types</h3>
          </div>
          <div className="chart-wrapper">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart data={typeData}>
                <CartesianGrid strokeDasharray="3 3" stroke={colors.border} />
                <XAxis dataKey="name" stroke={colors.textMuted} />
                <YAxis stroke={colors.textMuted} />
                <Tooltip content={<CustomTooltip />} />
                <Bar dataKey="value" fill={colors.primary} radius={[8, 8, 0, 0]} />
              </BarChart>
            </ResponsiveContainer>
          </div>
        </ChartContainer>
      </ChartsGrid>

      {/* Recent Transactions Table */}
      <ChartContainer
        initial={{ opacity: 0, y: 30 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.9 }}
      >
        <div className="chart-header">
          <h3>Recent Transactions</h3>
          <div className="chart-controls">
            <span style={{ fontSize: '14px', color: colors.textMuted }}>
              Showing {Math.min(10, filteredTransactions.length)} of {filteredTransactions.length} transactions
            </span>
          </div>
        </div>

        <div style={{ overflowX: 'auto' }}>
          <table style={{ width: '100%', borderCollapse: 'separate', borderSpacing: 0 }}>
            <thead>
              <tr style={{ background: gradients.primary }}>
                <th style={{ padding: spacing.lg, color: 'white', fontWeight: '600', fontSize: '14px', textAlign: 'left' }}>Date</th>
                <th style={{ padding: spacing.lg, color: 'white', fontWeight: '600', fontSize: '14px', textAlign: 'left' }}>Description</th>
                <th style={{ padding: spacing.lg, color: 'white', fontWeight: '600', fontSize: '14px', textAlign: 'left' }}>Category</th>
                <th style={{ padding: spacing.lg, color: 'white', fontWeight: '600', fontSize: '14px', textAlign: 'left' }}>Type</th>
                <th style={{ padding: spacing.lg, color: 'white', fontWeight: '600', fontSize: '14px', textAlign: 'left' }}>Status</th>
                <th style={{ padding: spacing.lg, color: 'white', fontWeight: '600', fontSize: '14px', textAlign: 'right' }}>Amount</th>
              </tr>
            </thead>
            <tbody>
              {filteredTransactions.slice(0, 10).map((transaction, index) => (
                <tr 
                  key={transaction.id}
                  style={{ 
                    background: index % 2 === 0 ? 'rgba(248, 250, 252, 0.5)' : 'transparent',
                    borderBottom: '1px solid rgba(226, 232, 240, 0.5)'
                  }}
                >
                  <td style={{ padding: spacing.lg, color: colors.textSecondary, fontWeight: '500' }}>
                    {new Date(transaction.date).toLocaleDateString()}
                  </td>
                  <td style={{ padding: spacing.lg, color: colors.text, fontWeight: '600' }}>
                    {transaction.description}
                  </td>
                  <td style={{ padding: spacing.lg, color: colors.textSecondary }}>
                    {transaction.category}
                  </td>
                  <td style={{ padding: spacing.lg }}>
                    <TypeBadge type={transaction.type}>
                      {transaction.type}
                    </TypeBadge>
                  </td>
                  <td style={{ padding: spacing.lg }}>
                    <StatusBadge status={transaction.status}>
                      {transaction.status}
                    </StatusBadge>
                  </td>
                  <td style={{ 
                    padding: spacing.lg, 
                    textAlign: 'right', 
                    fontWeight: '700',
                    color: transaction.amount > 0 ? colors.success : colors.error
                  }}>
                    {transaction.amount > 0 ? '+' : ''}${transaction.amount.toLocaleString()}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </ChartContainer>
    </Container>
  );
};

// Styled badge components
const StatusBadge = styled.span`
  padding: 6px ${spacing.md};
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;

  ${props => props.status === 'SUCCESS' && `
    background: linear-gradient(135deg, rgba(72, 187, 120, 0.2), rgba(56, 178, 172, 0.2));
    color: ${colors.success};
    border: 1px solid rgba(72, 187, 120, 0.3);
  `}

  ${props => props.status === 'PENDING' && `
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.2), rgba(255, 152, 0, 0.2));
    color: ${colors.warning};
    border: 1px solid rgba(255, 193, 7, 0.3);
  `}

  ${props => props.status === 'FAILED' && `
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.2), rgba(238, 90, 82, 0.2));
    color: ${colors.error};
    border: 1px solid rgba(255, 107, 107, 0.3);
  `}
`;

const TypeBadge = styled.span`
  padding: 6px ${spacing.md};
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;

  ${props => props.type === 'DEPOSIT' && `
    background: linear-gradient(135deg, rgba(72, 187, 120, 0.2), rgba(56, 178, 172, 0.2));
    color: ${colors.success};
    border: 1px solid rgba(72, 187, 120, 0.3);
  `}

  ${props => props.type === 'WITHDRAW' && `
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.2), rgba(238, 90, 82, 0.2));
    color: ${colors.error};
    border: 1px solid rgba(255, 107, 107, 0.3);
  `}

  ${props => props.type === 'TRANSFER' && `
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
    color: ${colors.primary};
    border: 1px solid rgba(102, 126, 234, 0.3);
  `}

  ${props => props.type === 'LOAN' && `
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.2), rgba(255, 152, 0, 0.2));
    color: ${colors.warning};
    border: 1px solid rgba(255, 193, 7, 0.3);
  `}
`;

export default BankingAnalyticsDashboard

mvt-redesigned

Nebula — Mon, 30 Jun 2025 11:55:34 +0000

import React, { useState, useEffect, useCallback } from 'react';
import { useUnleashContext, useUnleashClient } from '@unleash/proxy-client-react';
import styled, { keyframes } from 'styled-components';

// --- Simple Animations ---
const fadeIn = keyframes`
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
`;

const spin = keyframes`
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
`;

// --- Layout Components ---
const Container = styled.div`
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  padding: 2rem 1rem;
`;

const MainContent = styled.div`
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
`;

const Card = styled.div`
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  animation: ${fadeIn} 0.6s ease-out;
`;

// --- Header Components ---
const Header = styled.div`
  text-align: center;
  margin-bottom: 1rem;
`;

const Title = styled.h1`
  font-size: 2.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
`;

const Subtitle = styled.p`
  font-size: 1.1rem;
  color: #64748b;
  font-weight: 400;
`;

// --- Form Components ---
const ConfigSection = styled.div`
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: end;

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
`;

const InputGroup = styled.div`
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
`;

const Label = styled.label`
  font-size: 0.9rem;
  font-weight: 600;
  color: #374151;
`;

const Input = styled.input`
  padding: 0.875rem 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  font-size: 1rem;
  transition: all 0.2s ease;
  background: white;

  &:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  }
`;

const Button = styled.button`
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);

  &:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
  }

  &:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
  }
`;

const Spinner = styled.div`
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: ${spin} 1s linear infinite;
`;

// --- Status Components ---
const StatusBanner = styled.div`
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
  padding: 1rem 1.5rem;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  animation: ${fadeIn} 0.3s ease-out;
`;

const StatusSpinner = styled(Spinner)`
  border-color: rgba(255, 255, 255, 0.3);
  border-top-color: white;
`;

// --- Stats Components ---
const StatsGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
`;

const StatCard = styled(Card)`
  text-align: center;
  padding: 1.5rem;
  background: linear-gradient(135deg, #f8fafc, #e2e8f0);
`;

const StatValue = styled.div`
  font-size: 2.5rem;
  font-weight: 800;
  color: ${props => props.color || '#1e293b'};
  margin-bottom: 0.5rem;
`;

const StatLabel = styled.div`
  font-size: 0.9rem;
  color: #64748b;
  font-weight: 500;
`;

// --- Variant Display Components ---
const VariantGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
`;

const VariantCard = styled.div`
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  border-radius: 16px;
  padding: 1.5rem;
  text-align: center;
  border: 2px solid rgba(255, 255, 255, 0.5);
`;

const VariantName = styled.h4`
  font-size: 1.1rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 1rem;
`;

const SimulatedButton = styled.button`
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  font-weight: 600;
  color: white;
  background: ${props => props.color || '#3b82f6'};
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease;

  &:hover {
    transform: scale(1.05);
  }
`;

const VariantDescription = styled.p`
  font-size: 0.85rem;
  color: #64748b;
  margin-top: 0.75rem;
`;

// --- Progress Components ---
const ProgressContainer = styled.div`
  margin: 1.5rem 0;
`;

const ProgressBar = styled.div`
  width: 100%;
  height: 8px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
`;

const ProgressSegment = styled.div`
  height: 100%;
  background: ${props => props.color || '#3b82f6'};
  width: ${props => props.percentage}%;
  transition: width 0.5s ease;
`;

const ProgressLabels = styled.div`
  display: flex;
  justify-content: space-between;
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: #64748b;
`;

// --- Table Components ---
const TableContainer = styled.div`
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
`;

const Table = styled.table`
  width: 100%;
  border-collapse: collapse;
  background: white;
`;

const TableHeader = styled.th`
  padding: 1rem 1.5rem;
  text-align: left;
  background: #f8fafc;
  font-weight: 600;
  color: #374151;
  font-size: 0.875rem;
  border-bottom: 1px solid #e5e7eb;
`;

const TableRow = styled.tr`
  &:nth-child(even) {
    background: #f9fafb;
  }

  &:hover {
    background: #f3f4f6;
  }
`;

const TableCell = styled.td`
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #e5e7eb;
  font-size: 0.9rem;
  color: #374151;
`;

// --- User Display Components ---
const UserInfo = styled.div`
  display: flex;
  align-items: center;
  gap: 0.75rem;
`;

const UserAvatar = styled.div`
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 0.85rem;
`;

const UserDetails = styled.div``;

const UserName = styled.div`
  font-weight: 500;
  color: #1f2937;
`;

const UserEmail = styled.div`
  font-size: 0.8rem;
  color: #6b7280;
`;

// --- Badge Components ---
const Badge = styled.span`
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  background: ${props => {
    switch (props.type) {
      case 'Premium': return 'linear-gradient(135deg, #fbbf24, #f59e0b)';
      case 'Gold': return 'linear-gradient(135deg, #3b82f6, #1d4ed8)';
      case 'Standard': return 'linear-gradient(135deg, #8b5cf6, #7c3aed)';
      default: return '#e5e7eb';
    }
  }};
  color: ${props => props.type ? 'white' : '#374151'};
`;

const StatusBadge = styled.span`
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  background: ${props => {
    switch (props.type) {
      case 'enabled': return 'linear-gradient(135deg, #10b981, #059669)';
      case 'disabled': return 'linear-gradient(135deg, #ef4444, #dc2626)';
      case 'error': return 'linear-gradient(135deg, #ef4444, #dc2626)';
      default: return '#e5e7eb';
    }
  }};
  color: ${props => props.type ? 'white' : '#374151'};
`;

// --- Empty State Components ---
const EmptyState = styled(Card)`
  text-align: center;
  padding: 3rem 2rem;
`;

const EmptyIcon = styled.div`
  font-size: 4rem;
  margin-bottom: 1rem;
`;

const EmptyTitle = styled.h3`
  font-size: 1.5rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 0.5rem;
`;

const EmptyText = styled.p`
  color: #6b7280;
  margin-bottom: 1rem;
`;

const EmptyNote = styled.p`
  font-size: 0.85rem;
  color: #9ca3af;
  font-style: italic;
`;

const SectionTitle = styled.h2`
  font-size: 1.5rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 1rem;
`;

// --- Helper Functions ---
const generateRandomId = () => {
  return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
};

const generateDummyUsers = (count = 100) => {
  return Array.from({ length: count }, (_, i) => ({
    id: generateRandomId(),
    name: `Test User ${i + 1}`,
    email: `user${i + 1}@example.com`,
    accountType: i % 3 === 0 ? 'Premium' : i % 2 === 0 ? 'Gold' : 'Standard',
  }));
};

// --- Main Component ---
const ABTestSimulator = () => {
  const [testResults, setTestResults] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [currentTestingUser, setCurrentTestingUser] = useState('');
  const [featureFlagName, setFeatureFlagName] = useState('ab-test-variant-feature');
  const updateContext = useUnleashContext();
  const unleashClient = useUnleashClient();

  const expectedVariants = [
    { name: 'control-cta', buttonText: 'Learn More', buttonColor: '#3b82f6', description: 'Standard blue button' },
    { name: 'variant-a-cta', buttonText: 'Discover Now', buttonColor: '#10b981', description: 'Green button for discovery' },
    { name: 'variant-b-cta', buttonText: 'Explore Features', buttonColor: '#ef4444', description: 'Red button to explore' },
  ];

  const dummyUsers = generateDummyUsers(100);

  const runABCTest = useCallback(async () => {
    setIsLoading(true);
    setTestResults([]);
    const results = [];

    for (let i = 0; i < dummyUsers.length; i++) {
      const user = dummyUsers[i];
      setCurrentTestingUser(user.name);

      try {
        await updateContext({
          userId: user.id,
        });

        await new Promise((resolve) => setTimeout(resolve, 100));

        const variant = unleashClient.getVariant(featureFlagName);

        results.push({
          ...user,
          variantName: variant.name,
          variantPayload: variant.payload ? JSON.parse(variant.payload.value) : null,
          testTimestamp: new Date().toLocaleTimeString(),
          flagEnabled: variant.enabled,
        });
      } catch (error) {
        console.error(`Error testing user ${user.id}:`, error);
        results.push({
          ...user,
          variantName: 'error',
          variantPayload: null,
          testTimestamp: new Date().toLocaleTimeString(),
          flagEnabled: false,
          error: true,
        });
      }
    }

    setTestResults(results);
    setCurrentTestingUser('');
    setIsLoading(false);
  }, [dummyUsers, featureFlagName, updateContext, unleashClient]);

  const calculateStats = useCallback(() => {
    if (testResults.length === 0) {
      return {
        total: 0,
        variants: expectedVariants.map(v => ({
          name: v.name,
          count: 0,
          percentage: 0,
          color: v.buttonColor,
          buttonText: v.buttonText,
        })),
        totalEnabled: 0,
        totalEnabledPercentage: 0,
      };
    }

    const variantCounts = {};
    let totalEnabled = 0;

    testResults.forEach((result) => {
      if (result.flagEnabled) {
        totalEnabled++;
        variantCounts[result.variantName] = (variantCounts[result.variantName] || 0) + 1;
      }
    });

    const stats = expectedVariants.map(v => {
      const count = variantCounts[v.name] || 0;
      const percentage = totalEnabled > 0 ? Math.round((count / totalEnabled) * 100) : 0;
      return {
        name: v.name,
        count,
        percentage,
        color: v.buttonColor,
        buttonText: v.buttonText,
      };
    });

    return {
      total: testResults.length,
      variants: stats,
      totalEnabled: totalEnabled,
      totalEnabledPercentage: testResults.length > 0 ? Math.round((totalEnabled / testResults.length) * 100) : 0,
    };
  }, [testResults, expectedVariants]);

  const stats = calculateStats();

  return (
    <Container>
      <MainContent>
        {/* Header */}
        <Card>
          <Header>
            <Title>✨ Unleash A/B/C Test Simulator</Title>
            <Subtitle>
              Simulate multivariate testing with real Unleash flag variants and observe distribution.
            </Subtitle>
          </Header>
        </Card>

        {/* Configuration */}
        <Card>
          <SectionTitle>Configuration</SectionTitle>
          <ConfigSection>
            <InputGroup>
              <Label htmlFor="flagName">Feature Flag Name</Label>
              <Input
                id="flagName"
                type="text"
                value={featureFlagName}
                onChange={(e) => setFeatureFlagName(e.target.value)}
                placeholder="e.g., ab-test-variant-feature"
              />
            </InputGroup>
            <Button onClick={runABCTest} disabled={isLoading}>
              {isLoading ? (
                <>
                  <Spinner />
                  Testing...
                </>
              ) : (
                <>🚀 Start A/B/C Test ({dummyUsers.length} Users)</>
              )}
            </Button>
          </ConfigSection>
        </Card>

        {/* Status */}
        {isLoading && (
          <StatusBanner>
            <StatusSpinner />
            <span>Currently testing: {currentTestingUser}</span>
          </StatusBanner>
        )}

        {/* Variant Preview */}
        <Card>
          <SectionTitle>Simulated Variant Preview</SectionTitle>
          <p style={{ color: '#64748b', fontSize: '0.9rem', marginBottom: '1rem' }}>
            These are the expected UI variations based on the payload configured in Unleash.
          </p>
          <VariantGrid>
            {expectedVariants.map((variant) => (
              <VariantCard key={variant.name}>
                <VariantName>{variant.name}</VariantName>
                <SimulatedButton color={variant.buttonColor}>
                  {variant.buttonText}
                </SimulatedButton>
                <VariantDescription>{variant.description}</VariantDescription>
              </VariantCard>
            ))}
          </VariantGrid>
        </Card>

        {/* Statistics */}
        {testResults.length > 0 && (
          <>
            <StatsGrid>
              <StatCard>
                <StatValue color="#3b82f6">{stats.total}</StatValue>
                <StatLabel>Total Users Tested</StatLabel>
              </StatCard>
              <StatCard>
                <StatValue color="#10b981">{stats.totalEnabled}</StatValue>
                <StatLabel>Flag Enabled Users</StatLabel>
              </StatCard>
              <StatCard>
                <StatValue color="#8b5cf6">{stats.totalEnabledPercentage}%</StatValue>
                <StatLabel>Total Rollout Percentage</StatLabel>
              </StatCard>
            </StatsGrid>

            <Card>
              <SectionTitle>Variant Distribution</SectionTitle>
              <ProgressContainer>
                <ProgressBar>
                  {stats.variants.map((variantStat) => (
                    <ProgressSegment
                      key={variantStat.name}
                      percentage={variantStat.percentage}
                      color={variantStat.color}
                    />
                  ))}
                </ProgressBar>
                <ProgressLabels>
                  {stats.variants.map((variantStat) => (
                    <span key={`label-${variantStat.name}`} style={{ color: variantStat.color }}>
                      {variantStat.name} ({variantStat.count})
                    </span>
                  ))}
                </ProgressLabels>
              </ProgressContainer>
            </Card>
          </>
        )}

        {/* Results Table */}
        {testResults.length > 0 && (
          <Card style={{ padding: 0 }}>
            <div style={{ padding: '2rem 2rem 1rem' }}>
              <SectionTitle style={{ margin: 0 }}>Detailed Test Results</SectionTitle>
            </div>
            <TableContainer>
              <Table>
                <thead>
                  <tr>
                    <TableHeader>User</TableHeader>
                    <TableHeader>Account Type</TableHeader>
                    <TableHeader>Assigned Variant</TableHeader>
                    <TableHeader>Flag Enabled</TableHeader>
                    <TableHeader>Test Time</TableHeader>
                  </tr>
                </thead>
                <tbody>
                  {testResults.map((result) => (
                    <TableRow key={result.id}>
                      <TableCell>
                        <UserInfo>
                          <UserAvatar>
                            {result.name
                              .split(' ')
                              .map((n) => n[0])
                              .join('')
                              .slice(0, 2)}
                          </UserAvatar>
                          <UserDetails>
                            <UserName>{result.name}</UserName>
                            <UserEmail>{result.email}</UserEmail>
                          </UserDetails>
                        </UserInfo>
                      </TableCell>
                      <TableCell>
                        <Badge type={result.accountType}>
                          {result.accountType}
                        </Badge>
                      </TableCell>
                      <TableCell>
                        {result.error ? (
                          <StatusBadge type="error">❌ Error</StatusBadge>
                        ) : result.flagEnabled ? (
                          <StatusBadge type="enabled">{result.variantName}</StatusBadge>
                        ) : (
                          <StatusBadge type="disabled">N/A (Disabled)</StatusBadge>
                        )}
                      </TableCell>
                      <TableCell>
                        {result.error ? (
                          <StatusBadge type="error">❌ No</StatusBadge>
                        ) : result.flagEnabled ? (
                          <StatusBadge type="enabled">✅ Yes</StatusBadge>
                        ) : (
                          <StatusBadge type="disabled">❌ No</StatusBadge>
                        )}
                      </TableCell>
                      <TableCell>{result.testTimestamp}</TableCell>
                    </TableRow>
                  ))}
                </tbody>
              </Table>
            </TableContainer>
          </Card>
        )}

        {/* Empty State */}
        {testResults.length === 0 && !isLoading && (
          <EmptyState>
            <EmptyIcon>📊</EmptyIcon>
            <EmptyTitle>Ready to Simulate A/B/C Tests</EmptyTitle>
            <EmptyText>
              Enter your feature flag name and click "Start Test" to see how Unleash distributes users across variants.
            </EmptyText>
            <EmptyNote>
              Ensure your flag "{featureFlagName}" is configured in Unleash with at least three variants and a gradual rollout strategy.
            </EmptyNote>
          </EmptyState>
        )}
      </MainContent>
    </Container>
  );
};

export default ABTestSimulator;

mvt-testing

Nebula — Sun, 29 Jun 2025 15:13:39 +0000

import React, { useState, useEffect, useCallback } from 'react';
import { useUnleashContext, useUnleashClient } from '@unleash/proxy-client-react';
import styled, { keyframes, css } from 'styled-components';

// --- Styled Components ---

const fadeIn = keyframes`
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
`;

const spin = keyframes`
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
`;

const Container = styled.div`
  font-family: 'Inter', sans-serif;
  background-color: #f8fafc; /* Tailwind gray-50 */
  min-height: 100vh;
  padding: 2rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
`;

const MaxWidthWrapper = styled.div`
  max-width: 960px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
`;

const Card = styled.div`
  background-color: white;
  border-radius: 0.75rem; /* rounded-xl */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-xl */
  padding: 1.5rem;
  border: 1px solid #e2e8f0; /* border-gray-200 */
`;

const Header = styled.div`
  text-align: center;
  margin-bottom: 1rem;
`;

const Title = styled.h1`
  font-size: 2.25rem; /* text-4xl */
  font-weight: 700; /* font-bold */
  color: #1a202c; /* gray-900 */
  margin-bottom: 0.5rem;
`;

const Subtitle = styled.p`
  font-size: 1.125rem; /* text-lg */
  color: #4a5568; /* gray-600 */
`;

const SectionTitle = styled.h2`
  font-size: 1.5rem; /* text-2xl */
  font-weight: 600; /* font-semibold */
  color: #2d3748; /* gray-800 */
  margin-bottom: 1rem;
`;

const ConfigPanel = styled.div`
  display: flex;
  flex-direction: column;
  gap: 1rem;
  @media (min-width: 640px) { /* sm */
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
`;

const InputGroup = styled.div`
  flex-grow: 1;
`;

const Label = styled.label`
  display: block;
  font-size: 0.875rem; /* text-sm */
  font-weight: 500; /* font-medium */
  color: #2d3748; /* gray-700 */
  margin-bottom: 0.5rem;
`;

const Input = styled.input`
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #cbd5e0; /* border-gray-300 */
  border-radius: 0.5rem; /* rounded-lg */
  font-size: 1rem;
  color: #2d3748;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  &:focus {
    outline: none;
    border-color: #3b82f6; /* blue-500 */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); /* ring-blue-300 */
  }
`;

const Button = styled.button`
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background-color: #3b82f6; /* blue-500 */
  color: white;
  font-weight: 600; /* font-semibold */
  border-radius: 0.5rem; /* rounded-lg */
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */

  &:hover {
    background-color: #2563eb; /* blue-600 */
    box-shadow: 0 6px 8px -1px rgba(0, 0, 0, 0.15), 0 4px 6px -2px rgba(0, 0, 0, 0.08);
  }

  &:disabled {
    background-color: #9ca3af; /* gray-400 */
    cursor: not-allowed;
    box-shadow: none;
  }
`;

const Spinner = styled.div`
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid white;
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  animation: ${spin} 1s linear infinite;
`;

const StatusBanner = styled.div`
  background-color: #eff6ff; /* blue-50 */
  border: 1px solid #bfdbfe; /* blue-200 */
  color: #1e40af; /* blue-800 */
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ${fadeIn} 0.5s ease-out;
`;

const StatusContent = styled.div`
  display: flex;
  align-items: center;
  gap: 0.75rem;
`;

const StatusSpinner = styled(Spinner)`
  border-color: rgba(30, 64, 175, 0.3);
  border-top-color: #1e40af;
  width: 1.25rem;
  height: 1.25rem;
`;

const StatusText = styled.p`
  font-size: 1rem;
  font-weight: 500;
`;

const StatsGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
`;

const StatCard = styled(Card)`
  padding: 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f0f9ff; /* blue-50 */
`;

const StatValue = styled.p`
  font-size: 2.5rem; /* text-5xl */
  font-weight: 700; /* font-bold */
  color: ${(props) => props.color || '#1a202c'};
  line-height: 1;
  margin-bottom: 0.5rem;
`;

const StatLabel = styled.p`
  font-size: 0.875rem; /* text-sm */
  color: #4a5568; /* gray-600 */
  font-weight: 500;
`;

const ProgressSection = styled(Card)`
  padding: 1.5rem;
`;

const ProgressTitle = styled(SectionTitle)`
  margin-bottom: 1.5rem;
  text-align: center;
`;

const ProgressBarContainer = styled.div`
  width: 100%;
  background-color: #e2e8f0; /* gray-200 */
  border-radius: 9999px; /* rounded-full */
  height: 1.5rem;
  overflow: hidden;
  display: flex; /* To allow multiple bars */
`;

const ProgressBarSegment = styled.div`
  height: 100%;
  background-color: ${(props) => props.color || '#3b82f6'};
  width: ${(props) => props.percentage}%;
  transition: width 0.5s ease-out;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 0.875rem;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
`;

const ProgressLabels = styled.div`
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  color: #4a5568;
  margin-top: 0.5rem;
`;

const ProgressCenter = styled.span`
  text-align: center;
  flex-grow: 1;
`;

const ResultsCard = styled(Card)`
  padding: 0; /* Remove padding from card, table will handle it */
  overflow: hidden; /* For rounded corners on table */
`;

const ResultsHeader = styled.div`
  padding: 1.5rem;
  border-bottom: 1px solid #e2e8f0;
`;

const ResultsTitle = styled(SectionTitle)`
  margin-bottom: 0;
`;

const TableContainer = styled.div`
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */
`;

const Table = styled.table`
  width: 100%;
  border-collapse: collapse;
`;

const TableHead = styled.thead`
  background-color: #f8fafc; /* gray-50 */
`;

const TableHeader = styled.th`
  padding: 1rem 1.5rem;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 600;
  color: #4a5568;
  text-transform: uppercase;
  letter-spacing: 0.05em;
`;

const TableRow = styled.tr`
  &:nth-child(even) {
    background-color: #f8fafc; /* gray-50 */
  }
  &:hover {
    background-color: #f0f4f8; /* slightly darker on hover */
  }
`;

const TableCell = styled.td`
  padding: 1rem 1.5rem;
  font-size: 0.9375rem;
  color: #2d3748;
  vertical-align: middle;
`;

const UserInfo = styled.div`
  display: flex;
  align-items: center;
  gap: 0.75rem;
`;

const UserAvatar = styled.div`
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #60a5fa; /* blue-400 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 0.875rem;
`;

const UserInitials = styled.span``;

const UserDetails = styled.div`
  display: flex;
  flex-direction: column;
`;

const UserName = styled.p`
  font-weight: 500;
`;

const UserEmail = styled.p`
  font-size: 0.8125rem; /* text-xs */
  color: #718096; /* gray-500 */
`;

const Badge = styled.span`
  display: inline-flex;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px; /* rounded-full */
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
  ${(props) => {
    switch (props.type) {
      case 'Premium':
        return css`
          background-color: #fef3c7; /* yellow-100 */
          color: #b45309; /* yellow-800 */
        `;
      case 'Gold':
        return css`
          background-color: #dbeafe; /* blue-100 */
          color: #1e40af; /* blue-800 */
        `;
      case 'Standard':
        return css`
          background-color: #e0e7ff; /* indigo-100 */
          color: #4338ca; /* indigo-800 */
        `;
      default:
        return css`
          background-color: #e2e8f0;
          color: #4a5568;
        `;
    }
  }}
`;

const StatusBadge = styled.span`
  display: inline-flex;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  ${(props) => {
    switch (props.type) {
      case 'enabled':
        return css`
          background-color: #dcfce7; /* green-100 */
          color: #16a34a; /* green-700 */
        `;
      case 'disabled':
        return css`
          background-color: #fee2e2; /* red-100 */
          color: #dc2626; /* red-700 */
        `;
      case 'error':
        return css`
          background-color: #fee2e2; /* red-100 */
          color: #dc2626; /* red-700 */
        `;
      default:
        return css`
          background-color: #e2e8f0;
          color: #4a5568;
        `;
    }
  }}
`;

const EmptyState = styled.div`
  text-align: center;
  padding: 3rem 1.5rem;
  background-color: white;
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
  animation: ${fadeIn} 0.5s ease-out;
`;

const EmptyStateIcon = styled.span`
  font-size: 3rem;
  margin-bottom: 1rem;
  display: block;
`;

const EmptyStateTitle = styled.h3`
  font-size: 1.5rem;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 0.5rem;
`;

const EmptyStateText = styled.p`
  font-size: 1rem;
  color: #4a5568;
  margin-bottom: 1rem;
`;

const EmptyStateNote = styled.p`
  font-size: 0.875rem;
  color: #718096;
  font-style: italic;
`;

const VariantDisplaySection = styled(Card)`
  padding: 1.5rem;
`;

const VariantDisplayGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
`;

const VariantCard = styled.div`
  background-color: #f0f9ff; /* blue-50 */
  border: 1px solid #bfdbfe; /* blue-200 */
  border-radius: 0.75rem;
  padding: 1.25rem;
  text-align: center;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
`;

const VariantName = styled.h4`
  font-size: 1.125rem;
  font-weight: 600;
  color: #1e40af; /* blue-800 */
  margin-bottom: 0.75rem;
`;

const SimulatedButton = styled.button`
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  color: white;
  background-color: ${(props) => props.color || '#3b82f6'};
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.25);
  }
`;

const VariantDescription = styled.p`
  font-size: 0.875rem;
  color: #4a5568;
  margin-top: 0.75rem;
`;

// --- Helper Functions ---

const generateRandomId = () => {
  return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
};

const generateDummyUsers = (count = 100) => { // Increased default count for better stats
  return Array.from({ length: count }, (_, i) => ({
    id: generateRandomId(),
    name: `Test User ${i + 1}`,
    email: `user${i + 1}@example.com`,
    accountType: i % 3 === 0 ? 'Premium' : i % 2 === 0 ? 'Gold' : 'Standard',
  }));
};

// --- Main Component ---

const ABTestSimulator = () => {
  const [testResults, setTestResults] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [currentTestingUser, setCurrentTestingUser] = useState('');
  const [featureFlagName, setFeatureFlagName] = useState('ab-test-variant-feature'); // Default flag name
  const updateContext = useUnleashContext();
  const unleashClient = useUnleashClient();

  // Define expected variants for display purposes (these should match Unleash config)
  // In a real app, you might fetch these or have them configured.
  const expectedVariants = [
    { name: 'control-cta', buttonText: 'Learn More', buttonColor: '#2563eb', description: 'Standard blue button' },
    { name: 'variant-a-cta', buttonText: 'Discover Now', buttonColor: '#16a34a', description: 'Green button for discovery' },
    { name: 'variant-b-cta', buttonText: 'Explore Features', buttonColor: '#dc2626', description: 'Red button to explore' },
  ];

  const dummyUsers = generateDummyUsers(100); // Generate 100 dummy users for better distribution

  const runABCTest = useCallback(async () => {
    setIsLoading(true);
    setTestResults([]);
    const results = [];

    for (let i = 0; i < dummyUsers.length; i++) {
      const user = dummyUsers[i];
      setCurrentTestingUser(user.name);

      try {
        // Update context for this user
        await updateContext({
          userId: user.id,
          // You can add other context properties if your Unleash strategies use them
          // e.g., accountType: user.accountType,
        });

        // Small delay to allow context to fully propagate and client to potentially re-evaluate
        // This is more for visual effect in a rapid loop, less for functional necessity with useUnleashClient
        await new Promise((resolve) => setTimeout(resolve, 100));

        // Get the variant for the current user and feature flag
        const variant = unleashClient.getVariant(featureFlagName);

        results.push({
          ...user,
          variantName: variant.name,
          variantPayload: variant.payload ? JSON.parse(variant.payload.value) : null, // Parse payload if it exists
          testTimestamp: new Date().toLocaleTimeString(),
          flagEnabled: variant.enabled, // Track if the flag was enabled for this user
        });
      } catch (error) {
        console.error(`Error testing user ${user.id}:`, error);
        results.push({
          ...user,
          variantName: 'error',
          variantPayload: null,
          testTimestamp: new Date().toLocaleTimeString(),
          flagEnabled: false,
          error: true,
        });
      }
    }

    setTestResults(results);
    setCurrentTestingUser('');
    setIsLoading(false);
  }, [dummyUsers, featureFlagName, updateContext, unleashClient]);

  // Calculate rollout statistics for each variant
  const calculateStats = useCallback(() => {
    if (testResults.length === 0) {
      return {
        total: 0,
        variants: expectedVariants.map(v => ({
          name: v.name,
          count: 0,
          percentage: 0,
          color: v.buttonColor,
          buttonText: v.buttonText,
        })),
        totalEnabled: 0,
        totalEnabledPercentage: 0,
      };
    }

    const variantCounts = {};
    let totalEnabled = 0;

    testResults.forEach((result) => {
      if (result.flagEnabled) { // Only count if the flag was actually enabled for the user
        totalEnabled++;
        variantCounts[result.variantName] = (variantCounts[result.variantName] || 0) + 1;
      }
    });

    const stats = expectedVariants.map(v => {
      const count = variantCounts[v.name] || 0;
      const percentage = totalEnabled > 0 ? Math.round((count / totalEnabled) * 100) : 0;
      return {
        name: v.name,
        count,
        percentage,
        color: v.buttonColor,
        buttonText: v.buttonText,
      };
    });

    return {
      total: testResults.length,
      variants: stats,
      totalEnabled: totalEnabled,
      totalEnabledPercentage: testResults.length > 0 ? Math.round((totalEnabled / testResults.length) * 100) : 0,
    };
  }, [testResults, expectedVariants]);

  const stats = calculateStats();

  return (
    <Container>
      <MaxWidthWrapper>
        {/* Header */}
        <Card>
          <Header>
            <Title>✨ Unleash A/B/C Test Simulator</Title>
            <Subtitle>
              Simulate multivariate testing with real Unleash flag variants and observe distribution.
            </Subtitle>
          </Header>
        </Card>

        {/* Configuration Panel */}
        <Card>
          <SectionTitle>Configuration</SectionTitle>
          <ConfigPanel>
            <InputGroup>
              <Label htmlFor="flagName">Feature Flag Name</Label>
              <Input
                id="flagName"
                type="text"
                value={featureFlagName}
                onChange={(e) => setFeatureFlagName(e.target.value)}
                placeholder="e.g., ab-test-variant-feature"
              />
            </InputGroup>
            <Button onClick={runABCTest} disabled={isLoading}>
              {isLoading ? (
                <>
                  <Spinner />
                  Testing...
                </>
              ) : (
                <>🚀 Start A/B/C Test ({dummyUsers.length} Users)</>
              )}
            </Button>
          </ConfigPanel>
        </Card>

        {/* Current Status */}
        {isLoading && (
          <StatusBanner>
            <StatusContent>
              <StatusSpinner />
              <StatusText>Currently testing: {currentTestingUser}</StatusText>
            </StatusContent>
          </StatusBanner>
        )}

        {/* Visual Representation of Variants */}
        <VariantDisplaySection>
          <SectionTitle>Simulated Variant Preview</SectionTitle>
          <p style={{ color: '#4a5568', fontSize: '0.9rem', marginBottom: '1rem' }}>
            These are the expected UI variations based on the payload configured in Unleash.
            Your application would render one of these for each user.
          </p>
          <VariantDisplayGrid>
            {expectedVariants.map((variant) => (
              <VariantCard key={variant.name}>
                <VariantName>{variant.name}</VariantName>
                <SimulatedButton color={variant.buttonColor}>
                  {variant.buttonText}
                </SimulatedButton>
                <VariantDescription>{variant.description}</VariantDescription>
              </VariantCard>
            ))}
          </VariantDisplayGrid>
        </VariantDisplaySection>

        {/* Statistics Dashboard */}
        {testResults.length > 0 && (
          <>
            <StatsGrid>
              <StatCard>
                <StatValue color="#2563eb">{stats.total}</StatValue>
                <StatLabel>Total Users Tested</StatLabel>
              </StatCard>
              <StatCard>
                <StatValue color="#16a34a">{stats.totalEnabled}</StatValue>
                <StatLabel>Flag Enabled Users</StatLabel>
              </StatCard>
              <StatCard>
                <StatValue color="#7c3aed">{stats.totalEnabledPercentage}%</StatValue>
                <StatLabel>Total Rollout Percentage</StatLabel>
              </StatCard>
            </StatsGrid>

            <ProgressSection>
              <ProgressTitle>Variant Distribution</ProgressTitle>
              <ProgressBarContainer>
                {stats.variants.map((variantStat) => (
                  <ProgressBarSegment key={variantStat.name} percentage={variantStat.percentage} color={variantStat.color}>
                    {variantStat.percentage > 0 && `${variantStat.percentage}%`}
                  </ProgressBarSegment>
                ))}
              </ProgressBarContainer>
              <ProgressLabels>
                {stats.variants.map((variantStat) => (
                  <span key={`label-${variantStat.name}`} style={{ flex: 1, textAlign: 'center', color: variantStat.color }}>
                    {variantStat.name} ({variantStat.count})
                  </span>
                ))}
              </ProgressLabels>
            </ProgressSection>
          </>
        )}

        {/* Results Table */}
        {testResults.length > 0 && (
          <ResultsCard>
            <ResultsHeader>
              <ResultsTitle>Detailed Test Results</ResultsTitle>
            </ResultsHeader>
            <TableContainer>
              <Table>
                <TableHead>
                  <tr>
                    <TableHeader>User</TableHeader>
                    <TableHeader>Account Type</TableHeader>
                    <TableHeader>Assigned Variant</TableHeader>
                    <TableHeader>Flag Enabled</TableHeader>
                    <TableHeader>Test Time</TableHeader>
                  </tr>
                </TableHead>
                <tbody>
                  {testResults.map((result, index) => (
                    <TableRow key={result.id}>
                      <TableCell>
                        <UserInfo>
                          <UserAvatar>
                            <UserInitials>
                              {result.name
                                .split(' ')
                                .map((n) => n[0])
                                .join('')
                                .slice(0, 2)}
                            </UserInitials>
                          </UserAvatar>
                          <UserDetails>
                            <UserName>{result.name}</UserName>
                            <UserEmail>{result.email}</UserEmail>
                          </UserDetails>
                        </UserInfo>
                      </TableCell>
                      <TableCell>
                        <Badge type={result.accountType}>
                          {result.accountType}
                        </Badge>
                      </TableCell>
                      <TableCell>
                        {result.error ? (
                          <StatusBadge type="error">❌ Error</StatusBadge>
                        ) : result.flagEnabled ? (
                          <StatusBadge type="enabled">{result.variantName}</StatusBadge>
                        ) : (
                          <StatusBadge type="disabled">N/A (Disabled)</StatusBadge>
                        )}
                      </TableCell>
                      <TableCell>
                        {result.error ? (
                          <StatusBadge type="error">❌ No</StatusBadge>
                        ) : result.flagEnabled ? (
                          <StatusBadge type="enabled">✅ Yes</StatusBadge>
                        ) : (
                          <StatusBadge type="disabled">❌ No</StatusBadge>
                        )}
                      </TableCell>
                      <TableCell>{result.testTimestamp}</TableCell>
                    </TableRow>
                  ))}
                </tbody>
              </Table>
            </TableContainer>
          </ResultsCard>
        )}

        {/* Initial State */}
        {testResults.length === 0 && !isLoading && (
          <EmptyState>
            <EmptyStateIcon>📊</EmptyStateIcon>
            <EmptyStateTitle>Ready to Simulate A/B/C Tests</EmptyStateTitle>
            <EmptyStateText>
              Enter your feature flag name and click "Start Test" to see how Unleash distributes users across variants.
            </EmptyStateText>
            <EmptyStateNote>
              Ensure your flag "{featureFlagName}" is configured in Unleash with at least three variants and a gradual rollout strategy.
            </EmptyStateNote>
          </EmptyState>
        )}
      </MaxWidthWrapper>
    </Container>
  );
};

export default ABTestSimulator;

gradual-rollout

Nebula — Sun, 29 Jun 2025 10:44:58 +0000

Import useUnleashClient:
You need to import the useUnleashClient hook from @unleash/proxy-client-react.

import React, { useState, useEffect } from 'react';
import { useFlag, useUnleashContext, useUnleashClient } from '@unleash/proxy-client-react'; // ADD useUnleashClient here
import styled, { keyframes, css } from 'styled-components';

Get the Unleash Client Instance:
Inside your UnleashRolloutTester component, get the client instance using useUnleashClient().

const UnleashRolloutTester = () => {
  const [testResults, setTestResults] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [currentTestingUser , setCurrentTestingUser ] = useState('');
  const [featureFlagName, setFeatureFlagName] = useState('filtering-feature');
  const updateContext = useUnleashContext();
  const unleashClient = useUnleashClient(); // ADD this line
  const currentFlag = useFlag(featureFlagName); // You can keep this for the initial display/setup, but won't use it in the loop

Modify testMultipleUsers function:
Inside the for loop in testMultipleUsers, you'll use unleashClient.isEnabled() with the dynamically updated context.

const testMultipleUsers = async () => {
  setIsLoading(true);
  setTestResults([]);
  const results = [];

  for (let i = 0; i < dummyUsers.length; i++) {
    const user = dummyUsers[i];
    setCurrentTestingUser(user.name);

    try {
      // Update context for this user
      await updateContext({
        userId: user.id,
        // You can also add custom context properties if your strategies use them:
        // accountType: user.accountType, // Uncomment if you have a strategy based on accountType
      });

      // Small delay to ensure context updates (might not be strictly necessary with await updateContext,
      // but good for ensuring the Unleash client has time to process the context change and fetch flags if needed)
      await new Promise((resolve) => setTimeout(resolve, 300));

      // **THIS IS THE KEY CHANGE:** Use unleashClient.isEnabled() with the current context
      const flagEnabled = unleashClient.isEnabled(featureFlagName); // REAL FLAG CHECK

      results.push({
        ...user,
        flagEnabled: flagEnabled, // Use the actual flagEnabled status
        testTimestamp: new Date().toLocaleTimeString(),
      });
    } catch (error) {
      console.error(`Error testing user ${user.id}:`, error);
      results.push({
        ...user,
        flagEnabled: false,
        error: true,
        testTimestamp: new Date().toLocaleTimeString(),
      });
    }
  }

  setTestResults(results);
  setCurrentTestingUser('');
  setIsLoading(false);
};

profilePage

Nebula — Fri, 27 Jun 2025 05:32:44 +0000

Additional Imports (at the top with other imports)

import { useState } from 'react';
import { FaTimes } from 'react-icons/fa';

New Styled Components (add after the existing styled components)

const ModalOverlay = styled(motion.div)`
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
`;

const ModalContent = styled(motion.div)`
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 32px;
  width: 90%;
  max-width: 1000px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.3);
  position: relative;
`;

const ModalHeader = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid rgba(102, 126, 234, 0.1);

  h3 {
    font-size: 24px;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
  }
`;

const CloseButton = styled(motion.button)`
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
  border: 1px solid rgba(102, 126, 234, 0.2);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #667eea;
  transition: all 0.3s ease;

  &:hover {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    transform: rotate(90deg);
  }
`;

const TransactionTable = styled(motion.table)`
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
`;

const StatusBadge = styled.span`
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;

  ${props => {
    switch (props.status) {
      case 'SUCCESS':
        return `
          background: rgba(34, 197, 94, 0.1);
          color: #059669;
          border: 1px solid rgba(34, 197, 94, 0.2);
        `;
      case 'FAILURE':
        return `
          background: rgba(239, 68, 68, 0.1);
          color: #dc2626;
          border: 1px solid rgba(239, 68, 68, 0.2);
        `;
      case 'PENDING':
        return `
          background: rgba(245, 158, 11, 0.1);
          color: #d97706;
          border: 1px solid rgba(245, 158, 11, 0.2);
        `;
      default:
        return `
          background: rgba(156, 163, 175, 0.1);
          color: #6b7280;
          border: 1px solid rgba(156, 163, 175, 0.2);
        `;
    }
  }}
`;

const TypeBadge = styled.span`
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;

  ${props => {
    switch (props.type) {
      case 'DEPOSIT':
        return `
          background: rgba(34, 197, 94, 0.1);
          color: #059669;
          border: 1px solid rgba(34, 197, 94, 0.2);
        `;
      case 'WITHDRAWAL':
        return `
          background: rgba(239, 68, 68, 0.1);
          color: #dc2626;
          border: 1px solid rgba(239, 68, 68, 0.2);
        `;
      case 'TRANSFER':
        return `
          background: rgba(59, 130, 246, 0.1);
          color: #2563eb;
          border: 1px solid rgba(59, 130, 246, 0.2);
        `;
      case 'LOAN':
        return `
          background: rgba(168, 85, 247, 0.1);
          color: #7c3aed;
          border: 1px solid rgba(168, 85, 247, 0.2);
        `;
      default:
        return `
          background: rgba(156, 163, 175, 0.1);
          color: #6b7280;
          border: 1px solid rgba(156, 163, 175, 0.2);
        `;
    }
  }}
`;

const EmptyState = styled(motion.div)`
  text-align: center;
  padding: 60px 20px;
  color: #6b7280;

  h4 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #374151;
  }

  p {
    font-size: 16px;
    margin: 0;
  }
`;

State Management (add inside the Profile component, after the existing useQuery)

const [selectedAccount, setSelectedAccount] = useState(null);
const [isModalOpen, setIsModalOpen] = useState(false);

const { data: transactions, isLoading: isTransactionsLoading } = useQuery({
  queryKey: ['transactions', selectedAccount],
  queryFn: async () => {
    if (!selectedAccount) return [];
    try {
      const response = await api.get(`/transactions/${selectedAccount}`);
      return response.data.data;
    } catch (error) {
      console.error('Error fetching transactions', error);
      toast.error("Error fetching transactions");
      return [];
    }
  },
  enabled: !!selectedAccount
});

Helper Functions (add inside the Profile component)

const openTransactionModal = (accountNumber) => {
  setSelectedAccount(accountNumber);
  setIsModalOpen(true);
};

const closeTransactionModal = () => {
  setIsModalOpen(false);
  setSelectedAccount(null);
};

const formatTransactionAmount = (amount, type) => {
  const formattedAmount = formatCurrency(amount);
  if (type === 'DEPOSIT') return `+${formattedAmount}`;
  if (type === 'WITHDRAWAL') return `-${formattedAmount}`;
  return formattedAmount;
};

Update the View Transactions Button (replace the existing ActionLink for transactions)

<ActionLink 
  variants={actionLinkVariants} 
  onClick={() => openTransactionModal(account.accountNumber)}
>
  <FaEye /> View Transactions
</ActionLink>

Add the Modal (add this right before the closing tag)

{isModalOpen && (
  <ModalOverlay
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    exit={{ opacity: 0 }}
    onClick={closeTransactionModal}
  >
    <ModalContent
      initial={{ opacity: 0, scale: 0.8, y: 50 }}
      animate={{ opacity: 1, scale: 1, y: 0 }}
      exit={{ opacity: 0, scale: 0.8, y: 50 }}
      onClick={(e) => e.stopPropagation()}
    >
      <ModalHeader>
        <h3>Transaction History - {selectedAccount}</h3>
        <CloseButton
          whileHover={{ scale: 1.1 }}
          whileTap={{ scale: 0.9 }}
          onClick={closeTransactionModal}
        >
          <FaTimes />
        </CloseButton>
      </ModalHeader>

      {isTransactionsLoading ? (
        <div style={{ textAlign: 'center', padding: '40px' }}>
          Loading transactions...
        </div>
      ) : transactions?.length === 0 ? (
        <EmptyState
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
        >
          <h4>No Transactions Found</h4>
          <p>This account has no transaction history yet.</p>
        </EmptyState>
      ) : (
        <TransactionTable
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
        >
          <thead>
            <tr>
              <TableHeader>Date</TableHeader>
              <TableHeader>Type</TableHeader>
              <TableHeader>From Account</TableHeader>
              <TableHeader>To Account</TableHeader>
              <TableHeader>Amount</TableHeader>
              <TableHeader>Description</TableHeader>
              <TableHeader>Status</TableHeader>
            </tr>
          </thead>
          <tbody>
            {transactions?.map((transaction) => (
              <TableRow key={transaction.id}>
                <TableCell>{formatDate(transaction.timestamp)}</TableCell>
                <TableCell>
                  <TypeBadge type={transaction.type}>
                    {transaction.type}
                  </TypeBadge>
                </TableCell>
                <TableCell>
                  {transaction.fromAccount ? (
                    <code style={{
                      background: 'rgba(102,126,234,0.1)',
                      padding: '4px 8px',
                      borderRadius: '6px',
                      fontSize: '12px'
                    }}>
                      {transaction.fromAccount.accountNumber}
                    </code>
                  ) : (
                    <span style={{ color: '#9ca3af', fontStyle: 'italic' }}>
                      External
                    </span>
                  )}
                </TableCell>
                <TableCell>
                  {transaction.toAccount ? (
                    <code style={{
                      background: 'rgba(102,126,234,0.1)',
                      padding: '4px 8px',
                      borderRadius: '6px',
                      fontSize: '12px'
                    }}>
                      {transaction.toAccount.accountNumber}
                    </code>
                  ) : (
                    <span style={{ color: '#9ca3af', fontStyle: 'italic' }}>
                      External
                    </span>
                  )}
                </TableCell>
                <TableCell>
                  <span style={{ 
                    fontWeight: 'bold',
                    color: transaction.type === 'DEPOSIT' ? '#059669' : 
                           transaction.type === 'WITHDRAWAL' ? '#dc2626' : '#374151'
                  }}>
                    {formatTransactionAmount(transaction.amount, transaction.type)}
                  </span>
                </TableCell>
                <TableCell>{transaction.description || 'No description'}</TableCell>
                <TableCell>
                  <StatusBadge status={transaction.status}>
                    {transaction.status}
                  </StatusBadge>
                </TableCell>
              </TableRow>
            ))}
          </tbody>
        </TransactionTable>
      )}
    </ModalContent>
  </ModalOverlay>
)}

<h3>Accounts</h3>
      {
        isLoading ? ( <div>fetching accounts...</div>) : isError ? (<div>
          Error fetching accounts!
        </div> ) : accounts.length === 0 ? <div>
          <p>You dont have any accounts yet. Create your first account</p>
          <CreateButton onClick={() => {
            navigate("/dashboard/open-account")
          }}>Create Account</CreateButton>
        </div> : 

        <Table initial={{opacity: 0, y:30}}
        animate={{
          opacity: 1,
          y:0,
          transition: {
            duration: 0.6,
            ease: 'easeOut',
            staggerChildren: 0.05
          }   
        }}>
          <thead>
            <tr>
              <TableHeader>Sr. No</TableHeader>
              <TableHeader>Account Number</TableHeader>
              <TableHeader>Account Holder Name</TableHeader>
              <TableHeader>Date of Creation</TableHeader>
              <TableHeader>Account Balance</TableHeader>
              <TableHeader>Actions</TableHeader>
            </tr>
          </thead>
          <tbody>
            {accounts?.map((account,idx) => (
              <TableRow key={idx} whileHover="hover" >
                <TableCell>{idx + 1}</TableCell>
                <TableCell>
                <code style={{
                    background: 'rgba(102,126,234,0.1)',
                    padding: '4px 8px',
                    borderRadius: '6px',
                    fontSize: '14px',
                    fontWeight: '600'
                  }}>{account.accountNumber}</code>
                </TableCell>
                <TableCell>{user?.name}</TableCell>
                <TableCell>{formatDate(account.createdAt)}</TableCell>
                <TableCell>
                  <ActionLink href="#view-balance" onClick={() => {
                    toast(`Balance ${formatCurrency(account.balance)}`)
                  }}>View Balance</ActionLink>
                </TableCell>
                <TableCell>
                  <ActionLink variants={actionLinkVariants} href="#view-transactions"><FaEye /> View Transactions</ActionLink>
                </TableCell>
              </TableRow>
            ))}
          </tbody>
        </Table>
      }

frontend4

Nebula — Fri, 27 Jun 2025 05:28:30 +0000

/* eslint-disable react-refresh/only-export-components */
import React, { createContext, useContext, useState, useEffect } from 'react'
import { authService } from '@/services/authService'
import PropTypes from 'prop-types'
import { useMutation } from '@tanstack/react-query'

const AuthContext = createContext(undefined)

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(authService.getUser())
  const [isLoading, setIsLoading] = useState(true)

  // On first load, restore user if present
  useEffect(() => {
    const storedUser = authService.getUser()

    setUser(storedUser)
    setIsLoading(false)
  }, [])

  const loginMutation = useMutation({
    mutationFn: async (credentials) => {
      const userData = await authService.login(credentials)
      setUser(userData)
      return userData
    },
  })

  const logoutMutation = useMutation({
    mutationFn: async () => {
      await authService.logout()
      setUser(null)
    },
  })

  const signupMutation = useMutation({
    mutationFn: async (credentials) => {
      const userData = await authService.signup(credentials)
      setUser(userData)
      return userData
    },
  })

  const changePasswordMutation = useMutation({
    mutationFn: async (data) => {
      return await authService.changePassword(data)
    },
  })

  return (
    <AuthContext.Provider
      value={{
        user: user,
        isAuthenticated: !!user,
        isLoading,
        login: loginMutation.mutateAsync,
        logout: logoutMutation.mutateAsync,
        signup: signupMutation.mutateAsync,
        changePassword: changePasswordMutation.mutateAsync,
        setUser,
      }}
    >
      {children}
    </AuthContext.Provider>
  )
}

AuthProvider.propTypes = {
  children: PropTypes.node.isRequired,
}

export const useAuth = () => {
  const context = useContext(AuthContext)
  if (context === undefined) {
    throw new Error('useAuth must be used within an AuthProvider')
  }
  return context
}

------------------- AUTH SERVICE-------------------------

import api from './api'
import Cookies from 'js-cookie'

const USER_KEY = 'user' // localStorage key for storing user data

export const authService = {
  // Login with email & password
  async login(credentials) {
    try {
      const response = await api.post('/auth/login', credentials, {
        withCredentials: true, // important: to include cookies
      })
      // console.log('Data from backend', response.data.user)
      this.setUser(response.data.user)
      return response.data.user
    } catch (error) {
      const message = error.response?.data?.message || 'Login failed!'
      console.error('Login error:', error)
      throw new Error(message)
    }
  },

  // Signup
  async signup(data) {
    try {
      const response = await api.post('/auth/signup', data, {
        withCredentials: true,
      })
      this.setUser(response.data.user)
      return response.data.user
    } catch (error) {
      const message = error.response?.data?.message || 'Signup failed!'
      console.error('Signup error:', message)
      throw new Error(message)
    }
  },

  // Logout
  async logout() {
    try {
      await api.post('/auth/logout', {}, { withCredentials: true })
      this.clearUser()
    } catch (error) {
      console.error('Logout error:', error.message)
    }
  },

  // Forgot Password
  async forgotPassword(email) {
    try {
      const res = await api.post('/auth/forgot-password', { email })
      return res.data
    } catch (error) {
      const message = error.response?.data?.message || 'Request failed'
      throw new Error(message)
    }
  },

  // Reset Password
  async resetPassword(token, data) {
    try {
      const res = await api.post(`/auth/reset-password/${token}`, data)
      return res.data
    } catch (error) {
      const message = error.response?.data?.message || 'Reset failed'
      throw new Error(message)
    }
  },

  // Change Password (authenticated)
  async changePassword(data) {
    try {
      const res = await api.put('/auth/change-password', data, {
        withCredentials: true,
      })
      return res.data
    } catch (error) {
      const message = error.response?.data?.message || 'Password change failed'
      throw new Error(message)
    }
  },

  // Set user in localStorage
  setUser(userData) {
    localStorage.setItem(USER_KEY, JSON.stringify(userData))
  },

  getUser() {
    const userStr = localStorage.getItem(USER_KEY)
    try {
      return userStr ? JSON.parse(userStr) : null
    } catch (err) {
      console.error('Error parsing user data', err)
      return null
    }
  },

  clearUser() {
    localStorage.removeItem(USER_KEY)
  },

  isAuthenticated() {
    return !!Cookies.get('token') // JWT cookie present?
  },
}

------------------------ API.JS---------------------------

import axios from 'axios'
import Cookies from 'js-cookie'

// const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:4000/api'
const API_URL = import.meta.env.VITE_API_URL || 'https://customerapi.mendt.in/api'

if (!import.meta.env.VITE_API_URL) {
  console.warn('VITE_API_URL is not set, using default API URL.')
}

const api = axios.create({
  baseURL: API_URL,
  withCredentials: true,
  // headers: {
  //   "Content-Type": "application/json",
  // },
})

// Request interceptor for API calls
api.interceptors.request.use(
  (config) => {
    const token = Cookies.get('token')
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

// Response interceptor for API calls
api.interceptors.response.use(
  (response) => {
    return response
  },
  async (error) => {
    const originalRequest = error.config

    // Handle token expiration and refresh logic here if needed
    if (error.response?.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true
      // A  dd logic to refresh the token or redirect to login
    }

    return Promise.reject(error)
  }
)

export default api

---------------------- jsconfig.json-----------------------

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

-------------------------QueryProvider.jsx---------------------

import React from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import PropTypes from "prop-types";

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
      retry: 1,
      staleTime: 1000 * 60 * 5, // 5 minutes
    },
  },
});

export const QueryProvider = ({ children }) => {
  return (
    <QueryClientProvider client={queryClient}>
      {children}
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
};

QueryProvider.propTypes = {
  children: PropTypes.node.isRequired,
};

--------------------------SIGNUP--------------------------------

import React from 'react';
import styled from 'styled-components';
import { motion } from 'framer-motion';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '@/contexts/AuthContext';
import { useForm } from 'react-hook-form';
import toast from 'react-hot-toast';
import { InputGroup } from './Dashboard/CreateAccountStyles';
import { FaSpinner } from 'react-icons/fa';

// Design tokens
const colors = {
  primary: '#667eea',
  primaryDark: '#5a67d8',
  secondary: '#764ba2',
  success: '#48bb78',
  error: '#ff6b6b',
  warning: '#f6ad55',
  text: '#1a202c',
  textSecondary: '#4a5568',
  textMuted: '#a0aec0',
  background: 'rgba(255, 255, 255, 0.95)',
  border: 'rgba(102, 126, 234, 0.2)',
  borderHover: '#667eea',
  glass: 'rgba(255, 255, 255, 0.95)',
  glassLight: 'rgba(255, 255, 255, 0.8)',
  shadow: 'rgba(0, 0, 0, 0.1)',
  shadowHover: 'rgba(102, 126, 234, 0.1)'
};

const gradients = {
  primary: `linear-gradient(135deg, ${colors.primary}, ${colors.secondary})`,
  success: `linear-gradient(135deg, ${colors.success}, #38b2ac)`,
  error: `linear-gradient(135deg, ${colors.error}, #ee5a52)`,
  warning: `linear-gradient(135deg, ${colors.warning}, #ff8c00)`
};

const spacing = {
  xs: '4px',
  sm: '8px',
  md: '12px',
  lg: '16px',
  xl: '20px',
  xxl: '24px',
  xxxl: '32px'
};

// Styled Components
const Container = styled.div`
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: ${spacing.xl};
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
      radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 40% 40%, rgba(120, 119, 198, 0.2) 0%, transparent 50%);
  }
`;

const FormWrapper = styled(motion.div)`
  background: ${colors.glass};
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: ${spacing.xxxl};
  box-shadow: 0 8px 32px ${colors.shadow};
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 450px;
  z-index: 1;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: ${gradients.primary};
  }

  @media (max-width: 768px) {
    padding: ${spacing.xxl};
    max-width: 100%;
  }
`;

const Title = styled.h1`
  font-size: 32px;
  font-weight: 800;
  color: ${colors.text};
  margin-bottom: ${spacing.sm};
  background: ${gradients.primary};
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
  line-height: 1.2;

  @media (max-width: 768px) {
    font-size: 28px;
  }
`;

const Subtitle = styled.p`
  font-size: 16px;
  color: ${colors.textSecondary};
  text-align: center;
  margin-bottom: ${spacing.xxxl};
  font-weight: 500;
  line-height: 1.4;
`;

const Form = styled.form`
  display: flex;
  flex-direction: column;
  gap: ${spacing.lg};
`;

const StyledInputGroup = styled.div`
  display: flex;
  flex-direction: column;
  gap: ${spacing.xs};
`;

const Input = styled.input`
  width: 100%;
  padding: ${spacing.lg} ${spacing.xl};
  border: 2px solid ${props => props.errors ? colors.error : colors.border};
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  color: ${colors.text};
  background: ${colors.glassLight};
  backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;

  &:focus {
    outline: none;
    border-color: ${props => props.errors ? colors.error : colors.borderHover};
    box-shadow: 0 0 0 4px ${props => props.errors ? 'rgba(255, 107, 107, 0.1)' : colors.shadowHover};
    background: ${colors.background};
  }

  &::placeholder {
    color: ${colors.textMuted};
  }

  &:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px ${colors.background} inset;
    -webkit-text-fill-color: ${colors.text};
  }
`;

const ErrorMessage = styled.p`
  color: ${colors.error};
  font-size: 14px;
  margin: 0;
  font-weight: 500;
  margin-top: ${spacing.xs};
`;

const Button = styled(motion.button)`
  width: 100%;
  padding: ${spacing.lg} ${spacing.xl};
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: ${gradients.primary};
  color: white;
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: ${spacing.sm};
  margin-top: ${spacing.md};

  &:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5);
  }

  &:active {
    transform: translateY(0);
  }

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  svg {
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
`;

const LoginText = styled.p`
  text-align: center;
  margin-top: ${spacing.xxxl};
  color: ${colors.textSecondary};
  font-size: 14px;
  font-weight: 500;
`;

const LoginLink = styled.a`
  color: ${colors.primary};
  text-decoration: none;
  font-weight: 600;
  margin-left: ${spacing.xs};
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  &:hover {
    color: ${colors.primaryDark};
    text-decoration: underline;
  }
`;

function Signup() {
  const navigate = useNavigate();
  const { signup } = useAuth();
  const { register, handleSubmit, formState: { errors, isSubmitting } } = useForm();

  const onSubmit = async (data) => {
    try {
      const userData = await signup({
        name: data.name,
        email: data.email,
        password: data.password,
        confirmPassword: data.confirmPassword
      });
      toast.success("Signed up successfully");
      setTimeout(() => {
        navigate("/dashboard/profile");
      }, 1000);
    } catch (error) {
      console.error("Signup error", error);
      toast.error(error.response?.data?.message || error.message || "Signup failed. Please try again!");
    }
  }

  return (
    <Container>
      <FormWrapper
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5, ease: 'easeOut' }}
        aria-label="Signup form"
      >
        <Title>Banking Application</Title>
        <Subtitle>Create Your Account</Subtitle>
        <Form onSubmit={handleSubmit(onSubmit)}>
          <StyledInputGroup>
            <Input
              id="name"
              type="text"
              placeholder="Full Name"
              errors={errors.name}
              {...register('name')}
            />
            {errors.name && (
              <ErrorMessage>
                {errors.name.message}
              </ErrorMessage>
            )}
          </StyledInputGroup>

          <StyledInputGroup>
            <Input
              id="email"
              type="text"
              placeholder="Email"
              errors={errors.email}
              {...register('email')}
            />
            {errors.email && (
              <ErrorMessage>
                {errors.email.message}
              </ErrorMessage>
            )}
          </StyledInputGroup>

          <StyledInputGroup>
            <Input
              type="password"
              id="password"
              placeholder="Password"
              errors={errors.password}
              {...register('password')}
            />
            {errors.password && (
              <ErrorMessage>
                {errors.password.message}
              </ErrorMessage>
            )}
          </StyledInputGroup>

          <StyledInputGroup>
            <Input
              type="password"
              id="confirmPassword"
              placeholder="Confirm Password"
              errors={errors.confirmPassword}
              {...register('confirmPassword')}
            />
            {errors.confirmPassword && (
              <ErrorMessage>
                {errors.confirmPassword.message}
              </ErrorMessage>
            )}
          </StyledInputGroup>

          <Button
            whileHover={{ scale: 1.02 }}
            whileTap={{ scale: 0.98 }}
            type="submit"
            disabled={isSubmitting}
          >
            {isSubmitting ? <FaSpinner /> : "Sign Up"}
          </Button>
        </Form>

        <LoginText>
          Already have an account?
          <LoginLink href="/login"> Log in</LoginLink>
        </LoginText>
      </FormWrapper>
    </Container>
  );
}

export default Signup;

transfer page

Nebula — Wed, 25 Jun 2025 19:21:11 +0000

import { useState, useEffect, useCallback } from "react";
import { Send, RefreshCw, AlertCircle, Filter } from "lucide-react";
import styled from 'styled-components';
import { motion, AnimatePresence } from 'framer-motion';
import toast from 'react-hot-toast';
import ConfirmModal from '@/utils/ConfirmModal';

// Design tokens
const colors = {
  primary: '#667eea',
  primaryDark: '#5a67d8',
  secondary: '#764ba2',
  success: '#48bb78',
  error: '#ff6b6b',
  warning: '#f6ad55',
  text: '#1a202c',
  textSecondary: '#4a5568',
  textMuted: '#a0aec0',
  background: 'rgba(255, 255, 255, 0.95)',
  border: 'rgba(102, 126, 234, 0.2)',
  borderHover: '#667eea',
  glass: 'rgba(255, 255, 255, 0.95)',
  glassLight: 'rgba(255, 255, 255, 0.8)',
  shadow: 'rgba(0, 0, 0, 0.1)',
  shadowHover: 'rgba(102, 126, 234, 0.1)'
};

const gradients = {
  primary: `linear-gradient(135deg, ${colors.primary}, ${colors.secondary})`,
  success: `linear-gradient(135deg, ${colors.success}, #38b2ac)`,
  error: `linear-gradient(135deg, ${colors.error}, #ee5a52)`,
  warning: `linear-gradient(135deg, ${colors.warning}, #ff8c00)`
};

const spacing = {
  xs: '4px',
  sm: '8px',
  md: '12px',
  lg: '16px',
  xl: '20px',
  xxl: '24px',
  xxxl: '32px'
};

// Styled Components
const Container = styled(motion.div)`
  padding: ${spacing.xxxl};
  max-width: 1400px;
  margin: 0 auto;
  min-height: calc(100vh - 120px);

  h2 {
    font-size: 32px;
    font-weight: 800;
    color: ${colors.text};
    margin-bottom: ${spacing.xxxl};
    background: ${gradients.primary};
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: center;
  }

  @media (max-width: 768px) {
    padding: ${spacing.xl};

    h2 {
      font-size: 28px;
      margin-bottom: ${spacing.xxl};
    }
  }
`;

const FormContainer = styled(motion.div)`
  background: ${colors.glass};
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: ${spacing.xxxl};
  margin-bottom: ${spacing.xxxl};
  box-shadow: 0 8px 32px ${colors.shadow};
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: ${gradients.primary};
  }

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: ${spacing.xl};

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
    padding: ${spacing.xxl};
  }
`;

const Input = styled.input`
  width: 100%;
  padding: ${spacing.lg} ${spacing.xl};
  border: 2px solid ${colors.border};
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  color: ${colors.text};
  background: ${colors.glassLight};
  backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  &:focus {
    outline: none;
    border-color: ${colors.borderHover};
    box-shadow: 0 0 0 4px ${colors.shadowHover};
    background: ${colors.background};
  }

  &::placeholder {
    color: ${colors.textMuted};
  }
`;

const Select = styled.select`
  width: 100%;
  padding: ${spacing.lg} ${spacing.xl};
  border: 2px solid ${colors.border};
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  color: ${colors.text};
  background: ${colors.glassLight};
  backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;

  &:focus {
    outline: none;
    border-color: ${colors.borderHover};
    box-shadow: 0 0 0 4px ${colors.shadowHover};
    background: ${colors.background};
  }

  option {
    background: white;
    color: ${colors.text};
    padding: ${spacing.md};
  }
`;

const TransferButton = styled(motion.button)`
  display: flex;
  align-items: center;
  justify-content: center;
  gap: ${spacing.sm};
  padding: ${spacing.lg} ${spacing.xxxl};
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  background: ${gradients.primary};
  color: white;
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
  grid-column: 1 / -1;
  max-width: 300px;
  justify-self: center;

  &:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5);
  }

  &:active {
    transform: translateY(0);
  }

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  @media (max-width: 768px) {
    max-width: 100%;
  }
`;

const TableContainer = styled.div`
  background: ${colors.glass};
  backdrop-filter: blur(20px);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 32px ${colors.shadow};
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: ${gradients.primary};
  }
`;

const Table = styled.table`
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;

  th {
    background: ${gradients.primary};
    color: white;
    padding: ${spacing.xl} ${spacing.lg};
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    white-space: nowrap;
  }

  td {
    padding: ${spacing.xl} ${spacing.lg};
    color: ${colors.textSecondary};
    font-weight: 500;
    border-bottom: 1px solid rgba(226, 232, 240, 0.5);
    vertical-align: middle;
  }

  tr:hover {
    background: ${colors.shadowHover};
  }

  tr:nth-child(even) {
    background: rgba(248, 250, 252, 0.5);
  }

  @media (max-width: 1024px) {
    font-size: 14px;

    th, td {
      padding: ${spacing.md} ${spacing.sm};
    }
  }

  @media (max-width: 768px) {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
`;

const StatusBadge = styled.span`
  padding: 6px ${spacing.md};
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;

  ${props => props.status === 'SUCCESS' && `
    background: linear-gradient(135deg, rgba(72, 187, 120, 0.2), rgba(56, 178, 172, 0.2));
    color: ${colors.success};
    border: 1px solid rgba(72, 187, 120, 0.3);
  `}

  ${props => props.status === 'PENDING' && `
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.2), rgba(255, 152, 0, 0.2));
    color: ${colors.warning};
    border: 1px solid rgba(255, 193, 7, 0.3);
  `}

  ${props => (props.status === 'FAILED' || props.status === 'FAILURE') && `
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.2), rgba(238, 90, 82, 0.2));
    color: ${colors.error};
    border: 1px solid rgba(255, 107, 107, 0.3);
  `}
`;

const NewTag = styled.span`
  background: ${gradients.success};
  color: white;
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  margin-left: ${spacing.sm};
`;

const LoadingSpinner = styled(motion.div)`
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px;
  color: ${colors.primary};

  svg {
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
`;

const ErrorMessage = styled(motion.div)`
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: ${spacing.lg};
  padding: 64px ${spacing.xxxl};
  text-align: center;
  color: ${colors.error};

  h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
  }

  p {
    margin: 0;
    color: ${colors.textSecondary};
    line-height: 1.5;
  }
`;

const EmptyState = styled(motion.div)`
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: ${spacing.lg};
  padding: 64px ${spacing.xxxl};
  text-align: center;
  color: ${colors.textMuted};

  h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
  }

  p {
    margin: 0;
    line-height: 1.5;
  }
`;

// Mock useAuth hook for demonstration
const useAuth = () => ({
  user: { id: 'user123' }
});

// Mock API function
const api = {
  get: async (endpoint) => {
    await new Promise(resolve => setTimeout(resolve, 1000));

    if (endpoint.includes('/accounts/user/')) {
      return {
        data: [
          { accountNumber: '123456789', accountType: 'SAVINGS', balance: 5000 },
          { accountNumber: '987654321', accountType: 'CHECKING', balance: 3000 },
          { accountNumber: '555666777', accountType: 'BUSINESS', balance: 10000 }
        ]
      };
    }

    if (endpoint.includes('/transactions/user/')) {
      return {
        data: [
          {
            id: 1,
            date: "2023-10-01",
            type: "TRANSFER",
            amount: 1500,
            fromAccount: { accountNumber: "123456789" },
            toAccount: { accountNumber: "987654321" },
            status: "SUCCESS",
            description: "Transfer to Savings",
          },
          {
            id: 2,
            date: "2023-10-02",
            type: "TRANSFER",
            amount: 2000,
            fromAccount: { accountNumber: "123456789" },
            toAccount: { accountNumber: "987654322" },
            status: "PENDING",
            description: "Transfer to Checking",
          },
          {
            id: 3,
            date: "2023-10-03",
            type: "DEPOSIT",
            amount: 750,
            fromAccount: null,
            toAccount: { accountNumber: "123456789" },
            status: "SUCCESS",
            description: "Salary deposit",
          },
          {
            id: 4,
            date: "2023-10-04",
            type: "TRANSFER",
            amount: 3000,
            fromAccount: { accountNumber: "987654321" },
            toAccount: { accountNumber: "123456789" },
            status: "FAILED",
            description: "Failed Transfer",
          },
        ]
      };
    }
  },

  post: async (endpoint, data) => {
    await new Promise(resolve => setTimeout(resolve, 1500));

    if (endpoint === '/transactions/transfer') {
      return {
        data: {
          data: {
            id: Date.now(),
            date: new Date().toISOString().split('T')[0],
            type: "TRANSFER",
            amount: data.amount,
            fromAccount: { accountNumber: data.fromAccountNumber },
            toAccount: { accountNumber: data.toAccountNumber },
            status: "SUCCESS",
            description: data.description,
            new: true
          }
        }
      };
    }
  }
};

// Mock query invalidation
const invalidateQueries = (queryKey) => {
  console.log(`Invalidating queries: ${queryKey}`);
};

export default function Transfer() {
  const [transactions, setTransactions] = useState([]);
  const [userAccounts, setUserAccounts] = useState([]);
  const [form, setForm] = useState({
    fromAccountNumber: "",
    toAccountNumber: "",
    amount: "",
    description: ""
  });
  const [modalOpen, setModalOpen] = useState(false);
  const [loading, setLoading] = useState(true);
  const [accountsLoading, setAccountsLoading] = useState(true);
  const [transferring, setTransferring] = useState(false);
  const [error, setError] = useState(null);

  const { user } = useAuth();

  // Fetch user accounts
  const fetchUserAccounts = useCallback(async () => {
    if (!user?.id) return;

    try {
      setAccountsLoading(true);
      const response = await api.get(`/accounts/user/${user.id}`);
      setUserAccounts(response.data);
    } catch (err) {
      console.error('Error fetching user accounts:', err);
      toast.error('Failed to load user accounts');
    } finally {
      setAccountsLoading(false);
    }
  }, [user?.id]);

  // Fetch transactions
  const fetchTransactions = useCallback(async () => {
    if (!user?.id) return;

    try {
      setLoading(true);
      setError(null);
      const response = await api.get(`/transactions/user/${user.id}`);
      // Filter only transfer transactions
      const transferTransactions = response.data.filter(transaction => 
        transaction.type === 'TRANSFER'
      );
      setTransactions(transferTransactions);
    } catch (err) {
      setError('Failed to load transactions. Please try again.');
      console.error('Error fetching transactions:', err);
    } finally {
      setLoading(false);
    }
  }, [user?.id]);

  // Initial load
  useEffect(() => {
    fetchUserAccounts();
    fetchTransactions();
  }, [fetchUserAccounts, fetchTransactions]);

  const handleInputChange = (e) => {
    setForm(prev => ({
      ...prev,
      [e.target.name]: e.target.value
    }));
  };

  const handleTransfer = () => {
    // Validation
    if (!form.fromAccountNumber || !form.toAccountNumber || !form.amount || !form.description) {
      toast.error('Please fill in all fields');
      return;
    }

    if (parseFloat(form.amount) <= 0) {
      toast.error('Amount must be greater than 0');
      return;
    }

    if (form.fromAccountNumber === form.toAccountNumber) {
      toast.error('From and To accounts cannot be the same');
      return;
    }

    setModalOpen(true);
  };

  const confirmTransfer = async () => {
    try {
      setTransferring(true);

      const transferData = {
        fromAccountNumber: form.fromAccountNumber,
        toAccountNumber: form.toAccountNumber,
        amount: parseFloat(form.amount),
        description: form.description
      };

      const response = await api.post('/transactions/transfer', transferData);

      // Update transactions list with new transaction
      setTransactions(prev => [response.data.data, ...prev]);

      // Invalidate accounts query to refresh balances
      invalidateQueries(['accounts']);

      toast.success('Money transferred successfully');

      // Reset form
      setForm({
        fromAccountNumber: "",
        toAccountNumber: "",
        amount: "",
        description: ""
      });

      setModalOpen(false);
    } catch (err) {
      console.error('Transfer error:', err);
      toast.error('Transfer failed. Please try again.');
    } finally {
      setTransferring(false);
    }
  };

  const cancelTransfer = () => {
    toast.info('Transfer cancelled');
    setModalOpen(false);
  };

  // Format currency
  const formatCurrency = (amount) => {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD'
    }).format(amount);
  };

  // Format date
  const formatDate = (dateString) => {
    return new Date(dateString).toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'short',
      day: 'numeric'
    });
  };

  return (
    <Container
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.6 }}
    >
      <h2>Money Transfer</h2>

      <FormContainer
        initial={{ opacity: 0, scale: 0.95 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{ delay: 0.1, duration: 0.5 }}
      >
        <Select
          name="fromAccountNumber"
          value={form.fromAccountNumber}
          onChange={handleInputChange}
          disabled={accountsLoading}
        >
          <option value="">Select From Account</option>
          {userAccounts.map(account => (
            <option key={account.accountNumber} value={account.accountNumber}>
              {account.accountNumber} ({account.accountType})
            </option>
          ))}
        </Select>

        <Input
          name="toAccountNumber"
          value={form.toAccountNumber}
          placeholder="To Account Number"
          onChange={handleInputChange}
        />

        <Input
          name="amount"
          value={form.amount}
          type="number"
          placeholder="Amount"
          onChange={handleInputChange}
          min="0"
          step="0.01"
        />

        <Input
          name="description"
          value={form.description}
          placeholder="Description"
          onChange={handleInputChange}
        />

        <TransferButton
          onClick={handleTransfer}
          disabled={transferring || accountsLoading}
          whileHover={{ scale: 1.02 }}
          whileTap={{ scale: 0.98 }}
        >
          <Send size={18} />
          {transferring ? 'Processing...' : 'Transfer'}
        </TransferButton>
      </FormContainer>

      <TableContainer>
        {loading ? (
          <LoadingSpinner
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
          >
            <RefreshCw size={32} />
            <p style={{ marginLeft: spacing.lg, fontSize: '18px', fontWeight: '500' }}>
              Loading transfers...
            </p>
          </LoadingSpinner>
        ) : error ? (
          <ErrorMessage
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
          >
            <AlertCircle size={48} />
            <h3>Something went wrong</h3>
            <p>{error}</p>
            <TransferButton
              onClick={fetchTransactions}
              whileHover={{ scale: 1.02 }}
              whileTap={{ scale: 0.98 }}
            >
              <RefreshCw size={16} />
              Try Again
            </TransferButton>
          </ErrorMessage>
        ) : transactions.length === 0 ? (
          <EmptyState
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
          >
            <Filter size={48} />
            <h3>No transfers found</h3>
            <p>Start your first transfer using the form above</p>
          </EmptyState>
        ) : (
          <Table>
            <thead>
              <tr>
                <th>#</th>
                <th>ID</th>
                <th>From</th>
                <th>To</th>
                <th>Amount</th>
                <th>Status</th>
                <th>Date</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              {transactions.map((transaction, idx) => (
                <motion.tr
                  key={transaction.id}
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.3, delay: idx * 0.05 }}
                >
                  <td>{idx + 1}</td>
                  <td>
                    <code style={{
                      background: colors.shadowHover,
                      padding: '4px 8px',
                      borderRadius: '6px',
                      fontSize: '14px',
                      fontWeight: '600'
                    }}>
                      T{String(transaction.id).padStart(3, '0')}
                    </code>
                  </td>
                  <td>
                    <code style={{
                      background: colors.shadowHover,
                      padding: '4px 8px',
                      borderRadius: '6px',
                      fontSize: '14px',
                      fontWeight: '600'
                    }}>
                      {transaction.fromAccount?.accountNumber || '-'}
                    </code>
                  </td>
                  <td>
                    <code style={{
                      background: colors.shadowHover,
                      padding: '4px 8px',
                      borderRadius: '6px',
                      fontSize: '14px',
                      fontWeight: '600'
                    }}>
                      {transaction.toAccount?.accountNumber || '-'}
                    </code>
                  </td>
                  <td style={{
                    fontWeight: '600',
                    color: colors.primary
                  }}>
                    {formatCurrency(transaction.amount)}
                  </td>
                  <td>
                    <StatusBadge status={transaction.status}>
                      {transaction.status}
                    </StatusBadge>
                    {transaction.new && <NewTag>new</NewTag>}
                  </td>
                  <td>{formatDate(transaction.date)}</td>
                  <td>{transaction.description}</td>
                </motion.tr>
              ))}
            </tbody>
          </Table>
        )}
      </TableContainer>

      <ConfirmModal
        isOpen={modalOpen}
        onConfirm={confirmTransfer}
        onCancel={cancelTransfer}
        title="Confirm Transfer"
        message={`Transfer ${formatCurrency(parseFloat(form.amount) || 0)} from ${form.fromAccountNumber} to ${form.toAccountNumber}?`}
        loading={transferring}
      />
    </Container>
  );
}

frontend2

Nebula — Wed, 25 Jun 2025 19:16:54 +0000

import { useState, useCallback } from "react";
import { DollarSign, Trash2 } from "lucide-react";
import {
  Container,
  Form,
  InputGroup,
  Label,
  Input,
  Select,
  CreateButton,
  Table,
  StatusBadge,
  Modal,
  ToastComponent,
  containerVariants,
  formVariants
} from './CreateAccountStyles';

function Deposit() {
  const [form, setForm] = useState({
    toAccount: "",
    amount: "",
    description: ""
  });

  const [deposits, setDeposits] = useState([
    {
      srNo: 1,
      transactionId: "TXN123456",
      toAccount: "1234567890",
      amount: 1000.0,
      description: "Initial deposit",
      date: "2022-01-01",
      status: "COMPLETED",
    },
  ]);

  const [isModalOpen, setIsModalOpen] = useState(false);
  const [toasts, setToasts] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [errors, setErrors] = useState({});

  // Available accounts for deposit
  const availableAccounts = [
    { number: "1234567890", name: "Kishan - Savings" },
    { number: "0987654321", name: "Tilak - Current" }
  ];

  // Generate random transaction ID
  const generateTransactionId = () => {
    return "TXN" + Math.floor(100000 + Math.random() * 900000).toString();
  };

  // Validate form
  const validateForm = () => {
    const newErrors = {};

    if (!form.toAccount) {
      newErrors.toAccount = "Please select an account";
    }

    if (!form.amount) {
      newErrors.amount = "Amount is required";
    } else if (parseFloat(form.amount) <= 0) {
      newErrors.amount = "Amount must be greater than 0";
    } else if (parseFloat(form.amount) > 100000) {
      newErrors.amount = "Amount cannot exceed $100,000";
    }

    if (!form.description.trim()) {
      newErrors.description = "Description is required";
    } else if (form.description.trim().length < 3) {
      newErrors.description = "Description must be at least 3 characters";
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  // Handle input changes
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setForm(prev => ({
      ...prev,
      [name]: value
    }));

    // Clear error when user starts typing
    if (errors[name]) {
      setErrors(prev => ({
        ...prev,
        [name]: ""
      }));
    }
  };

  // Add toast notification
  const addToast = useCallback((type, title, message) => {
    const id = Date.now() + Math.random();
    const newToast = { id, type, title, message };

    setToasts(prev => [...prev, newToast]);

    // Auto remove toast after 5 seconds
    setTimeout(() => {
      removeToast(id);
    }, 5000);
  }, []);

  // Remove toast
  const removeToast = useCallback((id) => {
    setToasts(prev => prev.filter(toast => toast.id !== id));
  }, []);

  // Handle form submission
  const handleSubmit = () => {
    if (!validateForm()) {
      addToast('error', 'Validation Error', 'Please fix the errors and try again');
      return;
    }

    setIsModalOpen(true);
  };

  // Handle deposit confirmation
  const handleConfirmDeposit = async () => {
    setIsModalOpen(false);
    setIsLoading(true);

    try {
      // Simulate API call
      await new Promise(resolve => setTimeout(resolve, 1500));

      const newDeposit = {
        srNo: deposits.length + 1,
        transactionId: generateTransactionId(),
        toAccount: form.toAccount,
        amount: parseFloat(form.amount),
        description: form.description.trim(),
        date: new Date().toISOString().split('T')[0],
        status: "COMPLETED",
      };

      setDeposits(prev => [...prev, newDeposit]);

      // Reset form
      setForm({
        toAccount: "",
        amount: "",
        description: ""
      });

      addToast(
        'success',
        'Deposit Successful!',
        `$${parseFloat(form.amount).toFixed(2)} has been deposited to account ${form.toAccount}`
      );

    } catch (error) {
      addToast('error', 'Deposit Failed', 'Failed to process deposit. Please try again.');
    } finally {
      setIsLoading(false);
    }
  };

  // Clear form
  const clearForm = () => {
    setForm({
      toAccount: "",
      amount: "",
      description: ""
    });
    setErrors({});
  };

  // Format currency
  const formatCurrency = (amount) => {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD'
    }).format(amount);
  };

  // Format date
  const formatDate = (dateString) => {
    return new Date(dateString).toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'short',
      day: 'numeric'
    });
  };

  return (
    <>
      <Container
        variants={containerVariants}
        initial="initial"
        animate="animate"
      >
        <h2>Deposit Funds</h2>

        <Form
          variants={formVariants}
          as="div"
        >
          <InputGroup>
            <Label htmlFor="toAccount">To Account</Label>
            <Select
              id="toAccount"
              name="toAccount"
              value={form.toAccount}
              onChange={handleInputChange}
              required
              style={{
                borderColor: errors.toAccount ? '#ff6b6b' : undefined
              }}
            >
              <option value="">Select Account</option>
              {availableAccounts.map((account) => (
                <option key={account.number} value={account.number}>
                  {account.number} - {account.name}
                </option>
              ))}
            </Select>
            {errors.toAccount && (
              <span style={{ color: '#ff6b6b', fontSize: '14px', marginTop: '4px' }}>
                {errors.toAccount}
              </span>
            )}
          </InputGroup>

          <InputGroup>
            <Label htmlFor="amount">Amount</Label>
            <Input
              id="amount"
              name="amount"
              type="number"
              step="0.01"
              min="0"
              placeholder="Enter amount"
              value={form.amount}
              onChange={handleInputChange}
              required
              style={{
                borderColor: errors.amount ? '#ff6b6b' : undefined
              }}
            />
            {errors.amount && (
              <span style={{ color: '#ff6b6b', fontSize: '14px', marginTop: '4px' }}>
                {errors.amount}
              </span>
            )}
          </InputGroup>

          <InputGroup>
            <Label htmlFor="description">Description</Label>
            <Input
              id="description"
              name="description"
              type="text"
              placeholder="Enter description"
              value={form.description}
              onChange={handleInputChange}
              required
              style={{
                borderColor: errors.description ? '#ff6b6b' : undefined
              }}
            />
            {errors.description && (
              <span style={{ color: '#ff6b6b', fontSize: '14px', marginTop: '4px' }}>
                {errors.description}
              </span>
            )}
          </InputGroup>

          <div style={{ display: 'flex', gap: '12px' }}>
            <CreateButton
              type="button"
              onClick={handleSubmit}
              disabled={isLoading}
              whileHover={{ scale: 1.02 }}
              whileTap={{ scale: 0.98 }}
            >
              <DollarSign size={18} />
              {isLoading ? 'Processing...' : 'Deposit'}
            </CreateButton>

            <CreateButton
              type="button"
              onClick={clearForm}
              disabled={isLoading}
              whileHover={{ scale: 1.02 }}
              whileTap={{ scale: 0.98 }}
              style={{
                background: 'transparent',
                color: '#4a5568',
                border: '2px solid #e2e8f0',
                boxShadow: 'none'
              }}
            >
              <Trash2 size={18} />
              Clear
            </CreateButton>
          </div>
        </Form>

        <h2 style={{ marginTop: '48px', marginBottom: '24px' }}>All Deposits</h2>

        <Table>
          <thead>
            <tr>
              <th>Sr. No</th>
              <th>Transaction ID</th>
              <th>To Account</th>
              <th>Amount</th>
              <th>Description</th>
              <th>Transaction Date</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody>
            {deposits.map((deposit, index) => (
              <tr key={deposit.transactionId}>
                <td>{deposit.srNo}</td>
                <td>
                  <code style={{ 
                    background: 'rgba(102, 126, 234, 0.1)', 
                    padding: '4px 8px', 
                    borderRadius: '6px',
                    fontSize: '14px',
                    fontWeight: '600'
                  }}>
                    {deposit.transactionId}
                  </code>
                </td>
                <td>
                  <code style={{ 
                    background: 'rgba(102, 126, 234, 0.1)', 
                    padding: '4px 8px', 
                    borderRadius: '6px',
                    fontSize: '14px',
                    fontWeight: '600'
                  }}>
                    {deposit.toAccount}
                  </code>
                </td>
                <td style={{ fontWeight: '600', color: '#38a169' }}>
                  {formatCurrency(deposit.amount)}
                </td>
                <td>{deposit.description}</td>
                <td>{formatDate(deposit.date)}</td>
                <td>
                  <StatusBadge status={deposit.status}>
                    {deposit.status}
                  </StatusBadge>
                </td>
              </tr>
            ))}
          </tbody>
        </Table>
      </Container>

      <Modal
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(false)}
        title="Confirm Deposit"
        message={`Are you sure you want to deposit ${formatCurrency(parseFloat(form.amount || 0))} to account ${form.toAccount}? This action cannot be undone.`}
        onConfirm={handleConfirmDeposit}
        confirmText="Confirm Deposit"
        cancelText="Cancel"
      />

      <ToastComponent 
        toasts={toasts} 
        removeToast={removeToast} 
      />
    </>
  );
}

export default Deposit;