[V0_FILE]typescriptreact:file="app/checkout/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/track/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/logo-icon.tsx" interface LogoIconProps { className?: string } export function LogoIcon({ className }: LogoIconProps) { return ( ) } [V0_FILE]typescriptreact:file="components/language-selector.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { Globe } from "lucide-react" export function LanguageSelector() { const [language, setLanguage] = useState("en") return ( setLanguage("en")}>English setLanguage("mm")}>မြန်မာ ) } [V0_FILE]typescriptreact:file="lib/actions.ts" "use server" import { cookies } from "next/headers" type Order = { orderId: string product: string price: number fullName: string email: string phone: string status: string createdAt: string paymentMethod: string } // In a real application, this would interact with a database // For this demo, we're using cookies to simulate persistence export async function submitOrder(data: { product: string price: number fullName: string email: string phone: string paymentMethod: string }) { // Generate a unique order ID const orderId = "ESIM" + Date.now().toString() // Create the order object const order: Order = { orderId, product: data.product, price: data.price, fullName: data.fullName, email: data.email, phone: data.phone, status: "Pending", createdAt: new Date().toISOString(), paymentMethod: data.paymentMethod, } // Get existing orders from cookies const cookieStore = cookies() const existingOrdersStr = cookieStore.get("orders")?.value const existingOrders: Order[] = existingOrdersStr ? JSON.parse(existingOrdersStr) : [] // Add the new order const updatedOrders = [...existingOrders, order] // Save back to cookies cookieStore.set("orders", JSON.stringify(updatedOrders), { maxAge: 60 * 60 * 24 * 30, // 30 days path: "/", }) return orderId } export async function getOrder(orderId: string): Promise { // Get orders from cookies const cookieStore = cookies() const ordersStr = cookieStore.get("orders")?.value if (!ordersStr) { return null } const orders: Order[] = JSON.parse(ordersStr) const order = orders.find((order) => order.orderId === orderId) if (!order) { return null } // For demo purposes, randomly set the status // In a real app, this would be the actual status from the database const statuses = ["Pending", "Processing", "Completed"] const randomStatus = statuses[Math.floor(Math.random() * statuses.length)] return { ...order, status: randomStatus, } } [V0_FILE]typescriptreact:file="lib/utils.ts" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } export function formatCurrency(amount: number, currency = "USD"): string { // For Myanmar Kyat, we'll use a simple format without decimal places if (currency === "MMK") { return `${amount.toLocaleString()} ${currency}` } // For other currencies, use the standard formatter return new Intl.NumberFormat("en-US", { style: "currency", currency, }).format(amount) } [V0_FILE]typescriptreact:file="app/layout.tsx" isQuickEdit="true" import type React from "react" import "@/app/globals.css" import { Inter } from "next/font/google" import { ThemeProvider } from "@/components/theme-provider" import { cn } from "@/lib/utils" import { Navbar } from "@/components/navbar" import { LogoIcon } from "@/components/logo-icon" import Link from "next/link" const inter = Inter({ subsets: ["latin"] }) export const metadata = { title: "eSIM Myanmar", description: "Connect instantly with Myanmar's top mobile networks using digital eSIM technology.", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="components/hero-section.tsx" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { LanguageSelector } from "@/components/language-selector" import { LogoIcon } from "@/components/logo-icon" import { Globe, MapPin } from "lucide-react" export function HeroSection() { const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }) useEffect(() => { const handleMouseMove = (e: MouseEvent) => { setMousePosition({ x: e.clientX / window.innerWidth, y: e.clientY / window.innerHeight, }) } window.addEventListener("mousemove", handleMouseMove) return () => window.removeEventListener("mousemove", handleMouseMove) }, []) const parallaxOffset = { x: mousePosition.x * 20 - 10, y: mousePosition.y * 20 - 10, } return (

{/* Stars background */}

{/* Animated globe */}

eSIM Myanmar

Travel Globally,
Connect Locally

Instant digital SIM cards for travelers. No physical card needed, just scan and connect.

Global eSIM

Asia eSIM

Europe eSIM

{/* Traveler illustration using CSS */}

{/* Stylized traveler silhouette */}

{/* Stylized person */}

{/* Stylized hat */}

{/* Stylized phone */}

