[V0_FILE]sql:file="scripts/01-create-tables.sql" isMerged="true" -- Enable necessary extensions CREATE EXTENSION IF NOT EXISTS "uuid-ossp"; -- Create enum types CREATE TYPE user_type AS ENUM ('buyer', 'seller', 'both'); CREATE TYPE gig_status AS ENUM ('draft', 'active', 'paused', 'deleted'); CREATE TYPE order_status AS ENUM ('pending', 'in_progress', 'delivered', 'completed', 'cancelled', 'disputed'); CREATE TYPE package_type AS ENUM ('basic', 'standard', 'premium'); -- Users table (extends Supabase auth.users) CREATE TABLE profiles ( id UUID REFERENCES auth.users(id) PRIMARY KEY, email TEXT UNIQUE NOT NULL, full_name TEXT, username TEXT UNIQUE, avatar_url TEXT, bio TEXT, user_type user_type DEFAULT 'buyer', skills TEXT[], languages TEXT[], country TEXT, timezone TEXT, is_verified BOOLEAN DEFAULT FALSE, seller_level INTEGER DEFAULT 1, total_orders INTEGER DEFAULT 0, total_sales INTEGER DEFAULT 0, average_rating DECIMAL(3,2) DEFAULT 0, response_time INTEGER DEFAULT 24, -- in hours created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Categories table CREATE TABLE categories ( id UUID DEFAULT uuid_generate_v4() PRIMARY KEY, name TEXT NOT NULL, slug TEXT UNIQUE NOT NULL, description TEXT, icon TEXT, parent_id UUID REFERENCES categories(id), is_active BOOLEAN DEFAULT TRUE, sort_order INTEGER DEFAULT 0, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Gigs table CREATE TABLE gigs ( id UUID DEFAULT uuid_generate_v4() PRIMARY KEY, seller_id UUID REFERENCES profiles(id) NOT NULL, category_id UUID REFERENCES categories(id) NOT NULL, title TEXT NOT NULL, slug TEXT UNIQUE NOT NULL, description TEXT NOT NULL, tags TEXT[], images TEXT[], video_url TEXT, status gig_status DEFAULT 'draft', is_featured BOOLEAN DEFAULT FALSE, views INTEGER DEFAULT 0, orders_in_queue INTEGER DEFAULT 0, total_orders INTEGER DEFAULT 0, average_rating DECIMAL(3,2) DEFAULT 0, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Gig packages table CREATE TABLE gig_packages ( id UUID DEFAULT uuid_generate_v4() PRIMARY KEY, gig_id UUID REFERENCES gigs(id) ON DELETE CASCADE NOT NULL, package_type package_type NOT NULL, title TEXT NOT NULL, description TEXT NOT NULL, price DECIMAL(10,2) NOT NULL, delivery_days INTEGER NOT NULL, revisions INTEGER DEFAULT 0, features TEXT[], created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), UNIQUE(gig_id, package_type) ); -- Orders table CREATE TABLE orders ( id UUID DEFAULT uuid_generate_v4() PRIMARY KEY, buyer_id UUID REFERENCES profiles(id) NOT NULL, seller_id UUID REFERENCES profiles(id) NOT NULL, gig_id UUID REFERENCES gigs(id) NOT NULL, package_id UUID REFERENCES gig_packages(id) NOT NULL, status order_status DEFAULT 'pending', total_amount DECIMAL(10,2) NOT NULL, requirements TEXT, delivery_date TIMESTAMP WITH TIME ZONE, delivered_at TIMESTAMP WITH TIME ZONE, completed_at TIMESTAMP WITH TIME ZONE, cancelled_at TIMESTAMP WITH TIME ZONE, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Reviews table CREATE TABLE reviews ( id UUID DEFAULT uuid_generate_v4() PRIMARY KEY, order_id UUID REFERENCES orders(id) NOT NULL, reviewer_id UUID REFERENCES profiles(id) NOT NULL, reviewee_id UUID REFERENCES profiles(id) NOT NULL, gig_id UUID REFERENCES gigs(id) NOT NULL, rating INTEGER CHECK (rating >= 1 AND rating <= 5) NOT NULL, comment TEXT, is_public BOOLEAN DEFAULT TRUE, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Messages table CREATE TABLE messages ( id UUID DEFAULT uuid_generate_v4() PRIMARY KEY, sender_id UUID REFERENCES profiles(id) NOT NULL, recipient_id UUID REFERENCES profiles(id) NOT NULL, order_id UUID REFERENCES orders(id), content TEXT NOT NULL, attachments TEXT[], is_read BOOLEAN DEFAULT FALSE, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Create indexes for better performance CREATE INDEX idx_profiles_username ON profiles(username); CREATE INDEX idx_profiles_user_type ON profiles(user_type); CREATE INDEX idx_gigs_seller_id ON gigs(seller_id); CREATE INDEX idx_gigs_category_id ON gigs(category_id); CREATE INDEX idx_gigs_status ON gigs(status); CREATE INDEX idx_gigs_created_at ON gigs(created_at DESC); CREATE INDEX idx_orders_buyer_id ON orders(buyer_id); CREATE INDEX idx_orders_seller_id ON orders(seller_id); CREATE INDEX idx_orders_status ON orders(status); CREATE INDEX idx_messages_sender_recipient ON messages(sender_id, recipient_id); CREATE INDEX idx_reviews_gig_id ON reviews(gig_id); -- Enable Row Level Security ALTER TABLE profiles ENABLE ROW LEVEL SECURITY; ALTER TABLE gigs ENABLE ROW LEVEL SECURITY; ALTER TABLE gig_packages ENABLE ROW LEVEL SECURITY; ALTER TABLE orders ENABLE ROW LEVEL SECURITY; ALTER TABLE reviews ENABLE ROW LEVEL SECURITY; ALTER TABLE messages ENABLE ROW LEVEL SECURITY; -- RLS Policies CREATE POLICY "Public profiles are viewable by everyone" ON profiles FOR SELECT USING (true); CREATE POLICY "Users can update own profile" ON profiles FOR UPDATE USING (auth.uid() = id); CREATE POLICY "Active gigs are viewable by everyone" ON gigs FOR SELECT USING (status = 'active'); CREATE POLICY "Sellers can manage own gigs" ON gigs FOR ALL USING (auth.uid() = seller_id); CREATE POLICY "Gig packages are viewable with gigs" ON gig_packages FOR SELECT USING (true); CREATE POLICY "Orders are viewable by buyer and seller" ON orders FOR SELECT USING (auth.uid() = buyer_id OR auth.uid() = seller_id); CREATE POLICY "Messages are viewable by sender and recipient" ON messages FOR SELECT USING (auth.uid() = sender_id OR auth.uid() = recipient_id); [V0_FILE]sql:file="scripts/02-seed-data.sql" isMerged="true" -- Insert sample categories INSERT INTO categories (name, slug, description, icon) VALUES ('Programming & Tech', 'programming-tech', 'Software development and technical services', '💻'), ('Graphics & Design', 'graphics-design', 'Creative design services', '🎨'), ('Digital Marketing', 'digital-marketing', 'Online marketing and promotion', '📈'), ('Writing & Translation', 'writing-translation', 'Content creation and language services', '✍️'), ('Video & Animation', 'video-animation', 'Video production and motion graphics', '🎬'), ('Music & Audio', 'music-audio', 'Audio production and music services', '🎵'), ('Business', 'business', 'Business consulting and services', '💼'), ('Lifestyle', 'lifestyle', 'Personal and lifestyle services', '🌟'); -- Insert subcategories INSERT INTO categories (name, slug, description, parent_id) VALUES ('Web Development', 'web-development', 'Website and web application development', (SELECT id FROM categories WHERE slug = 'programming-tech')), ('Mobile Apps', 'mobile-apps', 'iOS and Android app development', (SELECT id FROM categories WHERE slug = 'programming-tech')), ('Logo Design', 'logo-design', 'Brand identity and logo creation', (SELECT id FROM categories WHERE slug = 'graphics-design')), ('Social Media Marketing', 'social-media-marketing', 'Social media management and advertising', (SELECT id FROM categories WHERE slug = 'digital-marketing')); [V0_FILE]typescriptreact:file="lib/supabase.ts" isMerged="true" import { createClient } from "@supabase/supabase-js" const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL! const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY! export const supabase = createClient(supabaseUrl, supabaseAnonKey) // Types export interface Profile { id: string email: string full_name?: string username?: string avatar_url?: string bio?: string user_type: "buyer" | "seller" | "both" skills?: string[] languages?: string[] country?: string is_verified: boolean seller_level: number total_orders: number total_sales: number average_rating: number response_time: number created_at: string updated_at: string } export interface Category { id: string name: string slug: string description?: string icon?: string parent_id?: string is_active: boolean sort_order: number created_at: string } export interface Gig { id: string seller_id: string category_id: string title: string slug: string description: string tags?: string[] images?: string[] video_url?: string status: "draft" | "active" | "paused" | "deleted" is_featured: boolean views: number orders_in_queue: number total_orders: number average_rating: number created_at: string updated_at: string seller?: Profile category?: Category packages?: GigPackage[] } export interface GigPackage { id: string gig_id: string package_type: "basic" | "standard" | "premium" title: string description: string price: number delivery_days: number revisions: number features?: string[] created_at: string } export interface Order { id: string buyer_id: string seller_id: string gig_id: string package_id: string status: "pending" | "in_progress" | "delivered" | "completed" | "cancelled" | "disputed" total_amount: number requirements?: string delivery_date?: string delivered_at?: string completed_at?: string cancelled_at?: string created_at: string updated_at: string buyer?: Profile seller?: Profile gig?: Gig package?: GigPackage } [V0_FILE]typescriptreact:file="lib/auth.ts" isMerged="true" import { supabase } from "./supabase" import type { Profile } from "./supabase" export async function signUp(email: string, password: string, userData: Partial) { const { data, error } = await supabase.auth.signUp({ email, password, options: { data: userData, }, }) if (error) throw error // Create profile if (data.user) { const { error: profileError } = await supabase.from("profiles").insert({ id: data.user.id, email: data.user.email!, full_name: userData.full_name, username: userData.username, user_type: userData.user_type || "buyer", }) if (profileError) throw profileError } return data } export async function signIn(email: string, password: string) { const { data, error } = await supabase.auth.signInWithPassword({ email, password, }) if (error) throw error return data } export async function signOut() { const { error } = await supabase.auth.signOut() if (error) throw error } export async function getCurrentUser() { const { data: { user }, } = await supabase.auth.getUser() return user } export async function getProfile(userId: string): Promise { const { data, error } = await supabase.from("profiles").select("*").eq("id", userId).single() if (error) return null return data } export async function updateProfile(userId: string, updates: Partial) { const { data, error } = await supabase.from("profiles").update(updates).eq("id", userId).select().single() if (error) throw error return data } [V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/search/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]plaintext:file=".env.local" isMerged="true" # Supabase Configuration NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key # Optional: For production # SUPABASE_SERVICE_ROLE_KEY=your_service_role_key [V0_FILE]json:file="data/users.json" isMerged="true" [ { "id": "1", "email": "john@example.com", "password": "password123", "full_name": "John Smith", "username": "johnsmith", "avatar_url": "/placeholder.svg?height=100&width=100", "bio": "Full-stack developer with 5+ years of experience", "user_type": "both", "skills": ["React", "Node.js", "TypeScript", "Python"], "languages": ["English", "Spanish"], "country": "United States", "is_verified": true, "seller_level": 2, "total_orders": 45, "total_sales": 32, "average_rating": 4.8, "response_time": 2, "created_at": "2024-01-15T10:00:00Z" }, { "id": "2", "email": "sarah@example.com", "password": "password123", "full_name": "Sarah Johnson", "username": "sarahdesign", "avatar_url": "/placeholder.svg?height=100&width=100", "bio": "Creative graphic designer specializing in brand identity", "user_type": "seller", "skills": ["Photoshop", "Illustrator", "Figma", "Branding"], "languages": ["English"], "country": "Canada", "is_verified": true, "seller_level": 3, "total_orders": 78, "total_sales": 78, "average_rating": 4.9, "response_time": 1, "created_at": "2024-01-10T08:30:00Z" }, { "id": "3", "email": "mike@example.com", "password": "password123", "full_name": "Mike Chen", "username": "mikewriter", "avatar_url": "/placeholder.svg?height=100&width=100", "bio": "Professional content writer and copywriter", "user_type": "seller", "skills": ["Content Writing", "Copywriting", "SEO", "Marketing"], "languages": ["English", "Mandarin"], "country": "Singapore", "is_verified": false, "seller_level": 1, "total_orders": 23, "total_sales": 23, "average_rating": 4.6, "response_time": 4, "created_at": "2024-02-01T14:20:00Z" } ] [V0_FILE]json:file="data/categories.json" isMerged="true" [ { "id": "1", "name": "Programming & Tech", "slug": "programming-tech", "description": "Software development and technical services", "icon": "💻", "parent_id": null, "is_active": true, "sort_order": 1 }, { "id": "2", "name": "Graphics & Design", "slug": "graphics-design", "description": "Creative design services", "icon": "🎨", "parent_id": null, "is_active": true, "sort_order": 2 }, { "id": "3", "name": "Digital Marketing", "slug": "digital-marketing", "description": "Online marketing and promotion", "icon": "📈", "parent_id": null, "is_active": true, "sort_order": 3 }, { "id": "4", "name": "Writing & Translation", "slug": "writing-translation", "description": "Content creation and language services", "icon": "✍️", "parent_id": null, "is_active": true, "sort_order": 4 }, { "id": "5", "name": "Video & Animation", "slug": "video-animation", "description": "Video production and motion graphics", "icon": "🎬", "parent_id": null, "is_active": true, "sort_order": 5 }, { "id": "6", "name": "Music & Audio", "slug": "music-audio", "description": "Audio production and music services", "icon": "🎵", "parent_id": null, "is_active": true, "sort_order": 6 }, { "id": "7", "name": "Business", "slug": "business", "description": "Business consulting and services", "icon": "💼", "parent_id": null, "is_active": true, "sort_order": 7 }, { "id": "8", "name": "Lifestyle", "slug": "lifestyle", "description": "Personal and lifestyle services", "icon": "🌟", "parent_id": null, "is_active": true, "sort_order": 8 }, { "id": "11", "name": "Web Development", "slug": "web-development", "description": "Website and web application development", "parent_id": "1", "is_active": true, "sort_order": 1 }, { "id": "12", "name": "Mobile Apps", "slug": "mobile-apps", "description": "iOS and Android app development", "parent_id": "1", "is_active": true, "sort_order": 2 }, { "id": "21", "name": "Logo Design", "slug": "logo-design", "description": "Brand identity and logo creation", "parent_id": "2", "is_active": true, "sort_order": 1 }, { "id": "31", "name": "Social Media Marketing", "slug": "social-media-marketing", "description": "Social media management and advertising", "parent_id": "3", "is_active": true, "sort_order": 1 } ] [V0_FILE]json:file="data/gigs.json" isMerged="true" [ { "id": "1", "seller_id": "1", "category_id": "11", "title": "I will create a modern responsive website using React and Next.js", "slug": "modern-responsive-website-react-nextjs", "description": "Looking for a professional, modern website? I'll build you a stunning, responsive website using the latest technologies including React, Next.js, and Tailwind CSS.\n\nWhat you'll get:\n• Fully responsive design that works on all devices\n• Modern, clean UI/UX design\n• Fast loading times with optimized performance\n• SEO-friendly structure\n• Cross-browser compatibility\n• Clean, maintainable code\n\nI have 5+ years of experience in web development and have completed over 100 projects. Let's bring your vision to life!", "tags": ["react", "nextjs", "website", "responsive", "modern"], "images": [ "/placeholder.svg?height=300&width=400", "/placeholder.svg?height=300&width=400", "/placeholder.svg?height=300&width=400" ], "video_url": null, "status": "active", "is_featured": true, "views": 1250, "orders_in_queue": 3, "total_orders": 45, "average_rating": 4.8, "created_at": "2024-01-20T10:00:00Z" }, { "id": "2", "seller_id": "2", "category_id": "21", "title": "I will design a professional logo and brand identity package", "slug": "professional-logo-brand-identity-package", "description": "Need a memorable logo that represents your brand perfectly? I'll create a professional logo design with complete brand identity package.\n\nWhat's included:\n• 3 unique logo concepts\n• Unlimited revisions until you're 100% satisfied\n• Logo in multiple formats (PNG, JPG, SVG, PDF)\n• Brand color palette\n• Typography guidelines\n• Business card design\n• Social media kit\n\nI'm a professional graphic designer with 7+ years of experience and have worked with over 500 businesses worldwide.", "tags": ["logo", "branding", "design", "identity", "professional"], "images": [ "/placeholder.svg?height=300&width=400", "/placeholder.svg?height=300&width=400", "/placeholder.svg?height=300&width=400" ], "video_url": null, "status": "active", "is_featured": true, "views": 2100, "orders_in_queue": 5, "total_orders": 78, "average_rating": 4.9, "created_at": "2024-01-18T14:30:00Z" }, { "id": "3", "seller_id": "3", "category_id": "4", "title": "I will write engaging blog posts and articles for your website", "slug": "engaging-blog-posts-articles-website", "description": "Boost your website's traffic with high-quality, SEO-optimized blog posts and articles that engage your audience and drive conversions.\n\nWhat you get:\n• Well-researched, original content\n• SEO optimization with target keywords\n• Engaging headlines and meta descriptions\n• Proper formatting with headers and bullet points\n• Plagiarism-free guarantee\n• Fast turnaround time\n\nI'm a professional content writer with expertise in various industries including technology, business, health, and lifestyle.", "tags": ["writing", "blog", "content", "seo", "articles"], "images": [ "/placeholder.svg?height=300&width=400", "/placeholder.svg?height=300&width=400", "/placeholder.svg?height=300&width=400" ], "video_url": null, "status": "active", "is_featured": false, "views": 850, "orders_in_queue": 2, "total_orders": 23, "average_rating": 4.6, "created_at": "2024-02-05T09:15:00Z" }, { "id": "4", "seller_id": "1", "category_id": "12", "title": "I will develop a custom mobile app for iOS and Android", "slug": "custom-mobile-app-ios-android", "description": "Transform your idea into a powerful mobile app! I'll develop a custom mobile application for both iOS and Android platforms using React Native.\n\nFeatures included:\n• Cross-platform compatibility (iOS & Android)\n• Modern, intuitive user interface\n• Backend integration and API development\n• Push notifications\n• App store optimization\n• Post-launch support\n\nWith expertise in React Native, Node.js, and mobile app development, I'll deliver a high-quality app that meets your requirements.", "tags": ["mobile", "app", "ios", "android", "react-native"], "images": [ "/placeholder.svg?height=300&width=400", "/placeholder.svg?height=300&width=400", "/placeholder.svg?height=300&width=400" ], "video_url": null, "status": "active", "is_featured": true, "views": 1800, "orders_in_queue": 1, "total_orders": 12, "average_rating": 4.9, "created_at": "2024-01-25T16:45:00Z" }, { "id": "5", "seller_id": "2", "category_id": "2", "title": "I will create stunning social media graphics and posts", "slug": "stunning-social-media-graphics-posts", "description": "Elevate your social media presence with eye-catching graphics that drive engagement and grow your following.\n\nWhat's included:\n• Custom social media post designs\n• Instagram story templates\n• Facebook cover photos\n• Twitter headers\n• LinkedIn banners\n• Brand-consistent designs\n• Multiple format options\n\nI'll create designs that align with your brand and capture your audience's attention across all social platforms.", "tags": ["social-media", "graphics", "instagram", "facebook", "design"], "images": [ "/placeholder.svg?height=300&width=400", "/placeholder.svg?height=300&width=400", "/placeholder.svg?height=300&width=400" ], "video_url": null, "status": "active", "is_featured": false, "views": 1350, "orders_in_queue": 4, "total_orders": 56, "average_rating": 4.7, "created_at": "2024-01-22T11:20:00Z" } ] [V0_FILE]json:file="data/gig-packages.json" isMerged="true" [ { "id": "1", "gig_id": "1", "package_type": "basic", "title": "Basic Website", "description": "Simple 3-page responsive website with basic functionality", "price": 299, "delivery_days": 7, "revisions": 2, "features": ["3 pages", "Responsive design", "Basic SEO", "Contact form"] }, { "id": "2", "gig_id": "1", "package_type": "standard", "title": "Professional Website", "description": "5-page website with advanced features and CMS integration", "price": 599, "delivery_days": 10, "revisions": 3, "features": ["5 pages", "CMS integration", "Advanced SEO", "Analytics setup", "Social media integration"] }, { "id": "3", "gig_id": "1", "package_type": "premium", "title": "Enterprise Website", "description": "Unlimited pages with e-commerce functionality and premium features", "price": 999, "delivery_days": 14, "revisions": 5, "features": ["Unlimited pages", "E-commerce", "Payment integration", "Admin dashboard", "Premium support"] }, { "id": "4", "gig_id": "2", "package_type": "basic", "title": "Logo Only", "description": "Professional logo design with 2 concepts", "price": 75, "delivery_days": 3, "revisions": 3, "features": ["2 logo concepts", "PNG & JPG files", "Basic revisions"] }, { "id": "5", "gig_id": "2", "package_type": "standard", "title": "Logo + Brand Kit", "description": "Logo design with brand identity package", "price": 150, "delivery_days": 5, "revisions": 5, "features": ["3 logo concepts", "All file formats", "Color palette", "Typography guide", "Business card design"] }, { "id": "6", "gig_id": "2", "package_type": "premium", "title": "Complete Brand Identity", "description": "Full brand identity package with marketing materials", "price": 299, "delivery_days": 7, "revisions": 10, "features": [ "5 logo concepts", "Complete brand guide", "Stationery design", "Social media kit", "Marketing materials" ] }, { "id": "7", "gig_id": "3", "package_type": "basic", "title": "1 Blog Post", "description": "One 500-word SEO-optimized blog post", "price": 25, "delivery_days": 2, "revisions": 1, "features": ["500 words", "SEO optimized", "1 revision", "Basic research"] }, { "id": "8", "gig_id": "3", "package_type": "standard", "title": "3 Blog Posts", "description": "Three 750-word blog posts with keyword research", "price": 65, "delivery_days": 5, "revisions": 2, "features": ["3 posts (750 words each)", "Keyword research", "Meta descriptions", "2 revisions each"] }, { "id": "9", "gig_id": "3", "package_type": "premium", "title": "5 Blog Posts + Strategy", "description": "Five blog posts with content strategy and promotion plan", "price": 125, "delivery_days": 7, "revisions": 3, "features": [ "5 posts (1000 words each)", "Content strategy", "Promotion plan", "Social media posts", "Unlimited revisions" ] }, { "id": "10", "gig_id": "4", "package_type": "basic", "title": "Simple App", "description": "Basic mobile app with core functionality", "price": 1500, "delivery_days": 21, "revisions": 2, "features": ["Basic UI/UX", "Core functionality", "iOS & Android", "Basic testing"] }, { "id": "11", "gig_id": "4", "package_type": "standard", "title": "Professional App", "description": "Feature-rich app with backend integration", "price": 3000, "delivery_days": 30, "revisions": 3, "features": ["Advanced UI/UX", "Backend integration", "Push notifications", "App store submission", "Testing"] }, { "id": "12", "gig_id": "4", "package_type": "premium", "title": "Enterprise App", "description": "Full-featured app with admin panel and analytics", "price": 5000, "delivery_days": 45, "revisions": 5, "features": ["Premium UI/UX", "Admin panel", "Analytics", "Payment integration", "Maintenance", "Priority support"] }, { "id": "13", "gig_id": "5", "package_type": "basic", "title": "5 Social Posts", "description": "5 custom social media post designs", "price": 45, "delivery_days": 3, "revisions": 2, "features": ["5 post designs", "Instagram & Facebook formats", "2 revisions"] }, { "id": "14", "gig_id": "5", "package_type": "standard", "title": "10 Posts + Stories", "description": "10 posts plus Instagram story templates", "price": 85, "delivery_days": 5, "revisions": 3, "features": ["10 post designs", "5 story templates", "Multiple platform formats", "3 revisions"] }, { "id": "15", "gig_id": "5", "package_type": "premium", "title": "Complete Social Kit", "description": "Complete social media graphics package", "price": 150, "delivery_days": 7, "revisions": 5, "features": [ "20 post designs", "10 story templates", "Cover photos", "Profile graphics", "Content calendar", "Unlimited revisions" ] } ] [V0_FILE]json:file="data/orders.json" isMerged="true" [ { "id": "1", "buyer_id": "3", "seller_id": "1", "gig_id": "1", "package_id": "2", "status": "completed", "total_amount": 599, "requirements": "I need a website for my consulting business. Please include a portfolio section and contact form.", "delivery_date": "2024-02-15T10:00:00Z", "delivered_at": "2024-02-14T16:30:00Z", "completed_at": "2024-02-16T09:15:00Z", "created_at": "2024-02-05T14:20:00Z" }, { "id": "2", "buyer_id": "1", "seller_id": "2", "gig_id": "2", "package_id": "5", "status": "in_progress", "total_amount": 150, "requirements": "I need a logo for my tech startup. Modern, clean design with blue and white colors.", "delivery_date": "2024-02-20T10:00:00Z", "created_at": "2024-02-15T11:45:00Z" }, { "id": "3", "buyer_id": "2", "seller_id": "3", "gig_id": "3", "package_id": "8", "status": "delivered", "total_amount": 65, "requirements": "Need 3 blog posts about digital marketing trends for 2024.", "delivery_date": "2024-02-18T10:00:00Z", "delivered_at": "2024-02-17T14:20:00Z", "created_at": "2024-02-12T09:30:00Z" } ] [V0_FILE]json:file="data/reviews.json" isMerged="true" [ { "id": "1", "order_id": "1", "reviewer_id": "3", "reviewee_id": "1", "gig_id": "1", "rating": 5, "comment": "Excellent work! John delivered exactly what I needed and even added some extra features. The website looks amazing and works perfectly on all devices. Highly recommended!", "is_public": true, "created_at": "2024-02-16T10:30:00Z" } ] [V0_FILE]typescriptreact:file="lib/data.ts" isMerged="true" import usersData from "@/data/users.json" import categoriesData from "@/data/categories.json" import gigsData from "@/data/gigs.json" import gigPackagesData from "@/data/gig-packages.json" import ordersData from "@/data/orders.json" import reviewsData from "@/data/reviews.json" // Types export interface User { id: string email: string password: string full_name?: string username?: string avatar_url?: string bio?: string user_type: "buyer" | "seller" | "both" skills?: string[] languages?: string[] country?: string is_verified: boolean seller_level: number total_orders: number total_sales: number average_rating: number response_time: number created_at: string } export interface Category { id: string name: string slug: string description?: string icon?: string parent_id?: string | null is_active: boolean sort_order: number } export interface Gig { id: string seller_id: string category_id: string title: string slug: string description: string tags?: string[] images?: string[] video_url?: string | null status: "draft" | "active" | "paused" | "deleted" is_featured: boolean views: number orders_in_queue: number total_orders: number average_rating: number created_at: string seller?: User category?: Category packages?: GigPackage[] } export interface GigPackage { id: string gig_id: string package_type: "basic" | "standard" | "premium" title: string description: string price: number delivery_days: number revisions: number features?: string[] } export interface Order { id: string buyer_id: string seller_id: string gig_id: string package_id: string status: "pending" | "in_progress" | "delivered" | "completed" | "cancelled" | "disputed" total_amount: number requirements?: string delivery_date?: string delivered_at?: string completed_at?: string cancelled_at?: string created_at: string buyer?: User seller?: User gig?: Gig package?: GigPackage } export interface Review { id: string order_id: string reviewer_id: string reviewee_id: string gig_id: string rating: number comment?: string is_public: boolean created_at: string } // Data access functions export function getUsers(): User[] { return usersData as User[] } export function getUserById(id: string): User | null { const users = getUsers() return users.find((user) => user.id === id) || null } export function getUserByEmail(email: string): User | null { const users = getUsers() return users.find((user) => user.email === email) || null } export function getCategories(): Category[] { return categoriesData as Category[] } export function getCategoryById(id: string): Category | null { const categories = getCategories() return categories.find((category) => category.id === id) || null } export function getMainCategories(): Category[] { const categories = getCategories() return categories.filter((category) => !category.parent_id && category.is_active) } export function getGigs(): Gig[] { const gigs = gigsData as Gig[] const users = getUsers() const categories = getCategories() const packages = getGigPackages() return gigs.map((gig) => ({ ...gig, seller: users.find((user) => user.id === gig.seller_id), category: categories.find((category) => category.id === gig.category_id), packages: packages.filter((pkg) => pkg.gig_id === gig.id), })) } export function getGigById(id: string): Gig | null { const gigs = getGigs() return gigs.find((gig) => gig.id === id) || null } export function getGigBySlug(slug: string): Gig | null { const gigs = getGigs() return gigs.find((gig) => gig.slug === slug) || null } export function getGigsBySellerId(sellerId: string): Gig[] { const gigs = getGigs() return gigs.filter((gig) => gig.seller_id === sellerId) } export function getFeaturedGigs(): Gig[] { const gigs = getGigs() return gigs.filter((gig) => gig.is_featured && gig.status === "active") } export function searchGigs( query: string, filters?: { categoryId?: string minPrice?: number maxPrice?: number deliveryTime?: number }, ): Gig[] { let gigs = getGigs().filter((gig) => gig.status === "active") // Search by query if (query) { const searchTerm = query.toLowerCase() gigs = gigs.filter( (gig) => gig.title.toLowerCase().includes(searchTerm) || gig.description.toLowerCase().includes(searchTerm) || gig.tags?.some((tag) => tag.toLowerCase().includes(searchTerm)), ) } // Apply filters if (filters) { if (filters.categoryId) { gigs = gigs.filter((gig) => gig.category_id === filters.categoryId) } if (filters.minPrice !== undefined || filters.maxPrice !== undefined) { gigs = gigs.filter((gig) => { const basicPackage = gig.packages?.find((pkg) => pkg.package_type === "basic") if (!basicPackage) return false if (filters.minPrice !== undefined && basicPackage.price < filters.minPrice) return false if (filters.maxPrice !== undefined && basicPackage.price > filters.maxPrice) return false return true }) } if (filters.deliveryTime) { gigs = gigs.filter((gig) => { const basicPackage = gig.packages?.find((pkg) => pkg.package_type === "basic") return basicPackage && basicPackage.delivery_days <= filters.deliveryTime! }) } } return gigs } export function getGigPackages(): GigPackage[] { return gigPackagesData as GigPackage[] } export function getGigPackageById(id: string): GigPackage | null { const packages = getGigPackages() return packages.find((pkg) => pkg.id === id) || null } export function getOrders(): Order[] { const orders = ordersData as Order[] const users = getUsers() const gigs = getGigs() const packages = getGigPackages() return orders.map((order) => ({ ...order, buyer: users.find((user) => user.id === order.buyer_id), seller: users.find((user) => user.id === order.seller_id), gig: gigs.find((gig) => gig.id === order.gig_id), package: packages.find((pkg) => pkg.id === order.package_id), })) } export function getOrderById(id: string): Order | null { const orders = getOrders() return orders.find((order) => order.id === id) || null } export function getOrdersByUserId(userId: string): Order[] { const orders = getOrders() return orders.filter((order) => order.buyer_id === userId || order.seller_id === userId) } export function getReviews(): Review[] { return reviewsData as Review[] } export function getReviewsByGigId(gigId: string): Review[] { const reviews = getReviews() return reviews.filter((review) => review.gig_id === gigId && review.is_public) } // Authentication functions let currentUser: User | null = null export function signIn(email: string, password: string): User | null { const user = getUserByEmail(email) if (user && user.password === password) { currentUser = user // Store in localStorage for persistence if (typeof window !== "undefined") { localStorage.setItem("currentUser", JSON.stringify(user)) } return user } return null } export function signUp( userData: Omit< User, | "id" | "created_at" | "total_orders" | "total_sales" | "average_rating" | "seller_level" | "is_verified" | "response_time" >, ): User { const newUser: User = { ...userData, id: Date.now().toString(), created_at: new Date().toISOString(), total_orders: 0, total_sales: 0, average_rating: 0, seller_level: 1, is_verified: false, response_time: 24, } // In a real app, you'd save this to a database // For demo purposes, we'll just set it as current user currentUser = newUser if (typeof window !== "undefined") { localStorage.setItem("currentUser", JSON.stringify(newUser)) } return newUser } export function signOut(): void { currentUser = null if (typeof window !== "undefined") { localStorage.removeItem("currentUser") } } export function getCurrentUser(): User | null { if (currentUser) return currentUser if (typeof window !== "undefined") { const stored = localStorage.getItem("currentUser") if (stored) { currentUser = JSON.parse(stored) return currentUser } } return null } export function updateUser(userId: string, updates: Partial): User | null { // In a real app, you'd update the database // For demo purposes, we'll just update the current user if it matches if (currentUser && currentUser.id === userId) { currentUser = { ...currentUser, ...updates } if (typeof window !== "undefined") { localStorage.setItem("currentUser", JSON.stringify(currentUser)) } return currentUser } return null } [V0_FILE]typescriptreact:file="components/ui/navbar.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import Link from "next/link" import { useRouter } from "next/navigation" import { Search, Menu, X, Plus, MessageCircle, ShoppingCart } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { getCurrentUser, signOut, type User } from "@/lib/data" export default function Navbar() { const [isOpen, setIsOpen] = useState(false) const [user, setUser] = useState(null) const [searchQuery, setSearchQuery] = useState("") const router = useRouter() useEffect(() => { const currentUser = getCurrentUser() setUser(currentUser) }, []) function handleSignOut() { signOut() setUser(null) router.push("/") } function handleSearch(e: React.FormEvent) { e.preventDefault() if (searchQuery.trim()) { router.push(`/search?q=${encodeURIComponent(searchQuery.trim())}`) } } return (

{/* Logo */}

Fiverr Clone

{/* Search Bar - Desktop */}

{/* Desktop Navigation */}

{user ? ( <> {(user.user_type === "seller" || user.user_type === "both") && ( )}

{user.full_name || "User"}

{user.email}

Profile Dashboard My Orders {(user.user_type === "seller" || user.user_type === "both") && ( My Gigs )} Sign out ) : (

)}

{/* Mobile menu button */}

{/* Mobile Navigation */} {isOpen && (

{/* Mobile Search */} {user ? ( <> Profile Dashboard My Orders {(user.user_type === "seller" || user.user_type === "both") && ( <> My Gigs Create Gig )} ) : ( <> Sign In Join )}

)}

) } [V0_FILE]typescriptreact:file="components/gig-card.tsx" isEdit="true" isMerged="true" import Link from "next/link" import Image from "next/image" import { Star, Heart, User } from "lucide-react" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import type { Gig } from "@/lib/data" interface GigCardProps { gig: Gig } export default function GigCard({ gig }: GigCardProps) { const basicPackage = gig.packages?.find((p) => p.package_type === "basic") const startingPrice = basicPackage?.price || 0 return (

{gig.is_featured && ( Featured )}

{gig.seller?.full_name?.charAt(0) || } {gig.seller?.full_name || "Anonymous"} {gig.seller?.is_verified && ( ✓ )}

{gig.title}

{gig.average_rating > 0 ? gig.average_rating.toFixed(1) : "New"} ({gig.total_orders})

{gig.tags && gig.tags.length > 0 && (

{gig.tags.slice(0, 3).map((tag, index) => ( {tag} ))}

)}

Starting at

${startingPrice.toFixed(0)}

) } [V0_FILE]typescriptreact:file="components/category-grid.tsx" isEdit="true" isMerged="true" import Link from "next/link" import { Card, CardContent } from "@/components/ui/card" import type { Category } from "@/lib/data" interface CategoryGridProps { categories: Category[] } export default function CategoryGrid({ categories }: CategoryGridProps) { return (

{categories.map((category) => (

{category.icon}

{category.name}

))}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import Link from "next/link" import { Search, TrendingUp, Shield, Clock } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent } from "@/components/ui/card" import GigCard from "@/components/gig-card" import CategoryGrid from "@/components/category-grid" import { getFeaturedGigs, getMainCategories } from "@/lib/data" function HeroSection() { return (

Find the perfect freelance services for your business

Millions of people use Fiverr Clone to turn their ideas into reality.

Popular: Website Design, Logo Design, WordPress, Video Editing

) } function FeaturesSection() { const features = [ { icon: , title: "Proof of quality", description: "Check any pro's work samples, client reviews, and identity verification.", }, { icon: , title: "Safe and secure", description: "Focus on your work knowing each project is secured by our payment protection.", }, { icon: , title: "24/7 support", description: "Questions? Our round-the-clock support team is available to help anytime, anywhere.", }, ] return (

A whole world of freelance talent at your fingertips

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

{feature.icon}

{feature.title}

{feature.description}

))}

) } function CategoriesSection() { const categories = getMainCategories() return (

Explore the marketplace

Browse by category to find the service you need

) } function FeaturedGigsSection() { const gigs = getFeaturedGigs() if (gigs.length === 0) { return null } return (

Featured Services

{gigs.map((gig) => ( ))}

) } export default function HomePage() { return (

) } [V0_FILE]typescriptreact:file="app/auth/signin/page.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import Link from "next/link" import { Eye, EyeOff } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Alert, AlertDescription } from "@/components/ui/alert" import { signIn } from "@/lib/data" export default function SignInPage() { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [showPassword, setShowPassword] = useState(false) const [loading, setLoading] = useState(false) const [error, setError] = useState("") const router = useRouter() async function handleSubmit(e: React.FormEvent) { e.preventDefault() setLoading(true) setError("") try { const user = signIn(email, password) if (user) { router.push("/dashboard") } else { setError("Invalid email or password") } } catch (error: any) { setError("An error occurred during sign in") } finally { setLoading(false) } } return (

Don't have an account?{" "} Sign up

Demo Accounts:

Seller: john@example.com / password123

Designer: sarah@example.com / password123

Writer: mike@example.com / password123

) } [V0_FILE]typescriptreact:file="app/auth/signup/page.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import Link from "next/link" import { Eye, EyeOff } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Alert, AlertDescription } from "@/components/ui/alert" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { signUp } from "@/lib/data" export default function SignUpPage() { const [formData, setFormData] = useState({ email: "", password: "", confirmPassword: "", full_name: "", username: "", user_type: "buyer" as "buyer" | "seller" | "both", }) const [showPassword, setShowPassword] = useState(false) const [showConfirmPassword, setShowConfirmPassword] = useState(false) const [loading, setLoading] = useState(false) const [error, setError] = useState("") const router = useRouter() function handleInputChange(field: string, value: string) { setFormData((prev) => ({ ...prev, [field]: value })) } async function handleSubmit(e: React.FormEvent) { e.preventDefault() setLoading(true) setError("") if (formData.password !== formData.confirmPassword) { setError("Passwords do not match") setLoading(false) return } if (formData.password.length < 6) { setError("Password must be at least 6 characters long") setLoading(false) return } try { const user = signUp({ email: formData.email, password: formData.password, full_name: formData.full_name, username: formData.username, user_type: formData.user_type, }) if (user) { router.push("/dashboard") } } catch (error: any) { setError("An error occurred during sign up") } finally { setLoading(false) } } return (

