[V0_FILE]typescriptreact:file="components/admin-transactions.tsx" isMerged="true" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Search, Download, Eye } from "lucide-react" export function AdminTransactions() { // Sample transaction data const transactions = [ { id: "TRX-001", date: "2025-03-07", customer: "john.doe@example.com", product: "Amazon Gift Card", amount: "$50.00", payment: "KBZ Pay", status: "Completed", }, { id: "TRX-002", date: "2025-03-07", customer: "jane.smith@example.com", product: "Netflix Gift Card", amount: "$30.00", payment: "AYA Pay", status: "Completed", }, { id: "TRX-003", date: "2025-03-06", customer: "robert.johnson@example.com", product: "Spotify Gift Card", amount: "$10.00", payment: "Wave Pay", status: "Completed", }, { id: "TRX-004", date: "2025-03-06", customer: "sarah.williams@example.com", product: "Google Play Gift Card", amount: "$25.00", payment: "UAB Pay", status: "Failed", }, { id: "TRX-005", date: "2025-03-05", customer: "michael.brown@example.com", product: "Apple App Store Gift Card", amount: "$50.00", payment: "CB Pay QR", status: "Pending", }, { id: "TRX-006", date: "2025-03-05", customer: "emily.davis@example.com", product: "Amazon Gift Card", amount: "$100.00", payment: "KBZ Pay", status: "Completed", }, { id: "TRX-007", date: "2025-03-04", customer: "david.miller@example.com", product: "Netflix Gift Card", amount: "$15.00", payment: "AYA Pay", status: "Completed", }, ] return (

Transaction History

Transactions View and manage all gift card transactions.

Transaction ID Date Customer Product Amount Payment Method Status Actions {transactions.map((transaction) => ( {transaction.id} {transaction.date} {transaction.customer} {transaction.product} {transaction.amount} {transaction.payment}

{transaction.status}

))}

) } [V0_FILE]typescriptreact:file="components/admin-payment-settings.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Switch } from "@/components/ui/switch" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { CreditCard, QrCode } from "lucide-react" export function AdminPaymentSettings() { const [activeTab, setActiveTab] = useState("kbz") return (

Payment Gateway Settings

KBZ Pay AYA Pay Wave Pay UAB Pay CB Pay QR

KBZ Pay Settings Configure your KBZ Pay integration settings

Enable KBZ Pay

Allow customers to pay using KBZ Pay

Merchant ID

API Key

Secret Key

Callback URL

This URL will receive payment notifications from KBZ Pay

Test Mode Configure test environment settings

Enable Test Mode

Process test transactions without real money

When test mode is enabled, use these test credentials:

Test Phone: 09123456789
Test OTP: 123456

AYA Pay Settings Configure your AYA Pay integration settings

Enable AYA Pay

Allow customers to pay using AYA Pay

Merchant ID

API Key

Secret Key

Callback URL

This URL will receive payment notifications from AYA Pay

{/* Similar content for other payment tabs */}

Wave Pay Settings Configure your Wave Pay integration settings

Enable Wave Pay

Allow customers to pay using Wave Pay

{/* Wave Pay specific settings */}

{/* Similar fields as other payment methods */}

UAB Pay Settings Configure your UAB Pay integration settings

Enable UAB Pay

Allow customers to pay using UAB Pay

{/* UAB Pay specific settings */}

{/* Similar fields as other payment methods */}

CB Pay QR Settings Configure your CB Pay QR integration settings

Enable CB Pay QR

Allow customers to pay using CB Pay QR

{/* CB Pay QR specific settings */}

{/* Similar fields as other payment methods */}

) } [V0_FILE]typescriptreact:file="components/admin-reports.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Calendar } from "@/components/ui/calendar" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { format } from "date-fns" import { CalendarIcon, Download } from "lucide-react" export function AdminReports() { const [date, setDate] = useState(new Date()) return (

Reports & Analytics

Sales Redemptions Payment Methods Products

Total Sales

$12,345

+18% from previous period

Transactions

1,234

+12% from previous period

Average Order

$35.20

+5% from previous period

Conversion Rate

3.2%

+0.5% from previous period

Sales Overview View your sales performance over time

{/* Sales chart would go here */}

Sales chart visualization

Redemption Analytics Track gift card redemption patterns

{/* Redemption chart would go here */}

Redemption chart visualization

Payment Method Distribution Analyze which payment methods are most popular

{/* Payment methods chart would go here */}

Payment methods chart visualization

Product Performance See which gift cards are selling best

{/* Product performance chart would go here */}

Product performance chart visualization

) } [V0_FILE]typescriptreact:file="lib/actions.ts" isMerged="true" "use server" // This would connect to your Google Sheets API in production // For now, we'll simulate the API calls // Type definitions type GiftCardPurchase = { giftCardId: number amount: number quantity: number email: string paymentMethod: string } type GiftCardCode = { code: string amount: number isRedeemed: boolean expiryDate: Date } // Simulated database of gift card codes const giftCardCodes: Record = { "AMZN-1234-5678-9012": { code: "AMZN-1234-5678-9012", amount: 50, isRedeemed: false, expiryDate: new Date("2026-12-31"), }, "NFLX-2345-6789-0123": { code: "NFLX-2345-6789-0123", amount: 30, isRedeemed: false, expiryDate: new Date("2026-12-31"), }, "SPTF-3456-7890-1234": { code: "SPTF-3456-7890-1234", amount: 10, isRedeemed: true, expiryDate: new Date("2026-12-31"), }, } // Function to purchase a gift card export async function purchaseGiftCard(data: GiftCardPurchase) { try { console.log("Processing purchase:", data) // In a real implementation, this would: // 1. Connect to the payment gateway API // 2. Process the payment // 3. Generate or retrieve gift card codes // 4. Record the transaction in Google Sheets // 5. Send the codes to the customer via email // Simulate API delay await new Promise((resolve) => setTimeout(resolve, 1000)) // Return success response return { success: true, message: "Gift card purchased successfully", transactionId: `TRX-${Math.floor(Math.random() * 10000) .toString() .padStart(4, "0")}`, codes: ["XXXX-XXXX-XXXX-XXXX"], // In production, these would be real codes } } catch (error) { console.error("Purchase failed:", error) throw new Error("Failed to process gift card purchase") } } // Function to redeem a gift card export async function redeemGiftCard(code: string) { try { console.log("Redeeming code:", code) // In a real implementation, this would: // 1. Check if the code exists in Google Sheets // 2. Verify it hasn't been redeemed already // 3. Mark it as redeemed // 4. Return the gift card details // Simulate API delay await new Promise((resolve) => setTimeout(resolve, 1000)) // Check if code exists in our simulated database const giftCard = giftCardCodes[code] if (!giftCard) { throw new Error("Invalid gift card code") } if (giftCard.isRedeemed) { throw new Error("Gift card has already been redeemed") } // Mark as redeemed giftCardCodes[code].isRedeemed = true // Return success response return { success: true, message: "Gift card redeemed successfully", amount: giftCard.amount, } } catch (error) { console.error("Redemption failed:", error) throw new Error("Failed to redeem gift card") } } // Function to check gift card balance export async function checkGiftCardBalance(code: string) { try { console.log("Checking balance for code:", code) // In a real implementation, this would: // 1. Check if the code exists in Google Sheets // 2. Return the remaining balance // Simulate API delay await new Promise((resolve) => setTimeout(resolve, 1000)) // Check if code exists in our simulated database const giftCard = giftCardCodes[code] if (!giftCard) { throw new Error("Invalid gift card code") } // If redeemed, balance is 0 const balance = giftCard.isRedeemed ? 0 : giftCard.amount // Return success response return { success: true, message: "Balance retrieved successfully", balance, expiryDate: giftCard.expiryDate, } } catch (error) { console.error("Balance check failed:", error) throw new Error("Failed to check gift card balance") } } // Function to generate new gift card codes (admin) export async function generateGiftCardCodes(type: string, denomination: number, quantity: number) { try { console.log(`Generating ${quantity} ${type} gift cards worth $${denomination} each`) // In a real implementation, this would: // 1. Generate unique codes // 2. Add them to Google Sheets // 3. Return success status // Simulate API delay await new Promise((resolve) => setTimeout(resolve, 1000)) // Return success response return { success: true, message: `Generated ${quantity} gift card codes successfully`, codesGenerated: quantity, } } catch (error) { console.error("Code generation failed:", error) throw new Error("Failed to generate gift card codes") } } // Function to get transaction history (admin) export async function getTransactionHistory() { try { console.log("Fetching transaction history") // In a real implementation, this would: // 1. Fetch transaction data from Google Sheets // 2. Return formatted transaction data // Simulate API delay await new Promise((resolve) => setTimeout(resolve, 1000)) // Return sample transaction data return { success: true, transactions: [ // Sample transaction data would be returned here ], } } catch (error) { console.error("Failed to fetch transactions:", error) throw new Error("Failed to fetch transaction history") } } // Function to update payment gateway settings (admin) export async function updatePaymentGatewaySettings(gateway: string, settings: any) { try { console.log(`Updating ${gateway} payment gateway settings:`, settings) // In a real implementation, this would: // 1. Update settings in a secure storage // 2. Possibly update Cloudflare Worker configuration // Simulate API delay await new Promise((resolve) => setTimeout(resolve, 1000)) // Return success response return { success: true, message: `${gateway} payment gateway settings updated successfully`, } } catch (error) { console.error("Failed to update payment settings:", error) throw new Error("Failed to update payment gateway settings") } } [V0_FILE]typescriptreact:file="components/stripe.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { Elements } from "@stripe/react-stripe-js" import { loadStripe } from "@stripe/stripe-js" import type { StripeElementsOptions } from "@stripe/stripe-js" // This is a placeholder component to simulate Stripe integration // In a real app, you would use your actual Stripe publishable key const stripePromise = loadStripe("pk_test_placeholder") interface StripeProps { options: StripeElementsOptions children: React.ReactNode className?: string } export function Stripe({ options, children, className }: StripeProps) { const [clientSecret, setClientSecret] = useState("") useEffect(() => { // In a real app, you would fetch the client secret from your server // This is just a simulation setClientSecret("cs_test_placeholder") }, []) return (