{/* Decorative elements */}

) } [V0_FILE]typescriptreact:file="components/features.tsx" isFixed="true" isQuickEdit="true" import { Globe, Shield, Smartphone, Zap } from "lucide-react" export function Features() { const features = [ { icon: , title: "No Physical SIM", description: "Digital eSIM technology eliminates the need for physical SIM cards", }, { icon: , title: "Global Coverage", description: "Stay connected in over 190 countries with our international eSIMs", }, { icon: , title: "Instant Activation", description: "Get connected immediately after purchase with QR code activation", }, { icon: , title: "Secure Connection", description: "Enhanced security features compared to traditional roaming", }, ] return (

Why Choose eSIM?

{features.map((feature, index) => (

{feature.icon}

{feature.title}

{feature.description}

))}

) } [V0_FILE]typescriptreact:file="components/region-selector.tsx" isQuickEdit="true" "use client" import { useState } from "react" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Globe, MapPin } from "lucide-react" export function RegionSelector() { const [activeRegion, setActiveRegion] = useState("all") return (

Choose Your Destination

All Regions Global Asia Europe

) } [V0_FILE]typescriptreact:file="components/navbar.tsx" isQuickEdit="true" import Link from "next/link" import { Home, Search, Phone } from "lucide-react" import { Button } from "@/components/ui/button" import { LanguageSelector } from "@/components/language-selector" import { LogoIcon } from "@/components/logo-icon" export function Navbar() { return (

eSIM Myanmar

Home Global Asia Europe Track Order

) } [V0_FILE]typescriptreact:file="app/track/page.tsx" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { useSearchParams, useRouter } from "next/navigation" import { z } from "zod" import { zodResolver } from "@hookform/resolvers/zod" import { useForm } from "react-hook-form" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Form, FormControl, FormField, FormItem, FormMessage } from "@/components/ui/form" import { Input } from "@/components/ui/input" import { getOrder } from "@/lib/actions" import { formatCurrency } from "@/lib/utils" import { ArrowLeft, CheckCircle, Clock, AlertCircle } from "lucide-react" const formSchema = z.object({ orderId: z.string().min(1, { message: "Order ID is required" }), }) type OrderDetails = { orderId: string product: string price: number fullName: string email: string phone: string status: string createdAt: string paymentMethod: string } | null export default function TrackPage() { const router = useRouter() const searchParams = useSearchParams() const initialOrderId = searchParams.get("order") || "" const [orderDetails, setOrderDetails] = useState(null) const [isLoading, setIsLoading] = useState(false) const form = useForm>({ resolver: zodResolver(formSchema), defaultValues: { orderId: initialOrderId, }, }) async function onSubmit(values: z.infer) { await trackOrder(values.orderId) } async function trackOrder(orderId: string) { setIsLoading(true) try { const order = await getOrder(orderId) setOrderDetails(order) } catch (error) { console.error("Error fetching order:", error) setOrderDetails(null) } finally { setIsLoading(false) } } useEffect(() => { if (initialOrderId) { trackOrder(initialOrderId) } }, [initialOrderId]) const getStatusIcon = (status: string) => { switch (status) { case "Completed": return case "Processing": return case "Pending": return default: return } } // Status timeline visualization const StatusTimeline = ({ status }: { status: string }) => { const steps = [ { name: "Order Placed", completed: true }, { name: "Payment Confirmed", completed: status !== "Pending" }, { name: "eSIM Generated", completed: status === "Completed" }, { name: "Delivered", completed: status === "Completed" }, ] return (

{/* Horizontal line */}

{steps.map((step, index) => (

{step.completed ? ( ) : (

)}

{step.name}

))}

) } return (

Track Order Check the status of your eSIM order

( )} /> {orderDetails ? (

Order Status

{orderDetails.status}

{getStatusIcon(orderDetails.status)}

Order Details

Order ID: {orderDetails.orderId}

Product: {orderDetails.product}

Price: {formatCurrency(orderDetails.price, "MMK")}

Customer: {orderDetails.fullName}

Email: {orderDetails.email}

Phone: {orderDetails.phone}

Payment Method: {orderDetails.paymentMethod === "qr" ? "QR Payment" : "Card Payment"}

Date: {new Date(orderDetails.createdAt).toLocaleDateString()}{" "} {new Date(orderDetails.createdAt).toLocaleTimeString()}

{orderDetails.status === "Completed" && (

Your eSIM has been delivered to your email. Please check your inbox.

)} {orderDetails.status === "Pending" && (

Your payment is being processed. Your eSIM will be delivered once payment is confirmed.

)}

) : initialOrderId ? (

Order not found. Please check the Order ID and try again.

) : null}

) } [V0_FILE]typescriptreact:file="app/globals.css" isQuickEdit="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 187 100% 50%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 187 100% 50%; --radius: 0.5rem; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Custom animations */ @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } .animate-float { animation: float 3s ease-in-out infinite; } /* Star background */ .star-bg { background-image: radial-gradient(white, rgba(255, 255, 255, 0.2) 2px, transparent 2px); background-size: 50px 50px; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.3); } ::-webkit-scrollbar-thumb { background: rgba(14, 165, 233, 0.5); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: rgba(14, 165, 233, 0.7); } /* Card hover effects */ .card-hover-effect { transition: transform 0.3s ease, box-shadow 0.3s ease; } .card-hover-effect:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } /* Gradient text */ .gradient-text { background: linear-gradient(90deg, #06b6d4, #3b82f6); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; } /* Improved focus styles */ :focus-visible { outline: 2px solid #06b6d4; outline-offset: 2px; } /* Page transitions */ .page-transition-enter { opacity: 0; transform: translateY(10px); } .page-transition-enter-active { opacity: 1; transform: translateY(0); transition: opacity 300ms, transform 300ms; } .page-transition-exit { opacity: 1; transform: translateY(0); } .page-transition-exit-active { opacity: 0; transform: translateY(-10px); transition: opacity 300ms, transform 300ms; } [V0_FILE]typescriptreact:file="tailwind.config.ts" isQuickEdit="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, cyan: { 50: "#ecfeff", 100: "#cffafe", 200: "#a5f3fc", 300: "#67e8f9", 400: "#22d3ee", 500: "#06b6d4", 600: "#0891b2", 700: "#0e7490", 800: "#155e75", 900: "#164e63", 950: "#083344", }, slate: { 50: "#f8fafc", 100: "#f1f5f9", 200: "#e2e8f0", 300: "#cbd5e1", 400: "#94a3b8", 500: "#64748b", 600: "#475569", 700: "#334155", 800: "#1e293b", 900: "#0f172a", 950: "#020617", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="components/contact-info.tsx" import { Phone, Mail, MapPin, Clock } from "lucide-react" export function ContactInfo() { return (

Contact Us

09 650 000 172

info@esimmyanmar.com

Hlaing, Yangon, Myanmar

Business Hours

Monday - Friday: 9AM - 6PM

Saturday: 9AM - 1PM

Sunday: Closed

) } [V0_FILE]plaintext:file="public/images/mmqr-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/logo_512-zVndQzOYlbkFORugvxTaQJa9OYr7IR.png" [V0_FILE]plaintext:file="public/images/payment-logos/cbpay-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/cbpay_logo-6UXso3JGfDHTbMtgklsXZaTtUUlacn.png" [V0_FILE]plaintext:file="public/images/payment-logos/aya-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/aya%20%283%29-KpnTHb6YP730GO3T5F26nmjpfpYAFO.png" [V0_FILE]plaintext:file="public/images/payment-logos/wave-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/wave%20%284%29-foippQcSS47Qm6EHAgCRhJ5GZ3KF0J.png" [V0_FILE]plaintext:file="public/images/payment-logos/uab-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/UABPay-JvZEUEVhKT5AGs9kfBttGflfNKSmMh.png" [V0_FILE]plaintext:file="public/images/esim-ad.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Nov%208%20SMD-2.jpg-863D0a8J9frC0yk7MHr7sJJ7OTbhoI.jpeg" [V0_FILE]typescriptreact:file="components/mmqr-hub.tsx" "use client" import { useState, useEffect } from "react" import Image from "next/image" import { motion } from "framer-motion" import { CreditCard, QrCode, Globe, ShoppingCart, Smartphone, Wallet, Shield, Zap, ArrowRight } from "lucide-react" import { Button } from "@/components/ui/button" const paymentApps = [ { name: "KBZ Pay", logo: null, color: "#1D4289" }, { name: "CB Pay", logo: "/images/payment-logos/cbpay-logo.png", color: "#FFC107" }, { name: "AYA Pay", logo: "/images/payment-logos/aya-logo.png", color: "#E31837" }, { name: "Wave Pay", logo: "/images/payment-logos/wave-logo.png", color: "#FFDD00" }, { name: "UAB Pay", logo: "/images/payment-logos/uab-logo.png", color: "#000000" }, ] const features = [ { id: "payments", title: "Unified Payments", description: "One QR code for all payment methods", icon: , color: "from-cyan-500 to-blue-500", }, { id: "global", title: "Global Connectivity", description: "Use your eSIM worldwide with instant activation", icon: , color: "from-indigo-500 to-purple-500", }, { id: "shopping", title: "Integrated Shopping", description: "Purchase eSIMs directly through the platform", icon: , color: "from-pink-500 to-rose-500", }, { id: "mobile", title: "Mobile Management", description: "Control all your eSIMs from one dashboard", icon: , color: "from-amber-500 to-orange-500", }, { id: "wallet", title: "Digital Wallet", description: "Store payment methods and loyalty cards securely", icon: , color: "from-emerald-500 to-teal-500", }, { id: "security", title: "Enhanced Security", description: "Advanced encryption and biometric authentication", icon: , color: "from-blue-500 to-violet-500", }, ] export function MMQRHub() { const [activeFeature, setActiveFeature] = useState("payments") const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }) useEffect(() => { const handleMouseMove = (e: MouseEvent) => { setMousePosition({ x: e.clientX / window.innerWidth, y: e.clientY / window.innerHeight, }) } window.addEventListener("mousemove", handleMouseMove) return () => window.removeEventListener("mousemove", handleMouseMove) }, []) const parallaxOffset = { x: mousePosition.x * 30 - 15, y: mousePosition.y * 30 - 15, } return (

{/* Animated background elements */}

{/* 3D floating elements */}

MMQR{" "} All-In-One{" "} Platform

One unified system for payments, connectivity, and digital services

{/* Central Hub Visualization */}

{/* Central hub circle */}

{/* Connecting lines and feature nodes */} {features.map((feature, index) => { const angle = index * (360 / features.length) * (Math.PI / 180) const x = Math.cos(angle) * 160 const y = Math.sin(angle) * 160 return (

setActiveFeature(feature.id)} > {feature.icon}

{/* Line connecting to center */}

= 0 ? "100%" : "auto", transform: `rotate(${angle * (180 / Math.PI)}deg)`, transformOrigin: x < 0 ? "left center" : "right center", }} >

) })}