Create your account Join thousands of freelancers and clients {error && ( {error} )}

Full Name handleInputChange("full_name", e.target.value)} required placeholder="Enter your full name" />

Username handleInputChange("username", e.target.value)} placeholder="Choose a username" />

Email handleInputChange("email", e.target.value)} required placeholder="Enter your email" />

Password

handleInputChange("password", e.target.value)} required placeholder="Create a password" />

Confirm Password

handleInputChange("confirmPassword", e.target.value)} required placeholder="Confirm your password" />

I want to: handleInputChange("user_type", value)} className="mt-2" >

Buy services

Sell services

Both buy and sell

Already have an account?{" "} Sign in

) } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { useRouter } from "next/navigation" import Link from "next/link" import { Plus, DollarSign, Star, Eye, MessageCircle, ShoppingCart } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Badge } from "@/components/ui/badge" import { getCurrentUser, getGigsBySellerId, getOrdersByUserId, type User, type Gig, type Order } from "@/lib/data" export default function DashboardPage() { const [user, setUser] = useState(null) const [gigs, setGigs] = useState([]) const [orders, setOrders] = useState([]) const [loading, setLoading] = useState(true) const router = useRouter() useEffect(() => { loadDashboardData() }, []) function loadDashboardData() { const currentUser = getCurrentUser() if (!currentUser) { router.push("/auth/signin") return } setUser(currentUser) // Load user's gigs if they're a seller if (currentUser.user_type === "seller" || currentUser.user_type === "both") { const userGigs = getGigsBySellerId(currentUser.id) setGigs(userGigs) } // Load user's orders const userOrders = getOrdersByUserId(currentUser.id) setOrders(userOrders) setLoading(false) } if (loading) { return (

) } if (!user) { return (

Please sign in

) } const isSeller = user.user_type === "seller" || user.user_type === "both" const activeGigs = gigs.filter((g) => g.status === "active").length const totalEarnings = orders .filter((o) => o.seller_id === user.id && o.status === "completed") .reduce((sum, o) => sum + o.total_amount, 0) return (

Welcome back, {user.full_name || "User"}!

Here's what's happening with your {isSeller ? "business" : "orders"} today.

{/* Stats Cards */}

{isSeller && ( <> Active Gigs

{activeGigs}

{gigs.length - activeGigs} inactive

Total Earnings

${totalEarnings.toFixed(2)}

From {user.total_sales} completed orders

Average Rating

{user.average_rating > 0 ? user.average_rating.toFixed(1) : "New"}

Based on {user.total_orders} reviews

)} Total Orders

{user.total_orders}

{isSeller ? "Orders received" : "Orders placed"}

{isSeller && My Gigs} Recent Orders Messages {isSeller && (

My Gigs

{gigs.length === 0 ? (

No gigs yet

Create your first gig to start selling your services

) : (

{gigs.slice(0, 5).map((gig) => (

{gig.title}

{gig.status}

{gig.category?.name}

{gig.views} views {gig.total_orders} orders {gig.average_rating > 0 ? gig.average_rating.toFixed(1) : "New"}

${gig.packages?.find((p) => p.package_type === "basic")?.price || 0}

))}

)} )}

Recent Orders

{orders.length === 0 ? (

No orders yet

{isSeller ? "Start promoting your gigs to get your first order" : "Browse services to place your first order"}

) : (

{orders.map((order) => (

{order.gig?.title}

{order.buyer_id === user.id ? "Purchased from" : "Sold to"}:{" "} {order.buyer_id === user.id ? order.seller?.full_name : order.buyer?.full_name}

{order.status.replace("_", " ")} {new Date(order.created_at).toLocaleDateString()}

${order.total_amount}

))}

)}

Messages

No messages yet

Your conversations will appear here

) } [V0_FILE]typescriptreact:file="app/search/page.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect, Suspense } from "react" import { useSearchParams } from "next/navigation" import { Search, SlidersHorizontal } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Slider } from "@/components/ui/slider" import GigCard from "@/components/gig-card" import { searchGigs, getCategories, type Gig, type Category } from "@/lib/data" function SearchContent() { const searchParams = useSearchParams() const [gigs, setGigs] = useState([]) const [categories, setCategories] = useState([]) const [loading, setLoading] = useState(true) const [searchQuery, setSearchQuery] = useState(searchParams.get("q") || "") const [selectedCategory, setSelectedCategory] = useState("") const [priceRange, setPriceRange] = useState([0, 1000]) const [deliveryTime, setDeliveryTime] = useState("") const [sortBy, setSortBy] = useState("relevance") const [showFilters, setShowFilters] = useState(false) useEffect(() => { loadCategories() performSearch() }, [searchParams]) useEffect(() => { performSearch() }, [selectedCategory, priceRange, deliveryTime, sortBy]) function loadCategories() { const allCategories = getCategories() setCategories(allCategories.filter((cat) => cat.is_active)) } function performSearch() { setLoading(true) const filters: any = {} if (selectedCategory && selectedCategory !== "all") { filters.categoryId = selectedCategory } if (priceRange[0] > 0 || priceRange[1] < 1000) { filters.minPrice = priceRange[0] filters.maxPrice = priceRange[1] } if (deliveryTime && deliveryTime !== "any") { filters.deliveryTime = Number.parseInt(deliveryTime) } const results = searchGigs(searchQuery, filters) // Sort results switch (sortBy) { case "price_low": results.sort((a, b) => { const priceA = a.packages?.find((p) => p.package_type === "basic")?.price || 0 const priceB = b.packages?.find((p) => p.package_type === "basic")?.price || 0 return priceA - priceB }) break case "price_high": results.sort((a, b) => { const priceA = a.packages?.find((p) => p.package_type === "basic")?.price || 0 const priceB = b.packages?.find((p) => p.package_type === "basic")?.price || 0 return priceB - priceA }) break case "rating": results.sort((a, b) => b.average_rating - a.average_rating) break case "newest": results.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime()) break default: results.sort((a, b) => b.views - a.views) } setGigs(results) setLoading(false) } function handleSearch(e: React.FormEvent) { e.preventDefault() const url = new URL(window.location.href) url.searchParams.set("q", searchQuery) window.history.pushState({}, "", url.toString()) performSearch() } return (