{clientSecret && ( {children} )}

) } [V0_FILE]typescriptreact:file="app/api/cloudflare-worker.js" isMerged="true" // This is a sample Cloudflare Worker script that would be deployed to Cloudflare // It handles caching and performance optimization for the gift card system export default { async fetch(request, env, ctx) { const url = new URL(request.url) // Cache static assets if (url.pathname.match(/\.(js|css|png|jpg|svg)$/)) { // Check cache first const cacheKey = new Request(url.toString(), request) const cache = caches.default let response = await cache.match(cacheKey) if (!response) { // If not in cache, get from origin response = await fetch(request) // Clone the response so we can modify headers const responseToCache = new Response(response.body, response) responseToCache.headers.set("Cache-Control", "public, max-age=86400") // Store in cache ctx.waitUntil(cache.put(cacheKey, responseToCache.clone())) } return response } // Handle API requests if (url.pathname.startsWith("/api/")) { // For API requests, proxy to Vercel serverless functions return fetch(request) } // Default: pass through to origin return fetch(request) }, } [V0_FILE]typescriptreact:file="app/api/google-sheets/index.ts" isMerged="true" // This file would contain the Google Sheets API integration // It uses the Google Sheets API to store and retrieve gift card data import { google } from "googleapis" import type { NextRequest } from "next/server" // This is a simplified example of how the Google Sheets integration would work // In a real app, you would need to set up proper authentication and error handling export async function GET(request: NextRequest) { try { // Initialize the Sheets API client const auth = new google.auth.GoogleAuth({ credentials: { client_email: process.env.GOOGLE_SHEETS_CLIENT_EMAIL, private_key: process.env.GOOGLE_SHEETS_PRIVATE_KEY?.replace(/\\n/g, "\n"), }, scopes: ["https://www.googleapis.com/auth/spreadsheets"], }) const sheets = google.sheets({ version: "v4", auth }) // Get the spreadsheet ID from the environment variables const spreadsheetId = process.env.GOOGLE_SHEETS_SPREADSHEET_ID // Example: Read gift card data from the spreadsheet const response = await sheets.spreadsheets.values.get({ spreadsheetId, range: "GiftCards!A2:F", // Adjust range as needed }) const rows = response.data.values || [] // Transform the data into a more usable format const giftCards = rows.map((row) => ({ code: row[0], type: row[1], amount: Number.parseFloat(row[2]), isRedeemed: row[3] === "TRUE", createdAt: row[4], redeemedAt: row[5] || null, })) return Response.json({ giftCards }) } catch (error) { console.error("Google Sheets API error:", error) return Response.json({ error: "Failed to fetch data from Google Sheets" }, { status: 500 }) } } export async function POST(request: NextRequest) { try { const body = await request.json() // Initialize the Sheets API client const auth = new google.auth.GoogleAuth({ credentials: { client_email: process.env.GOOGLE_SHEETS_CLIENT_EMAIL, private_key: process.env.GOOGLE_SHEETS_PRIVATE_KEY?.replace(/\\n/g, "\n"), }, scopes: ["https://www.googleapis.com/auth/spreadsheets"], }) const sheets = google.sheets({ version: "v4", auth }) // Get the spreadsheet ID from the environment variables const spreadsheetId = process.env.GOOGLE_SHEETS_SPREADSHEET_ID // Example: Add a new gift card to the spreadsheet const response = await sheets.spreadsheets.values.append({ spreadsheetId, range: "GiftCards!A2:F", valueInputOption: "USER_ENTERED", requestBody: { values: [ [ body.code, body.type, body.amount, "FALSE", // isRedeemed new Date().toISOString(), // createdAt "", // redeemedAt (empty initially) ], ], }, }) return Response.json({ success: true, message: "Gift card added successfully", }) } catch (error) { console.error("Google Sheets API error:", error) return Response.json({ error: "Failed to add data to Google Sheets" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/payments/[gateway]/route.ts" isFixed="true" isQuickEdit="true" isMerged="true" import { type NextRequest, NextResponse } from "next/server" export async function POST(request: NextRequest, { params }: { params: { gateway: string } }) { const gateway = params.gateway try { const body = await request.json() // Process payment based on the selected gateway switch (gateway) { case "kbz": return await processKBZPayment(body) case "aya": return await processAYAPayment(body) case "wave": return await processWavePayment(body) case "uab": return await processUABPayment(body) case "cb": return await processCBPayment(body) default: return NextResponse.json({ error: "Unsupported payment gateway" }, { status: 400 }) } } catch (error) { console.error(`${gateway} payment processing error:`, error) return NextResponse.json({ error: `Failed to process ${gateway} payment` }, { status: 500 }) } } // Implement payment processing functions for each gateway async function processKBZPayment(data: any) { // Implement KBZ Pay integration // This is a placeholder implementation return NextResponse.json({ success: true, transactionId: `KBZ-${Math.random().toString(36).substring(2, 10).toUpperCase()}`, amount: data.amount, currency: "MMK", status: "completed", timestamp: new Date().toISOString(), }) } // AYA Pay payment processing async function processAYAPayment(data: any) { // In a real app, you would integrate with the AYA Pay API console.log("Processing AYA Pay payment:", data) // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1000)) // Return success response with payment details return NextResponse.json({ success: true, transactionId: `AYA-${Math.random().toString(36).substring(2, 10).toUpperCase()}`, amount: data.amount, currency: "MMK", status: "completed", timestamp: new Date().toISOString(), }) } // Wave Pay payment processing async function processWavePayment(data: any) { // In a real app, you would integrate with the Wave Pay API console.log("Processing Wave Pay payment:", data) // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1000)) // Return success response with payment details return NextResponse.json({ success: true, transactionId: `WAVE-${Math.random().toString(36).substring(2, 10).toUpperCase()}`, amount: data.amount, currency: "MMK", status: "completed", timestamp: new Date().toISOString(), }) } // UAB Pay payment processing async function processUABPayment(data: any) { // In a real app, you would integrate with the UAB Pay API console.log("Processing UAB Pay payment:", data) // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1000)) // Return success response with payment details return NextResponse.json({ success: true, transactionId: `UAB-${Math.random().toString(36).substring(2, 10).toUpperCase()}`, amount: data.amount, currency: "MMK", status: "completed", timestamp: new Date().toISOString(), }) } // CB Pay QR payment processing async function processCBPayment(data: any) { // In a real app, you would integrate with the CB Pay QR API console.log("Processing CB Pay QR payment:", data) // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1000)) // Return success response with payment details return NextResponse.json({ success: true, transactionId: `CB-${Math.random().toString(36).substring(2, 10).toUpperCase()}`, amount: data.amount, currency: "MMK", status: "completed", timestamp: new Date().toISOString(), }) } [V0_FILE]typescript:file="app/api/_middleware.ts" isMerged="true" import { NextResponse } from "next/server" import type { NextRequest } from "next/server" export function middleware(request: NextRequest) { const url = new URL(request.url) // Cache static assets if (url.pathname.match(/\.(js|css|png|jpg|svg)$/)) { const response = NextResponse.next() response.headers.set("Cache-Control", "public, max-age=86400") return response } // Handle API requests if (url.pathname.startsWith("/api/")) { // For API requests, let Vercel handle routing to the appropriate serverless function return NextResponse.next() } // Default: pass through to Next.js return NextResponse.next() } export const config = { matcher: ["/((?!_next/static|_next/image|favicon.ico).*)"], } [V0_FILE]typescript:file="app/api/google-sheets/route.ts" isMerged="true" import { NextResponse } from "next/server" import { google } from "googleapis" const auth = new google.auth.GoogleAuth({ credentials: { client_email: process.env.GOOGLE_SHEETS_CLIENT_EMAIL, private_key: process.env.GOOGLE_SHEETS_PRIVATE_KEY?.replace(/\\n/g, "\n"), }, scopes: ["https://www.googleapis.com/auth/spreadsheets"], }) const sheets = google.sheets({ version: "v4", auth }) export async function GET() { try { const spreadsheetId = process.env.GOOGLE_SHEETS_SPREADSHEET_ID const response = await sheets.spreadsheets.values.get({ spreadsheetId, range: "GiftCards!A2:F", }) const rows = response.data.values || [] const giftCards = rows.map((row) => ({ code: row[0], type: row[1], amount: Number.parseFloat(row[2]), isRedeemed: row[3] === "TRUE", createdAt: row[4], redeemedAt: row[5] || null, })) return NextResponse.json({ giftCards }) } catch (error) { console.error("Google Sheets API error:", error) return NextResponse.json({ error: "Failed to fetch data from Google Sheets" }, { status: 500 }) } } export async function POST(request: Request) { try { const body = await request.json() const spreadsheetId = process.env.GOOGLE_SHEETS_SPREADSHEET_ID const response = await sheets.spreadsheets.values.append({ spreadsheetId, range: "GiftCards!A2:F", valueInputOption: "USER_ENTERED", requestBody: { values: [ [ body.code, body.type, body.amount, "FALSE", // isRedeemed new Date().toISOString(), // createdAt "", // redeemedAt (empty initially) ], ], }, }) return NextResponse.json({ success: true, message: "Gift card added successfully", }) } catch (error) { console.error("Google Sheets API error:", error) return NextResponse.json({ error: "Failed to add data to Google Sheets" }, { status: 500 }) } } [V0_FILE]typescript:file="app/actions.ts" isMerged="true" "use server" import { revalidatePath } from "next/cache" import { kv } from "@vercel/kv" export const runtime = "edge" export async function purchaseGiftCard(data: { giftCardId: number amount: number quantity: number email: string paymentMethod: string }) { try { // Process the purchase // This is a simplified example const transactionId = `TRX-${Math.random().toString(36).substring(2, 10).toUpperCase()}` // Store transaction in Vercel KV await kv.set(`transaction:${transactionId}`, { ...data, status: "completed", timestamp: new Date().toISOString(), }) // Generate gift card codes const codes = Array.from( { length: data.quantity }, () => `GC-${Math.random().toString(36).substring(2, 10).toUpperCase()}`, ) // Store gift card codes in Vercel KV await Promise.all( codes.map((code) => kv.set(`giftcard:${code}`, { amount: data.amount, isRedeemed: false, createdAt: new Date().toISOString(), }), ), ) revalidatePath("/admin/inventory") return { success: true, transactionId, codes } } catch (error) { console.error("Purchase failed:", error) return { success: false, error: "Failed to process gift card purchase" } } } export async function redeemGiftCard(code: string) { try { const giftCard = await kv.get(`giftcard:${code}`) if (!giftCard) { return { success: false, error: "Invalid gift card code" } } if (giftCard.isRedeemed) { return { success: false, error: "Gift card has already been redeemed" } } // Mark as redeemed await kv.set(`giftcard:${code}`, { ...giftCard, isRedeemed: true, redeemedAt: new Date().toISOString(), }) revalidatePath("/admin/transactions") return { success: true, amount: giftCard.amount } } catch (error) { console.error("Redemption failed:", error) return { success: false, error: "Failed to redeem gift card" } } } // Implement other actions (checkGiftCardBalance, generateGiftCardCodes, etc.) similarly [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" import { MainNav } from "@/components/main-nav" import { Footer } from "@/components/footer" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "GiftHub - Digital Gift Cards", description: "Purchase and manage digital gift cards with ease", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="components/main-nav.tsx" isMerged="true" "use client" import Link from "next/link" import { usePathname } from "next/navigation" import { GiftIcon } from "lucide-react" import { Button } from "@/components/ui/button" import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle, } from "@/components/ui/navigation-menu" import { ModeToggle } from "@/components/mode-toggle" export function MainNav() { const pathname = usePathname() return (