{/* Payment app logos around the hub */}

{paymentApps.map((app, index) => { const angle = (index * (360 / paymentApps.length) + 30) * (Math.PI / 180) const distance = 220 const x = Math.cos(angle) * distance const y = Math.sin(angle) * distance return (

{app.logo ? (

) : (

{app.name.substring(0, 1)}

)}

) })}

{/* Feature details */}

{features.map((feature) => (

{feature.icon}

{feature.title}

{feature.description}

Seamless Integration

Works with all major payment platforms in Myanmar

Instant Processing

Real-time transactions with immediate confirmation

))}

{/* Payment Methods Section */}

One Platform,{" "} Multiple Payment Options

{paymentApps.map((app) => (

{app.logo ? (

) : (

{app.name.substring(0, 1)}

)}

{app.name}

))}

{/* eSIM Integration Section */}

Seamless eSIM Integration

Connect globally with our integrated eSIM technology. Purchase, activate, and manage your eSIMs directly through the MMQR platform.

Instant Activation

Scan QR code to instantly activate your eSIM

Global Coverage

Stay connected in over 190 countries worldwide

Unified Billing

Manage all your eSIM payments through one platform

{/* CTA Section */}

Ready to Experience the{" "} All-In-One{" "} Platform?

Join thousands of users who have simplified their digital life with MMQR's unified platform

) } [V0_FILE]typescriptreact:file="app/mmqr/page.tsx" import { MMQRHub } from "@/components/mmqr-hub" export default function MMQRPage() { return (

) } [V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isQuickEdit="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { HeroSection } from "@/components/hero-section" import { Features } from "@/components/features" import { PaymentMethods } from "@/components/payment-methods" import { ContactInfo } from "@/components/contact-info" export default function Home() { return (

Experience Our New All-In-One MMQR Platform

Discover the future of digital payments and connectivity with our integrated MMQR system

) } [V0_FILE]typescriptreact:file="components/payment-methods.tsx" import { CreditCard, Phone, Mail } from "lucide-react" import Image from "next/image" import Link from "next/link" import { Button } from "@/components/ui/button" export function PaymentMethods() { const paymentMethods = [ { name: "MMQR", color: "#1D4289", logo: "/images/mmqr-logo.png" }, { name: "KBZ Pay", color: "#1D4289" }, { name: "CB Pay", logo: "/images/payment-logos/cbpay-logo.png", color: "#FFC107" }, { name: "AYA Pay", logo: "/images/payment-logos/aya-logo.png", color: "#E31837" }, { name: "Wave Pay", logo: "/images/payment-logos/wave-logo.png", color: "#FFDD00" }, { name: "UAB Pay", logo: "/images/payment-logos/uab-logo.png", color: "#000000" }, ] return (

Accepted Payment Methods

{paymentMethods.map((method) => (

{method.logo ? (

) : ( )}

{method.name}

))}

Contact Information

09 650 000 172

info@esimmyanmar.com

) } [V0_FILE]typescriptreact:file="package.json" { "dependencies": { "framer-motion": "^10.16.4" } } [V0_FILE]typescriptreact:file="components/product-card.tsx" "use client" import Link from "next/link" import { formatCurrency } from "@/lib/utils" import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Wifi, Globe, Clock, MapPin, ShoppingCart } from "lucide-react" import { motion } from "framer-motion" interface Product { id: number name: string slug: string price: number description: string region: string data: string validity: string color: string } interface ProductCardProps { product: Product } export function ProductCard({ product }: ProductCardProps) { // Map color string to Tailwind classes const getColorClasses = (color: string) => { const colorMap: Record = { cyan: { bg: "bg-cyan-500", text: "text-cyan-500", border: "border-cyan-500", gradient: "from-cyan-500 to-blue-500", }, blue: { bg: "bg-blue-500", text: "text-blue-500", border: "border-blue-500", gradient: "from-blue-500 to-indigo-500", }, indigo: { bg: "bg-indigo-500", text: "text-indigo-500", border: "border-indigo-500", gradient: "from-indigo-500 to-purple-500", }, red: { bg: "bg-red-500", text: "text-red-500", border: "border-red-500", gradient: "from-red-500 to-pink-500", }, green: { bg: "bg-green-500", text: "text-green-500", border: "border-green-500", gradient: "from-green-500 to-emerald-500", }, yellow: { bg: "bg-yellow-500", text: "text-yellow-500", border: "border-yellow-500", gradient: "from-yellow-500 to-amber-500", }, } return ( colorMap[color] || { bg: "bg-cyan-500", text: "text-cyan-500", border: "border-cyan-500", gradient: "from-cyan-500 to-blue-500", } ) } const colorClasses = getColorClasses(product.color) // Get icon based on region const getRegionIcon = (region: string) => { switch (region) { case "global": return case "asia": case "europe": return default: return } } return (

{/* Animated background pattern */}

{/* Colored overlay */}

{/* 3D floating elements */} {/* Region icon */}

{getRegionIcon(product.region)}

{/* Badge */}

{product.region === "global" ? "Global" : product.region === "asia" ? "Asia" : product.region === "europe" ? "Europe" : "Myanmar"}

{product.name}

{product.description}

{product.data}

{product.validity}

{formatCurrency(product.price, "MMK")}

) } [V0_FILE]typescriptreact:file="components/qr-code-display.tsx" "use client" import { useState, useEffect } from "react" import { motion } from "framer-motion" import { Copy, CheckCircle, QrCode } from "lucide-react" import { Button } from "@/components/ui/button" import Image from "next/image" interface QRCodeDisplayProps { qrData: string amount?: number currency?: string merchantName?: string colorScheme?: "cyan" | "blue" | "indigo" | "purple" | "pink" } export function QRCodeDisplay({ qrData, amount, currency = "MMK", merchantName = "eSIM Myanmar", colorScheme = "cyan", }: QRCodeDisplayProps) { const [copied, setCopied] = useState(false) const [isAnimating, setIsAnimating] = useState(false) // Get gradient based on color scheme const getGradient = (color: string) => { const gradientMap: Record = { cyan: "from-cyan-500 to-blue-500", blue: "from-blue-500 to-indigo-500", indigo: "from-indigo-500 to-purple-500", purple: "from-purple-500 to-pink-500", pink: "from-pink-500 to-rose-500", } return gradientMap[color] || "from-cyan-500 to-blue-500" } const gradient = getGradient(colorScheme) const copyToClipboard = () => { navigator.clipboard.writeText(qrData) setCopied(true) setTimeout(() => setCopied(false), 2000) } // Trigger animation periodically useEffect(() => { const interval = setInterval(() => { setIsAnimating(true) setTimeout(() => setIsAnimating(false), 2000) }, 5000) return () => clearInterval(interval) }, []) // Generate QR code pattern (simplified representation) const generateQRPattern = () => { const size = 8 const pattern = [] for (let i = 0; i < size; i++) { for (let j = 0; j < size; j++) { // Create fixed patterns for corners and alignment const isCorner = (i < 2 && j < 2) || (i < 2 && j >= size - 2) || (i >= size - 2 && j < 2) const isAlignment = (i === size / 2 - 1 || i === size / 2) && (j === size / 2 - 1 || j === size / 2) // Random pattern for the rest, but with some structure const isRandom = Math.random() > 0.5 pattern.push({ x: j, y: i, filled: isCorner || isAlignment || isRandom, }) } } return pattern } const qrPattern = generateQRPattern() return (

MMQR Payment

Scan with any supported app

{amount && (

Amount

{amount.toLocaleString()} {currency}

)}

{/* QR Code Container with animation */} {/* Animated border */} {/* QR Code visualization */}

{qrPattern.map((cell, index) => (

))} {/* MMQR Logo in center */}

{/* Animated scanner effect */}

{merchantName}

{/* Payment apps logos */}

{[ "/images/payment-logos/cbpay-logo.png", "/images/payment-logos/aya-logo.png", "/images/payment-logos/wave-logo.png", "/images/payment-logos/uab-logo.png", ].map((logo, index) => (

))}

{/* QR Data section */}

MMQR Data

{qrData.substring(0, 40)}...{qrData.substring(qrData.length - 10)}

) } [V0_FILE]typescriptreact:file="app/checkout/page.tsx" "use client" import { useState, useEffect } from "react" import { useRouter, useSearchParams } from "next/navigation" import { z } from "zod" import { zodResolver } from "@hookform/resolvers/zod" import { useForm } from "react-hook-form" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" import { Input } from "@/components/ui/input" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { submitOrder } from "@/lib/actions" import { formatCurrency } from "@/lib/utils" import { ArrowLeft, CreditCard, QrCode, Phone, Mail, CheckCircle, Shield, Smartphone } from "lucide-react" import { QRCodeDisplay } from "@/components/qr-code-display" import { motion } from "framer-motion" import Image from "next/image" // Sample product data - in a real app, this would come from a database const productData = { "global-esim": { name: "Global eSIM", price: 120000, color: "cyan" }, "asia-esim": { name: "Asia eSIM", price: 80000, color: "blue" }, "europe-esim": { name: "Europe eSIM", price: 100000, color: "indigo" }, "ooredoo-esim": { name: "Ooredoo Myanmar", price: 70000, color: "red" }, "mytel-esim": { name: "Mytel Myanmar", price: 70000, color: "green" }, "mpt-esim": { name: "MPT Myanmar", price: 70000, color: "yellow" }, } const formSchema = z.object({ fullName: z.string().min(2, { message: "Please enter your full name" }), email: z.string().email({ message: "Please enter a valid email address" }), phone: z.string().min(9, { message: "Phone number must be at least 9 digits" }), }) export default function CheckoutPage() { const router = useRouter() const searchParams = useSearchParams() const productSlug = searchParams.get("product") const [isSubmitting, setIsSubmitting] = useState(false) const [paymentMethod, setPaymentMethod] = useState("qr") const [orderComplete, setOrderComplete] = useState(false) const [orderId, setOrderId] = useState("") const product = productSlug && productData[productSlug as keyof typeof productData] const form = useForm>({ resolver: zodResolver(formSchema), defaultValues: { fullName: "", email: "", phone: "", }, }) useEffect(() => { if (!product) { router.push("/") } }, [product, router]) if (!product) { return null } async function onSubmit(values: z.infer) { setIsSubmitting(true) try { const newOrderId = await submitOrder({ product: product.name, price: product.price, fullName: values.fullName, email: values.email, phone: values.phone, paymentMethod, }) setOrderId(newOrderId) setOrderComplete(true) // Redirect after 3 seconds setTimeout(() => { router.push(`/track?order=${newOrderId}`) }, 3000) } catch (error) { console.error("Error submitting order:", error) setIsSubmitting(false) } } // Map color string to Tailwind classes const getColorClasses = (color: string) => { const colorMap: Record = { cyan: { bg: "bg-cyan-500", text: "text-cyan-500", border: "border-cyan-500", gradient: "from-cyan-500 to-blue-500", }, blue: { bg: "bg-blue-500", text: "text-blue-500", border: "border-blue-500", gradient: "from-blue-500 to-indigo-500", }, indigo: { bg: "bg-indigo-500", text: "text-indigo-500", border: "border-indigo-500", gradient: "from-indigo-500 to-purple-500", }, red: { bg: "bg-red-500", text: "text-red-500", border: "border-red-500", gradient: "from-red-500 to-pink-500", }, green: { bg: "bg-green-500", text: "text-green-500", border: "border-green-500", gradient: "from-green-500 to-emerald-500", }, yellow: { bg: "bg-yellow-500", text: "text-yellow-500", border: "border-yellow-500", gradient: "from-yellow-500 to-amber-500", }, } return ( colorMap[color] || { bg: "bg-cyan-500", text: "text-cyan-500", border: "border-cyan-500", gradient: "from-cyan-500 to-blue-500", } ) } const colorClasses = getColorClasses(product.color) // MMQR payment data const mmqrData = "00020101021126500015com.mmqrpay.www01152235110100152220208100165355204481253031045802MM5912ESIM Myanmar6006Hlaing61051105164330002MY0113အီးဆင်းမြန်မာ0206လှိုင်63041C92" // Order success screen if (orderComplete) { return (

