[V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/store/[id]/page.tsx" isMerged="true" "use client" import Image from "next/image" import { ArrowLeft, Heart, Share, Star, MapPin, Phone, Mail, Globe } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Separator } from "@/components/ui/separator" interface Store { id: string name: string type: string logo: string coverImage: string rating: number reviews: number location: string description: string featured: boolean gallery: string[] } interface StorePageProps { store: Store onBack: () => void } export default function StorePage({ store, onBack }: StorePageProps) { return (

{/* Header */}

{/* Store Info */}

{store.name.charAt(0)}

{store.name}

{store.type}

{store.rating} ({store.reviews} reviews)

{store.location}

{/* Description */}

About

{store.description}

{/* Contact Info */}

Contact

+1 (555) 123-4567

contact@{store.name.toLowerCase().replace(" ", "")}.com

www.{store.name.toLowerCase().replace(" ", "")}.com

{/* Fashion Gallery */}

Fashion Gallery

{store.gallery.map((image, index) => ( {`Fashion

))}

{/* Action Buttons */}

) } [V0_FILE]typescriptreact:file="components/ui/separator.tsx" isMerged="true" "use client" import * as React from "react" import * as SeparatorPrimitive from "@radix-ui/react-separator" import { cn } from "@/lib/utils" const Separator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => ( )) Separator.displayName = SeparatorPrimitive.Root.displayName export { Separator } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true" import type * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", }, }, defaultVariants: { variant: "default", }, }, ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return

} export { Badge, badgeVariants } [V0_FILE]typescript:file="contexts/pi-auth-context.tsx" type="code-project" isLocked="true" isMerged="true" "use client"; import React, { createContext, useContext, useState, useEffect, type ReactNode, } from "react"; import { PI_NETWORK_CONFIG, BACKEND_URLS } from "@/lib/system-config"; import { api, setApiAuthToken } from "@/lib/api"; export type LoginDTO = { id: string; username: string; credits_balance: number; terms_accepted: boolean; }; interface PiAuthResult { accessToken: string; user: { uid: string; username: string; }; } declare global { interface Window { Pi: { init: (config: { version: string; sandbox?: boolean }) => Promise; authenticate: (scopes: string[], paymentCallback?: (payment: any) => Promise) => Promise; }; } } const COMMUNICATION_REQUEST_TYPE = '@pi:app:sdk:communication_information_request'; const DEFAULT_ERROR_MESSAGE = 'Failed to authenticate or login. Please refresh and try again.'; function isInIframe(): boolean { try { return window.self !== window.top; } catch (error) { // Cross-origin access may throw when in an iframe if ( error instanceof DOMException && (error.name === 'SecurityError' || error.code === DOMException.SECURITY_ERR || error.code === 18) ) { return true; } // Firefox may throw generic Permission denied errors if (error instanceof Error && /Permission denied/i.test(error.message)) { return true; } throw error; } } function parseJsonSafely(value: any): any { if (typeof value === 'string') { try { return JSON.parse(value); } catch (error) { return null; } } return typeof value === 'object' && value !== null ? value : null; } interface PiAuthContextType { isAuthenticated: boolean; authMessage: string; hasError: boolean; piAccessToken: string | null; userData: LoginDTO | null; error: string | null; reinitialize: () => Promise; } const PiAuthContext = createContext(undefined); const loadPiSDK = (): Promise => { return new Promise((resolve, reject) => { const script = document.createElement("script"); if (!PI_NETWORK_CONFIG.SDK_URL) { throw new Error("SDK URL is not set"); } script.src = PI_NETWORK_CONFIG.SDK_URL; script.async = true; script.onload = () => { console.log("✅ Pi SDK script loaded successfully"); resolve(); }; script.onerror = () => { console.error("❌ Failed to load Pi SDK script"); reject(new Error("Failed to load Pi SDK script")); }; document.head.appendChild(script); }); }; /** * Requests authentication credentials from the parent window (App Studio) via postMessage. * Returns null if not in iframe, timeout, or missing token (non-fatal check). * * @returns {Promise<{accessToken: string, appId: string}|null>} Resolves with credentials or null */ function requestParentCredentials(): Promise<{ accessToken: string; appId: string | null } | null> { // Early return if not in an iframe if (!isInIframe()) { return Promise.resolve(null); } const requestId = `${Date.now()}-${Math.random().toString(16).slice(2)}`; const timeoutMs = 1500; return new Promise((resolve) => { let timeoutId: ReturnType | null = null; // Cleanup function to remove listener and clear timeout const cleanup = (listener: (event: MessageEvent) => void) => { window.removeEventListener('message', listener); if (timeoutId !== null) { clearTimeout(timeoutId); } }; const messageListener = (event: MessageEvent) => { // Security: only accept messages from parent window if (event.source !== window.parent) { return; } // Validate message type and request ID match const data = parseJsonSafely(event.data); if (!data || data.type !== COMMUNICATION_REQUEST_TYPE || data.id !== requestId) { return; } cleanup(messageListener); // Extract credentials from response payload const payload = typeof data.payload === 'object' && data.payload !== null ? data.payload : {}; const accessToken = typeof payload.accessToken === 'string' ? payload.accessToken : null; const appId = typeof payload.appId === 'string' ? payload.appId : null; // Return credentials or null if missing token resolve(accessToken ? { accessToken, appId } : null); }; // Set timeout handler (resolve with null on timeout) timeoutId = setTimeout(() => { cleanup(messageListener); resolve(null); }, timeoutMs); // Register listener before sending request to avoid race condition window.addEventListener('message', messageListener); // Send request to parent window to get credentials window.parent.postMessage( JSON.stringify({ type: COMMUNICATION_REQUEST_TYPE, id: requestId }), '*' ); }); } export function PiAuthProvider({ children }: { children: ReactNode }) { const [isAuthenticated, setIsAuthenticated] = useState(false); const [authMessage, setAuthMessage] = useState("Initializing Pi Network..."); const [hasError, setHasError] = useState(false); const [piAccessToken, setPiAccessToken] = useState(null); const [userData, setUserData] = useState(null); const [error, setError] = useState(null); const authenticateAndLogin = async (accessToken: string, appId: string | null): Promise => { setAuthMessage("Logging in..."); let endpoint: string; let payload: { pi_auth_token: string; app_id?: string }; if (appId) { // Use /login/preview when appId is provided (App Studio iframe flow) endpoint = BACKEND_URLS.LOGIN_PREVIEW; payload = { pi_auth_token: accessToken, app_id: appId }; } else { // Use /login when appId is null (normal Pi app context) endpoint = BACKEND_URLS.LOGIN; payload = { pi_auth_token: accessToken }; } const loginRes = await api.post(endpoint, payload); if (accessToken) { setPiAccessToken(accessToken); setApiAuthToken(accessToken); } setUserData(loginRes.data); }; const getErrorMessage = (error: unknown): string => { if (!(error instanceof Error)) return "An unexpected error occurred. Please try again."; const errorMessage = error.message; if (errorMessage.includes("SDK failed to load")) return "Failed to load Pi Network SDK. Please check your internet connection."; if (errorMessage.includes("authenticate")) return "Pi Network authentication failed. Please try again."; if (errorMessage.includes("login")) return "Failed to connect to backend server. Please try again later."; return `Authentication error: ${errorMessage}`; }; const authenticateViaPiSdk = async (): Promise => { setAuthMessage("Initializing Pi Network..."); await window.Pi.init({ version: "2.0", sandbox: PI_NETWORK_CONFIG.SANDBOX, }); setAuthMessage("Authenticating with Pi Network..."); const piAuthResult = await window.Pi.authenticate(["username"]); if (!piAuthResult.accessToken) { throw new Error(DEFAULT_ERROR_MESSAGE); } await authenticateAndLogin(piAuthResult.accessToken, null); }; const initializePiAndAuthenticate = async () => { setError(null); setHasError(false); try { // Probe for parent credentials (App Studio iframe environment) const parentCredentials = await requestParentCredentials(); // If parent (App Studio) provides credentials, use iframe flow if (parentCredentials) { await authenticateAndLogin(parentCredentials.accessToken, parentCredentials.appId); } else { // Fallback to Pi SDK authentication setAuthMessage("Loading Pi Network SDK..."); // Only load if not already loaded if (typeof window.Pi === "undefined") { await loadPiSDK(); } if (typeof window.Pi === "undefined") { throw new Error("SDK failed to load: Pi object not available after script load"); } await authenticateViaPiSdk(); } setIsAuthenticated(true); setHasError(false); } catch (err) { console.error("❌ Pi Network initialization failed:", err); setHasError(true); const errorMessage = getErrorMessage(err); setAuthMessage(errorMessage); setError(errorMessage); } }; useEffect(() => { initializePiAndAuthenticate(); }, []); const value: PiAuthContextType = { isAuthenticated, authMessage, hasError, piAccessToken, userData, error, reinitialize: initializePiAndAuthenticate, }; return ( {children} ); } /** * Hook to access Pi Network authentication state and user data * * Must be used within a component wrapped by PiAuthProvider. * Provides read-only access to authentication state and user data. * * @returns {PiAuthContextType} Authentication state and methods * @throws {Error} If used outside of PiAuthProvider * * @example * const { piAccessToken, userData, isAuthenticated, reinitialize } = usePiAuth(); */ export function usePiAuth() { const context = useContext(PiAuthContext); if (context === undefined) { throw new Error("usePiAuth must be used within a PiAuthProvider"); } return context; } [V0_FILE]typescript:file="components/auth-loading-screen.tsx" type="code-project" isLocked="true" isMerged="true" "use client"; import { usePiAuth } from "@/contexts/pi-auth-context"; export function AuthLoadingScreen() { const { authMessage, reinitialize } = usePiAuth(); const isError = authMessage.toLowerCase().includes("failed"); return (

Pi Network Authentication

{authMessage}

{isError && ( )}

); } [V0_FILE]typescript:file="components/app-wrapper.tsx" type="code-project" isLocked="true" isMerged="true" "use client"; import type { ReactNode } from "react"; import { PiAuthProvider, usePiAuth } from "@/contexts/pi-auth-context"; import { AuthLoadingScreen } from "./auth-loading-screen"; function AppContent({ children }: { children: ReactNode }) { const { isAuthenticated } = usePiAuth(); if (!isAuthenticated) return ; return <>{children}; } export function AppWrapper({ children }: { children: ReactNode }) { return ( {children} ); } [V0_FILE]typescript:file="app/layout.tsx" type="code-project" isLocked="true" isMerged="true" import type React from "react"; import type { Metadata } from "next"; import { GeistSans } from "geist/font/sans"; import { GeistMono } from "geist/font/mono"; import { AppWrapper } from "@/components/app-wrapper"; import "./globals.css"; export const metadata: Metadata = { title: "Made with App Studio", description: "Pi Network app", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( {children} ); } [V0_FILE]typescript:file="lib/api.ts" type="code-project" isLocked="true" isMerged="true" /** * Global fetch-based client for making API requests. * * - Set auth with `setApiAuthToken(token)`; it injects the Authorization header. * - Parses JSON automatically; for 204 responses `data` is `null`. * - Returns `{ data, status, statusText, headers }`. * - On non-2xx, throws an Error with `status` and `data`. * * @example * import { api } from '@/lib/api'; * * const createThing = async () => { * const { data } = await api.post('/api/your-endpoint', { data: 'your data' }); * console.log(data); * }; * * await api.get('/api/users'); * await api.put('/api/user/123', { name: 'Updated' }); * await api.delete('/api/user/123'); */ type FetchResponse = { data: T; status: number; statusText: string; headers: Headers; }; export interface ApiError extends Error { status: number; data: T; } let authToken: string | null = null; const defaultHeaders: Record = { "Content-Type": "application/json", }; const request = async ( url: string, init: RequestInit = {} ): Promise> => { const headers: Record = { ...defaultHeaders, ...(init.headers as Record | undefined), }; if (authToken) headers["Authorization"] = authToken; const response = await fetch(url, { ...init, headers }); const contentType = response.headers.get("content-type") || ""; const isJson = contentType.includes("application/json"); const data = response.status === 204 ? null : isJson ? await response.json() : await response.text(); if (!response.ok) { const error = new Error( response.statusText || "Request failed" ) as ApiError; error.status = response.status; error.data = data as T; throw error; } return { data: data as T, status: response.status, statusText: response.statusText, headers: response.headers, }; }; export const api = { get: (url: string, init?: RequestInit) => request(url, { ...init, method: "GET" }), delete: (url: string, init?: RequestInit) => request(url, { ...init, method: "DELETE" }), post: (url: string, body?: any, init?: RequestInit) => request(url, { ...init, method: "POST", body: body === undefined ? init?.body : JSON.stringify(body), }), put: (url: string, body?: any, init?: RequestInit) => request(url, { ...init, method: "PUT", body: body === undefined ? init?.body : JSON.stringify(body), }), patch: (url: string, body?: any, init?: RequestInit) => request(url, { ...init, method: "PATCH", body: body === undefined ? init?.body : JSON.stringify(body), }), }; export const setApiAuthToken = (token: string) => { authToken = token; }; [V0_FILE]typescript:file="lib/system-config.ts" type="code-project" isLocked="true" isMerged="true" export const PI_NETWORK_CONFIG = { SDK_URL: "https://sdk.minepi.com/pi-sdk.js", SANDBOX: false, } as const; export const BACKEND_CONFIG = { BASE_URL: "https://backend.appstudio-u7cm9zhmha0ruwv8.piappengine.com", BLOCKCHAIN_BASE_URL: "https://api.testnet.minepi.com", } as const; export const BACKEND_URLS = { LOGIN: `${BACKEND_CONFIG.BASE_URL}/v1/login`, LOGIN_PREVIEW: `${BACKEND_CONFIG.BASE_URL}/v1/login/preview`, GET_PRODUCTS: (appId: string) => `${BACKEND_CONFIG.BASE_URL}/v1/apps/${appId}/products`, GET_PAYMENT: (paymentId: string) => `${BACKEND_CONFIG.BASE_URL}/proxy/v2/payments/${paymentId}`, APPROVE_PAYMENT: (paymentId: string) => `${BACKEND_CONFIG.BASE_URL}/proxy/v2/payments/${paymentId}/approve`, COMPLETE_PAYMENT: (paymentId: string) => `${BACKEND_CONFIG.BASE_URL}/proxy/v2/payments/${paymentId}/complete`, } as const; export const PI_PLATFORM_URLS = {} as const; export const PI_BLOCKCHAIN_URLS = { GET_TRANSACTION: (txid: string) => `${BACKEND_CONFIG.BLOCKCHAIN_BASE_URL}/transactions/${txid}/effects`, } as const; [V0_FILE]typescriptreact:file="components/bottom-nav.tsx" isMerged="true" "use client" import { Home, Store, Heart, ShoppingCart, User } from "lucide-react" import { cn } from "@/lib/utils" import { useLanguage } from "@/contexts/language-context" interface BottomNavProps { activeTab: string onTabChange: (tab: string) => void } export function BottomNav({ activeTab, onTabChange }: BottomNavProps) { const { t } = useLanguage() const tabs = [ { id: "home", label: t.nav.home, icon: Home }, { id: "stores", label: t.store.title, icon: Store }, { id: "favorites", label: t.product.reviews, icon: Heart }, { id: "cart", label: t.nav.cart, icon: ShoppingCart }, { id: "profile", label: t.nav.profile, icon: User }, ] return (

{tabs.map((tab) => { const Icon = tab.icon const isActive = activeTab === tab.id return ( ) })}

) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "15.5.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76", "geist": "1.5.1" }, "devDependencies": { "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^3.4.17", "typescript": "^5" } } [V0_FILE]typescript:file="hooks/use-pi-payment.ts" isMerged="true" "use client" import { useState } from "react" import { usePiAuth } from "@/contexts/pi-auth-context" import { api } from "@/lib/api" import { BACKEND_URLS } from "@/lib/system-config" export interface PaymentMetadata { productId?: string orderId?: string itemName: string itemType: "product" | "subscription" | "promotion" } export interface PiPayment { identifier: string amount: number memo: string metadata: PaymentMetadata } declare global { interface Window { Pi: { init: (config: { version: string; sandbox?: boolean }) => Promise authenticate: ( scopes: string[], paymentCallback?: (payment: any) => Promise ) => Promise createPayment: ( payment: { amount: number memo: string metadata: PaymentMetadata }, callbacks: { onReadyForServerApproval: (paymentId: string) => void onReadyForServerCompletion: (paymentId: string, txid: string) => void onCancel: (paymentId: string) => void onError: (error: Error, payment?: any) => void } ) => void } } } export function usePiPayment() { const [isProcessing, setIsProcessing] = useState(false) const [error, setError] = useState(null) const { piAccessToken } = usePiAuth() const createPayment = async ( amount: number, memo: string, metadata: PaymentMetadata ): Promise => { if (!piAccessToken) { setError("Not authenticated with Pi Network") return false } setIsProcessing(true) setError(null) return new Promise((resolve) => { try { window.Pi.createPayment( { amount, memo, metadata, }, { onReadyForServerApproval: async (paymentId: string) => { console.log("[v0] Payment ready for approval:", paymentId) try { await api.post(BACKEND_URLS.APPROVE_PAYMENT(paymentId)) console.log("[v0] Payment approved:", paymentId) } catch (err) { console.error("[v0] Failed to approve payment:", err) setError("Failed to approve payment") setIsProcessing(false) resolve(false) } }, onReadyForServerCompletion: async ( paymentId: string, txid: string ) => { console.log("[v0] Payment ready for completion:", paymentId, txid) try { await api.post(BACKEND_URLS.COMPLETE_PAYMENT(paymentId), { txid, }) console.log("[v0] Payment completed:", paymentId) setIsProcessing(false) resolve(true) } catch (err) { console.error("[v0] Failed to complete payment:", err) setError("Failed to complete payment") setIsProcessing(false) resolve(false) } }, onCancel: (paymentId: string) => { console.log("[v0] Payment cancelled:", paymentId) setIsProcessing(false) resolve(false) }, onError: (error: Error) => { console.error("[v0] Payment error:", error) setError(error.message || "Payment failed") setIsProcessing(false) resolve(false) }, } ) } catch (err) { console.error("[v0] Failed to create payment:", err) setError("Failed to initiate payment") setIsProcessing(false) resolve(false) } }) } return { createPayment, isProcessing, error, } } [V0_FILE]typescriptreact:file="components/store-subscription-page.tsx" isMerged="true" "use client" import { useState } from "react" import { ArrowLeft, Check, Crown, Sparkles, TrendingUp } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { usePiPayment } from "@/hooks/use-pi-payment" interface StoreSubscriptionPageProps { storeName: string onBack: () => void } const plans = [ { id: "basic", name: "Basic", price: 9.99, duration: "month", icon: Sparkles, features: [ "Store listing in marketplace", "Up to 50 products", "Basic analytics", "Standard support", "Mobile responsive storefront", ], }, { id: "premium", name: "Premium", price: 29.99, duration: "month", icon: Crown, popular: true, features: [ "Featured store placement", "Unlimited products", "Advanced analytics & insights", "Priority support 24/7", "Custom branding & themes", "Marketing tools", "Social media integration", ], }, { id: "featured", name: "Featured", price: 99.99, duration: "month", icon: TrendingUp, features: [ "Homepage featured placement", "Unlimited products & collections", "AI-powered recommendations", "Dedicated account manager", "Custom domain support", "Advanced SEO tools", "Exclusive designer badge", "Banner ad placement", ], }, ] export function StoreSubscriptionPage({ storeName, onBack, }: StoreSubscriptionPageProps) { const [selectedPlan, setSelectedPlan] = useState(null) const [showSuccess, setShowSuccess] = useState(false) const { createPayment, isProcessing, error } = usePiPayment() const handleSubscribe = async (plan: typeof plans[0]) => { const success = await createPayment( plan.price, `${storeName} - ${plan.name} Plan Subscription`, { productId: `SUBSCRIPTION-${plan.id}`, itemName: `${plan.name} Store Subscription`, itemType: "subscription", } ) if (success) { setShowSuccess(true) setTimeout(() => { onBack() }, 2000) } } if (showSuccess) { return (

🎉

Subscription Activated!

Your store is now upgraded

) } return (

Store Subscription

{storeName}

Choose Your Plan

Upgrade your store to reach more customers

{plans.map((plan) => { const Icon = plan.icon const isSelected = selectedPlan === plan.id return ( {plan.popular && ( Most Popular )}

{plan.name}

{plan.price}π /{plan.duration}

{feature}

) })}

{error && (

{error}

)}

All payments are processed securely through Pi Network

) } [V0_FILE]typescriptreact:file="components/pi-icon.tsx" isMerged="true" export function PiIcon({ className = "h-4 w-4" }: { className?: string }) { return ( ) } [V0_FILE]typescriptreact:file="contexts/cart-context.tsx" isMerged="true" "use client" import { createContext, useContext, useState, ReactNode } from "react" import { calculatePiAmount } from "@/lib/pi-consensus-value" export interface CartItem { id: number name: string brand: string price: number piPrice: number image: string quantity: number size?: string color?: string } interface CartContextType { items: CartItem[] addItem: (item: Omit) => void removeItem: (id: number) => void updateQuantity: (id: number, quantity: number) => void clearCart: () => void totalItems: number totalPrice: number totalPiPrice: number } const CartContext = createContext(undefined) export function CartProvider({ children }: { children: ReactNode }) { const [items, setItems] = useState([]) const addItem = (item: Omit) => { setItems((prev) => { const existing = prev.find((i) => i.id === item.id) if (existing) { return prev.map((i) => i.id === item.id ? { ...i, quantity: i.quantity + 1 } : i ) } // Calculate Pi price based on USD price using consensus value const piPrice = item.piPrice || calculatePiAmount(item.price) return [...prev, { ...item, piPrice, quantity: 1 }] }) } const removeItem = (id: number) => { setItems((prev) => prev.filter((i) => i.id !== id)) } const updateQuantity = (id: number, quantity: number) => { setItems((prev) => prev.map((i) => (i.id === id ? { ...i, quantity } : i)) ) } const clearCart = () => { setItems([]) } const totalItems = items.reduce((sum, item) => sum + item.quantity, 0) const totalPrice = items.reduce( (sum, item) => sum + item.price * item.quantity, 0 ) const totalPiPrice = items.reduce( (sum, item) => sum + item.piPrice * item.quantity, 0 ) return ( {children} ) } export function useCart() { const context = useContext(CartContext) if (!context) { throw new Error("useCart must be used within CartProvider") } return context } [V0_FILE]typescriptreact:file="components/checkout-page.tsx" isMerged="true" "use client" import { useState } from "react" import Image from "next/image" import { ArrowLeft, CreditCard, Wallet } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { useCart } from "@/contexts/cart-context" import { usePiPayment } from "@/hooks/use-pi-payment" import { Badge } from "@/components/ui/badge" import { PiIcon } from "@/components/pi-icon" import { ShippingAddressForm, type ShippingAddress } from "@/components/shipping-address-form" import { ShippingOptions, type ShippingOption } from "@/components/shipping-options" interface CheckoutPageProps { onBack: () => void onSuccess: () => void } export function CheckoutPage({ onBack, onSuccess }: CheckoutPageProps) { const { items, totalPrice, totalPiPrice, clearCart } = useCart() const { createPayment, isProcessing, error } = usePiPayment() const [paymentMethod, setPaymentMethod] = useState<"pi" | "card" | null>("pi") const [showSuccess, setShowSuccess] = useState(false) const [selectedAddress, setSelectedAddress] = useState(null) const [selectedShipping, setSelectedShipping] = useState(null) const finalTotalPi = totalPiPrice + (selectedShipping?.piPrice || 0) const finalTotalUsd = totalPrice + (selectedShipping?.price || 0) const handlePiPayment = async () => { if (!selectedAddress) { alert("Please select a shipping address") return } if (!selectedShipping) { alert("Please select a shipping method") return } const success = await createPayment( finalTotalPi, `Style World Order - ${items.length} items + Shipping`, { orderId: `ORDER-${Date.now()}`, itemName: `${items.length} fashion items`, itemType: "product", shippingMethod: selectedShipping.name, address: `${selectedAddress.city}, ${selectedAddress.state}`, } ) if (success) { setShowSuccess(true) clearCart() setTimeout(() => { onSuccess() }, 2000) } } if (showSuccess) { return (

✨

Payment Successful!

Your order is being processed

) } return (

Checkout

Complete your purchase

{/* Shipping Address */}

{/* Shipping Options */} {selectedAddress && (

)} {/* Order Summary */}

Order Summary

{items.map((item) => (

{item.name}

{item.brand}

Qty: {item.quantity}

{((item.piPrice || 0) * item.quantity).toLocaleString()}

${(item.price * item.quantity).toFixed(2)}

))}

Subtotal

{totalPiPrice.toLocaleString()}

{selectedShipping && (

Shipping ({selectedShipping.name})

{selectedShipping.piPrice}

)}

Total

{finalTotalPi.toLocaleString()}

${finalTotalUsd.toFixed(2)} USD

{/* Payment Method */}

Payment Method

{/* Pi Network Payment */} {/* Credit Card Payment */}

{error && (

{error}

)}

Your payment is secure and encrypted

) } [V0_FILE]typescriptreact:file="components/transactions-page.tsx" isMerged="true" "use client" import { ArrowLeft, ArrowDownLeft, ArrowUpRight, CheckCircle2 } from "lucide-react" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { PiIcon } from "@/components/pi-icon" interface TransactionsPageProps { onBack: () => void } // Mock transaction data const transactions = [ { id: "TXN-001", type: "payment", amount: 4500, usdAmount: 1299, description: "Silk Evening Gown - Luxe Atelier", date: "2024-01-15T10:30:00", status: "completed", }, { id: "TXN-002", type: "payment", amount: 3100, usdAmount: 899, description: "Italian Leather Jacket - Urban Edge", date: "2024-01-14T15:45:00", status: "completed", }, { id: "TXN-003", type: "topup", amount: 10000, usdAmount: 2900, description: "Pi Wallet Top Up", date: "2024-01-13T09:20:00", status: "completed", }, { id: "TXN-004", type: "payment", amount: 8500, usdAmount: 2450, description: "Designer Handbag - Maison Mode", date: "2024-01-12T14:10:00", status: "completed", }, { id: "TXN-005", type: "subscription", amount: 500, usdAmount: 145, description: "Store Premium Subscription", date: "2024-01-10T11:00:00", status: "completed", }, { id: "TXN-006", type: "payment", amount: 1330, usdAmount: 385, description: "Premium Sneakers - Elite Sport", date: "2024-01-08T16:30:00", status: "completed", }, ] export function TransactionsPage({ onBack }: TransactionsPageProps) { const totalSpent = transactions .filter((t) => t.type === "payment" || t.type === "subscription") .reduce((sum, t) => sum + t.amount, 0) const totalTopUp = transactions .filter((t) => t.type === "topup") .reduce((sum, t) => sum + t.amount, 0) return (

{/* Header */}

Transaction History

All your Pi Network transactions

{/* Summary Cards */}

Total Spent

{totalSpent.toLocaleString()}

Total Top Up

{totalTopUp.toLocaleString()}

{/* Transaction List */}

Recent Transactions

{transactions.map((transaction) => { const isPayment = transaction.type === "payment" || transaction.type === "subscription" const isTopUp = transaction.type === "topup" return (

{isPayment ? ( ) : ( )}

{transaction.description}

{new Date(transaction.date).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric", hour: "2-digit", minute: "2-digit", })}

{transaction.status}

{isPayment ? "-" : "+"} {transaction.amount.toLocaleString()}

${transaction.usdAmount.toFixed(2)}

ID: {transaction.id}

) })}

) } [V0_FILE]typescriptreact:file="components/shipping-options.tsx" isMerged="true" "use client" import { Truck, Zap, Package } from "lucide-react" import { Card, CardContent } from "@/components/ui/card" import { PiIcon } from "@/components/pi-icon" export interface ShippingOption { id: string name: string company: string estimatedDays: string price: number piPrice: number icon: "standard" | "express" | "overnight" } const shippingOptions: ShippingOption[] = [ { id: "standard", name: "Standard Shipping", company: "FedEx Ground", estimatedDays: "5-7 business days", price: 9.99, piPrice: 35, icon: "standard", }, { id: "express", name: "Express Shipping", company: "FedEx Express", estimatedDays: "2-3 business days", price: 24.99, piPrice: 86, icon: "express", }, { id: "overnight", name: "Overnight Shipping", company: "FedEx Priority Overnight", estimatedDays: "Next business day", price: 49.99, piPrice: 172, icon: "overnight", }, ] interface ShippingOptionsProps { onSelectShipping: (option: ShippingOption) => void selectedShippingId?: string } export function ShippingOptions({ onSelectShipping, selectedShippingId }: ShippingOptionsProps) { const getIcon = (type: string) => { switch (type) { case "express": return case "overnight": return default: return } } return (

Shipping Method

{shippingOptions.map((option) => ( onSelectShipping(option)} >

{getIcon(option.icon)}

{option.name}

{option.company}

{option.estimatedDays}

{option.piPrice}

${option.price.toFixed(2)}

{selectedShippingId === option.id && (

)}

))}

) } [V0_FILE]typescriptreact:file="components/order-tracking-page.tsx" isMerged="true" "use client" import { ArrowLeft, Package, Truck, CheckCircle, MapPin } from "lucide-react" import { Card, CardContent } from "@/components/ui/card" import { PiIcon } from "@/components/pi-icon" import Image from "next/image" interface OrderTrackingPageProps { onBack: () => void orderId: string } const trackingSteps = [ { id: 1, status: "Order Placed", description: "Your order has been confirmed", timestamp: "Jan 27, 2025 - 10:30 AM", completed: true, icon: CheckCircle, }, { id: 2, status: "Processing", description: "Store is preparing your items", timestamp: "Jan 27, 2025 - 11:15 AM", completed: true, icon: Package, }, { id: 3, status: "Shipped", description: "Package picked up by FedEx", timestamp: "Jan 28, 2025 - 9:00 AM", completed: true, icon: Truck, }, { id: 4, status: "Out for Delivery", description: "Your package is on the way", timestamp: "Expected: Jan 30, 2025", completed: false, icon: MapPin, }, { id: 5, status: "Delivered", description: "Package delivered successfully", timestamp: "Pending", completed: false, icon: CheckCircle, }, ] const orderItems = [ { id: 1, name: "Silk Evening Gown", brand: "Luxe Atelier", image: "https://images.unsplash.com/photo-1595777457583-95e059d581b8?w=100&h=100&fit=crop", quantity: 1, piPrice: 4500, }, { id: 2, name: "Designer Handbag", brand: "Maison Mode", image: "https://images.unsplash.com/photo-1584917865442-de89df76afd3?w=100&h=100&fit=crop", quantity: 1, piPrice: 8500, }, ] export function OrderTrackingPage({ onBack, orderId }: OrderTrackingPageProps) { return (

{/* Header */}

Order Tracking

Order #{orderId}

{/* Shipping Info Card */}

Tracking Number

FX1234567890US

Carrier

FedEx Express

Est. Delivery

Jan 30, 2025

{/* Tracking Timeline */}

Delivery Status

{trackingSteps.map((step, index) => { const Icon = step.icon const isLast = index === trackingSteps.length - 1 return (

{/* Icon and Line */}

{!isLast && (

)}

{/* Content */}

{step.status}

{step.description}

{step.timestamp}

) })}

{/* Shipping Address */}

Shipping Address

John Doe

+1 234 567 8900

123 Fashion Avenue, Apt 4B

New York, NY 10001

United States

{/* Order Items */}

Order Items

{orderItems.map((item) => (

{item.name}

{item.brand}

Qty: {item.quantity}

{item.piPrice.toLocaleString()}

))}

Total Paid

13,000

) } [V0_FILE]typescriptreact:file="components/shipping-address-form.tsx" isMerged="true" "use client" import { useState } from "react" import { MapPin, Plus } from "lucide-react" import { Card, CardContent } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" export interface ShippingAddress { id: string name: string phone: string addressLine1: string addressLine2?: string city: string state: string zipCode: string country: string isDefault: boolean } interface ShippingAddressFormProps { onSelectAddress: (address: ShippingAddress) => void selectedAddressId?: string } const savedAddresses: ShippingAddress[] = [ { id: "1", name: "John Doe", phone: "+1 234 567 8900", addressLine1: "123 Fashion Avenue", addressLine2: "Apt 4B", city: "New York", state: "NY", zipCode: "10001", country: "United States", isDefault: true, }, { id: "2", name: "John Doe", phone: "+1 234 567 8900", addressLine1: "456 Style Street", city: "Los Angeles", state: "CA", zipCode: "90001", country: "United States", isDefault: false, }, ] export function ShippingAddressForm({ onSelectAddress, selectedAddressId }: ShippingAddressFormProps) { const [showNewAddressForm, setShowNewAddressForm] = useState(false) return (

Shipping Address

{savedAddresses.map((address) => ( onSelectAddress(address)} >

{address.name}

{address.isDefault && ( Default )}

{address.phone}

{address.addressLine1} {address.addressLine2 && `, ${address.addressLine2}`}

{address.city}, {address.state} {address.zipCode}

{address.country}

{selectedAddressId === address.id && (

)}

))}

{showNewAddressForm && (

New Address

)}

) } [V0_FILE]typescriptreact:file="components/payment-success-page.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { CheckCircle2, Package, Home, Clock } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { PiIcon } from "@/components/pi-icon" interface PaymentSuccessPageProps { orderDetails: { orderId: string totalPi: number totalUsd: number itemCount: number } onNavigateHome: () => void onViewOrders: () => void onTrackOrder?: () => void } export function PaymentSuccessPage({ orderDetails, onNavigateHome, onViewOrders, onTrackOrder, }: PaymentSuccessPageProps) { const [progress, setProgress] = useState(0) useEffect(() => { const timer = setInterval(() => { setProgress((prev) => { if (prev >= 100) { clearInterval(timer) return 100 } return prev + 2 }) }, 30) return () => clearInterval(timer) }, []) return (

{/* Success Animation */}

Payment Successful!

Your order has been confirmed

Order ID: {orderDetails.orderId}

{/* Order Summary Card */}

Items {orderDetails.itemCount} products

Paid with

Pi Network

Total Paid

{orderDetails.totalPi.toLocaleString()}

${orderDetails.totalUsd.toFixed(2)} USD

{/* Status Card */}

Processing Order

Your order is being prepared for shipment

{/* Progress Bar */}

Estimated delivery: 3-5 business days

{/* Action Buttons */}

{onTrackOrder && ( )}

A confirmation email has been sent to your registered email address

) } [V0_FILE]typescriptreact:file="components/notifications-page.tsx" isMerged="true" "use client" import { ArrowLeft, Package, Truck, CheckCircle, Tag, Bell } from "lucide-react" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { PiIcon } from "@/components/pi-icon" import { useLanguage } from "@/contexts/language-context" interface NotificationsPageProps { onBack: () => void } interface Notification { id: string type: "order_status" | "promotion" | "payment" | "delivery" title: string message: string timestamp: string read: boolean icon: any actionText?: string } const notifications: Notification[] = [ { id: "1", type: "order_status", title: "Order Shipped", message: "Your order #ORDER-1738012345 has been shipped via FedEx Express. Track your package now.", timestamp: "2 hours ago", read: false, icon: Truck, actionText: "Track Order", }, { id: "2", type: "order_status", title: "Order Processing", message: "Your order #ORDER-1738012344 is being prepared by Luxe Atelier. Expected shipping tomorrow.", timestamp: "5 hours ago", read: false, icon: Package, }, { id: "3", type: "delivery", title: "Delivery Completed", message: "Your order #ORDER-1738012343 has been successfully delivered. Enjoy your purchase!", timestamp: "Yesterday", read: true, icon: CheckCircle, actionText: "Rate Order", }, { id: "4", type: "promotion", title: "Special Offer", message: "Get 30% off on all designer handbags this weekend. Limited time offer!", timestamp: "Yesterday", read: true, icon: Tag, }, { id: "5", type: "payment", title: "Payment Successful", message: "Your payment of 13,000 π has been processed successfully for order #ORDER-1738012345.", timestamp: "2 days ago", read: true, icon: PiIcon, }, { id: "6", type: "order_status", title: "Order Confirmed", message: "Thank you for your purchase! Your order #ORDER-1738012345 has been confirmed.", timestamp: "2 days ago", read: true, icon: CheckCircle, }, ] export function NotificationsPage({ onBack }: NotificationsPageProps) { const { t } = useLanguage() const unreadCount = notifications.filter(n => !n.read).length return (

{/* Header */}

{t.notifications.title}

{unreadCount > 0 ? `${unreadCount} ${t.notifications.subtitle}` : t.notifications.empty}

{/* Notifications List */}

{notifications.map((notification) => { const Icon = notification.icon const isUnread = !notification.read return (

{notification.icon === PiIcon ? ( ) : ( )}

{notification.title}

{isUnread && (

)}

{notification.message}

{notification.timestamp} {notification.actionText && ( )}

) })}

{/* Empty State (if needed) */} {notifications.length === 0 && (

{t.notifications.empty}

{t.notifications.subtitle}

)}

) } [V0_FILE]typescriptreact:file="components/ad-management-page.tsx" isMerged="true" "use client" import { useState } from "react" import Image from "next/image" import { ArrowLeft, TrendingUp, Eye, MousePointer, Play, Pause, Calendar } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { PiIcon } from "@/components/pi-icon" interface AdManagementPageProps { onBack: () => void onCreateNew: () => void } const mockAds = [ { id: "ad-1", storeName: "Luxe Atelier", title: "Summer Collection 2024", subtitle: "Exclusive luxury designs now available", image: "https://images.unsplash.com/photo-1483985988355-763728e1935b?w=400&h=300&fit=crop", placement: "Home Banner", duration: "7 Days", budget: 3000, spent: 2100, impressions: 45230, clicks: 1256, isActive: true, daysLeft: 3, startDate: "2024-01-15", endDate: "2024-01-22", }, { id: "ad-2", storeName: "Luxe Atelier", title: "Winter Sale", subtitle: "Up to 50% off selected items", image: "https://images.unsplash.com/photo-1445205170230-053b83016050?w=400&h=300&fit=crop", placement: "Product Listings", duration: "3 Days", budget: 900, spent: 900, impressions: 28450, clicks: 892, isActive: false, daysLeft: 0, startDate: "2024-01-08", endDate: "2024-01-11", }, ] export function AdManagementPage({ onBack, onCreateNew }: AdManagementPageProps) { const [ads, setAds] = useState(mockAds) const toggleAdStatus = (adId: string) => { setAds(ads.map(ad => ad.id === adId ? { ...ad, isActive: !ad.isActive } : ad )) } const totalBudget = ads.reduce((sum, ad) => sum + ad.budget, 0) const totalSpent = ads.reduce((sum, ad) => sum + ad.spent, 0) const totalImpressions = ads.reduce((sum, ad) => sum + ad.impressions, 0) const totalClicks = ads.reduce((sum, ad) => sum + ad.clicks, 0) return (

Ad Campaigns

Manage your advertisements

{/* Overview Stats */}

Total Budget

{totalBudget.toLocaleString()}

{totalSpent.toLocaleString()}π spent

Impressions

{totalImpressions.toLocaleString()}

{totalClicks.toLocaleString()} clicks

{/* Active Campaigns */}

Your Campaigns

{ads.map((ad) => (

{ad.title}

{ad.subtitle}

{ad.isActive ? "Active" : "Ended"}

{ad.placement} • {ad.duration} {ad.isActive && ad.daysLeft > 0 && ( <> • {ad.daysLeft} days left )}

{/* Stats */}

Budget

{ad.budget}

Views

{ad.impressions.toLocaleString()}

Clicks

{ad.clicks.toLocaleString()}

{/* Actions */}

))}

) } [V0_FILE]typescriptreact:file="components/ad-banner.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import Image from "next/image" import { ExternalLink, X } from "lucide-react" import { Badge } from "@/components/ui/badge" export type AdApprovalStatus = "pending" | "approved" | "rejected" export interface Advertisement { id: string storeName: string title: string subtitle: string image: string cta: string targetUrl?: string duration: number budget: number impressions: number clicks: number isActive: boolean approvalStatus: AdApprovalStatus rejectionReason?: string startDate: Date endDate: Date } interface AdBannerProps { ads: Advertisement[] variant?: "horizontal" | "square" | "vertical" className?: string } export function AdBanner({ ads, variant = "horizontal", className = "" }: AdBannerProps) { const [currentAdIndex, setCurrentAdIndex] = useState(0) const [isVisible, setIsVisible] = useState(true) const activeAds = ads.filter(ad => ad.isActive && ad.approvalStatus === "approved" && new Date() < ad.endDate ) useEffect(() => { if (activeAds.length === 0) return const timer = setInterval(() => { setCurrentAdIndex((prev) => (prev + 1) % activeAds.length) }, 8000) return () => clearInterval(timer) }, [activeAds.length]) if (!isVisible || activeAds.length === 0) return null const currentAd = activeAds[currentAdIndex] const handleAdClick = () => { console.log("[v0] Ad clicked:", currentAd.id) // Track ad click if (currentAd.targetUrl) { window.open(currentAd.targetUrl, "_blank") } } const getAspectRatio = () => { switch (variant) { case "square": return "aspect-square" case "vertical": return "aspect-[3/4]" default: return "aspect-[16/9]" } } return (

{currentAd.title}

{currentAd.subtitle}

{activeAds.length > 1 && (

{activeAds.map((_, index) => (

)}

) } [V0_FILE]typescriptreact:file="components/shipping-company-registration.tsx" isMerged="true" "use client" import { useState } from "react" import { ArrowLeft, Truck, MapPin, DollarSign, Clock, CheckCircle } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { PiIcon } from "@/components/pi-icon" interface ShippingCompanyRegistrationProps { onBack: () => void onSuccess: () => void } export function ShippingCompanyRegistration({ onBack, onSuccess }: ShippingCompanyRegistrationProps) { const [step, setStep] = useState(1) const [companyName, setCompanyName] = useState("") const [contactEmail, setContactEmail] = useState("") const [contactPhone, setContactPhone] = useState("") const [serviceAreas, setServiceAreas] = useState("") const [standardPrice, setStandardPrice] = useState("") const [standardPiPrice, setStandardPiPrice] = useState("") const [standardDays, setStandardDays] = useState("") const [expressPrice, setExpressPrice] = useState("") const [expressPiPrice, setExpressPiPrice] = useState("") const [expressDays, setExpressDays] = useState("") const [showSuccess, setShowSuccess] = useState(false) const handleSubmit = () => { if (!companyName || !contactEmail || !contactPhone) { alert("Please fill in all required fields") return } console.log("[v0] Shipping company registration submitted:", { companyName, contactEmail, serviceAreas, standardPrice, standardPiPrice, standardDays, }) setShowSuccess(true) setTimeout(() => { onSuccess() }, 2500) } if (showSuccess) { return (

Registration Successful!

Your shipping company has been registered

Pending admin approval to start offering services

) } return (

Register Shipping Company

Become a service provider

{/* Progress Steps */}

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

= s ? "bg-primary text-black" : "bg-secondary text-muted-foreground" }`} > {s}

{s < 3 && (

s ? "bg-primary" : "bg-secondary" }`} /> )}

))}

{/* Step 1: Company Info */} {step === 1 && (

Service Coverage

Delivery Areas setServiceAreas(e.target.value)} placeholder="e.g., USA, Canada, UK (comma separated)" className="bg-input border-border text-foreground" />

Enter countries or regions you serve

)} {/* Step 3: Pricing */} {step === 3 && (

Service Pricing

Standard Shipping

Price (USD) setStandardPrice(e.target.value)} placeholder="9.99" className="bg-input border-border text-foreground" />

Price (Pi) setStandardPiPrice(e.target.value)} placeholder="35" className="bg-input border-border text-foreground" />

Delivery Time (days) setStandardDays(e.target.value)} placeholder="5-7 business days" className="bg-input border-border text-foreground" />

Express Shipping

Optional

Price (USD) setExpressPrice(e.target.value)} placeholder="24.99" className="bg-input border-border text-foreground" />

Price (Pi) setExpressPiPrice(e.target.value)} placeholder="86" className="bg-input border-border text-foreground" />

Delivery Time (days) setExpressDays(e.target.value)} placeholder="2-3 business days" className="bg-input border-border text-foreground" />

Platform Commission: 15% on all shipping fees

Example: For $10 shipping, you receive $8.50 and platform keeps $1.50

)}

) } [V0_FILE]typescriptreact:file="components/admin-earnings-dashboard.tsx" isMerged="true" "use client" import { ArrowLeft, TrendingUp, Package, Megaphone, DollarSign } from "lucide-react" import { Card, CardContent } from "@/components/ui/card" import { PiIcon } from "@/components/pi-icon" interface AdminEarningsDashboardProps { onBack: () => void } const earningsData = { ads: { totalCampaigns: 28, totalRevenue: 84000, commission: 12600, commissionRate: 15, thisMonth: 18500, }, shipping: { totalShipments: 1247, totalRevenue: 12470, commission: 1870.5, commissionRate: 15, thisMonth: 5200, }, total: { allTimeEarnings: 14470.5, thisMonth: 23700, growth: 34, }, } const recentTransactions = [ { id: "TXN-001", type: "Ad Campaign", store: "Fashion Hub", amount: 3000, commission: 450, date: "2024-01-20", }, { id: "TXN-002", type: "Shipping Fee", store: "FastTrack Logistics", amount: 24.99, commission: 3.75, date: "2024-01-20", }, { id: "TXN-003", type: "Ad Campaign", store: "Elite Shoes", amount: 900, commission: 135, date: "2024-01-19", }, { id: "TXN-004", type: "Shipping Fee", store: "Express Delivery Co", amount: 49.99, commission: 7.50, date: "2024-01-19", }, ] export function AdminEarningsDashboard({ onBack }: AdminEarningsDashboardProps) { return (

Platform Earnings

Revenue & commission tracking

{/* Total Earnings Overview */}

Total Platform Earnings

{earningsData.total.allTimeEarnings.toLocaleString()}

All-time commission revenue

This Month

{earningsData.total.thisMonth.toLocaleString()}

Growth

+{earningsData.total.growth}%

{/* Revenue by Source */}

Revenue by Source

{/* Ad Revenue */}

Advertisement Revenue

{earningsData.ads.totalCampaigns} campaigns

Total Ad Spend

{earningsData.ads.totalRevenue.toLocaleString()}

Commission ({earningsData.ads.commissionRate}%)

{earningsData.ads.commission.toLocaleString()}

This Month

{earningsData.ads.thisMonth.toLocaleString()}

{/* Shipping Revenue */}

Shipping Revenue

{earningsData.shipping.totalShipments} shipments

Total Shipping Fees

{earningsData.shipping.totalRevenue.toLocaleString()}

Commission ({earningsData.shipping.commissionRate}%)

{earningsData.shipping.commission.toLocaleString()}

This Month

{earningsData.shipping.thisMonth.toLocaleString()}

{/* Recent Transactions */}

Recent Transactions

{recentTransactions.map((txn) => (

{txn.type}

{txn.store}

+{txn.commission}

from {txn.amount}π total

{txn.date}

))}

{/* Commission Structure */}

Commission Structure

Ad Campaigns 15% commission

Shipping Services 15% commission

Platform fees are automatically deducted from all transactions

) } [V0_FILE]typescriptreact:file="components/profile-page.tsx" isMerged="true" "use client" import Image from "next/image" import { Settings, ChevronRight, Wallet, Clock, CreditCard, Shield, HelpCircle, LogOut, Megaphone, Truck } from "lucide-react" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { PiIcon } from "@/components/pi-icon" import { useLanguage } from "@/contexts/language-context" interface ProfilePageProps { onNavigateToTransactions: () => void onNavigateToAdManagement?: () => void onNavigateToShippingRegister?: () => void onNavigateToSettings?: () => void } export function ProfilePage({ onNavigateToTransactions, onNavigateToAdManagement, onNavigateToShippingRegister, onNavigateToSettings, }: ProfilePageProps) { const { t } = useLanguage() const piBalance = 15847.5 const usdEquivalent = piBalance * 0.29 const menuItems = [ { icon: Clock, label: t.profile.orders, sub: t.orders.myOrders, onClick: undefined as (() => void) | undefined, }, { icon: CreditCard, label: t.profile.paymentMethods, sub: t.checkout.payWith, onClick: undefined as (() => void) | undefined, }, onNavigateToAdManagement ? { icon: Megaphone, label: t.profile.adCampaigns, sub: t.ads.promoteStore, onClick: onNavigateToAdManagement, } : null, onNavigateToShippingRegister ? { icon: Truck, label: t.profile.shippingPartner, sub: t.shipping.registerPartner, onClick: onNavigateToShippingRegister, } : null, { icon: Shield, label: t.profile.security, sub: t.settings.privacy, onClick: undefined as (() => void) | undefined, }, { icon: HelpCircle, label: t.profile.helpCenter, sub: "", onClick: undefined as (() => void) | undefined, }, ].filter(Boolean) as { icon: typeof Clock; label: string; sub: string; onClick: (() => void) | undefined }[] return (

{/* Header */}

{t.profile.title}

Style World

{/* Avatar + username */}

@styleuser

{t.profile.vip} Member

{/* Pi Balance Card */}

{t.profile.piBalance}

{piBalance.toLocaleString()} π

≈ ${usdEquivalent.toFixed(2)} {t.common.usd}

{/* Menu */}

{menuItems.map((item) => ( ))} {/* Sign Out */}

) } [V0_FILE]typescriptreact:file="components/withdrawal-history.tsx" isMerged="true" "use client" import { ArrowLeft, CheckCircle, XCircle, Clock } from "lucide-react" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { PiIcon } from "@/components/pi-icon" interface WithdrawalHistoryProps { userType: "store" | "shipping" onBack: () => void } interface Transaction { id: string amount: number status: "pending" | "approved" | "rejected" requestDate: string processedDate?: string walletAddress: string rejectionReason?: string } const mockTransactions: Transaction[] = [ { id: "WD-123", amount: 3200, status: "approved", requestDate: "2024-01-20", processedDate: "2024-01-21", walletAddress: "GA7XYZ...ABC123", }, { id: "WD-124", amount: 1850, status: "approved", requestDate: "2024-01-15", processedDate: "2024-01-16", walletAddress: "GA7XYZ...ABC123", }, { id: "WD-125", amount: 5400, status: "pending", requestDate: "2024-01-27", walletAddress: "GA7XYZ...ABC123", }, { id: "WD-126", amount: 75, status: "rejected", requestDate: "2024-01-10", processedDate: "2024-01-10", walletAddress: "GA7XYZ...ABC123", rejectionReason: "Amount below minimum threshold", }, ] export function WithdrawalHistory({ userType, onBack }: WithdrawalHistoryProps) { return (

Withdrawal History

View all your withdrawal transactions

{mockTransactions.map((transaction) => (

{transaction.id}

Requested: {transaction.requestDate}

{transaction.status === "pending" && } {transaction.status === "approved" && } {transaction.status === "rejected" && } {transaction.status}

{transaction.amount.toLocaleString()}

{transaction.status === "approved" && transaction.processedDate && (

Processed Date

{transaction.processedDate}

)} {transaction.status === "rejected" && transaction.rejectionReason && (

Rejection Reason

{transaction.rejectionReason}

)} {transaction.status === "pending" && (

Awaiting admin approval

)} ))}

) } [V0_FILE]typescriptreact:file="components/admin-withdrawals-panel.tsx" isMerged="true" "use client" import { useState } from "react" import { ArrowLeft, CheckCircle, XCircle, Clock, Search, User, Building } from "lucide-react" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { PiIcon } from "@/components/pi-icon" import { Input } from "@/components/ui/input" interface AdminWithdrawalsPanelProps { onBack: () => void } type WithdrawalStatus = "pending" | "approved" | "rejected" interface WithdrawalRequest { id: string userName: string userType: "store" | "shipping" amount: number walletAddress: string requestDate: string status: WithdrawalStatus rejectionReason?: string } const mockWithdrawals: WithdrawalRequest[] = [ { id: "WD-001", userName: "Fashion Hub Store", userType: "store", amount: 5240, walletAddress: "GA7XYZ...ABC123", requestDate: "2024-01-27 10:30 AM", status: "pending", }, { id: "WD-002", userName: "FastTrack Logistics", userType: "shipping", amount: 2905, walletAddress: "GA8ABC...XYZ789", requestDate: "2024-01-27 09:15 AM", status: "pending", }, { id: "WD-003", userName: "Elite Boutique", userType: "store", amount: 8450, walletAddress: "GA9DEF...QRS456", requestDate: "2024-01-26 3:20 PM", status: "approved", }, { id: "WD-004", userName: "Express Delivery Co", userType: "shipping", amount: 150, walletAddress: "GA1GHI...TUV789", requestDate: "2024-01-26 2:10 PM", status: "rejected", rejectionReason: "Amount below minimum threshold", }, ] export function AdminWithdrawalsPanel({ onBack }: AdminWithdrawalsPanelProps) { const [withdrawals, setWithdrawals] = useState(mockWithdrawals) const [selectedWithdrawal, setSelectedWithdrawal] = useState(null) const [activeTab, setActiveTab] = useState("pending") const [searchQuery, setSearchQuery] = useState("") const handleApprove = (id: string) => { setWithdrawals(withdrawals.map(w => w.id === id ? { ...w, status: "approved" as WithdrawalStatus } : w )) console.log("[v0] Withdrawal approved:", id) alert("Withdrawal approved! Payment will be processed.") setSelectedWithdrawal(null) } const handleReject = (id: string, reason: string) => { setWithdrawals(withdrawals.map(w => w.id === id ? { ...w, status: "rejected" as WithdrawalStatus, rejectionReason: reason } : w )) console.log("[v0] Withdrawal rejected:", id, reason) alert("Withdrawal rejected. User has been notified.") setSelectedWithdrawal(null) } const filteredWithdrawals = withdrawals.filter(w => { const matchesSearch = w.userName.toLowerCase().includes(searchQuery.toLowerCase()) || w.id.toLowerCase().includes(searchQuery.toLowerCase()) const matchesTab = activeTab === "all" || w.status === activeTab return matchesSearch && matchesTab }) const pendingCount = withdrawals.filter(w => w.status === "pending").length if (selectedWithdrawal) { return (

Withdrawal Request

{selectedWithdrawal.id}

{selectedWithdrawal.userType === "store" ? ( ) : ( )}

{selectedWithdrawal.userName}

{selectedWithdrawal.userType} Partner

Withdrawal Amount

{selectedWithdrawal.amount.toLocaleString()}

Pi Wallet Address

{selectedWithdrawal.walletAddress}

Request Date

{selectedWithdrawal.requestDate}

{selectedWithdrawal.status === "pending" && (

)} {selectedWithdrawal.status === "approved" && (

Approved

Payment has been processed

)} {selectedWithdrawal.status === "rejected" && (

Rejected

Reason: {selectedWithdrawal.rejectionReason}

)}

) } return (

Withdrawal Requests

{pendingCount} pending approval

setSearchQuery(e.target.value)} className="pl-11 h-12 bg-card border-border" />

{/* Tabs */}

{[ { id: "all", label: "All" }, { id: "pending", label: `Pending (${pendingCount})` }, { id: "approved", label: "Approved" }, { id: "rejected", label: "Rejected" }, ].map((tab) => ( ))}

{filteredWithdrawals.length === 0 ? (

No withdrawal requests found

) : ( filteredWithdrawals.map((withdrawal) => ( setSelectedWithdrawal(withdrawal)} >

{withdrawal.userType === "store" ? ( ) : ( )}

{withdrawal.userName}

{withdrawal.userType} Partner

{withdrawal.status}

Amount

{withdrawal.amount.toLocaleString()}

Requested

{withdrawal.requestDate}

)) )}

) } [V0_FILE]typescriptreact:file="components/withdrawal-request.tsx" isMerged="true" "use client" import { useState } from "react" import { ArrowLeft, Wallet, AlertCircle, CheckCircle2 } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { PiIcon } from "@/components/pi-icon" import { usePiPayment } from "@/hooks/use-pi-payment" interface WithdrawalRequestProps { userType: "store" | "shipping" userName: string availableBalance: number onBack: () => void onSuccess: () => void } export function WithdrawalRequest({ userType, userName, availableBalance, onBack, onSuccess, }: WithdrawalRequestProps) { const [amount, setAmount] = useState("") const [piWalletAddress, setPiWalletAddress] = useState("") const [isSubmitting, setIsSubmitting] = useState(false) const [showSuccess, setShowSuccess] = useState(false) const [error, setError] = useState("") const requestedAmount = parseFloat(amount) || 0 const minimumWithdrawal = 100 const handleSubmit = async () => { setError("") if (!piWalletAddress) { setError("Please enter your Pi wallet address") return } if (requestedAmount < minimumWithdrawal) { setError(`Minimum withdrawal is ${minimumWithdrawal}π`) return } if (requestedAmount > availableBalance) { setError("Insufficient balance") return } setIsSubmitting(true) // Simulate API call await new Promise(resolve => setTimeout(resolve, 1500)) console.log("[v0] Withdrawal request submitted:", { userType, userName, amount: requestedAmount, walletAddress: piWalletAddress, }) setIsSubmitting(false) setShowSuccess(true) setTimeout(() => { onSuccess() }, 2500) } if (showSuccess) { return (

Request Submitted!

Your withdrawal request is pending admin approval

{requestedAmount.toLocaleString()}π

You'll be notified once approved

) } return (

{/* Header */}

Withdraw Earnings

Request payout to your Pi wallet

{/* Available Balance */}

Available Balance

{availableBalance.toLocaleString()}

{/* Withdrawal Form */}

Withdrawal Amount (π)

setAmount(e.target.value)} className="pl-12 h-14 text-lg bg-input border-border" />

Minimum: {minimumWithdrawal}π

Pi Wallet Address setPiWalletAddress(e.target.value)} className="h-14 bg-input border-border font-mono text-sm" />

{error && (

{error}

)} {/* Summary */} {requestedAmount >= minimumWithdrawal && (

Withdrawal Summary

Requested Amount

{requestedAmount.toLocaleString()}

Processing Fee Free

You'll Receive

{requestedAmount.toLocaleString()}

)} {/* Important Info */}

Important Information

Withdrawals require admin approval
Processing typically takes 1-3 business days
Ensure your Pi wallet address is correct
Minimum withdrawal: {minimumWithdrawal}π

{/* Submit Button */}

) } [V0_FILE]typescriptreact:file="components/shipping-company-dashboard.tsx" isMerged="true" "use client" import { useState } from "react" import { ArrowLeft, Package, DollarSign, TrendingUp, Settings, Edit, Eye } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { PiIcon } from "@/components/pi-icon" interface ShippingCompanyDashboardProps { companyName: string onBack: () => void onRequestWithdrawal?: () => void onViewHistory?: () => void } const mockEarnings = { totalShipments: 342, totalRevenue: 3418, platformCommission: 512.7, netEarnings: 2905.3, thisMonth: 1840, } const mockShipments = [ { id: "SHIP-001", orderNumber: "ORDER-12345", customer: "John Doe", destination: "New York, NY", status: "In Transit", amount: 9.99, piAmount: 35, date: "2024-01-20", }, { id: "SHIP-002", orderNumber: "ORDER-12346", customer: "Jane Smith", destination: "Los Angeles, CA", status: "Delivered", amount: 24.99, piAmount: 86, date: "2024-01-19", }, { id: "SHIP-003", orderNumber: "ORDER-12347", customer: "Mike Johnson", destination: "Chicago, IL", status: "Processing", amount: 9.99, piAmount: 35, date: "2024-01-21", }, ] export function ShippingCompanyDashboard({ companyName, onBack, onRequestWithdrawal, onViewHistory }: ShippingCompanyDashboardProps) { const [activeTab, setActiveTab] = useState<"overview" | "shipments" | "settings">("overview") return (

{companyName}

Shipping Partner Dashboard

{/* Tabs */}

{[ { id: "overview", label: "Overview" }, { id: "shipments", label: "Shipments" }, { id: "settings", label: "Settings" }, ].map((tab) => ( ))}

{/* Overview Tab */} {activeTab === "overview" && (

{/* Earnings Stats */}

{mockEarnings.totalShipments} Total Shipments

{mockEarnings.thisMonth}

This Month

Revenue Breakdown

Total Revenue

{mockEarnings.totalRevenue.toLocaleString()}

Platform Commission (15%)

-{mockEarnings.platformCommission.toLocaleString()}

Net Earnings

{mockEarnings.netEarnings.toLocaleString()}

{(onRequestWithdrawal || onViewHistory) && (

{onRequestWithdrawal && ( )} {onViewHistory && ( )}

)}

Commission structure helps maintain platform quality and security

85% goes to you | 15% platform fee

)} {/* Shipments Tab */} {activeTab === "shipments" && (

Recent Shipments

{mockShipments.map((shipment) => (

{shipment.orderNumber}

{shipment.customer}

{shipment.status}

{shipment.destination}

{shipment.piAmount}π

{shipment.date}

))}

)} {/* Settings Tab */} {activeTab === "settings" && (

Service Settings

Standard Shipping

Price: $9.99 / 35π

Delivery: 5-7 business days

Express Shipping

Price: $24.99 / 86π

Delivery: 2-3 business days

Service Areas

USA, Canada, UK, Australia

)}

) } [V0_FILE]typescriptreact:file="components/store-order-management.tsx" isMerged="true" "use client" import { useState } from "react" import Image from "next/image" import { ArrowLeft, Package, Truck, CheckCircle, Clock, Search, Wallet, History } from "lucide-react" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { PiIcon } from "@/components/pi-icon" import { Input } from "@/components/ui/input" interface StoreOrderManagementProps { onBack: () => void onRequestWithdrawal?: () => void onViewHistory?: () => void } type OrderStatus = "pending" | "processing" | "shipped" | "delivered" | "cancelled" interface Order { id: string orderNumber: string customer: { name: string email: string phone: string } items: { id: number name: string brand: string image: string quantity: number piPrice: number }[] status: OrderStatus totalPi: number totalUsd: number shippingMethod: string trackingNumber: string shippingAddress: string orderDate: string lastUpdated: string } const mockOrders: Order[] = [ { id: "1", orderNumber: "ORDER-1738012345", customer: { name: "John Doe", email: "john@example.com", phone: "+1 234 567 8900", }, items: [ { id: 1, name: "Silk Evening Gown", brand: "Luxe Atelier", image: "https://images.unsplash.com/photo-1595777457583-95e059d581b8?w=100&h=100&fit=crop", quantity: 1, piPrice: 4500, }, ], status: "processing", totalPi: 4500, totalUsd: 1299, shippingMethod: "FedEx Express", trackingNumber: "FX1234567890US", shippingAddress: "123 Fashion Ave, New York, NY 10001", orderDate: "Jan 27, 2025 - 10:30 AM", lastUpdated: "Jan 27, 2025 - 11:15 AM", }, { id: "2", orderNumber: "ORDER-1738012346", customer: { name: "Jane Smith", email: "jane@example.com", phone: "+1 234 567 8901", }, items: [ { id: 2, name: "Designer Handbag", brand: "Maison Mode", image: "https://images.unsplash.com/photo-1584917865442-de89df76afd3?w=100&h=100&fit=crop", quantity: 1, piPrice: 8500, }, ], status: "shipped", totalPi: 8500, totalUsd: 2450, shippingMethod: "FedEx Ground", trackingNumber: "FX9876543210US", shippingAddress: "456 Style Blvd, Los Angeles, CA 90001", orderDate: "Jan 26, 2025 - 2:15 PM", lastUpdated: "Jan 27, 2025 - 9:00 AM", }, ] const statusConfig: Record = { pending: { label: "Pending", color: "bg-yellow-500/20 text-yellow-500 border-yellow-500/30", icon: Clock }, processing: { label: "Processing", color: "bg-blue-500/20 text-blue-500 border-blue-500/30", icon: Package }, shipped: { label: "Shipped", color: "bg-purple-500/20 text-purple-500 border-purple-500/30", icon: Truck }, delivered: { label: "Delivered", color: "bg-green-500/20 text-green-500 border-green-500/30", icon: CheckCircle }, cancelled: { label: "Cancelled", color: "bg-red-500/20 text-red-500 border-red-500/30", icon: CheckCircle }, } export function StoreOrderManagement({ onBack, onRequestWithdrawal, onViewHistory }: StoreOrderManagementProps) { const [orders, setOrders] = useState(mockOrders) const [selectedOrder, setSelectedOrder] = useState(null) const [searchQuery, setSearchQuery] = useState("") const handleStatusChange = (orderId: string, newStatus: OrderStatus) => { setOrders(orders.map(order => order.id === orderId ? { ...order, status: newStatus, lastUpdated: new Date().toLocaleString() } : order )) // Simulate sending notification console.log(`[v0] Notification sent: Order ${orderId} status changed to ${newStatus}`) alert(`Status updated to ${newStatus}. Customer notification sent!`) } const filteredOrders = orders.filter(order => order.orderNumber.toLowerCase().includes(searchQuery.toLowerCase()) || order.customer.name.toLowerCase().includes(searchQuery.toLowerCase()) ) if (selectedOrder) { return (

{/* Header */}

Order Details

{selectedOrder.orderNumber}

{/* Order Status Management */}

Update Order Status

{Object.entries(statusConfig).map(([status, config]) => { const Icon = config.icon return ( ) })}

{/* Customer Info */}

Customer Information

Name

{selectedOrder.customer.name}

{selectedOrder.customer.email}

Phone

{selectedOrder.customer.phone}

Shipping Address

{selectedOrder.shippingAddress}

{/* Order Items */}

Order Items

{selectedOrder.items.map((item) => (

{item.name}

{item.brand}

Qty: {item.quantity}

{item.piPrice.toLocaleString()}

))}

Total

{selectedOrder.totalPi.toLocaleString()}

{/* Shipping Info */}

Shipping Details

Shipping Method

{selectedOrder.shippingMethod}

Tracking Number

{selectedOrder.trackingNumber}

Order Date

{selectedOrder.orderDate}

Last Updated

{selectedOrder.lastUpdated}

) } return (

{/* Header */}

Order Management

Manage your store orders

{onRequestWithdrawal && ( )} {onViewHistory && ( )}

{/* Search */}

setSearchQuery(e.target.value)} className="pl-11 h-12 bg-card border-border" />

{/* Orders List */}

{filteredOrders.map((order) => { const statusInfo = statusConfig[order.status] const StatusIcon = statusInfo.icon return ( setSelectedOrder(order)} >

{order.orderNumber}

{order.customer.name}

{statusInfo.label}

{order.items.slice(0, 3).map((item) => (

))} {order.items.length > 3 && (

+{order.items.length - 3}

)}

Total Amount

{order.totalPi.toLocaleString()}

Last Updated

{order.lastUpdated}

) })}

) } [V0_FILE]typescriptreact:file="components/partner-apps-management.tsx" isMerged="true" "use client" import { useState } from "react" import { ArrowLeft, Plus, Eye, ExternalLink, TrendingUp, Users, Target } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { PiIcon } from "@/components/pi-icon" interface PartnerApp { id: string name: string logo: string category: string status: "active" | "pending" | "inactive" impressions: number clicks: number installs: number revenue: number ctr: number } interface PartnerAppsManagementProps { onBack: () => void onViewAnalytics: (appId: string) => void } const mockPartnerApps: PartnerApp[] = [ { id: "app-1", name: "Beauty Hub", logo: "https://images.unsplash.com/photo-1596462502278-27bfdc403348?w=100&h=100&fit=crop", category: "Beauty & Cosmetics", status: "active", impressions: 125430, clicks: 3876, installs: 234, revenue: 4280, ctr: 3.09, }, { id: "app-2", name: "Shoe Paradise", logo: "https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=100&h=100&fit=crop", category: "Footwear", status: "active", impressions: 98750, clicks: 2963, installs: 187, revenue: 3420, ctr: 3.00, }, { id: "app-3", name: "Designer Vault", logo: "https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=100&h=100&fit=crop", category: "Luxury Fashion", status: "active", impressions: 87320, clicks: 2620, installs: 156, revenue: 2850, ctr: 3.00, }, { id: "app-4", name: "Accessory Shop", logo: "https://images.unsplash.com/photo-1611652022419-a9419f74343d?w=100&h=100&fit=crop", category: "Accessories", status: "pending", impressions: 0, clicks: 0, installs: 0, revenue: 0, ctr: 0, }, ] export function PartnerAppsManagement({ onBack, onViewAnalytics }: PartnerAppsManagementProps) { const [searchQuery, setSearchQuery] = useState("") const [filterStatus, setFilterStatus] = useState<"all" | "active" | "pending" | "inactive">("all") const filteredApps = mockPartnerApps.filter(app => { const matchesSearch = app.name.toLowerCase().includes(searchQuery.toLowerCase()) const matchesStatus = filterStatus === "all" || app.status === filterStatus return matchesSearch && matchesStatus }) const totalStats = { impressions: mockPartnerApps.reduce((sum, app) => sum + app.impressions, 0), clicks: mockPartnerApps.reduce((sum, app) => sum + app.clicks, 0), installs: mockPartnerApps.reduce((sum, app) => sum + app.installs, 0), revenue: mockPartnerApps.reduce((sum, app) => sum + app.revenue, 0), } return (

{/* Header */}

Partner Apps

Manage cross-app promotions

{/* Search */} setSearchQuery(e.target.value)} className="mb-4 bg-card border-border" /> {/* Filter Tabs */}

{["all", "active", "pending", "inactive"].map((status) => ( ))}

{/* Total Stats */}

Network Performance

Impressions

{totalStats.impressions.toLocaleString()}

Clicks

{totalStats.clicks.toLocaleString()}

Installs

{totalStats.installs.toLocaleString()}

Revenue

{totalStats.revenue.toLocaleString()}

{/* Partner Apps List */}

{filteredApps.length} Partner Apps

{filteredApps.map((app) => (

{app.name}

{app.status}

{app.category}

{app.status === "active" && ( <>

Impressions

{(app.impressions / 1000).toFixed(1)}k

Clicks

{app.clicks.toLocaleString()}

Installs

{app.installs}

CTR

{app.ctr}%

{app.revenue.toLocaleString()} revenue

)} {app.status === "pending" && (

)} ))}

) } [V0_FILE]typescriptreact:file="components/external-ad-analytics.tsx" isMerged="true" "use client" import { useState } from "react" import { ArrowLeft, Eye, Target, Users, TrendingUp, Calendar } from "lucide-react" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { PiIcon } from "@/components/pi-icon" interface ExternalAdAnalyticsProps { appId: string appName: string onBack: () => void } const mockCampaigns = [ { id: "camp-1", name: "Spring Collection Launch", image: "https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=400&h=200&fit=crop", impressions: 45230, clicks: 1398, installs: 87, ctr: 3.09, installRate: 6.22, revenue: 1590, status: "active", }, { id: "camp-2", name: "Designer Collaboration", image: "https://images.unsplash.com/photo-1483985988355-763728e1935b?w=400&h=200&fit=crop", impressions: 38920, clicks: 1167, installs: 71, ctr: 3.00, installRate: 6.08, revenue: 1300, status: "active", }, { id: "camp-3", name: "Luxury Accessories", image: "https://images.unsplash.com/photo-1611652022419-a9419f74343d?w=400&h=200&fit=crop", impressions: 41280, clicks: 1311, installs: 76, ctr: 3.18, installRate: 5.80, revenue: 1390, status: "completed", }, ] export function ExternalAdAnalytics({ appId, appName, onBack }: ExternalAdAnalyticsProps) { const [timeframe, setTimeframe] = useState<"7d" | "30d" | "all">("30d") const totalStats = { impressions: mockCampaigns.reduce((sum, c) => sum + c.impressions, 0), clicks: mockCampaigns.reduce((sum, c) => sum + c.clicks, 0), installs: mockCampaigns.reduce((sum, c) => sum + c.installs, 0), revenue: mockCampaigns.reduce((sum, c) => sum + c.revenue, 0), avgCtr: mockCampaigns.reduce((sum, c) => sum + c.ctr, 0) / mockCampaigns.length, avgInstallRate: mockCampaigns.reduce((sum, c) => sum + c.installRate, 0) / mockCampaigns.length, } return (

{/* Header */}

External Analytics

{appName} performance

{/* Timeframe Selector */}

{[ { value: "7d", label: "7 Days" }, { value: "30d", label: "30 Days" }, { value: "all", label: "All Time" }, ].map((option) => ( ))}

{/* Overview Stats */}

Performance Overview

Total Impressions

{(totalStats.impressions / 1000).toFixed(1)}k

Total Clicks

{totalStats.clicks.toLocaleString()}

App Installs

{totalStats.installs}

Revenue

{totalStats.revenue.toLocaleString()}

Avg. Click-Through Rate

{totalStats.avgCtr.toFixed(2)}%

Avg. Install Rate

{totalStats.avgInstallRate.toFixed(2)}%

{/* Campaign Performance */}

Campaign Performance

{mockCampaigns.map((campaign) => (

{campaign.name}

{campaign.status}

Impressions

{(campaign.impressions / 1000).toFixed(1)}k

Clicks

{campaign.clicks.toLocaleString()}

Installs

{campaign.installs}

CTR

{campaign.ctr}%

Install Rate

{campaign.installRate}%

Revenue

{campaign.revenue.toLocaleString()}

Last 30 days

+12.5% vs previous

))}

) } [V0_FILE]typescript:file="lib/ad-category-validator.ts" isMerged="true" export type FashionCategory = | "clothing" | "accessories" | "shoes" | "beauty" | "designers" | "luxury-fashion" | "streetwear" | "jewelry" | "bags" | "watches" | "sunglasses" | "cosmetics" | "fragrances" | "skincare" export const ALLOWED_FASHION_CATEGORIES: FashionCategory[] = [ "clothing", "accessories", "shoes", "beauty", "designers", "luxury-fashion", "streetwear", "jewelry", "bags", "watches", "sunglasses", "cosmetics", "fragrances", "skincare", ] export const CATEGORY_LABELS: Record = { clothing: "Clothing & Apparel", accessories: "Fashion Accessories", shoes: "Footwear", beauty: "Beauty & Cosmetics", designers: "Designer Brands", "luxury-fashion": "Luxury Fashion", streetwear: "Streetwear", jewelry: "Jewelry", bags: "Bags & Handbags", watches: "Watches", sunglasses: "Sunglasses & Eyewear", cosmetics: "Cosmetics & Makeup", fragrances: "Fragrances & Perfumes", skincare: "Skincare Products", } export interface AdCategoryValidation { isValid: boolean category?: FashionCategory reason?: string } export function validateAdCategory(category: string): AdCategoryValidation { const normalizedCategory = category.toLowerCase().trim() // Direct match if (ALLOWED_FASHION_CATEGORIES.includes(normalizedCategory as FashionCategory)) { return { isValid: true, category: normalizedCategory as FashionCategory, } } // Check for partial matches or keywords const fashionKeywords = [ "fashion", "clothing", "apparel", "shoes", "footwear", "accessories", "jewelry", "watch", "bag", "handbag", "purse", "designer", "luxury", "beauty", "cosmetic", "makeup", "fragrance", "perfume", "skincare", "sunglasses", "eyewear", "streetwear", ] const hasKeyword = fashionKeywords.some((keyword) => normalizedCategory.includes(keyword) ) if (hasKeyword) { // Try to map to closest category if (normalizedCategory.includes("cloth") || normalizedCategory.includes("apparel")) { return { isValid: true, category: "clothing" } } if (normalizedCategory.includes("shoe") || normalizedCategory.includes("footwear")) { return { isValid: true, category: "shoes" } } if (normalizedCategory.includes("bag") || normalizedCategory.includes("purse")) { return { isValid: true, category: "bags" } } if (normalizedCategory.includes("watch")) { return { isValid: true, category: "watches" } } if (normalizedCategory.includes("jewelry")) { return { isValid: true, category: "jewelry" } } if (normalizedCategory.includes("beauty") || normalizedCategory.includes("cosmetic")) { return { isValid: true, category: "beauty" } } if (normalizedCategory.includes("designer") || normalizedCategory.includes("luxury")) { return { isValid: true, category: "luxury-fashion" } } if (normalizedCategory.includes("streetwear")) { return { isValid: true, category: "streetwear" } } if (normalizedCategory.includes("fragrance") || normalizedCategory.includes("perfume")) { return { isValid: true, category: "fragrances" } } if (normalizedCategory.includes("skincare")) { return { isValid: true, category: "skincare" } } if (normalizedCategory.includes("sunglasses") || normalizedCategory.includes("eyewear")) { return { isValid: true, category: "sunglasses" } } // General fashion-related but no specific match return { isValid: true, category: "accessories" } } // Not a fashion category return { isValid: false, reason: `"${category}" is not a fashion-related category. Only fashion, clothing, accessories, shoes, beauty, and designer brands are allowed.`, } } export function getCategoryLabel(category: FashionCategory): string { return CATEGORY_LABELS[category] || category } export function isFashionRelated(category: string): boolean { return validateAdCategory(category).isValid } [V0_FILE]typescriptreact:file="components/promote-store-page.tsx" isMerged="true" "use client" import { useState } from "react" import Image from "next/image" import { ArrowLeft, TrendingUp, Target, Calendar, DollarSign, Eye, MousePointer } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { PiIcon } from "@/components/pi-icon" import { usePiPayment } from "@/hooks/use-pi-payment" import { ALLOWED_FASHION_CATEGORIES, getCategoryLabel, type FashionCategory } from "@/lib/ad-category-validator" interface PromoteStorePageProps { storeName: string onBack: () => void } const adPlacements = [ { id: "home-banner", name: "Home Banner", description: "Premium banner on homepage - highest visibility", reach: "50K+ daily views", icon: TrendingUp, basePrice: 500, recommended: true, }, { id: "product-inline", name: "Product Listings", description: "Display between product listings", reach: "30K+ daily views", icon: Target, basePrice: 300, }, { id: "category-banner", name: "Category Pages", description: "Show in specific category pages", reach: "20K+ daily views", icon: Eye, basePrice: 200, }, ] const durations = [ { id: "1day", label: "1 Day", days: 1, multiplier: 1 }, { id: "3days", label: "3 Days", days: 3, multiplier: 2.7 }, { id: "7days", label: "7 Days", days: 7, multiplier: 6, popular: true }, { id: "30days", label: "30 Days", days: 30, multiplier: 24 }, ] export function PromoteStorePage({ storeName, onBack }: PromoteStorePageProps) { const [selectedPlacement, setSelectedPlacement] = useState(null) const [selectedDuration, setSelectedDuration] = useState("7days") const [selectedCategory, setSelectedCategory] = useState(null) const [adTitle, setAdTitle] = useState("") const [adSubtitle, setAdSubtitle] = useState("") const [showSuccess, setShowSuccess] = useState(false) const { createPayment, isProcessing, error } = usePiPayment() const placement = adPlacements.find(p => p.id === selectedPlacement) const duration = durations.find(d => d.id === selectedDuration) const totalCost = placement && duration ? Math.round(placement.basePrice * duration.multiplier) : 0 const handlePromote = async () => { if (!selectedPlacement || !adTitle || !adSubtitle || !selectedCategory) { alert("Please fill in all fields including category") return } console.log("[v0] Ad category validated:", selectedCategory) const success = await createPayment( totalCost, `${storeName} - Ad Promotion`, { productId: `AD-${selectedPlacement}`, itemName: `${placement?.name} - ${duration?.label}`, itemType: "advertisement", storeName, duration: duration?.days, } ) if (success) { console.log("[v0] Ad campaign submitted for approval") setShowSuccess(true) setTimeout(() => { onBack() }, 2500) } } if (showSuccess) { return (

Ad Submitted for Review!

Your ad campaign has been submitted

Admin will review and approve shortly

) } return (

Promote Your Store

{storeName}

{/* Ad Placement Selection */}

Choose Ad Placement

{adPlacements.map((place) => { const Icon = place.icon const isSelected = selectedPlacement === place.id return ( ) })}

{/* Duration Selection */} {selectedPlacement && (

Select Duration

{durations.map((dur) => { const isSelected = selectedDuration === dur.id return ( ) })}

)} {/* Category Selection */} {selectedPlacement && (

Fashion Category

⚠️ Only fashion-related ads are accepted: clothing, accessories, shoes, beauty, and designer brands.

{ALLOWED_FASHION_CATEGORIES.slice(0, 8).map((category) => ( ))}

)} {/* Ad Content */} {selectedPlacement && selectedCategory && (

Ad Content

Ad Title setAdTitle(e.target.value)} placeholder="e.g., Summer Collection 2024" className="bg-input border-border text-foreground" maxLength={50} />

{adTitle.length}/50 characters

Ad Subtitle setAdSubtitle(e.target.value)} placeholder="e.g., Up to 50% off luxury fashion" className="bg-input border-border text-foreground" maxLength={80} />

{adSubtitle.length}/80 characters

)} {/* Campaign Summary */} {selectedPlacement && placement && duration && (

Campaign Summary

Placement {placement.name}

Duration {duration.label}

Estimated Reach {placement.reach}

Total Cost

{totalCost.toLocaleString()}π

Platform commission (15%) is included in the pricing

)} {/* Submit Button */} {selectedPlacement && selectedCategory && ( )} {error && (

{error}

)}

) } [V0_FILE]typescriptreact:file="components/admin-control-panel.tsx" isMerged="true" "use client" import { useState } from "react" import Image from "next/image" import { ArrowLeft, CheckCircle, XCircle, Edit3, Eye, Clock, Calendar, DollarSign, Wallet, Network } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { PiIcon } from "@/components/pi-icon" import type { Advertisement, AdApprovalStatus } from "@/components/ad-banner" import { validateAdCategory } from "@/lib/ad-category-validator" interface AdminControlPanelProps { onBack: () => void onNavigateToEarnings?: () => void onNavigateToWithdrawals?: () => void onNavigateToPartnerApps?: () => void } const mockPendingAds: Advertisement[] = [ { id: "pending-1", storeName: "Fashion Hub", title: "NEW WINTER COLLECTION", subtitle: "Premium wool coats and accessories", image: "https://images.unsplash.com/photo-1539533113208-f6df8cc8b543?w=400&h=300&fit=crop", cta: "Shop Now", targetUrl: "#", duration: 7, budget: 3000, impressions: 0, clicks: 0, isActive: false, approvalStatus: "pending", startDate: new Date(), endDate: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000), }, { id: "pending-2", storeName: "Elite Shoes", title: "SPRING SNEAKER SALE", subtitle: "Up to 40% off limited edition sneakers", image: "https://images.unsplash.com/photo-1549298916-b41d501d3772?w=400&h=300&fit=crop", cta: "View Collection", targetUrl: "#", duration: 3, budget: 900, impressions: 0, clicks: 0, isActive: false, approvalStatus: "pending", startDate: new Date(), endDate: new Date(Date.now() + 3 * 24 * 60 * 60 * 1000), }, { id: "pending-3", storeName: "Luxury Bags", title: "Exclusive Designer Bags", subtitle: "Handcrafted leather bags from Italy", image: "https://images.unsplash.com/photo-1584917865442-de89df76afd3?w=400&h=300&fit=crop", cta: "Explore", targetUrl: "#", duration: 14, budget: 6000, impressions: 0, clicks: 0, isActive: false, approvalStatus: "pending", startDate: new Date(), endDate: new Date(Date.now() + 14 * 24 * 60 * 60 * 1000), }, ] export function AdminControlPanel({ onBack, onNavigateToEarnings, onNavigateToWithdrawals, onNavigateToPartnerApps }: AdminControlPanelProps) { const [ads, setAds] = useState(mockPendingAds) const [selectedAd, setSelectedAd] = useState(null) const [editMode, setEditMode] = useState(false) const [editTitle, setEditTitle] = useState("") const [editSubtitle, setEditSubtitle] = useState("") const [rejectionReason, setRejectionReason] = useState("") const [filterStatus, setFilterStatus] = useState("pending") const handleApprove = (adId: string) => { setAds(ads.map(ad => ad.id === adId ? { ...ad, approvalStatus: "approved" as AdApprovalStatus, isActive: true } : ad )) setSelectedAd(null) } const handleReject = (adId: string, reason: string) => { if (!reason.trim()) { alert("Please provide a rejection reason") return } setAds(ads.map(ad => ad.id === adId ? { ...ad, approvalStatus: "rejected" as AdApprovalStatus, rejectionReason: reason } : ad )) setSelectedAd(null) setRejectionReason("") } const handleEdit = (adId: string) => { if (!editTitle || !editSubtitle) { alert("Please fill in all fields") return } setAds(ads.map(ad => ad.id === adId ? { ...ad, title: editTitle, subtitle: editSubtitle } : ad )) setEditMode(false) setEditTitle("") setEditSubtitle("") } const openAdDetails = (ad: Advertisement) => { setSelectedAd(ad) setEditTitle(ad.title) setEditSubtitle(ad.subtitle) setEditMode(false) setRejectionReason("") } const filteredAds = filterStatus === "all" ? ads : ads.filter(ad => ad.approvalStatus === filterStatus) const pendingCount = ads.filter(ad => ad.approvalStatus === "pending").length const approvedCount = ads.filter(ad => ad.approvalStatus === "approved").length const rejectedCount = ads.filter(ad => ad.approvalStatus === "rejected").length return (

Admin Control Panel

Review and approve advertisements

ℹ️ Only fashion-related ads are permitted on Style World

{/* Stats Overview */}

{onNavigateToEarnings && (

Earnings

)} {onNavigateToWithdrawals && (

Withdrawals

)} {onNavigateToPartnerApps && (

Partners

)}

{pendingCount} Pending {approvedCount} Approved {rejectedCount} Rejected

{/* Filter Tabs */}

{[ { id: "all", label: "All Ads" }, { id: "pending", label: "Pending Review" }, { id: "approved", label: "Approved" }, { id: "rejected", label: "Rejected" }, ].map((filter) => ( ))}

{/* Ad List */}

{filteredAds.length === 0 ? (

No ads to review

) : ( filteredAds.map((ad) => ( openAdDetails(ad)} >

{ad.title}

{ad.storeName}

Fashion

{ad.subtitle}

{ad.approvalStatus}

{ad.duration} days

{ad.budget}π

)) )}

{/* Ad Detail Modal */} {selectedAd && (

Ad Review

{/* Preview */}

{selectedAd.storeName}

{editMode ? editTitle : selectedAd.title}

{editMode ? editSubtitle : selectedAd.subtitle}

{/* Edit Fields */} {editMode ? (

Ad Title setEditTitle(e.target.value)} className="bg-input border-border text-foreground" />

Ad Subtitle setEditSubtitle(e.target.value)} className="bg-input border-border text-foreground" />

) : ( )} {/* Rejection Reason Input */} {selectedAd.approvalStatus === "pending" && ( Rejection Reason (if rejecting) setRejectionReason(e.target.value)} placeholder="e.g., Content does not meet guidelines" className="bg-input border-border text-foreground" /> )} {/* Actions */} {selectedAd.approvalStatus === "pending" && (

)} {selectedAd.approvalStatus === "rejected" && selectedAd.rejectionReason && (

Rejection Reason:

{selectedAd.rejectionReason}

)}

) } [V0_FILE]typescript:file="lib/pi-consensus-value.ts" isMerged="true" /** * Pi Network Consensus Value (GCV) Utility * Handles pricing calculations based on the agreed global consensus value */ // Global Consensus Value for Pi - This represents the agreed value of 1 Pi export const PI_CONSENSUS_VALUE = 314159 // $314,159 USD per Pi (based on Pi Network's GCV) // Calculate Pi amount needed based on USD price export function calculatePiAmount(usdPrice: number): number { return Math.round((usdPrice / PI_CONSENSUS_VALUE) * 1000000) / 1000000 // Round to 6 decimal places } // Format Pi amount with proper decimal places export function formatPiAmount(piAmount: number): string { // For very small amounts, show more decimals if (piAmount < 0.001) { return piAmount.toFixed(8) } else if (piAmount < 1) { return piAmount.toFixed(6) } else if (piAmount < 100) { return piAmount.toFixed(4) } else { return piAmount.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) } } // Convert USD to Pi display string export function convertUsdToPiDisplay(usdPrice: number): string { const piAmount = calculatePiAmount(usdPrice) return formatPiAmount(piAmount) } // Get USD equivalent for a Pi amount export function convertPiToUsd(piAmount: number): number { return Math.round(piAmount * PI_CONSENSUS_VALUE * 100) / 100 } // Format as Pi with symbol export function formatPiWithSymbol(piAmount: number): string { return `${formatPiAmount(piAmount)}π` } // Convert USD price to Pi and format with symbol export function displayPiPrice(usdPrice: number): string { const piAmount = calculatePiAmount(usdPrice) return formatPiWithSymbol(piAmount) } // Parse USD price string (e.g., "$1,299") to number export function parseUsdPrice(priceString: string): number { return parseFloat(priceString.replace(/[$,]/g, '')) } // Get both USD and Pi formatted strings export function getPriceDisplay(usdPrice: number): { usd: string pi: string piRaw: number } { const piAmount = calculatePiAmount(usdPrice) return { usd: `$${usdPrice.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`, pi: formatPiWithSymbol(piAmount), piRaw: piAmount } } [V0_FILE]typescriptreact:file="components/cart-page.tsx" isMerged="true" "use client" import Image from "next/image" import { Minus, Plus, Trash2, ArrowLeft } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { useCart } from "@/contexts/cart-context" import { PiIcon } from "@/components/pi-icon" import { formatPiAmount } from "@/lib/pi-consensus-value" interface CartPageProps { onBack: () => void onCheckout: () => void } export function CartPage({ onBack, onCheckout }: CartPageProps) { const { items, removeItem, updateQuantity, totalPrice, totalPiPrice, totalItems } = useCart() if (items.length === 0) { return (

Shopping Cart

{totalItems} items

🛍️

Your cart is empty

Discover luxury fashion and add items to your cart

) } return (

Shopping Cart

{totalItems} items

{items.map((item) => (

{item.name}

{item.brand}

{(item.size || item.color) && (

{item.size && Size: {item.size}} {item.color && Color: {item.color}}

)}

{item.quantity}

{formatPiAmount(item.piPrice * item.quantity)}π

${(item.price * item.quantity).toFixed(2)}

))}

{/* Fixed bottom checkout */}

Subtotal

{formatPiAmount(totalPiPrice)}π

${totalPrice.toFixed(2)} USD

) } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer utilities { .text-balance { text-wrap: balance; } } @layer base { :root { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --background: 265 70% 12%; --foreground: 0 0% 100%; --card: 265 60% 16%; --card-foreground: 0 0% 100%; --popover: 265 60% 16%; --popover-foreground: 0 0% 100%; --primary: 45 100% 51%; --primary-foreground: 0 0% 0%; --secondary: 265 50% 20%; --secondary-foreground: 45 100% 51%; --muted: 265 45% 22%; --muted-foreground: 0 0% 65%; --accent: 45 100% 51%; --accent-foreground: 0 0% 0%; --destructive: 0 62.8% 50%; --destructive-foreground: 0 0% 100%; --border: 265 40% 25%; --input: 265 65% 14%; --ring: 45 100% 51%; --radius: 0.5rem; } } @layer utilities { .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } .scrollbar-hide::-webkit-scrollbar { display: none; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescript:file="lib/i18n/types.ts" isMerged="true" export type Direction = "ltr" | "rtl" export interface Language { code: string label: string nativeLabel: string dir: Direction flag: string } export const SUPPORTED_LANGUAGES: Language[] = [ { code: "en", label: "English", nativeLabel: "English", dir: "ltr", flag: "🇺🇸", }, { code: "ar", label: "Arabic", nativeLabel: "العربية", dir: "rtl", flag: "🇸🇦", }, { code: "fr", label: "French", nativeLabel: "Français", dir: "ltr", flag: "🇫🇷", }, { code: "tr", label: "Turkish", nativeLabel: "Türkçe", dir: "ltr", flag: "🇹🇷", }, { code: "zh", label: "Chinese", nativeLabel: "中文", dir: "ltr", flag: "🇨🇳", }, ] // The master schema — all locales must satisfy this shape export interface TranslationSchema { // Navigation nav: { home: string explore: string cart: string profile: string } // Home home: { tagline: string searchPlaceholder: string featuredStores: string featuredStoresSubtitle: string exploreAll: string trendingNow: string trendingSubtitle: string viewAll: string specialOffers: string sponsored: string promote: string newArrivals: string newArrivalsSubtitle: string shopNow: string } // Product product: { addToCart: string buyNow: string inStock: string outOfStock: string reviews: string rating: string size: string color: string quantity: string price: string piPrice: string trending: string new: string hot: string bestSeller: string limited: string free: string paid: string } // Cart cart: { title: string empty: string emptySubtitle: string continueShopping: string subtotal: string shipping: string total: string checkout: string remove: string items: string orderSummary: string securePayment: string piNetwork: string } // Checkout checkout: { title: string payWith: string processingPayment: string confirmOrder: string orderTotal: string deliveryAddress: string shippingMethod: string standard: string express: string deliveryDays: string } // Profile profile: { title: string piBalance: string orders: string wishlist: string settings: string wallet: string transactions: string paymentMethods: string adCampaigns: string shippingPartner: string security: string helpCenter: string logout: string memberSince: string vip: string editProfile: string } // Settings settings: { title: string language: string selectLanguage: string languageDescription: string theme: string notifications: string privacy: string currency: string about: string version: string appearance: string saved: string } // Orders orders: { title: string subtitle: string myOrders: string noOrders: string orderNumber: string status: string pending: string processing: string shipped: string delivered: string cancelled: string trackOrder: string viewDetails: string date: string total: string search: string } // Store store: { title: string subtitle: string products: string followers: string rating: string follow: string following: string contact: string aboutStore: string openStore: string storeSettings: string manageProducts: string addProduct: string } // Merchant dashboard merchant: { dashboard: string totalSales: string totalOrders: string totalProducts: string revenue: string addProduct: string editProduct: string deleteProduct: string stockControl: string productName: string productPrice: string productCategory: string productDescription: string productImage: string inStock: string publish: string draft: string save: string cancel: string } // Notifications notifications: { title: string subtitle: string empty: string markAllRead: string orderUpdate: string newMessage: string promotion: string system: string justNow: string minutesAgo: string hoursAgo: string daysAgo: string } // Shipping shipping: { title: string registerPartner: string dashboard: string deliveryAreas: string prices: string estimatedTime: string selectPartner: string availablePartners: string trackShipment: string withdraw: string history: string netEarnings: string commission: string } // Ads ads: { promoted: string promoteStore: string adCampaigns: string createCampaign: string adTitle: string adSubtitle: string placement: string duration: string budget: string impressions: string clicks: string installs: string pending: string approved: string rejected: string categories: string fashionOnly: string submitForReview: string } // Withdrawals withdrawals: { title: string request: string available: string minimumAmount: string walletAddress: string confirm: string history: string approved: string rejected: string processing: string rejectionReason: string } // Admin admin: { panel: string earnings: string withdrawals: string partners: string reviewAds: string approve: string reject: string edit: string totalRevenue: string adRevenue: string shippingRevenue: string platformCommission: string pendingAds: string } // Auth auth: { welcome: string connectingPi: string authenticating: string signInWith: string piNetwork: string } // Common common: { back: string loading: string error: string retry: string save: string cancel: string confirm: string delete: string edit: string close: string search: string filter: string sort: string share: string copy: string copied: string success: string failed: string required: string optional: string seeAll: string viewMore: string currency: string free: string pi: string usd: string consensusValue: string } } [V0_FILE]typescript:file="lib/i18n/locales/en.ts" isMerged="true" import type { TranslationSchema } from "../types" const en: TranslationSchema = { nav: { home: "Home", explore: "Explore", cart: "Cart", profile: "Profile", }, home: { tagline: "Luxury Fashion Marketplace", searchPlaceholder: "Search styles, brands, designers...", featuredStores: "Featured Stores", featuredStoresSubtitle: "Curated luxury boutiques", exploreAll: "Explore All", trendingNow: "Trending Now", trendingSubtitle: "Most coveted pieces", viewAll: "View All", specialOffers: "Special Offers", sponsored: "Sponsored", promote: "Promote", newArrivals: "New Arrivals", newArrivalsSubtitle: "Fresh from the runway", shopNow: "Shop Now", }, product: { addToCart: "Add to Cart", buyNow: "Buy Now", inStock: "In Stock", outOfStock: "Out of Stock", reviews: "Reviews", rating: "Rating", size: "Size", color: "Color", quantity: "Quantity", price: "Price", piPrice: "Pi Price", trending: "Trending", new: "New", hot: "Hot", bestSeller: "Best Seller", limited: "Limited", free: "Free", paid: "Paid", }, cart: { title: "Shopping Cart", empty: "Your cart is empty", emptySubtitle: "Add some luxury pieces to get started", continueShopping: "Continue Shopping", subtotal: "Subtotal", shipping: "Shipping", total: "Total", checkout: "Proceed to Checkout", remove: "Remove", items: "items", orderSummary: "Order Summary", securePayment: "Secure Pi Payment", piNetwork: "Powered by Pi Network", }, checkout: { title: "Checkout", payWith: "Pay with Pi", processingPayment: "Processing Payment...", confirmOrder: "Confirm Order", orderTotal: "Order Total", deliveryAddress: "Delivery Address", shippingMethod: "Shipping Method", standard: "Standard Delivery", express: "Express Delivery", deliveryDays: "business days", }, profile: { title: "Profile", piBalance: "Pi Balance", orders: "My Orders", wishlist: "Wishlist", settings: "Settings", wallet: "Pi Wallet", transactions: "Transactions", paymentMethods: "Payment Methods", adCampaigns: "Ad Campaigns", shippingPartner: "Shipping Partner", security: "Security", helpCenter: "Help Center", logout: "Logout", memberSince: "Member since", vip: "VIP", editProfile: "Edit Profile", }, settings: { title: "Settings", language: "Language", selectLanguage: "Select Language", languageDescription: "Choose your preferred language. The app will update instantly.", theme: "Theme", notifications: "Notifications", privacy: "Privacy", currency: "Currency", about: "About", version: "Version", appearance: "Appearance", saved: "Settings saved", }, orders: { title: "Order Management", subtitle: "Manage your store orders", myOrders: "My Orders", noOrders: "No orders yet", orderNumber: "Order", status: "Status", pending: "Pending", processing: "Processing", shipped: "Shipped", delivered: "Delivered", cancelled: "Cancelled", trackOrder: "Track Order", viewDetails: "View Details", date: "Date", total: "Total", search: "Search orders...", }, store: { title: "Store", subtitle: "Fashion boutique", products: "Products", followers: "Followers", rating: "Rating", follow: "Follow", following: "Following", contact: "Contact", aboutStore: "About Store", openStore: "Open My Store", storeSettings: "Store Settings", manageProducts: "Manage Products", addProduct: "Add Product", }, merchant: { dashboard: "Merchant Dashboard", totalSales: "Total Sales", totalOrders: "Total Orders", totalProducts: "Total Products", revenue: "Revenue", addProduct: "Add Product", editProduct: "Edit Product", deleteProduct: "Delete Product", stockControl: "Stock Control", productName: "Product Name", productPrice: "Price (Pi)", productCategory: "Category", productDescription: "Description", productImage: "Product Image", inStock: "In Stock", publish: "Publish", draft: "Save as Draft", save: "Save", cancel: "Cancel", }, notifications: { title: "Notifications", subtitle: "Stay up to date", empty: "No notifications yet", markAllRead: "Mark all as read", orderUpdate: "Order Update", newMessage: "New Message", promotion: "Promotion", system: "System", justNow: "Just now", minutesAgo: "min ago", hoursAgo: "hr ago", daysAgo: "days ago", }, shipping: { title: "Shipping", registerPartner: "Register as Partner", dashboard: "Shipping Dashboard", deliveryAreas: "Delivery Areas", prices: "Prices", estimatedTime: "Estimated Time", selectPartner: "Select Shipping Partner", availablePartners: "Available Partners", trackShipment: "Track Shipment", withdraw: "Withdraw Earnings", history: "Withdrawal History", netEarnings: "Net Earnings", commission: "Platform Commission (15%)", }, ads: { promoted: "Sponsored", promoteStore: "Promote Store", adCampaigns: "Ad Campaigns", createCampaign: "Create Campaign", adTitle: "Ad Title", adSubtitle: "Ad Subtitle", placement: "Placement", duration: "Duration", budget: "Budget", impressions: "Impressions", clicks: "Clicks", installs: "Installs", pending: "Pending Review", approved: "Approved", rejected: "Rejected", categories: "Categories", fashionOnly: "Fashion-related ads only", submitForReview: "Submit for Review", }, withdrawals: { title: "Withdrawals", request: "Request Payout", available: "Available Balance", minimumAmount: "Minimum withdrawal", walletAddress: "Pi Wallet Address", confirm: "Confirm Withdrawal", history: "Transaction History", approved: "Approved", rejected: "Rejected", processing: "Processing", rejectionReason: "Rejection Reason", }, admin: { panel: "Admin Control Panel", earnings: "Platform Earnings", withdrawals: "Withdrawals", partners: "Partner Apps", reviewAds: "Review Ads", approve: "Approve", reject: "Reject", edit: "Edit", totalRevenue: "Total Revenue", adRevenue: "Ad Revenue", shippingRevenue: "Shipping Revenue", platformCommission: "Platform Commission", pendingAds: "Pending Ads", }, auth: { welcome: "Welcome to Style World", connectingPi: "Connecting to Pi Network...", authenticating: "Authenticating...", signInWith: "Sign in with", piNetwork: "Pi Network", }, common: { back: "Back", loading: "Loading...", error: "Something went wrong", retry: "Retry", save: "Save", cancel: "Cancel", confirm: "Confirm", delete: "Delete", edit: "Edit", close: "Close", search: "Search", filter: "Filter", sort: "Sort", share: "Share", copy: "Copy", copied: "Copied!", success: "Success", failed: "Failed", required: "Required", optional: "Optional", seeAll: "See All", viewMore: "View More", currency: "Currency", free: "Free", pi: "Pi", usd: "USD", consensusValue: "Consensus Value", }, } export default en [V0_FILE]typescript:file="lib/i18n/locales/ar.ts" isMerged="true" import type { TranslationSchema } from "../types" const ar: TranslationSchema = { nav: { home: "الرئيسية", explore: "استكشاف", cart: "السلة", profile: "الملف الشخصي", }, home: { tagline: "سوق الأزياء الفاخرة", searchPlaceholder: "ابحث عن أنماط، ماركات، مصممين...", featuredStores: "المتاجر المميزة", featuredStoresSubtitle: "بوتيكات فاخرة مختارة", exploreAll: "استكشاف الكل", trendingNow: "الأكثر رواجاً", trendingSubtitle: "القطع الأكثر طلباً", viewAll: "عرض الكل", specialOffers: "عروض خاصة", sponsored: "ممول", promote: "ترويج", newArrivals: "وصل حديثاً", newArrivalsSubtitle: "مباشرة من أسبوع الموضة", shopNow: "تسوق الآن", }, product: { addToCart: "أضف إلى السلة", buyNow: "اشتر الآن", inStock: "متوفر", outOfStock: "نفد من المخزون", reviews: "تقييمات", rating: "التقييم", size: "المقاس", color: "اللون", quantity: "الكمية", price: "السعر", piPrice: "السعر بـ Pi", trending: "رائج", new: "جديد", hot: "مميز", bestSeller: "الأكثر مبيعاً", limited: "محدود", free: "مجاني", paid: "مدفوع", }, cart: { title: "سلة التسوق", empty: "سلتك فارغة", emptySubtitle: "أضف بعض القطع الفاخرة للبدء", continueShopping: "مواصلة التسوق", subtotal: "المجموع الفرعي", shipping: "الشحن", total: "الإجمالي", checkout: "المتابعة للدفع", remove: "إزالة", items: "منتجات", orderSummary: "ملخص الطلب", securePayment: "دفع آمن بـ Pi", piNetwork: "مدعوم من شبكة Pi", }, checkout: { title: "إتمام الطلب", payWith: "الدفع بـ Pi", processingPayment: "جاري معالجة الدفع...", confirmOrder: "تأكيد الطلب", orderTotal: "إجمالي الطلب", deliveryAddress: "عنوان التوصيل", shippingMethod: "طريقة الشحن", standard: "توصيل عادي", express: "توصيل سريع", deliveryDays: "أيام عمل", }, profile: { title: "الملف الشخصي", piBalance: "رصيد Pi", orders: "طلباتي", wishlist: "المفضلة", settings: "الإعدادات", wallet: "محفظة Pi", transactions: "المعاملات", paymentMethods: "طرق الدفع", adCampaigns: "حملات الإعلانات", shippingPartner: "شريك الشحن", security: "الأمان", helpCenter: "مركز المساعدة", logout: "تسجيل الخروج", memberSince: "عضو منذ", vip: "VIP", editProfile: "تعديل الملف", }, settings: { title: "الإعدادات", language: "اللغة", selectLanguage: "اختر اللغة", languageDescription: "اختر لغتك المفضلة. سيتحدث التطبيق فوراً.", theme: "المظهر", notifications: "الإشعارات", privacy: "الخصوصية", currency: "العملة", about: "حول التطبيق", version: "الإصدار", appearance: "المظهر", saved: "تم حفظ الإعدادات", }, orders: { title: "إدارة الطلبات", subtitle: "إدارة طلبات متجرك", myOrders: "طلباتي", noOrders: "لا توجد طلبات بعد", orderNumber: "طلب", status: "الحالة", pending: "قيد الانتظار", processing: "قيد المعالجة", shipped: "تم الشحن", delivered: "تم التوصيل", cancelled: "ملغي", trackOrder: "تتبع الطلب", viewDetails: "عرض التفاصيل", date: "التاريخ", total: "الإجمالي", search: "البحث في الطلبات...", }, store: { title: "المتجر", subtitle: "بوتيك الأزياء", products: "المنتجات", followers: "المتابعون", rating: "التقييم", follow: "متابعة", following: "متابَع", contact: "تواصل", aboutStore: "عن المتجر", openStore: "افتح متجري", storeSettings: "إعدادات المتجر", manageProducts: "إدارة المنتجات", addProduct: "إضافة منتج", }, merchant: { dashboard: "لوحة تحكم التاجر", totalSales: "إجمالي المبيعات", totalOrders: "إجمالي الطلبات", totalProducts: "إجمالي المنتجات", revenue: "الإيرادات", addProduct: "إضافة منتج", editProduct: "تعديل المنتج", deleteProduct: "حذف المنتج", stockControl: "إدارة المخزون", productName: "اسم المنتج", productPrice: "السعر (Pi)", productCategory: "الفئة", productDescription: "الوصف", productImage: "صورة المنتج", inStock: "في المخزون", publish: "نشر", draft: "حفظ كمسودة", save: "حفظ", cancel: "إلغاء", }, notifications: { title: "الإشعارات", subtitle: "ابقَ على اطلاع", empty: "لا توجد إشعارات بعد", markAllRead: "تحديد الكل كمقروء", orderUpdate: "تحديث الطلب", newMessage: "رسالة جديدة", promotion: "عرض ترويجي", system: "النظام", justNow: "الآن", minutesAgo: "دقيقة مضت", hoursAgo: "ساعة مضت", daysAgo: "أيام مضت", }, shipping: { title: "الشحن", registerPartner: "التسجيل كشريك", dashboard: "لوحة تحكم الشحن", deliveryAreas: "مناطق التوصيل", prices: "الأسعار", estimatedTime: "الوقت المتوقع", selectPartner: "اختر شريك الشحن", availablePartners: "الشركاء المتاحون", trackShipment: "تتبع الشحنة", withdraw: "سحب الأرباح", history: "سجل السحوبات", netEarnings: "صافي الأرباح", commission: "عمولة المنصة (15%)", }, ads: { promoted: "إعلان ممول", promoteStore: "ترويج المتجر", adCampaigns: "الحملات الإعلانية", createCampaign: "إنشاء حملة", adTitle: "عنوان الإعلان", adSubtitle: "وصف الإعلان", placement: "مكان الإعلان", duration: "مدة الإعلان", budget: "الميزانية", impressions: "المشاهدات", clicks: "النقرات", installs: "التثبيتات", pending: "قيد المراجعة", approved: "معتمد", rejected: "مرفوض", categories: "الفئات", fashionOnly: "إعلانات الأزياء فقط", submitForReview: "إرسال للمراجعة", }, withdrawals: { title: "السحوبات", request: "طلب سحب", available: "الرصيد المتاح", minimumAmount: "الحد الأدنى للسحب", walletAddress: "عنوان محفظة Pi", confirm: "تأكيد السحب", history: "سجل المعاملات", approved: "معتمد", rejected: "مرفوض", processing: "قيد المعالجة", rejectionReason: "سبب الرفض", }, admin: { panel: "لوحة تحكم المشرف", earnings: "أرباح المنصة", withdrawals: "السحوبات", partners: "التطبيقات الشريكة", reviewAds: "مراجعة الإعلانات", approve: "اعتماد", reject: "رفض", edit: "تعديل", totalRevenue: "إجمالي الإيرادات", adRevenue: "إيرادات الإعلانات", shippingRevenue: "إيرادات الشحن", platformCommission: "عمولة المنصة", pendingAds: "الإعلانات المعلقة", }, auth: { welcome: "مرحباً بك في Style World", connectingPi: "جاري الاتصال بشبكة Pi...", authenticating: "جاري التحقق...", signInWith: "تسجيل الدخول عبر", piNetwork: "شبكة Pi", }, common: { back: "رجوع", loading: "جاري التحميل...", error: "حدث خطأ ما", retry: "إعادة المحاولة", save: "حفظ", cancel: "إلغاء", confirm: "تأكيد", delete: "حذف", edit: "تعديل", close: "إغلاق", search: "بحث", filter: "تصفية", sort: "ترتيب", share: "مشاركة", copy: "نسخ", copied: "تم النسخ!", success: "نجح", failed: "فشل", required: "مطلوب", optional: "اختياري", seeAll: "عرض الكل", viewMore: "المزيد", currency: "العملة", free: "مجاني", pi: "Pi", usd: "دولار", consensusValue: "قيمة التوافق", }, } export default ar [V0_FILE]typescript:file="lib/i18n/locales/fr.ts" isMerged="true" import type { TranslationSchema } from "../types" const fr: TranslationSchema = { nav: { home: "Accueil", explore: "Explorer", cart: "Panier", profile: "Profil" }, home: { tagline: "Marché de la Mode de Luxe", searchPlaceholder: "Rechercher styles, marques, designers...", featuredStores: "Boutiques en Vedette", featuredStoresSubtitle: "Boutiques de luxe sélectionnées", exploreAll: "Tout Explorer", trendingNow: "Tendances Actuelles", trendingSubtitle: "Pièces les plus convoitées", viewAll: "Voir Tout", specialOffers: "Offres Spéciales", sponsored: "Sponsorisé", promote: "Promouvoir", newArrivals: "Nouveautés", newArrivalsSubtitle: "Fraîchement du défilé", shopNow: "Acheter Maintenant", }, product: { addToCart: "Ajouter au Panier", buyNow: "Acheter Maintenant", inStock: "En Stock", outOfStock: "Rupture de Stock", reviews: "Avis", rating: "Note", size: "Taille", color: "Couleur", quantity: "Quantité", price: "Prix", piPrice: "Prix en Pi", trending: "Tendance", new: "Nouveau", hot: "Populaire", bestSeller: "Meilleure Vente", limited: "Limité", free: "Gratuit", paid: "Payant", }, cart: { title: "Panier", empty: "Votre panier est vide", emptySubtitle: "Ajoutez des pièces de luxe pour commencer", continueShopping: "Continuer les Achats", subtotal: "Sous-total", shipping: "Livraison", total: "Total", checkout: "Passer à la Caisse", remove: "Supprimer", items: "articles", orderSummary: "Résumé de la Commande", securePayment: "Paiement Pi Sécurisé", piNetwork: "Propulsé par Pi Network", }, checkout: { title: "Commande", payWith: "Payer avec Pi", processingPayment: "Traitement du Paiement...", confirmOrder: "Confirmer la Commande", orderTotal: "Total de la Commande", deliveryAddress: "Adresse de Livraison", shippingMethod: "Mode de Livraison", standard: "Livraison Standard", express: "Livraison Express", deliveryDays: "jours ouvrables", }, profile: { title: "Profil", piBalance: "Solde Pi", orders: "Mes Commandes", wishlist: "Favoris", settings: "Paramètres", wallet: "Portefeuille Pi", transactions: "Transactions", paymentMethods: "Modes de Paiement", adCampaigns: "Campagnes Pub", shippingPartner: "Partenaire Livraison", security: "Sécurité", helpCenter: "Aide", logout: "Déconnexion", memberSince: "Membre depuis", vip: "VIP", editProfile: "Modifier le Profil", }, settings: { title: "Paramètres", language: "Langue", selectLanguage: "Choisir la Langue", languageDescription: "Choisissez votre langue. L'app se met à jour instantanément.", theme: "Thème", notifications: "Notifications", privacy: "Confidentialité", currency: "Devise", about: "À Propos", version: "Version", appearance: "Apparence", saved: "Paramètres enregistrés", }, orders: { title: "Gestion des Commandes", subtitle: "Gérez les commandes de votre boutique", myOrders: "Mes Commandes", noOrders: "Pas encore de commandes", orderNumber: "Commande", status: "Statut", pending: "En Attente", processing: "En Cours", shipped: "Expédié", delivered: "Livré", cancelled: "Annulé", trackOrder: "Suivre la Commande", viewDetails: "Voir les Détails", date: "Date", total: "Total", search: "Rechercher des commandes...", }, store: { title: "Boutique", subtitle: "Boutique de mode", products: "Produits", followers: "Abonnés", rating: "Note", follow: "Suivre", following: "Abonné", contact: "Contact", aboutStore: "À Propos", openStore: "Ouvrir ma Boutique", storeSettings: "Paramètres", manageProducts: "Gérer les Produits", addProduct: "Ajouter un Produit", }, merchant: { dashboard: "Tableau de Bord Marchand", totalSales: "Ventes Totales", totalOrders: "Commandes Totales", totalProducts: "Produits Totaux", revenue: "Revenus", addProduct: "Ajouter un Produit", editProduct: "Modifier le Produit", deleteProduct: "Supprimer le Produit", stockControl: "Gestion du Stock", productName: "Nom du Produit", productPrice: "Prix (Pi)", productCategory: "Catégorie", productDescription: "Description", productImage: "Image du Produit", inStock: "En Stock", publish: "Publier", draft: "Brouillon", save: "Enregistrer", cancel: "Annuler", }, notifications: { title: "Notifications", subtitle: "Restez informé", empty: "Pas encore de notifications", markAllRead: "Tout marquer comme lu", orderUpdate: "Mise à jour commande", newMessage: "Nouveau Message", promotion: "Promotion", system: "Système", justNow: "À l'instant", minutesAgo: "min", hoursAgo: "h", daysAgo: "j", }, shipping: { title: "Livraison", registerPartner: "S'inscrire Partenaire", dashboard: "Tableau de Bord Livraison", deliveryAreas: "Zones de Livraison", prices: "Tarifs", estimatedTime: "Délai Estimé", selectPartner: "Choisir un Partenaire", availablePartners: "Partenaires Disponibles", trackShipment: "Suivre l'Envoi", withdraw: "Retirer les Gains", history: "Historique", netEarnings: "Gains Nets", commission: "Commission Plateforme (15%)", }, ads: { promoted: "Sponsorisé", promoteStore: "Promouvoir la Boutique", adCampaigns: "Campagnes Pub", createCampaign: "Créer une Campagne", adTitle: "Titre de l'Annonce", adSubtitle: "Sous-titre", placement: "Emplacement", duration: "Durée", budget: "Budget", impressions: "Impressions", clicks: "Clics", installs: "Installations", pending: "En Attente", approved: "Approuvé", rejected: "Rejeté", categories: "Catégories", fashionOnly: "Annonces mode uniquement", submitForReview: "Soumettre pour Révision", }, withdrawals: { title: "Retraits", request: "Demander un Retrait", available: "Solde Disponible", minimumAmount: "Montant minimum", walletAddress: "Adresse Portefeuille Pi", confirm: "Confirmer le Retrait", history: "Historique", approved: "Approuvé", rejected: "Rejeté", processing: "En Cours", rejectionReason: "Motif du Rejet", }, admin: { panel: "Panneau d'Administration", earnings: "Revenus Plateforme", withdrawals: "Retraits", partners: "Apps Partenaires", reviewAds: "Réviser les Annonces", approve: "Approuver", reject: "Rejeter", edit: "Modifier", totalRevenue: "Revenus Totaux", adRevenue: "Revenus Pub", shippingRevenue: "Revenus Livraison", platformCommission: "Commission Plateforme", pendingAds: "Annonces en Attente", }, auth: { welcome: "Bienvenue sur Style World", connectingPi: "Connexion à Pi Network...", authenticating: "Authentification...", signInWith: "Se connecter avec", piNetwork: "Pi Network", }, common: { back: "Retour", loading: "Chargement...", error: "Une erreur est survenue", retry: "Réessayer", save: "Enregistrer", cancel: "Annuler", confirm: "Confirmer", delete: "Supprimer", edit: "Modifier", close: "Fermer", search: "Rechercher", filter: "Filtrer", sort: "Trier", share: "Partager", copy: "Copier", copied: "Copié!", success: "Succès", failed: "Échec", required: "Requis", optional: "Optionnel", seeAll: "Voir Tout", viewMore: "Plus", currency: "Devise", free: "Gratuit", pi: "Pi", usd: "USD", consensusValue: "Valeur de Consensus", }, } export default fr [V0_FILE]typescriptreact:file="contexts/language-context.tsx" isMerged="true" "use client" import { createContext, useContext, useState, useEffect, useCallback, type ReactNode, } from "react" import type { TranslationSchema, Language } from "@/lib/i18n/types" import { SUPPORTED_LANGUAGES } from "@/lib/i18n/types" import en from "@/lib/i18n/locales/en" import ar from "@/lib/i18n/locales/ar" import fr from "@/lib/i18n/locales/fr" const STORAGE_KEY = "styleworld_lang" const localeMap: Record = { en, ar, fr } interface LanguageContextValue { locale: string dir: "ltr" | "rtl" t: TranslationSchema language: Language setLocale: (code: string) => void supportedLanguages: Language[] } const LanguageContext = createContext(null) export function LanguageProvider({ children }: { children: ReactNode }) { const [locale, setLocaleState] = useState("en") // Restore persisted locale on mount useEffect(() => { const saved = typeof window !== "undefined" ? localStorage.getItem(STORAGE_KEY) : null if (saved && localeMap[saved]) { applyLocale(saved) } }, []) const applyLocale = useCallback((code: string) => { const lang = SUPPORTED_LANGUAGES.find((l) => l.code === code) ?? SUPPORTED_LANGUAGES[0] setLocaleState(code) // Persist if (typeof window !== "undefined") { localStorage.setItem(STORAGE_KEY, code) } // Apply dir + lang attributes instantly for RTL/LTR document.documentElement.lang = code document.documentElement.dir = lang.dir }, []) const language = SUPPORTED_LANGUAGES.find((l) => l.code === locale) ?? SUPPORTED_LANGUAGES[0] const value: LanguageContextValue = { locale, dir: language.dir, t: localeMap[locale] ?? en, language, setLocale: applyLocale, supportedLanguages: SUPPORTED_LANGUAGES, } return ( {children} ) } export function useLanguage(): LanguageContextValue { const ctx = useContext(LanguageContext) if (!ctx) throw new Error("useLanguage must be used inside ") return ctx } [V0_FILE]typescriptreact:file="components/settings-page.tsx" isMerged="true" "use client" import { useState } from "react" import { ArrowLeft, Check, Globe, Bell, Shield, HelpCircle, Info, ChevronRight } from "lucide-react" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { useLanguage } from "@/contexts/language-context" import type { Language } from "@/lib/i18n/types" interface SettingsPageProps { onBack: () => void } export function SettingsPage({ onBack }: SettingsPageProps) { const { t, locale, setLocale, supportedLanguages } = useLanguage() const [showLangPicker, setShowLangPicker] = useState(false) const [savedFlash, setSavedFlash] = useState(false) const handleSelectLanguage = (lang: Language) => { setLocale(lang.code) setShowLangPicker(false) setSavedFlash(true) setTimeout(() => setSavedFlash(false), 2000) } const currentLang = supportedLanguages.find((l) => l.code === locale) const sections = [ { id: "language", label: t.settings.language, description: currentLang?.nativeLabel ?? "English", icon: Globe, action: () => setShowLangPicker(true), badge: currentLang?.nativeLabel, }, { id: "notifications", label: t.settings.notifications, description: "", icon: Bell, action: () => {}, }, { id: "privacy", label: t.settings.privacy, description: "", icon: Shield, action: () => {}, }, { id: "help", label: t.profile.helpCenter, description: "", icon: HelpCircle, action: () => {}, }, { id: "about", label: t.settings.about, description: `${t.settings.version} 1.0.0`, icon: Info, action: () => {}, }, ] return (

{/* Header */}

{t.settings.title}

Style World

{savedFlash && (

{t.settings.saved}

)} {sections.map((section) => (

{section.label}

{section.description && (

{section.description}

)}

{section.badge && ( {section.badge} )}

))}

{/* Language Picker Bottom Sheet */} {showLangPicker && (

setShowLangPicker(false)} > {/* Backdrop */}

{/* Sheet */}

e.stopPropagation()} > {/* Handle */}

{t.settings.selectLanguage}

{t.settings.languageDescription}

{supportedLanguages.map((lang) => { const isActive = lang.code === locale return ( ) })}

)}

) } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useState, useEffect } from "react" import Image from "next/image" import { Search, Sparkles, Tag, ChevronLeft, ChevronRight, Bell, Store, Megaphone, Shield } from "lucide-react" import { Input } from "@/components/ui/input" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { BottomNav } from "@/components/bottom-nav" import { CartProvider, useCart } from "@/contexts/cart-context" import { CartPage } from "@/components/cart-page" import { CheckoutPage } from "@/components/checkout-page" import { StoreSubscriptionPage } from "@/components/store-subscription-page" import { ProfilePage } from "@/components/profile-page" import { TransactionsPage } from "@/components/transactions-page" import { PaymentSuccessPage } from "@/components/payment-success-page" import { OrderTrackingPage } from "@/components/order-tracking-page" import { StoreOrderManagement } from "@/components/store-order-management" import { NotificationsPage } from "@/components/notifications-page" import { PromoteStorePage } from "@/components/promote-store-page" import { AdManagementPage } from "@/components/ad-management-page" import { AdminControlPanel } from "@/components/admin-control-panel" import { AdminEarningsDashboard } from "@/components/admin-earnings-dashboard" import { ShippingCompanyRegistration } from "@/components/shipping-company-registration" import { ShippingCompanyDashboard } from "@/components/shipping-company-dashboard" import { WithdrawalRequest } from "@/components/withdrawal-request" import { WithdrawalHistory } from "@/components/withdrawal-history" import { AdminWithdrawalsPanel } from "@/components/admin-withdrawals-panel" import { PartnerAppsManagement } from "@/components/partner-apps-management" import { ExternalAdAnalytics } from "@/components/external-ad-analytics" import { AdBanner, type Advertisement } from "@/components/ad-banner" import { PiIcon } from "@/components/pi-icon" import { calculatePiAmount, parseUsdPrice } from "@/lib/pi-consensus-value" import { LanguageProvider, useLanguage } from "@/contexts/language-context" import { SettingsPage } from "@/components/settings-page" const banners = [ { id: 1, title: "HAUTE COUTURE COLLECTION", subtitle: "Exclusive Designs from Paris Fashion Week", image: "https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?w=800&h=500&fit=crop", cta: "Explore Collection", }, { id: 2, title: "LUXURY ACCESSORIES", subtitle: "Handcrafted Perfection in Every Detail", image: "https://images.unsplash.com/photo-1566150905458-1bf1fc113f0d?w=800&h=500&fit=crop", cta: "Shop Now", }, { id: 3, title: "DESIGNER COLLABORATION", subtitle: "Limited Edition Pieces Available Now", image: "https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=800&h=500&fit=crop", cta: "View Collection", }, ] const categories = [ { id: "women", label: "Women", icon: "👗" }, { id: "men", label: "Men", icon: "👔" }, { id: "kids", label: "Kids", icon: "👶" }, { id: "shoes", label: "Shoes", icon: "👟" }, { id: "accessories", label: "Accessories", icon: "👜" }, { id: "designers", label: "Designers", icon: "✨" }, ] const trendingProducts = [ { id: 1, name: "Silk Evening Gown", brand: "Luxe Atelier", price: "$1,299", piPrice: calculatePiAmount(1299), image: "https://images.unsplash.com/photo-1595777457583-95e059d581b8?w=400&h=600&fit=crop", tag: "Trending", category: "women", }, { id: 2, name: "Italian Leather Jacket", brand: "Urban Edge", price: "$899", piPrice: calculatePiAmount(899), image: "https://images.unsplash.com/photo-1551028719-00167b16eac5?w=400&h=600&fit=crop", tag: "Hot", category: "men", }, { id: 3, name: "Designer Handbag", brand: "Maison Mode", price: "$2,450", piPrice: calculatePiAmount(2450), image: "https://images.unsplash.com/photo-1584917865442-de89df76afd3?w=400&h=600&fit=crop", tag: "New", category: "accessories", }, { id: 4, name: "Premium Sneakers", brand: "Elite Sport", price: "$385", piPrice: calculatePiAmount(385), image: "https://images.unsplash.com/photo-1600185365926-3a2ce3cdb9eb?w=400&h=600&fit=crop", tag: "Best Seller", category: "shoes", }, { id: 5, name: "Wool Coat", brand: "Nordic Threads", price: "$1,150", piPrice: calculatePiAmount(1150), image: "https://images.unsplash.com/photo-1539533113208-f6df8cc8b543?w=400&h=600&fit=crop", tag: "New", category: "women", }, { id: 6, name: "Luxury Watch", brand: "Time Masters", price: "$3,200", piPrice: calculatePiAmount(3200), image: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=400&h=600&fit=crop", tag: "Limited", category: "accessories", }, { id: 7, name: "Tailored Suit", brand: "Gentleman's Choice", price: "$1,899", piPrice: calculatePiAmount(1899), image: "https://images.unsplash.com/photo-1594938291221-94f18cbb5660?w=400&h=600&fit=crop", tag: "Trending", category: "men", }, { id: 8, name: "Summer Dress", brand: "Fleur & Co", price: "$425", piPrice: calculatePiAmount(425), image: "https://images.unsplash.com/photo-1572804013309-59a88b7e92f1?w=400&h=600&fit=crop", tag: "Hot", category: "women", }, ] const featuredStores = [ { id: 1, name: "Luxe Atelier", type: "Designer Brand", logo: "https://images.unsplash.com/photo-1560343090-f0409e92791a?w=80&h=80&fit=crop", cover: "https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=400&h=200&fit=crop", }, { id: 2, name: "Urban Edge", type: "Street Fashion", logo: "https://images.unsplash.com/photo-1558769132-cb1aea628c66?w=80&h=80&fit=crop", cover: "https://images.unsplash.com/photo-1469334031218-e382a71b716b?w=400&h=200&fit=crop", }, { id: 3, name: "Maison Mode", type: "Luxury House", logo: "https://images.unsplash.com/photo-1509319117443-c5a0eaeb4752?w=80&h=80&fit=crop", cover: "https://images.unsplash.com/photo-1445205170230-053b83016050?w=400&h=200&fit=crop", }, ] const featuredDesigners = [ { id: 1, name: "Elena Rossi", specialty: "Evening Wear", avatar: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=100&h=100&fit=crop", }, { id: 2, name: "Marcus Chen", specialty: "Streetwear", avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop", }, { id: 3, name: "Sofia Laurent", specialty: "Haute Couture", avatar: "https://images.unsplash.com/photo-1580489944761-15a19d654956?w=100&h=100&fit=crop", }, { id: 4, name: "James Park", specialty: "Minimalist", avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&h=100&fit=crop", }, ] const specialOffers = [ { id: 1, title: "Winter Sale", subtitle: "Up to 70% off", image: "https://images.unsplash.com/photo-1483985988355-763728e1935b?w=350&h=180&fit=crop", }, { id: 2, title: "New Arrivals", subtitle: "Fresh from the runway", image: "https://images.unsplash.com/photo-1558769132-92e717d613cd?w=350&h=180&fit=crop", }, ] const sponsoredAds: Advertisement[] = [ { id: "ad-1", storeName: "Urban Luxury", title: "SPRING COLLECTION 2024", subtitle: "Discover the latest trends in luxury streetwear", image: "https://images.unsplash.com/photo-1441984904996-e0b6ba687e04?w=800&h=400&fit=crop", cta: "Shop Collection", targetUrl: "#", duration: 7, budget: 3000, impressions: 45230, clicks: 1256, isActive: true, approvalStatus: "approved", startDate: new Date("2024-01-15"), endDate: new Date("2024-01-22"), }, { id: "ad-2", storeName: "Elegant Designs", title: "EXCLUSIVE DESIGNER PIECES", subtitle: "Limited edition collection from Paris Fashion Week", image: "https://images.unsplash.com/photo-1469334031218-e382a71b716b?w=800&h=400&fit=crop", cta: "View Collection", targetUrl: "#", duration: 7, budget: 3000, impressions: 38920, clicks: 982, isActive: true, approvalStatus: "approved", startDate: new Date("2024-01-15"), endDate: new Date("2024-01-22"), }, ] function StyleWorldContent() { const { t } = useLanguage() const [activeTab, setActiveTab] = useState("home") const [currentBanner, setCurrentBanner] = useState(0) const [currentView, setCurrentView] = useState< "home" | "cart" | "checkout" | "subscription" | "profile" | "settings" | "transactions" | "success" | "tracking" | "store-orders" | "notifications" | "promote-store" | "ad-management" | "admin-panel" | "admin-earnings" | "admin-withdrawals" | "shipping-register" | "shipping-dashboard" | "shipping-withdrawal" | "shipping-history" | "store-withdrawal" | "store-history" | "partner-apps" | "external-analytics" >("home") const [orderDetails, setOrderDetails] = useState(null) const [selectedPartnerAppId, setSelectedPartnerAppId] = useState("") const { addItem, totalPiPrice, totalPrice, items } = useCart() useEffect(() => { const timer = setInterval(() => { setCurrentBanner((prev) => (prev + 1) % banners.length) }, 5000) return () => clearInterval(timer) }, []) const nextBanner = () => { setCurrentBanner((prev) => (prev + 1) % banners.length) } const prevBanner = () => { setCurrentBanner((prev) => (prev - 1 + banners.length) % banners.length) } const handleAddToCart = (product: typeof trendingProducts[0]) => { addItem({ id: product.id, name: product.name, brand: product.brand, price: parseFloat(product.price.replace("$", "").replace(",", "")), piPrice: product.piPrice, image: product.image, }) } useEffect(() => { if (activeTab === "cart") { setCurrentView("cart") } else if (activeTab === "home") { setCurrentView("home") } else if (activeTab === "profile") { setCurrentView("profile") } }, [activeTab]) if (currentView === "cart") { return ( { setCurrentView("home") setActiveTab("home") }} onCheckout={() => setCurrentView("checkout")} /> ) } if (currentView === "checkout") { return ( setCurrentView("cart")} onSuccess={() => { setOrderDetails({ orderId: `ORDER-${Date.now()}`, totalPi: totalPiPrice, totalUsd: totalPrice, itemCount: items.length, }) setCurrentView("success") }} /> ) } if (currentView === "success" && orderDetails) { return ( { setCurrentView("home") setActiveTab("home") }} onViewOrders={() => { setCurrentView("profile") setActiveTab("profile") }} onTrackOrder={() => { setCurrentView("tracking") }} /> ) } if (currentView === "subscription") { return ( setCurrentView("home")} /> ) } if (currentView === "settings") { return setCurrentView("profile")} /> } if (currentView === "profile") { return ( setCurrentView("transactions")} onNavigateToAdManagement={() => setCurrentView("ad-management")} onNavigateToShippingRegister={() => setCurrentView("shipping-register")} onNavigateToSettings={() => setCurrentView("settings")} /> ) } if (currentView === "transactions") { return ( setCurrentView("profile")} /> ) } if (currentView === "tracking") { return ( { setCurrentView("profile") setActiveTab("profile") }} /> ) } if (currentView === "store-orders") { return ( { setCurrentView("home") setActiveTab("home") }} onRequestWithdrawal={() => setCurrentView("store-withdrawal")} onViewHistory={() => setCurrentView("store-history")} /> ) } if (currentView === "notifications") { return ( { setCurrentView("home") setActiveTab("home") }} /> ) } if (currentView === "promote-store") { return ( { setCurrentView("home") setActiveTab("home") }} /> ) } if (currentView === "ad-management") { return ( { setCurrentView("home") setActiveTab("home") }} onCreateNew={() => setCurrentView("promote-store")} /> ) } if (currentView === "admin-panel") { return ( { setCurrentView("home") setActiveTab("home") }} onNavigateToEarnings={() => setCurrentView("admin-earnings")} onNavigateToWithdrawals={() => setCurrentView("admin-withdrawals")} onNavigateToPartnerApps={() => setCurrentView("partner-apps")} /> ) } if (currentView === "admin-earnings") { return ( { setCurrentView("admin-panel") }} /> ) } if (currentView === "shipping-register") { return ( { setCurrentView("home") setActiveTab("home") }} onSuccess={() => { setCurrentView("shipping-dashboard") }} /> ) } if (currentView === "shipping-dashboard") { return ( { setCurrentView("home") setActiveTab("home") }} onRequestWithdrawal={() => setCurrentView("shipping-withdrawal")} onViewHistory={() => setCurrentView("shipping-history")} /> ) } if (currentView === "admin-withdrawals") { return ( setCurrentView("admin-panel")} /> ) } if (currentView === "shipping-withdrawal") { return ( setCurrentView("shipping-dashboard")} onSuccess={() => setCurrentView("shipping-dashboard")} /> ) } if (currentView === "shipping-history") { return ( setCurrentView("shipping-dashboard")} /> ) } if (currentView === "store-withdrawal") { return ( setCurrentView("store-orders")} onSuccess={() => setCurrentView("store-orders")} /> ) } if (currentView === "store-history") { return ( setCurrentView("store-orders")} /> ) } if (currentView === "partner-apps") { return ( setCurrentView("admin-panel")} onViewAnalytics={(appId) => { setSelectedPartnerAppId(appId) setCurrentView("external-analytics") }} /> ) } if (currentView === "external-analytics") { return ( setCurrentView("partner-apps")} /> ) } return (

{/* Header */}

STYLE WORLD

{t.home.tagline}

VIP

{/* Search Bar */}

{/* Banner Slider */}

{banners.map((banner, index) => (

{banner.title}

{banner.subtitle}

))} {/* Navigation Buttons */} {/* Dots Indicator */}

{banners.map((_, index) => (

{/* Categories */}

{categories.map((category) => ( ))}

{/* Sponsored Ad - Home Banner */}

{/* Featured Stores */}

{t.home.featuredStores}

{t.home.featuredStoresSubtitle}

{featuredStores.map((store) => (

{store.name}

{store.type}

))}

{/* Sponsored Ad - Mid Content */}

{/* Trending Products */}

{t.home.trendingNow}

{t.home.trendingSubtitle}

{trendingProducts.map((product) => ( handleAddToCart(product)} >

{product.tag}

{product.name}

{product.brand}

{product.piPrice.toFixed(6)}π

{product.price} USD

))}

{/* Featured Designers */}

Featured Designers

Master artisans of fashion

{featuredDesigners.map((designer) => ( ))}

{/* Special Offers */}

{t.home.specialOffers}

{t.product.limited}

{specialOffers.map((offer) => (

{offer.title}

{offer.subtitle}

))}

{/* Bottom Navigation */}

) } export default function StyleWorldApp() { return ( ) }

{store.name}

About

Contact

Fashion Gallery

Pi Network Authentication

Subscription Activated!

Store Subscription

Choose Your Plan

{plan.name}

Payment Successful!

Checkout

Order Summary

{item.name}

Payment Method

Pi Network

Credit / Debit Card

Transaction History

Recent Transactions

Shipping Method

{option.name}

Order Tracking

Delivery Status

{step.status}

Shipping Address

John Doe

Order Items

{item.name}

Shipping Address

{address.name}

New Address

Payment Successful!

Processing Order

{t.notifications.title}

{notification.title}

{t.notifications.empty}

Ad Campaigns

Your Campaigns

{ad.title}

{currentAd.title}

Registration Successful!

Register Shipping Company

Company Information

Service Coverage

Service Pricing

Standard Shipping

Express Shipping

Platform Earnings

Total Platform Earnings

Revenue by Source

Advertisement Revenue

Shipping Revenue

Recent Transactions

Commission Structure

{t.profile.title}

@styleuser

Withdrawal History

Withdrawal Request

Withdrawal Requests

Request Submitted!

Withdraw Earnings

Withdrawal Summary

{companyName}

Revenue Breakdown

Recent Shipments

Service Settings

Standard Shipping

Express Shipping

Service Areas

Order Details

Update Order Status

Customer Information

Order Items

{item.name}

Shipping Details

Order Management

Partner Apps

Network Performance

{filteredApps.length} Partner Apps

{app.name}

External Analytics