GiftHub Shop Manage

Support

) } [V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true" import Link from "next/link" import { GiftIcon } from "lucide-react" export function Footer() { return ( ) } [V0_FILE]typescriptreact:file="app/shop/page.tsx" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" const giftCards = [ { id: 1, name: "Amazon Gift Card", description: "Use at Amazon.com for millions of items", image: "/placeholder.svg?height=200&width=300", denominations: [10, 25, 50, 100], popular: true, }, { id: 2, name: "Netflix Gift Card", description: "Stream your favorite shows and movies", image: "/placeholder.svg?height=200&width=300", denominations: [15, 30, 60, 120], }, { id: 3, name: "Spotify Gift Card", description: "Enjoy ad-free music streaming", image: "/placeholder.svg?height=200&width=300", denominations: [10, 20, 30, 60], }, { id: 4, name: "Steam Gift Card", description: "Purchase games and content on Steam", image: "/placeholder.svg?height=200&width=300", denominations: [20, 50, 100], }, { id: 5, name: "Google Play Gift Card", description: "Apps, games, movies and more", image: "/placeholder.svg?height=200&width=300", denominations: [10, 25, 50, 100], }, { id: 6, name: "Apple App Store Gift Card", description: "For apps, games, music, movies, and more", image: "/placeholder.svg?height=200&width=300", denominations: [15, 25, 50, 100], }, ] export default function ShopPage() { return (

Shop Gift Cards

{giftCards.map((card) => (

{card.popular && ( Popular )}

{card.name} {card.description}

{card.denominations.map((amount) => ( ${amount} ))}

))}

) } [V0_FILE]typescriptreact:file="components/mode-toggle.tsx" isQuickEdit="true" isMerged="true" "use client" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { SunIcon, MoonIcon } from "lucide-react" export function ModeToggle() { const { setTheme, theme } = useTheme() return ( ) } [V0_FILE]typescriptreact:file="components/payment-partners.tsx" isMerged="true" export function PaymentPartners() { return (

Trusted Payment Partners

) } [V0_FILE]typescriptreact:file="components/hero-animation.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { motion } from "framer-motion" import { CheckCircle, Gift, CreditCard, QrCode } from "lucide-react" export function HeroAnimation() { const [currentStep, setCurrentStep] = useState(0) useEffect(() => { const interval = setInterval(() => { setCurrentStep((prev) => (prev + 1) % 4) }, 3000) return () => clearInterval(interval) }, []) return (

GiftHub

{currentStep === 0 && ( <>

Choose a Gift Card

Browse our selection of popular gift cards

)} {currentStep === 1 && ( <>

Select Payment

Choose from multiple Myanmar payment options

)} {currentStep === 2 && ( <>

Scan QR Code

Complete payment with your preferred method

)} {currentStep === 3 && ( <>

Instant Delivery

Receive your gift card code immediately

)}

{[0, 1, 2, 3].map((step) => (

))}

) } [V0_FILE]typescriptreact:file="components/feature-card.tsx" isMerged="true" "use client" import type { ReactNode } from "react" import { motion } from "framer-motion" interface FeatureCardProps { icon: ReactNode title: string description: string imageUrl?: string } export function FeatureCard({ icon, title, description, imageUrl }: FeatureCardProps) { return (

{icon}

{title}

{description}

{imageUrl && (

)} ) } [V0_FILE]typescriptreact:file="app/check-balance/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import { DollarSign, ArrowLeft, QrCode } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { checkGiftCardBalance } from "@/lib/actions" import { LoadingSpinner } from "@/components/loading-spinner" export default function CheckBalancePage() { const [code, setCode] = useState("") const [isLoading, setIsLoading] = useState(false) const [result, setResult] = useState<{ success: boolean; message: string; balance?: number } | null>(null) const [activeTab, setActiveTab] = useState("code") const handleCheck = async (e: React.FormEvent) => { e.preventDefault() if (!code) return setIsLoading(true) setResult(null) try { const response = await checkGiftCardBalance(code) setResult({ success: true, message: "Balance retrieved successfully!", balance: 35.5, // This would come from the API in a real app }) } catch (error) { setResult({ success: false, message: "Invalid code. Please check and try again.", }) } finally { setIsLoading(false) } } return (