Order Successful!

Your order has been placed successfully.

Order ID: {orderId}

Product: {product.name}

Amount: {formatCurrency(product.price, "MMK")}

You will be redirected to the order tracking page in a moment...

) } return (

Checkout Complete your purchase of {product.name}

( Full Name )} /> ( Email )} /> ( Phone Number )} />

Payment Method

MMQR Payment Card Payment

Card Number

Expiry Date

CVC

Order Summary

{product.name}

Price {formatCurrency(product.price, "MMK")}

Subtotal {formatCurrency(product.price, "MMK")}

Tax {formatCurrency(0, "MMK")}

Total {formatCurrency(product.price, "MMK")}

We Accept

Instant Delivery

Your eSIM will be delivered to your email immediately after payment confirmation.

Secure Payment

All transactions are encrypted and processed securely.

09 650 000 172

info@esimmyanmar.com

) } [V0_FILE]plaintext:file="public/images/payment-logos/wave-pay.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/wave%20%284%29-j6CiEHMXaF0mLHczjMM2nmCTNHHRs9.png" [V0_FILE]plaintext:file="public/images/payment-logos/aya-pay.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/aya%20%283%29-v41qoROz7lEmPA7rl22WnxiVYejPB6.png" [V0_FILE]plaintext:file="public/images/payment-logos/kbz-pay.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/KBZ-Pay-3i5QoucDADEoqNVDG8YPiecEgOh0it.png" [V0_FILE]plaintext:file="public/images/payment-logos/uab-pay.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/UABPay-ciGj5Ovoom71eqolKKsYsFeAORNoN1.png" [V0_FILE]plaintext:file="public/images/payment-logos/ok-dollar.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/ok%20%282%29-4YPEUfMoKKXsRI6oY5lMiNcQLwCoNS.png" [V0_FILE]plaintext:file="public/images/esim-myanmar-logo-dark.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/eSIM_Myanmar_Logo-3mX7m9k87DJu4I5ofOSwXiLU6gp7ni.png" [V0_FILE]plaintext:file="public/images/esim-myanmar-logo-light.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Adobe%20Express%20-%20file-31msZ8mFPgijIDLJlzD9DJ0ViXeo75.png" [V0_FILE]plaintext:file="public/images/ai-visualization.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/67758a9054f3204686a5b9dc_po_rvLxBQOSSSHy0ANYVZQ-TmUpwaCoJH3kreLBjJQzKXMNoWprbL.webp" [V0_FILE]typescriptreact:file="components/mmqr-dashboard.tsx" "use client" import type React from "react" import { useState, useEffect } from "react" import { motion } from "framer-motion" import Image from "next/image" import { Smartphone, Wifi, QrCode, CreditCard, RefreshCw, Download, Globe, Code, Layers, Cpu, BarChart3, Search, ChevronRight, CheckCircle, AlertCircle, Clock, Settings, Shield, Sparkles, } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Progress } from "@/components/ui/progress" import { Badge } from "@/components/ui/badge" // Telecom providers data const telecomProviders = [ { id: "mpt", name: "MPT", color: "#ffcc00", textColor: "#000000", description: "Myanmar Posts and Telecommunications", services: ["Data", "Voice", "SMS", "eSIM"], }, { id: "atom", name: "ATOM", color: "#00a0e9", textColor: "#ffffff", description: "Advanced Technology for Mobile", services: ["Data", "Voice", "SMS", "eSIM"], }, { id: "ooredoo", name: "OOREDOO", color: "#e60000", textColor: "#ffffff", description: "Ooredoo Myanmar", services: ["Data", "Voice", "SMS", "eSIM"], }, { id: "mytel", name: "MYTEL", color: "#1e88e5", textColor: "#ffffff", description: "Myanmar Telecom", services: ["Data", "Voice", "SMS", "eSIM"], }, ] // Payment methods data const paymentMethods = [ { id: "wave", name: "Wave Pay", logo: "/images/payment-logos/wave-pay.png", status: "active", }, { id: "kbz", name: "KBZ Pay", logo: "/images/payment-logos/kbz-pay.png", status: "active", }, { id: "aya", name: "AYA Pay", logo: "/images/payment-logos/aya-pay.png", status: "active", }, { id: "uab", name: "UAB Pay", logo: "/images/payment-logos/uab-pay.png", status: "active", }, { id: "ok", name: "OK Dollar", logo: "/images/payment-logos/ok-dollar.png", status: "active", }, ] // API services data const apiServices = [ { id: "payment-api", name: "Payment API", description: "Process payments through multiple providers", status: "active", version: "v2.1.0", endpoints: 12, icon: , }, { id: "telecom-api", name: "Telecom API", description: "Connect with telecom providers", status: "active", version: "v1.8.5", endpoints: 24, icon: , }, { id: "esim-api", name: "eSIM API", description: "Manage eSIM provisioning and activation", status: "active", version: "v3.0.1", endpoints: 18, icon: , }, { id: "scan-api", name: "Scan API", description: "QR code generation and scanning", status: "active", version: "v2.4.2", endpoints: 8, icon: , }, { id: "ai-api", name: "AI API", description: "AI-powered analytics and recommendations", status: "active", version: "v1.2.0", endpoints: 15, icon: , }, ] // Recent activities data (for demonstration) const recentActivities = [ { id: 1, type: "payment", description: "Payment processed via Wave Pay", amount: "120,000 MMK", status: "completed", timestamp: "2 minutes ago", }, { id: 2, type: "esim", description: "eSIM activated for MPT", status: "completed", timestamp: "15 minutes ago", }, { id: 3, type: "scan", description: "QR code scanned for payment", status: "completed", timestamp: "1 hour ago", }, { id: 4, type: "update", description: "System updated to version 2.4.0", status: "completed", timestamp: "3 hours ago", }, { id: 5, type: "api", description: "New API key generated for Payment API", status: "completed", timestamp: "5 hours ago", }, ] export function MMQRDashboard() { const [activeTab, setActiveTab] = useState("overview") const [loadingProgress, setLoadingProgress] = useState(0) const [isLoading, setIsLoading] = useState(true) const [selectedService, setSelectedService] = useState(null) // Simulate loading progress useEffect(() => { if (isLoading) { const interval = setInterval(() => { setLoadingProgress((prev) => { const newProgress = prev + Math.random() * 15 if (newProgress >= 100) { clearInterval(interval) setTimeout(() => { setIsLoading(false) }, 500) return 100 } return newProgress }) }, 200) return () => clearInterval(interval) } }, [isLoading]) // Loading screen if (isLoading) { return (