{/* Search Header */}

{loading ? "Searching..." : `${gigs.length} services available`}

{/* Filters Sidebar */} {showFilters && (

Price Range

${priceRange[0]} ${priceRange[1]}

Delivery Time

)} {/* Results Grid */}

{loading ? (

{Array.from({ length: 8 }).map((_, i) => (

))}

) : gigs.length === 0 ? (

No services found

Try adjusting your search terms or filters

) : (

{gigs.map((gig) => ( ))}

)}

) } export default function SearchPage() { return (

} > ) } [V0_FILE]typescriptreact:file="app/gigs/[slug]/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { useParams, useRouter } from "next/navigation" import Image from "next/image" import Link from "next/link" import { Star, Clock, RefreshCw, Check, Heart, Share2, Flag, User } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Separator } from "@/components/ui/separator" import { getGigBySlug, getReviewsByGigId, getCurrentUser, type Gig, type Review } from "@/lib/data" export default function GigDetailPage() { const params = useParams() const router = useRouter() const [gig, setGig] = useState(null) const [reviews, setReviews] = useState([]) const [selectedPackage, setSelectedPackage] = useState<"basic" | "standard" | "premium">("basic") const [loading, setLoading] = useState(true) const [currentUser, setCurrentUser] = useState(getCurrentUser()) useEffect(() => { loadGigData() }, [params.slug]) function loadGigData() { const slug = params.slug as string const gigData = getGigBySlug(slug) if (!gigData) { router.push("/404") return } setGig(gigData) const gigReviews = getReviewsByGigId(gigData.id) setReviews(gigReviews) setLoading(false) } function handleOrderNow() { if (!currentUser) { router.push("/auth/signin") return } // In a real app, this would redirect to checkout alert(`Order functionality would redirect to checkout for ${selectedPackage} package`) } if (loading) { return (

) } if (!gig) { return (

Gig not found

) } const selectedPackageData = gig.packages?.find((p) => p.package_type === selectedPackage) return (

{/* Main Content */}

{/* Breadcrumb */} {/* Title and Seller Info */}

{gig.title}

{gig.seller?.full_name?.charAt(0) || }

{gig.seller?.full_name} {gig.seller?.is_verified && ( Verified )} Level {gig.seller?.seller_level}

{gig.average_rating > 0 ? gig.average_rating.toFixed(1) : "New"} ({gig.total_orders} reviews)

{gig.orders_in_queue} in queue

{/* Gig Images */}

{gig.images && gig.images.length > 0 && (

{gig.images.map((image, index) => (

))}

)}

{/* Description */} About This Gig

{gig.description.split("\n").map((paragraph, index) => (

{paragraph}

))}

{gig.tags && gig.tags.length > 0 && (

Tags:

{gig.tags.map((tag, index) => ( {tag} ))}

)} {/* About the Seller */} About The Seller

{gig.seller?.full_name?.charAt(0) || }

{gig.seller?.full_name}

{gig.seller?.is_verified && Verified}

{gig.seller?.bio &&

{gig.seller.bio}

}

From

{gig.seller?.country || "Not specified"}

Member since

{new Date(gig.seller?.created_at || "").getFullYear()}

Avg. response time

{gig.seller?.response_time} hours

Languages

{gig.seller?.languages?.join(", ") || "English"}

{gig.seller?.skills && gig.seller.skills.length > 0 && (

Skills

{gig.seller.skills.map((skill, index) => ( {skill} ))}

)}

{/* Reviews */} Reviews ({reviews.length}) {reviews.length === 0 ? (

No reviews yet

) : (

{reviews.map((review) => (

{review.reviewer_id.charAt(0).toUpperCase()}

Anonymous User

{Array.from({ length: 5 }).map((_, i) => ( ))}

{new Date(review.created_at).toLocaleDateString()}

{review.comment &&

{review.comment}

}

))}

)}

{/* Sidebar - Package Selection */}

{/* Package Tabs */} setSelectedPackage(value as any)}> Basic Standard Premium {gig.packages?.map((pkg) => (

{pkg.title}

{pkg.description}

${pkg.price}

{pkg.delivery_days} days

{pkg.revisions} revisions

{pkg.features && pkg.features.length > 0 && (

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

{feature}

))}

)}

))} {/* Action Buttons */}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import Navbar from "@/components/ui/navbar" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Fiverr Clone - Freelance Services Marketplace", description: "Find the perfect freelance services for your business. Connect with talented freelancers and get your projects done.", keywords: "freelance, services, marketplace, gigs, hire, work", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]json:file="package.json" isEdit="true" isMerged="true" { "name": "fiverr-clone-local", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@radix-ui/react-avatar": "^1.0.4", "@radix-ui/react-checkbox": "^1.0.4", "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-radio-group": "^1.1.3", "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-slider": "^1.1.2", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-tabs": "^1.0.4", "@radix-ui/react-toast": "^1.1.5", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", "lucide-react": "^0.294.0", "next": "15.0.3", "react": "^18.2.0", "react-dom": "^18.2.0", "tailwind-merge": "^2.2.0", "tailwindcss-animate": "^1.0.7" }, "devDependencies": { "@types/node": "^20.10.5", "@types/react": "^18.2.45", "@types/react-dom": "^18.2.18", "autoprefixer": "^10.4.16", "eslint": "^8.56.0", "eslint-config-next": "15.0.3", "postcss": "^8.4.32", "tailwindcss": "^3.4.17", "typescript": "^5.3.3" } } [V0_FILE]typescriptreact:file="app/gigs/create/page.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { useRouter } from "next/navigation" import Link from "next/link" import { Plus, X, Upload, ArrowLeft } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Badge } from "@/components/ui/badge" import { Alert, AlertDescription } from "@/components/ui/alert" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { getCurrentUser, getCategories, type User, type Category, type GigPackage } from "@/lib/data" interface GigFormData { title: string category_id: string description: string tags: string[] images: string[] video_url: string packages: { basic: Partial standard: Partial premium: Partial } } export default function CreateGigPage() { const router = useRouter() const [user, setUser] = useState(null) const [categories, setCategories] = useState([]) const [loading, setLoading] = useState(false) const [error, setError] = useState("") const [currentTag, setCurrentTag] = useState("") const [activeTab, setActiveTab] = useState("overview") const [formData, setFormData] = useState({ title: "", category_id: "", description: "", tags: [], images: [], video_url: "", packages: { basic: { title: "", description: "", price: 0, delivery_days: 1, revisions: 0, features: [], }, standard: { title: "", description: "", price: 0, delivery_days: 1, revisions: 0, features: [], }, premium: { title: "", description: "", price: 0, delivery_days: 1, revisions: 0, features: [], }, }, }) useEffect(() => { const currentUser = getCurrentUser() if (!currentUser) { router.push("/auth/signin") return } if (currentUser.user_type === "buyer") { router.push("/dashboard") return } setUser(currentUser) setCategories(getCategories().filter((cat) => cat.is_active)) }, [router]) function handleInputChange(field: keyof GigFormData, value: any) { setFormData((prev) => ({ ...prev, [field]: value })) } function handlePackageChange(packageType: "basic" | "standard" | "premium", field: string, value: any) { setFormData((prev) => ({ ...prev, packages: { ...prev.packages, [packageType]: { ...prev.packages[packageType], [field]: value, }, }, })) } function addTag() { if (currentTag.trim() && !formData.tags.includes(currentTag.trim()) && formData.tags.length < 5) { handleInputChange("tags", [...formData.tags, currentTag.trim()]) setCurrentTag("") } } function removeTag(tagToRemove: string) { handleInputChange( "tags", formData.tags.filter((tag) => tag !== tagToRemove), ) } function addPackageFeature(packageType: "basic" | "standard" | "premium", feature: string) { if (feature.trim()) { const currentFeatures = formData.packages[packageType].features || [] handlePackageChange(packageType, "features", [...currentFeatures, feature.trim()]) } } function removePackageFeature(packageType: "basic" | "standard" | "premium", featureToRemove: string) { const currentFeatures = formData.packages[packageType].features || [] handlePackageChange( packageType, "features", currentFeatures.filter((feature) => feature !== featureToRemove), ) } function addImage() { // In a real app, this would open a file picker const imageUrl = `/placeholder.svg?height=300&width=400&query=gig-image-${formData.images.length + 1}` if (formData.images.length < 5) { handleInputChange("images", [...formData.images, imageUrl]) } } function removeImage(imageToRemove: string) { handleInputChange( "images", formData.images.filter((image) => image !== imageToRemove), ) } function validateForm(): string | null { if (!formData.title.trim()) return "Title is required" if (!formData.category_id) return "Category is required" if (!formData.description.trim()) return "Description is required" if (formData.tags.length === 0) return "At least one tag is required" // Validate basic package (required) const basicPackage = formData.packages.basic if (!basicPackage.title?.trim()) return "Basic package title is required" if (!basicPackage.description?.trim()) return "Basic package description is required" if (!basicPackage.price || basicPackage.price <= 0) return "Basic package price must be greater than 0" if (!basicPackage.delivery_days || basicPackage.delivery_days <= 0) return "Basic package delivery days must be greater than 0" return null } async function handleSubmit(e: React.FormEvent) { e.preventDefault() setLoading(true) setError("") const validationError = validateForm() if (validationError) { setError(validationError) setLoading(false) return } try { // In a real app, this would save to database // For demo, we'll just simulate success await new Promise((resolve) => setTimeout(resolve, 2000)) // Generate slug from title const slug = formData.title .toLowerCase() .replace(/[^a-z0-9]+/g, "-") .replace(/(^-|-$)/g, "") alert(`Gig "${formData.title}" created successfully! In a real app, this would be saved to the database.`) router.push("/dashboard") } catch (error: any) { setError("Failed to create gig. Please try again.") } finally { setLoading(false) } } function handleSaveDraft() { // In a real app, this would save as draft alert("Draft saved! In a real app, this would save the current progress.") } if (!user) { return (

) } return (

{/* Header */}

Back to Dashboard

Create a New Gig

Share your skills with the world and start earning

{error && ( {error} )}

Overview Pricing Gallery Publish {/* Overview Tab */} Gig Overview {/* Title */}

Gig Title * handleInputChange("title", e.target.value)} placeholder="I will..." maxLength={80} className="mt-1" />