Check Gift Card Balance

Enter your gift card code or scan QR to check the remaining balance

Balance Inquiry Check your gift card balance instantly Enter Code Scan QR

Scan the QR code on your gift card to check the balance

{isLoading && (

Checking balance...

)} {result && !isLoading && (

{result.success && }

{result.message}

{result.success && result.balance !== undefined && (

Current Balance: ${result.balance.toFixed(2)}

)}

Need help?{" "} Contact Support

) } [V0_FILE]typescriptreact:file="components/loading-spinner.tsx" isMerged="true" import { cn } from "@/lib/utils" interface LoadingSpinnerProps { size?: "sm" | "md" | "lg" className?: string } export function LoadingSpinner({ size = "md", className }: LoadingSpinnerProps) { const sizeClasses = { sm: "h-4 w-4", md: "h-6 w-6", lg: "h-8 w-8", } return (

) } [V0_FILE]typescriptreact:file="app/shop/[id]/page.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { ArrowLeft, CheckCircle } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/input" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { purchaseGiftCard } from "@/lib/actions" import { useToast } from "@/components/ui/use-toast" import { LoadingSpinner } from "@/components/loading-spinner" export default function GiftCardDetailPage({ params }: { params: { id: string } }) { const [selectedAmount, setSelectedAmount] = useState(null) const [quantity, setQuantity] = useState(1) const [email, setEmail] = useState("") const [paymentMethod, setPaymentMethod] = useState("myanmarpay") const [isLoading, setIsLoading] = useState(false) const [purchaseStep, setPurchaseStep] = useState<"form" | "processing" | "success">("form") const { toast } = useToast() // This would normally be fetched from an API const giftCard = { id: Number.parseInt(params.id), name: "Amazon Gift Card", description: "Use at Amazon.com for millions of items", image: "/placeholder.svg?height=300&width=500", denominations: [10, 25, 50, 100], } const handlePurchase = async () => { if (!selectedAmount) return setIsLoading(true) setPurchaseStep("processing") try { // Simulate API delay await new Promise((resolve) => setTimeout(resolve, 2000)) const result = await purchaseGiftCard({ giftCardId: giftCard.id, amount: selectedAmount, quantity, email, paymentMethod, }) if (result.success) { setPurchaseStep("success") } else { throw new Error(result.error) } } catch (error) { setPurchaseStep("form") toast({ title: "Purchase Failed", description: "There was an error processing your purchase. Please try again.", variant: "destructive", }) } finally { setIsLoading(false) } } const paymentIcons = { myanmarpay: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/mm_pay-DvBkXOlG%20%281%29-kJbkVlYZ2uvpoQdzltLLT6FbQSmGaK.png", eservice: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/eservice-logo%20%282%29-aHcY1ftRLHe3JNMfqdqdeHANnTt9nw.png", onepay: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/66a377b7ebef4174ef88d128_logo_dark%202-HQshqHGPF9LxNLdWGOek6ivc6P4ItC.png", cbpay: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1000092023%20%281%29-EvUmfhUQavdcqKvOLtgzsfsFBoJGW4.png", } return (

{purchaseStep === "form" && (

About this Gift Card

{giftCard.description}

Type: Digital

Delivery: Instant

Validity: 12 months

{giftCard.name} Complete your purchase details below

Select Amount setSelectedAmount(Number.parseInt(value))} className="grid grid-cols-2 gap-2" > {giftCard.denominations.map((amount) => (

${amount}

))}

Quantity

setQuantity(Number.parseInt(e.target.value))} className="rounded-none text-center border-x-0" />

Delivery Email setEmail(e.target.value)} className="border-blue-200 dark:border-blue-800 focus:border-blue-500 focus:ring-blue-500" />

Payment Method MyanmarPay eService OnePay CB Pay {Object.entries(paymentIcons).map(([key, iconUrl]) => ( {key}

Pay securely using {key.charAt(0).toUpperCase() + key.slice(1)}

))}

Total: ${selectedAmount ? selectedAmount * quantity : 0}

)} {purchaseStep === "processing" && (

Processing Your Payment

Please wait while we process your payment. Do not close this window.

Gift Card: {giftCard.name}

Amount: ${selectedAmount}

Quantity: {quantity}

Total: ${selectedAmount ? selectedAmount * quantity : 0}

)} {purchaseStep === "success" && (

Purchase Successful!

Your gift card codes have been sent to {email}

Transaction ID: TRX-{Math.random().toString(36).substring(2, 10).toUpperCase()}

Date: {new Date().toLocaleDateString()}

Total: ${selectedAmount ? selectedAmount * quantity : 0}

)}

) } [V0_FILE]typescriptreact:file="app/redeem/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { redeemGiftCard } from "@/lib/actions" import { useToast } from "@/components/ui/use-toast" import { LoadingSpinner } from "@/components/loading-spinner" import { CheckCircle, QrCode } from "lucide-react" import Link from "next/link" export default function RedeemPage() { const [code, setCode] = useState("") const [isLoading, setIsLoading] = useState(false) const [activeTab, setActiveTab] = useState("code") const [redeemStep, setRedeemStep] = useState<"form" | "processing" | "success">("form") const [result, setResult] = useState<{ amount: number } | null>(null) const { toast } = useToast() const handleRedeem = async (e: React.FormEvent) => { e.preventDefault() if (!code) return setIsLoading(true) setRedeemStep("processing") try { // Simulate API delay await new Promise((resolve) => setTimeout(resolve, 2000)) const result = await redeemGiftCard(code) if (result.success) { setResult({ amount: result.amount || 25 }) setRedeemStep("success") } else { throw new Error(result.error) } } catch (error) { setRedeemStep("form") toast({ title: "Redemption Failed", description: "Invalid or already redeemed code. Please check and try again.", variant: "destructive", }) } finally { setIsLoading(false) } } return (