Loading MMQR All-In-One Platform

Initializing services... {Math.round(loadingProgress)}%

) } // Status indicator component const StatusIndicator = ({ status }: { status: string }) => { const statusMap: Record = { active: { color: "bg-green-500", icon: }, pending: { color: "bg-yellow-500", icon: }, error: { color: "bg-red-500", icon: }, completed: { color: "bg-green-500", icon: }, } const { color, icon } = statusMap[status] || { color: "bg-gray-500", icon: null } return (

{status}

) } return (

{/* Header */}

MMQR All-In-One Platform

Unified system for payments, connectivity, and digital services

{/* Main tabs */} Overview Telecom Payment eSIM

API

AI



          {/* Overview Tab Content */}
          
            
              {/* Quick Stats */}
              
                
                  System Status
                
                
                  
                    
                      Payment Services
                      
                    
                    
                      Telecom Services
                      
                    
                    
                      eSIM Services
                      
                    
                    
                      Scan Services
                      
                    
                    
                      AI Services
                      
                    
                  
                
              

              {/* Quick Actions */}
              
                
                  Quick Actions
                
                
                  
                    
                    
                    
                    
                    
                  
                
              

              {/* Recent Activity */}
              
                
                  Recent Activity
                
                
                  
                    {recentActivities.slice(0, 4).map((activity) => (
                      
                        
                          {activity.type === "payment" && }
                          {activity.type === "esim" && }
                          {activity.type === "scan" && }
                          {activity.type === "update" && }
                          {activity.type === "api" && }
                        

                        
                          {activity.description}
                          
                            {activity.timestamp}
                            
                          
                        
                      

                    ))}
                  

                
                
                  
                
              
            


            {/* Featured Services */}
            Featured Services
            
              {/* eSIM Service */}
              
                
                
                  
                    eSIM Services
                    
                      
                    
                  
                  Activate and manage eSIMs
                
                
                  
                    {telecomProviders.map((provider) => (
                      
                        {provider.name}
                      
                    ))}
                  
                  
                    Instantly activate eSIMs for all major telecom providers in Myanmar.
                  
                
                
                  
                
              

              {/* Payment Service */}
              
                
                
                  
                    Payment Services
                    
                      
                    
                  
                  Process payments with multiple providers
                
                
                  
                    
                      {paymentMethods.slice(0, 3).map((method) => (
                        
                          
                        
                      ))}
                      
                        +{paymentMethods.length - 3}
                      
                    
                  
                  One QR code for all payment methods in Myanmar.
                
                
                  
                
              

              {/* Scan Service */}
              
                
                
                  
                    Scan Services
                    
                      
                    
                  
                  Generate and scan QR codes
                
                
                  
                    
                      
                        {Array.from({ length: 16 }).map((_, i) => (
                           0.5 ? "bg-black" : "bg-white"}`}>
                        ))}
                      
                    
                  
                  
                    Generate QR codes for payments, eSIM activation, and more.
                  
                
                
                  
                
              

              {/* AI Service */}
              
                
                
                  
                    AI Services
                    
                      
                    
                  
                  AI-powered analytics and recommendations
                
                
                  
                    
                      
                      
                        
                      
                    
                  
                  
                    Get AI-powered insights and recommendations for your business.
                  
                
                
                  
                
              
            
          

          {/* Telecom Tab Content */}
          
            
              
                
                  
                    Telecom Providers
                    Manage connections with telecom providers
                  
                  
                    
                      {telecomProviders.map((provider) => (
                         setSelectedService(provider.id === selectedService ? null : provider.id)}
                        >
                          
                            
                              {provider.name}
                            
                            
                          
                          {provider.description}
                          
                            {provider.services.map((service) => (
                              
                                {service}
                              
                            ))}
                          
                        
                      ))}
                    
                  
                
              

              
                
                  
                    Service Status
                  
                  
                    
                      {telecomProviders.map((provider) => (
                        
                          {provider.name}
                          
                            
                            
                          
                        
                      ))}
                    
                  
                  
                    
                  
                

                
                  
                    Quick Actions
                  
                  
                    
                      
                      
                      
                    
                  
                
              
            
          

          {/* Payment Tab Content */}
          
            
              
                
                  
                    Payment Methods
                    Manage payment integrations
                  
                  
                    
                      {paymentMethods.map((method) => (
                        
                          
                            
                              
                            
                            
                          
                          {method.name}
                          
                            
                              Integrated
                            
                            
                          
                        
                      ))}

                      {/* Add new payment method */}
                      
                        
                          
                        
                        Add Payment Method
                        Integrate a new payment provider
                      
                    
                  
                

                
                  
                    MMQR Integration
                    One QR code for all payment methods
                  
                  
                    
                      
                        
                          
                            MMQR Code
                            Active
                          

                          
                            
                              
                                {Array.from({ length: 64 }).map((_, i) => (
                                   0.5 ? "bg-black" : "bg-white"}`}>
                                ))}

                                {/* MMQR Logo in center */}
                                
                                  
                                    
                                  
                                
                              
                            
                          

                          
                            {paymentMethods.map((method, index) => (
                              
                                
                              
                            ))}
                          

                          
                            
                          
                        
                      

                      
                        Connected Payment Methods
                        
                          {paymentMethods.map((method) => (
                            
                              
                                
                                  
                                
                                {method.name}
                              
                              
                            
                          ))}
                        

                        Security Features
                        
                          
                            
                              
                              Encryption
                            
                            Enabled
                          
                          
                            
                              
                              Fraud Detection
                            
                            Enabled
                          
                          
                            
                              
                              Transaction Limits
                            
                            Enabled
                          
                        
                      
                    
                  
                
              

              
                
                  
                    Transaction Summary
                  
                  
                    
                      
                        Today
                        120,000 MMK
                      
                      
                        This Week
                        850,000 MMK
                      
                      
                        This Month
                        3,200,000 MMK
                      
                    

                    
                      Payment Methods Usage
                      
                        {paymentMethods.map((method, index) => (
                          
                            
                              
                                
                                  
                                
                                {method.name}
                              
                              {20 - index * 3}%
                            
                            
                          
                        ))}
                      
                    
                  
                  
                    
                  
                

                
                  
                    Quick Actions
                  
                  
                    
                      
                      
                      
                    
                  
                
              
            
          

          {/* eSIM Tab Content */}
          
            
              
                
                  
                    eSIM Management
                    Activate and manage eSIMs for all providers
                  
                  
                    
                      {telecomProviders.map((provider) => (
                        
                          
                            
                              {provider.name} eSIM
                            
                            
                              Available
                            
                          

                          
                            
                              
                            
                            
                              Global Data
                              10GB / 30 Days
                            
                          

                          
                            Price
                            120,000 MMK
                          

                          
                        
                      ))}
                    
                  
                

                
                  
                    eSIM Installation Guide
                    Follow these steps to install your eSIM
                  
                  
                    
                      
                        
                          1
                        
                        
                          Purchase an eSIM
                          
                            Select a provider and purchase an eSIM package that suits your needs.
                          
                        
                      

                      
                        
                          2
                        
                        
                          Scan QR Code
                          
                            After purchase, you'll receive a QR code. Scan this with your phone's camera.
                          
                        
                      

                      
                        
                          3
                        
                        
                          Install eSIM Profile
                          
                            Follow your phone's instructions to download and install the eSIM profile.
                          
                        
                      

                      
                        
                          4
                        
                        
                          Activate and Connect
                          
                            Activate the eSIM in your phone settings and connect to the network.
                          
                        
                      
                    
                  
                
              

              
                
                  
                    Active eSIMs
                  
                  
                    
                      
                        
                          
                            MPT
                          
                          Active
                        
                        
                          Data Remaining
                          5.2 GB
                        
                        
                          Expires
                          15 days
                        
                        
                      

                      
                        
                          
                            OOREDOO
                          
                          
                            Expiring Soon
                          
                        
                        
                          Data Remaining
                          0.8 GB
                        
                        
                          Expires
                          2 days
                        
                        
                      
                    
                  
                  
                    
                  
                

                
                  
                    Device Compatibility
                  
                  
                    
                      
                        iPhone (iOS 12.1+)
                        
                      
                      
                        Samsung (Android 10+)
                        
                      
                      
                        Google Pixel (Android 10+)
                        
                      
                      
                        Huawei (EMUI 10+)
                        
                      
                      
                        Other Android Devices
                        
                      
                    
                  
                  
                    
                  
                
              
            
          

          {/* API Tab Content */}
          
            
              
                
                  
                    API Services
                    Manage and monitor API integrations
                  
                  
                    
                      {apiServices.map((api) => (
                        
                          
                            
                              
                                {api.icon}
                              
                              
                                {api.name}
                                {api.description}
                              
                            
                            
                          

                          
                            
                              Version
                              {api.version}
                            
                            
                              Endpoints
                              {api.endpoints}
                            
                            
                              Status
                              Online
                            
                          

                          
                            
                            
                          

                        

                      ))}
                    

                  
                
              


              
                
                  
                    API Usage
                  
                  
                    
                      {apiServices.map((api) => (
                        
                          
                            
                              
                                {api.icon}
                              
                              {api.name}
                            
                            {Math.floor(Math.random() * 90) + 10}%
                          
                          
                        
                      ))}
                    
                  
                  
                    
                  
                

                
                  
                    API Keys
                  
                  
                    
                      
                        
                          Production Key
                          Active
                        
                        
                          mmqr_prod_*************
                        
                        
                          
                        
                      

                      
                        
                          Development Key
                          Active
                        
                        
                          mmqr_dev_**************
                        
                        
                          
                        
                      
                    
                  
                  
                    
                  
                
              

            

          

          {/* AI Tab Content */}
          
            
              
                
                  
                    AI-Powered Insights
                    Intelligent analytics and recommendations
                  
                  
                    
                      
                      
                    

                    
                      
                        
                          
                            
                          
                          Usage Patterns
                        
                        
                          AI analysis shows peak usage times between 6-8 PM on weekdays. Consider optimizing system
                          resources during these hours.
                        
                        
                      

                      
                        
                          
                            
                          
                          Recommendations
                        
                        
                          Based on user behavior, we recommend adding Wave Pay to your featured payment methods for
                          increased conversion.
                        
                        
                      

                      
                        
                          
                            
                          
                          Security Insights
                        
                        
                          AI has detected unusual login patterns from 3 IP addresses. Consider reviewing security logs.
                        
                        
                      

                      
                        
                          
                            
                          
                          Market Trends
                        
                        
                          AI analysis shows increasing demand for eSIMs in the Yangon region. Consider targeted
                          marketing campaigns.
                        
                        
                      
                    
                  
                
              

              
                
                  
                    AI Features
                  
                  
                    
                      
                        
                          
                            
                          
                          Smart Recommendations
                        
                        
                          AI-powered recommendations based on user behavior and preferences.
                        
                      

                      
                        
                          
                            
                          
                          Fraud Detection
                        
                        
                          AI algorithms to detect and prevent fraudulent transactions.
                        
                      

                      
                        
                          
                            
                          
                          Predictive Analytics
                        
                        Forecast trends and predict future usage patterns.
                      

                      
                        
                          
                            
                          
                          Automated Optimization
                        
                        
                          Automatically optimize system performance based on AI insights.
                        
                      
                    
                  
                  
                    
                  
                

                
                  
                    AI Training Status
                  
                  
                    
                      
                        Model Version
                        v2.4.0
                      
                      
                        Last Trained
                        2 days ago
                      
                      
                        Data Points
                        1.2M
                      
                      
                        Accuracy
                        94.8%
                      
                      
                        Training Status
                        Complete


  )
}