{formData.title.length}/80 characters

{/* Category */}

Category *

{/* Description */}

Description *

handleInputChange("description", e.target.value)}
                    placeholder="Describe your service in detail..."
                    rows={8}
                    maxLength={1200}
                    className="mt-1"
                  />
                  <p className="text-sm text-gray-500 mt-1">{formData.description.length}/1200 characters</p>
                </div>

{/* Tags */}
                <div>
                  <Label>Search Tags * (up to 5)</Label>
                  <div className="flex gap-2 mt-1">
                    <Input
                      value={currentTag}
                      onChange={(e) => setCurrentTag(e.target.value)}
                      placeholder="Add a tag"
                      onKeyPress={(e) => e.key === "Enter" && (e.preventDefault(), addTag())}
                      disabled={formData.tags.length >= 5}
                    />
                    <Button type="button" onClick={addTag} disabled={formData.tags.length >= 5}>
                      Add
                    </Button>
                  </div>
                  <div className="flex flex-wrap gap-2 mt-2">
                    {formData.tags.map((tag) => (
                      <Badge key={tag} variant="secondary" className="flex items-center gap-1">
                        {tag}
                        <X className="h-3 w-3 cursor-pointer" onClick={() => removeTag(tag)} />
                      </Badge>
                    ))}
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

{/* Pricing Tab */}
          <TabsContent value="pricing" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Pricing Packages</CardTitle>
                <p className="text-sm text-gray-600">Create up to 3 packages for your service</p>
              </CardHeader>
              <CardContent>
                <Tabs defaultValue="basic" className="space-y-4">
                  <TabsList className="grid w-full grid-cols-3">
                    <TabsTrigger value="basic">Basic *</TabsTrigger>
                    <TabsTrigger value="standard">Standard</TabsTrigger>
                    <TabsTrigger value="premium">Premium</TabsTrigger>
                  </TabsList>

{(["basic", "standard", "premium"] as const).map((packageType) => (
                    <TabsContent key={packageType} value={packageType} className="space-y-4">
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                          <Label htmlFor={`${packageType}-title`}>Package Name</Label>
                          <Input
                            id={`${packageType}-title`}
                            value={formData.packages[packageType].title || ""}
                            onChange={(e) => handlePackageChange(packageType, "title", e.target.value)}
                            placeholder={`${packageType.charAt(0).toUpperCase() + packageType.slice(1)} Package`}
                          />
                        </div>

<div>
                          <Label htmlFor={`${packageType}-price`}>Price ($)</Label>
                          <Input
                            id={`${packageType}-price`}
                            type="number"
                            min="5"
                            value={formData.packages[packageType].price || ""}
                            onChange={(e) => handlePackageChange(packageType, "price", Number(e.target.value))}
                            placeholder="0"
                          />
                        </div>

<div>
                          <Label htmlFor={`${packageType}-delivery`}>Delivery Time (days)</Label>
                          <Select
                            value={formData.packages[packageType].delivery_days?.toString() || "1"}
                            onValueChange={(value) => handlePackageChange(packageType, "delivery_days", Number(value))}
                          >
                            <SelectTrigger>
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="1">1 day</SelectItem>
                              <SelectItem value="2">2 days</SelectItem>
                              <SelectItem value="3">3 days</SelectItem>
                              <SelectItem value="5">5 days</SelectItem>
                              <SelectItem value="7">1 week</SelectItem>
                              <SelectItem value="14">2 weeks</SelectItem>
                              <SelectItem value="21">3 weeks</SelectItem>
                              <SelectItem value="30">1 month</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>

<div>
                          <Label htmlFor={`${packageType}-revisions`}>Revisions</Label>
                          <Select
                            value={formData.packages[packageType].revisions?.toString() || "0"}
                            onValueChange={(value) => handlePackageChange(packageType, "revisions", Number(value))}
                          >
                            <SelectTrigger>
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="0">0</SelectItem>
                              <SelectItem value="1">1</SelectItem>
                              <SelectItem value="2">2</SelectItem>
                              <SelectItem value="3">3</SelectItem>
                              <SelectItem value="5">5</SelectItem>
                              <SelectItem value="999">Unlimited</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                      </div>

<div>
                        <Label htmlFor={`${packageType}-description`}>Description</Label>
                        <Textarea
                          id={`${packageType}-description`}
                          value={formData.packages[packageType].description || ""}
                          onChange={(e) => handlePackageChange(packageType, "description", e.target.value)}
                          placeholder="Describe what's included in this package..."
                          rows={3}
                        />
                      </div>

<div>
                        <Label>Features</Label>
                        <div className="space-y-2">
                          {(formData.packages[packageType].features || []).map((feature, index) => (
                            <div key={index} className="flex items-center gap-2">
                              <Input value={feature} readOnly className="flex-1" />
                              <Button
                                type="button"
                                variant="outline"
                                size="sm"
                                onClick={() => removePackageFeature(packageType, feature)}
                              >
                                <X className="h-4 w-4" />
                              </Button>
                            </div>
                          ))}
                          <div className="flex gap-2">
                            <Input
                              placeholder="Add a feature"
                              onKeyPress={(e) => {
                                if (e.key === "Enter") {
                                  e.preventDefault()
                                  const input = e.target as HTMLInputElement
                                  addPackageFeature(packageType, input.value)
                                  input.value = ""
                                }
                              }}
                            />
                            <Button
                              type="button"
                              variant="outline"
                              onClick={(e) => {
                                const input = (e.target as HTMLElement)
                                  .closest(".flex")
                                  ?.querySelector("input") as HTMLInputElement
                                if (input) {
                                  addPackageFeature(packageType, input.value)
                                  input.value = ""
                                }
                              }}
                            >
                              <Plus className="h-4 w-4" />
                            </Button>
                          </div>
                        </div>
                      </div>
                    </TabsContent>
                  ))}
                </Tabs>
              </CardContent>
            </Card>
          </TabsContent>

{/* Gallery Tab */}
          <TabsContent value="gallery" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Gig Gallery</CardTitle>
                <p className="text-sm text-gray-600">Add images and videos to showcase your work</p>
              </CardHeader>
              <CardContent className="space-y-6">
                {/* Images */}
                <div>
                  <Label>Images (up to 5)</Label>
                  <div className="grid grid-cols-2 md:grid-cols-3 gap-4 mt-2">
                    {formData.images.map((image, index) => (
                      <div key={index} className="relative aspect-video bg-gray-100 rounded-lg overflow-hidden">
                        <img
                          src={image || "/placeholder.svg"}
                          alt={`Gig image ${index + 1}`}
                          className="w-full h-full object-cover"
                        />
                        <Button
                          type="button"
                          variant="destructive"
                          size="sm"
                          className="absolute top-2 right-2"
                          onClick={() => removeImage(image)}
                        >
                          <X className="h-4 w-4" />
                        </Button>
                      </div>
                    ))}
                    {formData.images.length < 5 && (
                      <button
                        type="button"
                        onClick={addImage}
                        className="aspect-video bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center hover:bg-gray-100 transition-colors"
                      >
                        <div className="text-center">
                          <Upload className="h-8 w-8 text-gray-400 mx-auto mb-2" />
                          <p className="text-sm text-gray-600">Add Image</p>
                        </div>
                      </button>
                    )}
                  </div>
                  <p className="text-sm text-gray-500 mt-2">
                    In a real app, clicking "Add Image" would open a file picker
                  </p>
                </div>