Redeem Gift Card

Enter your gift card code or scan QR to redeem

{redeemStep === "form" && ( Gift Card Redemption Enter the code from your gift card or scan QR Enter Code Scan QR

Scan the QR code on your gift card to redeem

)} {redeemStep === "processing" && (

Processing Your Redemption

Please wait while we verify your gift card code. Do not close this window.

)} {redeemStep === "success" && result && (

Gift Card Redeemed!

Your gift card has been successfully redeemed

Amount Added to Your Account

${result.amount.toFixed(2)}

)}

Need help?{" "} Contact Support

) } [V0_FILE]typescriptreact:file="app/admin/page.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { GiftIcon, Package, CreditCard, Users, Settings, BarChart3, LogOut, DollarSign, Search, Bell, } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { AdminInventory } from "@/components/admin-inventory" import { AdminTransactions } from "@/components/admin-transactions" import { AdminPaymentSettings } from "@/components/admin-payment-settings" import { AdminReports } from "@/components/admin-reports" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" export default function AdminPage() { const [activeTab, setActiveTab] = useState("inventory") return (

{/* Sidebar */}

GiftHub Admin

Management

{/* Main content */}

Notifications

{[1, 2, 3].map((i) => (

New transaction completed

Transaction #{Math.floor(Math.random() * 10000)} was completed successfully

5 min ago

))}

My Account Profile Settings Logout

Inventory Transactions Payments Reports

Total Revenue

$45,231.89

+20.1% from last month

Sales

+2,350

+180.1% from last month

Active Codes

12,234

+19% from last month

Redemption Rate

73.2%

+5.1% from last month

) } [V0_FILE]typescriptreact:file="app/admin/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/admin-inventory.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Plus, Edit, Trash2, Search, ArrowUpDown } from "lucide-react" import { LoadingSpinner } from "@/components/loading-spinner" export function AdminInventory() { const [isAddDialogOpen, setIsAddDialogOpen] = useState(false) const [isGenerateDialogOpen, setIsGenerateDialogOpen] = useState(false) const [isGenerating, setIsGenerating] = useState(false) const [searchQuery, setSearchQuery] = useState("") const [statusFilter, setStatusFilter] = useState("all") // Sample inventory data const inventory = [ { id: 1, name: "Amazon Gift Card", type: "Digital", denomination: "$10", stock: 245, status: "Active" }, { id: 2, name: "Amazon Gift Card", type: "Digital", denomination: "$25", stock: 189, status: "Active" }, { id: 3, name: "Amazon Gift Card", type: "Digital", denomination: "$50", stock: 120, status: "Active" }, { id: 4, name: "Amazon Gift Card", type: "Digital", denomination: "$100", stock: 78, status: "Active" }, { id: 5, name: "Netflix Gift Card", type: "Digital", denomination: "$15", stock: 210, status: "Active" }, { id: 6, name: "Netflix Gift Card", type: "Digital", denomination: "$30", stock: 156, status: "Active" }, { id: 7, name: "Spotify Gift Card", type: "Digital", denomination: "$10", stock: 189, status: "Active" }, { id: 8, name: "Google Play Gift Card", type: "Digital", denomination: "$25", stock: 134, status: "Low Stock" }, { id: 9, name: "Apple App Store Gift Card", type: "Digital", denomination: "$50", stock: 0, status: "Out of Stock", }, ] const filteredInventory = inventory.filter((item) => { const matchesSearch = item.name.toLowerCase().includes(searchQuery.toLowerCase()) const matchesStatus = statusFilter === "all" || item.status.toLowerCase() === statusFilter.toLowerCase() return matchesSearch && matchesStatus }) const handleGenerateCodes = async () => { setIsGenerating(true) // Simulate API call await new Promise((resolve) => setTimeout(resolve, 2000)) setIsGenerating(false) setIsGenerateDialogOpen(false) } return (

Gift Card Inventory

Current Inventory Manage your gift card inventory and stock levels.

setSearchQuery(e.target.value)} />

Name Type Denomination Stock Status Actions {filteredInventory.length === 0 ? ( No gift cards found matching your filters ) : ( filteredInventory.map((item) => ( {item.name} {item.type} {item.denomination} {item.stock}

{item.status}

)) )}

) } [V0_FILE]typescript:file="tailwind.config.ts" isMerged="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}", ], 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))", }, }, 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]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.75rem; } .dark { --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: 217.2 91.2% 59.8%; --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: 224.3 76.3% 48%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="lib/cloudflare.ts" isMerged="true" /** * A client for interacting with Cloudflare's R2 API */ export class CloudflareR2Client { private token: string private accountId: string private baseUrl: string constructor(token: string, accountId: string) { this.token = token this.accountId = accountId this.baseUrl = `https://api.cloudflare.com/client/v4/accounts/${accountId}` } /** * Helper method to make authenticated requests to Cloudflare API */ private async request(endpoint: string, options: RequestInit = {}) { const url = `${this.baseUrl}${endpoint}` const headers = { Authorization: `Bearer ${this.token}`, "Content-Type": "application/json", ...options.headers, } try { const response = await fetch(url, { ...options, headers, }) const data = await response.json() if (!response.ok) { throw new Error(data.errors?.[0]?.message || `API request failed with status ${response.status}`) } return data } catch (error) { console.error("Cloudflare API request failed:", error) throw error } } /** * Verify the API token is valid */ async verifyToken() { try { return await this.request("/tokens/verify") } catch (error) { throw new Error(`Failed to verify token: ${error instanceof Error ? error.message : String(error)}`) } } /** * List all R2 buckets */ async listBuckets() { try { return await this.request("/r2/buckets") } catch (error) { throw new Error(`Failed to list buckets: ${error instanceof Error ? error.message : String(error)}`) } } /** * Create a new R2 bucket */ async createBucket(name: string, locationHint = "wnam") { try { return await this.request("/r2/buckets", { method: "POST", body: JSON.stringify({ name, locationHint, }), }) } catch (error) { throw new Error(`Failed to create bucket: ${error instanceof Error ? error.message : String(error)}`) } } /** * Delete an R2 bucket */ async deleteBucket(name: string) { try { return await this.request(`/r2/buckets/${name}`, { method: "DELETE", }) } catch (error) { throw new Error(`Failed to delete bucket: ${error instanceof Error ? error.message : String(error)}`) } } } [V0_FILE]typescriptreact:file="components/ui/alert.tsx" isMerged="true" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const alertVariants = cva( "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", { variants: { variant: { default: "bg-background text-foreground", destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive", }, }, defaultVariants: { variant: "default", }, }, ) const Alert = React.forwardRef< HTMLDivElement, React.HTMLAttributes & VariantProps >(({ className, variant, ...props }, ref) => (

)) Alert.displayName = "Alert" const AlertTitle = React.forwardRef>( ({ className, ...props }, ref) => (

), ) AlertTitle.displayName = "AlertTitle" const AlertDescription = React.forwardRef>( ({ className, ...props }, ref) => (

), ) AlertDescription.displayName = "AlertDescription" export { Alert, AlertTitle, AlertDescription } [V0_FILE]typescriptreact:file="app/api/cloudflare/route.ts" isMerged="true" import { NextResponse } from "next/server" export async function POST(req: Request) { try { const { token, accountId, action, bucketName } = await req.json() if (!token || !accountId) { return NextResponse.json({ error: "Missing required parameters" }, { status: 400 }) } const baseUrl = `https://api.cloudflare.com/client/v4/accounts/${accountId}` const headers = { Authorization: `Bearer ${token}`, "Content-Type": "application/json", } let url: string let options: RequestInit = { headers } switch (action) { case "verifyToken": url = "https://api.cloudflare.com/client/v4/user/tokens/verify" break case "listBuckets": url = `${baseUrl}/r2/buckets` break case "createBucket": if (!bucketName) { return NextResponse.json({ error: "Bucket name is required" }, { status: 400 }) } url = `${baseUrl}/r2/buckets` options = { ...options, method: "POST", body: JSON.stringify({ name: bucketName, locationHint: "wnam", }), } break default: return NextResponse.json({ error: "Invalid action" }, { status: 400 }) } const response = await fetch(url, options) const data = await response.json() return NextResponse.json(data) } catch (error) { console.error("Cloudflare API error:", error) return NextResponse.json({ error: "Failed to process request" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="components/cloudflare-client.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { AlertCircle } from "lucide-react" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" export function CloudflareClient() { const [token, setToken] = useState("") const [accountId, setAccountId] = useState("") const [bucketName, setBucketName] = useState("") const [response, setResponse] = useState(null) const [error, setError] = useState(null) const [loading, setLoading] = useState(false) const handleRequest = async (action: string) => { setError(null) setResponse(null) setLoading(true) try { const res = await fetch("/api/cloudflare", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ token, accountId, action, bucketName: action === "createBucket" ? bucketName : undefined, }), }) const data = await res.json() if (!res.ok) { throw new Error(data.error || "Failed to process request") } setResponse(data) } catch (err) { setError(err instanceof Error ? err.message : "An error occurred") } finally { setLoading(false) } } return ( Cloudflare R2 Integration

Cloudflare API Token setToken(e.target.value)} placeholder="Enter your Cloudflare API token" />

Account ID setAccountId(e.target.value)} placeholder="Enter your Cloudflare account ID" />

Create New Bucket

setBucketName(e.target.value)} placeholder="Enter bucket name" />