[V0_FILE]typescriptreact:file="app/mmqr-dashboard/page.tsx"
import { MMQRDashboard } from "@/components/mmqr-dashboard"

export default function MMQRDashboardPage() {
  return 
}

[V0_FILE]typescriptreact:file="components/telecom-provider-card.tsx"
"use client"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
import { Wifi, Globe, Phone, Clock } from "lucide-react"

interface TelecomProviderCardProps {
  provider: {
    id: string
    name: string
    logo?: string
    color: string
    textColor: string
    description: string
    services: string[]
    dataAmount?: string
    validity?: string
    price?: number
  }
  onSelect?: (id: string) => void
  isSelected?: boolean
}

export function TelecomProviderCard({ provider, onSelect, isSelected }: TelecomProviderCardProps) {
  return (
     onSelect && onSelect(provider.id)}
    >
      
      
        
          
            {provider.name}
          
          
            Available
          
        
      
      
        
          
            
          
          
            {provider.name} eSIM
            {provider.description}
          
        

        
          {provider.dataAmount && (
            
              
              {provider.dataAmount} Data
            
          )}

          {provider.validity && (
            
              
              Valid for {provider.validity}
            
          )}

          
            
            Local calls & SMS
          
        

        
          {provider.services.map((service) => (
            
              {service}
            
          ))}
        

        {provider.price && (
          
            Price
            {provider.price.toLocaleString()} MMK
          
        )}
      
      
        
      
    
  )
}