{/* Video */}
                <div>
                  <Label htmlFor="video">Video URL (optional)</Label>
                  <Input
                    id="video"
                    value={formData.video_url}
                    onChange={(e) => handleInputChange("video_url", e.target.value)}
                    placeholder="https://youtube.com/watch?v=..."
                    className="mt-1"
                  />
                  <p className="text-sm text-gray-500 mt-1">Add a video to showcase your service</p>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

{/* Publish Tab */}
          <TabsContent value="publish" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Publish Your Gig</CardTitle>
                <p className="text-sm text-gray-600">Review your gig before publishing</p>
              </CardHeader>
              <CardContent className="space-y-6">
                {/* Gig Preview */}
                <div className="border rounded-lg p-4 bg-gray-50">
                  <h3 className="font-semibold text-lg mb-2">Gig Preview</h3>
                  <div className="space-y-2 text-sm">
                    <p>
                      <strong>Title:</strong> {formData.title || "Not set"}
                    </p>
                    <p>
                      <strong>Category:</strong>{" "}
                      {categories.find((c) => c.id === formData.category_id)?.name || "Not selected"}
                    </p>
                    <p>
                      <strong>Tags:</strong> {formData.tags.join(", ") || "None"}
                    </p>
                    <p>
                      <strong>Basic Package Price:</strong> ${formData.packages.basic.price || 0}
                    </p>
                    <p>
                      <strong>Images:</strong> {formData.images.length} uploaded
                    </p>
                  </div>
                </div>

{/* Publishing Options */}
                <div className="space-y-4">
                  <div className="flex items-center justify-between p-4 border rounded-lg">
                    <div>
                      <h4 className="font-medium">Publish Immediately</h4>
                      <p className="text-sm text-gray-600">Your gig will be live and available for purchase</p>
                    </div>
                  </div>

<div className="flex items-center justify-between p-4 border rounded-lg">
                    <div>
                      <h4 className="font-medium">Save as Draft</h4>
                      <p className="text-sm text-gray-600">Save your progress and publish later</p>
                    </div>
                    <Button type="button" variant="outline" onClick={handleSaveDraft}>
                      Save Draft
                    </Button>
                  </div>
                </div>

{/* Terms */}
                <div className="text-sm text-gray-600 space-y-2">
                  <p>By publishing this gig, you agree to:</p>
                  <ul className="list-disc list-inside space-y-1 ml-4">
                    <li>Provide the service as described</li>
                    <li>Deliver work within the specified timeframe</li>
                    <li>Maintain professional communication</li>
                    <li>Follow our community guidelines</li>
                  </ul>
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>

{/* Action Buttons */}
        <div className="flex justify-between items-center mt-8 pt-6 border-t">
          <Button type="button" variant="outline" onClick={() => router.push("/dashboard")}>
            Cancel
          </Button>

<div className="flex gap-4">
            <Button type="button" variant="outline" onClick={handleSaveDraft}>
              Save Draft
            </Button>
            <Button type="submit" disabled={loading}>
              {loading ? "Publishing..." : "Publish Gig"}
            </Button>
          </div>
        </div>
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/gigs/[slug]/edit/page.tsx" isMerged="true"
"use client"

import type React from "react"
import { useState, useEffect } from "react"
import { useParams, useRouter } from "next/navigation"
import Link from "next/link"
import { Plus, X, Upload, ArrowLeft, Save } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Switch } from "@/components/ui/switch"
import {
  getCurrentUser,
  getCategories,
  getGigBySlug,
  type User,
  type Category,
  type Gig,
  type GigPackage,
} from "@/lib/data"

interface GigFormData {
  title: string
  category_id: string
  description: string
  tags: string[]
  images: string[]
  video_url: string
  status: "draft" | "active" | "paused"
  packages: {
    basic: Partial<GigPackage>
    standard: Partial<GigPackage>
    premium: Partial<GigPackage>
  }
}

export default function EditGigPage() {
  const params = useParams()
  const router = useRouter()
  const [user, setUser] = useState<User | null>(null)
  const [gig, setGig] = useState<Gig | null>(null)
  const [categories, setCategories] = useState<Category[]>([])
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState("")
  const [currentTag, setCurrentTag] = useState("")
  const [activeTab, setActiveTab] = useState("overview")

const [formData, setFormData] = useState<GigFormData>({
    title: "",
    category_id: "",
    description: "",
    tags: [],
    images: [],
    video_url: "",
    status: "active",
    packages: {
      basic: {
        title: "",
        description: "",
        price: 0,
        delivery_days: 1,
        revisions: 0,
        features: [],
      },
      standard: {
        title: "",
        description: "",
        price: 0,
        delivery_days: 1,
        revisions: 0,
        features: [],
      },
      premium: {
        title: "",
        description: "",
        price: 0,
        delivery_days: 1,
        revisions: 0,
        features: [],
      },
    },
  })

useEffect(() => {
    const currentUser = getCurrentUser()
    if (!currentUser) {
      router.push("/auth/signin")
      return
    }

if (currentUser.user_type === "buyer") {
      router.push("/dashboard")
      return
    }

setUser(currentUser)
    setCategories(getCategories().filter((cat) => cat.is_active))

// Load existing gig data
    const slug = params.slug as string
    const existingGig = getGigBySlug(slug)

if (!existingGig) {
      router.push("/404")
      return
    }

if (existingGig.seller_id !== currentUser.id) {
      router.push("/dashboard")
      return
    }

setGig(existingGig)

// Populate form with existing data
    setFormData({
      title: existingGig.title,
      category_id: existingGig.category_id,
      description: existingGig.description,
      tags: existingGig.tags || [],
      images: existingGig.images || [],
      video_url: existingGig.video_url || "",
      status: existingGig.status,
      packages: {
        basic: existingGig.packages?.find((p) => p.package_type === "basic") || {
          title: "",
          description: "",
          price: 0,
          delivery_days: 1,
          revisions: 0,
          features: [],
        },
        standard: existingGig.packages?.find((p) => p.package_type === "standard") || {
          title: "",
          description: "",
          price: 0,
          delivery_days: 1,
          revisions: 0,
          features: [],
        },
        premium: existingGig.packages?.find((p) => p.package_type === "premium") || {
          title: "",
          description: "",
          price: 0,
          delivery_days: 1,
          revisions: 0,
          features: [],
        },
      },
    })
  }, [params.slug, router])

function handleInputChange(field: keyof GigFormData, value: any) {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

function handlePackageChange(packageType: "basic" | "standard" | "premium", field: string, value: any) {
    setFormData((prev) => ({
      ...prev,
      packages: {
        ...prev.packages,
        [packageType]: {
          ...prev.packages[packageType],
          [field]: value,
        },
      },
    }))
  }

function addTag() {
    if (currentTag.trim() && !formData.tags.includes(currentTag.trim()) && formData.tags.length < 5) {
      handleInputChange("tags", [...formData.tags, currentTag.trim()])
      setCurrentTag("")
    }
  }

function removeTag(tagToRemove: string) {
    handleInputChange(
      "tags",
      formData.tags.filter((tag) => tag !== tagToRemove),
    )
  }

function addPackageFeature(packageType: "basic" | "standard" | "premium", feature: string) {
    if (feature.trim()) {
      const currentFeatures = formData.packages[packageType].features || []
      handlePackageChange(packageType, "features", [...currentFeatures, feature.trim()])
    }
  }

function removePackageFeature(packageType: "basic" | "standard" | "premium", featureToRemove: string) {
    const currentFeatures = formData.packages[packageType].features || []
    handlePackageChange(
      packageType,
      "features",
      currentFeatures.filter((feature) => feature !== featureToRemove),
    )
  }

function addImage() {
    const imageUrl = `/placeholder.svg?height=300&width=400&query=gig-image-${formData.images.length + 1}`
    if (formData.images.length < 5) {
      handleInputChange("images", [...formData.images, imageUrl])
    }
  }

function removeImage(imageToRemove: string) {
    handleInputChange(
      "images",
      formData.images.filter((image) => image !== imageToRemove),
    )
  }

function validateForm(): string | null {
    if (!formData.title.trim()) return "Title is required"
    if (!formData.category_id) return "Category is required"
    if (!formData.description.trim()) return "Description is required"
    if (formData.tags.length === 0) return "At least one tag is required"

const basicPackage = formData.packages.basic
    if (!basicPackage.title?.trim()) return "Basic package title is required"
    if (!basicPackage.description?.trim()) return "Basic package description is required"
    if (!basicPackage.price || basicPackage.price <= 0) return "Basic package price must be greater than 0"
    if (!basicPackage.delivery_days || basicPackage.delivery_days <= 0)
      return "Basic package delivery days must be greater than 0"

return null
  }

async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setLoading(true)
    setError("")

const validationError = validateForm()
    if (validationError) {
      setError(validationError)
      setLoading(false)
      return
    }

try {
      await new Promise((resolve) => setTimeout(resolve, 1500))
      alert(`Gig "${formData.title}" updated successfully! In a real app, this would update the database.`)
      router.push("/dashboard")
    } catch (error: any) {
      setError("Failed to update gig. Please try again.")
    } finally {
      setLoading(false)
    }
  }

async function handleDelete() {
    if (confirm("Are you sure you want to delete this gig? This action cannot be undone.")) {
      try {
        await new Promise((resolve) => setTimeout(resolve, 1000))
        alert("Gig deleted successfully! In a real app, this would delete from the database.")
        router.push("/dashboard")
      } catch (error) {
        setError("Failed to delete gig. Please try again.")
      }
    }
  }

if (!user || !gig) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-green-600"></div>
      </div>
    )
  }