{error && ( Error {error} )} {response && (

API Response:

{JSON.stringify(response, null, 2)}

)} ) } [V0_FILE]typescriptreact:file="lib/google-sheets.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import { google } from "googleapis" // Cache for auth client to avoid recreating it on every request let authClientCache: any = null // Initialize the Google Sheets API client const getAuthClient = () => { if (authClientCache) return authClientCache const credentials = { client_email: process.env.GOOGLE_SHEETS_CLIENT_EMAIL, private_key: process.env.GOOGLE_SHEETS_PRIVATE_KEY?.replace(/\\n/g, "\n"), } const auth = new google.auth.GoogleAuth({ credentials, scopes: ["https://www.googleapis.com/auth/spreadsheets"], }) authClientCache = auth return auth } // Cache for sheets client to avoid recreating it on every request let sheetsClientCache: any = null // Get the Google Sheets client const getSheetsClient = async () => { if (sheetsClientCache) return sheetsClientCache const auth = getAuthClient() const sheets = google.sheets({ version: "v4", auth }) sheetsClientCache = sheets return sheets } // Get the spreadsheet ID from environment variables const getSpreadsheetId = () => { const spreadsheetId = process.env.GOOGLE_SHEETS_SPREADSHEET_ID if (!spreadsheetId) { throw new Error("GOOGLE_SHEETS_SPREADSHEET_ID environment variable is not set") } return spreadsheetId } // Type definitions for gift card data export interface GiftCard { id: string code: string type: string amount: number isRedeemed: boolean createdAt: string redeemedAt?: string } // Cache for gift card data to reduce API calls let giftCardCache: { data: GiftCard[] timestamp: number } | null = null // Cache expiration time in milliseconds (5 minutes) const CACHE_EXPIRATION = 5 * 60 * 1000 // Get all gift card data from the spreadsheet export async function getGiftCardData(forceRefresh = false): Promise { // Return cached data if available and not expired if (!forceRefresh && giftCardCache && Date.now() - giftCardCache.timestamp < CACHE_EXPIRATION) { return giftCardCache.data } try { const sheets = await getSheetsClient() const spreadsheetId = getSpreadsheetId() const response = await sheets.spreadsheets.values.get({ spreadsheetId, range: "GiftCards!A2:G", // Adjust range as needed }) const rows = response.data.values || [] // Transform the data into a more usable format const giftCards = rows.map((row) => ({ id: row[0], code: row[1], type: row[2], amount: Number(row[3]), isRedeemed: row[4] === "TRUE", createdAt: row[5], redeemedAt: row[6] || undefined, })) // Update cache giftCardCache = { data: giftCards, timestamp: Date.now(), } return giftCards } catch (error) { console.error("Error fetching gift card data:", error) throw error } } // Add a new gift card to the spreadsheet export async function addGiftCard(giftCard: Omit): Promise { try { const sheets = await getSheetsClient() const spreadsheetId = getSpreadsheetId() // Generate a unique ID const id = `GC-${Date.now().toString(36)}-${Math.random().toString(36).substring(2, 7)}`.toUpperCase() const createdAt = new Date().toISOString() const newGiftCard: GiftCard = { id, createdAt, ...giftCard, } // Append the new gift card to the spreadsheet await sheets.spreadsheets.values.append({ spreadsheetId, range: "GiftCards!A2:G", valueInputOption: "USER_ENTERED", requestBody: { values: [ [ newGiftCard.id, newGiftCard.code, newGiftCard.type, newGiftCard.amount, newGiftCard.isRedeemed ? "TRUE" : "FALSE", newGiftCard.createdAt, newGiftCard.redeemedAt || "", ], ], }, }) // Invalidate cache giftCardCache = null return newGiftCard } catch (error) { console.error("Error adding gift card:", error) throw error } } // Update a gift card in the spreadsheet export async function updateGiftCard(giftCard: GiftCard): Promise { try { const sheets = await getSheetsClient() const spreadsheetId = getSpreadsheetId() // First, get all gift cards to find the row index const allGiftCards = await getGiftCardData(true) const index = allGiftCards.findIndex((card) => card.id === giftCard.id) if (index === -1) { throw new Error(`Gift card with ID ${giftCard.id} not found`) } // Update the gift card in the spreadsheet (row index + 2 because of header row and 0-indexing) await sheets.spreadsheets.values.update({ spreadsheetId, range: `GiftCards!A${index + 2}:G${index + 2}`, valueInputOption: "USER_ENTERED", requestBody: { values: [ [ giftCard.id, giftCard.code, giftCard.type, giftCard.amount, giftCard.isRedeemed ? "TRUE" : "FALSE", giftCard.createdAt, giftCard.redeemedAt || "", ], ], }, }) // Invalidate cache giftCardCache = null return giftCard } catch (error) { console.error("Error updating gift card:", error) throw error } } // Redeem a gift card export async function redeemGiftCard(code: string): Promise { try { // Get all gift cards const allGiftCards = await getGiftCardData(true) // Find the gift card with the given code const giftCard = allGiftCards.find((card) => card.code === code) if (!giftCard) { throw new Error(`Gift card with code ${code} not found`) } if (giftCard.isRedeemed) { throw new Error(`Gift card with code ${code} has already been redeemed`) } // Update the gift card const updatedGiftCard: GiftCard = { ...giftCard, isRedeemed: true, redeemedAt: new Date().toISOString(), } // Save the updated gift card return await updateGiftCard(updatedGiftCard) } catch (error) { console.error("Error redeeming gift card:", error) throw error } } // Generate gift card codes export async function generateGiftCardCodes(type: string, amount: number, quantity: number): Promise { try { const sheets = await getSheetsClient() const spreadsheetId = getSpreadsheetId() // Generate all gift cards first const generatedCards: GiftCard[] = [] const values: string[][] = [] for (let i = 0; i < quantity; i++) { // Generate a unique ID and code const id = `GC-${Date.now().toString(36)}-${Math.random().toString(36).substring(2, 7)}`.toUpperCase() const code = `${type.substring(0, 4).toUpperCase()}-${Math.random().toString(36).substring(2, 6)}-${Math.random().toString(36).substring(2, 6)}-${Math.random().toString(36).substring(2, 6)}`.toUpperCase() const createdAt = new Date().toISOString() const newGiftCard: GiftCard = { id, code, type, amount, isRedeemed: false, createdAt, } generatedCards.push(newGiftCard) values.push([ newGiftCard.id, newGiftCard.code, newGiftCard.type, newGiftCard.amount.toString(), "FALSE", newGiftCard.createdAt, "", ]) } // Batch append all gift cards at once for better performance if (values.length > 0) { await sheets.spreadsheets.values.append({ spreadsheetId, range: "GiftCards!A2:G", valueInputOption: "USER_ENTERED", requestBody: { values, }, }) } // Invalidate cache giftCardCache = null return generatedCards } catch (error) { console.error("Error generating gift card codes:", error) throw error } } // Get gift card statistics export async function getGiftCardStats() { try { const giftCards = await getGiftCardData() const totalCards = giftCards.length const activeCards = giftCards.filter((card) => !card.isRedeemed).length const redeemedCards = giftCards.filter((card) => card.isRedeemed).length const totalValue = giftCards.reduce((sum, card) => sum + card.amount, 0) const activeValue = giftCards.filter((card) => !card.isRedeemed).reduce((sum, card) => sum + card.amount, 0) const redeemedValue = giftCards.filter((card) => card.isRedeemed).reduce((sum, card) => sum + card.amount, 0) // Group by type const typeStats = giftCards.reduce( (acc, card) => { if (!acc[card.type]) { acc[card.type] = { total: 0, active: 0, redeemed: 0, totalValue: 0, activeValue: 0, redeemedValue: 0, } } acc[card.type].total += 1 acc[card.type].totalValue += card.amount if (card.isRedeemed) { acc[card.type].redeemed += 1 acc[card.type].redeemedValue += card.amount } else { acc[card.type].active += 1 acc[card.type].activeValue += card.amount } return acc }, {} as Record, ) return { totalCards, activeCards, redeemedCards, totalValue, activeValue, redeemedValue, typeStats, } } catch (error) { console.error("Error getting gift card stats:", error) throw error } } [V0_FILE]typescriptreact:file="components/gift-card-manager.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { AlertCircle, Search, Plus, RefreshCw } from "lucide-react" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" import { LoadingSpinner } from "@/components/loading-spinner" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Label } from "@/components/ui/label" import type { GiftCard } from "@/lib/google-sheets" export function GiftCardManager() { const [activeTab, setActiveTab] = useState("view") const [giftCards, setGiftCards] = useState([]) const [loading, setLoading] = useState(false) const [error, setError] = useState(null) const [searchQuery, setSearchQuery] = useState("") const [statusFilter, setStatusFilter] = useState("all") // Form states for adding a gift card const [newCardCode, setNewCardCode] = useState("") const [newCardType, setNewCardType] = useState("") const [newCardAmount, setNewCardAmount] = useState("") // Form states for generating gift cards const [generateType, setGenerateType] = useState("") const [generateAmount, setGenerateAmount] = useState("") const [generateQuantity, setGenerateQuantity] = useState("10") const [isGenerateDialogOpen, setIsGenerateDialogOpen] = useState(false) // Form states for redeeming a gift card const [redeemCode, setRedeemCode] = useState("") const [redeemResult, setRedeemResult] = useState(null) // Fetch gift cards on component mount useEffect(() => { fetchGiftCards() }, []) // Filter gift cards based on search query and status filter const filteredGiftCards = giftCards.filter((card) => { const matchesSearch = card.code.toLowerCase().includes(searchQuery.toLowerCase()) || card.type.toLowerCase().includes(searchQuery.toLowerCase()) const matchesStatus = statusFilter === "all" || (statusFilter === "redeemed" && card.isRedeemed) || (statusFilter === "active" && !card.isRedeemed) return matchesSearch && matchesStatus }) // Fetch gift cards from the API const fetchGiftCards = async () => { setLoading(true) setError(null) try { const response = await fetch("/api/gift-cards") const data = await response.json() if (!data.success) { throw new Error(data.error || "Failed to fetch gift cards") } setGiftCards(data.giftCards) } catch (err) { setError(err instanceof Error ? err.message : "An error occurred") } finally { setLoading(false) } } // Add a new gift card const handleAddGiftCard = async (e: React.FormEvent) => { e.preventDefault() setLoading(true) setError(null) try { const response = await fetch("/api/gift-cards", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ action: "add", code: newCardCode, type: newCardType, amount: Number(newCardAmount), }), }) const data = await response.json() if (!data.success) { throw new Error(data.error || "Failed to add gift card") } // Add the new gift card to the list setGiftCards([...giftCards, data.giftCard]) // Reset form setNewCardCode("") setNewCardType("") setNewCardAmount("") // Switch to view tab setActiveTab("view") } catch (err) { setError(err instanceof Error ? err.message : "An error occurred") } finally { setLoading(false) } } // Generate gift card codes const handleGenerateGiftCards = async () => { setLoading(true) setError(null) try { const response = await fetch("/api/gift-cards", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ action: "generate", type: generateType, amount: Number(generateAmount), quantity: Number(generateQuantity), }), }) const data = await response.json() if (!data.success) { throw new Error(data.error || "Failed to generate gift cards") } // Add the new gift cards to the list setGiftCards([...giftCards, ...data.giftCards]) // Reset form and close dialog setGenerateType("") setGenerateAmount("") setGenerateQuantity("10") setIsGenerateDialogOpen(false) // Switch to view tab setActiveTab("view") } catch (err) { setError(err instanceof Error ? err.message : "An error occurred") } finally { setLoading(false) } } // Redeem a gift card const handleRedeemGiftCard = async (e: React.FormEvent) => { e.preventDefault() setLoading(true) setError(null) setRedeemResult(null) try { const response = await fetch("/api/gift-cards", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ action: "redeem", code: redeemCode, }), }) const data = await response.json() if (!data.success) { throw new Error(data.error || "Failed to redeem gift card") } // Update the gift card in the list setGiftCards(giftCards.map((card) => (card.id === data.giftCard.id ? data.giftCard : card))) // Set redeem result setRedeemResult(data.giftCard) } catch (err) { setError(err instanceof Error ? err.message : "An error occurred") } finally { setLoading(false) } } return ( Gift Card Manager