// Helper function to darken a color
function adjustColor(color: string, amount: number): string {
  // This is a simplified version - in production you'd want a more robust color manipulation
  return color
}

[V0_FILE]typescriptreact:file="components/payment-method-card.tsx"
"use client"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
import { Settings } from "lucide-react"
import Image from "next/image"

interface PaymentMethodCardProps {
  method: {
    id: string
    name: string
    logo: string
    status: string
    description?: string
  }
  onSelect?: (id: string) => void
  isSelected?: boolean
}

export function PaymentMethodCard({ method, onSelect, isSelected }: PaymentMethodCardProps) {
  return (
     onSelect && onSelect(method.id)}
    >
      
        
          
            
          
          
        
      
      
        {method.name}
        {method.description && {method.description}}
        
          
            Integrated
          
          
        
      
      
        
      
    
  )
}

// Status indicator component
function StatusIndicator({ status }: { status: string }) {
  const statusMap: Record = {
    active: { color: "bg-green-500", label: "Active" },
    pending: { color: "bg-yellow-500", label: "Pending" },
    error: { color: "bg-red-500", label: "Error" },
    inactive: { color: "bg-gray-500", label: "Inactive" },
  }

  const { color, label } = statusMap[status] || { color: "bg-gray-500", label: "Unknown" }

  return (
    
      
      {label}
    
  )
}