return (
    <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      {/* Header */}
      <div className="mb-8">
        <Link href="/dashboard" className="inline-flex items-center text-green-600 hover:text-green-700 mb-4">
          <ArrowLeft className="h-4 w-4 mr-2" />
          Back to Dashboard
        </Link>
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-3xl font-bold text-gray-900">Edit Gig</h1>
            <p className="text-gray-600 mt-2">Update your service details</p>
          </div>
          <div className="flex items-center gap-4">
            <div className="flex items-center gap-2">
              <Label htmlFor="status-toggle">Status:</Label>
              <Switch
                id="status-toggle"
                checked={formData.status === "active"}
                onCheckedChange={(checked) => handleInputChange("status", checked ? "active" : "paused")}
              />
              <span className="text-sm font-medium">{formData.status === "active" ? "Active" : "Paused"}</span>
            </div>
          </div>
        </div>
      </div>

{error && (
        <Alert className="mb-6" variant="destructive">
          <AlertDescription>{error}</AlertDescription>
        </Alert>
      )}

<form onSubmit={handleSubmit}>
        <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
          <TabsList className="grid w-full grid-cols-4">
            <TabsTrigger value="overview">Overview</TabsTrigger>
            <TabsTrigger value="pricing">Pricing</TabsTrigger>
            <TabsTrigger value="gallery">Gallery</TabsTrigger>
            <TabsTrigger value="settings">Settings</TabsTrigger>
          </TabsList>

{/* Overview Tab */}
          <TabsContent value="overview" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Gig Overview</CardTitle>
              </CardHeader>
              <CardContent className="space-y-6">
                <div>
                  <Label htmlFor="title">Gig Title *</Label>
                  <Input
                    id="title"
                    value={formData.title}
                    onChange={(e) => handleInputChange("title", e.target.value)}
                    placeholder="I will..."
                    maxLength={80}
                    className="mt-1"
                  />
                  <p className="text-sm text-gray-500 mt-1">{formData.title.length}/80 characters</p>
                </div>

<div>
                  <Label htmlFor="category">Category *</Label>
                  <Select
                    value={formData.category_id}
                    onValueChange={(value) => handleInputChange("category_id", value)}
                  >
                    <SelectTrigger className="mt-1">
                      <SelectValue placeholder="Select a category" />
                    </SelectTrigger>
                    <SelectContent>
                      {categories.map((category) => (
                        <SelectItem key={category.id} value={category.id}>
                          {category.icon} {category.name}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

<div>
                  <Label htmlFor="description">Description *</Label>
                  <Textarea
                    id="description"
                    value={formData.description}
                    onChange={(e) => handleInputChange("description", e.target.value)}
                    placeholder="Describe your service in detail..."
                    rows={8}
                    maxLength={1200}
                    className="mt-1"
                  />
                  <p className="text-sm text-gray-500 mt-1">{formData.description.length}/1200 characters</p>
                </div>

<div>
                  <Label>Search Tags * (up to 5)</Label>
                  <div className="flex gap-2 mt-1">
                    <Input
                      value={currentTag}
                      onChange={(e) => setCurrentTag(e.target.value)}
                      placeholder="Add a tag"
                      onKeyPress={(e) => e.key === "Enter" && (e.preventDefault(), addTag())}
                      disabled={formData.tags.length >= 5}
                    />
                    <Button type="button" onClick={addTag} disabled={formData.tags.length >= 5}>
                      Add
                    </Button>
                  </div>
                  <div className="flex flex-wrap gap-2 mt-2">
                    {formData.tags.map((tag) => (
                      <Badge key={tag} variant="secondary" className="flex items-center gap-1">
                        {tag}
                        <X className="h-3 w-3 cursor-pointer" onClick={() => removeTag(tag)} />
                      </Badge>
                    ))}
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

{/* Pricing Tab - Same as create page */}
          <TabsContent value="pricing" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Pricing Packages</CardTitle>
                <p className="text-sm text-gray-600">Update your service packages</p>
              </CardHeader>
              <CardContent>
                <Tabs defaultValue="basic" className="space-y-4">
                  <TabsList className="grid w-full grid-cols-3">
                    <TabsTrigger value="basic">Basic *</TabsTrigger>
                    <TabsTrigger value="standard">Standard</TabsTrigger>
                    <TabsTrigger value="premium">Premium</TabsTrigger>
                  </TabsList>

{/* Gallery Tab - Same as create page */}
          <TabsContent value="gallery" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Gig Gallery</CardTitle>
                <p className="text-sm text-gray-600">Update images and videos</p>
              </CardHeader>
              <CardContent className="space-y-6">
                <div>
                  <Label>Images (up to 5)</Label>
                  <div className="grid grid-cols-2 md:grid-cols-3 gap-4 mt-2">
                    {formData.images.map((image, index) => (
                      <div key={index} className="relative aspect-video bg-gray-100 rounded-lg overflow-hidden">
                        <img
                          src={image || "/placeholder.svg"}
                          alt={`Gig image ${index + 1}`}
                          className="w-full h-full object-cover"
                        />
                        <Button
                          type="button"
                          variant="destructive"
                          size="sm"
                          className="absolute top-2 right-2"
                          onClick={() => removeImage(image)}
                        >
                          <X className="h-4 w-4" />
                        </Button>
                      </div>
                    ))}
                    {formData.images.length < 5 && (
                      <button
                        type="button"
                        onClick={addImage}
                        className="aspect-video bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center hover:bg-gray-100 transition-colors"
                      >
                        <div className="text-center">
                          <Upload className="h-8 w-8 text-gray-400 mx-auto mb-2" />
                          <p className="text-sm text-gray-600">Add Image</p>
                        </div>
                      </button>
                    )}
                  </div>
                </div>

<div>
                  <Label htmlFor="video">Video URL (optional)</Label>
                  <Input
                    id="video"
                    value={formData.video_url}
                    onChange={(e) => handleInputChange("video_url", e.target.value)}
                    placeholder="https://youtube.com/watch?v=..."
                    className="mt-1"
                  />
                </div>
              </CardContent>
            </Card>
          </TabsContent>

{/* Settings Tab */}
          <TabsContent value="settings" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Gig Settings</CardTitle>
                <p className="text-sm text-gray-600">Manage your gig status and advanced settings</p>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="flex items-center justify-between p-4 border rounded-lg">
                  <div>
                    <h4 className="font-medium">Gig Status</h4>
                    <p className="text-sm text-gray-600">
                      {formData.status === "active"
                        ? "Your gig is live and accepting orders"
                        : "Your gig is paused and not accepting new orders"}
                    </p>
                  </div>
                  <Switch
                    checked={formData.status === "active"}
                    onCheckedChange={(checked) => handleInputChange("status", checked ? "active" : "paused")}
                  />
                </div>

<div className="space-y-4">
                  <h4 className="font-medium text-red-600">Danger Zone</h4>
                  <div className="border border-red-200 rounded-lg p-4">
                    <div className="flex items-center justify-between">
                      <div>
                        <h5 className="font-medium text-red-800">Delete Gig</h5>
                        <p className="text-sm text-red-600">
                          Permanently delete this gig. This action cannot be undone.
                        </p>
                      </div>
                      <Button type="button" variant="destructive" onClick={handleDelete}>
                        Delete Gig
                      </Button>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>

<div className="flex gap-4">
            <Link href={`/gigs/${gig.slug}`}>
              <Button type="button" variant="outline">
                View Gig
              </Button>
            </Link>
            <Button type="submit" disabled={loading}>
              <Save className="h-4 w-4 mr-2" />
              {loading ? "Saving..." : "Save Changes"}
            </Button>
          </div>
        </div>
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/gigs/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
import { Plus, Eye, Edit, Pause, Play, Trash2, MoreHorizontal } 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { getCurrentUser, getGigsBySellerId, type User, type Gig } from "@/lib/data"

export default function MyGigsPage() {
  const router = useRouter()
  const [user, setUser] = useState<User | null>(null)
  const [gigs, setGigs] = useState<Gig[]>([])
  const [filteredGigs, setFilteredGigs] = useState<Gig[]>([])
  const [searchQuery, setSearchQuery] = useState("")
  const [statusFilter, setStatusFilter] = useState("all")
  const [loading, setLoading] = useState(true)

useEffect(() => {
    const currentUser = getCurrentUser()
    if (!currentUser) {
      router.push("/auth/signin")
      return
    }

if (currentUser.user_type === "buyer") {
      router.push("/dashboard")
      return
    }

setUser(currentUser)
    const userGigs = getGigsBySellerId(currentUser.id)
    setGigs(userGigs)
    setFilteredGigs(userGigs)
    setLoading(false)
  }, [router])

useEffect(() => {
    let filtered = gigs

// Filter by search query
    if (searchQuery) {
      filtered = filtered.filter((gig) => gig.title.toLowerCase().includes(searchQuery.toLowerCase()))
    }

// Filter by status
    if (statusFilter !== "all") {
      filtered = filtered.filter((gig) => gig.status === statusFilter)
    }

setFilteredGigs(filtered)
  }, [gigs, searchQuery, statusFilter])

function handleStatusChange(gigId: string, newStatus: "active" | "paused") {
    // In a real app, this would update the database
    setGigs((prev) => prev.map((gig) => (gig.id === gigId ? { ...gig, status: newStatus } : gig)))
    alert(`Gig status updated to ${newStatus}! In a real app, this would update the database.`)
  }

function handleDelete(gigId: string) {
    if (confirm("Are you sure you want to delete this gig? This action cannot be undone.")) {
      // In a real app, this would delete from database
      setGigs((prev) => prev.filter((gig) => gig.id !== gigId))
      alert("Gig deleted successfully! In a real app, this would delete from the database.")
    }
  }

if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-green-600"></div>
      </div>
    )
  }

if (!user) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="text-center">
          <h1 className="text-2xl font-bold text-gray-900 mb-4">Please sign in</h1>
          <Link href="/auth/signin">
            <Button>Sign In</Button>
          </Link>
        </div>
      </div>
    )
  }

return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      {/* Header */}
      <div className="flex justify-between items-center mb-8">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">My Gigs</h1>
          <p className="text-gray-600 mt-2">Manage your services and track performance</p>
        </div>
        <Link href="/gigs/create">
          <Button>
            <Plus className="h-4 w-4 mr-2" />
            Create New Gig
          </Button>
        </Link>
      </div>

{/* Filters */}
      <Card className="mb-6">
        <CardContent className="p-4">
          <div className="flex flex-col sm:flex-row gap-4">
            <div className="flex-1">
              <Input
                placeholder="Search your gigs..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
            </div>
            <Select value={statusFilter} onValueChange={setStatusFilter}>
              <SelectTrigger className="w-full sm:w-48">
                <SelectValue placeholder="Filter by status" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Status</SelectItem>
                <SelectItem value="active">Active</SelectItem>
                <SelectItem value="paused">Paused</SelectItem>
                <SelectItem value="draft">Draft</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

{/* Stats */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <Card>
          <CardContent className="p-4">
            <div className="text-2xl font-bold text-green-600">{gigs.filter((g) => g.status === "active").length}</div>
            <p className="text-sm text-gray-600">Active Gigs</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="text-2xl font-bold text-blue-600">{gigs.reduce((sum, g) => sum + g.total_orders, 0)}</div>
            <p className="text-sm text-gray-600">Total Orders</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="text-2xl font-bold text-purple-600">{gigs.reduce((sum, g) => sum + g.views, 0)}</div>
            <p className="text-sm text-gray-600">Total Views</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="text-2xl font-bold text-orange-600">
              {gigs.length > 0 ? (gigs.reduce((sum, g) => sum + g.average_rating, 0) / gigs.length).toFixed(1) : "0.0"}
            </div>
            <p className="text-sm text-gray-600">Avg. Rating</p>
          </CardContent>
        </Card>
      </div>

{/* Gigs List */}
      {filteredGigs.length === 0 ? (
        <Card>
          <CardContent className="text-center py-12">
            <div className="text-gray-400 mb-4">
              <Plus className="h-16 w-16 mx-auto" />
            </div>
            <h3 className="text-lg font-medium text-gray-900 mb-2">
              {gigs.length === 0 ? "No gigs yet" : "No gigs match your filters"}
            </h3>
            <p className="text-gray-600 mb-4">
              {gigs.length === 0
                ? "Create your first gig to start selling your services"
                : "Try adjusting your search or filter criteria"}
            </p>
            {gigs.length === 0 && (
              <Link href="/gigs/create">
                <Button>Create Your First Gig</Button>
              </Link>
            )}
          </CardContent>
        </Card>
      ) : (
        <div className="space-y-4">
          {filteredGigs.map((gig) => (
            <Card key={gig.id}>
              <CardContent className="p-6">
                <div className="flex items-start justify-between">
                  <div className="flex-1">
                    <div className="flex items-center gap-3 mb-2">
                      <h3 className="text-lg font-semibold text-gray-900">{gig.title}</h3>
                      <Badge
                        variant={
                          gig.status === "active" ? "default" : gig.status === "paused" ? "secondary" : "outline"
                        }
                      >
                        {gig.status}
                      </Badge>
                      {gig.is_featured && <Badge variant="outline">Featured</Badge>}
                    </div>

<p className="text-gray-600 text-sm mb-3 line-clamp-2">{gig.description}</p>

<div className="flex items-center gap-6 text-sm text-gray-500">
                      <div className="flex items-center gap-1">
                        <Eye className="h-4 w-4" />
                        <span>{gig.views} views</span>
                      </div>
                      <div>
                        <span>{gig.total_orders} orders</span>
                      </div>
                      <div>
                        <span>{gig.orders_in_queue} in queue</span>
                      </div>
                      <div>
                        <span>★ {gig.average_rating > 0 ? gig.average_rating.toFixed(1) : "New"}</span>
                      </div>
                    </div>
                  </div>

<div className="flex items-center gap-4">
                    <div className="text-right">
                      <p className="text-lg font-bold text-gray-900">
                        ${gig.packages?.find((p) => p.package_type === "basic")?.price || 0}
                      </p>
                      <p className="text-sm text-gray-500">Starting at</p>
                    </div>

<DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="sm">
                          <MoreHorizontal className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuItem asChild>
                          <Link href={`/gigs/${gig.slug}`} className="flex items-center">
                            <Eye className="h-4 w-4 mr-2" />
                            View Gig
                          </Link>
                        </DropdownMenuItem>
                        <DropdownMenuItem asChild>
                          <Link href={`/gigs/${gig.slug}/edit`} className="flex items-center">
                            <Edit className="h-4 w-4 mr-2" />
                            Edit
                          </Link>
                        </DropdownMenuItem>
                        <DropdownMenuSeparator />
                        {gig.status === "active" ? (
                          <DropdownMenuItem onClick={() => handleStatusChange(gig.id, "paused")}>
                            <Pause className="h-4 w-4 mr-2" />
                            Pause Gig
                          </DropdownMenuItem>
                        ) : (
                          <DropdownMenuItem onClick={() => handleStatusChange(gig.id, "active")}>
                            <Play className="h-4 w-4 mr-2" />
                            Activate Gig
                          </DropdownMenuItem>
                        )}
                        <DropdownMenuSeparator />
                        <DropdownMenuItem
                          onClick={() => handleDelete(gig.id)}
                          className="text-red-600 focus:text-red-600"
                        >
                          <Trash2 className="h-4 w-4 mr-2" />
                          Delete
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/profile/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Camera, MapPin, Star, Calendar, Award, Edit2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Alert, AlertDescription } from "@/components/ui/alert"
import GigCard from "@/components/gig-card"
import { getCurrentUser, updateUser, getGigsBySellerId, type User } from "@/lib/data"

export default function ProfilePage() {
  const router = useRouter()
  const [user, setUser] = useState<User | null>(null)
  const [userGigs, setUserGigs] = useState([])
  const [isEditing, setIsEditing] = useState(false)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState("")
  const [formData, setFormData] = useState({
    full_name: "",
    bio: "",
    country: "",
    skills: [] as string[],
    languages: [] as string[],
  })

useEffect(() => {
    const currentUser = getCurrentUser()
    if (!currentUser) {
      router.push("/auth/signin")
      return
    }

setUser(currentUser)
    setFormData({
      full_name: currentUser.full_name || "",
      bio: currentUser.bio || "",
      country: currentUser.country || "",
      skills: currentUser.skills || [],
      languages: currentUser.languages || [],
    })

// Load user's gigs if they're a seller
    if (currentUser.user_type === "seller" || currentUser.user_type === "both") {
      const gigs = getGigsBySellerId(currentUser.id)
      setUserGigs(gigs)
    }
  }, [router])

function handleInputChange(field: string, value: any) {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

async function handleSave() {
    if (!user) return

setLoading(true)
    setError("")

try {
      await new Promise((resolve) => setTimeout(resolve, 1000))

const updatedUser = updateUser(user.id, formData)
      if (updatedUser) {
        setUser(updatedUser)
        setIsEditing(false)
        alert("Profile updated successfully!")
      }
    } catch (error) {
      setError("Failed to update profile")
    } finally {
      setLoading(false)
    }
  }

if (!user) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-green-600"></div>
      </div>
    )
  }

return (
    <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      {/* Profile Header */}
      <Card className="mb-8">
        <CardContent className="p-8">
          <div className="flex flex-col md:flex-row items-start gap-6">
            <div className="relative">
              <Avatar className="h-32 w-32">
                <AvatarImage src={user.avatar_url || "/placeholder.svg"} alt={user.full_name} />
                <AvatarFallback className="text-2xl">
                  {user.full_name?.charAt(0) || user.email?.charAt(0) || "U"}
                </AvatarFallback>
              </Avatar>
              {isEditing && (
                <Button size="sm" className="absolute -bottom-2 -right-2 rounded-full p-2">
                  <Camera className="h-4 w-4" />
                </Button>
              )}
            </div>

<div className="flex-1">
              <div className="flex items-center justify-between mb-4">
                <div>
                  <h1 className="text-3xl font-bold text-gray-900">{user.full_name || "User"}</h1>
                  <p className="text-gray-600">@{user.username || user.email}</p>
                </div>
                <Button onClick={() => (isEditing ? handleSave() : setIsEditing(true))} disabled={loading}>
                  {isEditing ? (
                    loading ? (
                      "Saving..."
                    ) : (
                      "Save Changes"
                    )
                  ) : (
                    <>
                      <Edit2 className="h-4 w-4 mr-2" />
                      Edit Profile
                    </>
                  )}
                </Button>
              </div>

<div className="flex flex-wrap gap-2 mb-4">
                <Badge variant="secondary" className="flex items-center gap-1">
                  <Award className="h-3 w-3" />
                  Level {user.seller_level}
                </Badge>
                {user.is_verified && <Badge variant="default">Verified</Badge>}
                <Badge variant="outline" className="flex items-center gap-1">
                  <Calendar className="h-3 w-3" />
                  Member since {new Date(user.created_at).getFullYear()}
                </Badge>
                {user.country && (
                  <Badge variant="outline" className="flex items-center gap-1">
                    <MapPin className="h-3 w-3" />
                    {user.country}
                  </Badge>
                )}
              </div>

<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
                <div>
                  <div className="text-2xl font-bold text-green-600">{user.total_orders}</div>
                  <p className="text-sm text-gray-600">Total Orders</p>
                </div>
                <div>
                  <div className="text-2xl font-bold text-blue-600">{user.total_sales}</div>
                  <p className="text-sm text-gray-600">Orders Completed</p>
                </div>
                <div>
                  <div className="flex items-center gap-1">
                    <Star className="h-5 w-5 fill-yellow-400 text-yellow-400" />
                    <span className="text-2xl font-bold">
                      {user.average_rating > 0 ? user.average_rating.toFixed(1) : "New"}
                    </span>
                  </div>
                  <p className="text-sm text-gray-600">Average Rating</p>
                </div>
                <div>
                  <div className="text-2xl font-bold text-purple-600">{user.response_time}h</div>
                  <p className="text-sm text-gray-600">Response Time</p>
                </div>
              </div>

<p className="text-gray-700 leading-relaxed">{user.bio || "No bio available"}</p>
            </div>
          </div>

{error && (
            <Alert className="mt-4" variant="destructive">
              <AlertDescription>{error}</AlertDescription>
            </Alert>
          )}
        </CardContent>
      </Card>

{/* Profile Content */}
      <Tabs defaultValue="about" className="space-y-6">
        <TabsList>
          <TabsTrigger value="about">About</TabsTrigger>
          {(user.user_type === "seller" || user.user_type === "both") && (
            <TabsTrigger value="gigs">My Gigs ({userGigs.length})</TabsTrigger>
          )}
          <TabsTrigger value="reviews">Reviews</TabsTrigger>
        </TabsList>

<TabsContent value="about" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>About Me</CardTitle>
            </CardHeader>
            <CardContent className="space-y-6">
              {isEditing ? (
                <div className="space-y-4">
                  <div>
                    <Label htmlFor="full_name">Full Name</Label>
                    <Input
                      id="full_name"
                      value={formData.full_name}
                      onChange={(e) => handleInputChange("full_name", e.target.value)}
                      placeholder="Enter your full name"
                    />
                  </div>

<div>
                    <Label htmlFor="bio">Bio</Label>
                    <Textarea
                      id="bio"
                      value={formData.bio}
                      onChange={(e) => handleInputChange("bio", e.target.value)}
                      placeholder="Tell us about yourself..."
                      rows={4}
                    />
                  </div>

<div>
                    <Label htmlFor="country">Country</Label>
                    <Select value={formData.country} onValueChange={(value) => handleInputChange("country", value)}>
                      <SelectTrigger>
                        <SelectValue placeholder="Select your country" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="United States">United States</SelectItem>
                        <SelectItem value="Canada">Canada</SelectItem>
                        <SelectItem value="United Kingdom">United Kingdom</SelectItem>
                        <SelectItem value="Australia">Australia</SelectItem>
                        <SelectItem value="Germany">Germany</SelectItem>
                        <SelectItem value="France">France</SelectItem>
                        <SelectItem value="Singapore">Singapore</SelectItem>
                        <SelectItem value="India">India</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

<div className="flex gap-4">
                    <Button onClick={() => setIsEditing(false)} variant="outline">
                      Cancel
                    </Button>
                    <Button onClick={handleSave} disabled={loading}>
                      {loading ? "Saving..." : "Save Changes"}
                    </Button>
                  </div>
                </div>
              ) : (
                <div className="space-y-4">
                  <div>
                    <h4 className="font-medium text-gray-900 mb-2">Biography</h4>
                    <p className="text-gray-700">{user.bio || "No biography available"}</p>
                  </div>

{user.skills && user.skills.length > 0 && (
                    <div>
                      <h4 className="font-medium text-gray-900 mb-2">Skills</h4>
                      <div className="flex flex-wrap gap-2">
                        {user.skills.map((skill, index) => (
                          <Badge key={index} variant="outline">
                            {skill}
                          </Badge>
                        ))}
                      </div>
                    </div>
                  )}

{user.languages && user.languages.length > 0 && (
                    <div>
                      <h4 className="font-medium text-gray-900 mb-2">Languages</h4>
                      <div className="flex flex-wrap gap-2">
                        {user.languages.map((language, index) => (
                          <Badge key={index} variant="outline">
                            {language}
                          </Badge>
                        ))}
                      </div>
                    </div>
                  )}
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>

{(user.user_type === "seller" || user.user_type === "both") && (
          <TabsContent value="gigs" className="space-y-6">
            {userGigs.length === 0 ? (
              <Card>
                <CardContent className="text-center py-12">
                  <h3 className="text-lg font-medium text-gray-900 mb-2">No gigs yet</h3>
                  <p className="text-gray-600 mb-4">Create your first gig to start selling</p>
                  <Button onClick={() => router.push("/gigs/create")}>Create Your First Gig</Button>
                </CardContent>
              </Card>
            ) : (
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                {userGigs.map((gig) => (
                  <GigCard key={gig.id} gig={gig} />
                ))}
              </div>
            )}
          </TabsContent>
        )}

<TabsContent value="reviews" className="space-y-6">
          <Card>
            <CardContent className="text-center py-12">
              <Star className="h-12 w-12 text-gray-400 mx-auto mb-4" />
              <h3 className="text-lg font-medium text-gray-900 mb-2">No reviews yet</h3>
              <p className="text-gray-600">Reviews from completed orders will appear here</p>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/orders/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
import { Clock, CheckCircle, XCircle, AlertCircle, MessageSquare, Eye } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { getCurrentUser, getOrdersByUserId, type User, type Order } from "@/lib/data"

export default function OrdersPage() {
  const router = useRouter()
  const [user, setUser] = useState<User | null>(null)
  const [orders, setOrders] = useState<Order[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    const currentUser = getCurrentUser()
    if (!currentUser) {
      router.push("/auth/signin")
      return
    }

setUser(currentUser)
    const userOrders = getOrdersByUserId(currentUser.id)
    setOrders(userOrders)
    setLoading(false)
  }, [router])

function getStatusIcon(status: string) {
    switch (status) {
      case "completed":
        return <CheckCircle className="h-5 w-5 text-green-600" />
      case "in_progress":
        return <Clock className="h-5 w-5 text-blue-600" />
      case "delivered":
        return <AlertCircle className="h-5 w-5 text-orange-600" />
      case "cancelled":
        return <XCircle className="h-5 w-5 text-red-600" />
      default:
        return <Clock className="h-5 w-5 text-gray-600" />
    }
  }

function getStatusColor(status: string) {
    switch (status) {
      case "completed":
        return "default"
      case "in_progress":
        return "secondary"
      case "delivered":
        return "outline"
      case "cancelled":
        return "destructive"
      default:
        return "secondary"
    }
  }

function filterOrdersByStatus(status: string) {
    switch (status) {
      case "active":
        return orders.filter((order) => ["pending", "in_progress", "delivered"].includes(order.status))
      case "completed":
        return orders.filter((order) => order.status === "completed")
      case "cancelled":
        return orders.filter((order) => order.status === "cancelled")
      default:
        return orders
    }
  }

const buyingOrders = orders.filter((order) => order.buyer_id === user?.id)
  const sellingOrders = orders.filter((order) => order.seller_id === user?.id)

return (
    <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-gray-900">My Orders</h1>
        <p className="text-gray-600 mt-2">Track and manage your orders</p>
      </div>

{/* Order Stats */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <Card>
          <CardContent className="p-4">
            <div className="text-2xl font-bold text-blue-600">{filterOrdersByStatus("active").length}</div>
            <p className="text-sm text-gray-600">Active Orders</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="text-2xl font-bold text-green-600">{filterOrdersByStatus("completed").length}</div>
            <p className="text-sm text-gray-600">Completed</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="text-2xl font-bold text-red-600">{filterOrdersByStatus("cancelled").length}</div>
            <p className="text-sm text-gray-600">Cancelled</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="text-2xl font-bold text-purple-600">
              $
              {orders
                .filter((o) => o.status === "completed")
                .reduce((sum, o) => sum + o.total_amount, 0)
                .toFixed(2)}
            </div>
            <p className="text-sm text-gray-600">Total Spent</p>
          </CardContent>
        </Card>
      </div>

<Tabs defaultValue="all" className="space-y-6">
        <TabsList>
          <TabsTrigger value="all">All Orders ({orders.length})</TabsTrigger>
          <TabsTrigger value="buying">Buying ({buyingOrders.length})</TabsTrigger>
          {(user.user_type === "seller" || user.user_type === "both") && (
            <TabsTrigger value="selling">Selling ({sellingOrders.length})</TabsTrigger>
          )}
        </TabsList>

{(user.user_type === "seller" || user.user_type === "both") && (
          <TabsContent value="selling" className="space-y-4">
            <OrdersList orders={sellingOrders} currentUser={user} />
          </TabsContent>
        )}
      </Tabs>
    </div>
  )
}

function OrdersList({ orders, currentUser }: { orders: Order[]; currentUser: User }) {
  if (orders.length === 0) {
    return (
      <Card>
        <CardContent className="text-center py-12">
          <Clock className="h-12 w-12 text-gray-400 mx-auto mb-4" />
          <h3 className="text-lg font-medium text-gray-900 mb-2">No orders found</h3>
          <p className="text-gray-600 mb-4">Your orders will appear here once you make a purchase</p>
          <Link href="/search">
            <Button>Browse Services</Button>
          </Link>
        </CardContent>
      </Card>
    )
  }

return (
    <div className="space-y-4">
      {orders.map((order) => {
        const isBuyer = order.buyer_id === currentUser.id
        const otherUser = isBuyer ? order.seller : order.buyer

return (
          <Card key={order.id}>
            <CardContent className="p-6">
              <div className="flex items-start justify-between">
                <div className="flex-1">
                  <div className="flex items-center gap-3 mb-2">
                    <h3 className="font-semibold text-lg">{order.gig?.title}</h3>
                    <Badge variant={getStatusColor(order.status) as any} className="flex items-center gap-1">
                      {getStatusIcon(order.status)}
                      {order.status.replace("_", " ")}
                    </Badge>
                  </div>

<div className="flex items-center gap-2 mb-3">
                    <Avatar className="h-6 w-6">
                      <AvatarImage src={otherUser?.avatar_url || "/placeholder.svg"} alt={otherUser?.full_name} />
                      <AvatarFallback className="text-xs">{otherUser?.full_name?.charAt(0) || "U"}</AvatarFallback>
                    </Avatar>
                    <span className="text-sm text-gray-600">
                      {isBuyer ? "Seller" : "Buyer"}: {otherUser?.full_name || "Unknown"}
                    </span>
                  </div>

<div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm text-gray-600">
                    <div>
                      <span className="font-medium">Order Date:</span>
                      <br />
                      {new Date(order.created_at).toLocaleDateString()}
                    </div>
                    <div>
                      <span className="font-medium">Package:</span>
                      <br />
                      {order.package?.title || "Unknown"}
                    </div>
                    {order.delivery_date && (
                      <div>
                        <span className="font-medium">Due Date:</span>
                        <br />
                        {new Date(order.delivery_date).toLocaleDateString()}
                      </div>
                    )}
                    {order.delivered_at && (
                      <div>
                        <span className="font-medium">Delivered:</span>
                        <br />
                        {new Date(order.delivered_at).toLocaleDateString()}
                      </div>
                    )}
                  </div>

{order.requirements && (
                    <div className="mt-3 p-3 bg-gray-50 rounded-lg">
                      <p className="text-sm text-gray-700">
                        <span className="font-medium">Requirements:</span> {order.requirements}
                      </p>
                    </div>
                  )}
                </div>

<div className="text-right ml-6">
                  <div className="text-2xl font-bold text-gray-900 mb-2">${order.total_amount.toFixed(2)}</div>

<div className="flex flex-col gap-2">
                    <Link href={`/orders/${order.id}`}>
                      <Button variant="outline" size="sm" className="w-full bg-transparent">
                        <Eye className="h-4 w-4 mr-2" />
                        View Details
                      </Button>
                    </Link>

<Button variant="outline" size="sm" className="w-full bg-transparent">
                      <MessageSquare className="h-4 w-4 mr-2" />
                      Message
                    </Button>

{order.status === "delivered" && isBuyer && (
                      <Button size="sm" className="w-full">
                        Accept Delivery
                      </Button>
                    )}
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        )
      })}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/orders/[id]/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { useParams, useRouter } from "next/navigation"
import Link from "next/link"
import { ArrowLeft, Clock, CheckCircle, XCircle, AlertCircle, MessageSquare, Download, Star } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Separator } from "@/components/ui/separator"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { getCurrentUser, getOrderById, type User, type Order } from "@/lib/data"

export default function OrderDetailPage() {
  const params = useParams()
  const router = useRouter()
  const [user, setUser] = useState<User | null>(null)
  const [order, setOrder] = useState<Order | null>(null)
  const [reviewText, setReviewText] = useState("")
  const [rating, setRating] = useState(5)
  const [loading, setLoading] = useState(true)

useEffect(() => {
    const currentUser = getCurrentUser()
    if (!currentUser) {
      router.push("/auth/signin")
      return
    }

setUser(currentUser)

const orderId = params.id as string
    const orderData = getOrderById(orderId)

if (!orderData) {
      router.push("/orders")
      return
    }

// Check if user has access to this order
    if (orderData.buyer_id !== currentUser.id && orderData.seller_id !== currentUser.id) {
      router.push("/orders")
      return
    }

setOrder(orderData)
    setLoading(false)
  }, [params.id, router])

function getStatusIcon(status: string) {
    switch (status) {
      case "completed":
        return <CheckCircle className="h-6 w-6 text-green-600" />
      case "in_progress":
        return <Clock className="h-6 w-6 text-blue-600" />
      case "delivered":
        return <AlertCircle className="h-6 w-6 text-orange-600" />
      case "cancelled":
        return <XCircle className="h-6 w-6 text-red-600" />
      default:
        return <Clock className="h-6 w-6 text-gray-600" />
    }
  }

function handleAcceptDelivery() {
    if (!order) return

// In a real app, this would update the database
    alert("Delivery accepted! In a real app, this would mark the order as completed and process payment.")
  }

function handleSubmitReview() {
    if (!order || !reviewText.trim()) return

// In a real app, this would save the review to the database
    alert(`Review submitted! Rating: ${rating}/5, Comment: ${reviewText}`)
    setReviewText("")
  }

function handleRequestRevision() {
    if (!order) return

// In a real app, this would request a revision
    alert("Revision requested! The seller will be notified.")
  }

if (!user || !order) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="text-center">
          <h1 className="text-2xl font-bold text-gray-900 mb-4">Order not found</h1>
          <Link href="/orders">
            <Button>Back to Orders</Button>
          </Link>
        </div>
      </div>
    )
  }

const isBuyer = order.buyer_id === user.id
  const otherUser = isBuyer ? order.seller : order.buyer

return (
    <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      {/* Header */}
      <div className="mb-8">
        <Link href="/orders" className="inline-flex items-center text-green-600 hover:text-green-700 mb-4">
          <ArrowLeft className="h-4 w-4 mr-2" />
          Back to Orders
        </Link>
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-3xl font-bold text-gray-900">Order Details</h1>
            <p className="text-gray-600 mt-1">Order #{order.id.slice(0, 8)}</p>
          </div>
          <div className="flex items-center gap-2">
            {getStatusIcon(order.status)}
            <Badge variant="outline" className="text-lg px-3 py-1">
              {order.status.replace("_", " ")}
            </Badge>
          </div>
        </div>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        {/* Main Content */}
        <div className="lg:col-span-2 space-y-6">
          {/* Order Status Timeline */}
          <Card>
            <CardHeader>
              <CardTitle>Order Progress</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex items-center gap-3">
                  <div className="h-8 w-8 rounded-full bg-green-100 flex items-center justify-center">
                    <CheckCircle className="h-5 w-5 text-green-600" />
                  </div>
                  <div className="flex-1">
                    <p className="font-medium">Order Placed</p>
                    <p className="text-sm text-gray-600">{new Date(order.created_at).toLocaleString()}</p>
                  </div>
                </div>

{order.delivery_date && (
                  <div className="flex items-center gap-3">
                    <div
                      className={`h-8 w-8 rounded-full flex items-center justify-center ${
                        ["in_progress", "delivered", "completed"].includes(order.status) ? "bg-blue-100" : "bg-gray-100"
                      }`}
                    >
                      <Clock
                        className={`h-5 w-5 ${
                          ["in_progress", "delivered", "completed"].includes(order.status)
                            ? "text-blue-600"
                            : "text-gray-400"
                        }`}
                      />
                    </div>
                    <div className="flex-1">
                      <p className="font-medium">Work in Progress</p>
                      <p className="text-sm text-gray-600">Due: {new Date(order.delivery_date).toLocaleString()}</p>
                    </div>
                  </div>
                )}

{order.delivered_at && (
                  <div className="flex items-center gap-3">
                    <div className="h-8 w-8 rounded-full bg-orange-100 flex items-center justify-center">
                      <AlertCircle className="h-5 w-5 text-orange-600" />
                    </div>
                    <div className="flex-1">
                      <p className="font-medium">Work Delivered</p>
                      <p className="text-sm text-gray-600">{new Date(order.delivered_at).toLocaleString()}</p>
                    </div>
                  </div>
                )}

{order.completed_at && (
                  <div className="flex items-center gap-3">
                    <div className="h-8 w-8 rounded-full bg-green-100 flex items-center justify-center">
                      <CheckCircle className="h-5 w-5 text-green-600" />
                    </div>
                    <div className="flex-1">
                      <p className="font-medium">Order Completed</p>
                      <p className="text-sm text-gray-600">{new Date(order.completed_at).toLocaleString()}</p>
                    </div>
                  </div>
                )}
              </div>
            </CardContent>
          </Card>

{/* Gig Details */}
          <Card>
            <CardHeader>
              <CardTitle>Service Details</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="flex gap-4">
                <img
                  src={order.gig?.images?.[0] || "/placeholder.svg?height=80&width=120"}
                  alt={order.gig?.title}
                  className="w-20 h-16 object-cover rounded-lg"
                />
                <div className="flex-1">
                  <h3 className="font-semibold text-lg mb-1">{order.gig?.title}</h3>
                  <p className="text-gray-600 mb-2">{order.package?.title}</p>
                  <p className="text-sm text-gray-500">{order.package?.description}</p>
                </div>
              </div>

{order.requirements && (
                <div className="mt-4 p-4 bg-gray-50 rounded-lg">
                  <h4 className="font-medium mb-2">Requirements</h4>
                  <p className="text-gray-700">{order.requirements}</p>
                </div>
              )}
            </CardContent>
          </Card>

{/* Deliverables */}
          {order.status === "delivered" && (
            <Card>
              <CardHeader>
                <CardTitle>Deliverables</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <Alert>
                    <AlertCircle className="h-4 w-4" />
                    <AlertDescription>
                      The seller has delivered the work. Please review and accept or request revisions.
                    </AlertDescription>
                  </Alert>

<div className="flex items-center gap-4 p-4 border rounded-lg">
                    <Download className="h-8 w-8 text-gray-400" />
                    <div className="flex-1">
                      <p className="font-medium">Final Deliverable.zip</p>
                      <p className="text-sm text-gray-600">Delivered work files</p>
                    </div>
                    <Button variant="outline" size="sm">
                      Download
                    </Button>
                  </div>

{isBuyer && (
                    <div className="flex gap-2">
                      <Button onClick={handleAcceptDelivery} className="flex-1">
                        Accept Delivery
                      </Button>
                      <Button onClick={handleRequestRevision} variant="outline" className="flex-1 bg-transparent">
                        Request Revision
                      </Button>
                    </div>
                  )}
                </div>
              </CardContent>
            </Card>
          )}

{/* Review Section */}
          {order.status === "completed" && isBuyer && (
            <Card>
              <CardHeader>
                <CardTitle>Leave a Review</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div>
                  <Label>Rating</Label>
                  <div className="flex gap-1 mt-1">
                    {[1, 2, 3, 4, 5].map((star) => (
                      <button key={star} type="button" onClick={() => setRating(star)} className="p-1">
                        <Star
                          className={`h-6 w-6 ${star <= rating ? "fill-yellow-400 text-yellow-400" : "text-gray-300"}`}
                        />
                      </button>
                    ))}
                  </div>
                </div>

<div>
                  <Label htmlFor="review">Review (optional)</Label>
                  <Textarea
                    id="review"
                    value={reviewText}
                    onChange={(e) => setReviewText(e.target.value)}
                    placeholder="Share your experience with this seller..."
                    rows={4}
                  />
                </div>

<Button onClick={handleSubmitReview} disabled={!reviewText.trim()}>
                  Submit Review
                </Button>
              </CardContent>
            </Card>
          )}
        </div>

{/* Sidebar */}
        <div className="space-y-6">
          {/* Order Summary */}
          <Card>
            <CardHeader>
              <CardTitle>Order Summary</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex justify-between">
                <span>Package Price</span>
                <span>${order.total_amount.toFixed(2)}</span>
              </div>
              <Separator />
              <div className="flex justify-between font-semibold">
                <span>Total</span>
                <span>${order.total_amount.toFixed(2)}</span>
              </div>
            </CardContent>
          </Card>

{/* Other User Info */}
          <Card>
            <CardHeader>
              <CardTitle>{isBuyer ? "Seller" : "Buyer"} Information</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="flex items-center gap-3 mb-4">
                <Avatar className="h-12 w-12">
                  <AvatarImage src={otherUser?.avatar_url || "/placeholder.svg"} alt={otherUser?.full_name} />
                  <AvatarFallback>{otherUser?.full_name?.charAt(0) || "U"}</AvatarFallback>
                </Avatar>
                <div>
                  <h3 className="font-semibold">{otherUser?.full_name || "Unknown User"}</h3>
                  <p className="text-sm text-gray-600">@{otherUser?.username || "unknown"}</p>
                </div>
              </div>

{isBuyer && otherUser && (
                <div className="space-y-2 text-sm text-gray-600">
                  <div className="flex justify-between">
                    <span>Response Time:</span>
                    <span>{otherUser.response_time}h</span>
                  </div>
                  <div className="flex justify-between">
                    <span>Rating:</span>
                    <span className="flex items-center gap-1">
                      <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                      {otherUser.average_rating > 0 ? otherUser.average_rating.toFixed(1) : "New"}
                    </span>
                  </div>
                  <div className="flex justify-between">
                    <span>Orders Completed:</span>
                    <span>{otherUser.total_sales}</span>
                  </div>
                </div>
              )}

<Button className="w-full mt-4">
                <MessageSquare className="h-4 w-4 mr-2" />
                Contact {isBuyer ? "Seller" : "Buyer"}
              </Button>
            </CardContent>
          </Card>

{/* Package Details */}
          {order.package && (
            <Card>
              <CardHeader>
                <CardTitle>Package Details</CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                <div className="flex justify-between text-sm">
                  <span>Delivery Time:</span>
                  <span>{order.package.delivery_days} days</span>
                </div>
                <div className="flex justify-between text-sm">
                  <span>Revisions:</span>
                  <span>{order.package.revisions === 999 ? "Unlimited" : order.package.revisions}</span>
                </div>
                {order.package.features && order.package.features.length > 0 && (
                  <div className="space-y-2">
                    <p className="text-sm font-medium">Includes:</p>
                    <ul className="space-y-1">
                      {order.package.features.map((feature, index) => (
                        <li key={index} className="text-sm text-gray-600 flex items-center gap-2">
                          <CheckCircle className="h-3 w-3 text-green-600" />
                          {feature}
                        </li>
                      ))}
                    </ul>
                  </div>
                )}
              </CardContent>
            </Card>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/messages/page.tsx"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
import { MessageSquare, Search, Send, Paperclip, MoreVertical } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent } from "@/components/ui/card"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Textarea } from "@/components/ui/textarea"
import { ScrollArea } from "@/components/ui/scroll-area"
import { getCurrentUser, type User } from "@/lib/data"

interface Message {
  id: string
  sender_id: string
  content: string
  timestamp: string
  is_read: boolean
}

interface Conversation {
  id: string
  other_user: {
    id: string
    name: string
    avatar: string
    is_online: boolean
  }
  last_message: string
  last_message_time: string
  unread_count: number
  messages: Message[]
}

// Mock conversations data
const mockConversations: Conversation[] = [
  {
    id: "1",
    other_user: {
      id: "2",
      name: "Sarah Johnson",
      avatar: "/placeholder.svg?height=40&width=40",
      is_online: true,
    },
    last_message: "I've completed the logo design. Please take a look!",
    last_message_time: "2 min ago",
    unread_count: 1,
    messages: [
      {
        id: "1",
        sender_id: "2",
        content:
          "Hi! I'm excited to work on your logo design project. Could you please share some more details about your brand?",
        timestamp: "10:30 AM",
        is_read: true,
      },
      {
        id: "2",
        sender_id: "1",
        content:
          "We're a tech startup focused on AI solutions. We want something modern and professional. Blue and white color scheme would be perfect.",
        timestamp: "10:35 AM",
        is_read: true,
      },
      {
        id: "3",
        sender_id: "2",
        content:
          "Perfect! That gives me a great starting point. I'll have some initial concepts ready by tomorrow. Is there any specific style you prefer - minimalist, bold, or something else?",
        timestamp: "10:37 AM",
        is_read: true,
      },
      {
        id: "4",
        sender_id: "1",
        content: "Minimalist would be great! Looking forward to seeing your concepts.",
        timestamp: "10:40 AM",
        is_read: true,
      },
      {
        id: "5",
        sender_id: "2",
        content: "I've completed the logo design. Please take a look!",
        timestamp: "Just now",
        is_read: false,
      },
    ],
  },
  {
    id: "2",
    other_user: {
      id: "3",
      name: "Mike Chen",
      avatar: "/placeholder.svg?height=40&width=40",
      is_online: false,
    },
    last_message: "Thank you for the detailed requirements!",
    last_message_time: "1 hour ago",
    unread_count: 0,
    messages: [
      {
        id: "1",
        sender_id: "3",
        content:
          "Hello! I'm ready to start working on your blog posts. Could you share the topics you'd like me to cover?",
        timestamp: "9:00 AM",
        is_read: true,
      },
      {
        id: "2",
        sender_id: "1",
        content:
          "Hi Mike! I need 3 blog posts about digital marketing trends, SEO best practices, and social media strategies. Each should be around 1000 words.",
        timestamp: "9:15 AM",
        is_read: true,
      },
      {
        id: "3",
        sender_id: "3",
        content: "Thank you for the detailed requirements!",
        timestamp: "9:20 AM",
        is_read: true,
      },
    ],
  },
]

export default function MessagesPage() {
  const router = useRouter()
  const [user, setUser] = useState<User | null>(null)
  const [conversations, setConversations] = useState<Conversation[]>(mockConversations)
  const [selectedConversation, setSelectedConversation] = useState<Conversation | null>(null)
  const [newMessage, setNewMessage] = useState("")
  const [searchQuery, setSearchQuery] = useState("")

useEffect(() => {
    const currentUser = getCurrentUser()
    if (!currentUser) {
      router.push("/auth/signin")
      return
    }

setUser(currentUser)

// Mark first conversation as selected by default
    if (conversations.length > 0) {
      setSelectedConversation(conversations[0])
    }
  }, [router])

function handleSendMessage() {
    if (!newMessage.trim() || !selectedConversation || !user) return

const message: Message = {
      id: Date.now().toString(),
      sender_id: user.id,
      content: newMessage.trim(),
      timestamp: "Just now",
      is_read: true,
    }

// Update selected conversation
    const updatedConversation = {
      ...selectedConversation,
      messages: [...selectedConversation.messages, message],
      last_message: newMessage.trim(),
      last_message_time: "Just now",
    }

// Update conversations list
    setConversations((prev) => prev.map((conv) => (conv.id === selectedConversation.id ? updatedConversation : conv)))

setSelectedConversation(updatedConversation)
    setNewMessage("")
  }

function handleKeyPress(e: React.KeyboardEvent) {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault()
      handleSendMessage()
    }
  }

const filteredConversations = conversations.filter((conv) =>
    conv.other_user.name.toLowerCase().includes(searchQuery.toLowerCase()),
  )

return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <div className="mb-6">
        <h1 className="text-3xl font-bold text-gray-900">Messages</h1>
        <p className="text-gray-600 mt-2">Communicate with buyers and sellers</p>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 h-[600px]">
        {/* Conversations List */}
        <Card className="lg:col-span-1">
          <CardContent className="p-0">
            <div className="p-4 border-b">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                <Input
                  placeholder="Search conversations..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-10"
                />
              </div>
            </div>

<ScrollArea className="h-[500px]">
              {filteredConversations.length === 0 ? (
                <div className="text-center py-12">
                  <MessageSquare className="h-12 w-12 text-gray-400 mx-auto mb-4" />
                  <h3 className="text-lg font-medium text-gray-900 mb-2">No conversations</h3>
                  <p className="text-gray-600 mb-4">Start a conversation by contacting a seller</p>
                  <Link href="/search">
                    <Button>Browse Services</Button>
                  </Link>
                </div>
              ) : (
                <div className="divide-y">
                  {filteredConversations.map((conversation) => (
                    <button
                      key={conversation.id}
                      onClick={() => setSelectedConversation(conversation)}
                      className={`w-full p-4 text-left hover:bg-gray-50 transition-colors ${
                        selectedConversation?.id === conversation.id ? "bg-blue-50 border-r-2 border-blue-500" : ""
                      }`}
                    >
                      <div className="flex items-start gap-3">
                        <div className="relative">
                          <Avatar className="h-10 w-10">
                            <AvatarImage
                              src={conversation.other_user.avatar || "/placeholder.svg"}
                              alt={conversation.other_user.name}
                            />
                            <AvatarFallback>{conversation.other_user.name.charAt(0)}</AvatarFallback>
                          </Avatar>
                          {conversation.other_user.is_online && (
                            <div className="absolute -bottom-1 -right-1 h-3 w-3 bg-green-500 rounded-full border-2 border-white"></div>
                          )}
                        </div>

<div className="flex-1 min-w-0">
                          <div className="flex items-center justify-between mb-1">
                            <h3 className="font-medium text-gray-900 truncate">{conversation.other_user.name}</h3>
                            <span className="text-xs text-gray-500">{conversation.last_message_time}</span>
                          </div>
                          <p className="text-sm text-gray-600 truncate">{conversation.last_message}</p>
                        </div>

{conversation.unread_count > 0 && (
                          <Badge variant="default" className="ml-2">
                            {conversation.unread_count}
                          </Badge>
                        )}
                      </div>
                    </button>
                  ))}
                </div>
              )}
            </ScrollArea>
          </CardContent>
        </Card>

{/* Chat Area */}
        <Card className="lg:col-span-2">
          <CardContent className="p-0 h-full flex flex-col">
            {selectedConversation ? (
              <>
                {/* Chat Header */}
                <div className="p-4 border-b flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <div className="relative">
                      <Avatar className="h-10 w-10">
                        <AvatarImage
                          src={selectedConversation.other_user.avatar || "/placeholder.svg"}
                          alt={selectedConversation.other_user.name}
                        />
                        <AvatarFallback>{selectedConversation.other_user.name.charAt(0)}</AvatarFallback>
                      </Avatar>
                      {selectedConversation.other_user.is_online && (
                        <div className="absolute -bottom-1 -right-1 h-3 w-3 bg-green-500 rounded-full border-2 border-white"></div>
                      )}
                    </div>
                    <div>
                      <h3 className="font-semibold text-gray-900">{selectedConversation.other_user.name}</h3>
                      <p className="text-sm text-gray-600">
                        {selectedConversation.other_user.is_online ? "Online" : "Offline"}
                      </p>
                    </div>
                  </div>
                  <Button variant="ghost" size="sm">
                    <MoreVertical className="h-4 w-4" />
                  </Button>
                </div>

{/* Messages */}
                <ScrollArea className="flex-1 p-4">
                  <div className="space-y-4">
                    {selectedConversation.messages.map((message) => (
                      <div
                        key={message.id}
                        className={`flex ${message.sender_id === user.id ? "justify-end" : "justify-start"}`}
                      >
                        <div
                          className={`max-w-xs lg:max-w-md px-4 py-2 rounded-lg ${
                            message.sender_id === user.id ? "bg-blue-600 text-white" : "bg-gray-100 text-gray-900"
                          }`}
                        >
                          <p className="text-sm">{message.content}</p>
                          <p
                            className={`text-xs mt-1 ${
                              message.sender_id === user.id ? "text-blue-200" : "text-gray-500"
                            }`}
                          >
                            {message.timestamp}
                          </p>
                        </div>
                      </div>
                    ))}
                  </div>
                </ScrollArea>

{/* Message Input */}
                <div className="p-4 border-t">
                  <div className="flex gap-2">
                    <Button variant="ghost" size="sm">
                      <Paperclip className="h-4 w-4" />
                    </Button>
                    <Textarea
                      value={newMessage}
                      onChange={(e) => setNewMessage(e.target.value)}
                      onKeyPress={handleKeyPress}
                      placeholder="Type your message..."
                      className="flex-1 min-h-[40px] max-h-[120px]"
                      rows={1}
                    />
                    <Button onClick={handleSendMessage} disabled={!newMessage.trim()} size="sm">
                      <Send className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
              </>
            ) : (
              <div className="flex-1 flex items-center justify-center">
                <div className="text-center">
                  <MessageSquare className="h-16 w-16 text-gray-400 mx-auto mb-4" />
                  <h3 className="text-lg font-medium text-gray-900 mb-2">Select a conversation</h3>
                  <p className="text-gray-600">Choose a conversation to start messaging</p>
                </div>
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/messages/loading.tsx" isFixed="true"
export default function Loading() {
  return null
}</article></body></html>