View Cards Add Card Redeem Card

setSearchQuery(e.target.value)} />

{error && ( Error {error} )}

ID Code Type Amount Status Created Redeemed {loading && !giftCards.length ? (

Loading gift cards...

) : filteredGiftCards.length === 0 ? ( No gift cards found matching your filters ) : ( filteredGiftCards.map((card) => ( {card.id} {card.code} {card.type} ${card.amount.toFixed(2)}

{card.isRedeemed ? "Redeemed" : "Active"}

{new Date(card.createdAt).toLocaleDateString()} {card.redeemedAt ? new Date(card.redeemedAt).toLocaleDateString() : "-"} )) )}

Gift Card Code setNewCardCode(e.target.value)} required />

Gift Card Type

Amount ($) setNewCardAmount(e.target.value)} required />

{error && ( Error {error} )}

Gift Card Code setRedeemCode(e.target.value)} required />

{error && ( Error {error} )} {redeemResult && ( Success! Gift card {redeemResult.code} has been successfully redeemed for ${redeemResult.amount.toFixed(2)}. )}

) } [V0_FILE]typescriptreact:file="components/ui/dialog.tsx" isMerged="true" "use client" import * as React from "react" import * as DialogPrimitive from "@radix-ui/react-dialog" import { X } from "lucide-react" import { cn } from "@/lib/utils" const Dialog = DialogPrimitive.Root const DialogTrigger = DialogPrimitive.Trigger const DialogPortal = DialogPrimitive.Portal const DialogClose = DialogPrimitive.Close const DialogOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogOverlay.displayName = DialogPrimitive.Overlay.displayName const DialogContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} Close )) DialogContent.displayName = DialogPrimitive.Content.displayName const DialogHeader = ({ className, ...props }: React.HTMLAttributes) => (

) DialogHeader.displayName = "DialogHeader" const DialogFooter = ({ className, ...props }: React.HTMLAttributes) => (

) DialogFooter.displayName = "DialogFooter" const DialogTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogTitle.displayName = DialogPrimitive.Title.displayName const DialogDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogDescription.displayName = DialogPrimitive.Description.displayName export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, } [V0_FILE]typescriptreact:file="app/api/gift-cards/route.ts" isEdit="true" import { NextResponse } from "next/server" import { getGiftCardData, addGiftCard, redeemGiftCard, generateGiftCardCodes } from "@/lib/google-sheets" // Remove the edge runtime directive to use Node.js runtime instead // export const runtime = 'edge'; export async function GET(request: Request) { try { // Get query parameters const { searchParams } = new URL(request.url) const type = searchParams.get("type") const status = searchParams.get("status") // Get all gift cards const giftCards = await getGiftCardData() // Filter gift cards if query parameters are provided let filteredGiftCards = giftCards if (type) { filteredGiftCards = filteredGiftCards.filter((card) => card.type.toLowerCase().includes(type.toLowerCase())) } if (status) { const isRedeemed = status.toLowerCase() === "redeemed" filteredGiftCards = filteredGiftCards.filter((card) => card.isRedeemed === isRedeemed) } return NextResponse.json({ success: true, giftCards: filteredGiftCards, meta: { total: filteredGiftCards.length, active: filteredGiftCards.filter((card) => !card.isRedeemed).length, redeemed: filteredGiftCards.filter((card) => card.isRedeemed).length, }, }) } catch (error) { console.error("Error fetching gift cards:", error) return NextResponse.json({ success: false, error: "Failed to fetch gift cards" }, { status: 500 }) } } export async function POST(request: Request) { try { const body = await request.json() const { action } = body switch (action) { case "add": { const { code, type, amount } = body if (!code || !type || !amount) { return NextResponse.json( { success: false, error: "Missing required fields: code, type, amount" }, { status: 400 }, ) } const newGiftCard = await addGiftCard({ code, type, amount: Number(amount), isRedeemed: false, }) return NextResponse.json({ success: true, giftCard: newGiftCard, message: "Gift card added successfully", }) } case "redeem": { const { code } = body if (!code) { return NextResponse.json({ success: false, error: "Missing required field: code" }, { status: 400 }) } const redeemedGiftCard = await redeemGiftCard(code) return NextResponse.json({ success: true, giftCard: redeemedGiftCard, message: `Gift card ${code} redeemed successfully for $${redeemedGiftCard.amount.toFixed(2)}`, }) } case "generate": { const { type, amount, quantity } = body if (!type || !amount || !quantity) { return NextResponse.json( { success: false, error: "Missing required fields: type, amount, quantity" }, { status: 400 }, ) } const generatedCards = await generateGiftCardCodes(type, Number(amount), Number(quantity)) return NextResponse.json({ success: true, giftCards: generatedCards, message: `Generated ${generatedCards.length} gift cards successfully`, }) } default: return NextResponse.json({ success: false, error: "Invalid action" }, { status: 400 }) } } catch (error) { console.error("Error processing gift card action:", error) return NextResponse.json( { success: false, error: error instanceof Error ? error.message : "An error occurred", }, { status: 500 }, ) } } [V0_FILE]typescriptreact:file="app/api/gift-cards/[code]/route.ts" isEdit="true" import { NextResponse } from "next/server" import { getGiftCardData, redeemGiftCard } from "@/lib/google-sheets" // Remove the edge runtime directive // export const runtime = 'edge'; export async function GET(request: Request, { params }: { params: { code: string } }) { try { const code = params.code // Get all gift cards const giftCards = await getGiftCardData() // Find the gift card with the given code const giftCard = giftCards.find((card) => card.code === code) if (!giftCard) { return NextResponse.json({ success: false, error: `Gift card with code ${code} not found` }, { status: 404 }) } return NextResponse.json({ success: true, giftCard, message: `Gift card ${code} found`, }) } catch (error) { console.error("Error fetching gift card:", error) return NextResponse.json({ success: false, error: "Failed to fetch gift card" }, { status: 500 }) } } export async function POST(request: Request, { params }: { params: { code: string } }) { try { const code = params.code // Redeem the gift card const redeemedGiftCard = await redeemGiftCard(code) return NextResponse.json({ success: true, giftCard: redeemedGiftCard, message: `Gift card ${code} redeemed successfully for $${redeemedGiftCard.amount.toFixed(2)}`, }) } catch (error) { console.error("Error redeeming gift card:", error) return NextResponse.json( { success: false, error: error instanceof Error ? error.message : "Failed to redeem gift card", }, { status: 500 }, ) } } [V0_FILE]typescriptreact:file="app/api/gift-cards/stats/route.ts" isEdit="true" import { NextResponse } from "next/server" import { getGiftCardStats } from "@/lib/google-sheets" // Remove the edge runtime directive // export const runtime = 'edge'; export async function GET() { try { const stats = await getGiftCardStats() return NextResponse.json({ success: true, stats, }) } catch (error) { console.error("Error fetching gift card stats:", error) return NextResponse.json({ success: false, error: "Failed to fetch gift card statistics" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/chat/context/route.ts" import { NextResponse } from "next/server" import { getGiftCardStats } from "@/lib/google-sheets" // This endpoint uses Node.js runtime since it interacts with Google Sheets export async function GET() { try { const stats = await getGiftCardStats() // Create a summary of gift card data for context const context = ` Gift Card System Context: - Total gift cards: ${stats.totalCards} - Active gift cards: ${stats.activeCards} - Redeemed gift cards: ${stats.redeemedCards} - Total value: $${stats.totalValue.toFixed(2)} ` return NextResponse.json({ success: true, context, }) } catch (error) { console.error("Error fetching gift card context:", error) return NextResponse.json({ success: false, error: "Failed to fetch gift card context" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import { useChat } from "ai/react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { GiftCardManager } from "@/components/gift-card-manager" import { LoadingSpinner } from "@/components/loading-spinner" export default function Home() { const [activeTab, setActiveTab] = useState("chat") const [systemMessage, setSystemMessage] = useState("You are a helpful assistant for a gift card management system.") // Fetch gift card context when the component mounts useEffect(() => { const fetchContext = async () => { try { const response = await fetch("/api/chat/context") const data = await response.json() if (data.success && data.context) { setSystemMessage(`You are a helpful assistant for a gift card management system. ${data.context}`) } } catch (error) { console.error("Error fetching context:", error) // Continue with default system message if there's an error } } fetchContext() }, []) const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({ api: "/api/chat", initialMessages: [ { id: "welcome", role: "assistant", content: "Welcome to the Gift Card System! I can help you with managing gift cards, answering questions about the system, or providing guidance on how to use the features. What would you like to know?", }, ], body: { system: systemMessage, }, }) return (

AI Assistant Gift Card Manager Gift Card System Assistant {messages.map((m) => (

{m.content}

))} {isLoading && (

Thinking...

)}

) } [V0_FILE]typescriptreact:file="app/api/chat/route.ts" isFixed="true" isEdit="true" import { openai } from "@ai-sdk/openai" import { streamText } from "ai" // We can keep the edge runtime for the chat API since it doesn't use Google Sheets directly export const runtime = "edge" export async function POST(req: Request) { const { messages, system } = await req.json() // Use the system message from the client or fall back to a default const systemMessage = system || "You are a helpful assistant for a gift card management system." // Process the messages with the AI model const result = streamText({ model: openai("gpt-4o"), messages, system: systemMessage, }) return result.toDataStreamResponse() }

About

Tags

Share

More from i-cover-aolcom

More Templates Like This

About

Tags

Share

About

Tags

Share

More from i-cover-aolcom

More Templates Like This