[V0_FILE]typescriptreact:file="components/api-service-card.tsx"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
import { Code } from "lucide-react"
import type { ReactNode } from "react"

interface ApiServiceCardProps {
  service: {
    id: string
    name: string
    description: string
    status: string
    version: string
    endpoints: number
    icon: ReactNode
  }
}

export function ApiServiceCard({ service }: ApiServiceCardProps) {
  return (
    
      
        
          
            
              {service.icon}
            
            
              {service.name}
              {service.description}
            
          
          
        
      
      
        
          
            Version
            {service.version}
          
          
            Endpoints
            {service.endpoints}
          
          
            Status
            Online
          
        
      
      
        
        
      
    
  )
}

// Status indicator component
function StatusIndicator({ status }: { status: string }) {
  const statusMap: Record = {
    active: { color: "bg-green-500", label: "Active" },
    pending: { color: "bg-yellow-500", label: "Pending" },
    error: { color: "bg-red-500", label: "Error" },
    inactive: { color: "bg-gray-500", label: "Inactive" },
  }

  const { color, label } = statusMap[status] || { color: "bg-gray-500", label: "Unknown" }

  return (
    
      
      {label}
    
  )
}

[V0_FILE]typescriptreact:file="components/ai-insight-card.tsx"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import type { ReactNode } from "react"

interface AiInsightCardProps {
  insight: {
    id: string
    title: string
    description: string
    icon: ReactNode
    gradient: string
    actionText: string
  }
}

export function AiInsightCard({ insight }: AiInsightCardProps) {
  return (
    
      
        
          
            {insight.icon}
          
          {insight.title}
        
        {insight.description}
        
      
    
  )
}

[V0_FILE]typescriptreact:file="components/loading-screen.tsx"
"use client"

import { useEffect, useState } from "react"
import { motion } from "framer-motion"
import Image from "next/image"
import { Progress } from "@/components/ui/progress"

interface LoadingScreenProps {
  onLoadComplete?: () => void
  minDuration?: number
}

export function LoadingScreen({ onLoadComplete, minDuration = 2000 }: LoadingScreenProps) {
  const [progress, setProgress] = useState(0)

  useEffect(() => {
    const startTime = Date.now()

    const interval = setInterval(() => {
      const elapsed = Date.now() - startTime
      const calculatedProgress = Math.min((elapsed / minDuration) * 100, 99)

      setProgress(calculatedProgress)

      if (elapsed >= minDuration) {
        clearInterval(interval)
        setProgress(100)

        setTimeout(() => {
          onLoadComplete && onLoadComplete()
        }, 500)
      }
    }, 100)

    return () => clearInterval(interval)
  }, [minDuration, onLoadComplete])

  return (
    
      
        
        
      

      Loading MMQR All-In-One Platform
      
        
        
          Initializing services...
          {Math.round(progress)}%
        
      
    
  )
}

eSIM Myanmar

Travel Globally, Connect Locally

Why Choose eSIM?

{feature.title}

Choose Your Destination

Order Status

Order Details

Contact Us

Business Hours

MMQR{" "} All-In-One{" "} Platform

{feature.title}

Seamless Integration

Instant Processing

One Platform,{" "} Multiple Payment Options

{app.name}

Seamless eSIM Integration

Instant Activation

Global Coverage

Unified Billing

Ready to Experience the{" "} All-In-One{" "} Platform?

Experience Our New All-In-One MMQR Platform

Accepted Payment Methods

Contact Information

{product.name}

MMQR Payment

Order Successful!

Payment Method

{product.name}

We Accept

Instant Delivery

Secure Payment

Loading MMQR All-In-One Platform

MMQR All-In-One Platform

Featured Services

{method.name}

Add Payment Method

MMQR Code

Connected Payment Methods

Security Features

Payment Methods Usage

Global Data

Purchase an eSIM

Scan QR Code

Install eSIM Profile

Activate and Connect

{api.name}

Usage Patterns

Recommendations

Security Insights

Market Trends

Smart Recommendations

Fraud Detection

Predictive Analytics

Automated Optimization

{provider.name} eSIM

{method.name}

{service.name}

{insight.title}

Loading MMQR All-In-One Platform

Travel Globally,
Connect Locally

About

Tags

Share

About

Tags

Share

More from esimadmin

More Templates Like This

About

Tags

Share

About

Tags

Share

More from esimadmin

More Templates Like This