[V0_FILE]plaintext:file=".gitignore" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" # Live data selling *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/voaichatji-gmailcoms-projects/v0-live-data-selling) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/projects/DdEHXLYLyVm) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/voaichatji-gmailcoms-projects/v0-live-data-selling](https://vercel.com/voaichatji-gmailcoms-projects/v0-live-data-selling)** ## Build your app Continue building your app on: **[https://v0.app/chat/projects/DdEHXLYLyVm](https://v0.app/chat/projects/DdEHXLYLyVm)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]css:file="app/globals.css" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated color tokens to match the futuristic purple gradient theme */ --background: #1e1e2f; --foreground: #ffffff; --card: #2a1f3d; --card-foreground: #ffffff; --popover: #5b2e91; --popover-foreground: #ffffff; --primary: #ffcc00; --primary-foreground: #1e1e2f; --secondary: #374151; --secondary-foreground: #ffffff; --muted: #374151; --muted-foreground: #d1d5db; --accent: #5b2e91; --accent-foreground: #ffffff; --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: #4c1d95; --input: #2a1f3d; --ring: rgba(255, 204, 0, 0.5); --chart-1: #5b2e91; --chart-2: #ffcc00; --chart-3: #d1d5db; --chart-4: #dc2626; --chart-5: #374151; --radius: 0.625rem; --sidebar: #1e1e2f; --sidebar-foreground: #ffffff; --sidebar-primary: #5b2e91; --sidebar-primary-foreground: #ffffff; --sidebar-accent: #ffcc00; --sidebar-accent-foreground: #1e1e2f; --sidebar-border: #4c1d95; --sidebar-ring: rgba(255, 204, 0, 0.5); } .dark { /* Dark mode tokens adjusted for the purple theme */ --background: #1e1e2f; --foreground: #ffffff; --card: #2a1f3d; --card-foreground: #ffffff; --popover: #5b2e91; --popover-foreground: #ffffff; --primary: #ffcc00; --primary-foreground: #1e1e2f; --secondary: #374151; --secondary-foreground: #ffffff; --muted: #374151; --muted-foreground: #d1d5db; --accent: #5b2e91; --accent-foreground: #ffffff; --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: #4c1d95; --input: #2a1f3d; --ring: rgba(255, 204, 0, 0.5); --chart-1: #5b2e91; --chart-2: #ffcc00; --chart-3: #d1d5db; --chart-4: #dc2626; --chart-5: #374151; --sidebar: #1e1e2f; --sidebar-foreground: #ffffff; --sidebar-primary: #5b2e91; --sidebar-primary-foreground: #ffffff; --sidebar-accent: #ffcc00; --sidebar-accent-foreground: #1e1e2f; --sidebar-border: #4c1d95; --sidebar-ring: rgba(255, 204, 0, 0.5); } @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } /* Added custom animations for live data effects */ @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 5px rgba(255, 204, 0, 0.5); } 50% { box-shadow: 0 0 20px rgba(255, 204, 0, 0.8), 0 0 30px rgba(255, 204, 0, 0.6); } } @keyframes data-flow { 0% { transform: translateX(-100%); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } } .pulse-glow { animation: pulse-glow 2s ease-in-out infinite; } .data-flow { animation: data-flow 3s ease-in-out infinite; } /* Added gradient backgrounds for cards */ .gradient-card { background: linear-gradient(135deg, #2a1f3d 0%, #5b2e91 100%); } .gradient-border { background: linear-gradient(135deg, #5b2e91, #ffcc00); padding: 2px; border-radius: 0.75rem; } .gradient-border > div { background: var(--card); border-radius: 0.625rem; } [V0_FILE]typescriptreact:file="app/layout.tsx" import type { Metadata } from 'next' import { GeistSans } from 'geist/font/sans' import { GeistMono } from 'geist/font/mono' import './globals.css' export const metadata: Metadata = { title: 'v0 App', description: 'Created with v0', generator: 'v0.app', } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]json:file="components.json" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" 'use client' import * as React from 'react' import { ThemeProvider as NextThemesProvider, type ThemeProviderProps, } from 'next-themes' export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/ui/button.tsx" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", { variants: { variant: { default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90", destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50", secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-9 px-4 py-2 has-[>svg]:px-3", sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5", lg: "h-10 rounded-md px-6 has-[>svg]:px-4", icon: "size-9", }, }, defaultVariants: { variant: "default", size: "default", }, } ) function Button({ className, variant, size, asChild = false, ...props }: React.ComponentProps<"button"> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot : "button" return ( ) } export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/card.tsx" import * as React from "react" import { cn } from "@/lib/utils" function Card({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardHeader({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardTitle({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardDescription({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardAction({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardContent({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardFooter({ className, ...props }: React.ComponentProps<"div">) { return (

) } export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, } [V0_FILE]typescriptreact:file="components/ui/dialog.tsx" "use client" import * as React from "react" import * as DialogPrimitive from "@radix-ui/react-dialog" import { XIcon } from "lucide-react" import { cn } from "@/lib/utils" function Dialog({ ...props }: React.ComponentProps) { return } function DialogTrigger({ ...props }: React.ComponentProps) { return } function DialogPortal({ ...props }: React.ComponentProps) { return } function DialogClose({ ...props }: React.ComponentProps) { return } function DialogOverlay({ className, ...props }: React.ComponentProps) { return ( ) } function DialogContent({ className, children, showCloseButton = true, ...props }: React.ComponentProps & { showCloseButton?: boolean }) { return ( {children} {showCloseButton && ( Close )} ) } function DialogHeader({ className, ...props }: React.ComponentProps<"div">) { return (

) } function DialogFooter({ className, ...props }: React.ComponentProps<"div">) { return (

) } function DialogTitle({ className, ...props }: React.ComponentProps) { return ( ) } function DialogDescription({ className, ...props }: React.ComponentProps) { return ( ) } export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, } [V0_FILE]typescriptreact:file="components/ui/input.tsx" import * as React from "react" import { cn } from "@/lib/utils" function Input({ className, type, ...props }: React.ComponentProps<"input">) { return ( ) } export { Input } [V0_FILE]typescriptreact:file="components/ui/label.tsx" "use client" import * as React from "react" import * as LabelPrimitive from "@radix-ui/react-label" import { cn } from "@/lib/utils" function Label({ className, ...props }: React.ComponentProps) { return ( ) } export { Label } [V0_FILE]typescriptreact:file="components/ui/progress.tsx" "use client" import * as React from "react" import * as ProgressPrimitive from "@radix-ui/react-progress" import { cn } from "@/lib/utils" function Progress({ className, value, ...props }: React.ComponentProps) { return ( ) } export { Progress } [V0_FILE]typescript:file="lib/utils.ts" import { clsx, type ClassValue } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]javascript:file="next.config.mjs" /** @type {import('next').NextConfig} */ const nextConfig = { eslint: { ignoreDuringBuilds: true, }, typescript: { ignoreBuildErrors: true, }, images: { unoptimized: true, }, } export default nextConfig [V0_FILE]json:file="package.json" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "build": "next build", "dev": "next dev", "lint": "next lint", "start": "next start" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "15.2.4", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]javascript:file="postcss.config.mjs" /** @type {import('postcss-load-config').Config} */ const config = { plugins: { '@tailwindcss/postcss': {}, }, } export default config [V0_FILE]css:file="styles/globals.css" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]json:file="tsconfig.json" { "compilerOptions": { "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "target": "ES6", "skipLibCheck": true, "strict": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "plugins": [ { "name": "next" } ], "paths": { "@/*": ["./*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] } [V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_B0khf5da8dpZXC5PCyZgwQn6TwfJ/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png" [V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_B0khf5da8dpZXC5PCyZgwQn6TwfJ/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg" [V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_B0khf5da8dpZXC5PCyZgwQn6TwfJ/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg" [V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_B0khf5da8dpZXC5PCyZgwQn6TwfJ/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg" [V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_B0khf5da8dpZXC5PCyZgwQn6TwfJ/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg" [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Progress } from "@/components/ui/progress" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { TrendingUp, Download, IndianRupee, Play, Square, Wifi, CheckCircle, History, ArrowRight } from "lucide-react" interface WithdrawalRecord { id: string amount: number upiId: string date: string status: "completed" } const mockWithdrawalHistory: WithdrawalRecord[] = [ { id: "1", amount: 320, upiId: "hero@paytm", date: "2025-01-16", status: "completed" }, { id: "2", amount: 150, upiId: "heroboss@phonepe", date: "2025-01-15", status: "completed" }, { id: "3", amount: 280, upiId: "rajesh@fampay", date: "2025-01-14", status: "completed" }, { id: "4", amount: 95, upiId: "priya123@paytm", date: "2025-01-13", status: "completed" }, { id: "5", amount: 450, upiId: "vikram@gpay", date: "2025-01-12", status: "completed" }, { id: "6", amount: 180, upiId: "sneha@phonepe", date: "2025-01-11", status: "completed" }, { id: "7", amount: 220, upiId: "arjun007@paytm", date: "2025-01-10", status: "completed" }, { id: "8", amount: 75, upiId: "meera@fampay", date: "2025-01-09", status: "completed" }, { id: "9", amount: 380, upiId: "rohit@gpay", date: "2025-01-08", status: "completed" }, { id: "10", amount: 125, upiId: "kavya@phonepe", date: "2025-01-07", status: "completed" }, { id: "11", amount: 290, upiId: "amit99@paytm", date: "2025-01-06", status: "completed" }, { id: "12", amount: 160, upiId: "pooja@fampay", date: "2025-01-05", status: "completed" }, { id: "13", amount: 340, upiId: "karan@gpay", date: "2025-01-04", status: "completed" }, { id: "14", amount: 85, upiId: "riya@phonepe", date: "2025-01-03", status: "completed" }, { id: "15", amount: 250, upiId: "deepak@paytm", date: "2025-01-02", status: "completed" }, { id: "16", amount: 195, upiId: "anita@fampay", date: "2025-01-01", status: "completed" }, { id: "17", amount: 420, upiId: "suresh@gpay", date: "2024-12-31", status: "completed" }, { id: "18", amount: 110, upiId: "nisha@phonepe", date: "2024-12-30", status: "completed" }, { id: "19", amount: 275, upiId: "rahul@paytm", date: "2024-12-29", status: "completed" }, { id: "20", amount: 145, upiId: "sunita@fampay", date: "2024-12-28", status: "completed" }, ] export default function LiveDataSelling() { const [isActive, setIsActive] = useState(false) const [dataSold, setDataSold] = useState(74.1) const [earnings, setEarnings] = useState(126) const [progress, setProgress] = useState(22.2) const [rate] = useState(1.7) // ₹1.7 per MB const [sellingSpeed] = useState(10) // 10 MB/sec const [showUpiModal, setShowUpiModal] = useState(false) const [showConfirmModal, setShowConfirmModal] = useState(false) const [showSuccessModal, setShowSuccessModal] = useState(false) const [showHistoryModal, setShowHistoryModal] = useState(false) const [upiId, setUpiId] = useState("") const [withdrawalAmount, setWithdrawalAmount] = useState(0) useEffect(() => { let interval: NodeJS.Timeout if (isActive) { interval = setInterval(() => { setDataSold((prev) => { const newValue = prev + sellingSpeed / 10 // Update every 100ms setEarnings(newValue * rate) setProgress((newValue / 333) * 100) // Assuming 333 MB target return newValue }) }, 100) } return () => clearInterval(interval) }, [isActive, rate, sellingSpeed]) const handleToggleSelling = () => { setIsActive(!isActive) } const handleWithdraw = () => { if (earnings < 1) return setWithdrawalAmount(Math.floor(earnings)) setShowUpiModal(true) } const handleUpiSubmit = () => { if (!upiId.trim()) return setShowUpiModal(false) setShowConfirmModal(true) } const handleConfirmWithdrawal = () => { setShowConfirmModal(false) setShowSuccessModal(true) // Reset values after withdrawal setDataSold(0) setEarnings(0) setProgress(0) setIsActive(false) // Auto close success modal after 3 seconds setTimeout(() => { setShowSuccessModal(false) setUpiId("") }, 3000) } return (

{/* Header */}

Live Data Selling

{/* Rate Information */}

Rate: 500 MB = ₹850 ₹{rate}/MB

Selling at {sellingSpeed} MB/sec → ₹{(sellingSpeed * rate).toFixed(0)}/sec

{/* Session Data Sold Card */}

Session Data Sold

{dataSold.toFixed(1)} MB

{/* Session Earnings Card */}

Session Earnings

₹{earnings.toFixed(0)}

{/* Progress Card */}

Session Progress: {progress.toFixed(1)}%

{/* Control Buttons */}

{/* Withdrawal History Button */} {/* Status Indicator */}

{isActive ? "Actively selling data" : "Data selling paused"} {isActive && }

{/* Live Data Flow Animation */} {isActive && (

)} {/* UPI ID Input Modal */} {/* Confirmation Modal */} {/* Success Modal */} {/* Withdrawal History Modal */}

) } [V0_FILE]html:file="index.html" Live Data Selling

Session Data Sold

74.1 MB

Session Earnings

₹126

Session Progress: 22.2%

Data selling paused