ab:I[903690,["/chat-static/_next/static/immutable/chunks/25sy-cznq5gtk.js","/chat-static/_next/static/immutable/chunks/17kl369b79nmd.js","/chat-static/_next/static/immutable/chunks/3ipxm38dyyb9q.js","/chat-static/_next/static/immutable/chunks/25oa2-cd4babd.js","/chat-static/_next/static/immutable/chunks/1di_td8luy3gw.js","/chat-static/_next/static/immutable/chunks/0_zevym5bobxk.js","/chat-static/_next/static/immutable/chunks/0pa2o-879tgyz.js","/chat-static/_next/static/immutable/chunks/2iyogqj39terz.js","/chat-static/_next/static/immutable/chunks/0vmwjdmzo33vb.js","/chat-static/_next/static/immutable/chunks/3xsyi84us226z.js","/chat-static/_next/static/immutable/chunks/3sd5co-q3j6ji.js","/chat-static/_next/static/immutable/chunks/3b6rwng7jzw37.js","/chat-static/_next/static/immutable/chunks/454vo2w1h6da9.js","/chat-static/_next/static/immutable/chunks/0kpqqt3b70onu.js","/chat-static/_next/static/immutable/chunks/0i48amtc28pqy.js","/chat-static/_next/static/immutable/chunks/3q9baiox9oh9u.js","/chat-static/_next/static/immutable/chunks/17xddrdopbp9_.js","/chat-static/_next/static/immutable/chunks/2dh86ziq4bpa7.js","/chat-static/_next/static/immutable/chunks/33addp8wpisll.js","/chat-static/_next/static/immutable/chunks/0avdeadirr7ac.js","/chat-static/_next/static/immutable/chunks/421be_5xz_yit.js","/chat-static/_next/static/immutable/chunks/2gn4nsrh2z77a.js","/chat-static/_next/static/immutable/chunks/0nc47r7g497qp.js","/chat-static/_next/static/immutable/chunks/1o9d1-74u-xr7.js","/chat-static/_next/static/immutable/chunks/3svgy0zb87s57.js","/chat-static/_next/static/immutable/chunks/0dt5xmjm5355d.js","/chat-static/_next/static/immutable/chunks/1c3kqwyzatdha.js","/chat-static/_next/static/immutable/chunks/1afvjiubxi20p.js","/chat-static/_next/static/immutable/chunks/1efvyp5ys0qa_.js","/chat-static/_next/static/immutable/chunks/16p-wd29zwtcb.js","/chat-static/_next/static/immutable/chunks/19etlne9fpz8c.js","/chat-static/_next/static/immutable/chunks/25vs-yagbngt2.js","/chat-static/_next/static/immutable/chunks/3uz_m6bi6f-lg.js","/chat-static/_next/static/immutable/chunks/1ukuldvl_7ewm.js","/chat-static/_next/static/immutable/chunks/1j2pv-n41aow7.js","/chat-static/_next/static/immutable/chunks/3all0vilnb92m.js","/chat-static/_next/static/immutable/chunks/0v_w5d6uj-d1p.js","/chat-static/_next/static/immutable/chunks/216nuiz0k8ips.js","/chat-static/_next/static/immutable/chunks/2ktsmvnrpabs_.js","/chat-static/_next/static/immutable/chunks/29mrkgtzx_4wp.js","/chat-static/_next/static/immutable/chunks/04gkop25t1q10.js","/chat-static/_next/static/immutable/chunks/0i0qxxzro3chc.js","/chat-static/_next/static/immutable/chunks/3ozgp_g2qonep.js","/chat-static/_next/static/immutable/chunks/0wa14r29vk-50.js","/chat-static/_next/static/immutable/chunks/1_2vxq9xb046f.js","/chat-static/_next/static/immutable/chunks/2x0m84hlfqnp9.js","/chat-static/_next/static/immutable/chunks/1erht42aiso18.js","/chat-static/_next/static/immutable/chunks/33yhsbwlge-yd.js","/chat-static/_next/static/immutable/chunks/34-_dn6funmns.js","/chat-static/_next/static/immutable/chunks/30mwco_q1oioj.js","/chat-static/_next/static/immutable/chunks/2l-dnyr8c1i8w.js","/chat-static/_next/static/immutable/chunks/0b9ex5d30islg.js","/chat-static/_next/static/immutable/chunks/0aktln77chfqc.js","/chat-static/_next/static/immutable/chunks/0h3zc71pdnjom.js","/chat-static/_next/static/immutable/chunks/1cmyat5y1o107.js"],"ExplicitChatIdProvider"] ac:I[838238,["/chat-static/_next/static/immutable/chunks/25sy-cznq5gtk.js","/chat-static/_next/static/immutable/chunks/17kl369b79nmd.js","/chat-static/_next/static/immutable/chunks/3ipxm38dyyb9q.js","/chat-static/_next/static/immutable/chunks/25oa2-cd4babd.js","/chat-static/_next/static/immutable/chunks/1di_td8luy3gw.js","/chat-static/_next/static/immutable/chunks/0_zevym5bobxk.js","/chat-static/_next/static/immutable/chunks/0pa2o-879tgyz.js","/chat-static/_next/static/immutable/chunks/2iyogqj39terz.js","/chat-static/_next/static/immutable/chunks/0vmwjdmzo33vb.js","/chat-static/_next/static/immutable/chunks/3xsyi84us226z.js","/chat-static/_next/static/immutable/chunks/3sd5co-q3j6ji.js","/chat-static/_next/static/immutable/chunks/3b6rwng7jzw37.js","/chat-static/_next/static/immutable/chunks/454vo2w1h6da9.js","/chat-static/_next/static/immutable/chunks/0kpqqt3b70onu.js","/chat-static/_next/static/immutable/chunks/0i48amtc28pqy.js","/chat-static/_next/static/immutable/chunks/3q9baiox9oh9u.js","/chat-static/_next/static/immutable/chunks/17xddrdopbp9_.js","/chat-static/_next/static/immutable/chunks/2dh86ziq4bpa7.js","/chat-static/_next/static/immutable/chunks/33addp8wpisll.js","/chat-static/_next/static/immutable/chunks/0avdeadirr7ac.js","/chat-static/_next/static/immutable/chunks/421be_5xz_yit.js","/chat-static/_next/static/immutable/chunks/2gn4nsrh2z77a.js","/chat-static/_next/static/immutable/chunks/0nc47r7g497qp.js","/chat-static/_next/static/immutable/chunks/1o9d1-74u-xr7.js","/chat-static/_next/static/immutable/chunks/3svgy0zb87s57.js","/chat-static/_next/static/immutable/chunks/0dt5xmjm5355d.js","/chat-static/_next/static/immutable/chunks/1c3kqwyzatdha.js","/chat-static/_next/static/immutable/chunks/1afvjiubxi20p.js","/chat-static/_next/static/immutable/chunks/1efvyp5ys0qa_.js","/chat-static/_next/static/immutable/chunks/16p-wd29zwtcb.js","/chat-static/_next/static/immutable/chunks/19etlne9fpz8c.js","/chat-static/_next/static/immutable/chunks/25vs-yagbngt2.js","/chat-static/_next/static/immutable/chunks/3uz_m6bi6f-lg.js","/chat-static/_next/static/immutable/chunks/1ukuldvl_7ewm.js","/chat-static/_next/static/immutable/chunks/1j2pv-n41aow7.js","/chat-static/_next/static/immutable/chunks/3all0vilnb92m.js","/chat-static/_next/static/immutable/chunks/0v_w5d6uj-d1p.js","/chat-static/_next/static/immutable/chunks/216nuiz0k8ips.js","/chat-static/_next/static/immutable/chunks/2ktsmvnrpabs_.js","/chat-static/_next/static/immutable/chunks/29mrkgtzx_4wp.js","/chat-static/_next/static/immutable/chunks/04gkop25t1q10.js","/chat-static/_next/static/immutable/chunks/0i0qxxzro3chc.js","/chat-static/_next/static/immutable/chunks/3ozgp_g2qonep.js","/chat-static/_next/static/immutable/chunks/0wa14r29vk-50.js","/chat-static/_next/static/immutable/chunks/1_2vxq9xb046f.js","/chat-static/_next/static/immutable/chunks/2x0m84hlfqnp9.js","/chat-static/_next/static/immutable/chunks/1erht42aiso18.js","/chat-static/_next/static/immutable/chunks/33yhsbwlge-yd.js","/chat-static/_next/static/immutable/chunks/34-_dn6funmns.js","/chat-static/_next/static/immutable/chunks/30mwco_q1oioj.js","/chat-static/_next/static/immutable/chunks/2l-dnyr8c1i8w.js","/chat-static/_next/static/immutable/chunks/0b9ex5d30islg.js","/chat-static/_next/static/immutable/chunks/0aktln77chfqc.js","/chat-static/_next/static/immutable/chunks/0h3zc71pdnjom.js","/chat-static/_next/static/immutable/chunks/1cmyat5y1o107.js"],"SWRDataProvider"] ae:[] af:[["b_2Y7kZK8aUy5",null],["b_x0Ij6PrcxCP",null],["b_Z0Cn9dWMFuP",null],["b_X9uT95OeZck",null]] b0:[["b_2Y7kZK8aUy5",{"templateVersionId":null,"templateCanonId":null}],["b_x0Ij6PrcxCP",{"templateVersionId":null,"templateCanonId":null}],["b_Z0Cn9dWMFuP",{"templateVersionId":null,"templateCanonId":null}],["b_X9uT95OeZck",{"templateVersionId":null,"templateCanonId":null}]] b1:[["7QrWlAFMOVi","$D2025-09-08T08:14:39.546Z"],["b_dFl4QcoCET1","$D2025-09-08T08:17:28.603Z"],["b_qFJDNZ4RbFf","$D2025-09-08T08:28:36.574Z"],["b_eiYYV5TAHba","$D2025-09-08T08:54:49.563Z"],["b_lY5pxkUjdbl","$D2025-09-08T09:06:58.306Z"],["b_YvPSfEuWiPD","$D2025-09-08T09:16:25.966Z"],["b_QBskCnz5x96","$D2025-09-08T09:19:11.918Z"],["b_IWMlIXDcWrW","$D2025-09-08T09:23:41.106Z"],["b_pIaBeHBB7g4","$D2025-09-08T09:33:32.195Z"],["b_MckJVyykHCd","$D2025-09-08T09:47:36.048Z"],["b_Q3vYkgzxeU4","$D2025-09-08T09:49:56.794Z"],["b_13LDmjk2Z7V","$D2025-09-08T09:51:12.160Z"],["b_1fvwCZ87sNv","$D2025-09-08T09:52:59.036Z"],["b_wziiZpddF3i","$D2025-09-08T09:56:06.189Z"],["b_hJz17FT0PkE","$D2025-09-08T10:01:32.104Z"],["b_0pXg47jevAQ","$D2025-09-08T10:03:55.730Z"],["b_I8fJXrTKMvP","$D2025-09-08T10:07:15.986Z"],["b_2Y7kZK8aUy5","$D2025-09-08T10:27:31.826Z"],["b_x0Ij6PrcxCP","$D2025-09-08T10:37:21.229Z"],["b_Z0Cn9dWMFuP","$D2025-09-08T11:10:00.253Z"],["b_X9uT95OeZck","$D2025-09-08T11:11:11.201Z"]] b2:[["b_2Y7kZK8aUy5",false],["b_x0Ij6PrcxCP",false],["b_Z0Cn9dWMFuP",false],["b_X9uT95OeZck",false]] b3:[["b_2Y7kZK8aUy5","$undefined"],["b_x0Ij6PrcxCP","$undefined"],["b_Z0Cn9dWMFuP","$undefined"],["b_X9uT95OeZck",{"git":{"ref":"main","sha":"bb43a3f18152ab1d5fedf1f95480bc9bd085e168","type":"github","repoId":0,"repoName":"v0-1-XO2a0zucFDkVsawyR0waSmDH-mhh3aIByDaU","ownerName":"v0-git-s3-storage","commitMessage":"Initial commit from v0"}}]] b4:[["b_2Y7kZK8aUy5",null],["b_x0Ij6PrcxCP",null],["b_Z0Cn9dWMFuP",null],["b_X9uT95OeZck",null]] b5:[["b_2Y7kZK8aUy5",true],["b_x0Ij6PrcxCP",true],["b_Z0Cn9dWMFuP",true],["b_X9uT95OeZck",true]] b6:[["b_2Y7kZK8aUy5",true],["b_x0Ij6PrcxCP",true],["b_Z0Cn9dWMFuP",true],["b_X9uT95OeZck",true]] b7:[] b8:T51a,Now I can see the root cause of the loading issue. The `MarketplaceProvider` has a complex initialization process that involves: - Global state management with `globalInitializationPromise` and `globalInitialized` - Heavy localStorage operations including cleaning blob URLs - Initializing categories and services data - Multiple async operations that can get stuck The main issues I can identify: - Complex Global State: The provider uses global variables that can cause race conditions - Heavy Initialization: The initialization process does a lot of work including localStorage cleanup, category initialization, and sample data setup - Async Chain: Multiple async operations that depend on each other - Error Handling: If any part of the initialization fails, it might not properly set the loading states The `/marketplace/new` page is stuck in loading because `contextLoading` is true or `isInitialized` is false, and the MarketplaceProvider's initialization is not completing properly. I need to simplify the MarketplaceProvider to make it more reliable and faster. The key changes should be: - Simplify the initialization logic - Remove the complex global state management - Add better error handling - Make the initialization more resilient - Add timeout mechanisms to prevent infinite loadingb9:T481,The user is showing me a screenshot of the admin marketplace categories page (/admin/marketplace-categories). They're asking about: - Why it's showing old data - they mentioned they deleted a service but it's still showing - Why it shows "micro category" when they expected something else - Why it shows 10 categories when they expected 13 The screenshot shows: - Admin panel navigation on the left - Marketplace Categories management interface - Graphics & Design category expanded showing Logo Design subcategory - Services under Logo Design including "Logo Design" ($150) and "Logo Redesign" ($120) - Other collapsed categories like "Brand Identity & Guidelines" and "Web & App Design" This appears to be a data caching/refresh issue where the admin interface is not showing the most current data from the database. The user expects to see updated data but is seeing stale information. I should: - Read the debug logs to understand any errors - Check the marketplace categories API route to see if there are caching issues - Look at the admin marketplace categories page to see how data is being fetched - Fix any caching or data refresh issuesba:T566,Now I can see the root cause of the issue. Looking at the debug logs and the code: - Cache Issue: The debug logs show "Categories loaded from Redis cache" and "Admin: Loaded categories: 10", but the user expects 13 categories and mentioned they deleted a service that's still showing. - Stale Data: The Redis cache has a 1-hour TTL (3600 seconds), and the admin interface is serving cached data instead of fresh data after changes. - Cache Invalidation Problem: When the user deletes or modifies categories/services through the admin interface, the cache is not being properly invalidated. - API Route Issues: The API route has a hardcoded default of 10 categories, but the user expects 13. The cache is serving this hardcoded data instead of the user's actual data. The main issues are: - The `handleRefresh` function calls `CategoriesAPI.clearCache()` but this might not be working properly - The `saveCategories` function updates categories but doesn't invalidate the cache properly - The API route is serving hardcoded default data instead of user's actual data - The cache invalidation after CRUD operations is not working I need to: - Fix the cache invalidation in the admin page - Make sure the API properly clears cache after updates - Add better cache busting mechanisms - Ensure the refresh button actually works - Add debugging to see what's happening with the cachebb:T421c64,[V0_FILE]sql:file="scripts/01-create-tables.sql" isMerged="true" -- Users table for authentication and profiles CREATE TABLE users ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), email VARCHAR(255) UNIQUE NOT NULL, password_hash VARCHAR(255) NOT NULL, first_name VARCHAR(100) NOT NULL, last_name VARCHAR(100) NOT NULL, username VARCHAR(50) UNIQUE NOT NULL, phone VARCHAR(20), avatar_url TEXT, bio TEXT, location VARCHAR(255), skills TEXT[], -- Array of skills rating DECIMAL(3,2) DEFAULT 0.00, total_reviews INTEGER DEFAULT 0, is_verified BOOLEAN DEFAULT FALSE, is_active BOOLEAN DEFAULT TRUE, user_type VARCHAR(20) DEFAULT 'user', -- 'user', 'admin' created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Categories for jobs and marketplace items CREATE TABLE categories ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), name VARCHAR(100) NOT NULL, slug VARCHAR(100) UNIQUE NOT NULL, description TEXT, icon VARCHAR(50), parent_id UUID REFERENCES categories(id), is_active BOOLEAN DEFAULT TRUE, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Microjobs table CREATE TABLE microjobs ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE, category_id UUID NOT NULL REFERENCES categories(id), title VARCHAR(255) NOT NULL, description TEXT NOT NULL, requirements TEXT, budget_min DECIMAL(10,2), budget_max DECIMAL(10,2), deadline DATE, location VARCHAR(255), is_remote BOOLEAN DEFAULT FALSE, status VARCHAR(20) DEFAULT 'open', -- 'open', 'in_progress', 'completed', 'cancelled' priority VARCHAR(10) DEFAULT 'normal', -- 'low', 'normal', 'high', 'urgent' attachments TEXT[], -- Array of file URLs skills_required TEXT[], applications_count INTEGER DEFAULT 0, views_count INTEGER DEFAULT 0, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Job applications CREATE TABLE job_applications ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), job_id UUID NOT NULL REFERENCES microjobs(id) ON DELETE CASCADE, applicant_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE, cover_letter TEXT, proposed_budget DECIMAL(10,2), estimated_duration VARCHAR(50), portfolio_links TEXT[], status VARCHAR(20) DEFAULT 'pending', -- 'pending', 'accepted', 'rejected' created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), UNIQUE(job_id, applicant_id) ); -- Marketplace items (Fiverr-like services) CREATE TABLE marketplace_items ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), seller_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE, category_id UUID NOT NULL REFERENCES categories(id), title VARCHAR(255) NOT NULL, description TEXT NOT NULL, short_description VARCHAR(500), price DECIMAL(10,2) NOT NULL, delivery_time INTEGER NOT NULL, -- in days revisions_included INTEGER DEFAULT 0, images TEXT[], -- Array of image URLs tags TEXT[], requirements TEXT, -- What buyer needs to provide status VARCHAR(20) DEFAULT 'active', -- 'active', 'paused', 'draft' rating DECIMAL(3,2) DEFAULT 0.00, total_orders INTEGER DEFAULT 0, views_count INTEGER DEFAULT 0, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Orders for marketplace items CREATE TABLE orders ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), marketplace_item_id UUID NOT NULL REFERENCES marketplace_items(id), buyer_id UUID NOT NULL REFERENCES users(id), seller_id UUID NOT NULL REFERENCES users(id), amount DECIMAL(10,2) NOT NULL, status VARCHAR(20) DEFAULT 'pending', -- 'pending', 'in_progress', 'delivered', 'completed', 'cancelled', 'disputed' requirements_provided TEXT, delivery_date DATE, delivered_at TIMESTAMP WITH TIME ZONE, completed_at TIMESTAMP WITH TIME ZONE, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Wallet system CREATE TABLE wallets ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE, balance DECIMAL(12,2) DEFAULT 0.00, pending_balance DECIMAL(12,2) DEFAULT 0.00, -- Money on hold total_earned DECIMAL(12,2) DEFAULT 0.00, total_spent DECIMAL(12,2) DEFAULT 0.00, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), UNIQUE(user_id) ); -- Wallet transactions CREATE TABLE wallet_transactions ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), wallet_id UUID NOT NULL REFERENCES wallets(id), type VARCHAR(20) NOT NULL, -- 'deposit', 'withdrawal', 'payment', 'earning', 'refund' amount DECIMAL(12,2) NOT NULL, description TEXT, reference_id UUID, -- Can reference orders, jobs, etc. reference_type VARCHAR(50), -- 'order', 'job', 'withdrawal', etc. status VARCHAR(20) DEFAULT 'completed', -- 'pending', 'completed', 'failed' created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Reviews and ratings CREATE TABLE reviews ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), reviewer_id UUID NOT NULL REFERENCES users(id), reviewee_id UUID NOT NULL REFERENCES users(id), order_id UUID REFERENCES orders(id), job_id UUID REFERENCES microjobs(id), rating INTEGER NOT NULL CHECK (rating >= 1 AND rating <= 5), comment TEXT, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), UNIQUE(reviewer_id, order_id), UNIQUE(reviewer_id, job_id) ); -- Notifications CREATE TABLE notifications ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE, title VARCHAR(255) NOT NULL, message TEXT NOT NULL, type VARCHAR(50) NOT NULL, -- 'job_application', 'order_update', 'payment', 'review', etc. reference_id UUID, reference_type VARCHAR(50), is_read BOOLEAN DEFAULT FALSE, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Referral system CREATE TABLE referrals ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), referrer_id UUID NOT NULL REFERENCES users(id), referred_id UUID NOT NULL REFERENCES users(id), referral_code VARCHAR(20) NOT NULL, status VARCHAR(20) DEFAULT 'pending', -- 'pending', 'completed' reward_amount DECIMAL(10,2) DEFAULT 0.00, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), UNIQUE(referrer_id, referred_id) ); -- User referral codes CREATE TABLE referral_codes ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE, code VARCHAR(20) UNIQUE NOT NULL, uses_count INTEGER DEFAULT 0, max_uses INTEGER DEFAULT 100, is_active BOOLEAN DEFAULT TRUE, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), UNIQUE(user_id) ); [V0_FILE]sql:file="scripts/02-create-indexes.sql" isMerged="true" -- Performance indexes CREATE INDEX idx_users_email ON users(email); CREATE INDEX idx_users_username ON users(username); CREATE INDEX idx_users_created_at ON users(created_at); CREATE INDEX idx_microjobs_user_id ON microjobs(user_id); CREATE INDEX idx_microjobs_category_id ON microjobs(category_id); CREATE INDEX idx_microjobs_status ON microjobs(status); CREATE INDEX idx_microjobs_created_at ON microjobs(created_at); CREATE INDEX idx_microjobs_budget ON microjobs(budget_min, budget_max); CREATE INDEX idx_job_applications_job_id ON job_applications(job_id); CREATE INDEX idx_job_applications_applicant_id ON job_applications(applicant_id); CREATE INDEX idx_job_applications_status ON job_applications(status); CREATE INDEX idx_marketplace_items_seller_id ON marketplace_items(seller_id); CREATE INDEX idx_marketplace_items_category_id ON marketplace_items(category_id); CREATE INDEX idx_marketplace_items_status ON marketplace_items(status); CREATE INDEX idx_marketplace_items_price ON marketplace_items(price); 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_orders_created_at ON orders(created_at); CREATE INDEX idx_wallet_transactions_wallet_id ON wallet_transactions(wallet_id); CREATE INDEX idx_wallet_transactions_type ON wallet_transactions(type); CREATE INDEX idx_wallet_transactions_created_at ON wallet_transactions(created_at); CREATE INDEX idx_notifications_user_id ON notifications(user_id); CREATE INDEX idx_notifications_is_read ON notifications(is_read); CREATE INDEX idx_notifications_created_at ON notifications(created_at); CREATE INDEX idx_reviews_reviewee_id ON reviews(reviewee_id); CREATE INDEX idx_reviews_order_id ON reviews(order_id); CREATE INDEX idx_reviews_job_id ON reviews(job_id); [V0_FILE]sql:file="scripts/03-seed-categories.sql" isMerged="true" -- Seed categories for microjobs and marketplace INSERT INTO categories (name, slug, description, icon) VALUES ('Web Development', 'web-development', 'Website and web application development', 'code'), ('Mobile Development', 'mobile-development', 'iOS and Android app development', 'smartphone'), ('Design & Creative', 'design-creative', 'Graphic design, UI/UX, and creative services', 'palette'), ('Writing & Translation', 'writing-translation', 'Content writing, copywriting, and translation', 'edit'), ('Digital Marketing', 'digital-marketing', 'SEO, social media, and online marketing', 'trending-up'), ('Data & Analytics', 'data-analytics', 'Data analysis, research, and business intelligence', 'bar-chart'), ('Video & Animation', 'video-animation', 'Video editing, animation, and multimedia', 'video'), ('Music & Audio', 'music-audio', 'Audio editing, music production, and voice over', 'music'), ('Business Services', 'business-services', 'Virtual assistance, consulting, and business support', 'briefcase'), ('Education & Training', 'education-training', 'Online tutoring, course creation, and training', 'book-open'); -- Subcategories for Web Development INSERT INTO categories (name, slug, description, parent_id) VALUES ('Frontend Development', 'frontend-development', 'React, Vue, Angular development', (SELECT id FROM categories WHERE slug = 'web-development')), ('Backend Development', 'backend-development', 'Node.js, Python, PHP development', (SELECT id FROM categories WHERE slug = 'web-development')), ('Full Stack Development', 'fullstack-development', 'Complete web application development', (SELECT id FROM categories WHERE slug = 'web-development')), ('WordPress Development', 'wordpress-development', 'WordPress themes and plugins', (SELECT id FROM categories WHERE slug = 'web-development')); [V0_FILE]typescriptreact:file="app/login/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import { LoginForm } from "@/components/auth/login-form" import { ArrowLeft } from "lucide-react" import Link from "next/link" export default function LoginPage() { return (

Back to Home

WorkHub

Your gateway to opportunities

) } [V0_FILE]typescript:file="components/dashboard/dashboard-header.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { Bell, Search, User, Settings, LogOut, MessageCircle } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { useAuth } from "@/contexts/auth-context" import { useRouter } from "next/navigation" import Link from "next/link" import { CurrencyLanguageSwitcher } from "@/components/ui/currency-language-switcher" import { getUserNotifications, getUnreadNotificationCount, markNotificationAsRead } from "@/lib/notifications" import { formatDistanceToNow } from "date-fns" interface DashboardHeaderProps { title: string description?: string } export function DashboardHeader({ title, description }: DashboardHeaderProps) { const [searchQuery, setSearchQuery] = useState("") const { user, signOut } = useAuth() const router = useRouter() const [notifications, setNotifications] = useState([]) const [unreadCount, setUnreadCount] = useState(0) const [loading, setLoading] = useState(true) useEffect(() => { if (user?.id) { loadNotifications() // Refresh notifications every 30 seconds const interval = setInterval(loadNotifications, 30000) return () => clearInterval(interval) } }, [user?.id]) const loadNotifications = async () => { if (!user?.id) return try { const [userNotifications, unreadCountData] = await Promise.all([ getUserNotifications(user.id), getUnreadNotificationCount(user.id), ]) setNotifications(userNotifications.slice(0, 5)) // Show latest 5 in dropdown setUnreadCount(unreadCountData) } catch (error) { console.error("Failed to load notifications:", error) } finally { setLoading(false) } } const handleNotificationClick = async (notificationId: string) => { try { await markNotificationAsRead(notificationId) loadNotifications() // Refresh to update unread count } catch (error) { console.error("Failed to mark notification as read:", error) } } const handleSearch = (e: React.FormEvent) => { e.preventDefault() if (searchQuery.trim()) { router.push(`/dashboard/search?q=${encodeURIComponent(searchQuery)}`) } } const handleSignOut = async () => { await signOut() router.push("/") } return (

{title}

{description &&

{description}

}

{/* Search */}

setSearchQuery(e.target.value)} className="pl-10 w-48 lg:w-64 h-9" /> {/* Mobile Search Button */}

{/* Messages */} {/* Notifications */} Notifications

{loading ? (

Loading notifications...

) : notifications.length > 0 ? ( notifications.map((notification) => ( handleNotificationClick(notification.id)} >

{notification.title}

{notification.description}

{formatDistanceToNow(new Date(notification.timestamp), { addSuffix: true })}

{!notification.read && (

)}

)) ) : (

No notifications yet

)}

View all notifications {/* User Profile */}

{user?.firstName} {user?.lastName}

@{user?.username}

Profile Settings

Sign out

) } [V0_FILE]typescriptreact:file="components/dashboard/stats-card.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import type { LucideIcon } from "lucide-react" interface StatsCardProps { title: string value: string | number description?: string icon: LucideIcon trend?: { value: number isPositive: boolean } } export function StatsCard({ title, value, description, icon: Icon, trend }: StatsCardProps) { return ( {title}

{value}

{description &&

{description}

} {trend && (

{trend.isPositive ? "+" : ""} {trend.value}% from last month

)} ) } [V0_FILE]typescriptreact:file="components/jobs/job-filters.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Checkbox } from "@/components/ui/checkbox" import { Search, X } from "lucide-react" interface JobFiltersProps { onFiltersChange: (filters: { search?: string category?: string location?: string remote?: boolean budgetMin?: number budgetMax?: number }) => void } const categories = [ { value: "web-development", label: "Web Development" }, { value: "mobile-development", label: "Mobile Development" }, { value: "design-creative", label: "Design & Creative" }, { value: "writing-translation", label: "Writing & Translation" }, { value: "digital-marketing", label: "Digital Marketing" }, { value: "data-analytics", label: "Data & Analytics" }, ] export function JobFilters({ onFiltersChange }: JobFiltersProps) { const [filters, setFilters] = useState({ search: "", category: "", location: "", remote: false, budgetMin: "", budgetMax: "", }) const handleFilterChange = (key: string, value: any) => { const newFilters = { ...filters, [key]: value } setFilters(newFilters) // Convert to the expected format const processedFilters: any = {} if (newFilters.search) processedFilters.search = newFilters.search if (newFilters.category) processedFilters.category = newFilters.category if (newFilters.location) processedFilters.location = newFilters.location if (newFilters.remote) processedFilters.remote = newFilters.remote if (newFilters.budgetMin) processedFilters.budgetMin = Number.parseInt(newFilters.budgetMin) if (newFilters.budgetMax) processedFilters.budgetMax = Number.parseInt(newFilters.budgetMax) onFiltersChange(processedFilters) } const clearFilters = () => { const clearedFilters = { search: "", category: "", location: "", remote: false, budgetMin: "", budgetMax: "", } setFilters(clearedFilters) onFiltersChange({}) } return (

Filters

handleFilterChange("search", e.target.value)} className="pl-10 border-gray-200 focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />

Post a New Job

Find the perfect freelancer for your project

{/* Basic Information */} Basic Information

Job Title * handleInputChange("title", e.target.value)} required />

Category *

Job Description *

handleInputChange("description", e.target.value)}
                    rows={6}
                    required
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="requirements">Requirements (Optional)</Label>
                  <Textarea
                    id="requirements"
                    placeholder="List specific requirements, qualifications, or experience needed..."
                    value={formData.requirements}
                    onChange={(e) => handleInputChange("requirements", e.target.value)}
                    rows={4}
                  />
                </div>
              </CardContent>
            </Card>

{/* Budget and Timeline */}
            <Card>
              <CardHeader>
                <CardTitle>Budget and Timeline</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="budgetMin">Minimum Budget ($) *</Label>
                    <Input
                      id="budgetMin"
                      type="number"
                      min="1"
                      placeholder="500"
                      value={formData.budgetMin}
                      onChange={(e) => handleInputChange("budgetMin", e.target.value)}
                      required
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="budgetMax">Maximum Budget ($) *</Label>
                    <Input
                      id="budgetMax"
                      type="number"
                      min="1"
                      placeholder="1000"
                      value={formData.budgetMax}
                      onChange={(e) => handleInputChange("budgetMax", e.target.value)}
                      required
                    />
                  </div>
                </div>

<div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="deadline">Project Deadline *</Label>
                    <Input
                      id="deadline"
                      type="date"
                      value={formData.deadline}
                      onChange={(e) => handleInputChange("deadline", e.target.value)}
                      required
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="priority">Priority Level</Label>
                    <Select value={formData.priority} onValueChange={(value) => handleInputChange("priority", value)}>
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        {priorities.map((priority) => (
                          <SelectItem key={priority.value} value={priority.value}>
                            {priority.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Location and Skills */}
            <Card>
              <CardHeader>
                <CardTitle>Location and Skills</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="location">Location</Label>
                  <Input
                    id="location"
                    placeholder="e.g., New York, NY"
                    value={formData.location}
                    onChange={(e) => handleInputChange("location", e.target.value)}
                  />
                </div>

<div className="flex items-center space-x-2">
                  <Checkbox
                    id="isRemote"
                    checked={formData.isRemote}
                    onCheckedChange={(checked) => handleInputChange("isRemote", checked)}
                  />
                  <Label htmlFor="isRemote">This is a remote job</Label>
                </div>

<div className="space-y-2">
                  <Label>Required Skills</Label>
                  <div className="flex space-x-2">
                    <Input
                      placeholder="Add a skill (e.g., React, Python, Design)"
                      value={newSkill}
                      onChange={(e) => setNewSkill(e.target.value)}
                      onKeyPress={(e) => e.key === "Enter" && (e.preventDefault(), addSkill())}
                    />
                    <Button type="button" onClick={addSkill}>
                      <Plus className="h-4 w-4" />
                    </Button>
                  </div>

{formData.skillsRequired.length > 0 && (
                    <div className="flex flex-wrap gap-2 mt-3">
                      {formData.skillsRequired.map((skill) => (
                        <Badge key={skill} variant="secondary" className="flex items-center gap-1">
                          {skill}
                          <button type="button" onClick={() => removeSkill(skill)} className="ml-1 hover:text-red-600">
                            <X className="h-3 w-3" />
                          </button>
                        </Badge>
                      ))}
                    </div>
                  )}
                </div>
              </CardContent>
            </Card>

{/* Submit */}
            <div className="flex justify-end space-x-4">
              <Button type="button" variant="outline" onClick={() => router.back()}>
                Cancel
              </Button>
              <Button type="submit" disabled={loading}>
                {loading ? "Posting Job..." : "Post Job"}
              </Button>
            </div>
          </form>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]png:file="public/logo-examples.png" https="true" hebbkx1anhila5yf="true" public="true" blob="true" vercel="true" storage="true" com="true" attachments="true" gen="true" images="true" logo="true" examples="true" Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8Ej8="true" v0="true" no="true" op="true" code="true" block="true" terminated="true" isMerged="true"
[V0_FILE]typescriptreact:file="app/admin/users/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/jobs/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/dashboard/analytics/page.tsx" isMerged="true"
import { DashboardHeader } from "@/components/dashboard/dashboard-header"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  LineChart,
  Line,
  PieChart,
  Pie,
  Cell,
} from "recharts"
import { TrendingUp, DollarSign, Eye, Star } from "lucide-react"

const earningsData = [
  { month: "Jan", earnings: 1200 },
  { month: "Feb", earnings: 1800 },
  { month: "Mar", earnings: 2200 },
  { month: "Apr", earnings: 1900 },
  { month: "May", earnings: 2600 },
  { month: "Jun", earnings: 2847 },
]

const viewsData = [
  { day: "Mon", views: 45 },
  { day: "Tue", views: 52 },
  { day: "Wed", views: 38 },
  { day: "Thu", views: 61 },
  { day: "Fri", views: 55 },
  { day: "Sat", views: 42 },
  { day: "Sun", views: 48 },
]

const serviceData = [
  { name: "Web Development", value: 40, color: "#3b82f6" },
  { name: "Graphic Design", value: 30, color: "#f97316" },
  { name: "Writing", value: 20, color: "#10b981" },
  { name: "Marketing", value: 10, color: "#f59e0b" },
]

export default function AnalyticsPage() {
  return (
    <>
      <DashboardHeader title="Analytics" description="Track your performance and earnings across the platform." />

<div className="flex-1 overflow-auto p-6">
        <div className="space-y-6">
          {/* Key Metrics */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Total Views</CardTitle>
                <Eye className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">1,234</div>
                <p className="text-xs text-muted-foreground">+12% from last month</p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Conversion Rate</CardTitle>
                <TrendingUp className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">3.2%</div>
                <p className="text-xs text-muted-foreground">+0.5% from last month</p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Avg. Order Value</CardTitle>
                <DollarSign className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">$127</div>
                <p className="text-xs text-muted-foreground">+8% from last month</p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Customer Rating</CardTitle>
                <Star className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">4.9</div>
                <p className="text-xs text-muted-foreground">Based on 156 reviews</p>
              </CardContent>
            </Card>
          </div>

<div className="grid lg:grid-cols-2 gap-6">
            {/* Earnings Chart */}
            <Card>
              <CardHeader>
                <CardTitle>Monthly Earnings</CardTitle>
              </CardHeader>
              <CardContent>
                <ResponsiveContainer width="100%" height={300}>
                  <BarChart data={earningsData}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="month" />
                    <YAxis />
                    <Tooltip />
                    <Bar dataKey="earnings" fill="#3b82f6" />
                  </BarChart>
                </ResponsiveContainer>
              </CardContent>
            </Card>

{/* Views Chart */}
            <Card>
              <CardHeader>
                <CardTitle>Daily Profile Views</CardTitle>
              </CardHeader>
              <CardContent>
                <ResponsiveContainer width="100%" height={300}>
                  <LineChart data={viewsData}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="day" />
                    <YAxis />
                    <Tooltip />
                    <Line type="monotone" dataKey="views" stroke="#f97316" strokeWidth={2} />
                  </LineChart>
                </ResponsiveContainer>
              </CardContent>
            </Card>
          </div>

{/* Service Distribution */}
          <Card>
            <CardHeader>
              <CardTitle>Service Category Distribution</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="flex items-center justify-center">
                <ResponsiveContainer width="100%" height={300}>
                  <PieChart>
                    <Pie
                      data={serviceData}
                      cx="50%"
                      cy="50%"
                      outerRadius={100}
                      dataKey="value"
                      label={({ name, value }) => `${name}: ${value}%`}
                    >
                      {serviceData.map((entry, index) => (
                        <Cell key={`cell-${index}`} fill={entry.color} />
                      ))}
                    </Pie>
                    <Tooltip />
                  </PieChart>
                </ResponsiveContainer>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </>
  )
}
[V0_FILE]typescriptreact:file="app/admin-setup/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Copy, ExternalLink } from "lucide-react"
import Link from "next/link"
import { useAuth } from "@/contexts/auth-context"
import { useRouter } from "next/navigation"
import { useState } from "react"

export default function AdminSetupPage() {
  const { signIn } = useAuth() // Changed from login to signIn to match auth context
  const router = useRouter()
  const [isLoggingIn, setIsLoggingIn] = useState(false)

const adminCredentials = {
    email: "admin@marketplace.com",
    password: "admin123",
  }

const copyToClipboard = (text: string) => {
    navigator.clipboard.writeText(text)
  }

const handleDirectAdminAccess = async () => {
    setIsLoggingIn(true)
    try {
      await signIn(adminCredentials.email, adminCredentials.password) // Changed from login to signIn function call
      router.push("/admin")
    } catch (error) {
      console.error("Admin login error:", error)
      alert("Error logging in as admin")
    } finally {
      setIsLoggingIn(false)
    }
  }

return (
    <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
      <Card className="w-full max-w-md">
        <CardHeader className="text-center">
          <CardTitle className="text-2xl font-bold text-red-600">Admin Panel Access</CardTitle>
          <CardDescription>Use these credentials to access the admin panel</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <label className="text-sm font-medium text-gray-700">Email:</label>
            <div className="flex items-center gap-2">
              <code className="flex-1 p-2 bg-gray-100 rounded text-sm">{adminCredentials.email}</code>
              <Button size="sm" variant="outline" onClick={() => copyToClipboard(adminCredentials.email)}>
                <Copy className="h-4 w-4" />
              </Button>
            </div>
          </div>

<div className="space-y-2">
            <label className="text-sm font-medium text-gray-700">Password:</label>
            <div className="flex items-center gap-2">
              <code className="flex-1 p-2 bg-gray-100 rounded text-sm">{adminCredentials.password}</code>
              <Button size="sm" variant="outline" onClick={() => copyToClipboard(adminCredentials.password)}>
                <Copy className="h-4 w-4" />
              </Button>
            </div>
          </div>

<div className="pt-4 space-y-2">
            <Link href="/login">
              <Button className="w-full bg-red-600 hover:bg-red-700">
                Go to Login Page
                <ExternalLink className="ml-2 h-4 w-4" />
              </Button>
            </Link>
            <Button
              variant="outline"
              className="w-full bg-transparent"
              onClick={handleDirectAdminAccess}
              disabled={isLoggingIn}
            >
              {isLoggingIn ? "Logging in..." : "Direct to Admin Panel"}
              <ExternalLink className="ml-2 h-4 w-4" />
            </Button>
          </div>

<div className="text-xs text-gray-500 text-center pt-2">
            <p>
              After logging in with these credentials, you'll have full admin access to manage users, jobs, services,
              and platform analytics.
            </p>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/services/loading.tsx" isMerged="true"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"

export default function AdminServicesLoading() {
  return (
    <div className="space-y-6">
      <div>
        <Skeleton className="h-8 w-64 mb-2" />
        <Skeleton className="h-4 w-96" />
      </div>

<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        {Array.from({ length: 4 }).map((_, i) => (
          <Card key={i}>
            <CardHeader className="pb-2">
              <Skeleton className="h-4 w-24" />
            </CardHeader>
            <CardContent>
              <Skeleton className="h-8 w-16" />
            </CardContent>
          </Card>
        ))}
      </div>

<Card>
        <CardHeader>
          <Skeleton className="h-6 w-32" />
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {Array.from({ length: 5 }).map((_, i) => (
              <div key={i} className="flex items-center gap-4 p-4 border rounded-lg">
                <Skeleton className="h-4 w-4" />
                <div className="flex-1 space-y-2">
                  <Skeleton className="h-5 w-64" />
                  <Skeleton className="h-4 w-96" />
                  <div className="flex gap-2">
                    <Skeleton className="h-5 w-16" />
                    <Skeleton className="h-5 w-16" />
                    <Skeleton className="h-5 w-16" />
                  </div>
                </div>
                <Skeleton className="h-8 w-8" />
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/radio-group.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
import { Circle } from "lucide-react"

import { cn } from "@/lib/utils"

const RadioGroup = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
>(({ className, ...props }, ref) => {
  return <RadioGroupPrimitive.Root className={cn("grid gap-2", className)} {...props} ref={ref} />
})
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName

const RadioGroupItem = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
>(({ className, ...props }, ref) => {
  return (
    <RadioGroupPrimitive.Item
      ref={ref}
      className={cn(
        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      {...props}
    >
      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
        <Circle className="h-2.5 w-2.5 fill-current text-current" />
      </RadioGroupPrimitive.Indicator>
    </RadioGroupPrimitive.Item>
  )
})
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName

export { RadioGroup, RadioGroupItem }
[V0_FILE]png:file="public/youtube-thumbnail.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/youtube-thumbnail-uyyOXtgA9Ry0uI0GG2xV7kkI1ncAOw.png" isMerged="true"
[V0_FILE]png:file="public/website-visit-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/website-visit-icon-8KafPDmZM5XdquliRchXT3SRC09YhJ.png" isMerged="true"
[V0_FILE]png:file="public/telegram-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/telegram-logo-HQHLJsMMgLj9aB6UI6vuiytIAFVTjs.png" isMerged="true"
[V0_FILE]png:file="public/dollar-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/dollar-icon-3y5cLHqdhSAJTxMpY754Jvz1K5bw1r.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/admin/referral-settings/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]sql:file="scripts/04-create-chat-tables.sql" isMerged="true"
-- Chat System Database Schema
-- This script creates tables for the messaging/chat functionality

-- Chats table - stores chat conversations
CREATE TABLE chats (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    type VARCHAR(20) NOT NULL CHECK (type IN ('direct', 'order', 'admin_support')),
    title VARCHAR(255),
    order_id UUID REFERENCES orders(id) ON DELETE CASCADE,
    job_id UUID REFERENCES microjobs(id) ON DELETE CASCADE,
    marketplace_item_id UUID REFERENCES marketplace_items(id) ON DELETE CASCADE,
    created_by UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    is_active BOOLEAN DEFAULT true,
    last_message_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

-- Chat participants table - manages who can access each chat
CREATE TABLE chat_participants (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    chat_id UUID NOT NULL REFERENCES chats(id) ON DELETE CASCADE,
    user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    role VARCHAR(20) DEFAULT 'participant' CHECK (role IN ('participant', 'admin', 'moderator')),
    joined_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
    left_at TIMESTAMP WITH TIME ZONE,
    is_active BOOLEAN DEFAULT true,
    UNIQUE(chat_id, user_id)
);

-- Messages table - stores individual messages
CREATE TABLE messages (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    chat_id UUID NOT NULL REFERENCES chats(id) ON DELETE CASCADE,
    sender_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    message_type VARCHAR(20) DEFAULT 'text' CHECK (message_type IN ('text', 'image', 'file', 'system')),
    content TEXT NOT NULL,
    file_url VARCHAR(500),
    file_name VARCHAR(255),
    file_size INTEGER,
    reply_to_id UUID REFERENCES messages(id) ON DELETE SET NULL,
    is_edited BOOLEAN DEFAULT false,
    edited_at TIMESTAMP WITH TIME ZONE,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

-- Message status table - tracks read/unread status for each user
CREATE TABLE message_status (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    message_id UUID NOT NULL REFERENCES messages(id) ON DELETE CASCADE,
    user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    status VARCHAR(20) DEFAULT 'sent' CHECK (status IN ('sent', 'delivered', 'read')),
    read_at TIMESTAMP WITH TIME ZONE,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
    UNIQUE(message_id, user_id)
);

-- Chat settings table - for user-specific chat preferences
CREATE TABLE chat_settings (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    chat_id UUID NOT NULL REFERENCES chats(id) ON DELETE CASCADE,
    notifications_enabled BOOLEAN DEFAULT true,
    muted_until TIMESTAMP WITH TIME ZONE,
    custom_name VARCHAR(255),
    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
    UNIQUE(user_id, chat_id)
);

-- Add triggers for updating timestamps
CREATE OR REPLACE FUNCTION update_updated_at_column()
RETURNS TRIGGER AS $$
BEGIN
    NEW.updated_at = CURRENT_TIMESTAMP;
    RETURN NEW;
END;
$$ language 'plpgsql';

CREATE TRIGGER update_chats_updated_at BEFORE UPDATE ON chats
    FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();

CREATE TRIGGER update_messages_updated_at BEFORE UPDATE ON messages
    FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();

CREATE TRIGGER update_chat_settings_updated_at BEFORE UPDATE ON chat_settings
    FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();

-- Trigger to update last_message_at in chats table when new message is added
CREATE OR REPLACE FUNCTION update_chat_last_message()
RETURNS TRIGGER AS $$
BEGIN
    UPDATE chats 
    SET last_message_at = NEW.created_at 
    WHERE id = NEW.chat_id;
    RETURN NEW;
END;
$$ language 'plpgsql';

CREATE TRIGGER update_chat_last_message_trigger 
    AFTER INSERT ON messages
    FOR EACH ROW EXECUTE FUNCTION update_chat_last_message();
[V0_FILE]sql:file="scripts/05-create-chat-indexes.sql" isMerged="true"
-- Chat System Indexes for Performance Optimization

-- Chats table indexes
CREATE INDEX idx_chats_type ON chats(type);
CREATE INDEX idx_chats_created_by ON chats(created_by);
CREATE INDEX idx_chats_order_id ON chats(order_id);
CREATE INDEX idx_chats_job_id ON chats(job_id);
CREATE INDEX idx_chats_marketplace_item_id ON chats(marketplace_item_id);
CREATE INDEX idx_chats_last_message_at ON chats(last_message_at DESC);
CREATE INDEX idx_chats_active ON chats(is_active);

-- Chat participants indexes
CREATE INDEX idx_chat_participants_chat_id ON chat_participants(chat_id);
CREATE INDEX idx_chat_participants_user_id ON chat_participants(user_id);
CREATE INDEX idx_chat_participants_active ON chat_participants(is_active);
CREATE INDEX idx_chat_participants_role ON chat_participants(role);

-- Messages table indexes
CREATE INDEX idx_messages_chat_id ON messages(chat_id);
CREATE INDEX idx_messages_sender_id ON messages(sender_id);
CREATE INDEX idx_messages_created_at ON messages(created_at DESC);
CREATE INDEX idx_messages_type ON messages(message_type);
CREATE INDEX idx_messages_reply_to ON messages(reply_to_id);

-- Message status indexes
CREATE INDEX idx_message_status_message_id ON message_status(message_id);
CREATE INDEX idx_message_status_user_id ON message_status(user_id);
CREATE INDEX idx_message_status_status ON message_status(status);
CREATE INDEX idx_message_status_unread ON message_status(user_id, status) WHERE status != 'read';

-- Chat settings indexes
CREATE INDEX idx_chat_settings_user_id ON chat_settings(user_id);
CREATE INDEX idx_chat_settings_chat_id ON chat_settings(chat_id);

-- Composite indexes for common queries
CREATE INDEX idx_chats_user_active ON chats(created_by, is_active, last_message_at DESC);
CREATE INDEX idx_messages_chat_time ON messages(chat_id, created_at DESC);
CREATE INDEX idx_participants_user_active ON chat_participants(user_id, is_active);
[V0_FILE]png:file="public/diverse-user-avatars.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/diverse-user-avatars-jNaliJbW5b5ccprrlYjj99XE0SOY9L.png" isMerged="true"
[V0_FILE]png:file="public/buyer-avatar.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/buyer-avatar-oHtY1IUTYynxQ68ctDA0zGX12rHqpN.png" isMerged="true"
[V0_FILE]png:file="public/admin-avatar.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/admin-avatar-EO5ednlDtH94CwyuA4gxP5IhELzOrl.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/dashboard/messages/[chatId]/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useParams, useRouter } from "next/navigation"
import { ChatWindow } from "@/components/chat/chat-window"
import { type Chat, type Message, getStoredChats, getMessagesByChatId, saveMessage, saveChat } from "@/lib/chat"
import { useAuth } from "@/contexts/auth-context"
import { Button } from "@/components/ui/button"
import { ArrowLeft } from "lucide-react"

export default function ChatPage() {
  const params = useParams()
  const router = useRouter()
  const { user } = useAuth()
  const chatId = params.chatId as string

const [chat, setChat] = useState<Chat | null>(null)
  const [messages, setMessages] = useState<Message[]>([])

useEffect(() => {
    const storedChats = getStoredChats()
    const foundChat = storedChats.find((c) => c.id === chatId)
    if (foundChat) {
      setChat(foundChat)
      const chatMessages = getMessagesByChatId(chatId)
      setMessages(chatMessages)
    }
  }, [chatId])

const handleSendMessage = async (content: string, files?: File[]) => {
    if (!chat || !user) return

try {
      const newMessage = await saveMessage({
        chatId: chat.id,
        senderId: user.id,
        sender: {
          id: user.id,
          name: `${user.firstName} ${user.lastName}`,
          userType: "user",
          isOnline: true,
        },
        content,
        messageType: files && files.length > 0 ? "file" : "text",
        fileUrl: files?.[0] ? URL.createObjectURL(files[0]) : undefined,
        fileName: files?.[0]?.name,
        fileSize: files?.[0]?.size,
        isEdited: false,
        status: "sent",
      })

setMessages((prev) => [...prev, newMessage])

const updatedChat = {
        ...chat,
        lastMessage: newMessage,
        lastMessageAt: new Date(),
      }
      setChat(updatedChat)
      await saveChat(updatedChat)

// Simulate message delivery
      setTimeout(() => {
        setMessages((prev) => prev.map((msg) => (msg.id === newMessage.id ? { ...msg, status: "delivered" } : msg)))
      }, 1000)
    } catch (error) {
      console.error("[v0] Error sending message:", error)
    }
  }

if (!chat) {
    return (
      <div className="flex items-center justify-center h-screen">
        <div className="text-center">
          <h2 className="text-xl font-semibold mb-2">Chat not found</h2>
          <p className="text-muted-foreground mb-4">The conversation you're looking for doesn't exist.</p>
          <Button onClick={() => router.push("/dashboard/messages")}>Back to Messages</Button>
        </div>
      </div>
    )
  }

return (
    <div className="h-screen flex flex-col">
      {/* Mobile header */}
      <div className="md:hidden flex items-center gap-2 p-4 border-b bg-card/50">
        <Button variant="ghost" size="sm" onClick={() => router.push("/dashboard/messages")}>
          <ArrowLeft className="h-4 w-4" />
        </Button>
        <h1 className="text-lg font-semibold">Chat</h1>
      </div>

<div className="flex-1">
        <ChatWindow chat={chat} messages={messages} currentUserId={user?.id || ""} onSendMessage={handleSendMessage} />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/messages/loading.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"

export default function MessagesLoading() {
  return (
    <div className="h-screen flex">
      {/* Chat List Skeleton */}
      <div className="w-80 border-r bg-card/30 p-4">
        <div className="mb-6">
          <Skeleton className="h-6 w-24" />
        </div>
        <div className="space-y-4">
          {Array.from({ length: 5 }).map((_, i) => (
            <div key={i} className="flex items-center gap-3">
              <Skeleton className="h-12 w-12 rounded-full" />
              <div className="flex-1">
                <Skeleton className="h-4 w-32 mb-2" />
                <Skeleton className="h-3 w-48" />
              </div>
            </div>
          ))}
        </div>
      </div>

{/* Chat Window Skeleton */}
      <div className="flex-1 flex flex-col">
        {/* Header */}
        <div className="p-4 border-b">
          <div className="flex items-center gap-3">
            <Skeleton className="h-10 w-10 rounded-full" />
            <div>
              <Skeleton className="h-4 w-32 mb-1" />
              <Skeleton className="h-3 w-16" />
            </div>
          </div>
        </div>

{/* Messages */}
        <div className="flex-1 p-4 space-y-4">
          {Array.from({ length: 3 }).map((_, i) => (
            <div key={i} className={`flex gap-3 ${i % 2 === 0 ? "" : "flex-row-reverse"}`}>
              <Skeleton className="h-8 w-8 rounded-full flex-shrink-0" />
              <Skeleton className={`h-12 rounded-2xl ${i % 2 === 0 ? "w-64" : "w-48"}`} />
            </div>
          ))}
        </div>

{/* Input */}
        <div className="p-4 border-t">
          <Skeleton className="h-10 w-full rounded-lg" />
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/chat/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { ChatList } from "@/components/chat/chat-list"
import { ChatWindow } from "@/components/chat/chat-window"
import { type Chat, type Message, getStoredChats, getMessagesByChatId, saveMessage, saveChat } from "@/lib/chat"
import { useAuth } from "@/contexts/auth-context"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { MessageSquare, Users, AlertCircle, Search, Filter } from "lucide-react"

export default function AdminChatPage() {
  const { user } = useAuth()
  const [chats, setChats] = useState<Chat[]>([])
  const [selectedChatId, setSelectedChatId] = useState<string | null>(null)
  const [messages, setMessages] = useState<Message[]>([])
  const [searchQuery, setSearchQuery] = useState("")
  const [filterType, setFilterType] = useState<"all" | "direct" | "order" | "admin_support">("all")
  const [isMobile, setIsMobile] = useState(false)

useEffect(() => {
    const storedChats = getStoredChats()
    setChats(storedChats)

const checkMobile = () => {
      setIsMobile(window.innerWidth < 1024)
    }

checkMobile()
    window.addEventListener("resize", checkMobile)
    return () => window.removeEventListener("resize", checkMobile)
  }, [])

useEffect(() => {
    if (selectedChatId) {
      const chatMessages = getMessagesByChatId(selectedChatId)
      setMessages(chatMessages)
    }
  }, [selectedChatId])

const handleChatSelect = (chatId: string) => {
    setSelectedChatId(chatId)
  }

const handleSendMessage = async (content: string, files?: File[]) => {
    if (!selectedChatId || !user) return

try {
      const newMessage = await saveMessage({
        chatId: selectedChatId,
        senderId: user.id,
        sender: {
          id: user.id,
          name: "Admin Support",
          userType: "admin",
          isOnline: true,
          avatar: "/admin-avatar.png",
        },
        content,
        messageType: files && files.length > 0 ? "file" : "text",
        fileUrl: files?.[0] ? URL.createObjectURL(files[0]) : undefined,
        fileName: files?.[0]?.name,
        fileSize: files?.[0]?.size,
        isEdited: false,
        status: "sent",
      })

setMessages((prev) => [...prev, newMessage])

const updatedChats = chats.map((chat) => {
        if (chat.id === selectedChatId) {
          const updatedChat = { ...chat, lastMessage: newMessage, lastMessageAt: new Date() }
          saveChat(updatedChat) // Save to storage
          return updatedChat
        }
        return chat
      })
      setChats(updatedChats)
    } catch (error) {
      console.error("[v0] Error sending admin message:", error)
    }
  }

const filteredChats = chats.filter((chat) => {
    const matchesSearch =
      searchQuery === "" ||
      chat.title?.toLowerCase().includes(searchQuery.toLowerCase()) ||
      chat.participants.some((p) => p.name.toLowerCase().includes(searchQuery.toLowerCase()))

const matchesFilter = filterType === "all" || chat.type === filterType

return matchesSearch && matchesFilter
  })

const selectedChat = chats.find((chat) => chat.id === selectedChatId)

// Statistics
  const totalChats = chats.length
  const activeChats = chats.filter((chat) => chat.isActive).length
  const supportChats = chats.filter((chat) => chat.type === "admin_support").length
  const unreadChats = chats.filter((chat) => chat.unreadCount > 0).length

return (
    <div className="space-y-6">
      {/* Header */}
      <div>
        <h1 className="text-3xl font-bold">Chat Management</h1>
        <p className="text-muted-foreground">Monitor and manage all platform conversations</p>
      </div>

{/* Statistics Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Chats</CardTitle>
            <MessageSquare className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{totalChats}</div>
            <p className="text-xs text-muted-foreground">All conversations</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Active Chats</CardTitle>
            <Users className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{activeChats}</div>
            <p className="text-xs text-muted-foreground">Currently active</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Support Tickets</CardTitle>
            <AlertCircle className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{supportChats}</div>
            <p className="text-xs text-muted-foreground">Need attention</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Unread Messages</CardTitle>
            <Badge variant="destructive" className="h-4 w-4 p-0 text-xs">
              !
            </Badge>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{unreadChats}</div>
            <p className="text-xs text-muted-foreground">Require response</p>
          </CardContent>
        </Card>
      </div>

{/* Chat Interface */}
      <Card>
        <CardHeader>
          <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between">
            <CardTitle>Conversations</CardTitle>

{/* Search and Filter */}
            <div className="flex gap-2 w-full sm:w-auto">
              <div className="relative flex-1 sm:w-64">
                <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
                <Input
                  placeholder="Search conversations..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-8"
                />
              </div>

<Select value={filterType} onValueChange={(value: any) => setFilterType(value)}>
                <SelectTrigger className="w-40">
                  <Filter className="h-4 w-4 mr-2" />
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Chats</SelectItem>
                  <SelectItem value="direct">Direct Messages</SelectItem>
                  <SelectItem value="order">Order Chats</SelectItem>
                  <SelectItem value="admin_support">Support Tickets</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        </CardHeader>

{/* Chat Window */}
            <div className={`${isMobile && !selectedChatId ? "hidden" : "block"} flex-1`}>
              {selectedChat ? (
                <div className="h-full flex flex-col">
                  {isMobile && (
                    <div className="flex items-center gap-2 p-4 border-b bg-card/50">
                      <Button variant="ghost" size="sm" onClick={() => setSelectedChatId(null)}>
                        ← Back
                      </Button>
                      <span className="font-medium">Chat Details</span>
                    </div>
                  )}
                  <div className="flex-1">
                    <ChatWindow
                      chat={selectedChat}
                      messages={messages}
                      currentUserId={user?.id || "admin"}
                      onSendMessage={handleSendMessage}
                    />
                  </div>
                </div>
              ) : (
                <div className="flex flex-col items-center justify-center h-full text-center bg-muted/20">
                  <div className="bg-primary/10 rounded-full p-6 mb-6">
                    <MessageSquare className="h-12 w-12 text-primary" />
                  </div>
                  <h2 className="text-2xl font-semibold mb-2">Admin Chat Management</h2>
                  <p className="text-muted-foreground max-w-md">
                    Select a conversation from the list to view messages, provide support, or monitor user interactions.
                  </p>
                </div>
              )}
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/chat/loading.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"
import { Card, CardContent, CardHeader } from "@/components/ui/card"

export default function AdminChatLoading() {
  return (
    <div className="space-y-6">
      {/* Header */}
      <div>
        <Skeleton className="h-8 w-48 mb-2" />
        <Skeleton className="h-4 w-96" />
      </div>

{/* Statistics Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        {Array.from({ length: 4 }).map((_, i) => (
          <Card key={i}>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <Skeleton className="h-4 w-24" />
              <Skeleton className="h-4 w-4" />
            </CardHeader>
            <CardContent>
              <Skeleton className="h-8 w-12 mb-1" />
              <Skeleton className="h-3 w-20" />
            </CardContent>
          </Card>
        ))}
      </div>

{/* Chat Interface */}
      <Card>
        <CardHeader>
          <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between">
            <Skeleton className="h-6 w-32" />
            <div className="flex gap-2">
              <Skeleton className="h-10 w-64" />
              <Skeleton className="h-10 w-40" />
            </div>
          </div>
        </CardHeader>

<CardContent className="p-0">
          <div className="h-[600px] flex">
            {/* Chat List Skeleton */}
            <div className="w-80 border-r p-4">
              <div className="space-y-4">
                {Array.from({ length: 5 }).map((_, i) => (
                  <div key={i} className="flex items-center gap-3">
                    <Skeleton className="h-12 w-12 rounded-full" />
                    <div className="flex-1">
                      <Skeleton className="h-4 w-32 mb-2" />
                      <Skeleton className="h-3 w-48" />
                    </div>
                  </div>
                ))}
              </div>
            </div>

{/* Chat Window Skeleton */}
            <div className="flex-1 flex flex-col items-center justify-center">
              <Skeleton className="h-16 w-16 rounded-full mb-4" />
              <Skeleton className="h-6 w-48 mb-2" />
              <Skeleton className="h-4 w-80" />
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/chat/chat-input.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef } from "react"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Send, Paperclip, Smile, DollarSign, HelpCircle, AlertCircle, X } from "lucide-react"
import { cn } from "@/lib/utils"
import { MoneyTransferDialog } from "./money-transfer-dialog"
import { SupportRequestDialog } from "./support-request-dialog"
import { validateFile, formatFileSize, getFileIcon } from "@/lib/file-management"
import { toast } from "sonner"

interface ChatInputProps {
  onSendMessage: (content: string, files?: File[]) => void
  placeholder?: string
  disabled?: boolean
  className?: string
  recipientName?: string
  recipientId?: string
  chatId?: string
}

export function ChatInput({
  onSendMessage,
  placeholder = "Type a message...",
  disabled = false,
  className,
  recipientName,
  recipientId,
  chatId,
}: ChatInputProps) {
  const [message, setMessage] = useState("")
  const [isTyping, setIsTyping] = useState(false)
  const [isMoneyTransferOpen, setIsMoneyTransferOpen] = useState(false)
  const [isSupportRequestOpen, setIsSupportRequestOpen] = useState(false)
  const [selectedFiles, setSelectedFiles] = useState<File[]>([])
  const fileInputRef = useRef<HTMLInputElement>(null)
  const textareaRef = useRef<HTMLTextAreaElement>(null)

const handleSend = () => {
    if ((message.trim() || selectedFiles.length > 0) && !disabled) {
      onSendMessage(message.trim() || "File attachment", selectedFiles)
      setMessage("")
      setSelectedFiles([])
      setIsTyping(false)
      if (textareaRef.current) {
        textareaRef.current.style.height = "auto"
      }
      if (fileInputRef.current) {
        fileInputRef.current.value = ""
      }
    }
  }

const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault()
      handleSend()
    }
  }

const handleFileSelect = () => {
    fileInputRef.current?.click()
  }

const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = Array.from(e.target.files || [])
    if (files.length === 0) return

const validFiles: File[] = []
    const errors: string[] = []

files.forEach((file) => {
      const validation = validateFile(file)
      if (validation.isValid) {
        validFiles.push(file)
      } else {
        errors.push(`${file.name}: ${validation.error}`)
      }
    })

if (errors.length > 0) {
      toast.error(`File validation failed:\n${errors.join("\n")}`)
    }

if (validFiles.length > 0) {
      setSelectedFiles((prev) => [...prev, ...validFiles])
      toast.success(`${validFiles.length} file(s) selected`)
    }

if (fileInputRef.current) {
      fileInputRef.current.value = ""
    }
  }

const removeFile = (index: number) => {
    setSelectedFiles((prev) => prev.filter((_, i) => i !== index))
  }

const handleMoneyTransferComplete = (transferData: any) => {
    const transferMessage = `💰 Sent $${transferData.amount.toFixed(2)} to ${recipientName}${
      transferData.message ? ` - "${transferData.message}"` : ""
    }`
    onSendMessage(transferMessage)
  }

const handleSupportRequestComplete = (ticketData: any) => {
    const supportMessage = `🎫 Created ${ticketData.ticketType} support ticket: "${ticketData.subject}"${
      ticketData.ticketType === "priority" ? ` (Paid $${ticketData.paymentAmount.toFixed(2)})` : ""
    }`
    onSendMessage(supportMessage)
  }

const adjustTextareaHeight = () => {
    const textarea = textareaRef.current
    if (textarea) {
      textarea.style.height = "auto"
      textarea.style.height = Math.min(textarea.scrollHeight, 120) + "px"
    }
  }

return (
    <>
      <div className={cn("border-t bg-background p-3 sm:p-4", className)}>
        {selectedFiles.length > 0 && (
          <div className="mb-3 space-y-2">
            <div className="flex items-center gap-2 text-sm text-muted-foreground">
              <Paperclip className="h-3 w-3" />
              <span>{selectedFiles.length} file(s) selected</span>
            </div>
            <div className="space-y-1 max-h-32 overflow-y-auto">
              {selectedFiles.map((file, index) => (
                <div key={index} className="flex items-center justify-between bg-muted/50 rounded-lg p-2">
                  <div className="flex items-center gap-2 min-w-0 flex-1">
                    <span className="text-lg">{getFileIcon(file.type)}</span>
                    <div className="min-w-0 flex-1">
                      <p className="text-sm font-medium truncate">{file.name}</p>
                      <p className="text-xs text-muted-foreground">{formatFileSize(file.size)}</p>
                    </div>
                  </div>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => removeFile(index)}
                    className="h-6 w-6 p-0 hover:bg-red-100 hover:text-red-600"
                  >
                    <X className="h-3 w-3" />
                  </Button>
                </div>
              ))}
            </div>
            <div className="flex items-center gap-1 text-xs text-orange-600">
              <AlertCircle className="h-3 w-3" />
              <span>Files will be automatically deleted after 14 days of chat inactivity</span>
            </div>
          </div>
        )}

{recipientId && recipientName && chatId && (
            <Button
              variant="ghost"
              size="icon"
              onClick={() => setIsMoneyTransferOpen(true)}
              disabled={disabled}
              className="flex-shrink-0 h-10 w-10 sm:h-11 sm:w-11 text-green-600 hover:text-green-700 hover:bg-green-50"
              title="Send Money"
            >
              <DollarSign className="h-4 w-4 sm:h-5 sm:w-5" />
            </Button>
          )}

<Button
            variant="ghost"
            size="icon"
            onClick={() => setIsSupportRequestOpen(true)}
            disabled={disabled}
            className="flex-shrink-0 h-10 w-10 sm:h-11 sm:w-11 text-blue-600 hover:text-blue-700 hover:bg-blue-50"
            title="Call Admin Support"
          >
            <HelpCircle className="h-4 w-4 sm:h-5 sm:w-5" />
          </Button>

<div className="flex-1 relative">
            <Textarea
              ref={textareaRef}
              value={message}
              onChange={(e) => {
                setMessage(e.target.value)
                setIsTyping(e.target.value.length > 0)
                adjustTextareaHeight()
              }}
              onKeyPress={handleKeyPress}
              placeholder={placeholder}
              disabled={disabled}
              className="min-h-[44px] sm:min-h-[40px] max-h-[120px] resize-none pr-12 py-3 sm:py-2 text-base sm:text-sm"
              rows={1}
            />

{isTyping && (
          <div className="text-xs text-muted-foreground mt-2 px-2 hidden sm:block">
            Press Enter to send, Shift+Enter for new line
          </div>
        )}
      </div>

{recipientId && recipientName && chatId && (
        <MoneyTransferDialog
          isOpen={isMoneyTransferOpen}
          onClose={() => setIsMoneyTransferOpen(false)}
          recipientName={recipientName}
          recipientId={recipientId}
          chatId={chatId}
          onTransferComplete={handleMoneyTransferComplete}
        />
      )}

<SupportRequestDialog
        isOpen={isSupportRequestOpen}
        onClose={() => setIsSupportRequestOpen(false)}
        chatId={chatId}
        onRequestComplete={handleSupportRequestComplete}
      />
    </>
  )
}
[V0_FILE]png:file="public/web-development-coding-laptop.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/web-development-coding-laptop-aLBZ5M5zdb5mF1mSDqWTy7XlBX783v.png" isMerged="true"
[V0_FILE]png:file="public/graphic-design-tools.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/graphic-design-tools-rMgR3ZasJ5UQ2pzWcccohfmT7lHB9i.png" isMerged="true"
[V0_FILE]png:file="public/content-writing-blog.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/content-writing-blog-0XvCiO7fkFHvHdBJGmcoJ36QSlYuh5.png" isMerged="true"
[V0_FILE]png:file="public/digital-marketing-social-media.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/digital-marketing-social-media-yIAvSXPDU01Rexk1J1j1mo8C4z7mtD.png" isMerged="true"
[V0_FILE]png:file="public/professional-work-task.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-work-task-xnOB9IpsrCpf2gOdN5fGhOi8LxBLqS.png" isMerged="true"
[V0_FILE]sql:file="scripts/06-create-category-management.sql" isMerged="true"
-- Adding category management tables with minimum payments and subcategories
-- Update categories table to support minimum payments
ALTER TABLE categories ADD COLUMN IF NOT EXISTS minimum_payment DECIMAL(10,2) DEFAULT 0.00;
ALTER TABLE categories ADD COLUMN IF NOT EXISTS sort_order INTEGER DEFAULT 0;

-- Create subcategories table for better organization
CREATE TABLE IF NOT EXISTS subcategories (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    category_id UUID NOT NULL REFERENCES categories(id) ON DELETE CASCADE,
    name VARCHAR(100) NOT NULL,
    slug VARCHAR(100) NOT NULL,
    description TEXT,
    minimum_payment DECIMAL(10,2) DEFAULT 0.00,
    sort_order INTEGER DEFAULT 0,
    is_active BOOLEAN DEFAULT TRUE,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    UNIQUE(category_id, slug)
);

-- Add indexes for performance
CREATE INDEX IF NOT EXISTS idx_subcategories_category_id ON subcategories(category_id);
CREATE INDEX IF NOT EXISTS idx_subcategories_active ON subcategories(is_active);

-- Update microjobs table to support subcategories
ALTER TABLE microjobs ADD COLUMN IF NOT EXISTS subcategory_id UUID REFERENCES subcategories(id);
CREATE INDEX IF NOT EXISTS idx_microjobs_subcategory_id ON microjobs(subcategory_id);
[V0_FILE]sql:file="scripts/07-seed-microjob-categories.sql" isMerged="true"
-- Seeding categories and subcategories for microjob platform
-- Clear existing categories and add microjob-specific ones
DELETE FROM categories WHERE slug IN ('web-development', 'mobile-development', 'design-creative', 'writing-translation', 'digital-marketing', 'data-analytics', 'video-animation', 'music-audio', 'business-services', 'education-training');

-- Insert main categories for microjobs
INSERT INTO categories (name, slug, description, icon, minimum_payment, sort_order) VALUES
('Social Media', 'social-media', 'Social media engagement and promotion tasks', 'share-2', 0.50, 1),
('Content Creation', 'content-creation', 'Writing, video, and creative content tasks', 'edit-3', 1.00, 2),
('Data Entry', 'data-entry', 'Data collection and entry tasks', 'database', 0.25, 3),
('Testing & Reviews', 'testing-reviews', 'App testing, website reviews, and feedback', 'star', 0.75, 4),
('Research', 'research', 'Online research and information gathering', 'search', 1.50, 5),
('Marketing', 'marketing', 'Digital marketing and promotional tasks', 'trending-up', 2.00, 6),
('Other', 'other', 'Miscellaneous microtasks', 'more-horizontal', 0.10, 7);

-- Insert subcategories for Social Media
INSERT INTO subcategories (category_id, name, slug, description, minimum_payment, sort_order) VALUES
((SELECT id FROM categories WHERE slug = 'social-media'), 'Facebook Tasks', 'facebook', 'Facebook likes, shares, follows, and engagement', 0.50, 1),
((SELECT id FROM categories WHERE slug = 'social-media'), 'YouTube Tasks', 'youtube', 'YouTube views, likes, subscribes, and comments', 0.75, 2),
((SELECT id FROM categories WHERE slug = 'social-media'), 'TikTok Tasks', 'tiktok', 'TikTok likes, follows, views, and engagement', 0.60, 3),
((SELECT id FROM categories WHERE slug = 'social-media'), 'Instagram Tasks', 'instagram', 'Instagram likes, follows, and story views', 0.65, 4),
((SELECT id FROM categories WHERE slug = 'social-media'), 'Twitter Tasks', 'twitter', 'Twitter likes, retweets, and follows', 0.55, 5),
((SELECT id FROM categories WHERE slug = 'social-media'), 'Telegram Tasks', 'telegram', 'Telegram channel joins and engagement', 0.40, 6);

-- Insert subcategories for Content Creation
INSERT INTO subcategories (category_id, name, slug, description, minimum_payment, sort_order) VALUES
((SELECT id FROM categories WHERE slug = 'content-creation'), 'Article Writing', 'article-writing', 'Short articles and blog posts', 5.00, 1),
((SELECT id FROM categories WHERE slug = 'content-creation'), 'Product Reviews', 'product-reviews', 'Product and service reviews', 2.50, 2),
((SELECT id FROM categories WHERE slug = 'content-creation'), 'Video Creation', 'video-creation', 'Short video content creation', 10.00, 3),
((SELECT id FROM categories WHERE slug = 'content-creation'), 'Image Editing', 'image-editing', 'Basic photo editing and enhancement', 3.00, 4);

-- Insert subcategories for Data Entry
INSERT INTO subcategories (category_id, name, slug, description, minimum_payment, sort_order) VALUES
((SELECT id FROM categories WHERE slug = 'data-entry'), 'Form Filling', 'form-filling', 'Online form completion and submission', 0.25, 1),
((SELECT id FROM categories WHERE slug = 'data-entry'), 'Data Collection', 'data-collection', 'Gathering information from websites', 0.50, 2),
((SELECT id FROM categories WHERE slug = 'data-entry'), 'Spreadsheet Work', 'spreadsheet-work', 'Excel and Google Sheets data entry', 0.75, 3),
((SELECT id FROM categories WHERE slug = 'data-entry'), 'Contact Research', 'contact-research', 'Finding contact information and emails', 1.00, 4);

-- Insert subcategories for Testing & Reviews
INSERT INTO subcategories (category_id, name, slug, description, minimum_payment, sort_order) VALUES
((SELECT id FROM categories WHERE slug = 'testing-reviews'), 'App Testing', 'app-testing', 'Mobile and web application testing', 2.00, 1),
((SELECT id FROM categories WHERE slug = 'testing-reviews'), 'Website Reviews', 'website-reviews', 'Website usability and feedback', 1.50, 2),
((SELECT id FROM categories WHERE slug = 'testing-reviews'), 'Product Testing', 'product-testing', 'Physical and digital product testing', 3.00, 3),
((SELECT id FROM categories WHERE slug = 'testing-reviews'), 'Survey Participation', 'survey-participation', 'Online surveys and questionnaires', 0.75, 4);

-- Insert subcategories for Research
INSERT INTO subcategories (category_id, name, slug, description, minimum_payment, sort_order) VALUES
((SELECT id FROM categories WHERE slug = 'research'), 'Market Research', 'market-research', 'Industry and market analysis', 5.00, 1),
((SELECT id FROM categories WHERE slug = 'research'), 'Lead Generation', 'lead-generation', 'Finding potential customers and contacts', 2.00, 2),
((SELECT id FROM categories WHERE slug = 'research'), 'Competitor Analysis', 'competitor-analysis', 'Analyzing competitor strategies', 3.00, 3),
((SELECT id FROM categories WHERE slug = 'research'), 'Price Comparison', 'price-comparison', 'Comparing prices across platforms', 1.50, 4);

-- Insert subcategories for Marketing
INSERT INTO subcategories (category_id, name, slug, description, minimum_payment, sort_order) VALUES
((SELECT id FROM categories WHERE slug = 'marketing'), 'Email Marketing', 'email-marketing', 'Email campaign creation and management', 5.00, 1),
((SELECT id FROM categories WHERE slug = 'marketing'), 'SEO Tasks', 'seo-tasks', 'Search engine optimization activities', 3.00, 2),
((SELECT id FROM categories WHERE slug = 'marketing'), 'Social Media Marketing', 'social-media-marketing', 'Social media campaign management', 4.00, 3),
((SELECT id FROM categories WHERE slug = 'marketing'), 'Content Marketing', 'content-marketing', 'Content strategy and promotion', 6.00, 4);
[V0_FILE]typescriptreact:file="app/forgot-password/page.tsx" isMerged="true"
import { ForgotPasswordForm } from "@/components/auth/forgot-password-form"
import { ArrowLeft } from "lucide-react"
import Link from "next/link"

export default function ForgotPasswordPage() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-white to-orange-50 p-4">
      <div className="absolute top-4 left-4">
        <Link href="/login" className="flex items-center text-gray-600 hover:text-gray-900 transition-colors">
          <ArrowLeft className="h-4 w-4 mr-2" />
          Back to Login
        </Link>
      </div>

<div className="w-full max-w-md">
        <div className="text-center mb-8">
          <div className="flex items-center justify-center space-x-2 mb-4">
            <div className="w-10 h-10 bg-gradient-to-r from-blue-600 to-orange-500 rounded-lg flex items-center justify-center">
              <span className="text-white font-bold text-lg">W</span>
            </div>
            <h1 className="text-3xl font-bold text-gray-900">WorkHub</h1>
          </div>
          <p className="text-gray-600">Reset your password</p>
        </div>
        <ForgotPasswordForm />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/auth/forgot-password-form.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import Link from "next/link"
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 { Loader2, Mail, CheckCircle } from "lucide-react"

export function ForgotPasswordForm() {
  const [email, setEmail] = useState("")
  const [error, setError] = useState("")
  const [success, setSuccess] = useState(false)
  const [isLoading, setIsLoading] = useState(false)

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError("")
    setIsLoading(true)

if (!email) {
      setError("Please enter your email address")
      setIsLoading(false)
      return
    }

try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 2000))
      setSuccess(true)
    } catch (err) {
      setError("Failed to send reset email. Please try again.")
    } finally {
      setIsLoading(false)
    }
  }

if (success) {
    return (
      <Card className="w-full max-w-md mx-auto shadow-lg border-0">
        <CardHeader className="text-center">
          <div className="mx-auto mb-4 w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
            <CheckCircle className="h-6 w-6 text-green-600" />
          </div>
          <CardTitle className="text-2xl font-bold">Check your email</CardTitle>
          <CardDescription>We've sent a password reset link to {email}</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <p className="text-sm text-muted-foreground text-center">
            Didn't receive the email? Check your spam folder or try again.
          </p>
          <div className="flex gap-2">
            <Button variant="outline" className="flex-1 bg-transparent" onClick={() => setSuccess(false)}>
              Try Again
            </Button>
            <Link href="/login" className="flex-1">
              <Button className="w-full">Back to Login</Button>
            </Link>
          </div>
        </CardContent>
      </Card>
    )
  }

return (
    <Card className="w-full max-w-md mx-auto shadow-lg border-0">
      <CardHeader className="space-y-1">
        <CardTitle className="text-2xl font-bold text-center">Reset Password</CardTitle>
        <CardDescription className="text-center">
          Enter your email address and we'll send you a link to reset your password
        </CardDescription>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-4">
          {error && (
            <Alert variant="destructive">
              <AlertDescription>{error}</AlertDescription>
            </Alert>
          )}

<div className="space-y-2">
            <Label htmlFor="email">Email</Label>
            <div className="relative">
              <Mail className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
              <Input
                id="email"
                type="email"
                placeholder="Enter your email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                className="pl-10"
                disabled={isLoading}
                autoComplete="email"
              />
            </div>
          </div>

<Button type="submit" className="w-full" disabled={isLoading}>
            {isLoading ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                Sending reset link...
              </>
            ) : (
              "Send Reset Link"
            )}
          </Button>
        </form>

<div className="mt-6 text-center text-sm">
          <span className="text-muted-foreground">Remember your password? </span>
          <Link href="/login" className="text-primary hover:underline font-medium">
            Sign in
          </Link>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/search/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useSearchParams } from "next/navigation"
import { DashboardHeader } from "@/components/dashboard/dashboard-header"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Search, MapPin, Clock } from "lucide-react"

const handleSearch = async (searchQuery: string) => {
    setLoading(true)
    // Simulate search API call
    await new Promise((resolve) => setTimeout(resolve, 1000))

// Mock search results
    const mockResults = [
      {
        id: 1,
        title: "React Developer Needed",
        description: "Looking for an experienced React developer to build a modern web application",
        price: 500,
        location: "Remote",
        timeAgo: "2 hours ago",
        type: "job",
      },
      {
        id: 2,
        title: "Logo Design Service",
        description: "Professional logo design for your business or startup",
        price: 150,
        location: "Remote",
        timeAgo: "1 day ago",
        type: "service",
      },
    ].filter(
      (item) =>
        item.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
        item.description.toLowerCase().includes(searchQuery.toLowerCase()),
    )

setResults(mockResults)
    setLoading(false)
  }

useEffect(() => {
    if (query) {
      handleSearch(query)
    }
  }, [query])

return (
    <>
      <DashboardHeader
        title="Search Results"
        description={query ? `Results for "${query}"` : "Search jobs and services"}
      />

<div className="flex-1 overflow-auto bg-gray-50 p-6">
        <div className="max-w-4xl mx-auto">
          <div className="mb-6">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" />
              <Input
                placeholder="Search jobs, services, skills..."
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                className="pl-12 h-12 text-lg"
              />
            </div>
          </div>

{loading ? (
            <div className="text-center py-12">
              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
              <p className="mt-4 text-gray-600">Searching...</p>
            </div>
          ) : (
            <>
              {results.length > 0 && (
                <div className="mb-4">
                  <p className="text-gray-600">Found {results.length} results</p>
                </div>
              )}

<div className="space-y-4">
                {results.map((item) => (
                  <Card key={item.id} className="hover:shadow-lg transition-shadow">
                    <CardContent className="p-6">
                      <div className="flex items-start justify-between">
                        <div className="flex-1">
                          <div className="flex items-center space-x-2 mb-2">
                            <Badge variant={item.type === "job" ? "default" : "secondary"}>
                              {item.type === "job" ? "Job" : "Service"}
                            </Badge>
                          </div>
                          <h3 className="text-lg font-semibold text-gray-900 mb-2">{item.title}</h3>
                          <p className="text-gray-600 mb-4">{item.description}</p>
                          <div className="flex items-center space-x-4 text-sm text-gray-500">
                            <div className="flex items-center">
                              <MapPin className="h-4 w-4 mr-1" />
                              {item.location}
                            </div>
                            <div className="flex items-center">
                              <Clock className="h-4 w-4 mr-1" />
                              {item.timeAgo}
                            </div>
                          </div>
                        </div>
                        <div className="text-right">
                          <div className="text-2xl font-bold text-green-600 mb-2">${item.price}</div>
                          <Button>{item.type === "job" ? "Apply Now" : "Order Now"}</Button>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>

{query && results.length === 0 && !loading && (
                <div className="text-center py-12">
                  <div className="w-16 h-16 mx-auto mb-4 bg-gray-100 rounded-full flex items-center justify-center">
                    <Search className="h-8 w-8 text-gray-400" />
                  </div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-2">No results found</h3>
                  <p className="text-gray-600">
                    Try adjusting your search terms or browse all available jobs and services.
                  </p>
                </div>
              )}
            </>
          )}
        </div>
      </div>
    </>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/search/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/reports/page.tsx" isMerged="true"
"use client"

interface Report {
  id: string
  title: string
  description: string
  type: "financial" | "user" | "system" | "security"
  status: "ready" | "generating" | "scheduled"
  createdAt: string
  size: string
  downloadUrl?: string
}

const mockReports: Report[] = [
  {
    id: "1",
    title: "Monthly Financial Report",
    description: "Complete financial overview including revenue, expenses, and profit margins",
    type: "financial",
    status: "ready",
    createdAt: "2024-01-20T10:00:00Z",
    size: "2.4 MB",
    downloadUrl: "/reports/financial-jan-2024.pdf",
  },
  {
    id: "2",
    title: "User Activity Analysis",
    description: "Detailed analysis of user engagement, retention, and behavior patterns",
    type: "user",
    status: "ready",
    createdAt: "2024-01-19T15:30:00Z",
    size: "1.8 MB",
    downloadUrl: "/reports/user-activity-jan-2024.pdf",
  },
  {
    id: "3",
    title: "System Performance Report",
    description: "Server performance, uptime statistics, and technical metrics",
    type: "system",
    status: "generating",
    createdAt: "2024-01-20T12:00:00Z",
    size: "Generating...",
  },
  {
    id: "4",
    title: "Security Audit Report",
    description: "Security incidents, threat analysis, and compliance status",
    type: "security",
    status: "scheduled",
    createdAt: "2024-01-21T09:00:00Z",
    size: "Scheduled",
  },
]

export default function AdminReportsPage() {
  const [reports, setReports] = useState<Report[]>(mockReports)
  const [loading, setLoading] = useState(false)
  const [searchQuery, setSearchQuery] = useState("")
  const [filterType, setFilterType] = useState<string>("all")
  const [activeTab, setActiveTab] = useState("all")

const generateReport = async (type: string) => {
    setLoading(true)
    // Simulate report generation
    await new Promise((resolve) => setTimeout(resolve, 2000))

const newReport: Report = {
      id: Date.now().toString(),
      title: `${type.charAt(0).toUpperCase() + type.slice(1)} Report`,
      description: `Generated ${type} report for current period`,
      type: type as any,
      status: "ready",
      createdAt: new Date().toISOString(),
      size: "1.2 MB",
      downloadUrl: `/reports/${type}-${Date.now()}.pdf`,
    }

setReports((prev) => [newReport, ...prev])
    setLoading(false)
    alert("Report generated successfully!")
  }

const downloadReport = (report: Report) => {
    if (report.downloadUrl) {
      // Simulate download
      alert(`Downloading ${report.title}...`)
    }
  }

const filteredReports = reports.filter((report) => {
    const matchesSearch =
      searchQuery === "" ||
      report.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
      report.description.toLowerCase().includes(searchQuery.toLowerCase())

const matchesFilter = filterType === "all" || report.type === filterType
    const matchesTab = activeTab === "all" || report.status === activeTab

return matchesSearch && matchesFilter && matchesTab
  })

const getStatusBadge = (status: Report["status"]) => {
    switch (status) {
      case "ready":
        return <Badge className="bg-green-100 text-green-800">Ready</Badge>
      case "generating":
        return <Badge className="bg-yellow-100 text-yellow-800">Generating</Badge>
      case "scheduled":
        return <Badge className="bg-blue-100 text-blue-800">Scheduled</Badge>
      default:
        return <Badge variant="secondary">{status}</Badge>
    }
  }

const getTypeIcon = (type: Report["type"]) => {
    switch (type) {
      case "financial":
        return <DollarSign className="h-4 w-4 text-green-600" />
      case "user":
        return <Users className="h-4 w-4 text-blue-600" />
      case "system":
        return <TrendingUp className="h-4 w-4 text-purple-600" />
      case "security":
        return <AlertTriangle className="h-4 w-4 text-red-600" />
      default:
        return <FileText className="h-4 w-4 text-gray-600" />
    }
  }

return (
    <>
      <AdminHeader title="Reports & Analytics" description="Generate and manage platform reports" />

<div className="flex-1 overflow-auto p-6">
        <div className="space-y-6">
          {/* Quick Actions */}
          <Card>
            <CardHeader>
              <CardTitle>Generate New Report</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <Button
                  onClick={() => generateReport("financial")}
                  disabled={loading}
                  className="h-20 flex flex-col items-center justify-center space-y-2 bg-green-600 hover:bg-green-700"
                >
                  <DollarSign className="h-6 w-6" />
                  <span>Financial Report</span>
                </Button>
                <Button
                  onClick={() => generateReport("user")}
                  disabled={loading}
                  className="h-20 flex flex-col items-center justify-center space-y-2 bg-blue-600 hover:bg-blue-700"
                >
                  <Users className="h-6 w-6" />
                  <span>User Analytics</span>
                </Button>
                <Button
                  onClick={() => generateReport("system")}
                  disabled={loading}
                  className="h-20 flex flex-col items-center justify-center space-y-2 bg-purple-600 hover:bg-purple-700"
                >
                  <TrendingUp className="h-6 w-6" />
                  <span>System Report</span>
                </Button>
                <Button
                  onClick={() => generateReport("security")}
                  disabled={loading}
                  className="h-20 flex flex-col items-center justify-center space-y-2 bg-red-600 hover:bg-red-700"
                >
                  <AlertTriangle className="h-6 w-6" />
                  <span>Security Audit</span>
                </Button>
              </div>
            </CardContent>
          </Card>

{/* Search and Filters */}
          <Card>
            <CardContent className="p-6">
              <div className="flex flex-col sm:flex-row gap-4">
                <div className="relative flex-1">
                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
                  <Input
                    placeholder="Search reports..."
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    className="pl-10"
                  />
                </div>
                <Select value={filterType} onValueChange={setFilterType}>
                  <SelectTrigger className="w-48">
                    <Filter className="h-4 w-4 mr-2" />
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Types</SelectItem>
                    <SelectItem value="financial">Financial</SelectItem>
                    <SelectItem value="user">User Analytics</SelectItem>
                    <SelectItem value="system">System</SelectItem>
                    <SelectItem value="security">Security</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </CardContent>
          </Card>

{/* Reports List */}
          <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
            <TabsList>
              <TabsTrigger value="all">All Reports ({reports.length})</TabsTrigger>
              <TabsTrigger value="ready">Ready ({reports.filter((r) => r.status === "ready").length})</TabsTrigger>
              <TabsTrigger value="generating">
                Generating ({reports.filter((r) => r.status === "generating").length})
              </TabsTrigger>
              <TabsTrigger value="scheduled">
                Scheduled ({reports.filter((r) => r.status === "scheduled").length})
              </TabsTrigger>
            </TabsList>

<TabsContent value={activeTab}>
              <div className="space-y-4">
                {filteredReports.map((report) => (
                  <Card key={report.id} className="hover:shadow-md transition-shadow">
                    <CardContent className="p-6">
                      <div className="flex items-center justify-between">
                        <div className="flex items-start space-x-4">
                          <div className="p-2 bg-gray-100 rounded-lg">{getTypeIcon(report.type)}</div>
                          <div className="flex-1">
                            <div className="flex items-center space-x-2 mb-2">
                              <h3 className="font-semibold text-gray-900">{report.title}</h3>
                              {getStatusBadge(report.status)}
                            </div>
                            <p className="text-sm text-gray-600 mb-2">{report.description}</p>
                            <div className="flex items-center space-x-4 text-xs text-gray-500">
                              <div className="flex items-center">
                                <Calendar className="h-3 w-3 mr-1" />
                                {new Date(report.createdAt).toLocaleDateString()}
                              </div>
                              <div className="flex items-center">
                                <FileText className="h-3 w-3 mr-1" />
                                {report.size}
                              </div>
                            </div>
                          </div>
                        </div>

<div className="flex items-center space-x-2">
                          {report.status === "ready" && (
                            <Button
                              size="sm"
                              onClick={() => downloadReport(report)}
                              className="bg-transparent"
                              variant="outline"
                            >
                              <Download className="h-4 w-4 mr-2" />
                              Download
                            </Button>
                          )}
                          {report.status === "generating" && (
                            <div className="flex items-center text-sm text-yellow-600">
                              <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-yellow-600 mr-2"></div>
                              Generating...
                            </div>
                          )}
                          {report.status === "scheduled" && (
                            <div className="text-sm text-blue-600">
                              Scheduled for {new Date(report.createdAt).toLocaleDateString()}
                            </div>
                          )}
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                ))}

{filteredReports.length === 0 && (
                  <div className="text-center py-12">
                    <FileText className="h-12 w-12 text-gray-400 mx-auto mb-4" />
                    <h3 className="text-lg font-semibold text-gray-900 mb-2">No reports found</h3>
                    <p className="text-gray-600">
                      {searchQuery || filterType !== "all"
                        ? "Try adjusting your search or filters"
                        : "Generate your first report using the buttons above"}
                    </p>
                  </div>
                )}
              </div>
            </TabsContent>
          </Tabs>
        </div>
      </div>
    </>
  )
}
[V0_FILE]typescriptreact:file="app/admin/reports/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/help/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/search/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useSearchParams } from "next/navigation"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Search, Filter, MapPin, Star, Clock, Users, Briefcase, ShoppingBag } from "lucide-react"
import Link from "next/link"
import { useMarketplace } from "@/components/marketplace/marketplace-provider"
import { serviceStorage } from "@/lib/local-storage"

interface SearchResult {
  id: string
  type: "job" | "service" | "user"
  title: string
  description: string
  price?: number
  location?: string
  rating?: number
  reviews?: number
  imageUrl?: string
  user?: {
    name: string
    username: string
    avatar?: string
  }
  tags: string[]
  createdAt: string
}

const mockResults: SearchResult[] = [
  {
    id: "1",
    type: "job",
    title: "React Developer for E-commerce Platform",
    description:
      "Looking for an experienced React developer to build a modern e-commerce platform with advanced features.",
    price: 2500,
    location: "Remote",
    tags: ["React", "JavaScript", "E-commerce"],
    user: { name: "John Smith", username: "johnsmith" },
    createdAt: "2024-01-15T10:00:00Z",
  },
  {
    id: "3",
    type: "user",
    title: "Sarah Johnson - UI/UX Designer",
    description: "Creative UI/UX designer with 5+ years of experience in web and mobile design.",
    rating: 4.9,
    reviews: 89,
    tags: ["UI/UX Design", "Figma", "Prototyping"],
    user: { name: "Sarah Johnson", username: "sarah_designer" },
    createdAt: "2023-01-15T10:00:00Z",
  },
]

export default function SearchPage() {
  const searchParams = useSearchParams()
  const [query, setQuery] = useState(searchParams.get("q") || "")
  const [results, setResults] = useState<SearchResult[]>([])
  const [loading, setLoading] = useState(false)
  const [activeTab, setActiveTab] = useState("all")
  const [sortBy, setSortBy] = useState("relevance")
  const [priceRange, setPriceRange] = useState("all")

const { isUserInVacationMode } = useMarketplace()

useEffect(() => {
    if (query) {
      performSearch()
    }
  }, [query, activeTab, sortBy, priceRange])

const performSearch = async () => {
    setLoading(true)
    try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 500))

const userServices = serviceStorage.getAll()
      const activeUserServices = userServices
        .filter((service) => service.status === "active")
        .filter((service) => !isUserInVacationMode(service.sellerId))
        .map((service) => ({
          id: service.id,
          type: "service" as const,
          title: service.title,
          description: service.description,
          price: service.price,
          rating: service.rating,
          reviews: service.totalOrders,
          imageUrl: service.images[0],
          tags: service.tags,
          user: {
            name: `${service.seller.firstName} ${service.seller.lastName}`,
            username: service.seller.username,
          },
          createdAt: service.createdAt,
        }))

// Combine with mock results (excluding mock services to avoid duplicates)
      const mockNonServiceResults = mockResults.filter((result) => result.type !== "service")
      const allResults = [...mockNonServiceResults, ...activeUserServices]

let filteredResults = allResults.filter(
        (result) =>
          result.title.toLowerCase().includes(query.toLowerCase()) ||
          result.description.toLowerCase().includes(query.toLowerCase()) ||
          result.tags.some((tag) => tag.toLowerCase().includes(query.toLowerCase())),
      )

if (activeTab !== "all") {
        filteredResults = filteredResults.filter((result) => result.type === activeTab)
      }

setResults(filteredResults)
    } catch (error) {
      console.error("Search failed:", error)
    } finally {
      setLoading(false)
    }
  }

const handleSearch = (e: React.FormEvent) => {
    e.preventDefault()
    performSearch()
  }

const getResultIcon = (type: SearchResult["type"]) => {
    switch (type) {
      case "job":
        return <Briefcase className="h-5 w-5 text-blue-600" />
      case "service":
        return <ShoppingBag className="h-5 w-5 text-green-600" />
      case "user":
        return <Users className="h-5 w-5 text-purple-600" />
    }
  }

const filteredResults = results.filter((result) => {
    if (activeTab !== "all" && result.type !== activeTab) return false
    return true
  })

return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <div className="bg-white border-b">
        <div className="container mx-auto px-4 py-6">
          <form onSubmit={handleSearch} className="max-w-2xl mx-auto">
            <div className="relative">
              <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" />
              <Input
                placeholder="Search jobs, services, or freelancers..."
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                className="pl-12 h-12 text-lg"
              />
              <Button type="submit" className="absolute right-2 top-2 bottom-2">
                Search
              </Button>
            </div>
          </form>
        </div>
      </div>

<div className="container mx-auto px-4 py-8">
        <div className="grid lg:grid-cols-4 gap-8">
          {/* Filters Sidebar */}
          <div className="lg:col-span-1">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <Filter className="mr-2 h-5 w-5" />
                  Filters
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div>
                  <label className="text-sm font-medium text-gray-700 mb-2 block">Sort By</label>
                  <Select value={sortBy} onValueChange={setSortBy}>
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="relevance">Relevance</SelectItem>
                      <SelectItem value="newest">Newest First</SelectItem>
                      <SelectItem value="price_low">Price: Low to High</SelectItem>
                      <SelectItem value="price_high">Price: High to Low</SelectItem>
                      <SelectItem value="rating">Highest Rated</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

<div>
                  <label className="text-sm font-medium text-gray-700 mb-2 block">Price Range</label>
                  <Select value={priceRange} onValueChange={setPriceRange}>
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">All Prices</SelectItem>
                      <SelectItem value="0-100">$0 - $100</SelectItem>
                      <SelectItem value="100-500">$100 - $500</SelectItem>
                      <SelectItem value="500-1000">$500 - $1,000</SelectItem>
                      <SelectItem value="1000+">$1,000+</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

<div>
                  <label className="text-sm font-medium text-gray-700 mb-2 block">Location</label>
                  <Select>
                    <SelectTrigger>
                      <SelectValue placeholder="Any Location" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="remote">Remote</SelectItem>
                      <SelectItem value="us">United States</SelectItem>
                      <SelectItem value="uk">United Kingdom</SelectItem>
                      <SelectItem value="ca">Canada</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </CardContent>
            </Card>
          </div>

{/* Results */}
          <div className="lg:col-span-3">
            <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
              <div className="flex items-center justify-between">
                <TabsList>
                  <TabsTrigger value="all">All ({results.length})</TabsTrigger>
                  <TabsTrigger value="job">Jobs ({results.filter((r) => r.type === "job").length})</TabsTrigger>
                  <TabsTrigger value="service">
                    Services ({results.filter((r) => r.type === "service").length})
                  </TabsTrigger>
                  <TabsTrigger value="user">
                    Freelancers ({results.filter((r) => r.type === "user").length})
                  </TabsTrigger>
                </TabsList>

<div className="text-sm text-gray-600">
                  {loading ? "Searching..." : `${filteredResults.length} results found`}
                </div>
              </div>

<TabsContent value={activeTab}>
                {loading ? (
                  <div className="space-y-4">
                    {[...Array(3)].map((_, i) => (
                      <Card key={i} className="animate-pulse">
                        <CardContent className="p-6">
                          <div className="flex space-x-4">
                            <div className="w-16 h-16 bg-gray-200 rounded"></div>
                            <div className="flex-1 space-y-2">
                              <div className="h-4 bg-gray-200 rounded w-3/4"></div>
                              <div className="h-3 bg-gray-200 rounded w-1/2"></div>
                              <div className="h-3 bg-gray-200 rounded w-2/3"></div>
                            </div>
                          </div>
                        </CardContent>
                      </Card>
                    ))}
                  </div>
                ) : filteredResults.length > 0 ? (
                  <div className="space-y-4">
                    {filteredResults.map((result) => (
                      <Card key={result.id} className="hover:shadow-md transition-shadow">
                        <CardContent className="p-6">
                          <div className="flex items-start space-x-4">
                            <div className="flex-shrink-0">
                              {result.type === "user" ? (
                                <Avatar className="h-16 w-16">
                                  <AvatarFallback>
                                    {result.user?.name
                                      .split(" ")
                                      .map((n) => n[0])
                                      .join("")}
                                  </AvatarFallback>
                                </Avatar>
                              ) : result.imageUrl ? (
                                <img
                                  src={result.imageUrl || "/placeholder.svg"}
                                  alt={result.title}
                                  className="w-16 h-16 object-cover rounded"
                                />
                              ) : (
                                <div className="w-16 h-16 bg-gray-100 rounded flex items-center justify-center">
                                  {getResultIcon(result.type)}
                                </div>
                              )}
                            </div>

<div className="flex-1 min-w-0">
                              <div className="flex items-start justify-between mb-2">
                                <div className="flex items-center space-x-2">
                                  {getResultIcon(result.type)}
                                  <Badge variant="outline" className="text-xs">
                                    {result.type}
                                  </Badge>
                                </div>
                                {result.price && (
                                  <span className="text-lg font-bold text-green-600">${result.price}</span>
                                )}
                              </div>

<h3 className="text-lg font-semibold text-gray-900 mb-2 hover:text-blue-600">
                                <Link
                                  href={
                                    result.type === "job"
                                      ? `/jobs/${result.id}`
                                      : result.type === "service"
                                        ? `/marketplace/${result.id}`
                                        : `/profile/${result.user?.username}`
                                  }
                                >
                                  {result.title}
                                </Link>
                              </h3>

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

<div className="flex items-center space-x-4 text-sm text-gray-500 mb-3">
                                {result.user && <span>by {result.user.name}</span>}
                                {result.location && (
                                  <div className="flex items-center">
                                    <MapPin className="h-3 w-3 mr-1" />
                                    {result.location}
                                  </div>
                                )}
                                {result.rating && (
                                  <div className="flex items-center">
                                    <Star className="h-3 w-3 mr-1 text-yellow-400 fill-current" />
                                    {result.rating} ({result.reviews})
                                  </div>
                                )}
                                <div className="flex items-center">
                                  <Clock className="h-3 w-3 mr-1" />
                                  {new Date(result.createdAt).toLocaleDateString()}
                                </div>
                              </div>

<div className="flex flex-wrap gap-2">
                                {result.tags.slice(0, 3).map((tag) => (
                                  <Badge key={tag} variant="secondary" className="text-xs">
                                    {tag}
                                  </Badge>
                                ))}
                                {result.tags.length > 3 && (
                                  <Badge variant="secondary" className="text-xs">
                                    +{result.tags.length - 3} more
                                  </Badge>
                                )}
                              </div>
                            </div>
                          </div>
                        </CardContent>
                      </Card>
                    ))}
                  </div>
                ) : (
                  <div className="text-center py-12">
                    <Search className="h-12 w-12 text-gray-400 mx-auto mb-4" />
                    <h3 className="text-lg font-medium text-gray-900 mb-2">No results found</h3>
                    <p className="text-gray-600 mb-4">Try adjusting your search terms or filters</p>
                    <Button onClick={() => setQuery("")}>Clear Search</Button>
                  </div>
                )}
              </TabsContent>
            </Tabs>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/search/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="components/file-upload.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useCallback } from "react"
import { useDropzone } from "react-dropzone"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Upload, type File, X, ImageIcon, FileText, Download } from "lucide-react"

interface FileUploadProps {
  onFilesChange?: (files: File[]) => void
  maxFiles?: number
  maxSize?: number // in MB
  acceptedTypes?: string[]
  showPreview?: boolean
}

interface UploadedFile {
  file: File
  preview?: string
  progress: number
  status: "uploading" | "completed" | "error"
}

export function FileUpload({
  onFilesChange,
  maxFiles = 5,
  maxSize = 10,
  acceptedTypes = ["image/*", "application/pdf", ".doc", ".docx"],
  showPreview = true,
}: FileUploadProps) {
  const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([])

const onDrop = useCallback(
    (acceptedFiles: File[]) => {
      const newFiles = acceptedFiles.slice(0, maxFiles - uploadedFiles.length).map((file) => ({
        file,
        preview: file.type.startsWith("image/") ? URL.createObjectURL(file) : undefined,
        progress: 0,
        status: "uploading" as const,
      }))

setUploadedFiles((prev) => [...prev, ...newFiles])

// Simulate upload progress
      newFiles.forEach((uploadFile, index) => {
        const interval = setInterval(() => {
          setUploadedFiles((prev) =>
            prev.map((f) => (f.file === uploadFile.file ? { ...f, progress: Math.min(f.progress + 10, 100) } : f)),
          )
        }, 200)

setTimeout(() => {
          clearInterval(interval)
          setUploadedFiles((prev) =>
            prev.map((f) => (f.file === uploadFile.file ? { ...f, progress: 100, status: "completed" } : f)),
          )
        }, 2000)
      })

onFilesChange?.(acceptedFiles)
    },
    [uploadedFiles.length, maxFiles, onFilesChange],
  )

const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    maxFiles: maxFiles - uploadedFiles.length,
    maxSize: maxSize * 1024 * 1024,
    accept: acceptedTypes.reduce((acc, type) => ({ ...acc, [type]: [] }), {}),
  })

const removeFile = (fileToRemove: File) => {
    setUploadedFiles((prev) => {
      const updated = prev.filter((f) => f.file !== fileToRemove)
      onFilesChange?.(updated.map((f) => f.file))
      return updated
    })
  }

const getFileIcon = (file: File) => {
    if (file.type.startsWith("image/")) {
      return <ImageIcon className="h-5 w-5 text-blue-600" />
    }
    return <FileText className="h-5 w-5 text-gray-600" />
  }

const formatFileSize = (bytes: number) => {
    if (bytes === 0) return "0 Bytes"
    const k = 1024
    const sizes = ["Bytes", "KB", "MB", "GB"]
    const i = Math.floor(Math.log(bytes) / Math.log(k))
    return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i]
  }

return (
    <div className="space-y-4">
      {/* Upload Area */}
      {uploadedFiles.length < maxFiles && (
        <Card>
          <CardContent className="p-6">
            <div
              {...getRootProps()}
              className={`border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors ${
                isDragActive ? "border-blue-500 bg-blue-50" : "border-gray-300 hover:border-gray-400"
              }`}
            >
              <input {...getInputProps()} />
              <Upload className="h-12 w-12 text-gray-400 mx-auto mb-4" />
              {isDragActive ? (
                <p className="text-blue-600 font-medium">Drop the files here...</p>
              ) : (
                <div>
                  <p className="text-gray-600 font-medium mb-2">Drag & drop files here, or click to select</p>
                  <p className="text-sm text-gray-500">
                    Max {maxFiles} files, up to {maxSize}MB each
                  </p>
                  <p className="text-xs text-gray-400 mt-1">Supported: Images, PDF, DOC, DOCX</p>
                </div>
              )}
            </div>
          </CardContent>
        </Card>
      )}

{/* Uploaded Files */}
      {uploadedFiles.length > 0 && (
        <div className="space-y-3">
          <h4 className="font-medium text-gray-900">
            Uploaded Files ({uploadedFiles.length}/{maxFiles})
          </h4>

{uploadedFiles.map((uploadFile, index) => (
            <Card key={index}>
              <CardContent className="p-4">
                <div className="flex items-center space-x-4">
                  {/* File Preview/Icon */}
                  <div className="flex-shrink-0">
                    {showPreview && uploadFile.preview ? (
                      <img
                        src={uploadFile.preview || "/placeholder.svg"}
                        alt={uploadFile.file.name}
                        className="w-12 h-12 object-cover rounded"
                      />
                    ) : (
                      <div className="w-12 h-12 bg-gray-100 rounded flex items-center justify-center">
                        {getFileIcon(uploadFile.file)}
                      </div>
                    )}
                  </div>

{/* File Info */}
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center justify-between mb-1">
                      <p className="text-sm font-medium text-gray-900 truncate">{uploadFile.file.name}</p>
                      <div className="flex items-center space-x-2">
                        <Badge
                          variant={
                            uploadFile.status === "completed"
                              ? "default"
                              : uploadFile.status === "error"
                                ? "destructive"
                                : "secondary"
                          }
                          className="text-xs"
                        >
                          {uploadFile.status}
                        </Badge>
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => removeFile(uploadFile.file)}
                          className="h-6 w-6 p-0"
                        >
                          <X className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>

<div className="flex items-center justify-between text-xs text-gray-500 mb-2">
                      <span>{formatFileSize(uploadFile.file.size)}</span>
                      {uploadFile.status === "completed" && (
                        <Button variant="ghost" size="sm" className="h-6 px-2">
                          <Download className="h-3 w-3 mr-1" />
                          Download
                        </Button>
                      )}
                    </div>

{/* Progress Bar */}
                    {uploadFile.status === "uploading" && <Progress value={uploadFile.progress} className="h-2" />}
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      )}
    </div>
  )
}
[V0_FILE]png:file="public/mobile-app-design-concept.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/mobile-app-design-concept-XqR5CeVAJpQiMscvTU8IOr6zQ6ClB3.png" isMerged="true"
[V0_FILE]png:file="public/modern-data-dashboard.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-data-dashboard-cprUCGUP3A81fjNSGnju39D5DmRNgd.png" isMerged="true"
[V0_FILE]png:file="public/brand-identity-concept.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/brand-identity-concept-6eGXF7HjMCNRW4tIkMyMtAyxEnuSDd.png" isMerged="true"
[V0_FILE]png:file="public/website-design-concept.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/website-design-concept-dzmrjviakW17pPv3WkdqvDY7ZG3zY8.png" isMerged="true"
[V0_FILE]png:file="public/mobile-app-ui.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/mobile-app-ui-fwJChZF8aaTzDcBOv3PZqZbcAXc6WJ.png" isMerged="true"
[V0_FILE]png:file="public/generic-logo-design.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/generic-logo-design-YQUntmUpPvYJvDBRu35qsT88wAXF0y.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/ui/loading-spinner.tsx" isMerged="true"
import { cn } from "@/lib/utils"

interface LoadingSpinnerProps {
  size?: "sm" | "md" | "lg"
  className?: string
}

export function LoadingSpinner({ size = "md", className }: LoadingSpinnerProps) {
  const sizeClasses = {
    sm: "h-4 w-4",
    md: "h-8 w-8",
    lg: "h-12 w-12",
  }

return (
    <div
      className={cn(
        "animate-spin rounded-full border-2 border-gray-300 border-t-blue-600",
        sizeClasses[size],
        className,
      )}
    />
  )
}
[V0_FILE]typescriptreact:file="components/ui/error-boundary.tsx" isMerged="true"
"use client"

import { Component, type ReactNode } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { AlertTriangle, RefreshCw } from "lucide-react"

interface Props {
  children: ReactNode
  fallback?: ReactNode
}

interface State {
  hasError: boolean
  error?: Error
}

export class ErrorBoundary extends Component<Props, State> {
  constructor(props: Props) {
    super(props)
    this.state = { hasError: false }
  }

static getDerivedStateFromError(error: Error): State {
    return { hasError: true, error }
  }

componentDidCatch(error: Error, errorInfo: any) {
    console.error("Error caught by boundary:", error, errorInfo)
  }

render() {
    if (this.state.hasError) {
      if (this.props.fallback) {
        return this.props.fallback
      }

return (
        <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
          <Card className="max-w-md w-full">
            <CardHeader className="text-center">
              <div className="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <AlertTriangle className="h-6 w-6 text-red-600" />
              </div>
              <CardTitle className="text-red-900">Something went wrong</CardTitle>
            </CardHeader>
            <CardContent className="text-center space-y-4">
              <p className="text-gray-600">We encountered an unexpected error. Please try refreshing the page.</p>
              <div className="space-y-2">
                <Button onClick={() => window.location.reload()} className="w-full">
                  <RefreshCw className="mr-2 h-4 w-4" />
                  Refresh Page
                </Button>
                <Button
                  variant="outline"
                  onClick={() => (window.location.href = "/")}
                  className="w-full bg-transparent"
                >
                  Go Home
                </Button>
              </div>
              {process.env.NODE_ENV === "development" && this.state.error && (
                <details className="text-left text-xs text-gray-500 mt-4">
                  <summary className="cursor-pointer">Error Details</summary>
                  <pre className="mt-2 p-2 bg-gray-100 rounded overflow-auto">{this.state.error.stack}</pre>
                </details>
              )}
            </CardContent>
          </Card>
        </div>
      )
    }

return this.props.children
  }
}
[V0_FILE]typescriptreact:file="app/not-found.tsx" isMerged="true"
"use client"

import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Home, Search, ArrowLeft } from "lucide-react"

export default function NotFound() {
  return (
    <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
      <Card className="max-w-md w-full text-center">
        <CardHeader>
          <div className="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <span className="text-4xl font-bold text-blue-600">404</span>
          </div>
          <CardTitle className="text-2xl text-gray-900">Page Not Found</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <p className="text-gray-600">The page you're looking for doesn't exist or has been moved.</p>

<Link href="/search">
              <Button variant="outline" className="w-full bg-transparent">
                <Search className="mr-2 h-4 w-4" />
                Search Platform
              </Button>
            </Link>

<Button variant="ghost" onClick={() => window.history.back()} className="w-full">
              <ArrowLeft className="mr-2 h-4 w-4" />
              Go Back
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/error.tsx" isMerged="true"
"use client"

import { useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { AlertTriangle, RefreshCw, Home } from "lucide-react"
import Link from "next/link"

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  useEffect(() => {
    console.error("Application error:", error)
  }, [error])

<div className="space-y-2">
            <Button onClick={reset} className="w-full">
              <RefreshCw className="mr-2 h-4 w-4" />
              Try Again
            </Button>

{process.env.NODE_ENV === "development" && (
            <details className="text-left text-xs text-gray-500 mt-4">
              <summary className="cursor-pointer">Error Details</summary>
              <pre className="mt-2 p-2 bg-gray-100 rounded overflow-auto text-xs">
                {error.message}
                {error.stack && `\n${error.stack}`}
              </pre>
            </details>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="components/admin/admin-header.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Bell, Search, AlertTriangle, User, Settings, LogOut, Shield } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { useAuth } from "@/contexts/auth-context"
import { useRouter } from "next/navigation"
import Link from "next/link"

interface AdminHeaderProps {
  title: string
  description?: string
}

export function AdminHeader({ title, description }: AdminHeaderProps) {
  const [searchQuery, setSearchQuery] = useState("")
  const { user, signOut } = useAuth()
  const router = useRouter()

const handleSearch = (e: React.FormEvent) => {
    e.preventDefault()
    if (searchQuery.trim()) {
      router.push(`/admin/search?q=${encodeURIComponent(searchQuery)}`)
    }
  }

const handleSignOut = async () => {
    await signOut()
    router.push("/")
  }

return (
    <div className="border-b bg-white px-4 sm:px-6 py-4 sticky top-0 z-40 backdrop-blur-sm bg-white/95">
      <div className="flex items-center justify-between">
        <div className="min-w-0 flex-1">
          <h1 className="text-xl sm:text-2xl font-bold text-gray-900 truncate">{title}</h1>
          {description && <p className="text-sm sm:text-base text-gray-600 mt-1 truncate">{description}</p>}
        </div>

<div className="flex items-center space-x-2 sm:space-x-4 ml-4">
          {/* Search */}
          <form onSubmit={handleSearch} className="relative hidden sm:block">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
            <Input
              placeholder="Search platform..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-10 w-48 lg:w-64 h-9"
            />
          </form>

{/* Mobile Search Button */}
          <Button variant="ghost" size="icon" className="sm:hidden h-9 w-9">
            <Search className="h-4 w-4" />
          </Button>

{/* System Alerts */}
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" size="icon" className="relative h-9 w-9">
                <AlertTriangle className="h-4 w-4 text-orange-500" />
                <Badge className="absolute -top-1 -right-1 h-4 w-4 rounded-full p-0 flex items-center justify-center text-xs bg-orange-500">
                  2
                </Badge>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-80">
              <DropdownMenuLabel>System Alerts</DropdownMenuLabel>
              <DropdownMenuSeparator />
              <div className="max-h-64 overflow-y-auto">
                <DropdownMenuItem className="flex flex-col items-start p-4 cursor-pointer">
                  <div className="font-medium text-sm text-orange-900">High withdrawal volume</div>
                  <div className="text-xs text-orange-700 mt-1">15 withdrawal requests pending review</div>
                  <div className="text-xs text-orange-600 mt-1">2 hours ago</div>
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem className="flex flex-col items-start p-4 cursor-pointer">
                  <div className="font-medium text-sm text-yellow-900">Server response time increased</div>
                  <div className="text-xs text-yellow-700 mt-1">Average response time: 1.2s (normal: 0.8s)</div>
                  <div className="text-xs text-yellow-600 mt-1">1 hour ago</div>
                </DropdownMenuItem>
              </div>
              <DropdownMenuSeparator />
              <DropdownMenuItem asChild>
                <Link href="/admin/alerts" className="w-full text-center text-sm font-medium">
                  View all alerts
                </Link>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>

{/* Notifications */}
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" size="icon" className="relative h-9 w-9">
                <Bell className="h-4 w-4" />
                <Badge className="absolute -top-1 -right-1 h-4 w-4 rounded-full p-0 flex items-center justify-center text-xs bg-red-500">
                  5
                </Badge>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-80">
              <DropdownMenuLabel>Admin Notifications</DropdownMenuLabel>
              <DropdownMenuSeparator />
              <div className="max-h-64 overflow-y-auto">
                <DropdownMenuItem className="flex flex-col items-start p-4 cursor-pointer">
                  <div className="font-medium text-sm">New user registration</div>
                  <div className="text-xs text-gray-500 mt-1">John Doe registered and needs verification</div>
                  <div className="text-xs text-gray-400 mt-1">5 minutes ago</div>
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem className="flex flex-col items-start p-4 cursor-pointer">
                  <div className="font-medium text-sm">Job requires approval</div>
                  <div className="text-xs text-gray-500 mt-1">React Developer position submitted for review</div>
                  <div className="text-xs text-gray-400 mt-1">15 minutes ago</div>
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem className="flex flex-col items-start p-4 cursor-pointer">
                  <div className="font-medium text-sm">Support ticket created</div>
                  <div className="text-xs text-gray-500 mt-1">User reported payment issue</div>
                  <div className="text-xs text-gray-400 mt-1">30 minutes ago</div>
                </DropdownMenuItem>
              </div>
              <DropdownMenuSeparator />
              <DropdownMenuItem asChild>
                <Link href="/admin/notifications" className="w-full text-center text-sm font-medium">
                  View all notifications
                </Link>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>

{/* Admin Profile */}
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" className="relative h-9 w-9 rounded-full">
                <Avatar className="h-8 w-8">
                  <AvatarFallback className="text-xs bg-red-100 text-red-700">
                    <Shield className="h-4 w-4" />
                  </AvatarFallback>
                </Avatar>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-56">
              <DropdownMenuLabel className="font-normal">
                <div className="flex flex-col space-y-1">
                  <p className="text-sm font-medium leading-none">
                    {user?.firstName} {user?.lastName}
                  </p>
                  <p className="text-xs leading-none text-muted-foreground">Administrator</p>
                </div>
              </DropdownMenuLabel>
              <DropdownMenuSeparator />
              <DropdownMenuItem asChild>
                <Link href="/dashboard" className="cursor-pointer">
                  <User className="mr-2 h-4 w-4" />
                  User Dashboard
                </Link>
              </DropdownMenuItem>
              <DropdownMenuItem asChild>
                <Link href="/admin/settings" className="cursor-pointer">
                  <Settings className="mr-2 h-4 w-4" />
                  Admin Settings
                </Link>
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem onClick={handleSignOut} className="cursor-pointer text-red-600">
                <LogOut className="mr-2 h-4 w-4" />
                Sign out
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]png:file="public/images/work-proof-1.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-08-16%20at%204.55.35%E2%80%AFPM-XiPkFXG6bTZPAisdoFiIi0Y5xEDD18.png" isMerged="true"
[V0_FILE]png:file="public/images/work-proof-2.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-08-16%20at%204.56.16%E2%80%AFPM-z0PEcvLRBbtcp3jE6DmkmCdtHLwMoD.png" isMerged="true"
[V0_FILE]png:file="public/images/work-proof-3.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-08-16%20at%204.56.57%E2%80%AFPM-fnhVghZvBjjsJTca9QhmhuD46U2aZF.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/ui/admin-impersonation-banner.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { restoreAdminSession } from "@/lib/admin"
import { Shield, LogOut } from "lucide-react"

export function AdminImpersonationBanner() {
  const [isImpersonating, setIsImpersonating] = useState(false)
  const [originalAdminId, setOriginalAdminId] = useState<string | null>(null)

useEffect(() => {
    const checkImpersonation = () => {
      const userSession = localStorage.getItem("user_session")
      if (userSession) {
        const userData = JSON.parse(userSession)
        if (userData.isImpersonating) {
          setIsImpersonating(true)
          setOriginalAdminId(userData.originalAdminId)
        }
      }
    }

checkImpersonation()
  }, [])

const handleRestoreSession = async () => {
    try {
      await restoreAdminSession()
    } catch (error) {
      console.error("Failed to restore admin session:", error)
      alert("Failed to restore admin session. Please try again.")
    }
  }

if (!isImpersonating) return null

return (
    <Alert className="bg-yellow-50 border-yellow-200 mb-4">
      <Shield className="h-4 w-4 text-yellow-600" />
      <AlertDescription className="flex items-center justify-between">
        <span className="text-yellow-800">You are currently impersonating this user as an administrator.</span>
        <Button
          size="sm"
          variant="outline"
          onClick={handleRestoreSession}
          className="text-yellow-700 border-yellow-300 hover:bg-yellow-100 bg-transparent"
        >
          <LogOut className="mr-1 h-3 w-3" />
          Return to Admin
        </Button>
      </AlertDescription>
    </Alert>
  )
}
[V0_FILE]sql:file="scripts/08-seed-fake-microjobs.sql" isMerged="true"
-- Seed fake microjobs for testing and demonstration
-- This script creates realistic microjob postings across various categories

INSERT INTO microjobs (
    user_id, 
    category_id, 
    title, 
    description, 
    requirements, 
    budget_min, 
    budget_max, 
    deadline, 
    location, 
    is_remote, 
    status, 
    priority, 
    skills_required,
    views_count,
    applications_count
) VALUES 
-- Web Development Jobs
(
    (SELECT id FROM users ORDER BY RANDOM() LIMIT 1),
    (SELECT id FROM categories WHERE slug = 'web-development' LIMIT 1),
    'Build a Modern E-commerce Website',
    'I need a professional e-commerce website built from scratch using React and Node.js. The site should include product catalog, shopping cart, payment integration, and admin dashboard. Must be mobile-responsive and SEO optimized.',
    'Experience with React, Node.js, MongoDB, Stripe integration, and responsive design. Portfolio of previous e-commerce projects required.',
    2500.00,
    4000.00,
    CURRENT_DATE + INTERVAL '30 days',
    'New York, NY',
    true,
    'open',
    'high',
    ARRAY['React', 'Node.js', 'MongoDB', 'Stripe', 'CSS', 'JavaScript'],
    45,
    8
),
(
    (SELECT id FROM users ORDER BY RANDOM() LIMIT 1),
    (SELECT id FROM categories WHERE slug = 'web-development' LIMIT 1),
    'Fix WordPress Plugin Compatibility Issues',
    'My WordPress site has conflicts between plugins causing checkout errors. Need an experienced developer to debug and fix these issues quickly.',
    'Strong WordPress development skills, plugin debugging experience, and knowledge of WooCommerce.',
    300.00,
    600.00,
    CURRENT_DATE + INTERVAL '7 days',
    'Remote',
    true,
    'open',
    'urgent',
    ARRAY['WordPress', 'PHP', 'WooCommerce', 'Debugging'],
    23,
    12
),

-- Graphic Design Jobs
(
    (SELECT id FROM users ORDER BY RANDOM() LIMIT 1),
    (SELECT id FROM categories WHERE slug = 'graphic-design' LIMIT 1),
    'Design Modern Logo and Brand Identity',
    'Looking for a creative designer to create a complete brand identity package including logo, color palette, typography, and brand guidelines for my tech startup.',
    'Proven experience in brand design, strong portfolio, proficiency in Adobe Creative Suite, and understanding of modern design trends.',
    800.00,
    1500.00,
    CURRENT_DATE + INTERVAL '14 days',
    'San Francisco, CA',
    true,
    'open',
    'normal',
    ARRAY['Adobe Illustrator', 'Adobe Photoshop', 'Brand Design', 'Logo Design'],
    67,
    15
),
(
    (SELECT id FROM users ORDER BY RANDOM() LIMIT 1),
    (SELECT id FROM categories WHERE slug = 'graphic-design' LIMIT 1),
    'Create Social Media Graphics Package',
    'Need 20 Instagram post templates and 10 story templates for my fitness brand. Should be consistent with brand colors and include editable text areas.',
    'Experience with social media design, Instagram format knowledge, and template creation skills.',
    200.00,
    400.00,
    CURRENT_DATE + INTERVAL '10 days',
    'Remote',
    true,
    'open',
    'normal',
    ARRAY['Adobe Photoshop', 'Canva', 'Social Media Design', 'Template Design'],
    34,
    9
),

-- Writing & Content Jobs
(
    (SELECT id FROM users ORDER BY RANDOM() LIMIT 1),
    (SELECT id FROM categories WHERE slug = 'writing-translation' LIMIT 1),
    'Write SEO Blog Articles for Tech Company',
    'Need 10 high-quality, SEO-optimized blog articles (1500+ words each) about artificial intelligence, machine learning, and tech trends. Must be original and well-researched.',
    'Excellent English writing skills, SEO knowledge, tech industry experience, and ability to research complex topics.',
    1000.00,
    2000.00,
    CURRENT_DATE + INTERVAL '21 days',
    'Remote',
    true,
    'open',
    'normal',
    ARRAY['SEO Writing', 'Content Marketing', 'Tech Writing', 'Research'],
    56,
    18
),
(
    (SELECT id FROM users ORDER BY RANDOM() LIMIT 1),
    (SELECT id FROM categories WHERE slug = 'writing-translation' LIMIT 1),
    'Translate Marketing Materials to Spanish',
    'Need professional translation of website content, brochures, and marketing materials from English to Spanish for Latin American market expansion.',
    'Native Spanish speaker, marketing translation experience, and cultural adaptation skills.',
    500.00,
    800.00,
    CURRENT_DATE + INTERVAL '12 days',
    'Remote',
    true,
    'open',
    'normal',
    ARRAY['Spanish Translation', 'Marketing Translation', 'Localization'],
    29,
    6
),

-- Digital Marketing Jobs
(
    (SELECT id FROM users ORDER BY RANDOM() LIMIT 1),
    (SELECT id FROM categories WHERE slug = 'digital-marketing' LIMIT 1),
    'Setup and Manage Google Ads Campaign',
    'Looking for a Google Ads expert to create and manage PPC campaigns for my online course business. Need keyword research, ad creation, and ongoing optimization.',
    'Google Ads certification, proven track record with PPC campaigns, and experience in education/course marketing.',
    600.00,
    1200.00,
    CURRENT_DATE + INTERVAL '5 days',
    'Remote',
    true,
    'open',
    'high',
    ARRAY['Google Ads', 'PPC', 'Keyword Research', 'Campaign Management'],
    41,
    11
),
(
    (SELECT id FROM users ORDER BY RANDOM() LIMIT 1),
    (SELECT id FROM categories WHERE slug = 'digital-marketing' LIMIT 1),
    'Social Media Strategy and Content Calendar',
    'Need a comprehensive social media strategy and 3-month content calendar for Instagram, Facebook, and LinkedIn for my consulting business.',
    'Social media marketing experience, content strategy skills, and knowledge of B2B marketing.',
    400.00,
    800.00,
    CURRENT_DATE + INTERVAL '14 days',
    'Chicago, IL',
    true,
    'open',
    'normal',
    ARRAY['Social Media Marketing', 'Content Strategy', 'B2B Marketing'],
    38,
    7
),

-- Video & Animation Jobs
(
    (SELECT id FROM users ORDER BY RANDOM() LIMIT 1),
    (SELECT id FROM categories WHERE slug = 'video-animation' LIMIT 1),
    'Create Animated Explainer Video',
    'Need a 2-minute animated explainer video for my SaaS product. Should include voiceover, custom animations, and match our brand guidelines.',
    'Experience with After Effects or similar animation software, voiceover coordination, and SaaS product videos.',
    1500.00,
    3000.00,
    CURRENT_DATE + INTERVAL '25 days',
    'Remote',
    true,
    'open',
    'normal',
    ARRAY['After Effects', 'Animation', 'Voiceover', 'Video Production'],
    52,
    13
),
(
    (SELECT id FROM users ORDER BY RANDOM() LIMIT 1),
    (SELECT id FROM categories WHERE slug = 'video-animation' LIMIT 1),
    'Edit Wedding Highlight Reel',
    'Looking for a skilled video editor to create a 5-minute wedding highlight reel from 8 hours of raw footage. Need quick turnaround.',
    'Professional video editing experience, wedding video expertise, and fast delivery capability.',
    300.00,
    600.00,
    CURRENT_DATE + INTERVAL '3 days',
    'Los Angeles, CA',
    false,
    'open',
    'urgent',
    ARRAY['Video Editing', 'Premiere Pro', 'Color Grading', 'Audio Sync'],
    19,
    5
),

-- Data Entry & Admin Jobs
(
    (SELECT id FROM users ORDER BY RANDOM() LIMIT 1),
    (SELECT id FROM categories WHERE slug = 'data-entry' LIMIT 1),
    'Data Entry for Customer Database',
    'Need someone to input 2000 customer records from PDF files into our CRM system. Accuracy is crucial as this data will be used for marketing campaigns.',
    'Excellent attention to detail, fast typing speed, and experience with CRM systems.',
    250.00,
    400.00,
    CURRENT_DATE + INTERVAL '8 days',
    'Remote',
    true,
    'open',
    'normal',
    ARRAY['Data Entry', 'CRM', 'Attention to Detail', 'Excel'],
    31,
    14
),

-- Mobile App Development
(
    (SELECT id FROM users ORDER BY RANDOM() LIMIT 1),
    (SELECT id FROM categories WHERE slug = 'mobile-development' LIMIT 1),
    'Build iOS Fitness Tracking App',
    'Looking for an experienced iOS developer to build a fitness tracking app with workout logging, progress charts, and social features. Need clean UI/UX.',
    'Swift programming, iOS development experience, Core Data knowledge, and fitness app experience preferred.',
    3000.00,
    5000.00,
    CURRENT_DATE + INTERVAL '45 days',
    'Austin, TX',
    true,
    'open',
    'high',
    ARRAY['Swift', 'iOS Development', 'Core Data', 'UI/UX Design'],
    73,
    22
),

-- Tutoring & Education
(
    (SELECT id FROM users ORDER BY RANDOM() LIMIT 1),
    (SELECT id FROM categories WHERE slug = 'tutoring' LIMIT 1),
    'Online Math Tutoring for High School Student',
    'Need an experienced math tutor for my daughter who is struggling with calculus. Looking for 2 sessions per week via video call.',
    'Strong calculus knowledge, teaching experience, patience with teenagers, and reliable internet connection.',
    40.00,
    60.00,
    CURRENT_DATE + INTERVAL '60 days',
    'Remote',
    true,
    'open',
    'normal',
    ARRAY['Mathematics', 'Calculus', 'Online Tutoring', 'Teaching'],
    25,
    8
),

-- Photography
(
    (SELECT id FROM users ORDER BY RANDOM() LIMIT 1),
    (SELECT id FROM categories WHERE slug = 'photography' LIMIT 1),
    'Product Photography for E-commerce',
    'Need professional product photos for 50 jewelry items for my online store. Require white background shots and lifestyle photos.',
    'Product photography experience, professional lighting setup, and jewelry photography portfolio.',
    800.00,
    1200.00,
    CURRENT_DATE + INTERVAL '10 days',
    'Miami, FL',
    false,
    'open',
    'normal',
    ARRAY['Product Photography', 'Jewelry Photography', 'Photo Editing', 'Lighting'],
    44,
    9
),

-- Virtual Assistant
(
    (SELECT id FROM users ORDER BY RANDOM() LIMIT 1),
    (SELECT id FROM categories WHERE slug = 'virtual-assistant' LIMIT 1),
    'Virtual Assistant for Email Management',
    'Looking for a reliable VA to manage my email inbox, schedule appointments, and handle basic customer service inquiries. 20 hours per week.',
    'Excellent English communication, email management experience, calendar scheduling skills, and customer service background.',
    15.00,
    25.00,
    CURRENT_DATE + INTERVAL '7 days',
    'Remote',
    true,
    'open',
    'normal',
    ARRAY['Email Management', 'Customer Service', 'Scheduling', 'Communication'],
    36,
    16
);

-- Update some jobs to different statuses for variety
UPDATE microjobs SET status = 'in_progress', applications_count = applications_count + 5 
WHERE title IN ('Fix WordPress Plugin Compatibility Issues', 'Edit Wedding Highlight Reel');

UPDATE microjobs SET status = 'completed' 
WHERE title = 'Create Social Media Graphics Package';

-- Add some additional views to make it more realistic
UPDATE microjobs SET views_count = views_count + (RANDOM() * 50)::INTEGER;
[V0_FILE]sql:file="scripts/09-workflow-schema-updates.sql" isMerged="true"
-- Adding new tables and columns for complete microjob workflow system

-- Update microjobs table to support enhanced workflow statuses
ALTER TABLE microjobs 
ADD COLUMN IF NOT EXISTS assigned_worker_id UUID REFERENCES users(id),
ADD COLUMN IF NOT EXISTS work_started_at TIMESTAMP WITH TIME ZONE,
ADD COLUMN IF NOT EXISTS proof_submitted_at TIMESTAMP WITH TIME ZONE,
ADD COLUMN IF NOT EXISTS reviewed_at TIMESTAMP WITH TIME ZONE,
ADD COLUMN IF NOT EXISTS completed_at TIMESTAMP WITH TIME ZONE,
ADD COLUMN IF NOT EXISTS escrow_amount DECIMAL(10,2),
ADD COLUMN IF NOT EXISTS escrow_status VARCHAR(20) DEFAULT 'none'; -- 'none', 'locked', 'released', 'refunded'

-- Update job status enum to include all workflow states
-- Note: In production, you'd use ALTER TYPE, but for compatibility we'll handle this in application logic
-- Possible statuses: 'open', 'assigned', 'in_progress', 'proof_submitted', 'under_review', 'completed', 'disputed', 'cancelled'

-- Work proof submissions table
CREATE TABLE work_proofs (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    job_id UUID NOT NULL REFERENCES microjobs(id) ON DELETE CASCADE,
    worker_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    submission_text TEXT NOT NULL,
    proof_files TEXT[], -- Array of file URLs (images, documents, etc.)
    proof_links TEXT[], -- Array of URLs (YouTube, social media, etc.)
    additional_notes TEXT,
    submission_number INTEGER DEFAULT 1, -- For resubmissions
    status VARCHAR(20) DEFAULT 'submitted', -- 'submitted', 'under_review', 'accepted', 'rejected', 'revision_requested'
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Job reviews by employers (accept/reject proof)
CREATE TABLE job_reviews (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    job_id UUID NOT NULL REFERENCES microjobs(id) ON DELETE CASCADE,
    proof_id UUID NOT NULL REFERENCES work_proofs(id) ON DELETE CASCADE,
    reviewer_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE, -- Job poster
    decision VARCHAR(20) NOT NULL, -- 'accepted', 'rejected', 'revision_requested'
    feedback TEXT,
    revision_notes TEXT, -- What needs to be fixed
    reviewed_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Payment escrow system
CREATE TABLE escrow_payments (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    job_id UUID NOT NULL REFERENCES microjobs(id) ON DELETE CASCADE,
    payer_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE, -- Job poster
    payee_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE, -- Worker
    amount DECIMAL(10,2) NOT NULL,
    status VARCHAR(20) DEFAULT 'locked', -- 'locked', 'released', 'refunded', 'disputed'
    locked_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    release_scheduled_at TIMESTAMP WITH TIME ZONE, -- Auto-release date
    released_at TIMESTAMP WITH TIME ZONE,
    refunded_at TIMESTAMP WITH TIME ZONE,
    platform_fee DECIMAL(10,2) DEFAULT 0.00,
    notes TEXT
);

-- Dispute management system
CREATE TABLE job_disputes (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    job_id UUID NOT NULL REFERENCES microjobs(id) ON DELETE CASCADE,
    complainant_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE, -- Who filed the dispute
    respondent_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE, -- Other party
    dispute_type VARCHAR(50) NOT NULL, -- 'payment_release', 'work_quality', 'non_delivery', 'unfair_rejection'
    description TEXT NOT NULL,
    evidence_files TEXT[], -- Supporting documents/images
    status VARCHAR(20) DEFAULT 'open', -- 'open', 'under_review', 'resolved', 'closed'
    priority VARCHAR(10) DEFAULT 'normal', -- 'low', 'normal', 'high', 'urgent'
    assigned_admin_id UUID REFERENCES users(id),
    resolution TEXT,
    resolved_at TIMESTAMP WITH TIME ZONE,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Dispute messages/communication
CREATE TABLE dispute_messages (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    dispute_id UUID NOT NULL REFERENCES job_disputes(id) ON DELETE CASCADE,
    sender_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    message TEXT NOT NULL,
    attachments TEXT[], -- File URLs
    is_admin_message BOOLEAN DEFAULT FALSE,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Job workflow history/audit trail
CREATE TABLE job_status_history (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    job_id UUID NOT NULL REFERENCES microjobs(id) ON DELETE CASCADE,
    user_id UUID REFERENCES users(id), -- Who triggered the status change
    old_status VARCHAR(20),
    new_status VARCHAR(20) NOT NULL,
    notes TEXT,
    metadata JSONB, -- Additional context data
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Rework requests (when worker chooses to redo work within 72 hours)
CREATE TABLE rework_requests (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    job_id UUID NOT NULL REFERENCES microjobs(id) ON DELETE CASCADE,
    worker_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    original_proof_id UUID NOT NULL REFERENCES work_proofs(id),
    reason TEXT,
    deadline TIMESTAMP WITH TIME ZONE NOT NULL, -- 72 hours from rejection
    status VARCHAR(20) DEFAULT 'active', -- 'active', 'completed', 'expired', 'cancelled'
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Admin actions log
CREATE TABLE admin_actions (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    admin_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    action_type VARCHAR(50) NOT NULL, -- 'dispute_resolved', 'payment_released', 'user_suspended', etc.
    target_type VARCHAR(50), -- 'job', 'user', 'dispute', etc.
    target_id UUID,
    description TEXT NOT NULL,
    metadata JSONB,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Update job_applications to track assignment
ALTER TABLE job_applications 
ADD COLUMN IF NOT EXISTS assigned_at TIMESTAMP WITH TIME ZONE,
ADD COLUMN IF NOT EXISTS assignment_notes TEXT;
[V0_FILE]typescript:file="lib/escrow.ts" isMerged="true"
// Payment escrow system for secure job transactions - DISABLED
import type { WalletTransaction } from "./wallet"

export interface EscrowTransaction {
  id: string
  jobId: string
  applicationId: string
  workProofId?: string
  payerId: string
  payeeId: string
  amount: number
  status: "locked" | "released" | "refunded" | "disputed" | "auto_released"
  lockedAt: string
  releaseScheduledAt: string
  releasedAt?: string
  refundedAt?: string
  disputeId?: string
  description: string
  metadata?: {
    jobTitle: string
    workerName: string
    employerName: string
  }
  createdAt: string
  updatedAt: string
}

export interface DisputeCase {
  id: string
  escrowTransactionId: string
  jobId: string
  initiatorId: string
  respondentId: string
  reason: "work_quality" | "payment_delay" | "scope_change" | "communication" | "other"
  description: string
  evidence: {
    type: "text" | "file" | "link"
    content: string
    uploadedAt: string
  }[]
  status: "open" | "under_review" | "resolved" | "closed"
  resolution?: {
    decision: "favor_worker" | "favor_employer" | "partial_refund"
    amount?: number
    reasoning: string
    resolvedBy: string
    resolvedAt: string
  }
  createdAt: string
  updatedAt: string
}

export async function createEscrowTransaction(data: {
  jobId: string
  applicationId: string
  payerId: string
  payeeId: string
  amount: number
  jobTitle: string
  workerName: string
  employerName: string
}): Promise<EscrowTransaction> {
  throw new Error("Escrow functionality has been disabled")
}

export async function releaseEscrowPayment(
  escrowId: string,
  workProofId?: string,
): Promise<{ escrowTransaction: EscrowTransaction; walletTransaction: WalletTransaction }> {
  throw new Error("Escrow functionality has been disabled")
}

export async function refundEscrowPayment(
  escrowId: string,
  reason: string,
): Promise<{ escrowTransaction: EscrowTransaction; walletTransaction: WalletTransaction }> {
  throw new Error("Escrow functionality has been disabled")
}

export async function processAutoReleases(): Promise<EscrowTransaction[]> {
  return []
}

export async function createDispute(data: {
  escrowTransactionId: string
  jobId: string
  initiatorId: string
  respondentId: string
  reason: DisputeCase["reason"]
  description: string
  evidence: DisputeCase["evidence"]
}): Promise<DisputeCase> {
  throw new Error("Escrow functionality has been disabled")
}

export async function resolveDispute(
  disputeId: string,
  resolution: DisputeCase["resolution"],
): Promise<{ dispute: DisputeCase; escrowTransaction?: EscrowTransaction; walletTransaction?: WalletTransaction }> {
  throw new Error("Escrow functionality has been disabled")
}

export async function getEscrowTransactionsByUser(userId: string): Promise<EscrowTransaction[]> {
  return []
}

export async function getEscrowTransactionByJob(jobId: string): Promise<EscrowTransaction | null> {
  return null
}

export async function getDisputesByUser(userId: string): Promise<DisputeCase[]> {
  return []
}

export async function getAllDisputes(): Promise<DisputeCase[]> {
  return []
}

export const getEscrowStatusColor = (status: EscrowTransaction["status"]) => {
  return "bg-gray-100 text-gray-800"
}

export const getDisputeStatusColor = (status: DisputeCase["status"]) => {
  return "bg-gray-100 text-gray-800"
}

export const formatTimeRemaining = (releaseScheduledAt: string): string => {
  return "Escrow disabled"
}
[V0_FILE]typescript:file="components/disputes/create-dispute-dialog.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useAuth } from "@/contexts/auth-context"
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 { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Upload, X, FileText, LinkIcon, AlertTriangle } from "lucide-react"
import { toast } from "sonner"
import { createDispute, getEscrowTransactionsByUser, type DisputeCase, type EscrowTransaction } from "@/lib/escrow"

interface CreateDisputeDialogProps {
  isOpen: boolean
  onClose: () => void
  onSuccess: () => void
  trigger?: React.ReactNode
}

export function CreateDisputeDialog({ isOpen, onClose, onSuccess, trigger }: CreateDisputeDialogProps) {
  const { user } = useAuth()
  const [loading, setLoading] = useState(false)
  const [escrowTransactions, setEscrowTransactions] = useState<EscrowTransaction[]>([])
  const [formData, setFormData] = useState({
    escrowTransactionId: "",
    reason: "" as DisputeCase["reason"],
    description: "",
    evidence: [] as DisputeCase["evidence"],
  })
  const [newEvidence, setNewEvidence] = useState({
    type: "text" as "text" | "file" | "link",
    content: "",
  })

useEffect(() => {
    if (isOpen && user?.id) {
      loadEscrowTransactions()
    }
  }, [isOpen, user?.id])

const loadEscrowTransactions = async () => {
    if (!user?.id) return

try {
      const transactions = await getEscrowTransactionsByUser(user.id)
      // Only show locked or disputed transactions that can have disputes filed
      const disputableTransactions = transactions.filter(
        (t) => t.status === "locked" || (t.status === "disputed" && !t.disputeId),
      )
      setEscrowTransactions(disputableTransactions)
    } catch (error) {
      console.error("Failed to load escrow transactions:", error)
      toast.error("Failed to load available jobs")
    }
  }

const handleAddEvidence = () => {
    if (!newEvidence.content.trim()) return

const evidence: DisputeCase["evidence"][0] = {
      type: newEvidence.type,
      content: newEvidence.content,
      uploadedAt: new Date().toISOString(),
    }

setFormData((prev) => ({
      ...prev,
      evidence: [...prev.evidence, evidence],
    }))

setNewEvidence({ type: "text", content: "" })
  }

const handleRemoveEvidence = (index: number) => {
    setFormData((prev) => ({
      ...prev,
      evidence: prev.evidence.filter((_, i) => i !== index),
    }))
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!user?.id || !formData.escrowTransactionId || !formData.reason || !formData.description.trim()) {
      toast.error("Please fill in all required fields")
      return
    }

setLoading(true)
    try {
      const selectedTransaction = escrowTransactions.find((t) => t.id === formData.escrowTransactionId)
      if (!selectedTransaction) {
        toast.error("Selected job not found")
        return
      }

await createDispute({
        escrowTransactionId: formData.escrowTransactionId,
        jobId: selectedTransaction.jobId,
        initiatorId: user.id,
        respondentId:
          selectedTransaction.payerId === user.id ? selectedTransaction.payeeId : selectedTransaction.payerId,
        reason: formData.reason,
        description: formData.description,
        evidence: formData.evidence,
      })

// Reset form
      setFormData({
        escrowTransactionId: "",
        reason: "" as DisputeCase["reason"],
        description: "",
        evidence: [],
      })

onSuccess()
    } catch (error) {
      console.error("Failed to create dispute:", error)
      toast.error("Failed to create dispute. Please try again.")
    } finally {
      setLoading(false)
    }
  }

const selectedTransaction = escrowTransactions.find((t) => t.id === formData.escrowTransactionId)

return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      {trigger}
      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="flex items-center">
            <AlertTriangle className="mr-2 h-5 w-5 text-orange-600" />
            File a Dispute
          </DialogTitle>
        </DialogHeader>

<form onSubmit={handleSubmit} className="space-y-6">
          {/* Job Selection */}
          <div className="space-y-2">
            <Label htmlFor="job">Select Job *</Label>
            <Select
              value={formData.escrowTransactionId}
              onValueChange={(value) => setFormData((prev) => ({ ...prev, escrowTransactionId: value }))}
              required
            >
              <SelectTrigger>
                <SelectValue placeholder="Choose the job this dispute is about" />
              </SelectTrigger>
              <SelectContent>
                {escrowTransactions.map((transaction) => (
                  <SelectItem key={transaction.id} value={transaction.id}>
                    <div className="flex items-center justify-between w-full">
                      <span className="truncate">{transaction.metadata?.jobTitle || `Job ${transaction.jobId}`}</span>
                      <Badge variant="outline" className="ml-2">
                        ${transaction.amount}
                      </Badge>
                    </div>
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            {escrowTransactions.length === 0 && (
              <p className="text-sm text-gray-500">No active jobs available for disputes</p>
            )}
          </div>

{/* Selected Job Details */}
          {selectedTransaction && (
            <Card className="bg-blue-50 border-blue-200">
              <CardContent className="p-4">
                <h4 className="font-medium text-blue-900 mb-2">Job Details</h4>
                <div className="space-y-1 text-sm text-blue-800">
                  <p>
                    <strong>Title:</strong> {selectedTransaction.metadata?.jobTitle}
                  </p>
                  <p>
                    <strong>Amount:</strong> ${selectedTransaction.amount}
                  </p>
                  <p>
                    <strong>Status:</strong> {selectedTransaction.status}
                  </p>
                  <p>
                    <strong>Other Party:</strong>{" "}
                    {selectedTransaction.payerId === user?.id
                      ? selectedTransaction.metadata?.workerName
                      : selectedTransaction.metadata?.employerName}
                  </p>
                </div>
              </CardContent>
            </Card>
          )}

{/* Dispute Reason */}
          <div className="space-y-2">
            <Label htmlFor="reason">Dispute Reason *</Label>
            <Select
              value={formData.reason}
              onValueChange={(value) => setFormData((prev) => ({ ...prev, reason: value as DisputeCase["reason"] }))}
              required
            >
              <SelectTrigger>
                <SelectValue placeholder="Select the reason for this dispute" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="work_quality">Work Quality Issues</SelectItem>
                <SelectItem value="payment_delay">Payment Delay</SelectItem>
                <SelectItem value="scope_change">Scope Change</SelectItem>
                <SelectItem value="communication">Communication Problems</SelectItem>
                <SelectItem value="other">Other</SelectItem>
              </SelectContent>
            </Select>
          </div>

{/* Description */}
          <div className="space-y-2">
            <Label htmlFor="description">Detailed Description *</Label>
            <Textarea
              id="description"
              placeholder="Please provide a detailed explanation of the issue, including what happened, when it occurred, and what resolution you're seeking..."
              value={formData.description}
              onChange={(e) => setFormData((prev) => ({ ...prev, description: e.target.value }))}
              rows={4}
              required
            />
          </div>

{/* Evidence Section */}
          <div className="space-y-4">
            <Label>Supporting Evidence</Label>

{/* Add Evidence Form */}
            <Card className="border-dashed">
              <CardContent className="p-4">
                <div className="space-y-3">
                  <div className="flex space-x-2">
                    <Select
                      value={newEvidence.type}
                      onValueChange={(value) =>
                        setNewEvidence((prev) => ({ ...prev, type: value as "text" | "file" | "link" }))
                      }
                    >
                      <SelectTrigger className="w-32">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="text">Text</SelectItem>
                        <SelectItem value="link">Link</SelectItem>
                        <SelectItem value="file">File</SelectItem>
                      </SelectContent>
                    </Select>

<Input
                      placeholder={
                        newEvidence.type === "text"
                          ? "Describe the evidence..."
                          : newEvidence.type === "link"
                            ? "https://example.com/evidence"
                            : "File name or description"
                      }
                      value={newEvidence.content}
                      onChange={(e) => setNewEvidence((prev) => ({ ...prev, content: e.target.value }))}
                      className="flex-1"
                    />

{/* Evidence List */}
            {formData.evidence.length > 0 && (
              <div className="space-y-2">
                {formData.evidence.map((evidence, index) => (
                  <div key={index} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                    <div className="flex items-center space-x-2">
                      {evidence.type === "text" && <FileText className="h-4 w-4 text-gray-500" />}
                      {evidence.type === "link" && <LinkIcon className="h-4 w-4 text-blue-500" />}
                      {evidence.type === "file" && <Upload className="h-4 w-4 text-green-500" />}
                      <span className="text-sm">{evidence.content}</span>
                      <Badge variant="outline" className="text-xs">
                        {evidence.type}
                      </Badge>
                    </div>
                    <Button type="button" variant="ghost" size="sm" onClick={() => handleRemoveEvidence(index)}>
                      <X className="h-4 w-4" />
                    </Button>
                  </div>
                ))}
              </div>
            )}
          </div>

{/* Submit Buttons */}
          <div className="flex justify-end space-x-2 pt-4 border-t">
            <Button type="button" variant="outline" onClick={onClose}>
              Cancel
            </Button>
            <Button type="submit" disabled={loading}>
              {loading ? "Filing Dispute..." : "File Dispute"}
            </Button>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescript:file="components/disputes/dispute-details-modal.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import {
  AlertTriangle,
  Clock,
  CheckCircle,
  XCircle,
  FileText,
  LinkIcon,
  Upload,
  Calendar,
  DollarSign,
  User,
  MessageCircle,
} from "lucide-react"
import { formatDistanceToNow } from "date-fns"
import { toast } from "sonner"
import { getDisputeStatusColor, type DisputeCase } from "@/lib/escrow"

interface DisputeDetailsModalProps {
  dispute: DisputeCase | null
  isOpen: boolean
  onClose: () => void
  onUpdate: () => void
}

export function DisputeDetailsModal({ dispute, isOpen, onClose, onUpdate }: DisputeDetailsModalProps) {
  const [addingEvidence, setAddingEvidence] = useState(false)
  const [newEvidenceContent, setNewEvidenceContent] = useState("")

if (!dispute) return null

const getStatusIcon = (status: DisputeCase["status"]) => {
    switch (status) {
      case "open":
        return <AlertTriangle className="h-5 w-5 text-red-600" />
      case "under_review":
        return <Clock className="h-5 w-5 text-yellow-600" />
      case "resolved":
        return <CheckCircle className="h-5 w-5 text-green-600" />
      case "closed":
        return <XCircle className="h-5 w-5 text-gray-600" />
      default:
        return <FileText className="h-5 w-5 text-gray-600" />
    }
  }

const getReasonLabel = (reason: DisputeCase["reason"]) => {
    switch (reason) {
      case "work_quality":
        return "Work Quality"
      case "payment_delay":
        return "Payment Delay"
      case "scope_change":
        return "Scope Change"
      case "communication":
        return "Communication Issues"
      case "other":
        return "Other"
      default:
        return reason
    }
  }

const getEvidenceIcon = (type: string) => {
    switch (type) {
      case "text":
        return <FileText className="h-4 w-4 text-gray-500" />
      case "link":
        return <LinkIcon className="h-4 w-4 text-blue-500" />
      case "file":
        return <Upload className="h-4 w-4 text-green-500" />
      default:
        return <FileText className="h-4 w-4 text-gray-500" />
    }
  }

const handleAddEvidence = async () => {
    if (!newEvidenceContent.trim()) return

try {
      // In a real app, this would call an API to add evidence to the dispute
      toast.success("Evidence added successfully")
      setNewEvidenceContent("")
      setAddingEvidence(false)
      onUpdate()
    } catch (error) {
      console.error("Failed to add evidence:", error)
      toast.error("Failed to add evidence")
    }
  }

return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="flex items-center space-x-2">
            {getStatusIcon(dispute.status)}
            <span>Dispute #{dispute.id.slice(-8)}</span>
            <Badge className={getDisputeStatusColor(dispute.status)}>
              {dispute.status.replace("_", " ").toUpperCase()}
            </Badge>
          </DialogTitle>
        </DialogHeader>

<div className="space-y-6">
          {/* Dispute Overview */}
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">Dispute Details</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <p className="text-sm text-gray-600">Reason</p>
                  <p className="font-medium">{getReasonLabel(dispute.reason)}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-600">Created</p>
                  <p className="font-medium flex items-center">
                    <Calendar className="mr-1 h-4 w-4" />
                    {formatDistanceToNow(new Date(dispute.createdAt), { addSuffix: true })}
                  </p>
                </div>
                <div>
                  <p className="text-sm text-gray-600">Job ID</p>
                  <p className="font-medium">{dispute.jobId}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-600">Escrow Transaction</p>
                  <p className="font-medium">{dispute.escrowTransactionId.slice(-8)}</p>
                </div>
              </div>

<div>
                <p className="text-sm text-gray-600 mb-2">Description</p>
                <p className="text-gray-900 leading-relaxed">{dispute.description}</p>
              </div>
            </CardContent>
          </Card>

{/* Parties Involved */}
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">Parties Involved</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="flex items-center space-x-3 p-3 bg-blue-50 rounded-lg">
                  <Avatar>
                    <AvatarFallback>
                      <User className="h-4 w-4" />
                    </AvatarFallback>
                  </Avatar>
                  <div>
                    <p className="font-medium">Dispute Initiator</p>
                    <p className="text-sm text-gray-600">User ID: {dispute.initiatorId}</p>
                  </div>
                </div>

<div className="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg">
                  <Avatar>
                    <AvatarFallback>
                      <User className="h-4 w-4" />
                    </AvatarFallback>
                  </Avatar>
                  <div>
                    <p className="font-medium">Respondent</p>
                    <p className="text-sm text-gray-600">User ID: {dispute.respondentId}</p>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Evidence */}
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <CardTitle className="text-lg">Evidence ({dispute.evidence.length})</CardTitle>
                {dispute.status === "open" && (
                  <Button size="sm" variant="outline" onClick={() => setAddingEvidence(!addingEvidence)}>
                    Add Evidence
                  </Button>
                )}
              </div>
            </CardHeader>
            <CardContent className="space-y-4">
              {/* Add Evidence Form */}
              {addingEvidence && (
                <div className="p-4 border border-dashed rounded-lg space-y-3">
                  <Textarea
                    placeholder="Describe additional evidence or provide links..."
                    value={newEvidenceContent}
                    onChange={(e) => setNewEvidenceContent(e.target.value)}
                    rows={3}
                  />
                  <div className="flex space-x-2">
                    <Button size="sm" onClick={handleAddEvidence}>
                      Add Evidence
                    </Button>
                    <Button size="sm" variant="outline" onClick={() => setAddingEvidence(false)}>
                      Cancel
                    </Button>
                  </div>
                </div>
              )}

{/* Evidence List */}
              {dispute.evidence.length > 0 ? (
                <div className="space-y-3">
                  {dispute.evidence.map((evidence, index) => (
                    <div key={index} className="flex items-start space-x-3 p-3 bg-gray-50 rounded-lg">
                      <div className="flex-shrink-0 mt-0.5">{getEvidenceIcon(evidence.type)}</div>
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center space-x-2 mb-1">
                          <Badge variant="outline" className="text-xs">
                            {evidence.type}
                          </Badge>
                          <span className="text-xs text-gray-500">
                            {formatDistanceToNow(new Date(evidence.uploadedAt), { addSuffix: true })}
                          </span>
                        </div>
                        <p className="text-sm text-gray-900 break-words">{evidence.content}</p>
                      </div>
                    </div>
                  ))}
                </div>
              ) : (
                <p className="text-gray-500 text-center py-4">No evidence provided yet</p>
              )}
            </CardContent>
          </Card>

{/* Resolution */}
          {dispute.resolution && (
            <Card className="border-green-200 bg-green-50">
              <CardHeader>
                <CardTitle className="text-lg text-green-800 flex items-center">
                  <CheckCircle className="mr-2 h-5 w-5" />
                  Resolution
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <p className="text-sm text-green-700">Decision</p>
                    <p className="font-medium text-green-900">
                      {dispute.resolution.decision === "favor_worker" && "In Favor of Worker"}
                      {dispute.resolution.decision === "favor_employer" && "In Favor of Employer"}
                      {dispute.resolution.decision === "partial_refund" && "Partial Refund"}
                    </p>
                  </div>
                  <div>
                    <p className="text-sm text-green-700">Resolved</p>
                    <p className="font-medium text-green-900 flex items-center">
                      <Calendar className="mr-1 h-4 w-4" />
                      {formatDistanceToNow(new Date(dispute.resolution.resolvedAt), { addSuffix: true })}
                    </p>
                  </div>
                  {dispute.resolution.amount && (
                    <div>
                      <p className="text-sm text-green-700">Amount</p>
                      <p className="font-medium text-green-900 flex items-center">
                        <DollarSign className="mr-1 h-4 w-4" />${dispute.resolution.amount}
                      </p>
                    </div>
                  )}
                  <div>
                    <p className="text-sm text-green-700">Resolved By</p>
                    <p className="font-medium text-green-900">{dispute.resolution.resolvedBy}</p>
                  </div>
                </div>

<div>
                  <p className="text-sm text-green-700 mb-2">Reasoning</p>
                  <p className="text-green-900 leading-relaxed">{dispute.resolution.reasoning}</p>
                </div>
              </CardContent>
            </Card>
          )}

{/* Actions */}
          <div className="flex justify-between items-center pt-4 border-t">
            <div className="flex space-x-2">
              {dispute.status === "open" && (
                <Button variant="outline" size="sm">
                  <MessageCircle className="mr-1 h-4 w-4" />
                  Contact Support
                </Button>
              )}
            </div>
            <Button onClick={onClose}>Close</Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="app/admin/disputes/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescript:file="components/jobs/job-status-timeline.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { getJobStatusHistory, getJobStatusColor, getJobStatusLabel, type JobStatusHistory } from "@/lib/jobs"
import { Clock, User, FileText } from "lucide-react"
import { formatDistanceToNow } from "date-fns"

interface JobStatusTimelineProps {
  jobId: string
}

export function JobStatusTimeline({ jobId }: JobStatusTimelineProps) {
  const [statusHistory, setStatusHistory] = useState<JobStatusHistory[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    const loadStatusHistory = async () => {
      try {
        const history = await getJobStatusHistory(jobId)
        setStatusHistory(history)
      } catch (error) {
        console.error("Failed to load status history:", error)
      } finally {
        setLoading(false)
      }
    }

loadStatusHistory()
  }, [jobId])

if (loading) {
    return (
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center">
            <Clock className="mr-2 h-5 w-5" />
            Status Timeline
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="animate-pulse space-y-4">
            {[1, 2, 3].map((i) => (
              <div key={i} className="flex items-center space-x-4">
                <div className="w-3 h-3 bg-gray-200 rounded-full"></div>
                <div className="flex-1 space-y-2">
                  <div className="h-4 bg-gray-200 rounded w-1/4"></div>
                  <div className="h-3 bg-gray-200 rounded w-1/2"></div>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    )
  }

return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center">
          <Clock className="mr-2 h-5 w-5" />
          Status Timeline
        </CardTitle>
      </CardHeader>
      <CardContent>
        {statusHistory.length > 0 ? (
          <div className="space-y-4">
            {statusHistory.map((entry, index) => (
              <div key={entry.id} className="flex items-start space-x-4">
                <div className="flex flex-col items-center">
                  <div className={`w-3 h-3 rounded-full ${index === 0 ? "bg-blue-500" : "bg-gray-300"}`}></div>
                  {index < statusHistory.length - 1 && <div className="w-px h-8 bg-gray-200 mt-2"></div>}
                </div>
                <div className="flex-1 min-w-0">
                  <div className="flex items-center space-x-2 mb-1">
                    <Badge className={getJobStatusColor(entry.newStatus)} size="sm">
                      {getJobStatusLabel(entry.newStatus)}
                    </Badge>
                    <span className="text-xs text-gray-500">
                      {formatDistanceToNow(new Date(entry.createdAt), { addSuffix: true })}
                    </span>
                  </div>
                  {entry.oldStatus && (
                    <p className="text-sm text-gray-600 mb-1">
                      Changed from <span className="font-medium">{getJobStatusLabel(entry.oldStatus)}</span>
                    </p>
                  )}
                  {entry.notes && <p className="text-sm text-gray-700 mb-2">{entry.notes}</p>}
                  {entry.userId && (
                    <div className="flex items-center text-xs text-gray-500">
                      <User className="mr-1 h-3 w-3" />
                      Updated by user {entry.userId}
                    </div>
                  )}
                  {entry.metadata && Object.keys(entry.metadata).length > 0 && (
                    <div className="mt-2 p-2 bg-gray-50 rounded text-xs">
                      <div className="flex items-center mb-1">
                        <FileText className="mr-1 h-3 w-3" />
                        Additional Details:
                      </div>
                      {Object.entries(entry.metadata).map(([key, value]) => (
                        <div key={key} className="text-gray-600">
                          <span className="font-medium">{key}:</span> {String(value)}
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              </div>
            ))}
          </div>
        ) : (
          <p className="text-gray-500 text-center py-4">No status history available</p>
        )}
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/jobs/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]png:file="public/telegram-channel-screenshot.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/telegram-channel-screenshot-LUQ6t5M1GMWpQhO22dydHOoTvZLIf9.png" isMerged="true"
[V0_FILE]png:file="public/placeholder-advbd.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/screenshot-of-code.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/screenshot-of-code-h8OebLumxDprls2bUBt96qurjF8A1z.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/ui/dialog.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"

import { cn } from "@/lib/utils"

const Dialog = DialogPrimitive.Root

const DialogTrigger = DialogPrimitive.Trigger

const DialogPortal = DialogPrimitive.Portal

const DialogClose = DialogPrimitive.Close

const DialogOverlay = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Overlay
    ref={ref}
    className={cn(
      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className,
    )}
    {...props}
  />
))
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName

const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DialogPortal>
    <DialogOverlay />
    <DialogPrimitive.Content
      ref={ref}
      className={cn(
        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
        className,
      )}
      {...props}
    >
      {children}
    </DialogPrimitive.Content>
  </DialogPortal>
))
DialogContent.displayName = DialogPrimitive.Content.displayName

const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
)
DialogHeader.displayName = "DialogHeader"

const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
)
DialogFooter.displayName = "DialogFooter"

const DialogTitle = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Title
    ref={ref}
    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
    {...props}
  />
))
DialogTitle.displayName = DialogPrimitive.Title.displayName

const DialogDescription = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
))
DialogDescription.displayName = DialogPrimitive.Description.displayName

export {
  Dialog,
  DialogPortal,
  DialogOverlay,
  DialogClose,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
}
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true"
import * as React from "react"

import { cn } from "@/lib/utils"

export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
  return (
    <textarea
      className={cn(
        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      ref={ref}
      {...props}
    />
  )
})
Textarea.displayName = "Textarea"

export { Textarea }
[V0_FILE]typescriptreact:file="components/ui/table.tsx" isMerged="true"
import * as React from "react"

import { cn } from "@/lib/utils"

const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
  ({ className, ...props }, ref) => (
    <div className="relative w-full overflow-auto">
      <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
    </div>
  ),
)
Table.displayName = "Table"

const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
  ({ className, ...props }, ref) => <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />,
)
TableHeader.displayName = "TableHeader"

const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
  ({ className, ...props }, ref) => (
    <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
  ),
)
TableBody.displayName = "TableBody"

const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
  ({ className, ...props }, ref) => (
    <tfoot ref={ref} className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)} {...props} />
  ),
)
TableFooter.displayName = "TableFooter"

const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
  ({ className, ...props }, ref) => (
    <tr
      ref={ref}
      className={cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className)}
      {...props}
    />
  ),
)
TableRow.displayName = "TableRow"

const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
  ({ className, ...props }, ref) => (
    <th
      ref={ref}
      className={cn(
        "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
        className,
      )}
      {...props}
    />
  ),
)
TableHead.displayName = "TableHead"

const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
  ({ className, ...props }, ref) => (
    <td ref={ref} className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)} {...props} />
  ),
)
TableCell.displayName = "TableCell"

const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
  ({ className, ...props }, ref) => (
    <caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
  ),
)
TableCaption.displayName = "TableCaption"

export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption }
[V0_FILE]png:file="public/mobile-app-screenshot.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/mobile-app-screenshot-v77b4LrmAR2nG6HXYrWnuESPkQt3sV.png" isMerged="true"
[V0_FILE]png:file="public/diverse-user-avatar-set-2.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/diverse-user-avatar-set-2-fN9Bc2P7b8pib7JMWhqSHZZBjbg5pd.png" isMerged="true"
[V0_FILE]png:file="public/diverse-user-avatars-3.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/diverse-user-avatars-3-FzM83If11mzeLINCIMD1jPFRgzxIMm.png" isMerged="true"
[V0_FILE]png:file="public/user-avatar-4.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/user-avatar-4-GJemXmZluP8BEhNqfLYPl3oiBy73JE.png" isMerged="true"
[V0_FILE]png:file="public/user-avatar-5.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/user-avatar-5-1lVed6oueQU17Uy4pPw1TjgJeWyQuC.png" isMerged="true"
[V0_FILE]typescript:file="lib/notifications.ts" isFixed="true" isQuickEdit="true" isMerged="true"
// Notification system for real-time user updates
export interface Notification {
  id: string
  userId: string
  type: "job" | "message" | "payment" | "system"
  title: string
  description: string
  timestamp: string
  read: boolean
  actionUrl?: string
}

const NOTIFICATIONS_STORAGE_KEY = "marketplace-notifications"

const getStoredNotifications = (): Notification[] => {
  if (typeof window === "undefined") return []
  try {
    const stored = localStorage.getItem(NOTIFICATIONS_STORAGE_KEY)
    return stored ? JSON.parse(stored) : []
  } catch {
    return []
  }
}

const saveNotifications = (notifications: Notification[]): void => {
  if (typeof window === "undefined") return
  try {
    localStorage.setItem(NOTIFICATIONS_STORAGE_KEY, JSON.stringify(notifications))
  } catch (error) {
    console.error("Failed to save notifications:", error)
  }
}

export async function createNotification(data: {
  userId: string
  type: "job" | "message" | "payment" | "system"
  title: string
  description: string
  actionUrl?: string
}): Promise<Notification> {
  const newNotification: Notification = {
    id: `notif_${Date.now()}`,
    userId: data.userId,
    type: data.type,
    title: data.title,
    description: data.description,
    timestamp: new Date().toISOString(),
    read: false,
    actionUrl: data.actionUrl,
  }

const notifications = getStoredNotifications()
  notifications.push(newNotification)
  saveNotifications(notifications)

return newNotification
}

export async function getUserNotifications(userId: string): Promise<Notification[]> {
  const notifications = getStoredNotifications()
  return notifications
    .filter((n) => n.userId === userId)
    .sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime())
}

export async function markNotificationAsRead(notificationId: string): Promise<void> {
  const notifications = getStoredNotifications()
  const notificationIndex = notifications.findIndex((n) => n.id === notificationId)

if (notificationIndex !== -1) {
    notifications[notificationIndex].read = true
    saveNotifications(notifications)
  }
}

export async function markAllNotificationsAsRead(userId: string): Promise<void> {
  const notifications = getStoredNotifications()
  const updatedNotifications = notifications.map((n) => (n.userId === userId ? { ...n, read: true } : n))
  saveNotifications(updatedNotifications)
}

export async function getRecentActivity(userId: string, limit = 10): Promise<Notification[]> {
  const notifications = getStoredNotifications()
  return notifications
    .filter((n) => n.userId === userId)
    .sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime())
    .slice(0, limit)
}

export async function getUnreadNotificationCount(userId: string): Promise<number> {
  const notifications = getStoredNotifications()
  return notifications.filter((n) => n.userId === userId && !n.read).length
}
[V0_FILE]typescriptreact:file="lib/services.ts" isMerged="true"
// Service-related types and functions for admin panel
export interface Service {
  id: string
  userId: string
  title: string
  description: string
  price: number
  category: string
  status: "active" | "inactive" | "pending"
  createdAt: string
}

const SERVICES_STORAGE_KEY = "marketplace-services"

const getStoredServices = (): Service[] => {
  if (typeof window === "undefined") return []
  try {
    const stored = localStorage.getItem(SERVICES_STORAGE_KEY)
    return stored ? JSON.parse(stored) : []
  } catch {
    return []
  }
}

export async function getAllServices(): Promise<Service[]> {
  await new Promise((resolve) => setTimeout(resolve, 300))
  return getStoredServices()
}

export async function createService(serviceData: Omit<Service, "id" | "createdAt">): Promise<Service> {
  await new Promise((resolve) => setTimeout(resolve, 500))

const newService: Service = {
    ...serviceData,
    id: `service_${Date.now()}`,
    createdAt: new Date().toISOString(),
  }

const services = getStoredServices()
  services.push(newService)

if (typeof window !== "undefined") {
    localStorage.setItem(SERVICES_STORAGE_KEY, JSON.stringify(services))
  }

return newService
}
[V0_FILE]sql:file="scripts/10-wallet-system-updates.sql" isMerged="true"
-- Enhanced wallet system with separate deposit and earnings balances
-- Drop existing wallet constraints to modify structure
ALTER TABLE wallets DROP CONSTRAINT IF EXISTS wallets_user_id_key;

-- Add new columns for enhanced wallet functionality
ALTER TABLE wallets ADD COLUMN IF NOT EXISTS deposit_balance DECIMAL(12,2) DEFAULT 0.00;
ALTER TABLE wallets ADD COLUMN IF NOT EXISTS earnings_balance DECIMAL(12,2) DEFAULT 0.00;
ALTER TABLE wallets ADD COLUMN IF NOT EXISTS upcoming_payments DECIMAL(12,2) DEFAULT 0.00;
ALTER TABLE wallets ADD COLUMN IF NOT EXISTS pending_payments DECIMAL(12,2) DEFAULT 0.00;

-- Update existing balance to be deposit_balance for migration
UPDATE wallets SET deposit_balance = balance WHERE deposit_balance = 0.00;

-- Re-add unique constraint
ALTER TABLE wallets ADD CONSTRAINT wallets_user_id_unique UNIQUE(user_id);

-- Admin fee settings table
CREATE TABLE IF NOT EXISTS admin_fee_settings (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    fee_type VARCHAR(20) NOT NULL, -- 'deposit', 'withdrawal', 'transaction'
    fee_percentage DECIMAL(5,2) DEFAULT 0.00, -- Percentage fee (0-100)
    fee_fixed DECIMAL(10,2) DEFAULT 0.00, -- Fixed fee amount
    minimum_fee DECIMAL(10,2) DEFAULT 0.00, -- Minimum fee to charge
    maximum_fee DECIMAL(10,2), -- Maximum fee to charge (NULL for no limit)
    is_active BOOLEAN DEFAULT TRUE,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    UNIQUE(fee_type)
);

-- Insert default fee settings
INSERT INTO admin_fee_settings (fee_type, fee_percentage, fee_fixed, minimum_fee, is_active) 
VALUES 
    ('deposit', 2.50, 0.00, 0.50, true),
    ('withdrawal', 1.00, 0.25, 0.25, true),
    ('transaction', 3.00, 0.00, 0.10, true)
ON CONFLICT (fee_type) DO NOTHING;

-- Enhanced wallet transactions with fee tracking
ALTER TABLE wallet_transactions ADD COLUMN IF NOT EXISTS fee_amount DECIMAL(12,2) DEFAULT 0.00;
ALTER TABLE wallet_transactions ADD COLUMN IF NOT EXISTS net_amount DECIMAL(12,2);
ALTER TABLE wallet_transactions ADD COLUMN IF NOT EXISTS balance_type VARCHAR(20) DEFAULT 'deposit'; -- 'deposit', 'earnings'

-- Update net_amount for existing transactions
UPDATE wallet_transactions SET net_amount = amount WHERE net_amount IS NULL;

-- Payment schedules for upcoming payments
CREATE TABLE IF NOT EXISTS payment_schedules (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    amount DECIMAL(12,2) NOT NULL,
    scheduled_date DATE NOT NULL,
    description TEXT,
    reference_id UUID,
    reference_type VARCHAR(50),
    status VARCHAR(20) DEFAULT 'scheduled', -- 'scheduled', 'processed', 'failed', 'cancelled'
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    processed_at TIMESTAMP WITH TIME ZONE
);

-- Admin fee collection tracking
CREATE TABLE IF NOT EXISTS admin_fee_collections (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    transaction_id UUID NOT NULL REFERENCES wallet_transactions(id),
    fee_type VARCHAR(20) NOT NULL,
    original_amount DECIMAL(12,2) NOT NULL,
    fee_percentage DECIMAL(5,2),
    fee_fixed DECIMAL(10,2),
    fee_amount DECIMAL(12,2) NOT NULL,
    collected_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);
[V0_FILE]typescriptreact:file="components/wallet/withdrawal-dialog.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Card, CardContent } from "@/components/ui/card"
import { ArrowUpRight, CreditCard, DollarSign, AlertTriangle, AlertCircle } from "lucide-react"
import {
  createWithdrawal,
  getAdminFeeSettings,
  type PaymentMethod,
  type Wallet,
  type AdminFeeSettings,
} from "@/lib/wallet"

interface WithdrawalDialogProps {
  wallet: Wallet
  paymentMethods: PaymentMethod[]
  onSuccess: () => void
}

export function WithdrawalDialog({ wallet, paymentMethods, onSuccess }: WithdrawalDialogProps) {
  const [open, setOpen] = useState(false)
  const [loading, setLoading] = useState(false)
  const [amount, setAmount] = useState("")
  const [paymentMethodId, setPaymentMethodId] = useState("")
  const [feeSettings, setFeeSettings] = useState<AdminFeeSettings | null>(null)

useEffect(() => {
    if (open) {
      loadFeeSettings()
    }
  }, [open])

const loadFeeSettings = async () => {
    try {
      const settings = await getAdminFeeSettings("withdrawal")
      setFeeSettings(settings)
    } catch (error) {
      console.error("Failed to load fee settings:", error)
    }
  }

const calculateFee = (withdrawalAmount: number): number => {
    if (!feeSettings || !feeSettings.isActive) return 0

let fee = (withdrawalAmount * feeSettings.feePercentage) / 100 + feeSettings.feeFixed

if (fee < feeSettings.minimumFee) {
      fee = feeSettings.minimumFee
    }

if (feeSettings.maximumFee && fee > feeSettings.maximumFee) {
      fee = feeSettings.maximumFee
    }

return Math.round(fee * 100) / 100
  }

const earningsBalance = wallet.earningsBalance || 0
  const depositBalance = wallet.depositBalance || 0
  const totalBalance = wallet.balance || 0

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!amount || !paymentMethodId) return

const withdrawalAmount = Number.parseFloat(amount)
    if (withdrawalAmount > earningsBalance) {
      alert("Insufficient earnings balance for withdrawal.")
      return
    }

setLoading(true)
    try {
      await createWithdrawal({
        amount: withdrawalAmount,
        paymentMethodId,
        userId: "user1", // Added userId parameter
      })

setOpen(false)
      setAmount("")
      setPaymentMethodId("")
      onSuccess()
      alert("Withdrawal request submitted successfully!")
    } catch (error) {
      console.error("Withdrawal failed:", error)
      alert("Withdrawal failed. Please try again.")
    } finally {
      setLoading(false)
    }
  }

const withdrawalAmount = Number.parseFloat(amount || "0")
  const feeAmount = calculateFee(withdrawalAmount)
  const netAmount = withdrawalAmount - feeAmount
  const isInsufficientBalance = withdrawalAmount > earningsBalance

return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant="outline" className="bg-transparent">
          <ArrowUpRight className="mr-2 h-4 w-4" />
          Withdraw
        </Button>
      </DialogTrigger>
      <DialogContent className="max-w-md">
        <DialogHeader>
          <DialogTitle>Withdraw Funds</DialogTitle>
        </DialogHeader>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="space-y-3">
            <div className="bg-green-50 p-3 rounded-lg">
              <p className="text-sm text-green-800">
                <strong>Available for Withdrawal:</strong> ${earningsBalance.toFixed(2)}
              </p>
            </div>
            <div className="bg-blue-50 p-3 rounded-lg">
              <p className="text-sm text-blue-800">
                <strong>Deposit Balance:</strong> ${depositBalance.toFixed(2)} (Cannot withdraw)
              </p>
            </div>
          </div>

<div className="space-y-2">
            <Label htmlFor="amount">Withdrawal Amount (USD)</Label>
            <div className="relative">
              <DollarSign className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
              <Input
                id="amount"
                type="number"
                placeholder="0.00"
                value={amount}
                onChange={(e) => setAmount(e.target.value)}
                className={`pl-10 ${isInsufficientBalance ? "border-red-300" : ""}`}
                min="10"
                max={earningsBalance}
                step="0.01"
                required
              />
            </div>
            {isInsufficientBalance && (
              <div className="flex items-center space-x-1 text-red-600 text-xs">
                <AlertTriangle className="h-3 w-3" />
                <span>Insufficient earnings balance</span>
              </div>
            )}
            <p className="text-xs text-gray-500">Minimum: $10.00, Maximum: ${earningsBalance.toFixed(2)}</p>
          </div>

<div className="space-y-2">
            <Label>Withdrawal Method</Label>
            <Select value={paymentMethodId} onValueChange={setPaymentMethodId} required>
              <SelectTrigger>
                <SelectValue placeholder="Select withdrawal method" />
              </SelectTrigger>
              <SelectContent>
                {paymentMethods.map((method) => (
                  <SelectItem key={method.id} value={method.id}>
                    <div className="flex items-center space-x-2">
                      <CreditCard className="h-4 w-4" />
                      <span>
                        {method.type === "card"
                          ? `${method.brand} ****${method.last4}`
                          : method.type === "paypal"
                            ? "PayPal Account"
                            : "Bank Account"}
                        {method.isDefault && " (Default)"}
                      </span>
                    </div>
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

{amount && !isInsufficientBalance && (
            <Card>
              <CardContent className="p-4">
                <div className="space-y-2 text-sm">
                  <div className="flex justify-between">
                    <span>Withdrawal Amount:</span>
                    <span>${withdrawalAmount.toFixed(2)}</span>
                  </div>
                  <div className="flex justify-between">
                    <span>Processing Fee:</span>
                    <span className={feeAmount > 0 ? "text-red-600" : "text-green-600"}>-${feeAmount.toFixed(2)}</span>
                  </div>
                  <div className="flex justify-between font-semibold border-t pt-2 text-green-600">
                    <span>You'll Receive:</span>
                    <span>${netAmount.toFixed(2)}</span>
                  </div>
                </div>
                {feeSettings && feeSettings.isActive && feeAmount > 0 && (
                  <div className="mt-3 p-2 bg-orange-50 rounded text-xs text-orange-800 flex items-start gap-2">
                    <AlertCircle className="h-3 w-3 mt-0.5 flex-shrink-0" />
                    <div>
                      <strong>Fee Structure:</strong> {feeSettings.feePercentage}% + ${feeSettings.feeFixed.toFixed(2)}
                      {feeSettings.minimumFee > 0 && ` (min $${feeSettings.minimumFee.toFixed(2)})`}
                    </div>
                  </div>
                )}
                <div className="mt-2 p-2 bg-yellow-50 rounded text-xs text-yellow-800">
                  <strong>Note:</strong> Withdrawals typically take 1-3 business days to process.
                </div>
              </CardContent>
            </Card>
          )}

<div className="flex justify-end space-x-2 pt-4">
            <Button type="button" variant="outline" onClick={() => setOpen(false)}>
              Cancel
            </Button>
            <Button type="submit" disabled={loading || !amount || !paymentMethodId || isInsufficientBalance}>
              {loading ? "Processing..." : `Withdraw $${netAmount.toFixed(2)}`}
            </Button>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]sql:file="scripts/11-currency-language-system.sql" isMerged="true"
-- Multi-currency and multi-language system
-- Create currencies table with live and custom rates
CREATE TABLE IF NOT EXISTS currencies (
  id SERIAL PRIMARY KEY,
  code VARCHAR(3) UNIQUE NOT NULL, -- USD, EUR, BDT, etc.
  name VARCHAR(100) NOT NULL,
  symbol VARCHAR(10) NOT NULL,
  is_base_currency BOOLEAN DEFAULT FALSE, -- USD is base
  is_active BOOLEAN DEFAULT TRUE,
  decimal_places INTEGER DEFAULT 2,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Exchange rates table with live and custom rate support
CREATE TABLE IF NOT EXISTS exchange_rates (
  id SERIAL PRIMARY KEY,
  from_currency_id INTEGER REFERENCES currencies(id),
  to_currency_id INTEGER REFERENCES currencies(id),
  live_rate DECIMAL(15,8), -- Rate from external API
  custom_rate DECIMAL(15,8), -- Admin override rate
  use_custom_rate BOOLEAN DEFAULT FALSE, -- Whether to use custom or live rate
  last_updated TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  UNIQUE(from_currency_id, to_currency_id)
);

-- Languages table
CREATE TABLE IF NOT EXISTS languages (
  id SERIAL PRIMARY KEY,
  code VARCHAR(5) UNIQUE NOT NULL, -- en, es, fr, bn, etc.
  name VARCHAR(100) NOT NULL,
  native_name VARCHAR(100) NOT NULL,
  is_default BOOLEAN DEFAULT FALSE,
  is_active BOOLEAN DEFAULT TRUE,
  rtl BOOLEAN DEFAULT FALSE, -- Right-to-left languages
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- User preferences for currency and language
CREATE TABLE IF NOT EXISTS user_preferences (
  id SERIAL PRIMARY KEY,
  user_id INTEGER REFERENCES users(id) ON DELETE CASCADE,
  currency_id INTEGER REFERENCES currencies(id),
  language_id INTEGER REFERENCES languages(id),
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  UNIQUE(user_id)
);

-- Translation keys table for multi-language support
CREATE TABLE IF NOT EXISTS translation_keys (
  id SERIAL PRIMARY KEY,
  key_name VARCHAR(255) UNIQUE NOT NULL,
  description TEXT,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Translations table
CREATE TABLE IF NOT EXISTS translations (
  id SERIAL PRIMARY KEY,
  translation_key_id INTEGER REFERENCES translation_keys(id) ON DELETE CASCADE,
  language_id INTEGER REFERENCES languages(id) ON DELETE CASCADE,
  translation_text TEXT NOT NULL,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  UNIQUE(translation_key_id, language_id)
);

-- Insert default currencies
INSERT INTO currencies (code, name, symbol, is_base_currency, decimal_places) VALUES
('USD', 'US Dollar', '$', TRUE, 2),
('EUR', 'Euro', '€', FALSE, 2),
('GBP', 'British Pound', '£', FALSE, 2),
('BDT', 'Bangladeshi Taka', '৳', FALSE, 2),
('INR', 'Indian Rupee', '₹', FALSE, 2),
('CAD', 'Canadian Dollar', 'C$', FALSE, 2),
('AUD', 'Australian Dollar', 'A$', FALSE, 2),
('JPY', 'Japanese Yen', '¥', FALSE, 0)
ON CONFLICT (code) DO NOTHING;

-- Insert default languages
INSERT INTO languages (code, name, native_name, is_default) VALUES
('en', 'English', 'English', TRUE),
('es', 'Spanish', 'Español', FALSE),
('fr', 'French', 'Français', FALSE),
('de', 'German', 'Deutsch', FALSE),
('bn', 'Bengali', 'বাংলা', FALSE),
('hi', 'Hindi', 'हिन्दी', FALSE),
('ar', 'Arabic', 'العربية', FALSE)
ON CONFLICT (code) DO NOTHING;

-- Update languages table to set RTL for Arabic
UPDATE languages SET rtl = TRUE WHERE code = 'ar';

-- Insert some default exchange rates (these will be updated by live rates)
INSERT INTO exchange_rates (from_currency_id, to_currency_id, live_rate, use_custom_rate) 
SELECT 
  usd.id,
  curr.id,
  CASE 
    WHEN curr.code = 'EUR' THEN 0.85
    WHEN curr.code = 'GBP' THEN 0.75
    WHEN curr.code = 'BDT' THEN 122.0
    WHEN curr.code = 'INR' THEN 83.0
    WHEN curr.code = 'CAD' THEN 1.35
    WHEN curr.code = 'AUD' THEN 1.50
    WHEN curr.code = 'JPY' THEN 150.0
    ELSE 1.0
  END,
  FALSE
FROM currencies usd
CROSS JOIN currencies curr
WHERE usd.code = 'USD' AND curr.code != 'USD'
ON CONFLICT (from_currency_id, to_currency_id) DO NOTHING;

-- Insert reverse rates (other currencies to USD)
INSERT INTO exchange_rates (from_currency_id, to_currency_id, live_rate, use_custom_rate)
SELECT 
  curr.id,
  usd.id,
  CASE 
    WHEN curr.code = 'EUR' THEN 1.18
    WHEN curr.code = 'GBP' THEN 1.33
    WHEN curr.code = 'BDT' THEN 0.0082
    WHEN curr.code = 'INR' THEN 0.012
    WHEN curr.code = 'CAD' THEN 0.74
    WHEN curr.code = 'AUD' THEN 0.67
    WHEN curr.code = 'JPY' THEN 0.0067
    ELSE 1.0
  END,
  FALSE
FROM currencies curr
CROSS JOIN currencies usd
WHERE usd.code = 'USD' AND curr.code != 'USD'
ON CONFLICT (from_currency_id, to_currency_id) DO NOTHING;

-- Create indexes for better performance
CREATE INDEX IF NOT EXISTS idx_exchange_rates_currencies ON exchange_rates(from_currency_id, to_currency_id);
CREATE INDEX IF NOT EXISTS idx_user_preferences_user ON user_preferences(user_id);
CREATE INDEX IF NOT EXISTS idx_translations_key_lang ON translations(translation_key_id, language_id);
CREATE INDEX IF NOT EXISTS idx_currencies_active ON currencies(is_active);
CREATE INDEX IF NOT EXISTS idx_languages_active ON languages(is_active);

-- Insert some basic translation keys
INSERT INTO translation_keys (key_name, description) VALUES
('common.welcome', 'Welcome message'),
('common.login', 'Login button text'),
('common.register', 'Register button text'),
('common.logout', 'Logout button text'),
('common.save', 'Save button text'),
('common.cancel', 'Cancel button text'),
('common.delete', 'Delete button text'),
('common.edit', 'Edit button text'),
('currency.usd', 'US Dollar currency name'),
('currency.eur', 'Euro currency name'),
('currency.bdt', 'Bangladeshi Taka currency name'),
('wallet.balance', 'Wallet balance text'),
('wallet.deposit', 'Deposit button text'),
('wallet.withdraw', 'Withdraw button text')
ON CONFLICT (key_name) DO NOTHING;

-- Insert English translations
INSERT INTO translations (translation_key_id, language_id, translation_text)
SELECT tk.id, l.id, 
  CASE tk.key_name
    WHEN 'common.welcome' THEN 'Welcome'
    WHEN 'common.login' THEN 'Login'
    WHEN 'common.register' THEN 'Register'
    WHEN 'common.logout' THEN 'Logout'
    WHEN 'common.save' THEN 'Save'
    WHEN 'common.cancel' THEN 'Cancel'
    WHEN 'common.delete' THEN 'Delete'
    WHEN 'common.edit' THEN 'Edit'
    WHEN 'currency.usd' THEN 'US Dollar'
    WHEN 'currency.eur' THEN 'Euro'
    WHEN 'currency.bdt' THEN 'Bangladeshi Taka'
    WHEN 'wallet.balance' THEN 'Balance'
    WHEN 'wallet.deposit' THEN 'Deposit'
    WHEN 'wallet.withdraw' THEN 'Withdraw'
  END
FROM translation_keys tk
CROSS JOIN languages l
WHERE l.code = 'en'
ON CONFLICT (translation_key_id, language_id) DO NOTHING;
[V0_FILE]typescriptreact:file="components/ui/price-display.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { currencyService } from "@/lib/currency"
import { useAuth } from "@/contexts/auth-context"

interface PriceDisplayProps {
  amount: number
  fromCurrency?: string
  className?: string
  showOriginal?: boolean
}

export function PriceDisplay({
  amount,
  fromCurrency = "USD",
  className = "",
  showOriginal = false,
}: PriceDisplayProps) {
  const { user } = useAuth()
  const [displayPrice, setDisplayPrice] = useState<string>("")
  const [originalPrice, setOriginalPrice] = useState<string>("")
  const [loading, setLoading] = useState(true)

useEffect(() => {
    formatPrice()
  }, [amount, fromCurrency, user])

const formatPrice = async () => {
    try {
      setLoading(true)

// Get user's preferred currency or fallback to localStorage/USD
      let targetCurrency = "USD"

if (user) {
        try {
          const userCurrency = await currencyService.getUserCurrency(user.id)
          targetCurrency = userCurrency.code
        } catch (error) {
          // Fallback to USD if user currency fetch fails
          targetCurrency = "USD"
        }
      } else {
        // For non-logged users, check localStorage
        const savedCurrency = localStorage.getItem("preferred_currency")
        if (savedCurrency) {
          targetCurrency = savedCurrency
        }
      }

// Convert and format the price
      const convertedAmount = await currencyService.convertCurrency(amount, fromCurrency, targetCurrency)
      const formattedPrice = await currencyService.formatCurrency(convertedAmount, targetCurrency)
      setDisplayPrice(formattedPrice)

// Format original price if needed
      if (showOriginal && fromCurrency !== targetCurrency) {
        const originalFormatted = await currencyService.formatCurrency(amount, fromCurrency)
        setOriginalPrice(originalFormatted)
      }
    } catch (error) {
      console.error("Error formatting price:", error)
      // Fallback to simple USD formatting
      setDisplayPrice(`$${amount.toFixed(2)}`)
    } finally {
      setLoading(false)
    }
  }

if (loading) {
    return <span className={`animate-pulse bg-gray-200 rounded ${className}`}>$---.--</span>
  }

return (
    <span className={className}>
      {displayPrice}
      {showOriginal && originalPrice && originalPrice !== displayPrice && (
        <span className="text-xs text-gray-500 ml-1">({originalPrice})</span>
      )}
    </span>
  )
}

// Specialized components for different contexts
export function ServicePrice({ amount, className = "" }: { amount: number; className?: string }) {
  return <PriceDisplay amount={amount} className={`font-bold text-green-600 ${className}`} />
}

export function WalletBalance({ amount, className = "" }: { amount: number; className?: string }) {
  return <PriceDisplay amount={amount} className={`font-bold ${className}`} />
}

export function TransactionAmount({
  amount,
  showSign = true,
  className = "",
}: {
  amount: number
  showSign?: boolean
  className?: string
}) {
  const baseClass = amount > 0 ? "text-green-600" : "text-red-600"
  const sign = showSign ? (amount > 0 ? "+" : "") : ""

return <PriceDisplay amount={Math.abs(amount)} className={`font-semibold ${baseClass} ${className}`} />
}
[V0_FILE]typescript:file="lib/currency.ts" isMerged="true"
export interface Currency {
  id: number
  code: string
  name: string
  symbol: string
  is_base_currency: boolean
  is_active: boolean
  decimal_places: number
}

export interface ExchangeRate {
  id: number
  from_currency_id: number
  to_currency_id: number
  live_rate: number
  custom_rate: number | null
  use_custom_rate: boolean
  last_updated: string
}

export interface UserPreferences {
  currency_id: number
  language_id: number
  currency?: Currency
  language?: Language
}

export interface Language {
  id: number
  code: string
  name: string
  native_name: string
  is_default: boolean
  is_active: boolean
  rtl: boolean
}

const DEFAULT_CURRENCIES: Currency[] = [
  { id: 1, code: "USD", name: "US Dollar", symbol: "$", is_base_currency: true, is_active: true, decimal_places: 2 },
  { id: 2, code: "EUR", name: "Euro", symbol: "€", is_base_currency: false, is_active: true, decimal_places: 2 },
  {
    id: 3,
    code: "GBP",
    name: "British Pound",
    symbol: "£",
    is_base_currency: false,
    is_active: true,
    decimal_places: 2,
  },
  {
    id: 4,
    code: "BDT",
    name: "Bangladeshi Taka",
    symbol: "৳",
    is_base_currency: false,
    is_active: true,
    decimal_places: 2,
  },
  {
    id: 5,
    code: "INR",
    name: "Indian Rupee",
    symbol: "₹",
    is_base_currency: false,
    is_active: true,
    decimal_places: 2,
  },
  {
    id: 6,
    code: "CAD",
    name: "Canadian Dollar",
    symbol: "C$",
    is_base_currency: false,
    is_active: true,
    decimal_places: 2,
  },
  {
    id: 7,
    code: "AUD",
    name: "Australian Dollar",
    symbol: "A$",
    is_base_currency: false,
    is_active: true,
    decimal_places: 2,
  },
  {
    id: 8,
    code: "JPY",
    name: "Japanese Yen",
    symbol: "¥",
    is_base_currency: false,
    is_active: true,
    decimal_places: 0,
  },
]

const DEFAULT_LANGUAGES: Language[] = [
  { id: 1, code: "en", name: "English", native_name: "English", is_default: true, is_active: true, rtl: false },
  { id: 2, code: "es", name: "Spanish", native_name: "Español", is_default: false, is_active: true, rtl: false },
  { id: 3, code: "fr", name: "French", native_name: "Français", is_default: false, is_active: true, rtl: false },
  { id: 4, code: "de", name: "German", native_name: "Deutsch", is_default: false, is_active: true, rtl: false },
  { id: 5, code: "bn", name: "Bengali", native_name: "বাংলা", is_default: false, is_active: true, rtl: false },
  { id: 6, code: "hi", name: "Hindi", native_name: "हिन्दी", is_default: false, is_active: true, rtl: false },
  { id: 7, code: "ar", name: "Arabic", native_name: "العربية", is_default: false, is_active: true, rtl: true },
]

export class CurrencyService {
  private static instance: CurrencyService
  private currencies: Currency[] = DEFAULT_CURRENCIES
  private languages: Language[] = DEFAULT_LANGUAGES
  private exchangeRates: Map<string, number> = new Map()
  private lastFetch = 0
  private readonly CACHE_DURATION = 5 * 60 * 1000 // 5 minutes

static getInstance(): CurrencyService {
    if (!CurrencyService.instance) {
      CurrencyService.instance = new CurrencyService()
    }
    return CurrencyService.instance
  }

// Get all active currencies
  async getCurrencies(): Promise<Currency[]> {
    return this.currencies.filter((c) => c.is_active)
  }

// Get all active languages
  async getLanguages(): Promise<Language[]> {
    return this.languages.filter((l) => l.is_active)
  }

// Get currency by code
  async getCurrencyByCode(code: string): Promise<Currency | null> {
    return this.currencies.find((c) => c.code === code) || null
  }

// Get language by code
  async getLanguageByCode(code: string): Promise<Language | null> {
    return this.languages.find((l) => l.code === code) || null
  }

// Get base currency (USD)
  async getBaseCurrency(): Promise<Currency> {
    const baseCurrency = this.currencies.find((c) => c.is_base_currency)
    if (!baseCurrency) {
      throw new Error("Base currency not found")
    }
    return baseCurrency
  }

// Get default language
  async getDefaultLanguage(): Promise<Language> {
    const defaultLanguage = this.languages.find((l) => l.is_default)
    if (!defaultLanguage) {
      throw new Error("Default language not found")
    }
    return defaultLanguage
  }

private async fetchLiveRates(): Promise<void> {
    try {
      const response = await fetch("https://api.exchangerate-api.com/v4/latest/USD")
      const data = await response.json()

if (data.rates) {
        // Store rates with USD as base
        Object.entries(data.rates).forEach(([code, rate]) => {
          this.exchangeRates.set(`USD-${code}`, rate as number)
          this.exchangeRates.set(`${code}-USD`, 1 / (rate as number))
        })

// Calculate cross rates
        this.currencies.forEach((fromCurrency) => {
          this.currencies.forEach((toCurrency) => {
            if (fromCurrency.code !== toCurrency.code) {
              const fromRate = data.rates[fromCurrency.code] || 1
              const toRate = data.rates[toCurrency.code] || 1
              const crossRate = toRate / fromRate
              this.exchangeRates.set(`${fromCurrency.code}-${toCurrency.code}`, crossRate)
            }
          })
        })

this.lastFetch = Date.now()
        localStorage.setItem(
          "currency_rates_cache",
          JSON.stringify({
            rates: Object.fromEntries(this.exchangeRates),
            timestamp: this.lastFetch,
          }),
        )
      }
    } catch (error) {
      console.error("[v0] Error fetching live rates:", error)
      // Load from cache if available
      this.loadCachedRates()
    }
  }

private loadCachedRates(): void {
    try {
      const cached = localStorage.getItem("currency_rates_cache")
      if (cached) {
        const { rates, timestamp } = JSON.parse(cached)
        if (Date.now() - timestamp < this.CACHE_DURATION) {
          this.exchangeRates = new Map(Object.entries(rates))
          this.lastFetch = timestamp
          return
        }
      }
    } catch (error) {
      console.error("[v0] Error loading cached rates:", error)
    }

// Fallback rates if no cache
    this.setFallbackRates()
  }

private setFallbackRates(): void {
    const fallbackRates = {
      "USD-EUR": 0.85,
      "EUR-USD": 1.18,
      "USD-GBP": 0.73,
      "GBP-USD": 1.37,
      "USD-BDT": 110,
      "BDT-USD": 0.009,
      "USD-INR": 83,
      "INR-USD": 0.012,
      "USD-CAD": 1.35,
      "CAD-USD": 0.74,
      "USD-AUD": 1.5,
      "AUD-USD": 0.67,
      "USD-JPY": 150,
      "JPY-USD": 0.0067,
    }

Object.entries(fallbackRates).forEach(([pair, rate]) => {
      this.exchangeRates.set(pair, rate)
    })
  }

// Get exchange rate between two currencies
  async getExchangeRate(fromCode: string, toCode: string): Promise<number> {
    if (fromCode === toCode) return 1

// Check for custom admin rates first
    const customRate = this.getCustomRate(fromCode, toCode)
    if (customRate !== null) {
      return customRate
    }

// Refresh rates if cache is stale
    if (Date.now() - this.lastFetch > this.CACHE_DURATION) {
      await this.fetchLiveRates()
    }

const key = `${fromCode}-${toCode}`
    const rate = this.exchangeRates.get(key)

if (rate) {
      return rate
    }

// If direct rate not found, try reverse
    const reverseKey = `${toCode}-${fromCode}`
    const reverseRate = this.exchangeRates.get(reverseKey)
    if (reverseRate) {
      return 1 / reverseRate
    }

throw new Error(`Exchange rate not found: ${fromCode} to ${toCode}`)
  }

private getCustomRate(fromCode: string, toCode: string): number | null {
    try {
      const customRates = localStorage.getItem("admin_custom_rates")
      if (customRates) {
        const rates = JSON.parse(customRates)
        const key = `${fromCode}-${toCode}`
        return rates[key] || null
      }
    } catch (error) {
      console.error("[v0] Error loading custom rates:", error)
    }
    return null
  }

// Convert amount between currencies
  async convertCurrency(amount: number, fromCode: string, toCode: string): Promise<number> {
    if (fromCode === toCode) return amount

const rate = await this.getExchangeRate(fromCode, toCode)
    return amount * rate
  }

// Format currency amount with proper symbol and decimal places
  async formatCurrency(amount: number, currencyCode: string, locale = "en-US"): Promise<string> {
    const currency = await this.getCurrencyByCode(currencyCode)
    if (!currency) {
      return amount.toFixed(2)
    }

try {
      return new Intl.NumberFormat(locale, {
        style: "currency",
        currency: currencyCode,
        minimumFractionDigits: currency.decimal_places,
        maximumFractionDigits: currency.decimal_places,
      }).format(amount)
    } catch (error) {
      // Fallback formatting if Intl.NumberFormat fails
      return `${currency.symbol}${amount.toFixed(currency.decimal_places)}`
    }
  }

async getUserCurrency(userId?: number): Promise<Currency> {
    try {
      const key = userId ? `user_currency_${userId}` : "guest_currency"
      const savedCode = localStorage.getItem(key)
      if (savedCode) {
        const currency = await this.getCurrencyByCode(savedCode)
        if (currency) return currency
      }
    } catch (error) {
      console.error("[v0] Error loading user currency:", error)
    }

// Return base currency as default
    return await this.getBaseCurrency()
  }

async getUserLanguage(userId?: number): Promise<Language> {
    try {
      const key = userId ? `user_language_${userId}` : "guest_language"
      const savedCode = localStorage.getItem(key)
      if (savedCode) {
        const language = await this.getLanguageByCode(savedCode)
        if (language) return language
      }
    } catch (error) {
      console.error("[v0] Error loading user language:", error)
    }

// Return default language
    return await this.getDefaultLanguage()
  }

async setUserCurrency(currencyCode: string, userId?: number): Promise<void> {
    const currency = await this.getCurrencyByCode(currencyCode)
    if (!currency) {
      throw new Error(`Currency not found: ${currencyCode}`)
    }

const key = userId ? `user_currency_${userId}` : "guest_currency"
    localStorage.setItem(key, currencyCode)
  }

async setUserLanguage(languageCode: string, userId?: number): Promise<void> {
    const language = await this.getLanguageByCode(languageCode)
    if (!language) {
      throw new Error(`Language not found: ${languageCode}`)
    }

const key = userId ? `user_language_${userId}` : "guest_language"
    localStorage.setItem(key, languageCode)
  }

async updateExchangeRate(
    fromCode: string,
    toCode: string,
    customRate: number | null,
    useCustom: boolean,
  ): Promise<void> {
    try {
      const customRates = JSON.parse(localStorage.getItem("admin_custom_rates") || "{}")
      const key = `${fromCode}-${toCode}`

if (useCustom && customRate !== null) {
        customRates[key] = customRate
        // Also store reverse rate
        customRates[`${toCode}-${fromCode}`] = 1 / customRate
      } else {
        delete customRates[key]
        delete customRates[`${toCode}-${fromCode}`]
      }

localStorage.setItem("admin_custom_rates", JSON.stringify(customRates))
    } catch (error) {
      throw new Error(`Failed to update exchange rate: ${error}`)
    }
  }

async updateLiveRates(): Promise<void> {
    console.log("[v0] Updating live exchange rates...")
    await this.fetchLiveRates()
  }

async getAllExchangeRates(): Promise<(ExchangeRate & { from_currency: Currency; to_currency: Currency })[]> {
    const rates: (ExchangeRate & { from_currency: Currency; to_currency: Currency })[] = []

// Ensure we have fresh rates
    if (Date.now() - this.lastFetch > this.CACHE_DURATION) {
      await this.fetchLiveRates()
    }

const customRates = JSON.parse(localStorage.getItem("admin_custom_rates") || "{}")

let id = 1
    this.currencies.forEach((fromCurrency) => {
      this.currencies.forEach((toCurrency) => {
        if (fromCurrency.code !== toCurrency.code) {
          const key = `${fromCurrency.code}-${toCurrency.code}`
          const liveRate = this.exchangeRates.get(key) || 1
          const customRate = customRates[key] || null

rates.push({
            id: id++,
            from_currency_id: fromCurrency.id,
            to_currency_id: toCurrency.id,
            live_rate: liveRate,
            custom_rate: customRate,
            use_custom_rate: customRate !== null,
            last_updated: new Date().toISOString(),
            from_currency: fromCurrency,
            to_currency: toCurrency,
          })
        }
      })
    })

return rates
  }
}

export const currencyService = CurrencyService.getInstance()

// Helper function to convert and format currency in one call
export async function convertAndFormat(
  amount: number,
  fromCode: string,
  toCode: string,
  locale = "en-US",
): Promise<string> {
  const convertedAmount = await currencyService.convertCurrency(amount, fromCode, toCode)
  return await currencyService.formatCurrency(convertedAmount, toCode, locale)
}

export async function formatUserCurrency(amount: number, userId?: number): Promise<string> {
  const userCurrency = await currencyService.getUserCurrency(userId)
  const convertedAmount = await currencyService.convertCurrency(amount, "USD", userCurrency.code)
  return await currencyService.formatCurrency(convertedAmount, userCurrency.code)
}
[V0_FILE]typescriptreact:file="components/ui/currency-language-switcher.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Globe, DollarSign, ChevronDown } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Badge } from "@/components/ui/badge"
import { currencyService, type Currency, type Language } from "@/lib/currency"
import { useAuth } from "@/contexts/auth-context"
import { toast } from "sonner"

interface CurrencyLanguageSwitcherProps {
  variant?: "compact" | "full"
}

export function CurrencyLanguageSwitcher({ variant = "compact" }: CurrencyLanguageSwitcherProps) {
  const { user } = useAuth()
  const [currencies, setCurrencies] = useState<Currency[]>([])
  const [languages, setLanguages] = useState<Language[]>([])
  const [currentCurrency, setCurrentCurrency] = useState<Currency | null>(null)
  const [currentLanguage, setCurrentLanguage] = useState<Language | null>(null)
  const [loading, setLoading] = useState(false)

useEffect(() => {
    loadData()
  }, [user])

const loadData = async () => {
    try {
      // Load currencies
      const currenciesData = await currencyService.getCurrencies()
      setCurrencies(currenciesData)

// Load languages (mock data for now)
      const languagesData: Language[] = [
        { id: 1, code: "en", name: "English", native_name: "English", is_default: true, is_active: true, rtl: false },
        { id: 2, code: "es", name: "Spanish", native_name: "Español", is_default: false, is_active: true, rtl: false },
        { id: 3, code: "fr", name: "French", native_name: "Français", is_default: false, is_active: true, rtl: false },
        { id: 4, code: "bn", name: "Bengali", native_name: "বাংলা", is_default: false, is_active: true, rtl: false },
        { id: 5, code: "ar", name: "Arabic", native_name: "العربية", is_default: false, is_active: true, rtl: true },
      ]
      setLanguages(languagesData)

// Set current preferences
      if (user) {
        try {
          const userCurrency = await currencyService.getUserCurrency(user.id)
          setCurrentCurrency(userCurrency)
        } catch (error) {
          // Fallback to USD
          const usdCurrency = currenciesData.find((c) => c.code === "USD")
          setCurrentCurrency(usdCurrency || currenciesData[0])
        }
      } else {
        // Default to USD for non-logged in users
        const usdCurrency = currenciesData.find((c) => c.code === "USD")
        setCurrentCurrency(usdCurrency || currenciesData[0])
      }

// Set default language (English)
      const defaultLanguage = languagesData.find((l) => l.is_default) || languagesData[0]
      setCurrentLanguage(defaultLanguage)
    } catch (error) {
      console.error("Error loading currency/language data:", error)
    }
  }

const handleCurrencyChange = async (currency: Currency) => {
    if (!user) {
      // For non-logged in users, just update local state
      setCurrentCurrency(currency)
      localStorage.setItem("preferred_currency", currency.code)
      toast.success(`Currency changed to ${currency.name}`)
      return
    }

setLoading(true)
    try {
      await currencyService.setUserCurrency(currency.code, user.id)
      setCurrentCurrency(currency)
      toast.success(`Currency changed to ${currency.name}`)
    } catch (error) {
      console.error("Error updating currency:", error)
      toast.error("Failed to update currency preference")
    } finally {
      setLoading(false)
    }
  }

const handleLanguageChange = (language: Language) => {
    console.log("[v0] Language change requested:", language.code, language.name)

setCurrentLanguage(language)
    localStorage.setItem("preferred_language", language.code)

console.log("[v0] Language preference saved to localStorage:", language.code)

// Update document language attribute
    if (typeof document !== "undefined") {
      document.documentElement.lang = language.code
      console.log("[v0] Document language updated to:", language.code)
    }

// Update document direction for RTL languages
    if (typeof document !== "undefined") {
      document.documentElement.dir = language.rtl ? "rtl" : "ltr"
      console.log("[v0] Document direction updated to:", language.rtl ? "rtl" : "ltr")
    }

toast.success(`Language changed to ${language.native_name}`)
    console.log("[v0] Language change completed successfully")

// Show info for non-English languages about translation status
    if (language.code !== "en") {
      toast.info("Full translation support coming soon!")
      console.log("[v0] Non-English language selected, showing translation notice")
    }
  }

if (variant === "compact") {
    return (
      <div className="flex items-center gap-1">
        {/* Currency Switcher */}
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" size="sm" className="h-8 px-2 text-xs">
              <DollarSign className="h-3 w-3 mr-1" />
              {currentCurrency?.code || "USD"}
              <ChevronDown className="h-3 w-3 ml-1" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-48">
            <DropdownMenuLabel>Currency</DropdownMenuLabel>
            <DropdownMenuSeparator />
            {currencies.map((currency) => (
              <DropdownMenuItem
                key={currency.id}
                onClick={() => handleCurrencyChange(currency)}
                className="cursor-pointer"
                disabled={loading}
              >
                <div className="flex items-center justify-between w-full">
                  <div className="flex items-center gap-2">
                    <span className="font-mono text-sm">{currency.code}</span>
                    <span className="text-sm">{currency.symbol}</span>
                  </div>
                  {currentCurrency?.code === currency.code && (
                    <Badge variant="default" className="text-xs">
                      Current
                    </Badge>
                  )}
                </div>
              </DropdownMenuItem>
            ))}
          </DropdownMenuContent>
        </DropdownMenu>

{/* Language Switcher */}
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" size="sm" className="h-8 px-2 text-xs">
              <Globe className="h-3 w-3 mr-1" />
              {currentLanguage?.code.toUpperCase() || "EN"}
              <ChevronDown className="h-3 w-3 ml-1" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-48">
            <DropdownMenuLabel>Language</DropdownMenuLabel>
            <DropdownMenuSeparator />
            {languages.map((language) => (
              <DropdownMenuItem
                key={language.id}
                onClick={() => handleLanguageChange(language)}
                className="cursor-pointer"
              >
                <div className="flex items-center justify-between w-full">
                  <div className="flex flex-col">
                    <span className="text-sm">{language.native_name}</span>
                    <span className="text-xs text-gray-500">{language.name}</span>
                  </div>
                  {currentLanguage?.code === language.code && (
                    <Badge variant="default" className="text-xs">
                      Current
                    </Badge>
                  )}
                </div>
              </DropdownMenuItem>
            ))}
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    )
  }

// Full variant for settings pages
  return (
    <div className="space-y-4">
      <div className="space-y-2">
        <label className="text-sm font-medium">Currency</label>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="outline" className="w-full justify-between bg-transparent">
              <div className="flex items-center gap-2">
                <DollarSign className="h-4 w-4" />
                <span>{currentCurrency?.name || "US Dollar"}</span>
                <span className="text-gray-500">({currentCurrency?.code || "USD"})</span>
              </div>
              <ChevronDown className="h-4 w-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent className="w-full">
            {currencies.map((currency) => (
              <DropdownMenuItem
                key={currency.id}
                onClick={() => handleCurrencyChange(currency)}
                className="cursor-pointer"
                disabled={loading}
              >
                <div className="flex items-center justify-between w-full">
                  <div className="flex items-center gap-2">
                    <span className="font-mono">{currency.code}</span>
                    <span>{currency.symbol}</span>
                    <span>{currency.name}</span>
                  </div>
                  {currentCurrency?.code === currency.code && <Badge variant="default">Current</Badge>}
                </div>
              </DropdownMenuItem>
            ))}
          </DropdownMenuContent>
        </DropdownMenu>
      </div>

<div className="space-y-2">
        <label className="text-sm font-medium">Language</label>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="outline" className="w-full justify-between bg-transparent">
              <div className="flex items-center gap-2">
                <Globe className="h-4 w-4" />
                <span>{currentLanguage?.native_name || "English"}</span>
                <span className="text-gray-500">({currentLanguage?.name || "English"})</span>
              </div>
              <ChevronDown className="h-4 w-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent className="w-full">
            {languages.map((language) => (
              <DropdownMenuItem
                key={language.id}
                onClick={() => handleLanguageChange(language)}
                className="cursor-pointer"
              >
                <div className="flex items-center justify-between w-full">
                  <div className="flex flex-col">
                    <span>{language.native_name}</span>
                    <span className="text-sm text-gray-500">{language.name}</span>
                  </div>
                  {currentLanguage?.code === language.code && <Badge variant="default">Current</Badge>}
                </div>
              </DropdownMenuItem>
            ))}
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="lib/translations.ts" isMerged="true"
export const translations = {
  en: {
    // Dashboard
    "dashboard.title": "Dashboard",
    "dashboard.totalEarnings": "Total Earnings",
    "dashboard.activeJobs": "Active Jobs",
    "dashboard.completedJobs": "Completed Jobs",
    "dashboard.pendingApplications": "Pending Applications",
    "dashboard.recentActivity": "Recent Activity",
    "dashboard.noActivity": "No recent activity",

// Wallet
    "wallet.title": "Wallet",
    "wallet.depositBalance": "Deposit Balance",
    "wallet.earningsBalance": "Earnings Balance",
    "wallet.totalEarned": "Total Earned",
    "wallet.totalSpent": "Total Spent",
    "wallet.upcomingPayments": "Upcoming Payments",
    "wallet.pendingPayments": "Pending Payments",
    "wallet.deposit": "Deposit",
    "wallet.withdraw": "Withdraw",
    "wallet.cannotWithdraw": "Cannot be withdrawn",
    "wallet.canWithdraw": "Available for withdrawal",

// Navigation
    "nav.dashboard": "Dashboard",
    "nav.jobs": "Jobs",
    "nav.services": "Services",
    "nav.wallet": "Wallet",
    "nav.messages": "Messages",
    "nav.profile": "Profile",
    "nav.settings": "Settings",

// Common
    "common.loading": "Loading...",
    "common.save": "Save",
    "common.cancel": "Cancel",
    "common.edit": "Edit",
    "common.delete": "Delete",
    "common.view": "View",
    "common.apply": "Apply",
    "common.submit": "Submit",
    "common.close": "Close",
    "common.search": "Search",
    "common.filter": "Filter",
    "common.sort": "Sort",
    "common.currency": "Currency",
    "common.language": "Language",
  },

es: {
    // Dashboard
    "dashboard.title": "Panel de Control",
    "dashboard.totalEarnings": "Ganancias Totales",
    "dashboard.activeJobs": "Trabajos Activos",
    "dashboard.completedJobs": "Trabajos Completados",
    "dashboard.pendingApplications": "Aplicaciones Pendientes",
    "dashboard.recentActivity": "Actividad Reciente",
    "dashboard.noActivity": "Sin actividad reciente",

// Wallet
    "wallet.title": "Billetera",
    "wallet.depositBalance": "Saldo de Depósito",
    "wallet.earningsBalance": "Saldo de Ganancias",
    "wallet.totalEarned": "Total Ganado",
    "wallet.totalSpent": "Total Gastado",
    "wallet.upcomingPayments": "Pagos Próximos",
    "wallet.pendingPayments": "Pagos Pendientes",
    "wallet.deposit": "Depositar",
    "wallet.withdraw": "Retirar",
    "wallet.cannotWithdraw": "No se puede retirar",
    "wallet.canWithdraw": "Disponible para retiro",

// Navigation
    "nav.dashboard": "Panel",
    "nav.jobs": "Trabajos",
    "nav.services": "Servicios",
    "nav.wallet": "Billetera",
    "nav.messages": "Mensajes",
    "nav.profile": "Perfil",
    "nav.settings": "Configuración",

// Common
    "common.loading": "Cargando...",
    "common.save": "Guardar",
    "common.cancel": "Cancelar",
    "common.edit": "Editar",
    "common.delete": "Eliminar",
    "common.view": "Ver",
    "common.apply": "Aplicar",
    "common.submit": "Enviar",
    "common.close": "Cerrar",
    "common.search": "Buscar",
    "common.filter": "Filtrar",
    "common.sort": "Ordenar",
    "common.currency": "Moneda",
    "common.language": "Idioma",
  },

bn: {
    // Dashboard
    "dashboard.title": "ড্যাশবোর্ড",
    "dashboard.totalEarnings": "মোট আয়",
    "dashboard.activeJobs": "সক্রিয় কাজ",
    "dashboard.completedJobs": "সম্পন্ন কাজ",
    "dashboard.pendingApplications": "অপেক্ষমাণ আবেদন",
    "dashboard.recentActivity": "সাম্প্রতিক কার্যকলাপ",
    "dashboard.noActivity": "কোন সাম্প্রতিক কার্যকলাপ নেই",

// Wallet
    "wallet.title": "ওয়ালেট",
    "wallet.depositBalance": "জমার ব্যালেন্স",
    "wallet.earningsBalance": "আয়ের ব্যালেন্স",
    "wallet.totalEarned": "মোট আয়",
    "wallet.totalSpent": "মোট খরচ",
    "wallet.upcomingPayments": "আসন্ন পেমেন্ট",
    "wallet.pendingPayments": "অপেক্ষমাণ পেমেন্ট",
    "wallet.deposit": "জমা",
    "wallet.withdraw": "উত্তোলন",
    "wallet.cannotWithdraw": "উত্তোলন করা যাবে না",
    "wallet.canWithdraw": "উত্তোলনের জন্য উপলব্ধ",

// Navigation
    "nav.dashboard": "ড্যাশবোর্ড",
    "nav.jobs": "কাজ",
    "nav.services": "সেবা",
    "nav.wallet": "ওয়ালেট",
    "nav.messages": "বার্তা",
    "nav.profile": "প্রোফাইল",
    "nav.settings": "সেটিংস",

// Common
    "common.loading": "লোড হচ্ছে...",
    "common.save": "সংরক্ষণ",
    "common.cancel": "বাতিল",
    "common.edit": "সম্পাদনা",
    "common.delete": "মুছুন",
    "common.view": "দেখুন",
    "common.apply": "আবেদন",
    "common.submit": "জমা দিন",
    "common.close": "বন্ধ",
    "common.search": "অনুসন্ধান",
    "common.filter": "ফিল্টার",
    "common.sort": "সাজান",
    "common.currency": "মুদ্রা",
    "common.language": "ভাষা",
  },

ar: {
    // Dashboard
    "dashboard.title": "لوحة التحكم",
    "dashboard.totalEarnings": "إجمالي الأرباح",
    "dashboard.activeJobs": "الوظائف النشطة",
    "dashboard.completedJobs": "الوظائف المكتملة",
    "dashboard.pendingApplications": "الطلبات المعلقة",
    "dashboard.recentActivity": "النشاط الأخير",
    "dashboard.noActivity": "لا يوجد نشاط حديث",

// Wallet
    "wallet.title": "المحفظة",
    "wallet.depositBalance": "رصيد الإيداع",
    "wallet.earningsBalance": "رصيد الأرباح",
    "wallet.totalEarned": "إجمالي المكاسب",
    "wallet.totalSpent": "إجمالي المصروف",
    "wallet.upcomingPayments": "المدفوعات القادمة",
    "wallet.pendingPayments": "المدفوعات المعلقة",
    "wallet.deposit": "إيداع",
    "wallet.withdraw": "سحب",
    "wallet.cannotWithdraw": "لا يمكن سحبها",
    "wallet.canWithdraw": "متاحة للسحب",

// Navigation
    "nav.dashboard": "لوحة التحكم",
    "nav.jobs": "الوظائف",
    "nav.services": "الخدمات",
    "nav.wallet": "المحفظة",
    "nav.messages": "الرسائل",
    "nav.profile": "الملف الشخصي",
    "nav.settings": "الإعدادات",

// Common
    "common.loading": "جاري التحميل...",
    "common.save": "حفظ",
    "common.cancel": "إلغاء",
    "common.edit": "تعديل",
    "common.delete": "حذف",
    "common.view": "عرض",
    "common.apply": "تطبيق",
    "common.submit": "إرسال",
    "common.close": "إغلاق",
    "common.search": "بحث",
    "common.filter": "تصفية",
    "common.sort": "ترتيب",
    "common.currency": "العملة",
    "common.language": "اللغة",
  },
}

export type TranslationKey = keyof typeof translations.en
export type Language = keyof typeof translations

export function getTranslation(key: TranslationKey, language: Language = "en"): string {
  return translations[language]?.[key] || translations.en[key] || key
}

export function getCurrentLanguage(): Language {
  if (typeof window !== "undefined") {
    return (localStorage.getItem("language") as Language) || "en"
  }
  return "en"
}
[V0_FILE]typescriptreact:file="hooks/use-translation.ts" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { getTranslation, getCurrentLanguage, type TranslationKey, type Language } from "@/lib/translations"

export function useTranslation() {
  const [language, setLanguage] = useState<Language>("en")

useEffect(() => {
    const currentLang = getCurrentLanguage()
    setLanguage(currentLang)

const handleStorageChange = (e: StorageEvent) => {
      if (e.key === "language" && e.newValue) {
        setLanguage(e.newValue as Language)
      }
    }

window.addEventListener("storage", handleStorageChange)
    return () => window.removeEventListener("storage", handleStorageChange)
  }, [])

const t = (key: TranslationKey): string => {
    return getTranslation(key, language)
  }

return { t, language }
}
[V0_FILE]sql:file="scripts/12-chat-money-transfer-system.sql" isMerged="true"
-- Chat-based money transfer system
-- Extends existing wallet system for peer-to-peer transfers in chat

-- Chat money transfers table
CREATE TABLE IF NOT EXISTS chat_money_transfers (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    chat_id UUID NOT NULL REFERENCES chats(id) ON DELETE CASCADE,
    sender_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    receiver_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    amount DECIMAL(12,2) NOT NULL CHECK (amount > 0),
    commission_amount DECIMAL(12,2) DEFAULT 0.00,
    net_amount DECIMAL(12,2) NOT NULL,
    message TEXT,
    status VARCHAR(20) DEFAULT 'pending', -- 'pending', 'completed', 'failed', 'cancelled'
    transaction_id UUID REFERENCES wallet_transactions(id),
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    completed_at TIMESTAMP WITH TIME ZONE,
    
    CONSTRAINT different_users CHECK (sender_id != receiver_id)
);

-- Support ticket system with tiered pricing
CREATE TABLE IF NOT EXISTS support_tickets (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    chat_id UUID REFERENCES chats(id) ON DELETE SET NULL,
    ticket_type VARCHAR(20) NOT NULL DEFAULT 'free', -- 'free', 'priority'
    subject VARCHAR(255) NOT NULL,
    description TEXT NOT NULL,
    priority VARCHAR(20) DEFAULT 'normal', -- 'low', 'normal', 'high', 'urgent'
    status VARCHAR(20) DEFAULT 'open', -- 'open', 'in_progress', 'resolved', 'closed'
    assigned_admin_id UUID REFERENCES users(id) ON DELETE SET NULL,
    payment_amount DECIMAL(10,2) DEFAULT 0.00,
    payment_transaction_id UUID REFERENCES wallet_transactions(id),
    response_time_hours INTEGER, -- Expected response time based on type
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    first_response_at TIMESTAMP WITH TIME ZONE,
    resolved_at TIMESTAMP WITH TIME ZONE,
    closed_at TIMESTAMP WITH TIME ZONE
);

-- Support ticket messages
CREATE TABLE IF NOT EXISTS support_ticket_messages (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    ticket_id UUID NOT NULL REFERENCES support_tickets(id) ON DELETE CASCADE,
    sender_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    message TEXT NOT NULL,
    is_admin_response BOOLEAN DEFAULT FALSE,
    attachments JSONB DEFAULT '[]',
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Support pricing settings
CREATE TABLE IF NOT EXISTS support_pricing_settings (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    support_type VARCHAR(20) NOT NULL UNIQUE, -- 'free', 'priority'
    price DECIMAL(10,2) NOT NULL DEFAULT 0.00,
    response_time_hours INTEGER NOT NULL,
    description TEXT,
    is_active BOOLEAN DEFAULT TRUE,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Insert default support pricing
INSERT INTO support_pricing_settings (support_type, price, response_time_hours, description, is_active)
VALUES 
    ('free', 0.00, 48, '24-72 hour response time for free support', true),
    ('priority', 0.20, 1, 'Priority support with response within 1 hour', true)
ON CONFLICT (support_type) DO NOTHING;

-- Enhanced commission settings for chat transfers
INSERT INTO admin_fee_settings (fee_type, fee_percentage, fee_fixed, minimum_fee, is_active) 
VALUES 
    ('chat_transfer', 2.00, 0.00, 0.05, true)
ON CONFLICT (fee_type) DO NOTHING;

-- Add indexes for performance
CREATE INDEX IF NOT EXISTS idx_chat_money_transfers_chat_id ON chat_money_transfers(chat_id);
CREATE INDEX IF NOT EXISTS idx_chat_money_transfers_sender_id ON chat_money_transfers(sender_id);
CREATE INDEX IF NOT EXISTS idx_chat_money_transfers_receiver_id ON chat_money_transfers(receiver_id);
CREATE INDEX IF NOT EXISTS idx_chat_money_transfers_status ON chat_money_transfers(status);

CREATE INDEX IF NOT EXISTS idx_support_tickets_user_id ON support_tickets(user_id);
CREATE INDEX IF NOT EXISTS idx_support_tickets_status ON support_tickets(status);
CREATE INDEX IF NOT EXISTS idx_support_tickets_ticket_type ON support_tickets(ticket_type);
CREATE INDEX IF NOT EXISTS idx_support_tickets_assigned_admin_id ON support_tickets(assigned_admin_id);

CREATE INDEX IF NOT EXISTS idx_support_ticket_messages_ticket_id ON support_ticket_messages(ticket_id);
CREATE INDEX IF NOT EXISTS idx_support_ticket_messages_sender_id ON support_ticket_messages(sender_id);
[V0_FILE]typescript:file="lib/admin-commission.ts" isMerged="true"
export interface CommissionSettings {
  id: string
  feeType: string
  feePercentage: number
  feeFixed: number
  minimumFee: number
  maximumFee?: number
  isActive: boolean
  createdAt: string
  updatedAt: string
}

export interface SupportPricingSettings {
  id: string
  supportType: string
  price: number
  responseTimeHours: number
  description: string
  isActive: boolean
  createdAt: string
  updatedAt: string
}

export async function getCommissionSettings(): Promise<CommissionSettings[]> {
  try {
    const response = await fetch("/api/admin/commission")
    if (!response.ok) {
      throw new Error("Failed to fetch commission settings")
    }
    const data = await response.json()
    return data.feeSettings || []
  } catch (error) {
    console.error("Error fetching commission settings:", error)
    throw error
  }
}

export async function updateCommissionSettings(
  feeType: string,
  settings: Partial<CommissionSettings>,
): Promise<CommissionSettings> {
  try {
    const response = await fetch("/api/admin/commission", {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ feeType, settings }),
    })

if (!response.ok) {
      throw new Error("Failed to update commission settings")
    }

const data = await response.json()
    return data.data
  } catch (error) {
    console.error("Error updating commission settings:", error)
    throw error
  }
}

export async function getSupportPricingSettings(): Promise<SupportPricingSettings[]> {
  try {
    const response = await fetch("/api/admin/support-pricing")
    if (!response.ok) {
      throw new Error("Failed to fetch support pricing settings")
    }
    const data = await response.json()
    return data.supportPricing || []
  } catch (error) {
    console.error("Error fetching support pricing settings:", error)
    throw error
  }
}

export async function updateSupportPricingSettings(
  supportType: string,
  settings: Partial<SupportPricingSettings>,
): Promise<SupportPricingSettings> {
  try {
    const response = await fetch("/api/admin/support-pricing", {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ supportType, settings }),
    })

if (!response.ok) {
      throw new Error("Failed to update support pricing settings")
    }

const data = await response.json()
    return data.data
  } catch (error) {
    console.error("Error updating support pricing settings:", error)
    throw error
  }
}

export function calculateChatTransferCommission(
  amount: number,
  commissionSettings: CommissionSettings,
): { commissionAmount: number; netAmount: number } {
  if (!commissionSettings.isActive) {
    return { commissionAmount: 0, netAmount: amount }
  }

let commissionAmount = 0

// Calculate percentage fee
  if (commissionSettings.feePercentage > 0) {
    commissionAmount += (amount * commissionSettings.feePercentage) / 100
  }

// Add fixed fee
  if (commissionSettings.feeFixed > 0) {
    commissionAmount += commissionSettings.feeFixed
  }

// Apply minimum fee
  if (commissionAmount < commissionSettings.minimumFee) {
    commissionAmount = commissionSettings.minimumFee
  }

// Apply maximum fee if set
  if (commissionSettings.maximumFee && commissionAmount > commissionSettings.maximumFee) {
    commissionAmount = commissionSettings.maximumFee
  }

const netAmount = amount - commissionAmount

return { commissionAmount, netAmount }
}
[V0_FILE]typescript:file="components/support/create-support-ticket.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
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 { Badge } from "@/components/ui/badge"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { AlertCircle, Clock, Zap, CreditCard } from "lucide-react"
import { toast } from "sonner"

interface SupportPricing {
  type: "free" | "priority"
  price: number
  responseTime: string
  description: string
}

const supportOptions: SupportPricing[] = [
  {
    type: "free",
    price: 0,
    responseTime: "24-72 hours",
    description: "Standard support with response within 24-72 hours",
  },
  {
    type: "priority",
    price: 0.2,
    responseTime: "Within 1 hour",
    description: "Priority support with guaranteed response within 1 hour",
  },
]

interface CreateSupportTicketProps {
  onClose?: () => void
  chatId?: string
}

export function CreateSupportTicket({ onClose, chatId }: CreateSupportTicketProps) {
  const [formData, setFormData] = useState({
    subject: "",
    description: "",
    priority: "normal",
    supportType: "free",
  })
  const [isSubmitting, setIsSubmitting] = useState(false)

const selectedOption = supportOptions.find((option) => option.type === formData.supportType)

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)

try {
      const ticketData = {
        ...formData,
        chatId,
        paymentRequired: formData.supportType === "priority",
        paymentAmount: selectedOption?.price || 0,
      }

console.log("[v0] Creating support ticket:", ticketData)

// Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 1500))

if (formData.supportType === "priority") {
        toast.success("Priority support ticket created! Payment processed successfully.")
      } else {
        toast.success("Support ticket created! We'll respond within 24-72 hours.")
      }

if (onClose) onClose()
    } catch (error) {
      console.error("Error creating support ticket:", error)
      toast.error("Failed to create support ticket. Please try again.")
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <Card className="w-full max-w-2xl mx-auto">
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <AlertCircle className="h-5 w-5 text-blue-600" />
          Create Support Ticket
        </CardTitle>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-6">
          {/* Support Type Selection */}
          <div className="space-y-4">
            <Label className="text-base font-medium">Support Type</Label>
            <RadioGroup
              value={formData.supportType}
              onValueChange={(value) => setFormData((prev) => ({ ...prev, supportType: value }))}
              className="space-y-3"
            >
              {supportOptions.map((option) => (
                <div key={option.type} className="flex items-center space-x-3">
                  <RadioGroupItem value={option.type} id={option.type} />
                  <Label htmlFor={option.type} className="flex-1 cursor-pointer">
                    <Card className="p-4 hover:bg-muted/50 transition-colors">
                      <div className="flex items-center justify-between">
                        <div className="flex items-center gap-3">
                          {option.type === "free" ? (
                            <Clock className="h-5 w-5 text-blue-600" />
                          ) : (
                            <Zap className="h-5 w-5 text-orange-600" />
                          )}
                          <div>
                            <div className="flex items-center gap-2">
                              <span className="font-medium capitalize">{option.type} Support</span>
                              {option.type === "priority" && (
                                <Badge variant="secondary" className="text-xs">
                                  Fast Response
                                </Badge>
                              )}
                            </div>
                            <p className="text-sm text-muted-foreground">{option.description}</p>
                          </div>
                        </div>
                        <div className="text-right">
                          <div className="font-bold text-lg">
                            {option.price === 0 ? "Free" : `$${option.price.toFixed(2)}`}
                          </div>
                          <div className="text-xs text-muted-foreground">{option.responseTime}</div>
                        </div>
                      </div>
                    </Card>
                  </Label>
                </div>
              ))}
            </RadioGroup>
          </div>

{/* Priority Support Payment Notice */}
          {formData.supportType === "priority" && (
            <div className="bg-orange-50 border border-orange-200 rounded-lg p-4">
              <div className="flex items-center gap-2 text-orange-800 mb-2">
                <CreditCard className="h-4 w-4" />
                <span className="font-medium">Priority Support Payment</span>
              </div>
              <p className="text-sm text-orange-700">
                A payment of ${selectedOption?.price.toFixed(2)} will be charged from your wallet for priority support
                with guaranteed response within 1 hour.
              </p>
            </div>
          )}

{/* Ticket Details */}
          <div className="space-y-4">
            <div>
              <Label htmlFor="subject">Subject *</Label>
              <Input
                id="subject"
                value={formData.subject}
                onChange={(e) => setFormData((prev) => ({ ...prev, subject: e.target.value }))}
                placeholder="Brief description of your issue"
                required
              />
            </div>

<div>
              <Label htmlFor="priority">Priority Level</Label>
              <Select
                value={formData.priority}
                onValueChange={(value) => setFormData((prev) => ({ ...prev, priority: value }))}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="low">Low - General question</SelectItem>
                  <SelectItem value="normal">Normal - Standard issue</SelectItem>
                  <SelectItem value="high">High - Urgent problem</SelectItem>
                  <SelectItem value="urgent">Urgent - Critical issue</SelectItem>
                </SelectContent>
              </Select>
            </div>

<div>
              <Label htmlFor="description">Description *</Label>
              <Textarea
                id="description"
                value={formData.description}
                onChange={(e) => setFormData((prev) => ({ ...prev, description: e.target.value }))}
                placeholder="Please provide detailed information about your issue..."
                rows={6}
                required
              />
            </div>
          </div>

{/* Submit Button */}
          <div className="flex gap-3">
            {onClose && (
              <Button type="button" variant="outline" onClick={onClose} className="flex-1 bg-transparent">
                Cancel
              </Button>
            )}
            <Button type="submit" disabled={isSubmitting} className="flex-1">
              {isSubmitting
                ? "Creating Ticket..."
                : formData.supportType === "priority"
                  ? `Create Priority Ticket ($${selectedOption?.price.toFixed(2)})`
                  : "Create Free Ticket"}
            </Button>
          </div>
        </form>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescript:file="components/support/support-ticket-list.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { AlertCircle, Clock, MessageSquare, Search, Filter, Zap } from "lucide-react"
import { formatDistanceToNow } from "date-fns"

interface SupportTicket {
  id: string
  subject: string
  description: string
  status: "open" | "in_progress" | "resolved" | "closed"
  priority: "low" | "normal" | "high" | "urgent"
  ticketType: "free" | "priority"
  paymentAmount: number
  responseTimeHours: number
  createdAt: Date
  firstResponseAt?: Date
  resolvedAt?: Date
  unreadMessages: number
}

// Mock data for demonstration
const mockTickets: SupportTicket[] = [
  {
    id: "1",
    subject: "Payment not processing",
    description: "My payment keeps failing when trying to withdraw funds",
    status: "in_progress",
    priority: "high",
    ticketType: "priority",
    paymentAmount: 0.2,
    responseTimeHours: 1,
    createdAt: new Date(Date.now() - 2 * 60 * 60 * 1000), // 2 hours ago
    firstResponseAt: new Date(Date.now() - 1.5 * 60 * 60 * 1000),
    unreadMessages: 2,
  },
  {
    id: "2",
    subject: "Account verification issue",
    description: "Unable to complete account verification process",
    status: "open",
    priority: "normal",
    ticketType: "free",
    paymentAmount: 0,
    responseTimeHours: 48,
    createdAt: new Date(Date.now() - 6 * 60 * 60 * 1000), // 6 hours ago
    unreadMessages: 0,
  },
  {
    id: "3",
    subject: "Profile not updating",
    description: "Changes to my profile are not being saved",
    status: "resolved",
    priority: "low",
    ticketType: "free",
    paymentAmount: 0,
    responseTimeHours: 48,
    createdAt: new Date(Date.now() - 24 * 60 * 60 * 1000), // 1 day ago
    firstResponseAt: new Date(Date.now() - 20 * 60 * 60 * 1000),
    resolvedAt: new Date(Date.now() - 2 * 60 * 60 * 1000),
    unreadMessages: 0,
  },
]

interface SupportTicketListProps {
  onTicketSelect?: (ticketId: string) => void
}

export function SupportTicketList({ onTicketSelect }: SupportTicketListProps) {
  const [tickets, setTickets] = useState<SupportTicket[]>(mockTickets)
  const [searchQuery, setSearchQuery] = useState("")
  const [statusFilter, setStatusFilter] = useState<string>("all")
  const [typeFilter, setTypeFilter] = useState<string>("all")

const getStatusBadge = (status: SupportTicket["status"]) => {
    const variants = {
      open: "destructive",
      in_progress: "default",
      resolved: "secondary",
      closed: "outline",
    } as const

const labels = {
      open: "Open",
      in_progress: "In Progress",
      resolved: "Resolved",
      closed: "Closed",
    }

return (
      <Badge variant={variants[status]} className="text-xs">
        {labels[status]}
      </Badge>
    )
  }

const getPriorityBadge = (priority: SupportTicket["priority"]) => {
    const colors = {
      low: "bg-gray-100 text-gray-800",
      normal: "bg-blue-100 text-blue-800",
      high: "bg-orange-100 text-orange-800",
      urgent: "bg-red-100 text-red-800",
    }

return (
      <Badge variant="outline" className={`text-xs ${colors[priority]}`}>
        {priority.charAt(0).toUpperCase() + priority.slice(1)}
      </Badge>
    )
  }

const getTypeIcon = (type: SupportTicket["ticketType"]) => {
    return type === "priority" ? (
      <Zap className="h-4 w-4 text-orange-600" />
    ) : (
      <Clock className="h-4 w-4 text-blue-600" />
    )
  }

const matchesStatus = statusFilter === "all" || ticket.status === statusFilter
    const matchesType = typeFilter === "all" || ticket.ticketType === typeFilter

return matchesSearch && matchesStatus && matchesType
  })

return (
    <div className="space-y-6">
      {/* Header */}
      <div>
        <h2 className="text-2xl font-bold">Support Tickets</h2>
        <p className="text-muted-foreground">Manage your support requests and track their progress</p>
      </div>

{/* Filters */}
      <div className="flex flex-col sm:flex-row gap-4">
        <div className="relative flex-1">
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
          <Input
            placeholder="Search tickets..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="pl-10"
          />
        </div>

<Select value={statusFilter} onValueChange={setStatusFilter}>
          <SelectTrigger className="w-full sm:w-40">
            <Filter className="h-4 w-4 mr-2" />
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">All Status</SelectItem>
            <SelectItem value="open">Open</SelectItem>
            <SelectItem value="in_progress">In Progress</SelectItem>
            <SelectItem value="resolved">Resolved</SelectItem>
            <SelectItem value="closed">Closed</SelectItem>
          </SelectContent>
        </Select>

<Select value={typeFilter} onValueChange={setTypeFilter}>
          <SelectTrigger className="w-full sm:w-40">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">All Types</SelectItem>
            <SelectItem value="free">Free Support</SelectItem>
            <SelectItem value="priority">Priority Support</SelectItem>
          </SelectContent>
        </Select>
      </div>

{/* Tickets List */}
      <div className="space-y-4">
        {filteredTickets.length === 0 ? (
          <Card>
            <CardContent className="flex flex-col items-center justify-center py-12">
              <AlertCircle className="h-12 w-12 text-muted-foreground mb-4" />
              <h3 className="text-lg font-medium text-muted-foreground mb-2">No tickets found</h3>
              <p className="text-sm text-muted-foreground text-center">
                {searchQuery || statusFilter !== "all" || typeFilter !== "all"
                  ? "Try adjusting your search or filters"
                  : "You haven't created any support tickets yet"}
              </p>
            </CardContent>
          </Card>
        ) : (
          filteredTickets.map((ticket) => (
            <Card key={ticket.id} className="hover:shadow-md transition-shadow cursor-pointer">
              <CardContent className="p-6">
                <div className="flex items-start justify-between gap-4">
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2 mb-2">
                      {getTypeIcon(ticket.ticketType)}
                      <h3 className="font-medium truncate">{ticket.subject}</h3>
                      {ticket.unreadMessages > 0 && (
                        <Badge variant="destructive" className="text-xs">
                          {ticket.unreadMessages} new
                        </Badge>
                      )}
                    </div>

<p className="text-sm text-muted-foreground mb-3 line-clamp-2">{ticket.description}</p>

<div className="flex items-center gap-2 flex-wrap">
                      {getStatusBadge(ticket.status)}
                      {getPriorityBadge(ticket.priority)}

{ticket.ticketType === "priority" && (
                        <Badge variant="outline" className="text-xs bg-orange-50 text-orange-700">
                          Priority (${ticket.paymentAmount.toFixed(2)})
                        </Badge>
                      )}
                    </div>
                  </div>

<div className="text-right text-sm text-muted-foreground">
                    <div className="mb-1">Created {formatDistanceToNow(ticket.createdAt, { addSuffix: true })}</div>
                    {ticket.firstResponseAt && (
                      <div className="text-xs">
                        First response {formatDistanceToNow(ticket.firstResponseAt, { addSuffix: true })}
                      </div>
                    )}
                    {ticket.resolvedAt && (
                      <div className="text-xs text-green-600">
                        Resolved {formatDistanceToNow(ticket.resolvedAt, { addSuffix: true })}
                      </div>
                    )}
                  </div>
                </div>

{onTicketSelect && (
                  <div className="mt-4 pt-4 border-t">
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => onTicketSelect(ticket.id)}
                      className="w-full sm:w-auto"
                    >
                      <MessageSquare className="h-4 w-4 mr-2" />
                      View Conversation
                    </Button>
                  </div>
                )}
              </CardContent>
            </Card>
          ))
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="app/dashboard/support/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { CreateSupportTicket } from "@/components/support/create-support-ticket"
import { SupportTicketList } from "@/components/support/support-ticket-list"
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog"
import { Plus, HelpCircle } from "lucide-react"

export default function SupportPage() {
  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false)
  const [selectedTicketId, setSelectedTicketId] = useState<string | null>(null)

const handleTicketSelect = (ticketId: string) => {
    setSelectedTicketId(ticketId)
    // Navigate to ticket conversation or open in modal
    console.log("[v0] Opening ticket conversation:", ticketId)
  }

return (
    <div className="container mx-auto px-4 py-8 space-y-8">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold flex items-center gap-2">
            <HelpCircle className="h-8 w-8 text-blue-600" />
            Support Center
          </h1>
          <p className="text-muted-foreground mt-2">Get help with your account, payments, or technical issues</p>
        </div>

<Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
          <DialogTrigger asChild>
            <Button className="gap-2">
              <Plus className="h-4 w-4" />
              Create Ticket
            </Button>
          </DialogTrigger>
          <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
            <CreateSupportTicket onClose={() => setIsCreateDialogOpen(false)} />
          </DialogContent>
        </Dialog>
      </div>

{/* Support Ticket List */}
      <SupportTicketList onTicketSelect={handleTicketSelect} />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/api/chat/money-transfer/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { createServerClient } from "@/lib/supabase/server"
import { getUser } from "@/lib/auth"

export async function POST(request: NextRequest) {
  try {
    const user = await getUser()
    if (!user) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const { chatId, receiverId, amount, message } = await request.json()

if (!chatId || !receiverId || !amount || amount <= 0) {
      return NextResponse.json({ error: "Missing required fields" }, { status: 400 })
    }

const supabase = createServerClient()

// Get commission settings
    const { data: commissionSettings } = await supabase
      .from("admin_fee_settings")
      .select("*")
      .eq("fee_type", "chat_transfer")
      .eq("is_active", true)
      .single()

// Calculate commission
    let commissionAmount = 0
    if (commissionSettings) {
      commissionAmount = (amount * commissionSettings.fee_percentage) / 100
      commissionAmount += commissionSettings.fee_fixed || 0

if (commissionAmount < commissionSettings.minimum_fee) {
        commissionAmount = commissionSettings.minimum_fee
      }

if (commissionSettings.maximum_fee && commissionAmount > commissionSettings.maximum_fee) {
        commissionAmount = commissionSettings.maximum_fee
      }
    }

const netAmount = amount - commissionAmount

// Start transaction
    const { data: transfer, error: transferError } = await supabase
      .from("chat_money_transfers")
      .insert({
        chat_id: chatId,
        sender_id: user.id,
        receiver_id: receiverId,
        amount,
        commission_amount: commissionAmount,
        net_amount: netAmount,
        message: message || null,
        status: "pending",
      })
      .select()
      .single()

if (transferError) {
      console.error("Error creating money transfer:", transferError)
      return NextResponse.json({ error: "Failed to create transfer" }, { status: 500 })
    }

// Process wallet transactions (simplified - in real app, use proper transaction handling)
    // Deduct from sender
    await supabase.rpc("update_wallet_balance", {
      user_id: user.id,
      amount: -amount,
      transaction_type: "chat_transfer_sent",
    })

// Add to receiver
    await supabase.rpc("update_wallet_balance", {
      user_id: receiverId,
      amount: netAmount,
      transaction_type: "chat_transfer_received",
    })

// Update transfer status
    await supabase
      .from("chat_money_transfers")
      .update({ status: "completed", completed_at: new Date().toISOString() })
      .eq("id", transfer.id)

return NextResponse.json({
      success: true,
      transfer: {
        ...transfer,
        status: "completed",
      },
    })
  } catch (error) {
    console.error("Error in money transfer:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="components/chat/support-request-dialog.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Card } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { HelpCircle, Clock, Zap, CreditCard, AlertCircle } from "lucide-react"
import { toast } from "sonner"

interface SupportOption {
  type: "free" | "priority"
  price: number
  responseTime: string
  description: string
}

const supportOptions: SupportOption[] = [
  {
    type: "free",
    price: 0,
    responseTime: "24-72 hours",
    description: "Standard support with response within 24-72 hours",
  },
  {
    type: "priority",
    price: 0.2,
    responseTime: "Within 1 hour",
    description: "Priority support with guaranteed response within 1 hour",
  },
]

interface SupportRequestDialogProps {
  isOpen: boolean
  onClose: () => void
  chatId?: string
  onRequestComplete?: (ticketData: any) => void
}

export function SupportRequestDialog({ isOpen, onClose, chatId, onRequestComplete }: SupportRequestDialogProps) {
  const [formData, setFormData] = useState({
    subject: "",
    description: "",
    priority: "normal",
    supportType: "free",
  })
  const [isSubmitting, setIsSubmitting] = useState(false)

const selectedOption = supportOptions.find((option) => option.type === formData.supportType)

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)

try {
      const ticketData = {
        ...formData,
        chatId,
        paymentRequired: formData.supportType === "priority",
        paymentAmount: selectedOption?.price || 0,
      }

console.log("[v0] Creating support ticket from chat:", ticketData)

// Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 2000))

if (formData.supportType === "priority") {
        toast.success("Priority support ticket created! Admin will respond within 1 hour.")
      } else {
        toast.success("Support ticket created! Admin will respond within 24-72 hours.")
      }

if (onRequestComplete) {
        onRequestComplete(ticketData)
      }

onClose()
      setFormData({
        subject: "",
        description: "",
        priority: "normal",
        supportType: "free",
      })
    } catch (error) {
      console.error("Error creating support ticket:", error)
      toast.error("Failed to create support ticket. Please try again.")
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <HelpCircle className="h-5 w-5 text-blue-600" />
            Call Admin Support
          </DialogTitle>
        </DialogHeader>

<form onSubmit={handleSubmit} className="space-y-6">
          {/* Support Type Selection */}
          <div className="space-y-4">
            <Label className="text-base font-medium">Support Type</Label>
            <RadioGroup
              value={formData.supportType}
              onValueChange={(value) => setFormData((prev) => ({ ...prev, supportType: value }))}
              className="space-y-3"
            >
              {supportOptions.map((option) => (
                <div key={option.type} className="flex items-center space-x-3">
                  <RadioGroupItem value={option.type} id={option.type} />
                  <Label htmlFor={option.type} className="flex-1 cursor-pointer">
                    <Card className="p-4 hover:bg-muted/50 transition-colors">
                      <div className="flex items-center justify-between">
                        <div className="flex items-center gap-3">
                          {option.type === "free" ? (
                            <Clock className="h-5 w-5 text-blue-600" />
                          ) : (
                            <Zap className="h-5 w-5 text-orange-600" />
                          )}
                          <div>
                            <div className="flex items-center gap-2">
                              <span className="font-medium capitalize">{option.type} Support</span>
                              {option.type === "priority" && (
                                <Badge variant="secondary" className="text-xs">
                                  Fast Response
                                </Badge>
                              )}
                            </div>
                            <p className="text-sm text-muted-foreground">{option.description}</p>
                          </div>
                        </div>
                        <div className="text-right">
                          <div className="font-bold text-lg">
                            {option.price === 0 ? "Free" : `$${option.price.toFixed(2)}`}
                          </div>
                          <div className="text-xs text-muted-foreground">{option.responseTime}</div>
                        </div>
                      </div>
                    </Card>
                  </Label>
                </div>
              ))}
            </RadioGroup>
          </div>

{/* Priority Support Payment Notice */}
          {formData.supportType === "priority" && (
            <div className="bg-orange-50 border border-orange-200 rounded-lg p-4">
              <div className="flex items-center gap-2 text-orange-800 mb-2">
                <CreditCard className="h-4 w-4" />
                <span className="font-medium">Priority Support Payment</span>
              </div>
              <p className="text-sm text-orange-700">
                A payment of ${selectedOption?.price.toFixed(2)} will be charged from your wallet for priority support
                with guaranteed admin response within 1 hour.
              </p>
            </div>
          )}

{/* Chat Context Notice */}
          {chatId && (
            <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
              <div className="flex items-center gap-2 text-blue-800 mb-2">
                <AlertCircle className="h-4 w-4" />
                <span className="font-medium">Chat Context</span>
              </div>
              <p className="text-sm text-blue-700">
                This support request will be linked to your current chat conversation. Admin can see the chat history to
                better assist you.
              </p>
            </div>
          )}

{/* Issue Details */}
          <div className="space-y-4">
            <div>
              <Label htmlFor="subject">Issue Subject *</Label>
              <Input
                id="subject"
                value={formData.subject}
                onChange={(e) => setFormData((prev) => ({ ...prev, subject: e.target.value }))}
                placeholder="Brief description of your issue"
                required
              />
            </div>

<div>
              <Label htmlFor="priority">Issue Priority</Label>
              <Select
                value={formData.priority}
                onValueChange={(value) => setFormData((prev) => ({ ...prev, priority: value }))}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="low">Low - General question</SelectItem>
                  <SelectItem value="normal">Normal - Standard issue</SelectItem>
                  <SelectItem value="high">High - Urgent problem</SelectItem>
                  <SelectItem value="urgent">Urgent - Critical issue</SelectItem>
                </SelectContent>
              </Select>
            </div>

<div>
              <Label htmlFor="description">Detailed Description *</Label>
              <Textarea
                id="description"
                value={formData.description}
                onChange={(e) => setFormData((prev) => ({ ...prev, description: e.target.value }))}
                placeholder="Please provide detailed information about your issue, including any error messages or steps to reproduce..."
                rows={6}
                required
              />
            </div>
          </div>

{/* Submit Buttons */}
          <div className="flex gap-3">
            <Button type="button" variant="outline" onClick={onClose} className="flex-1 bg-transparent">
              Cancel
            </Button>
            <Button type="submit" disabled={isSubmitting} className="flex-1">
              {isSubmitting
                ? "Creating Ticket..."
                : formData.supportType === "priority"
                  ? `Create Priority Ticket ($${selectedOption?.price.toFixed(2)})`
                  : "Create Free Ticket"}
            </Button>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescript:file="app/api/support/tickets/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { createServerClient } from "@/lib/supabase/server"
import { getUser } from "@/lib/auth"

export async function POST(request: NextRequest) {
  try {
    const user = await getUser()
    if (!user) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const { subject, description, priority, ticketType, chatId } = await request.json()

if (!subject || !description || !ticketType) {
      return NextResponse.json({ error: "Missing required fields" }, { status: 400 })
    }

const supabase = createServerClient()

// Get support pricing
    const { data: supportPricing } = await supabase
      .from("support_pricing_settings")
      .select("*")
      .eq("support_type", ticketType)
      .eq("is_active", true)
      .single()

const paymentAmount = supportPricing?.price || 0
    const responseTimeHours = supportPricing?.response_time_hours || 48

// Create support ticket
    const { data: ticket, error: ticketError } = await supabase
      .from("support_tickets")
      .insert({
        user_id: user.id,
        chat_id: chatId || null,
        ticket_type: ticketType,
        subject,
        description,
        priority: priority || "normal",
        payment_amount: paymentAmount,
        response_time_hours: responseTimeHours,
        status: "open",
      })
      .select()
      .single()

if (ticketError) {
      console.error("Error creating support ticket:", ticketError)
      return NextResponse.json({ error: "Failed to create support ticket" }, { status: 500 })
    }

// Process payment for priority support
    if (ticketType === "priority" && paymentAmount > 0) {
      // Deduct from user wallet
      await supabase.rpc("update_wallet_balance", {
        user_id: user.id,
        amount: -paymentAmount,
        transaction_type: "priority_support_payment",
      })

// Update ticket with payment transaction
      await supabase
        .from("support_tickets")
        .update({ payment_transaction_id: "mock_transaction_id" })
        .eq("id", ticket.id)
    }

return NextResponse.json({
      success: true,
      ticket: {
        ...ticket,
        paymentProcessed: ticketType === "priority",
      },
    })
  } catch (error) {
    console.error("Error in support ticket creation:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

export async function GET(request: NextRequest) {
  try {
    const user = await getUser()
    if (!user) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const { searchParams } = new URL(request.url)
    const status = searchParams.get("status")
    const ticketType = searchParams.get("ticketType")

const supabase = createServerClient()

let query = supabase
      .from("support_tickets")
      .select("*")
      .eq("user_id", user.id)
      .order("created_at", { ascending: false })

if (status && status !== "all") {
      query = query.eq("status", status)
    }

if (ticketType && ticketType !== "all") {
      query = query.eq("ticket_type", ticketType)
    }

const { data: tickets, error } = await query

if (error) {
      console.error("Error fetching support tickets:", error)
      return NextResponse.json({ error: "Failed to fetch support tickets" }, { status: 500 })
    }

return NextResponse.json(tickets)
  } catch (error) {
    console.error("Error in support tickets GET:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]sql:file="scripts/13-instant-payment-workflow.sql" isMerged="true"
-- Add instant payment workflow support

-- Add instant payment option to jobs
ALTER TABLE microjobs 
ADD COLUMN IF NOT EXISTS instant_payment_enabled BOOLEAN DEFAULT TRUE,
ADD COLUMN IF NOT EXISTS requires_proof_submission BOOLEAN DEFAULT FALSE;

-- Update job applications to track instant payments
ALTER TABLE job_applications 
ADD COLUMN IF NOT EXISTS instant_payment_processed BOOLEAN DEFAULT FALSE,
ADD COLUMN IF NOT EXISTS payment_processed_at TIMESTAMP WITH TIME ZONE;

-- Add instant payment transactions table
CREATE TABLE IF NOT EXISTS instant_payments (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    job_id UUID NOT NULL REFERENCES microjobs(id) ON DELETE CASCADE,
    application_id UUID NOT NULL REFERENCES job_applications(id) ON DELETE CASCADE,
    employer_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    worker_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    payment_amount DECIMAL(10,2) NOT NULL,
    platform_fee DECIMAL(10,2) NOT NULL,
    worker_amount DECIMAL(10,2) NOT NULL,
    status VARCHAR(20) DEFAULT 'completed', -- 'completed', 'failed', 'refunded'
    processed_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create index for faster queries
CREATE INDEX IF NOT EXISTS idx_instant_payments_job_id ON instant_payments(job_id);
CREATE INDEX IF NOT EXISTS idx_instant_payments_worker_id ON instant_payments(worker_id);
CREATE INDEX IF NOT EXISTS idx_instant_payments_employer_id ON instant_payments(employer_id);

-- Update existing jobs to enable instant payment by default
UPDATE microjobs 
SET instant_payment_enabled = TRUE, 
    requires_proof_submission = FALSE 
WHERE instant_payment_enabled IS NULL;
[V0_FILE]typescript:file="components/jobs/job-creation-form.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select"
import { Label } from "@/components/ui/label"
import { CheckCircle } from "@/components/ui/icons" // Import CheckCircle icon

const JobCreationForm = () => {
  const [paymentType, setPaymentType] = useState("") // Declare paymentType and setPaymentType

return (
    <div className="space-y-2">
      <Label htmlFor="paymentType">Payment Method</Label>
      <Select value={paymentType} onValueChange={setPaymentType}>
        <SelectTrigger>
          <SelectValue placeholder="Select payment method" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="instant">
            <div className="flex flex-col">
              <span className="font-medium">Instant Payment (Recommended)</span>
              <span className="text-sm text-gray-500">Payment released immediately when you accept a worker</span>
            </div>
          </SelectItem>
          <SelectItem value="proof_required">
            <div className="flex flex-col">
              <span className="font-medium">Proof Required</span>
              <span className="text-sm text-gray-500">Worker must submit proof before payment</span>
            </div>
          </SelectItem>
        </SelectContent>
      </Select>
      {paymentType === "instant" && (
        <div className="bg-green-50 border border-green-200 rounded-lg p-3">
          <div className="flex items-start space-x-2">
            <CheckCircle className="h-4 w-4 text-green-600 mt-0.5" />
            <div className="text-sm">
              <p className="text-green-800 font-medium">Instant Payment Enabled</p>
              <p className="text-green-700">
                When you accept a worker's application, payment will be released immediately to their withdrawal
                balance. This builds trust and gets work started faster.
              </p>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}

export default JobCreationForm
[V0_FILE]typescript:file="components/work-proofs/work-proof-modal.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Input } from "@/components/ui/input"
import { X, Search, Eye } from "lucide-react"
import { type WorkProof, getWorkProofStatusColor, getWorkProofStatusLabel } from "@/lib/work-proofs"
import { EnhancedWorkProofModal } from "./enhanced-work-proof-modal"

interface WorkProofModalProps {
  proofs: WorkProof[]
  isOpen: boolean
  onClose: () => void
  onUpdate: () => void
  userRole: "employer" | "worker"
}

interface ProofDetailModalProps {
  proof: WorkProof | null
  isOpen: boolean
  onClose: () => void
  onUpdate: () => void
  userRole: "employer" | "worker"
}

function ProofDetailModal({ proof, isOpen, onClose, onUpdate, userRole }: ProofDetailModalProps) {
  return (
    <EnhancedWorkProofModal proof={proof} isOpen={isOpen} onClose={onClose} onUpdate={onUpdate} userRole={userRole} />
  )
}

function WorkProofModal({ proofs, isOpen, onClose, onUpdate, userRole }: WorkProofModalProps) {
  const [searchTerm, setSearchTerm] = useState("")
  const [entriesPerPage, setEntriesPerPage] = useState(10)
  const [selectedProof, setSelectedProof] = useState<WorkProof | null>(null)
  const [detailModalOpen, setDetailModalOpen] = useState(false)

const filteredProofs = proofs.filter(
    (proof) =>
      proof.worker.firstName.toLowerCase().includes(searchTerm.toLowerCase()) ||
      proof.worker.lastName.toLowerCase().includes(searchTerm.toLowerCase()) ||
      proof.worker.username.toLowerCase().includes(searchTerm.toLowerCase()) ||
      proof.description.toLowerCase().includes(searchTerm.toLowerCase()),
  )

const handleViewProof = (proof: WorkProof) => {
    setSelectedProof(proof)
    setDetailModalOpen(true)
  }

const handleDetailModalClose = () => {
    setDetailModalOpen(false)
    setSelectedProof(null)
  }

return (
    <>
      <Dialog open={isOpen} onOpenChange={onClose}>
        <DialogContent className="max-w-6xl max-h-[90vh] overflow-hidden flex flex-col">
          <DialogHeader className="bg-gradient-to-r from-purple-600 to-purple-700 text-white p-6 -m-6 mb-0">
            <div className="flex items-center justify-between">
              <DialogTitle className="text-xl font-semibold">Work Proof</DialogTitle>
              <Button variant="ghost" size="sm" onClick={onClose} className="text-white hover:bg-white/20">
                <X className="h-4 w-4" />
              </Button>
            </div>
          </DialogHeader>

<div className="flex-1 overflow-hidden flex flex-col p-6 -mx-6">
            {/* Controls */}
            <div className="flex items-center justify-between mb-4">
              <div className="flex items-center gap-4">
                <div className="flex items-center gap-2">
                  <span className="text-sm text-gray-600">Show</span>
                  <select
                    value={entriesPerPage}
                    onChange={(e) => setEntriesPerPage(Number(e.target.value))}
                    className="border rounded px-2 py-1 text-sm"
                  >
                    <option value={10}>10</option>
                    <option value={25}>25</option>
                    <option value={50}>50</option>
                  </select>
                  <span className="text-sm text-gray-600">Entries</span>
                </div>
              </div>

<div className="flex items-center gap-2">
                <span className="text-sm text-gray-600">Search:</span>
                <div className="relative">
                  <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                  <Input
                    placeholder="Search proofs..."
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    className="pl-8 w-64"
                  />
                </div>
              </div>
            </div>

{/* Table */}
            <div className="flex-1 overflow-auto border rounded-lg">
              <Table>
                <TableHeader>
                  <TableRow className="bg-purple-600 hover:bg-purple-600">
                    <TableHead className="text-white font-semibold">Proof ID</TableHead>
                    <TableHead className="text-white font-semibold">User ID</TableHead>
                    <TableHead className="text-white font-semibold">User Details</TableHead>
                    <TableHead className="text-white font-semibold">Work Proof</TableHead>
                    <TableHead className="text-white font-semibold text-center">Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredProofs.slice(0, entriesPerPage).map((proof, index) => (
                    <TableRow key={proof.id} className="hover:bg-gray-50">
                      <TableCell>
                        <div className="bg-purple-600 text-white px-3 py-2 rounded text-center font-medium">
                          proof{1591 + index}
                          <br />
                          <span className="text-xs">{19 + index}</span>
                        </div>
                      </TableCell>
                      <TableCell className="font-medium">{proof.workerId}</TableCell>
                      <TableCell>
                        <div className="flex items-center space-x-3">
                          <Avatar className="h-8 w-8">
                            <AvatarFallback className="text-xs">
                              {proof.worker.firstName[0]}
                              {proof.worker.lastName[0]}
                            </AvatarFallback>
                          </Avatar>
                          <div>
                            <div className="font-medium text-sm">
                              {proof.worker.firstName} {proof.worker.lastName}
                            </div>
                            <div className="text-xs text-gray-500">@{proof.worker.username}</div>
                          </div>
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="max-w-xs">
                          <div className="text-sm font-medium text-gray-900 truncate">{proof.title}</div>
                          <div className="text-xs text-gray-500 mt-1 truncate">{proof.description}</div>
                          <Badge className={`mt-1 ${getWorkProofStatusColor(proof.status)}`}>
                            {getWorkProofStatusLabel(proof.status)}
                          </Badge>
                        </div>
                      </TableCell>
                      <TableCell className="text-center">
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() => handleViewProof(proof)}
                          className="text-blue-600 hover:text-blue-700 hover:bg-blue-50"
                        >
                          <Eye className="mr-1 h-3 w-3" />
                          View
                        </Button>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>

{filteredProofs.length === 0 && (
              <div className="text-center py-8">
                <p className="text-gray-600">No work proofs found</p>
                <p className="text-sm text-gray-500 mt-2">
                  {searchTerm ? "Try adjusting your search terms" : "Work proofs will appear here once submitted"}
                </p>
              </div>
            )}
          </div>
        </DialogContent>
      </Dialog>

{/* Detail Modal */}
      <ProofDetailModal
        proof={selectedProof}
        isOpen={detailModalOpen}
        onClose={handleDetailModalClose}
        onUpdate={onUpdate}
        userRole={userRole}
      />
    </>
  )
}

export { WorkProofModal }
export default WorkProofModal
[V0_FILE]png:file="public/mobile-app-interface.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/mobile-app-interface-lNxh1uxAdA9GfSKK2fowMLonzrSCoW.png" isMerged="true"
[V0_FILE]typescript:file="app/dashboard/jobs/[id]/applications/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useParams, useRouter } from "next/navigation"
import { useAuth } from "@/contexts/auth-context"
import { DashboardHeader } from "@/components/dashboard/dashboard-header"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ArrowLeft, Star, MapPin, Clock, DollarSign, ExternalLink, Check, X, MessageCircle, User } from "lucide-react"
import Link from "next/link"
import { toast } from "sonner"
import {
  getJobById,
  getJobApplications,
  acceptJobApplication,
  rejectJobApplication,
  type Job,
  type JobApplication,
} from "@/lib/jobs"

export default function JobApplicationsPage() {
  const params = useParams()
  const router = useRouter()
  const { user } = useAuth()
  const jobId = params.id as string

const [job, setJob] = useState<Job | null>(null)
  const [applications, setApplications] = useState<JobApplication[]>([])
  const [loading, setLoading] = useState(true)
  const [actionLoading, setActionLoading] = useState<string | null>(null)

useEffect(() => {
    const fetchData = async () => {
      try {
        console.log("[v0] Loading job and applications for:", jobId)
        const [jobData, applicationsData] = await Promise.all([getJobById(jobId), getJobApplications(jobId)])

if (!jobData) {
          toast.error("Job not found")
          router.push("/dashboard/jobs")
          return
        }

if (jobData.userId !== user?.id) {
          toast.error("You don't have permission to view these applications")
          router.push("/dashboard/jobs")
          return
        }

setJob(jobData)
        setApplications(applicationsData)
        console.log("[v0] Loaded applications:", applicationsData)
      } catch (error) {
        console.error("[v0] Error loading data:", error)
        toast.error("Failed to load applications")
      } finally {
        setLoading(false)
      }
    }

if (jobId && user?.id) {
      fetchData()
    }
  }, [jobId, user?.id, router])

const handleAcceptApplication = async (applicationId: string) => {
    setActionLoading(applicationId)
    try {
      console.log("[v0] Accepting application and processing instant payment:", applicationId)

// Find the application to get the proposed budget
      const application = applications.find((app) => app.id === applicationId)
      if (!application) {
        throw new Error("Application not found")
      }

console.log("[v0] Processing payment of $", application.proposedBudget)

await acceptJobApplication(applicationId, user!.id)

toast.success(`Application accepted! Payment of $${application.proposedBudget} released to worker instantly!`)

// Refresh data
      const [updatedApplications, updatedJob] = await Promise.all([getJobApplications(jobId), getJobById(jobId)])

setApplications(updatedApplications)
      setJob(updatedJob)

setTimeout(() => {
        router.push("/dashboard/jobs")
      }, 2000)
    } catch (error) {
      console.error("[v0] Error accepting application:", error)
      toast.error("Failed to accept application and process payment")
    } finally {
      setActionLoading(null)
    }
  }

const handleRejectApplication = async (applicationId: string) => {
    setActionLoading(applicationId)
    try {
      console.log("[v0] Rejecting application:", applicationId)
      await rejectJobApplication(applicationId, user!.id, "Application rejected by employer")
      toast.success("Application rejected")
      const updatedApplications = await getJobApplications(jobId)
      setApplications(updatedApplications)
    } catch (error) {
      console.error("[v0] Error rejecting application:", error)
      toast.error("Failed to reject application")
    } finally {
      setActionLoading(null)
    }
  }

const handleContactApplicant = (applicantId: string) => {
    router.push(`/dashboard/messages?userId=${applicantId}&jobId=${jobId}`)
  }

const pendingApplications = applications.filter((app) => app.status === "pending")
  const acceptedApplications = applications.filter((app) => app.status === "accepted")
  const rejectedApplications = applications.filter((app) => app.status === "rejected")

if (loading) {
    return (
      <>
        <DashboardHeader title="Job Applications" description="Manage applications for your job" />
        <div className="flex-1 flex items-center justify-center">
          <div className="text-center">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-4"></div>
            <p className="text-gray-600">Loading applications...</p>
          </div>
        </div>
      </>
    )
  }

if (!job) {
    return (
      <>
        <DashboardHeader title="Job Applications" description="Job not found" />
        <div className="flex-1 flex items-center justify-center">
          <div className="text-center">
            <p className="text-gray-600">Job not found</p>
            <Link href="/dashboard/jobs">
              <Button className="mt-4">Back to My Jobs</Button>
            </Link>
          </div>
        </div>
      </>
    )
  }

return (
    <>
      <DashboardHeader title="Job Applications" description={`Applications for "${job.title}"`} />

<Card>
            <CardHeader>
              <CardTitle className="flex items-center justify-between">
                <span>{job.title}</span>
                <div className="flex items-center space-x-2">
                  <Badge className="bg-blue-100 text-blue-800">{applications.length} Applications</Badge>
                </div>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-4 gap-4 text-sm">
                <div className="flex items-center">
                  <DollarSign className="mr-2 h-4 w-4 text-gray-500" />
                  <span>
                    ${job.budgetMin} - ${job.budgetMax}
                  </span>
                </div>
                <div className="flex items-center">
                  <MapPin className="mr-2 h-4 w-4 text-gray-500" />
                  <span>{job.location}</span>
                </div>
                <div className="flex items-center">
                  <Clock className="mr-2 h-4 w-4 text-gray-500" />
                  <span>Due {new Date(job.deadline).toLocaleDateString()}</span>
                </div>
                <div className="flex items-center">
                  <User className="mr-2 h-4 w-4 text-gray-500" />
                  <span>{job.workersNeeded} workers needed</span>
                </div>
              </div>
            </CardContent>
          </Card>

<Tabs defaultValue="pending" className="space-y-6">
            <TabsList className="grid w-full grid-cols-3">
              <TabsTrigger value="pending">Pending ({pendingApplications.length})</TabsTrigger>
              <TabsTrigger value="accepted">Accepted & Paid ({acceptedApplications.length})</TabsTrigger>
              <TabsTrigger value="rejected">Rejected ({rejectedApplications.length})</TabsTrigger>
            </TabsList>

<TabsContent value="pending" className="space-y-4">
              {pendingApplications.map((application) => (
                <Card key={application.id} className="hover:shadow-md transition-shadow border-2 border-blue-100">
                  <CardHeader>
                    <div className="flex items-start justify-between">
                      <div className="flex items-center space-x-3">
                        <Avatar className="h-12 w-12">
                          <AvatarFallback className="bg-blue-100 text-blue-700 font-semibold">
                            {application.applicant.firstName[0]}
                            {application.applicant.lastName[0]}
                          </AvatarFallback>
                        </Avatar>
                        <div>
                          <h3 className="font-semibold text-lg">
                            {application.applicant.firstName} {application.applicant.lastName}
                          </h3>
                          <p className="text-sm text-gray-600">@{application.applicant.username}</p>
                          <div className="flex items-center space-x-2 mt-1">
                            <div className="flex items-center">
                              <Star className="h-4 w-4 text-yellow-400 fill-current" />
                              <span className="text-sm ml-1 font-medium">{application.applicant.rating}</span>
                            </div>
                            <span className="text-sm text-gray-500">
                              ({application.applicant.totalReviews} reviews)
                            </span>
                          </div>
                        </div>
                      </div>
                      <div className="text-right">
                        <div className="bg-green-50 p-3 rounded-lg border border-green-200">
                          <div className="text-2xl font-bold text-green-700">${application.proposedBudget}</div>
                          <div className="text-sm text-green-600">Payment Amount</div>
                          <div className="text-xs text-gray-500 mt-1">{application.estimatedDuration}</div>
                        </div>
                      </div>
                    </div>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      <div>
                        <h4 className="font-medium mb-2 text-gray-800">Application Details</h4>
                        <p className="text-gray-700 text-sm leading-relaxed bg-gray-50 p-3 rounded-lg">
                          {application.coverLetter}
                        </p>
                      </div>

<div>
                        <h4 className="font-medium mb-2 text-gray-800">Skills</h4>
                        <div className="flex flex-wrap gap-2">
                          {application.applicant.skills.map((skill) => (
                            <Badge
                              key={skill}
                              variant="outline"
                              className="text-xs bg-blue-50 text-blue-700 border-blue-200"
                            >
                              {skill}
                            </Badge>
                          ))}
                        </div>
                      </div>

{application.portfolioLinks.length > 0 && (
                        <div>
                          <h4 className="font-medium mb-2 text-gray-800">Portfolio</h4>
                          <div className="space-y-1">
                            {application.portfolioLinks.map((link, index) => (
                              <a
                                key={index}
                                href={link}
                                target="_blank"
                                rel="noopener noreferrer"
                                className="flex items-center text-blue-600 hover:text-blue-800 text-sm hover:underline"
                              >
                                <ExternalLink className="mr-1 h-3 w-3" />
                                {link}
                              </a>
                            ))}
                          </div>
                        </div>
                      )}

<div className="flex space-x-3 pt-4 border-t border-gray-200">
                        <Button
                          size="lg"
                          onClick={() => handleAcceptApplication(application.id)}
                          disabled={actionLoading === application.id}
                          className="bg-green-600 hover:bg-green-700 text-white font-semibold px-6 py-2 flex-1"
                        >
                          {actionLoading === application.id ? (
                            <>
                              <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
                              Processing Payment...
                            </>
                          ) : (
                            <>
                              <Check className="mr-2 h-4 w-4" />
                              Accept & Pay ${application.proposedBudget}
                            </>
                          )}
                        </Button>
                        <Button
                          size="lg"
                          variant="outline"
                          onClick={() => handleRejectApplication(application.id)}
                          disabled={actionLoading === application.id}
                          className="text-red-600 hover:text-red-700 hover:bg-red-50 border-red-200 px-4"
                        >
                          <X className="mr-1 h-4 w-4" />
                          Reject
                        </Button>
                        <Button
                          size="lg"
                          variant="outline"
                          onClick={() => handleContactApplicant(application.applicant.id)}
                          className="px-4"
                        >
                          <MessageCircle className="mr-1 h-4 w-4" />
                          Message
                        </Button>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}

{pendingApplications.length === 0 && (
                <div className="text-center py-12">
                  <div className="max-w-md mx-auto">
                    <User className="h-16 w-16 text-gray-300 mx-auto mb-4" />
                    <h3 className="text-xl font-semibold text-gray-900 mb-2">No Pending Applications</h3>
                    <p className="text-gray-600">
                      When workers apply to your job, you'll be able to review and accept them here.
                    </p>
                  </div>
                </div>
              )}
            </TabsContent>

<TabsContent value="accepted" className="space-y-4">
              {acceptedApplications.map((application) => (
                <Card key={application.id} className="border-2 border-green-200 bg-green-50">
                  <CardHeader>
                    <div className="flex items-start justify-between">
                      <div className="flex items-center space-x-3">
                        <Avatar className="h-12 w-12">
                          <AvatarFallback className="bg-green-100 text-green-700 font-semibold">
                            {application.applicant.firstName[0]}
                            {application.applicant.lastName[0]}
                          </AvatarFallback>
                        </Avatar>
                        <div>
                          <h3 className="font-semibold text-lg">
                            {application.applicant.firstName} {application.applicant.lastName}
                          </h3>
                          <p className="text-sm text-gray-600">@{application.applicant.username}</p>
                          <Badge className="bg-green-600 text-white mt-2">✓ Accepted & Paid</Badge>
                        </div>
                      </div>
                      <div className="text-right">
                        <div className="bg-green-100 p-3 rounded-lg border border-green-300">
                          <div className="text-xl font-bold text-green-800">${application.proposedBudget}</div>
                          <div className="text-sm text-green-700">✓ Payment Released</div>
                          <div className="text-xs text-gray-600 mt-1">
                            {application.acceptedAt && new Date(application.acceptedAt).toLocaleDateString()}
                          </div>
                        </div>
                      </div>
                    </div>
                  </CardHeader>
                  <CardContent>
                    <div className="flex space-x-2">
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => handleContactApplicant(application.applicant.id)}
                        className="bg-white"
                      >
                        <MessageCircle className="mr-1 h-3 w-3" />
                        Message Worker
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              ))}

{acceptedApplications.length === 0 && (
                <div className="text-center py-12">
                  <div className="max-w-md mx-auto">
                    <Check className="h-16 w-16 text-gray-300 mx-auto mb-4" />
                    <h3 className="text-xl font-semibold text-gray-900 mb-2">No Accepted Applications</h3>
                    <p className="text-gray-600">Applications you accept will appear here with payment confirmation.</p>
                  </div>
                </div>
              )}
            </TabsContent>

<TabsContent value="rejected" className="space-y-4">
              {rejectedApplications.map((application) => (
                <Card key={application.id} className="border-red-200 opacity-75 bg-red-50">
                  <CardHeader>
                    <div className="flex items-start justify-between">
                      <div className="flex items-center space-x-3">
                        <Avatar>
                          <AvatarFallback className="bg-red-100 text-red-700">
                            {application.applicant.firstName[0]}
                            {application.applicant.lastName[0]}
                          </AvatarFallback>
                        </Avatar>
                        <div>
                          <h3 className="font-semibold">
                            {application.applicant.firstName} {application.applicant.lastName}
                          </h3>
                          <p className="text-sm text-gray-600">@{application.applicant.username}</p>
                          <Badge className="bg-red-100 text-red-800 mt-1">Rejected</Badge>
                        </div>
                      </div>
                    </div>
                  </CardHeader>
                </Card>
              ))}

{rejectedApplications.length === 0 && (
                <div className="text-center py-12">
                  <div className="max-w-md mx-auto">
                    <X className="h-16 w-16 text-gray-300 mx-auto mb-4" />
                    <h3 className="text-xl font-semibold text-gray-900 mb-2">No Rejected Applications</h3>
                    <p className="text-gray-600">Applications you reject will appear here for your records.</p>
                  </div>
                </div>
              )}
            </TabsContent>
          </Tabs>
        </div>
      </div>
    </>
  )
}
[V0_FILE]typescript:file="app/api/work-proofs/request-revision/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { getUser } from "@/lib/auth"

export async function POST(request: NextRequest) {
  try {
    const user = await getUser()
    if (!user) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const { proofId, reviewNotes } = await request.json()

if (!proofId || !reviewNotes) {
      return NextResponse.json({ error: "Missing proof ID or review notes" }, { status: 400 })
    }

console.log("[v0] 🚀 API: Starting revision request for:", proofId)
    console.log("[v0] 👤 API: Requesting user:", user.id)

// Import the revision function
    const { requestRevision } = await import("@/lib/work-proofs")

// Request revision
    const updatedProof = await requestRevision(proofId, reviewNotes)

console.log("[v0] ✅ API: Revision requested successfully")

return NextResponse.json({
      success: true,
      proof: updatedProof,
      message: "Revision requested successfully.",
    })
  } catch (error) {
    console.error("[v0] ❌ API ERROR: Failed to request revision:", error)
    return NextResponse.json(
      {
        error: "Failed to request revision",
        details: error instanceof Error ? error.message : "Unknown error",
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescriptreact:file="app/admin/wallet-management/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/transactions/page.tsx" isMerged="true"
"use client"

export default function AdminTransactionsPage() {
  const [transactions, setTransactions] = useState<AdminTransaction[]>([])
  const [filteredTransactions, setFilteredTransactions] = useState<AdminTransaction[]>([])
  const [loading, setLoading] = useState(true)
  const [searchTerm, setSearchTerm] = useState("")
  const [typeFilter, setTypeFilter] = useState<string>("all")
  const [statusFilter, setStatusFilter] = useState<string>("all")

useEffect(() => {
    loadTransactions()
  }, [])

useEffect(() => {
    filterTransactions()
  }, [transactions, searchTerm, typeFilter, statusFilter])

const loadTransactions = async () => {
    setLoading(true)
    try {
      const data = await getAdminTransactions({ limit: 100 })
      setTransactions(data)
    } catch (error) {
      console.error("Failed to load transactions:", error)
    } finally {
      setLoading(false)
    }
  }

const filterTransactions = () => {
    let filtered = [...transactions]

// Search filter
    if (searchTerm) {
      const search = searchTerm.toLowerCase()
      filtered = filtered.filter(
        (transaction) =>
          transaction.user.firstName.toLowerCase().includes(search) ||
          transaction.user.lastName.toLowerCase().includes(search) ||
          transaction.user.username.toLowerCase().includes(search) ||
          transaction.description.toLowerCase().includes(search) ||
          transaction.id.toLowerCase().includes(search),
      )
    }

// Type filter
    if (typeFilter !== "all") {
      filtered = filtered.filter((transaction) => transaction.type === typeFilter)
    }

// Status filter
    if (statusFilter !== "all") {
      filtered = filtered.filter((transaction) => transaction.status === statusFilter)
    }

setFilteredTransactions(filtered)
  }

const getStatusBadgeVariant = (status: string) => {
    switch (status) {
      case "completed":
        return "default"
      case "pending":
        return "secondary"
      case "failed":
        return "destructive"
      default:
        return "outline"
    }
  }

const getTypeBadgeVariant = (type: string) => {
    switch (type) {
      case "deposit":
        return "default"
      case "withdrawal":
        return "secondary"
      case "payment":
        return "destructive"
      case "earning":
        return "default"
      case "refund":
        return "outline"
      default:
        return "outline"
    }
  }

const exportTransactions = () => {
    const csvContent = [
      ["ID", "User", "Type", "Amount", "Status", "Description", "Date"].join(","),
      ...filteredTransactions.map((t) =>
        [
          t.id,
          `${t.user.firstName} ${t.user.lastName} (${t.user.username})`,
          t.type,
          t.amount,
          t.status,
          `"${t.description}"`,
          new Date(t.createdAt).toLocaleDateString(),
        ].join(","),
      ),
    ].join("\n")

const blob = new Blob([csvContent], { type: "text/csv" })
    const url = window.URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = `transactions-${new Date().toISOString().split("T")[0]}.csv`
    a.click()
    window.URL.revokeObjectURL(url)
  }

const totalAmount = filteredTransactions.reduce((sum, t) => sum + t.amount, 0)
  const completedTransactions = filteredTransactions.filter((t) => t.status === "completed")
  const pendingTransactions = filteredTransactions.filter((t) => t.status === "pending")

if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-red-600"></div>
      </div>
    )
  }

return (
    <>
      <AdminHeader title="Transaction Management" description="View and manage all platform transactions" />

<div className="flex-1 overflow-auto p-6">
        <div className="space-y-6">
          {/* Summary Cards */}
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
            <Card>
              <CardContent className="p-4">
                <div className="text-2xl font-bold text-gray-900">{filteredTransactions.length}</div>
                <p className="text-sm text-gray-600">Total Transactions</p>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="p-4">
                <div className="text-2xl font-bold text-green-600">${totalAmount.toFixed(2)}</div>
                <p className="text-sm text-gray-600">Total Amount</p>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="p-4">
                <div className="text-2xl font-bold text-blue-600">{completedTransactions.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-orange-600">{pendingTransactions.length}</div>
                <p className="text-sm text-gray-600">Pending</p>
              </CardContent>
            </Card>
          </div>

{/* Filters and Actions */}
          <Card>
            <CardHeader>
              <CardTitle>Transaction History</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="flex flex-col sm:flex-row gap-4 mb-6">
                <div className="relative flex-1">
                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
                  <Input
                    placeholder="Search by user, description, or transaction ID..."
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    className="pl-10"
                  />
                </div>
                <Select value={typeFilter} onValueChange={setTypeFilter}>
                  <SelectTrigger className="w-full sm:w-[180px]">
                    <Filter className="mr-2 h-4 w-4" />
                    <SelectValue placeholder="Filter by type" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Types</SelectItem>
                    <SelectItem value="deposit">Deposit</SelectItem>
                    <SelectItem value="withdrawal">Withdrawal</SelectItem>
                    <SelectItem value="payment">Payment</SelectItem>
                    <SelectItem value="earning">Earning</SelectItem>
                    <SelectItem value="refund">Refund</SelectItem>
                  </SelectContent>
                </Select>
                <Select value={statusFilter} onValueChange={setStatusFilter}>
                  <SelectTrigger className="w-full sm:w-[180px]">
                    <SelectValue placeholder="Filter by status" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Status</SelectItem>
                    <SelectItem value="completed">Completed</SelectItem>
                    <SelectItem value="pending">Pending</SelectItem>
                    <SelectItem value="failed">Failed</SelectItem>
                  </SelectContent>
                </Select>
                <Button onClick={loadTransactions} variant="outline" size="sm">
                  <RefreshCw className="mr-2 h-4 w-4" />
                  Refresh
                </Button>
                <Button onClick={exportTransactions} variant="outline" size="sm">
                  <Download className="mr-2 h-4 w-4" />
                  Export
                </Button>
              </div>

{/* Transactions Table */}
              <div className="rounded-md border">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Transaction ID</TableHead>
                      <TableHead>User</TableHead>
                      <TableHead>Type</TableHead>
                      <TableHead>Amount</TableHead>
                      <TableHead>Status</TableHead>
                      <TableHead>Description</TableHead>
                      <TableHead>Date</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {filteredTransactions.length === 0 ? (
                      <TableRow>
                        <TableCell colSpan={7} className="text-center py-8 text-gray-500">
                          No transactions found matching your criteria
                        </TableCell>
                      </TableRow>
                    ) : (
                      filteredTransactions.map((transaction) => (
                        <TableRow key={transaction.id}>
                          <TableCell className="font-mono text-sm">{transaction.id.slice(0, 12)}...</TableCell>
                          <TableCell>
                            <div>
                              <div className="font-medium">
                                {transaction.user.firstName} {transaction.user.lastName}
                              </div>
                              <div className="text-sm text-gray-500">@{transaction.user.username}</div>
                            </div>
                          </TableCell>
                          <TableCell>
                            <Badge variant={getTypeBadgeVariant(transaction.type)}>{transaction.type}</Badge>
                          </TableCell>
                          <TableCell>
                            <span
                              className={`font-medium ${transaction.amount > 0 ? "text-green-600" : "text-red-600"}`}
                            >
                              {transaction.amount > 0 ? "+" : ""}${transaction.amount.toFixed(2)}
                            </span>
                          </TableCell>
                          <TableCell>
                            <Badge variant={getStatusBadgeVariant(transaction.status)}>{transaction.status}</Badge>
                          </TableCell>
                          <TableCell className="max-w-xs truncate">{transaction.description}</TableCell>
                          <TableCell>
                            <div className="text-sm">{new Date(transaction.createdAt).toLocaleDateString()}</div>
                            <div className="text-xs text-gray-500">
                              {formatDistanceToNow(new Date(transaction.createdAt), {
                                addSuffix: true,
                              })}
                            </div>
                          </TableCell>
                        </TableRow>
                      ))
                    )}
                  </TableBody>
                </Table>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </>
  )
}
[V0_FILE]typescriptreact:file="app/admin/transactions/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescript:file="lib/dashboard-stats.ts" isMerged="true"
import { getAllJobs, getUserApplications } from "./jobs"
import { getWorkProofsByJob } from "./work-proofs"
import { getWallet } from "./wallet"

export interface DashboardStats {
  totalEarnings: number
  activeJobs: number
  completedJobs: number
  pendingApplications: number
}

export interface RecentActivityItem {
  id: string
  type: "job_applied" | "job_completed" | "payment_received" | "application_accepted"
  title: string
  description: string
  amount?: number
  timestamp: string
  status: "success" | "pending" | "info"
}

export async function getUserDashboardStats(userId: string): Promise<DashboardStats> {
  try {
    console.log("[v0] Calculating real dashboard stats for user:", userId)

// Get user's applications
    const applications = await getUserApplications(userId)
    console.log("[v0] User applications:", applications.length)

// Get all jobs to find user's jobs
    const allJobs = await getAllJobs()
    const userJobs = allJobs.filter((job) => job.userId === userId)
    console.log("[v0] User's posted jobs:", userJobs.length)

const wallet = await getWallet(userId)
    const totalEarnings = wallet?.earningsBalance || 0
    console.log("[v0] Total earnings from wallet:", totalEarnings)

// Count active jobs (accepted applications that are in progress)
    const activeJobs = applications.filter((app) => app.status === "accepted").length
    console.log("[v0] Active jobs (accepted applications):", activeJobs)

// Count completed jobs (check work proofs)
    let completedJobs = 0
    for (const app of applications.filter((app) => app.status === "accepted")) {
      const workProofs = await getWorkProofsByJob(app.jobId)
      const hasApprovedProof = workProofs.some((proof) => proof.workerId === userId && proof.status === "approved")
      if (hasApprovedProof) {
        completedJobs++
      }
    }
    console.log("[v0] Completed jobs (with approved work proofs):", completedJobs)

// Count pending applications
    const pendingApplications = applications.filter((app) => app.status === "pending").length
    console.log("[v0] Pending applications:", pendingApplications)

const stats = {
      totalEarnings,
      activeJobs,
      completedJobs,
      pendingApplications,
    }

console.log("[v0] Final dashboard stats:", stats)
    return stats
  } catch (error) {
    console.error("[v0] Error calculating dashboard stats:", error)
    return {
      totalEarnings: 0,
      activeJobs: 0,
      completedJobs: 0,
      pendingApplications: 0,
    }
  }
}

export async function getUserRecentActivity(userId: string, limit = 5): Promise<RecentActivityItem[]> {
  try {
    console.log("[v0] Getting recent activity for user:", userId)

const activities: RecentActivityItem[] = []

// Get user's applications
    const applications = await getUserApplications(userId)

// Add application activities
    applications.slice(0, limit).forEach((app) => {
      if (app.status === "accepted") {
        activities.push({
          id: `app_accepted_${app.id}`,
          type: "application_accepted",
          title: "Application Accepted",
          description: `Your application for "${app.job?.title || "Job"}" was accepted`,
          timestamp: app.acceptedAt || app.createdAt,
          status: "success",
        })
      } else if (app.status === "pending") {
        activities.push({
          id: `app_pending_${app.id}`,
          type: "job_applied",
          title: "Job Application Submitted",
          description: `Applied for "${app.job?.title || "Job"}"`,
          timestamp: app.createdAt,
          status: "pending",
        })
      }
    })

// Sort by timestamp and limit
    const sortedActivities = activities
      .sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime())
      .slice(0, limit)

console.log("[v0] Recent activities found:", sortedActivities.length)
    return sortedActivities
  } catch (error) {
    console.error("[v0] Error getting recent activity:", error)
    return []
  }
}

export async function getUserNotifications(userId: string): Promise<
  Array<{
    id: string
    title: string
    message: string
    type: "info" | "success" | "warning" | "error"
    timestamp: string
    read: boolean
  }>
> {
  try {
    console.log("[v0] Getting notifications for user:", userId)

const notifications = []

// Get user's applications for notification generation
    const applications = await getUserApplications(userId)

// Check for accepted applications
    const acceptedApps = applications.filter((app) => app.status === "accepted")
    acceptedApps.forEach((app) => {
      notifications.push({
        id: `notif_accepted_${app.id}`,
        title: "Application Accepted!",
        message: `Your application for "${app.job?.title || "Job"}" has been accepted. Start working now!`,
        type: "success" as const,
        timestamp: app.acceptedAt || app.createdAt,
        read: false,
      })
    })

// Check for pending applications
    const pendingApps = applications.filter((app) => app.status === "pending")
    if (pendingApps.length > 0) {
      notifications.push({
        id: `notif_pending_${Date.now()}`,
        title: "Applications Under Review",
        message: `You have ${pendingApps.length} application(s) pending review.`,
        type: "info" as const,
        timestamp: new Date().toISOString(),
        read: false,
      })
    }

// Sort by timestamp
    const sortedNotifications = notifications
      .sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime())
      .slice(0, 10) // Limit to 10 most recent

console.log("[v0] Notifications found:", sortedNotifications.length)
    return sortedNotifications
  } catch (error) {
    console.error("[v0] Error getting notifications:", error)
    return []
  }
}
[V0_FILE]typescriptreact:file="app/help/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { Search, MessageCircle, Mail, Phone, HelpCircle, FileText, Shield } from "lucide-react"
import Link from "next/link"

const faqData = [
  {
    category: "Getting Started",
    questions: [
      {
        question: "How do I create an account?",
        answer:
          "Click 'Get Started' on the homepage, fill out the registration form with your email and password, then verify your email address to activate your account.",
      },
      {
        question: "What's the difference between jobs and services?",
        answer:
          "Jobs are posted by clients looking for specific work to be done. Services are pre-packaged offerings created by freelancers that clients can purchase directly.",
      },
      {
        question: "How do I get verified?",
        answer:
          "Complete your profile, upload a profile photo, add your skills and portfolio, then contact support to request verification. Verified users get a blue checkmark and higher visibility.",
      },
    ],
  },
  {
    category: "Payments & Fees",
    questions: [
      {
        question: "What fees does the platform charge?",
        answer:
          "We charge a 5% platform fee on completed transactions. This covers payment processing, dispute resolution, and platform maintenance.",
      },
      {
        question: "How do I withdraw my earnings?",
        answer:
          "Go to your wallet, click 'Withdraw', enter the amount (minimum $10), and choose your preferred payment method. Withdrawals are processed within 1-3 business days.",
      },
      {
        question: "What payment methods are accepted?",
        answer:
          "We accept major credit cards, PayPal, and bank transfers. All payments are processed securely through our payment partners.",
      },
    ],
  },
  {
    category: "Safety & Security",
    questions: [
      {
        question: "How do you protect against fraud?",
        answer:
          "We use identity verification, review systems, and 24/7 monitoring to protect both clients and freelancers from fraudulent activity.",
      },
      {
        question: "What if I have a dispute?",
        answer:
          "Contact our support team immediately. We offer mediation services and can help resolve disputes fairly between clients and freelancers.",
      },
      {
        question: "Is my personal information safe?",
        answer:
          "Yes, we use industry-standard encryption and never share your personal information with third parties without your consent.",
      },
    ],
  },
]

export default function HelpPage() {
  const [searchQuery, setSearchQuery] = useState("")
  const [contactForm, setContactForm] = useState({
    name: "",
    email: "",
    subject: "",
    message: "",
  })

const handleContactSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // Handle contact form submission
    alert("Thank you for your message! We'll get back to you within 24 hours.")
    setContactForm({ name: "", email: "", subject: "", message: "" })
  }

const filteredFAQ = faqData
    .map((category) => ({
      ...category,
      questions: category.questions.filter(
        (q) =>
          searchQuery === "" ||
          q.question.toLowerCase().includes(searchQuery.toLowerCase()) ||
          q.answer.toLowerCase().includes(searchQuery.toLowerCase()),
      ),
    }))
    .filter((category) => category.questions.length > 0)

return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <div className="bg-white border-b">
        <div className="container mx-auto px-4 py-8">
          <div className="text-center max-w-2xl mx-auto">
            <h1 className="text-3xl font-bold text-gray-900 mb-4 flex items-center justify-center">
              <HelpCircle className="mr-3 h-8 w-8 text-blue-600" />
              Help Center
            </h1>
            <p className="text-gray-600 mb-6">Find answers to common questions or get in touch with our support team</p>

{/* Search */}
            <div className="relative">
              <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" />
              <Input
                placeholder="Search for help articles..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-12 h-12 text-lg"
              />
            </div>
          </div>
        </div>
      </div>

<div className="container mx-auto px-4 py-8">
        <Tabs defaultValue="faq" className="space-y-8">
          <TabsList className="grid w-full grid-cols-4">
            <TabsTrigger value="faq">FAQ</TabsTrigger>
            <TabsTrigger value="contact">Contact Us</TabsTrigger>
            <TabsTrigger value="guides">Guides</TabsTrigger>
            <TabsTrigger value="policies">Policies</TabsTrigger>
          </TabsList>

{/* FAQ Tab */}
          <TabsContent value="faq">
            <div className="space-y-6">
              {filteredFAQ.map((category, categoryIndex) => (
                <Card key={categoryIndex}>
                  <CardHeader>
                    <CardTitle className="flex items-center">
                      <Badge variant="outline" className="mr-3">
                        {category.category}
                      </Badge>
                      {category.questions.length} questions
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <Accordion type="single" collapsible className="w-full">
                      {category.questions.map((item, index) => (
                        <AccordionItem key={index} value={`item-${categoryIndex}-${index}`}>
                          <AccordionTrigger className="text-left">{item.question}</AccordionTrigger>
                          <AccordionContent className="text-gray-600">{item.answer}</AccordionContent>
                        </AccordionItem>
                      ))}
                    </Accordion>
                  </CardContent>
                </Card>
              ))}

{filteredFAQ.length === 0 && searchQuery && (
                <div className="text-center py-12">
                  <Search className="h-12 w-12 text-gray-400 mx-auto mb-4" />
                  <h3 className="text-lg font-medium text-gray-900 mb-2">No results found</h3>
                  <p className="text-gray-600 mb-4">Try different keywords or contact our support team</p>
                  <Button>Contact Support</Button>
                </div>
              )}
            </div>
          </TabsContent>

{/* Contact Tab */}
          <TabsContent value="contact">
            <div className="grid lg:grid-cols-2 gap-8">
              {/* Contact Form */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center">
                    <MessageCircle className="mr-2 h-5 w-5 text-blue-600" />
                    Send us a message
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <form onSubmit={handleContactSubmit} className="space-y-4">
                    <div className="grid grid-cols-2 gap-4">
                      <div>
                        <label className="text-sm font-medium text-gray-700">Name *</label>
                        <Input
                          value={contactForm.name}
                          onChange={(e) => setContactForm((prev) => ({ ...prev, name: e.target.value }))}
                          required
                        />
                      </div>
                      <div>
                        <label className="text-sm font-medium text-gray-700">Email *</label>
                        <Input
                          type="email"
                          value={contactForm.email}
                          onChange={(e) => setContactForm((prev) => ({ ...prev, email: e.target.value }))}
                          required
                        />
                      </div>
                    </div>
                    <div>
                      <label className="text-sm font-medium text-gray-700">Subject *</label>
                      <Input
                        value={contactForm.subject}
                        onChange={(e) => setContactForm((prev) => ({ ...prev, subject: e.target.value }))}
                        required
                      />
                    </div>
                    <div>
                      <label className="text-sm font-medium text-gray-700">Message *</label>
                      <Textarea
                        rows={6}
                        value={contactForm.message}
                        onChange={(e) => setContactForm((prev) => ({ ...prev, message: e.target.value }))}
                        required
                      />
                    </div>
                    <Button type="submit" className="w-full">
                      Send Message
                    </Button>
                  </form>
                </CardContent>
              </Card>

{/* Contact Info */}
              <div className="space-y-6">
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center">
                      <Mail className="mr-2 h-5 w-5 text-green-600" />
                      Email Support
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-gray-600 mb-3">Get help via email. We typically respond within 24 hours.</p>
                    <p className="font-medium">support@workhub.com</p>
                  </CardContent>
                </Card>

<Card>
                  <CardHeader>
                    <CardTitle className="flex items-center">
                      <Phone className="mr-2 h-5 w-5 text-purple-600" />
                      Phone Support
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-gray-600 mb-3">Speak with our support team directly.</p>
                    <p className="font-medium">+1 (555) 123-4567</p>
                    <p className="text-sm text-gray-500 mt-1">Monday - Friday, 9 AM - 6 PM EST</p>
                  </CardContent>
                </Card>

<Card>
                  <CardHeader>
                    <CardTitle>Response Times</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-2">
                    <div className="flex justify-between">
                      <span className="text-gray-600">Email Support:</span>
                      <span className="font-medium">24 hours</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-600">Phone Support:</span>
                      <span className="font-medium">Immediate</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-600">Live Chat:</span>
                      <span className="font-medium">5 minutes</span>
                    </div>
                  </CardContent>
                </Card>
              </div>
            </div>
          </TabsContent>

{/* Guides Tab */}
          <TabsContent value="guides">
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
              <Card className="hover:shadow-md transition-shadow cursor-pointer">
                <CardHeader>
                  <CardTitle className="text-lg">Getting Started Guide</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-600 mb-4">
                    Complete guide to setting up your account and getting your first job or client.
                  </p>
                  <Badge variant="secondary">Beginner</Badge>
                </CardContent>
              </Card>

<Card className="hover:shadow-md transition-shadow cursor-pointer">
                <CardHeader>
                  <CardTitle className="text-lg">Freelancer Success Tips</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-600 mb-4">
                    Best practices for creating compelling profiles and winning more projects.
                  </p>
                  <Badge variant="secondary">Intermediate</Badge>
                </CardContent>
              </Card>

<Card className="hover:shadow-md transition-shadow cursor-pointer">
                <CardHeader>
                  <CardTitle className="text-lg">Client Hiring Guide</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-600 mb-4">
                    How to post effective job listings and find the right freelancers.
                  </p>
                  <Badge variant="secondary">Beginner</Badge>
                </CardContent>
              </Card>

<Card className="hover:shadow-md transition-shadow cursor-pointer">
                <CardHeader>
                  <CardTitle className="text-lg">Payment & Billing</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-600 mb-4">
                    Understanding fees, payments, withdrawals, and tax considerations.
                  </p>
                  <Badge variant="secondary">All Levels</Badge>
                </CardContent>
              </Card>

<Card className="hover:shadow-md transition-shadow cursor-pointer">
                <CardHeader>
                  <CardTitle className="text-lg">Safety & Security</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-600 mb-4">How to stay safe, avoid scams, and protect your account.</p>
                  <Badge variant="secondary">Important</Badge>
                </CardContent>
              </Card>

<Card className="hover:shadow-md transition-shadow cursor-pointer">
                <CardHeader>
                  <CardTitle className="text-lg">Advanced Features</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-600 mb-4">Make the most of analytics, team features, and API integrations.</p>
                  <Badge variant="secondary">Advanced</Badge>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

{/* Policies Tab */}
          <TabsContent value="policies">
            <div className="grid md:grid-cols-2 gap-6">
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center">
                    <FileText className="mr-2 h-5 w-5 text-blue-600" />
                    Terms of Service
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-600 mb-4">
                    Our terms and conditions for using the platform, including user responsibilities and platform rules.
                  </p>
                  <Link href="/terms">
                    <Button variant="outline" className="bg-transparent">
                      Read Terms of Service
                    </Button>
                  </Link>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle className="flex items-center">
                    <Shield className="mr-2 h-5 w-5 text-green-600" />
                    Privacy Policy
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-600 mb-4">
                    How we collect, use, and protect your personal information and data.
                  </p>
                  <Link href="/privacy">
                    <Button variant="outline" className="bg-transparent">
                      Read Privacy Policy
                    </Button>
                  </Link>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>Community Guidelines</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-600 mb-4">
                    Standards for behavior and content to maintain a professional, respectful community.
                  </p>
                  <Button variant="outline" className="bg-transparent">
                    View Guidelines
                  </Button>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>Dispute Resolution</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-600 mb-4">
                    Our process for handling disputes between clients and freelancers fairly and efficiently.
                  </p>
                  <Button variant="outline" className="bg-transparent">
                    Learn More
                  </Button>
                </CardContent>
              </Card>
            </div>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/disputes/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { useAuth } from "@/contexts/auth-context"
import { DashboardHeader } from "@/components/dashboard/dashboard-header"
import { Button } from "@/components/ui/button"
import { XCircle } from "lucide-react"
// import { getDisputesByUser, getDisputeStatusColor, type DisputeCase } from "@/lib/escrow"
// import { CreateDisputeDialog } from "@/components/disputes/create-dispute-dialog"
// import { DisputeDetailsModal } from "@/components/disputes/dispute-details-modal"

interface DisputeCase {
  id: string
  status: "open" | "under_review" | "resolved" | "closed"
  reason: "work_quality" | "payment_delay" | "scope_change" | "communication" | "other"
  description: string
  createdAt: string
  evidence: any[]
  resolution?: {
    resolvedAt: string
  }
}

export default function DisputesPage() {
  const { user } = useAuth()
  const [disputes] = useState<DisputeCase[]>([])
  const [loading, setLoading] = useState(false)

return (
    <>
      <DashboardHeader title="Disputes" description="Dispute system is currently disabled" />

<div className="flex-1 overflow-auto p-6">
        <div className="space-y-6">
          <div className="text-center py-12">
            <div className="max-w-md mx-auto">
              <XCircle className="h-12 w-12 text-gray-400 mx-auto mb-4" />
              <h3 className="text-lg font-semibold text-gray-900 mb-2">Dispute System Disabled</h3>
              <p className="text-gray-600 mb-6">
                The dispute system has been temporarily disabled. Please contact support directly for any issues.
              </p>
              <Button variant="outline">Contact Support</Button>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}
[V0_FILE]png:file="public/abstract-geometric-shapes.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-geometric-shapes-sUE5R8SURiS0JAVLKZSgt58oSNZSJI.png" isMerged="true"
[V0_FILE]sql:file="scripts/14-screenshot-pricing-system.sql" isMerged="true"
-- Create screenshot pricing configuration system for admin control
-- This allows admins to set dynamic pricing for screenshot requirements

-- Create screenshot pricing settings table
CREATE TABLE IF NOT EXISTS screenshot_pricing_settings (
    id SERIAL PRIMARY KEY,
    setting_name VARCHAR(100) NOT NULL UNIQUE,
    setting_value DECIMAL(10,4) NOT NULL,
    description TEXT,
    is_active BOOLEAN DEFAULT true,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Create screenshot pricing tiers table for different screenshot counts
CREATE TABLE IF NOT EXISTS screenshot_pricing_tiers (
    id SERIAL PRIMARY KEY,
    screenshot_number INTEGER NOT NULL, -- 1st, 2nd, 3rd, etc.
    percentage_fee DECIMAL(5,2) NOT NULL, -- Percentage of total job cost
    is_free BOOLEAN DEFAULT false, -- If this tier is free
    is_active BOOLEAN DEFAULT true,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    UNIQUE(screenshot_number)
);

-- Insert default screenshot pricing settings
INSERT INTO screenshot_pricing_settings (setting_name, setting_value, description) VALUES
('max_screenshots_allowed', 5, 'Maximum number of screenshots that can be requested per job'),
('default_screenshot_fee', 0.05, 'Default flat fee per screenshot (fallback if percentage system disabled)'),
('enable_percentage_pricing', 1, 'Enable percentage-based pricing (1) or use flat fee (0)'),
('platform_screenshot_fee', 0, 'Additional platform fee for screenshot processing')
ON CONFLICT (setting_name) DO NOTHING;

-- Insert default screenshot pricing tiers
INSERT INTO screenshot_pricing_tiers (screenshot_number, percentage_fee, is_free) VALUES
(1, 0.00, true),   -- 1st screenshot free by default
(2, 3.00, false),  -- 2nd screenshot 3% of job cost
(3, 3.00, false),  -- 3rd screenshot 3% of job cost  
(4, 5.00, false),  -- 4th screenshot 5% of job cost
(5, 5.00, false)   -- 5th screenshot 5% of job cost
ON CONFLICT (screenshot_number) DO NOTHING;

-- Create function to update timestamp
CREATE OR REPLACE FUNCTION update_screenshot_pricing_timestamp()
RETURNS TRIGGER AS $$
BEGIN
    NEW.updated_at = CURRENT_TIMESTAMP;
    RETURN NEW;
END;
$$ LANGUAGE plpgsql;

-- Create triggers for automatic timestamp updates
DROP TRIGGER IF EXISTS update_screenshot_pricing_settings_timestamp ON screenshot_pricing_settings;
CREATE TRIGGER update_screenshot_pricing_settings_timestamp
    BEFORE UPDATE ON screenshot_pricing_settings
    FOR EACH ROW
    EXECUTE FUNCTION update_screenshot_pricing_timestamp();

DROP TRIGGER IF EXISTS update_screenshot_pricing_tiers_timestamp ON screenshot_pricing_tiers;
CREATE TRIGGER update_screenshot_pricing_tiers_timestamp
    BEFORE UPDATE ON screenshot_pricing_tiers
    FOR EACH ROW
    EXECUTE FUNCTION update_screenshot_pricing_timestamp();

-- Create indexes for better performance
CREATE INDEX IF NOT EXISTS idx_screenshot_pricing_settings_active ON screenshot_pricing_settings(is_active);
CREATE INDEX IF NOT EXISTS idx_screenshot_pricing_settings_name ON screenshot_pricing_settings(setting_name);
CREATE INDEX IF NOT EXISTS idx_screenshot_pricing_tiers_active ON screenshot_pricing_tiers(is_active);
CREATE INDEX IF NOT EXISTS idx_screenshot_pricing_tiers_number ON screenshot_pricing_tiers(screenshot_number);

-- Add audit logging for screenshot pricing changes
CREATE TABLE IF NOT EXISTS screenshot_pricing_audit (
    id SERIAL PRIMARY KEY,
    table_name VARCHAR(50) NOT NULL,
    record_id INTEGER NOT NULL,
    action VARCHAR(10) NOT NULL, -- INSERT, UPDATE, DELETE
    old_values JSONB,
    new_values JSONB,
    changed_by VARCHAR(255),
    changed_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Create audit trigger function
CREATE OR REPLACE FUNCTION audit_screenshot_pricing_changes()
RETURNS TRIGGER AS $$
BEGIN
    IF TG_OP = 'DELETE' THEN
        INSERT INTO screenshot_pricing_audit (table_name, record_id, action, old_values, changed_at)
        VALUES (TG_TABLE_NAME, OLD.id, 'DELETE', row_to_json(OLD), CURRENT_TIMESTAMP);
        RETURN OLD;
    ELSIF TG_OP = 'UPDATE' THEN
        INSERT INTO screenshot_pricing_audit (table_name, record_id, action, old_values, new_values, changed_at)
        VALUES (TG_TABLE_NAME, NEW.id, 'UPDATE', row_to_json(OLD), row_to_json(NEW), CURRENT_TIMESTAMP);
        RETURN NEW;
    ELSIF TG_OP = 'INSERT' THEN
        INSERT INTO screenshot_pricing_audit (table_name, record_id, action, new_values, changed_at)
        VALUES (TG_TABLE_NAME, NEW.id, 'INSERT', row_to_json(NEW), CURRENT_TIMESTAMP);
        RETURN NEW;
    END IF;
    RETURN NULL;
END;
$$ LANGUAGE plpgsql;

-- Create audit triggers
DROP TRIGGER IF EXISTS audit_screenshot_pricing_settings ON screenshot_pricing_settings;
CREATE TRIGGER audit_screenshot_pricing_settings
    AFTER INSERT OR UPDATE OR DELETE ON screenshot_pricing_settings
    FOR EACH ROW EXECUTE FUNCTION audit_screenshot_pricing_changes();

DROP TRIGGER IF EXISTS audit_screenshot_pricing_tiers ON screenshot_pricing_tiers;
CREATE TRIGGER audit_screenshot_pricing_tiers
    AFTER INSERT OR UPDATE OR DELETE ON screenshot_pricing_tiers
    FOR EACH ROW EXECUTE FUNCTION audit_screenshot_pricing_changes();

-- Create view for easy screenshot pricing calculation
CREATE OR REPLACE VIEW screenshot_pricing_summary AS
SELECT 
    spt.screenshot_number,
    spt.percentage_fee,
    spt.is_free,
    spt.is_active,
    (SELECT setting_value FROM screenshot_pricing_settings WHERE setting_name = 'max_screenshots_allowed') as max_screenshots,
    (SELECT setting_value FROM screenshot_pricing_settings WHERE setting_name = 'enable_percentage_pricing') as percentage_pricing_enabled
FROM screenshot_pricing_tiers spt
WHERE spt.is_active = true
ORDER BY spt.screenshot_number;

COMMENT ON TABLE screenshot_pricing_settings IS 'Global settings for screenshot pricing system';
COMMENT ON TABLE screenshot_pricing_tiers IS 'Pricing tiers for different screenshot counts';
COMMENT ON TABLE screenshot_pricing_audit IS 'Audit log for screenshot pricing changes';
COMMENT ON VIEW screenshot_pricing_summary IS 'Summary view for screenshot pricing calculation';
[V0_FILE]typescript:file="lib/screenshot-pricing.ts" isMerged="true"
// Screenshot pricing management functions - localStorage based
export interface ScreenshotPricingTier {
  id: number
  screenshot_number: number
  percentage_fee: number
  is_free: boolean
  is_active: boolean
}

export interface ScreenshotPricingSettings {
  max_screenshots_allowed: number
  default_screenshot_fee: number
  enable_percentage_pricing: boolean
  platform_screenshot_fee: number
}

export interface ScreenshotPricingCalculation {
  screenshotCount: number
  totalJobCost: number
  screenshotCosts: Array<{
    screenshotNumber: number
    cost: number
    percentage: number
    isFree: boolean
  }>
  totalScreenshotCost: number
  breakdown: string
}

// localStorage keys
const STORAGE_KEYS = {
  SETTINGS: "screenshot_pricing_settings",
  TIERS: "screenshot_pricing_tiers",
}

// Default settings
const DEFAULT_SETTINGS: ScreenshotPricingSettings = {
  max_screenshots_allowed: 5,
  default_screenshot_fee: 0.05,
  enable_percentage_pricing: true,
  platform_screenshot_fee: 0,
}

// Default tiers
const DEFAULT_TIERS: ScreenshotPricingTier[] = [
  { id: 1, screenshot_number: 1, percentage_fee: 0, is_free: true, is_active: true },
  { id: 2, screenshot_number: 2, percentage_fee: 3, is_free: false, is_active: true },
  { id: 3, screenshot_number: 3, percentage_fee: 3, is_free: false, is_active: true },
  { id: 4, screenshot_number: 4, percentage_fee: 5, is_free: false, is_active: true },
  { id: 5, screenshot_number: 5, percentage_fee: 5, is_free: false, is_active: true },
]

// Initialize default data if not exists
function initializeDefaultData() {
  if (typeof window === "undefined") return

if (!localStorage.getItem(STORAGE_KEYS.SETTINGS)) {
    localStorage.setItem(STORAGE_KEYS.SETTINGS, JSON.stringify(DEFAULT_SETTINGS))
  }

if (!localStorage.getItem(STORAGE_KEYS.TIERS)) {
    localStorage.setItem(STORAGE_KEYS.TIERS, JSON.stringify(DEFAULT_TIERS))
  }
}

// Get screenshot pricing tiers from localStorage
export async function getScreenshotPricingTiers(): Promise<ScreenshotPricingTier[]> {
  try {
    if (typeof window === "undefined") return DEFAULT_TIERS

initializeDefaultData()

const stored = localStorage.getItem(STORAGE_KEYS.TIERS)
    if (stored) {
      const tiers = JSON.parse(stored) as ScreenshotPricingTier[]
      return tiers.filter((tier) => tier.is_active).sort((a, b) => a.screenshot_number - b.screenshot_number)
    }

return DEFAULT_TIERS
  } catch (error) {
    console.error("Error in getScreenshotPricingTiers:", error)
    return DEFAULT_TIERS
  }
}

// Get screenshot pricing settings from localStorage
export async function getScreenshotPricingSettings(): Promise<ScreenshotPricingSettings> {
  try {
    if (typeof window === "undefined") return DEFAULT_SETTINGS

initializeDefaultData()

const stored = localStorage.getItem(STORAGE_KEYS.SETTINGS)
    if (stored) {
      return JSON.parse(stored) as ScreenshotPricingSettings
    }

return DEFAULT_SETTINGS
  } catch (error) {
    console.error("Error in getScreenshotPricingSettings:", error)
    return DEFAULT_SETTINGS
  }
}

// Calculate screenshot costs based on job cost and screenshot count
export async function calculateScreenshotCosts(
  screenshotCount: number,
  totalJobCost: number,
): Promise<ScreenshotPricingCalculation> {
  try {
    const [tiers, settings] = await Promise.all([getScreenshotPricingTiers(), getScreenshotPricingSettings()])

const screenshotCosts: Array<{
      screenshotNumber: number
      cost: number
      percentage: number
      isFree: boolean
    }> = []

let totalScreenshotCost = 0

for (let i = 1; i <= Math.min(screenshotCount, settings.max_screenshots_allowed); i++) {
      const tier = tiers.find((t) => t.screenshot_number === i)

if (tier) {
        const isFree = tier.is_free
        const percentage = tier.percentage_fee
        const cost = isFree ? 0 : (totalJobCost * percentage) / 100

screenshotCosts.push({
          screenshotNumber: i,
          cost,
          percentage,
          isFree,
        })

totalScreenshotCost += cost
      } else {
        // Fallback to default pricing if tier not found
        const cost = settings.enable_percentage_pricing ? 0 : settings.default_screenshot_fee
        screenshotCosts.push({
          screenshotNumber: i,
          cost,
          percentage: 0,
          isFree: false,
        })
        totalScreenshotCost += cost
      }
    }

// Generate breakdown text
    const breakdown = screenshotCosts
      .map((sc) => {
        if (sc.isFree) {
          return `Screenshot ${sc.screenshotNumber}: Free`
        } else if (sc.percentage > 0) {
          return `Screenshot ${sc.screenshotNumber}: ${sc.percentage}% ($${sc.cost.toFixed(2)})`
        } else {
          return `Screenshot ${sc.screenshotNumber}: $${sc.cost.toFixed(2)}`
        }
      })
      .join(", ")

return {
      screenshotCount: Math.min(screenshotCount, settings.max_screenshots_allowed),
      totalJobCost,
      screenshotCosts,
      totalScreenshotCost,
      breakdown,
    }
  } catch (error) {
    console.error("Error calculating screenshot costs:", error)
    // Fallback calculation
    const fallbackCost = screenshotCount * 0.05
    return {
      screenshotCount,
      totalJobCost,
      screenshotCosts: [],
      totalScreenshotCost: fallbackCost,
      breakdown: `${screenshotCount} screenshots �� $0.05 = $${fallbackCost.toFixed(2)}`,
    }
  }
}

// Update screenshot pricing tier (admin function)
export async function updateScreenshotPricingTier(
  tierId: number,
  updates: Partial<ScreenshotPricingTier>,
): Promise<void> {
  try {
    if (typeof window === "undefined") return

const tiers = await getScreenshotPricingTiers()
    const allTiers = JSON.parse(localStorage.getItem(STORAGE_KEYS.TIERS) || "[]") as ScreenshotPricingTier[]

const updatedTiers = allTiers.map((tier) => (tier.id === tierId ? { ...tier, ...updates } : tier))

localStorage.setItem(STORAGE_KEYS.TIERS, JSON.stringify(updatedTiers))
  } catch (error) {
    console.error("Error in updateScreenshotPricingTier:", error)
    throw error
  }
}

// Update screenshot pricing setting (admin function)
export async function updateScreenshotPricingSetting(settingName: string, settingValue: number): Promise<void> {
  try {
    if (typeof window === "undefined") return

const settings = await getScreenshotPricingSettings()
    const updatedSettings = {
      ...settings,
      [settingName]: settingValue,
    }

localStorage.setItem(STORAGE_KEYS.SETTINGS, JSON.stringify(updatedSettings))
  } catch (error) {
    console.error("Error in updateScreenshotPricingSetting:", error)
    throw error
  }
}
[V0_FILE]typescriptreact:file="app/admin/screenshot-pricing/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { AdminHeader } from "@/components/admin/admin-header"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Separator } from "@/components/ui/separator"
import { toast } from "sonner"
import {
  getScreenshotPricingTiers,
  getScreenshotPricingSettings,
  updateScreenshotPricingTier,
  updateScreenshotPricingSetting,
  type ScreenshotPricingTier,
  type ScreenshotPricingSettings,
} from "@/lib/screenshot-pricing"
import {
  Camera,
  Settings,
  DollarSign,
  Save,
  RefreshCw,
  AlertCircle,
  CheckCircle,
  Download,
  Calculator,
  Zap,
  TrendingUp,
  Copy,
  Eye,
  EyeOff,
  Percent,
  Hash,
  Globe,
  Shield,
} from "lucide-react"

const PRICING_PRESETS = {
  free_first: {
    name: "First Free",
    description: "First screenshot free, then increasing percentages",
    tiers: [
      { screenshot_number: 1, percentage_fee: 0, is_free: true },
      { screenshot_number: 2, percentage_fee: 2, is_free: false },
      { screenshot_number: 3, percentage_fee: 4, is_free: false },
      { screenshot_number: 4, percentage_fee: 6, is_free: false },
      { screenshot_number: 5, percentage_fee: 8, is_free: false },
    ],
  },
  progressive: {
    name: "Progressive",
    description: "Gradually increasing fees for all screenshots",
    tiers: [
      { screenshot_number: 1, percentage_fee: 1, is_free: false },
      { screenshot_number: 2, percentage_fee: 3, is_free: false },
      { screenshot_number: 3, percentage_fee: 5, is_free: false },
      { screenshot_number: 4, percentage_fee: 7, is_free: false },
      { screenshot_number: 5, percentage_fee: 10, is_free: false },
    ],
  },
  flat_rate: {
    name: "Flat Rate",
    description: "Same percentage for all screenshots",
    tiers: [
      { screenshot_number: 1, percentage_fee: 3, is_free: false },
      { screenshot_number: 2, percentage_fee: 3, is_free: false },
      { screenshot_number: 3, percentage_fee: 3, is_free: false },
      { screenshot_number: 4, percentage_fee: 3, is_free: false },
      { screenshot_number: 5, percentage_fee: 3, is_free: false },
    ],
  },
  premium: {
    name: "Premium",
    description: "Higher fees for quality assurance",
    tiers: [
      { screenshot_number: 1, percentage_fee: 5, is_free: false },
      { screenshot_number: 2, percentage_fee: 8, is_free: false },
      { screenshot_number: 3, percentage_fee: 12, is_free: false },
      { screenshot_number: 4, percentage_fee: 15, is_free: false },
      { screenshot_number: 5, percentage_fee: 20, is_free: false },
    ],
  },
}

export default function ScreenshotPricingPage() {
  const [tiers, setTiers] = useState<ScreenshotPricingTier[]>([])
  const [settings, setSettings] = useState<ScreenshotPricingSettings | null>(null)
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState<string | null>(null)
  const [editingTiers, setEditingTiers] = useState<Record<number, ScreenshotPricingTier>>({})
  const [previewJobCost, setPreviewJobCost] = useState(100)
  const [showInactive, setShowInactive] = useState(true)
  const [bulkEditMode, setBulkEditMode] = useState(false)
  const [selectedTiers, setSelectedTiers] = useState<number[]>([])

useEffect(() => {
    loadData()
  }, [])

const loadData = async () => {
    setLoading(true)
    try {
      const [tiersData, settingsData] = await Promise.all([getScreenshotPricingTiers(), getScreenshotPricingSettings()])
      setTiers(tiersData)
      setSettings(settingsData)

const editingState: Record<number, ScreenshotPricingTier> = {}
      tiersData.forEach((tier) => {
        editingState[tier.id] = { ...tier }
      })
      setEditingTiers(editingState)
    } catch (error) {
      console.error("Failed to load screenshot pricing data:", error)
      toast.error("Failed to load screenshot pricing settings")
    } finally {
      setLoading(false)
    }
  }

const updateTierField = (tierId: number, field: keyof ScreenshotPricingTier, value: any) => {
    setEditingTiers((prev) => ({
      ...prev,
      [tierId]: {
        ...prev[tierId],
        [field]: value,
      },
    }))
  }

const saveTier = async (tierId: number) => {
    setSaving(`tier-${tierId}`)
    try {
      const tierData = editingTiers[tierId]
      await updateScreenshotPricingTier(tierId, {
        percentage_fee: tierData.percentage_fee,
        is_free: tierData.is_free,
        is_active: tierData.is_active,
      })

setTiers((prev) => prev.map((tier) => (tier.id === tierId ? { ...tier, ...tierData } : tier)))

toast.success(`Screenshot ${tierData.screenshot_number} pricing updated successfully`)
    } catch (error) {
      console.error("Failed to update tier:", error)
      toast.error("Failed to update screenshot pricing tier")
    } finally {
      setSaving(null)
    }
  }

const updateSetting = async (settingName: keyof ScreenshotPricingSettings, value: number) => {
    if (!settings) return

setSaving(`setting-${settingName}`)
    try {
      await updateScreenshotPricingSetting(settingName, value)

setSettings((prev) => (prev ? { ...prev, [settingName]: value } : null))
      toast.success("Setting updated successfully")
    } catch (error) {
      console.error("Failed to update setting:", error)
      toast.error("Failed to update setting")
    } finally {
      setSaving(null)
    }
  }

const hasChanges = (tierId: number) => {
    const original = tiers.find((t) => t.id === tierId)
    const edited = editingTiers[tierId]
    if (!original || !edited) return false

return (
      original.percentage_fee !== edited.percentage_fee ||
      original.is_free !== edited.is_free ||
      original.is_active !== edited.is_active
    )
  }

const applyPreset = async (presetKey: string) => {
    const preset = PRICING_PRESETS[presetKey as keyof typeof PRICING_PRESETS]
    if (!preset) return

setSaving("preset")
    try {
      // Update all tiers with preset values
      for (const presetTier of preset.tiers) {
        const existingTier = tiers.find((t) => t.screenshot_number === presetTier.screenshot_number)
        if (existingTier) {
          await updateScreenshotPricingTier(existingTier.id, {
            percentage_fee: presetTier.percentage_fee,
            is_free: presetTier.is_free,
            is_active: true,
          })
        }
      }

await loadData()
      toast.success(`Applied "${preset.name}" preset successfully`)
    } catch (error) {
      console.error("Failed to apply preset:", error)
      toast.error("Failed to apply preset")
    } finally {
      setSaving(null)
    }
  }

const bulkUpdateTiers = async (updates: Partial<ScreenshotPricingTier>) => {
    if (selectedTiers.length === 0) return

setSaving("bulk")
    try {
      for (const tierId of selectedTiers) {
        await updateScreenshotPricingTier(tierId, updates)
      }

await loadData()
      setSelectedTiers([])
      setBulkEditMode(false)
      toast.success(`Updated ${selectedTiers.length} tiers successfully`)
    } catch (error) {
      console.error("Failed to bulk update:", error)
      toast.error("Failed to update tiers")
    } finally {
      setSaving(null)
    }
  }

const exportSettings = () => {
    const data = {
      settings,
      tiers: tiers.map((tier) => ({
        screenshot_number: tier.screenshot_number,
        percentage_fee: tier.percentage_fee,
        is_free: tier.is_free,
        is_active: tier.is_active,
      })),
    }

const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" })
    const url = URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = `screenshot-pricing-${new Date().toISOString().split("T")[0]}.json`
    a.click()
    URL.revokeObjectURL(url)
    toast.success("Settings exported successfully")
  }

const calculatePreviewCosts = () => {
    let totalCost = 0
    const breakdown: Array<{ screenshot: number; cost: number; percentage: number; isFree: boolean }> = []

tiers.forEach((tier) => {
      if (tier.is_active) {
        const cost = tier.is_free ? 0 : (previewJobCost * tier.percentage_fee) / 100
        totalCost += cost
        breakdown.push({
          screenshot: tier.screenshot_number,
          cost,
          percentage: tier.percentage_fee,
          isFree: tier.is_free,
        })
      }
    })

return { totalCost, breakdown }
  }

const addNewTier = async () => {
    if (!settings) return

const nextScreenshotNumber = Math.max(...tiers.map((t) => t.screenshot_number), 0) + 1

if (nextScreenshotNumber > settings.max_screenshots_allowed) {
      toast.error(`Cannot add more tiers. Maximum screenshots allowed is ${settings.max_screenshots_allowed}`)
      return
    }

setSaving("add-tier")
    try {
      // Create new tier with default values
      const newTier: ScreenshotPricingTier = {
        id: Date.now(), // Simple ID generation for localStorage
        screenshot_number: nextScreenshotNumber,
        percentage_fee: 2, // Default 2% fee
        is_free: false,
        is_active: true,
        created_at: new Date().toISOString(),
        updated_at: new Date().toISOString(),
      }

// Add to localStorage
      const currentTiers = JSON.parse(localStorage.getItem("screenshot_pricing_tiers") || "[]")
      currentTiers.push(newTier)
      localStorage.setItem("screenshot_pricing_tiers", JSON.stringify(currentTiers))

// Update state
      setTiers((prev) => [...prev, newTier])
      setEditingTiers((prev) => ({
        ...prev,
        [newTier.id]: { ...newTier },
      }))

toast.success(`Added Screenshot ${nextScreenshotNumber} pricing tier`)
    } catch (error) {
      console.error("Failed to add new tier:", error)
      toast.error("Failed to add new pricing tier")
    } finally {
      setSaving(null)
    }
  }

const removeTier = async (tierId: number) => {
    setSaving(`remove-${tierId}`)
    try {
      // Remove from localStorage
      const currentTiers = JSON.parse(localStorage.getItem("screenshot_pricing_tiers") || "[]")
      const updatedTiers = currentTiers.filter((tier: ScreenshotPricingTier) => tier.id !== tierId)
      localStorage.setItem("screenshot_pricing_tiers", JSON.stringify(updatedTiers))

// Update state
      setTiers((prev) => prev.filter((tier) => tier.id !== tierId))
      setEditingTiers((prev) => {
        const newState = { ...prev }
        delete newState[tierId]
        return newState
      })

const removedTier = tiers.find((t) => t.id === tierId)
      toast.success(`Removed Screenshot ${removedTier?.screenshot_number} pricing tier`)
    } catch (error) {
      console.error("Failed to remove tier:", error)
      toast.error("Failed to remove pricing tier")
    } finally {
      setSaving(null)
    }
  }

const { totalCost: previewTotalCost, breakdown: previewBreakdown } = calculatePreviewCosts()

if (loading) {
    return (
      <div className="flex-1 flex items-center justify-center">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
      </div>
    )
  }

return (
    <div className="flex-1 overflow-auto bg-gradient-to-br from-slate-50 to-blue-50">
      <AdminHeader
        title="Screenshot Pricing Management"
        description="Advanced configuration for dynamic screenshot pricing with presets, bulk operations, and real-time previews"
      />

<div className="p-6 space-y-6 max-w-7xl mx-auto">
        <Tabs defaultValue="settings" className="w-full">
          <TabsList className="grid w-full grid-cols-4 mb-6">
            <TabsTrigger value="settings" className="flex items-center gap-2">
              <Settings className="h-4 w-4" />
              Settings
            </TabsTrigger>
            <TabsTrigger value="tiers" className="flex items-center gap-2">
              <Camera className="h-4 w-4" />
              Pricing Tiers
            </TabsTrigger>
            <TabsTrigger value="presets" className="flex items-center gap-2">
              <Zap className="h-4 w-4" />
              Presets
            </TabsTrigger>
            <TabsTrigger value="preview" className="flex items-center gap-2">
              <Calculator className="h-4 w-4" />
              Preview
            </TabsTrigger>
          </TabsList>

{/* Settings Tab */}
          <TabsContent value="settings" className="space-y-6">
            <Card className="border-2 border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50">
              <CardHeader>
                <CardTitle className="flex items-center justify-between">
                  <div className="flex items-center space-x-2 text-blue-900">
                    <Globe className="h-5 w-5" />
                    <span>Global Screenshot Settings</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={exportSettings}
                      className="border-blue-300 text-blue-700 hover:bg-blue-100 bg-transparent"
                    >
                      <Download className="h-4 w-4 mr-2" />
                      Export
                    </Button>
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={loadData}
                      disabled={loading}
                      className="border-blue-300 text-blue-700 hover:bg-blue-100 bg-transparent"
                    >
                      <RefreshCw className={`h-4 w-4 mr-2 ${loading ? "animate-spin" : ""}`} />
                      Refresh
                    </Button>
                  </div>
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-6">
                {settings && (
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <Card className="p-4 bg-white/70 border border-blue-200">
                      <div className="flex items-center gap-3 mb-3">
                        <div className="p-2 bg-blue-100 rounded-lg">
                          <Hash className="h-4 w-4 text-blue-600" />
                        </div>
                        <div>
                          <Label className="text-sm font-semibold text-blue-800">Maximum Screenshots</Label>
                          <p className="text-xs text-blue-600">Global limit per job</p>
                        </div>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Input
                          type="number"
                          min="1"
                          max="10"
                          value={settings.max_screenshots_allowed}
                          onChange={(e) => {
                            const newValue = Number.parseInt(e.target.value)
                            setSettings((prev) => (prev ? { ...prev, max_screenshots_allowed: newValue } : null))
                          }}
                          className="h-10 border-blue-300 focus:border-blue-500"
                        />
                        <Button
                          size="sm"
                          onClick={() => updateSetting("max_screenshots_allowed", settings.max_screenshots_allowed)}
                          disabled={saving === "setting-max_screenshots_allowed"}
                          className="bg-blue-600 hover:bg-blue-700"
                        >
                          {saving === "setting-max_screenshots_allowed" ? (
                            <RefreshCw className="h-3 w-3 animate-spin" />
                          ) : (
                            <Save className="h-3 w-3" />
                          )}
                        </Button>
                      </div>
                    </Card>

<Card className="p-4 bg-white/70 border border-green-200">
                      <div className="flex items-center gap-3 mb-3">
                        <div className="p-2 bg-green-100 rounded-lg">
                          <DollarSign className="h-4 w-4 text-green-600" />
                        </div>
                        <div>
                          <Label className="text-sm font-semibold text-green-800">Default Screenshot Fee</Label>
                          <p className="text-xs text-green-600">Fallback fixed price</p>
                        </div>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Input
                          type="number"
                          step="0.01"
                          min="0"
                          value={settings.default_screenshot_fee}
                          onChange={(e) => {
                            const newValue = Number.parseFloat(e.target.value)
                            setSettings((prev) => (prev ? { ...prev, default_screenshot_fee: newValue } : null))
                          }}
                          className="h-10 border-green-300 focus:border-green-500"
                        />
                        <Button
                          size="sm"
                          onClick={() => updateSetting("default_screenshot_fee", settings.default_screenshot_fee)}
                          disabled={saving === "setting-default_screenshot_fee"}
                          className="bg-green-600 hover:bg-green-700"
                        >
                          {saving === "setting-default_screenshot_fee" ? (
                            <RefreshCw className="h-3 w-3 animate-spin" />
                          ) : (
                            <Save className="h-3 w-3" />
                          )}
                        </Button>
                      </div>
                    </Card>

<Card className="p-4 bg-white/70 border border-purple-200">
                      <div className="flex items-center gap-3 mb-3">
                        <div className="p-2 bg-purple-100 rounded-lg">
                          <Percent className="h-4 w-4 text-purple-600" />
                        </div>
                        <div>
                          <Label className="text-sm font-semibold text-purple-800">Percentage Pricing</Label>
                          <p className="text-xs text-purple-600">Enable dynamic pricing</p>
                        </div>
                      </div>
                      <div className="flex items-center justify-between">
                        <Switch
                          checked={settings.enable_percentage_pricing}
                          onCheckedChange={(checked) => {
                            setSettings((prev) => (prev ? { ...prev, enable_percentage_pricing: checked } : null))
                            updateSetting("enable_percentage_pricing", checked ? 1 : 0)
                          }}
                          disabled={saving === "setting-enable_percentage_pricing"}
                        />
                        <Badge variant={settings.enable_percentage_pricing ? "default" : "secondary"}>
                          {settings.enable_percentage_pricing ? "Enabled" : "Disabled"}
                        </Badge>
                      </div>
                    </Card>

<Card className="p-4 bg-white/70 border border-orange-200">
                      <div className="flex items-center gap-3 mb-3">
                        <div className="p-2 bg-orange-100 rounded-lg">
                          <Shield className="h-4 w-4 text-orange-600" />
                        </div>
                        <div>
                          <Label className="text-sm font-semibold text-orange-800">Platform Fee</Label>
                          <p className="text-xs text-orange-600">Additional platform charge</p>
                        </div>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Input
                          type="number"
                          step="0.01"
                          min="0"
                          value={settings.platform_screenshot_fee}
                          onChange={(e) => {
                            const newValue = Number.parseFloat(e.target.value)
                            setSettings((prev) => (prev ? { ...prev, platform_screenshot_fee: newValue } : null))
                          }}
                          className="h-10 border-orange-300 focus:border-orange-500"
                        />
                        <Button
                          size="sm"
                          onClick={() => updateSetting("platform_screenshot_fee", settings.platform_screenshot_fee)}
                          disabled={saving === "setting-platform_screenshot_fee"}
                          className="bg-orange-600 hover:bg-orange-700"
                        >
                          {saving === "setting-platform_screenshot_fee" ? (
                            <RefreshCw className="h-3 w-3 animate-spin" />
                          ) : (
                            <Save className="h-3 w-3" />
                          )}
                        </Button>
                      </div>
                    </Card>
                  </div>
                )}
              </CardContent>
            </Card>
          </TabsContent>

{/* Pricing Tiers Tab */}
          <TabsContent value="tiers" className="space-y-6">
            <Card>
              <CardHeader>
                <div className="flex items-center justify-between">
                  <div>
                    <CardTitle className="flex items-center space-x-2">
                      <Camera className="h-5 w-5 text-purple-600" />
                      <span>Screenshot Pricing Tiers</span>
                    </CardTitle>
                    <p className="text-sm text-gray-600 mt-1">
                      Configure individual pricing for each screenshot number with advanced controls
                    </p>
                  </div>
                  <div className="flex items-center gap-2">
                    <Button
                      onClick={addNewTier}
                      disabled={saving === "add-tier" || !settings || tiers.length >= settings.max_screenshots_allowed}
                      className="bg-green-600 hover:bg-green-700"
                    >
                      {saving === "add-tier" ? (
                        <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
                      ) : (
                        <Camera className="h-4 w-4 mr-2" />
                      )}
                      Add Tier
                    </Button>
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => setShowInactive(!showInactive)}
                      className="border-gray-300"
                    >
                      {showInactive ? <EyeOff className="h-4 w-4 mr-2" /> : <Eye className="h-4 w-4 mr-2" />}
                      {showInactive ? "Hide Inactive" : "Show All"}
                    </Button>
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => setBulkEditMode(!bulkEditMode)}
                      className="border-purple-300 text-purple-700 hover:bg-purple-50"
                    >
                      <Copy className="h-4 w-4 mr-2" />
                      {bulkEditMode ? "Exit Bulk" : "Bulk Edit"}
                    </Button>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                <Card className="mb-6 p-4 bg-blue-50 border-blue-200">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <div className="p-2 bg-blue-100 rounded-lg">
                        <Hash className="h-4 w-4 text-blue-600" />
                      </div>
                      <div>
                        <h4 className="font-semibold text-blue-900">Pricing Tiers Overview</h4>
                        <p className="text-sm text-blue-700">
                          {tiers.length} of {settings?.max_screenshots_allowed || 5} maximum tiers configured
                        </p>
                      </div>
                    </div>
                    <div className="flex items-center gap-2">
                      <Badge variant="secondary" className="bg-blue-100 text-blue-800">
                        {tiers.filter((t) => t.is_active).length} Active
                      </Badge>
                      <Badge variant="secondary" className="bg-gray-100 text-gray-600">
                        {tiers.filter((t) => !t.is_active).length} Inactive
                      </Badge>
                    </div>
                  </div>
                </Card>

{bulkEditMode && (
                  <Card className="mb-6 p-4 bg-purple-50 border-purple-200">
                    <div className="flex items-center justify-between mb-4">
                      <div>
                        <h4 className="font-semibold text-purple-900">Bulk Edit Mode</h4>
                        <p className="text-sm text-purple-700">
                          Select tiers and apply changes to multiple items at once
                        </p>
                      </div>
                      <Badge variant="secondary" className="bg-purple-100 text-purple-800">
                        {selectedTiers.length} selected
                      </Badge>
                    </div>
                    {selectedTiers.length > 0 && (
                      <div className="flex items-center gap-2">
                        <Button
                          size="sm"
                          onClick={() => bulkUpdateTiers({ is_active: true })}
                          disabled={saving === "bulk"}
                          className="bg-green-600 hover:bg-green-700"
                        >
                          Enable All
                        </Button>
                        <Button
                          size="sm"
                          onClick={() => bulkUpdateTiers({ is_active: false })}
                          disabled={saving === "bulk"}
                          variant="outline"
                        >
                          Disable All
                        </Button>
                        <Button
                          size="sm"
                          onClick={() => bulkUpdateTiers({ is_free: true })}
                          disabled={saving === "bulk"}
                          className="bg-blue-600 hover:bg-blue-700"
                        >
                          Make Free
                        </Button>
                        <Button size="sm" onClick={() => setSelectedTiers([])} variant="outline">
                          Clear Selection
                        </Button>
                      </div>
                    )}
                  </Card>
                )}

<div className="space-y-4">
                  {tiers
                    .filter((tier) => showInactive || tier.is_active)
                    .sort((a, b) => a.screenshot_number - b.screenshot_number)
                    .map((tier) => {
                      const editing = editingTiers[tier.id]
                      const changed = hasChanges(tier.id)
                      const isSelected = selectedTiers.includes(tier.id)

return (
                        <Card
                          key={tier.id}
                          className={`border-2 transition-all duration-200 ${
                            changed
                              ? "border-orange-200 bg-orange-50"
                              : isSelected
                                ? "border-purple-300 bg-purple-50"
                                : "border-gray-200 hover:border-gray-300"
                          }`}
                        >
                          <CardContent className="p-6">
                            <div className="flex items-center justify-between mb-6">
                              <div className="flex items-center space-x-4">
                                {bulkEditMode && (
                                  <input
                                    type="checkbox"
                                    checked={isSelected}
                                    onChange={(e) => {
                                      if (e.target.checked) {
                                        setSelectedTiers((prev) => [...prev, tier.id])
                                      } else {
                                        setSelectedTiers((prev) => prev.filter((id) => id !== tier.id))
                                      }
                                    }}
                                    className="w-4 h-4 text-purple-600 rounded"
                                  />
                                )}
                                <div className="w-12 h-12 bg-gradient-to-br from-purple-100 to-purple-200 rounded-xl flex items-center justify-center">
                                  <span className="font-bold text-purple-700 text-lg">{tier.screenshot_number}</span>
                                </div>
                                <div>
                                  <h4 className="font-semibold text-lg">Screenshot {tier.screenshot_number}</h4>
                                  <p className="text-sm text-gray-600">
                                    Configure pricing for the {tier.screenshot_number}
                                    {tier.screenshot_number === 1
                                      ? "st"
                                      : tier.screenshot_number === 2
                                        ? "nd"
                                        : tier.screenshot_number === 3
                                          ? "rd"
                                          : "th"}{" "}
                                    screenshot requirement
                                  </p>
                                </div>
                              </div>

<div className="flex items-center space-x-2">
                                {tier.screenshot_number > 3 && (
                                  <Button
                                    variant="outline"
                                    size="sm"
                                    onClick={() => removeTier(tier.id)}
                                    disabled={saving === `remove-${tier.id}`}
                                    className="border-red-300 text-red-700 hover:bg-red-50"
                                  >
                                    {saving === `remove-${tier.id}` ? (
                                      <RefreshCw className="h-3 w-3 animate-spin" />
                                    ) : (
                                      "Remove"
                                    )}
                                  </Button>
                                )}
                                {changed && (
                                  <Badge variant="secondary" className="bg-orange-100 text-orange-700 animate-pulse">
                                    <AlertCircle className="h-3 w-3 mr-1" />
                                    Unsaved
                                  </Badge>
                                )}
                                {tier.is_active ? (
                                  <Badge className="bg-green-100 text-green-700">
                                    <CheckCircle className="h-3 w-3 mr-1" />
                                    Active
                                  </Badge>
                                ) : (
                                  <Badge variant="secondary" className="bg-gray-100 text-gray-600">
                                    Inactive
                                  </Badge>
                                )}
                              </div>
                            </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 items-end">
                              <Card className="p-4 bg-white/50">
                                <Label className="text-sm font-medium text-gray-700 mb-2 block">Free Screenshot</Label>
                                <div className="flex items-center justify-between">
                                  <Switch
                                    checked={editing?.is_free || false}
                                    onCheckedChange={(checked) => updateTierField(tier.id, "is_free", checked)}
                                  />
                                  <Badge variant={editing?.is_free ? "default" : "secondary"} className="text-xs">
                                    {editing?.is_free ? "FREE" : "PAID"}
                                  </Badge>
                                </div>
                              </Card>

<Card className="p-4 bg-white/50">
                                <Label className="text-sm font-medium text-gray-700 mb-2 block">Percentage Fee</Label>
                                <div className="relative">
                                  <Percent className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                                  <Input
                                    type="number"
                                    step="0.01"
                                    min="0"
                                    max="100"
                                    value={editing?.percentage_fee || 0}
                                    onChange={(e) =>
                                      updateTierField(tier.id, "percentage_fee", Number.parseFloat(e.target.value))
                                    }
                                    disabled={editing?.is_free}
                                    className="pl-10 h-10"
                                    placeholder="0.00"
                                  />
                                </div>
                              </Card>

<Card className="p-4 bg-white/50">
                                <Label className="text-sm font-medium text-gray-700 mb-2 block">Status</Label>
                                <div className="flex items-center justify-between">
                                  <Switch
                                    checked={editing?.is_active || false}
                                    onCheckedChange={(checked) => updateTierField(tier.id, "is_active", checked)}
                                  />
                                  <Badge variant={editing?.is_active ? "default" : "secondary"} className="text-xs">
                                    {editing?.is_active ? "ON" : "OFF"}
                                  </Badge>
                                </div>
                              </Card>

<div className="flex space-x-2">
                                <Button
                                  onClick={() => saveTier(tier.id)}
                                  disabled={!changed || saving === `tier-${tier.id}`}
                                  className="flex-1 bg-gradient-to-r from-purple-600 to-purple-700 hover:from-purple-700 hover:to-purple-800"
                                >
                                  {saving === `tier-${tier.id}` ? (
                                    <>
                                      <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
                                      Saving...
                                    </>
                                  ) : (
                                    <>
                                      <Save className="h-4 w-4 mr-2" />
                                      Save
                                    </>
                                  )}
                                </Button>
                              </div>
                            </div>

{/* Enhanced Preview */}
                            <Card className="mt-6 p-4 bg-gradient-to-r from-gray-50 to-blue-50 border border-gray-200">
                              <div className="flex items-start justify-between">
                                <div className="flex-1">
                                  <h5 className="font-medium text-gray-900 mb-2">Cost Preview</h5>
                                  {editing?.is_free ? (
                                    <div className="flex items-center gap-2">
                                      <CheckCircle className="h-4 w-4 text-green-600" />
                                      <span className="text-green-700 font-medium">
                                        This screenshot will be FREE for users
                                      </span>
                                    </div>
                                  ) : (
                                    <div className="space-y-2">
                                      <p className="text-gray-700">
                                        Users pay{" "}
                                        <strong className="text-purple-600">{editing?.percentage_fee || 0}%</strong> of
                                        total job cost
                                      </p>
                                      <div className="flex items-center gap-4 text-sm text-gray-600">
                                        <span>
                                          $50 job →{" "}
                                          <strong className="text-green-600">
                                            ${(((editing?.percentage_fee || 0) / 100) * 50).toFixed(2)}
                                          </strong>
                                        </span>
                                        <span>
                                          $100 job →{" "}
                                          <strong className="text-green-600">
                                            ${(((editing?.percentage_fee || 0) / 100) * 100).toFixed(2)}
                                          </strong>
                                        </span>
                                        <span>
                                          $200 job →{" "}
                                          <strong className="text-green-600">
                                            ${(((editing?.percentage_fee || 0) / 100) * 200).toFixed(2)}
                                          </strong>
                                        </span>
                                      </div>
                                    </div>
                                  )}
                                </div>
                                <TrendingUp className="h-5 w-5 text-blue-500" />
                              </div>
                            </Card>
                          </CardContent>
                        </Card>
                      )
                    })}
                </div>
              </CardContent>
            </Card>
          </TabsContent>

{/* Presets Tab */}
          <TabsContent value="presets" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <Zap className="h-5 w-5 text-yellow-600" />
                  <span>Pricing Presets</span>
                </CardTitle>
                <p className="text-sm text-gray-600">
                  Quick setup with pre-configured pricing strategies for common use cases
                </p>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  {Object.entries(PRICING_PRESETS).map(([key, preset]) => (
                    <Card key={key} className="border-2 border-gray-200 hover:border-blue-300 transition-colors">
                      <CardContent className="p-6">
                        <div className="flex items-center justify-between mb-4">
                          <div>
                            <h4 className="font-semibold text-lg">{preset.name}</h4>
                            <p className="text-sm text-gray-600">{preset.description}</p>
                          </div>
                          <Button
                            onClick={() => applyPreset(key)}
                            disabled={saving === "preset"}
                            className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700"
                          >
                            {saving === "preset" ? <RefreshCw className="h-4 w-4 animate-spin" /> : "Apply"}
                          </Button>
                        </div>

<div className="space-y-2">
                          {preset.tiers.map((tier, index) => (
                            <div
                              key={index}
                              className="flex items-center justify-between py-2 px-3 bg-gray-50 rounded-lg"
                            >
                              <span className="text-sm font-medium">Screenshot {tier.screenshot_number}</span>
                              <div className="flex items-center gap-2">
                                {tier.is_free ? (
                                  <Badge className="bg-green-100 text-green-700 text-xs">FREE</Badge>
                                ) : (
                                  <Badge variant="secondary" className="text-xs">
                                    {tier.percentage_fee}%
                                  </Badge>
                                )}
                              </div>
                            </div>
                          ))}
                        </div>
                      </CardContent>
                    </Card>
                  ))}
                </div>
              </CardContent>
            </Card>
          </TabsContent>

{/* Preview Tab */}
          <TabsContent value="preview" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <Calculator className="h-5 w-5 text-green-600" />
                  <span>Cost Calculator & Preview</span>
                </CardTitle>
                <p className="text-sm text-gray-600">
                  See how your pricing settings affect user costs with real-time calculations
                </p>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="flex items-center gap-4">
                  <Label className="text-sm font-medium">Job Cost for Preview:</Label>
                  <div className="flex items-center gap-2">
                    <DollarSign className="h-4 w-4 text-gray-400" />
                    <Input
                      type="number"
                      step="0.01"
                      min="1"
                      value={previewJobCost}
                      onChange={(e) => setPreviewJobCost(Number.parseFloat(e.target.value) || 100)}
                      className="w-32"
                    />
                  </div>
                </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                  <Card className="p-4 bg-gradient-to-br from-blue-50 to-indigo-50 border-blue-200">
                    <h4 className="font-semibold text-blue-900 mb-4">Screenshot Cost Breakdown</h4>
                    <div className="space-y-3">
                      {previewBreakdown.map((item, index) => (
                        <div key={index} className="flex items-center justify-between py-2 px-3 bg-white/70 rounded-lg">
                          <div className="flex items-center gap-3">
                            <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
                              <span className="text-sm font-medium text-blue-700">{item.screenshot}</span>
                            </div>
                            <span className="text-sm font-medium">Screenshot {item.screenshot}</span>
                          </div>
                          <div className="text-right">
                            {item.isFree ? (
                              <Badge className="bg-green-100 text-green-700">FREE</Badge>
                            ) : (
                              <div className="text-sm">
                                <span className="font-semibold text-blue-900">${item.cost.toFixed(2)}</span>
                                <span className="text-gray-600 ml-1">({item.percentage}%)</span>
                              </div>
                            )}
                          </div>
                        </div>
                      ))}
                    </div>
                  </Card>

<Card className="p-4 bg-gradient-to-br from-green-50 to-emerald-50 border-green-200">
                    <h4 className="font-semibold text-green-900 mb-4">Total Cost Summary</h4>
                    <div className="space-y-4">
                      <div className="flex items-center justify-between py-3 px-4 bg-white/70 rounded-lg">
                        <span className="text-sm font-medium">Base Job Cost</span>
                        <span className="font-semibold text-green-900">${previewJobCost.toFixed(2)}</span>
                      </div>
                      <div className="flex items-center justify-between py-3 px-4 bg-white/70 rounded-lg">
                        <span className="text-sm font-medium">Screenshot Fees</span>
                        <span className="font-semibold text-green-900">${previewTotalCost.toFixed(2)}</span>
                      </div>
                      <Separator />
                      <div className="flex items-center justify-between py-3 px-4 bg-green-100 rounded-lg">
                        <span className="font-semibold text-green-900">Total Cost</span>
                        <span className="text-xl font-bold text-green-900">
                          ${(previewJobCost + previewTotalCost).toFixed(2)}
                        </span>
                      </div>
                      <div className="text-center text-sm text-green-700">
                        Additional cost: {((previewTotalCost / previewJobCost) * 100).toFixed(1)}% of base job
                      </div>
                    </div>
                  </Card>
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/recent-activity.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { formatDistanceToNow } from "date-fns"
import { useAuth } from "@/contexts/auth-context"
import { useEffect, useState } from "react"
import { getUserRecentActivity } from "@/lib/dashboard-stats"
import { getUserNotifications } from "@/lib/notifications"
import { getTransactions } from "@/lib/wallet"
import {
  DollarSign,
  Briefcase,
  Bell,
  TrendingUp,
  TrendingDown,
  CreditCard,
  RefreshCw,
  Eye,
  Activity,
} from "lucide-react"
import Link from "next/link"

interface EnhancedActivityItem {
  id: string
  type: "job_applied" | "application_accepted" | "payment_received" | "job_completed" | "notification" | "transaction"
  title: string
  description: string
  timestamp: string
  status: "pending" | "info" | "success" | "completed" | "failed"
  amount?: number
  isUnread?: boolean
  actionUrl?: string
  transactionType?: "deposit" | "withdrawal" | "payment" | "earning" | "refund"
}

const getActivityIcon = (item: EnhancedActivityItem) => {
  if (item.type === "notification") {
    return <Bell className="h-4 w-4" />
  }

if (item.type === "transaction") {
    switch (item.transactionType) {
      case "deposit":
        return <TrendingDown className="h-4 w-4 text-green-600" />
      case "withdrawal":
        return <TrendingUp className="h-4 w-4 text-red-600" />
      case "earning":
        return <DollarSign className="h-4 w-4 text-green-600" />
      case "payment":
        return <CreditCard className="h-4 w-4 text-blue-600" />
      case "refund":
        return <RefreshCw className="h-4 w-4 text-orange-600" />
      default:
        return <DollarSign className="h-4 w-4" />
    }
  }

switch (item.type) {
    case "job_applied":
      return <Briefcase className="h-4 w-4" />
    case "application_accepted":
      return <Briefcase className="h-4 w-4 text-green-600" />
    case "payment_received":
      return <DollarSign className="h-4 w-4 text-green-600" />
    case "job_completed":
      return <Briefcase className="h-4 w-4 text-blue-600" />
    default:
      return <Activity className="h-4 w-4" />
  }
}

const getStatusColor = (status: EnhancedActivityItem["status"]) => {
  switch (status) {
    case "pending":
      return "bg-yellow-100 text-yellow-800"
    case "info":
      return "bg-blue-100 text-blue-800"
    case "success":
    case "completed":
      return "bg-green-100 text-green-800"
    case "failed":
      return "bg-red-100 text-red-800"
    default:
      return "bg-gray-100 text-gray-800"
  }
}

export function RecentActivity() {
  const { user } = useAuth()
  const [activities, setActivities] = useState<EnhancedActivityItem[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    const loadActivities = async () => {
      if (!user?.id) {
        setLoading(false)
        return
      }

try {
        console.log("[v0] Loading comprehensive recent activities for user:", user.id)

const [dashboardActivities, notifications, transactions] = await Promise.all([
          getUserRecentActivity(user.id, 3),
          getUserNotifications(user.id),
          getTransactions(`wallet_${user.id}`, { limit: 5 }),
        ])

console.log("[v0] Loaded dashboard activities:", dashboardActivities.length)
        console.log("[v0] Loaded notifications:", notifications.length)
        console.log("[v0] Loaded transactions:", transactions.length)

const combinedActivities: EnhancedActivityItem[] = []

dashboardActivities.forEach((activity) => {
          combinedActivities.push({
            id: activity.id,
            type: activity.type,
            title: activity.title,
            description: activity.description,
            timestamp: activity.timestamp,
            status: activity.status,
            amount: activity.amount,
          })
        })

notifications.slice(0, 3).forEach((notification) => {
          combinedActivities.push({
            id: notification.id,
            type: "notification",
            title: notification.title,
            description: notification.description,
            timestamp: notification.timestamp,
            status: notification.read ? "info" : "pending",
            isUnread: !notification.read,
            actionUrl: notification.actionUrl,
          })
        })

transactions.slice(0, 3).forEach((transaction) => {
          combinedActivities.push({
            id: transaction.id,
            type: "transaction",
            title: `${transaction.type.charAt(0).toUpperCase() + transaction.type.slice(1)} Transaction`,
            description: transaction.description,
            timestamp: transaction.createdAt,
            status:
              transaction.status === "completed" ? "success" : transaction.status === "failed" ? "failed" : "pending",
            amount: Math.abs(transaction.amount),
            transactionType: transaction.type,
            actionUrl: "/dashboard/wallet",
          })
        })

const sortedActivities = combinedActivities
          .sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime())
          .slice(0, 8)

console.log("[v0] Combined and sorted activities:", sortedActivities.length)
        setActivities(sortedActivities)
      } catch (error) {
        console.error("[v0] Error loading comprehensive activities:", error)
        setActivities([])
      } finally {
        setLoading(false)
      }
    }

loadActivities()

const interval = setInterval(loadActivities, 30000)
    return () => clearInterval(interval)
  }, [user?.id])

if (loading) {
    return (
      <Card className="bg-white border border-gray-200 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-[1.02]">
        <CardHeader className="pb-4">
          <CardTitle className="flex items-center text-xl">
            <div className="w-8 h-8 bg-gradient-to-r from-emerald-500 to-emerald-600 rounded-lg flex items-center justify-center mr-3">
              <Activity className="h-5 w-5 text-white" />
            </div>
            <span className="text-emerald-600">Recent Activity</span>
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="text-center py-8">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-emerald-600 mx-auto mb-4"></div>
            <p className="text-sm text-gray-500">Loading activities...</p>
          </div>
        </CardContent>
      </Card>
    )
  }

return (
    <Card className="bg-white border border-gray-200 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-[1.02]">
      <CardHeader className="pb-4">
        <CardTitle className="flex items-center justify-between text-xl">
          <div className="flex items-center">
            <div className="w-8 h-8 bg-gradient-to-r from-emerald-500 to-emerald-600 rounded-lg flex items-center justify-center mr-3">
              <Activity className="h-5 w-5 text-white" />
            </div>
            <span className="text-emerald-600">Recent Activity</span>
          </div>
          <Link href="/dashboard/notifications">
            <Button variant="ghost" size="sm" className="text-emerald-600 hover:text-emerald-700 hover:bg-emerald-50">
              <Eye className="h-4 w-4 mr-1" />
              View All
            </Button>
          </Link>
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        {activities.length > 0 ? (
          activities.map((activity) => (
            <div
              key={activity.id}
              className={`flex items-start space-x-3 p-3 rounded-lg transition-all hover:bg-gray-50 ${
                activity.isUnread ? "bg-blue-50 border-l-4 border-blue-500" : ""
              }`}
            >
              <Avatar className="h-8 w-8 flex-shrink-0">
                <AvatarFallback className="text-xs bg-gradient-to-br from-emerald-100 to-teal-100 text-emerald-700">
                  {getActivityIcon(activity)}
                </AvatarFallback>
              </Avatar>
              <div className="flex-1 min-w-0">
                <div className="flex items-start justify-between">
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-medium text-gray-900 truncate">
                      {activity.title}
                      {activity.isUnread && (
                        <span className="ml-2 w-2 h-2 bg-blue-500 rounded-full inline-block"></span>
                      )}
                    </p>
                    <p className="text-sm text-gray-600 line-clamp-2 mt-1">{activity.description}</p>
                    <p className="text-xs text-gray-400 mt-1">
                      {formatDistanceToNow(new Date(activity.timestamp), { addSuffix: true })}
                    </p>
                  </div>
                  <div className="flex flex-col items-end space-y-1 ml-2">
                    {activity.amount && (
                      <span
                        className={`text-sm font-medium ${
                          activity.transactionType === "earning" ||
                          activity.transactionType === "deposit" ||
                          activity.transactionType === "refund"
                            ? "text-green-600"
                            : "text-red-600"
                        }`}
                      >
                        {activity.transactionType === "earning" ||
                        activity.transactionType === "deposit" ||
                        activity.transactionType === "refund"
                          ? "+"
                          : "-"}
                        ${activity.amount.toFixed(2)}
                      </span>
                    )}
                    <Badge variant="secondary" className={`${getStatusColor(activity.status)} text-xs`}>
                      {activity.status === "success" ? "completed" : activity.status}
                    </Badge>
                  </div>
                </div>
              </div>
            </div>
          ))
        ) : (
          <div className="text-center py-8">
            <div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-emerald-100 to-teal-100 rounded-full flex items-center justify-center">
              <Activity className="h-8 w-8 text-emerald-600" />
            </div>
            <p className="text-sm text-gray-500 font-medium">No recent activity</p>
            <p className="text-xs text-gray-400 mt-1">
              Your activities will appear here as you apply for jobs, complete work, and make transactions
            </p>
          </div>
        )}

{activities.length > 0 && (
          <div className="pt-4 border-t border-gray-100">
            <div className="flex space-x-2">
              <Link href="/dashboard/notifications" className="flex-1">
                <Button
                  variant="outline"
                  size="sm"
                  className="w-full text-xs bg-transparent hover:bg-emerald-50 hover:text-emerald-700 border-emerald-200"
                >
                  <Bell className="h-3 w-3 mr-1" />
                  Notifications
                </Button>
              </Link>
              <Link href="/dashboard/wallet" className="flex-1">
                <Button
                  variant="outline"
                  size="sm"
                  className="w-full text-xs bg-transparent hover:bg-emerald-50 hover:text-emerald-700 border-emerald-200"
                >
                  <DollarSign className="h-3 w-3 mr-1" />
                  Wallet
                </Button>
              </Link>
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  )
}

export function createActivity(activity: {
  userId: string
  type: "job_application" | "order_received" | "payment" | "review"
  title: string
  description: string
  status?: "pending" | "completed" | "in_progress"
  amount?: number
}) {
  const allActivities = JSON.parse(localStorage.getItem("user_activities") || "[]")
  const newActivity = {
    ...activity,
    id: `activity_${Date.now()}`,
    timestamp: new Date(),
  }

allActivities.push(newActivity)
  localStorage.setItem("user_activities", JSON.stringify(allActivities))

return newActivity
}
[V0_FILE]typescript:file="lib/reviews.ts" isMerged="true"
// Review and rating system for microjob marketplace
export interface Review {
  id: string
  jobId: string
  workProofId: string
  reviewerId: string // employer who gives the review
  revieweeId: string // worker who receives the review
  rating: number // 1-5 stars
  comment?: string
  createdAt: string
  updatedAt: string
  isVisible: boolean // admin can hide reviews
  reviewer: {
    id: string
    firstName: string
    lastName: string
    username: string
    avatar?: string
  }
  reviewee: {
    id: string
    firstName: string
    lastName: string
    username: string
    avatar?: string
  }
  job: {
    id: string
    title: string
    category: string
  }
}

const REVIEWS_STORAGE_KEY = "marketplace-reviews"

const getStoredReviews = (): Review[] => {
  if (typeof window === "undefined") return []
  try {
    const stored = localStorage.getItem(REVIEWS_STORAGE_KEY)
    return stored ? JSON.parse(stored) : []
  } catch {
    return []
  }
}

const saveReviews = (reviews: Review[]): void => {
  if (typeof window === "undefined") return
  try {
    localStorage.setItem(REVIEWS_STORAGE_KEY, JSON.stringify(reviews))
  } catch (error) {
    console.error("Failed to save reviews:", error)
  }
}

export async function submitReview(data: {
  jobId: string
  workProofId: string
  reviewerId: string
  revieweeId: string
  rating: number
  comment?: string
}): Promise<Review> {
  await new Promise((resolve) => setTimeout(resolve, 300))

console.log("[v0] 🌟 Submitting review:", data)

// Get job and user details
  const { getJobById } = await import("./jobs")
  const job = await getJobById(data.jobId)

const newReview: Review = {
    id: `review_${Date.now()}`,
    jobId: data.jobId,
    workProofId: data.workProofId,
    reviewerId: data.reviewerId,
    revieweeId: data.revieweeId,
    rating: Math.max(1, Math.min(5, data.rating)), // Ensure rating is between 1-5
    comment: data.comment?.trim() || undefined,
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
    isVisible: true,
    reviewer: {
      id: data.reviewerId,
      firstName: "Job",
      lastName: "Poster",
      username: "employer",
    },
    reviewee: {
      id: data.revieweeId,
      firstName: "Current",
      lastName: "Worker",
      username: "worker",
    },
    job: {
      id: data.jobId,
      title: job?.title || "Microjob Task",
      category: job?.category || "General",
    },
  }

const reviews = getStoredReviews()
  reviews.push(newReview)
  saveReviews(reviews)

console.log("[v0] ✅ Review submitted successfully:", newReview.id)
  return newReview
}

export async function getReviewsByUser(userId: string): Promise<Review[]> {
  await new Promise((resolve) => setTimeout(resolve, 200))
  const reviews = getStoredReviews()
  return reviews.filter((review) => review.revieweeId === userId && review.isVisible)
}

export async function getReviewsByJob(jobId: string): Promise<Review[]> {
  await new Promise((resolve) => setTimeout(resolve, 200))
  const reviews = getStoredReviews()
  return reviews.filter((review) => review.jobId === jobId && review.isVisible)
}

export async function getAllReviews(): Promise<Review[]> {
  await new Promise((resolve) => setTimeout(resolve, 200))
  return getStoredReviews()
}

export async function hideReview(reviewId: string): Promise<Review | null> {
  await new Promise((resolve) => setTimeout(resolve, 300))

const reviews = getStoredReviews()
  const reviewIndex = reviews.findIndex((r) => r.id === reviewId)

if (reviewIndex === -1) return null

reviews[reviewIndex] = {
    ...reviews[reviewIndex],
    isVisible: false,
    updatedAt: new Date().toISOString(),
  }

saveReviews(reviews)
  console.log("[v0] 🔒 Review hidden by admin:", reviewId)
  return reviews[reviewIndex]
}

export async function showReview(reviewId: string): Promise<Review | null> {
  await new Promise((resolve) => setTimeout(resolve, 300))

const reviews = getStoredReviews()
  const reviewIndex = reviews.findIndex((r) => r.id === reviewId)

if (reviewIndex === -1) return null

reviews[reviewIndex] = {
    ...reviews[reviewIndex],
    isVisible: true,
    updatedAt: new Date().toISOString(),
  }

saveReviews(reviews)
  console.log("[v0] 👁️ Review shown by admin:", reviewId)
  return reviews[reviewIndex]
}

export async function deleteReview(reviewId: string): Promise<boolean> {
  await new Promise((resolve) => setTimeout(resolve, 300))

const reviews = getStoredReviews()
  const filteredReviews = reviews.filter((r) => r.id !== reviewId)

if (filteredReviews.length === reviews.length) return false

saveReviews(filteredReviews)
  console.log("[v0] 🗑️ Review deleted by admin:", reviewId)
  return true
}

export function calculateUserRating(reviews: Review[]): { averageRating: number; totalReviews: number } {
  const visibleReviews = reviews.filter((r) => r.isVisible)

if (visibleReviews.length === 0) {
    return { averageRating: 0, totalReviews: 0 }
  }

const totalRating = visibleReviews.reduce((sum, review) => sum + review.rating, 0)
  const averageRating = Math.round((totalRating / visibleReviews.length) * 10) / 10 // Round to 1 decimal

return { averageRating, totalReviews: visibleReviews.length }
}

export function getReviewStatusColor(rating: number): string {
  if (rating >= 4.5) return "text-green-600"
  if (rating >= 3.5) return "text-yellow-600"
  if (rating >= 2.5) return "text-orange-600"
  return "text-red-600"
}
[V0_FILE]typescript:file="components/reviews/review-form.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent } from "@/components/ui/card"
import { Star, X } from "lucide-react"
import { toast } from "sonner"
import { submitReview } from "@/lib/reviews"

interface ReviewFormProps {
  isOpen: boolean
  onClose: () => void
  onSubmit: () => void
  jobId: string
  workProofId: string
  reviewerId: string
  revieweeId: string
  workerName: string
}

export function ReviewForm({
  isOpen,
  onClose,
  onSubmit,
  jobId,
  workProofId,
  reviewerId,
  revieweeId,
  workerName,
}: ReviewFormProps) {
  const [rating, setRating] = useState(0)
  const [hoveredRating, setHoveredRating] = useState(0)
  const [comment, setComment] = useState("")
  const [isSubmitting, setIsSubmitting] = useState(false)

const handleSubmit = async () => {
    if (rating === 0) {
      toast.error("Please select a rating")
      return
    }

setIsSubmitting(true)
    try {
      await submitReview({
        jobId,
        workProofId,
        reviewerId,
        revieweeId,
        rating,
        comment: comment.trim() || undefined,
      })

toast.success("Review submitted successfully!")
      onSubmit()
      onClose()

// Reset form
      setRating(0)
      setComment("")
    } catch (error) {
      console.error("[v0] Failed to submit review:", error)
      toast.error("Failed to submit review. Please try again.")
    } finally {
      setIsSubmitting(false)
    }
  }

const handleClose = () => {
    setRating(0)
    setHoveredRating(0)
    setComment("")
    onClose()
  }

return (
    <Dialog open={isOpen} onOpenChange={handleClose}>
      <DialogContent className="max-w-md">
        <DialogHeader>
          <div className="flex items-center justify-between">
            <DialogTitle className="text-xl font-semibold">Rate Your Experience</DialogTitle>
            <Button variant="ghost" size="sm" onClick={handleClose}>
              <X className="h-4 w-4" />
            </Button>
          </div>
        </DialogHeader>

<div className="space-y-6 pt-4">
          <Card className="border-blue-200 bg-blue-50">
            <CardContent className="p-4 text-center">
              <p className="text-sm text-gray-600 mb-2">How was your experience working with</p>
              <p className="font-semibold text-gray-900">{workerName}?</p>
            </CardContent>
          </Card>

{/* Star Rating */}
          <div className="text-center space-y-3">
            <p className="text-sm font-medium text-gray-700">Rate the work quality</p>
            <div className="flex justify-center space-x-1">
              {[1, 2, 3, 4, 5].map((star) => (
                <button
                  key={star}
                  type="button"
                  onClick={() => setRating(star)}
                  onMouseEnter={() => setHoveredRating(star)}
                  onMouseLeave={() => setHoveredRating(0)}
                  className="p-1 transition-transform hover:scale-110"
                >
                  <Star
                    className={`h-8 w-8 ${
                      star <= (hoveredRating || rating) ? "text-yellow-400 fill-current" : "text-gray-300"
                    }`}
                  />
                </button>
              ))}
            </div>
            {rating > 0 && (
              <p className="text-sm text-gray-600">
                {rating === 1 && "Poor"}
                {rating === 2 && "Fair"}
                {rating === 3 && "Good"}
                {rating === 4 && "Very Good"}
                {rating === 5 && "Excellent"}
              </p>
            )}
          </div>

{/* Comment (Optional) */}
          <div className="space-y-2">
            <label className="text-sm font-medium text-gray-700">Comment (Optional)</label>
            <Textarea
              placeholder="Share your experience working with this person..."
              value={comment}
              onChange={(e) => setComment(e.target.value)}
              rows={3}
              maxLength={500}
              className="resize-none"
            />
            <p className="text-xs text-gray-500 text-right">{comment.length}/500 characters</p>
          </div>

{/* Submit Button */}
          <div className="flex gap-3">
            <Button variant="outline" onClick={handleClose} className="flex-1 bg-transparent" disabled={isSubmitting}>
              Skip Review
            </Button>
            <Button
              onClick={handleSubmit}
              disabled={rating === 0 || isSubmitting}
              className="flex-1 bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700"
            >
              {isSubmitting ? "Submitting..." : "Submit Review"}
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescript:file="components/reviews/review-display.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Star, Calendar } from "lucide-react"
import { type Review, getReviewsByUser, calculateUserRating } from "@/lib/reviews"

interface ReviewDisplayProps {
  userId: string
  showTitle?: boolean
}

export function ReviewDisplay({ userId, showTitle = true }: ReviewDisplayProps) {
  const [reviews, setReviews] = useState<Review[]>([])
  const [loading, setLoading] = useState(true)
  const [userRating, setUserRating] = useState({ averageRating: 0, totalReviews: 0 })

useEffect(() => {
    const loadReviews = async () => {
      try {
        const userReviews = await getReviewsByUser(userId)
        setReviews(userReviews)
        setUserRating(calculateUserRating(userReviews))
      } catch (error) {
        console.error("[v0] Failed to load reviews:", error)
      } finally {
        setLoading(false)
      }
    }

loadReviews()
  }, [userId])

if (loading) {
    return (
      <div className="space-y-4">
        {showTitle && <h3 className="text-lg font-semibold">Reviews & Ratings</h3>}
        <div className="animate-pulse space-y-3">
          {[1, 2, 3].map((i) => (
            <Card key={i}>
              <CardContent className="p-4">
                <div className="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
                <div className="h-3 bg-gray-200 rounded w-1/2"></div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    )
  }

if (reviews.length === 0) {
    return (
      <div className="space-y-4">
        {showTitle && <h3 className="text-lg font-semibold">Reviews & Ratings</h3>}
        <Card className="border-dashed border-2 border-gray-300">
          <CardContent className="p-8 text-center">
            <Star className="h-12 w-12 text-gray-400 mx-auto mb-2" />
            <p className="text-gray-600">No reviews yet</p>
            <p className="text-sm text-gray-500 mt-1">Reviews will appear here after completing jobs</p>
          </CardContent>
        </Card>
      </div>
    )
  }

return (
    <div className="space-y-4">
      {showTitle && (
        <div className="flex items-center justify-between">
          <h3 className="text-lg font-semibold">Reviews & Ratings</h3>
          <div className="flex items-center space-x-2">
            <div className="flex items-center">
              <Star className="h-5 w-5 text-yellow-400 fill-current" />
              <span className="ml-1 font-semibold text-lg">{userRating.averageRating.toFixed(1)}</span>
            </div>
            <Badge variant="secondary">
              {userRating.totalReviews} review{userRating.totalReviews !== 1 ? "s" : ""}
            </Badge>
          </div>
        </div>
      )}

<div className="space-y-3">
        {reviews.map((review) => (
          <Card key={review.id} className="hover:shadow-md transition-shadow">
            <CardContent className="p-4">
              <div className="flex items-start justify-between mb-3">
                <div className="flex items-center space-x-3">
                  <Avatar className="h-10 w-10">
                    <AvatarFallback className="bg-blue-500 text-white text-sm">
                      {review.reviewer.firstName[0]}
                      {review.reviewer.lastName[0]}
                    </AvatarFallback>
                  </Avatar>
                  <div>
                    <p className="font-medium text-sm">
                      {review.reviewer.firstName} {review.reviewer.lastName}
                    </p>
                    <p className="text-xs text-gray-500">@{review.reviewer.username}</p>
                  </div>
                </div>
                <div className="text-right">
                  <div className="flex items-center space-x-1">
                    {[1, 2, 3, 4, 5].map((star) => (
                      <Star
                        key={star}
                        className={`h-4 w-4 ${
                          star <= review.rating ? "text-yellow-400 fill-current" : "text-gray-300"
                        }`}
                      />
                    ))}
                  </div>
                  <div className="flex items-center text-xs text-gray-500 mt-1">
                    <Calendar className="h-3 w-3 mr-1" />
                    {new Date(review.createdAt).toLocaleDateString()}
                  </div>
                </div>
              </div>

{review.comment && <p className="text-gray-700 text-sm leading-relaxed mb-3">"{review.comment}"</p>}

<div className="flex items-center justify-between text-xs text-gray-500">
                <span>Job: {review.job.title}</span>
                <Badge variant="outline" className="text-xs">
                  {review.job.category}
                </Badge>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/reviews/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/dashboard/jobs/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/dashboard/jobs/[id]/work-proofs/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescript:file="app/dashboard/notifications/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { DashboardHeader } from "@/components/dashboard/dashboard-header"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { useToast } from "@/hooks/use-toast"
import { useAuth } from "@/contexts/auth-context"
import {
  Bell,
  BellRing,
  Check,
  CheckCheck,
  Trash2,
  Filter,
  Briefcase,
  MessageCircle,
  DollarSign,
  AlertCircle,
  Settings,
} from "lucide-react"

interface Notification {
  id: string
  userId: string
  type: "job" | "message" | "payment" | "system"
  title: string
  description: string
  timestamp: string
  read: boolean
  actionUrl?: string
  recipientId?: string
}

export default function NotificationsPage() {
  const { toast } = useToast()
  const { user } = useAuth()
  const [notifications, setNotifications] = useState<Notification[]>([])
  const [loading, setLoading] = useState(true)

const loadNotifications = () => {
    if (!user) return

console.log("[v0] Loading notifications for user:", user.id)
    const allNotifications = JSON.parse(localStorage.getItem("notifications") || "[]")

console.log("[v0] All notifications in storage:", allNotifications.length)
    console.log(
      "[v0] Sample notification user IDs:",
      allNotifications.slice(0, 3).map((n: Notification) => ({ id: n.id, userId: n.userId, title: n.title })),
    )

const userNotifications = allNotifications.filter((n: Notification) => {
      return (
        n.userId === user.id ||
        n.userId === user.username ||
        n.userId === `user-${user.id}` ||
        n.userId === `user_${user.id}` ||
        n.recipientId === user.id ||
        n.recipientId === user.username
      )
    })

console.log("[v0] Found notifications:", userNotifications.length)
    console.log(
      "[v0] Matched notifications:",
      userNotifications.map((n: Notification) => ({ id: n.id, userId: n.userId, title: n.title })),
    )

setNotifications(userNotifications)
    setLoading(false)
  }

useEffect(() => {
    if (!user) return

loadNotifications()

const handleStorageChange = (e: StorageEvent) => {
      if (e.key === "notifications") {
        console.log("[v0] Notifications updated in storage, reloading...")
        loadNotifications()
      }
    }

const pollInterval = setInterval(() => {
      loadNotifications()
    }, 5000)

window.addEventListener("storage", handleStorageChange)

return () => {
      window.removeEventListener("storage", handleStorageChange)
      clearInterval(pollInterval)
    }
  }, [user])

const markAsRead = (id: string) => {
    console.log("[v0] Marking notification as read:", id)
    setNotifications((prev) =>
      prev.map((notification) => (notification.id === id ? { ...notification, read: true } : notification)),
    )

const allNotifications = JSON.parse(localStorage.getItem("notifications") || "[]")
    const updatedNotifications = allNotifications.map((n: Notification) => (n.id === id ? { ...n, read: true } : n))
    localStorage.setItem("notifications", JSON.stringify(updatedNotifications))

window.dispatchEvent(new StorageEvent("storage", { key: "notifications" }))

toast({
      title: "Marked as read",
      description: "Notification has been marked as read.",
    })
  }

const markAllAsRead = () => {
    if (!user) return

console.log("[v0] Marking all notifications as read for user:", user.id)
    setNotifications((prev) => prev.map((notification) => ({ ...notification, read: true })))

const allNotifications = JSON.parse(localStorage.getItem("notifications") || "[]")
    const updatedNotifications = allNotifications.map((n: Notification) =>
      n.userId === user.id ? { ...n, read: true } : n,
    )
    localStorage.setItem("notifications", JSON.stringify(updatedNotifications))

window.dispatchEvent(new StorageEvent("storage", { key: "notifications" }))

toast({
      title: "All notifications marked as read",
      description: "All your notifications have been marked as read.",
    })
  }

const deleteNotification = (id: string) => {
    console.log("[v0] Deleting notification:", id)
    setNotifications((prev) => prev.filter((notification) => notification.id !== id))

const allNotifications = JSON.parse(localStorage.getItem("notifications") || "[]")
    const updatedNotifications = allNotifications.filter((n: Notification) => n.id !== id)
    localStorage.setItem("notifications", JSON.stringify(updatedNotifications))

window.dispatchEvent(new StorageEvent("storage", { key: "notifications" }))

toast({
      title: "Notification deleted",
      description: "The notification has been removed.",
    })
  }

const unreadCount = notifications.filter((n) => !n.read).length
  const allNotifications = notifications
  const unreadNotifications = notifications.filter((n) => !n.read)

const NotificationCard = ({ notification }: { notification: Notification }) => {
    const getNotificationIcon = (type: string) => {
      switch (type) {
        case "job":
          return <Briefcase className="w-5 h-5 text-blue-600" />
        case "message":
          return <MessageCircle className="w-5 h-5 text-green-600" />
        case "payment":
          return <DollarSign className="w-5 h-5 text-yellow-600" />
        case "system":
          return <AlertCircle className="w-5 h-5 text-orange-600" />
        default:
          return <Bell className="w-5 h-5 text-gray-600" />
      }
    }

return (
      <Card className={`transition-all hover:shadow-md ${!notification.read ? "border-blue-200 bg-blue-50/30" : ""}`}>
        <CardContent className="p-4">
          <div className="flex items-start gap-3">
            <div className="flex-shrink-0 mt-1">{getNotificationIcon(notification.type)}</div>
            <div className="flex-1 min-w-0">
              <div className="flex items-start justify-between gap-2">
                <div className="flex-1">
                  <h4 className="font-medium text-gray-900 mb-1">{notification.title}</h4>
                  <p className="text-sm text-gray-600 mb-2">{notification.description}</p>
                  <p className="text-xs text-gray-500">{notification.timestamp}</p>
                </div>
                <div className="flex items-center gap-2">
                  {!notification.read && (
                    <Badge variant="secondary" className="bg-blue-100 text-blue-800">
                      New
                    </Badge>
                  )}
                  <div className="flex gap-1">
                    {!notification.read && (
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={() => markAsRead(notification.id)}
                        className="h-8 w-8 p-0"
                      >
                        <Check className="w-4 h-4" />
                      </Button>
                    )}
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => deleteNotification(notification.id)}
                      className="h-8 w-8 p-0 text-red-600 hover:text-red-700 hover:bg-red-50"
                    >
                      <Trash2 className="w-4 h-4" />
                    </Button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    )
  }

if (loading) {
    return (
      <>
        <DashboardHeader title="Notifications" description="Stay updated with your latest activities and messages." />
        <div className="flex-1 overflow-auto p-6">
          <div className="max-w-4xl mx-auto">
            <div className="animate-pulse space-y-4">
              {[1, 2, 3].map((i) => (
                <Card key={i}>
                  <CardContent className="p-4">
                    <div className="flex items-start gap-3">
                      <div className="w-5 h-5 bg-gray-200 rounded"></div>
                      <div className="flex-1 space-y-2">
                        <div className="h-4 bg-gray-200 rounded w-1/3"></div>
                        <div className="h-3 bg-gray-200 rounded w-2/3"></div>
                        <div className="h-3 bg-gray-200 rounded w-1/4"></div>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        </div>
      </>
    )
  }

return (
    <>
      <DashboardHeader title="Notifications" description="Stay updated with your latest activities and messages." />

<div className="flex-1 overflow-auto p-6">
        <div className="max-w-4xl mx-auto space-y-6">
          {/* Header Actions */}
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <BellRing className="w-5 h-5 text-blue-600" />
              <span className="text-lg font-semibold">
                {unreadCount > 0 ? `${unreadCount} unread notification${unreadCount > 1 ? "s" : ""}` : "All caught up!"}
              </span>
            </div>
            <div className="flex gap-2">
              {unreadCount > 0 && (
                <Button variant="outline" onClick={markAllAsRead}>
                  <CheckCheck className="w-4 h-4 mr-2" />
                  Mark all as read
                </Button>
              )}
              <Button variant="outline">
                <Filter className="w-4 h-4 mr-2" />
                Filter
              </Button>
            </div>
          </div>

{/* Notifications Tabs */}
          <Tabs defaultValue="all" className="space-y-6">
            <TabsList>
              <TabsTrigger value="all">All ({notifications.length})</TabsTrigger>
              <TabsTrigger value="unread">Unread ({unreadCount})</TabsTrigger>
            </TabsList>

<TabsContent value="all" className="space-y-4">
              {allNotifications.length > 0 ? (
                allNotifications.map((notification) => (
                  <NotificationCard key={notification.id} notification={notification} />
                ))
              ) : (
                <Card>
                  <CardContent className="p-8 text-center">
                    <Bell className="w-12 h-12 text-gray-400 mx-auto mb-4" />
                    <h3 className="text-lg font-medium text-gray-900 mb-2">No notifications yet</h3>
                    <p className="text-gray-600">You'll see notifications here when you have new activity.</p>
                  </CardContent>
                </Card>
              )}
            </TabsContent>

<TabsContent value="unread" className="space-y-4">
              {unreadNotifications.length > 0 ? (
                unreadNotifications.map((notification) => (
                  <NotificationCard key={notification.id} notification={notification} />
                ))
              ) : (
                <Card>
                  <CardContent className="p-8 text-center">
                    <CheckCheck className="w-12 h-12 text-green-500 mx-auto mb-4" />
                    <h3 className="text-lg font-medium text-gray-900 mb-2">All caught up!</h3>
                    <p className="text-gray-600">You have no unread notifications.</p>
                  </CardContent>
                </Card>
              )}
            </TabsContent>
          </Tabs>

{/* Quick Settings */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Settings className="w-5 h-5" />
                Notification Settings
              </CardTitle>
              <CardDescription>Manage your notification preferences</CardDescription>
            </CardHeader>
            <CardContent>
              <Button variant="outline" className="w-full sm:w-auto bg-transparent">
                <Settings className="w-4 h-4 mr-2" />
                Configure Notifications
              </Button>
            </CardContent>
          </Card>
        </div>
      </div>
    </>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]jpg:file="public/images/default-thumbnail-1.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/photo_2025-08-18_21-59-16.jpg-TZJWZlLCPGGXXYvGcKP0Rbbrgw6JOS.jpeg" isMerged="true"
[V0_FILE]jpg:file="public/images/default-thumbnail-2.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/photo_2025-08-18_21-59-19.jpg-iVt6T0i4f2qUFs1046HBebbh1nviRM.jpeg" isMerged="true"
[V0_FILE]typescriptreact:file="lib/file-management.ts" isMerged="true"
// File management system for chat attachments
export interface ChatFile {
  id: string
  chatId: string
  messageId: string
  fileName: string
  fileSize: number
  fileType: string
  fileUrl: string
  uploadedAt: Date
  lastTextActivity: Date // Track when last text message was sent in chat
  expiresAt: Date // 14 days after last text activity
  isExpired: boolean
}

const MAX_FILE_SIZE = 5 * 1024 * 1024 // 5MB in bytes
const FILE_EXPIRY_DAYS = 14
const ALLOWED_FILE_TYPES = [
  "image/jpeg",
  "image/jpg",
  "image/png",
  "image/gif",
  "image/webp",
  "application/pdf",
  "application/msword",
  "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
  "text/plain",
  "text/csv",
]

export const validateFile = (file: File): { isValid: boolean; error?: string } => {
  // Check file size
  if (file.size > MAX_FILE_SIZE) {
    return {
      isValid: false,
      error: `File size exceeds 5MB limit. Current size: ${(file.size / (1024 * 1024)).toFixed(2)}MB`,
    }
  }

// Check file type
  if (!ALLOWED_FILE_TYPES.includes(file.type)) {
    return {
      isValid: false,
      error: `File type not supported. Allowed types: Images, PDF, Word documents, Text files`,
    }
  }

return { isValid: true }
}

export const saveFileToChat = async (file: File, chatId: string, messageId: string): Promise<ChatFile> => {
  const validation = validateFile(file)
  if (!validation.isValid) {
    throw new Error(validation.error)
  }

// Create file URL (in real app, this would upload to cloud storage)
  const fileUrl = URL.createObjectURL(file)

const now = new Date()
  const expiresAt = new Date(now.getTime() + FILE_EXPIRY_DAYS * 24 * 60 * 60 * 1000)

const chatFile: ChatFile = {
    id: `file_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
    chatId,
    messageId,
    fileName: file.name,
    fileSize: file.size,
    fileType: file.type,
    fileUrl,
    uploadedAt: now,
    lastTextActivity: now,
    expiresAt,
    isExpired: false,
  }

// Store file metadata
  const files = getStoredFiles()
  files.push(chatFile)
  localStorage.setItem("chat-files", JSON.stringify(files))

console.log("[v0] File saved:", chatFile.fileName, "Size:", (file.size / 1024).toFixed(2), "KB")
  return chatFile
}

export const getStoredFiles = (): ChatFile[] => {
  try {
    const stored = localStorage.getItem("chat-files")
    const files = stored ? JSON.parse(stored) : []

// Convert date strings back to Date objects
    return files.map((file: any) => ({
      ...file,
      uploadedAt: new Date(file.uploadedAt),
      lastTextActivity: new Date(file.lastTextActivity),
      expiresAt: new Date(file.expiresAt),
    }))
  } catch (error) {
    console.error("[v0] Error loading files:", error)
    return []
  }
}

export const updateLastTextActivity = (chatId: string): void => {
  const files = getStoredFiles()
  const now = new Date()
  const newExpiryDate = new Date(now.getTime() + FILE_EXPIRY_DAYS * 24 * 60 * 60 * 1000)

const updatedFiles = files.map((file) => {
    if (file.chatId === chatId && !file.isExpired) {
      return {
        ...file,
        lastTextActivity: now,
        expiresAt: newExpiryDate,
      }
    }
    return file
  })

localStorage.setItem("chat-files", JSON.stringify(updatedFiles))
  console.log("[v0] Updated last text activity for chat:", chatId)
}

export const cleanupExpiredFiles = (): number => {
  const files = getStoredFiles()
  const now = new Date()
  let cleanedCount = 0

const activeFiles = files.filter((file) => {
    const isExpired = now > file.expiresAt
    if (isExpired && !file.isExpired) {
      // Mark as expired and revoke object URL
      URL.revokeObjectURL(file.fileUrl)
      cleanedCount++
      console.log("[v0] Expired file cleaned:", file.fileName, "from chat:", file.chatId)
      return false // Remove from active files
    }
    return !isExpired
  })

localStorage.setItem("chat-files", JSON.stringify(activeFiles))

if (cleanedCount > 0) {
    console.log("[v0] Cleaned up", cleanedCount, "expired files")
  }

return cleanedCount
}

export const getFilesByChatId = (chatId: string): ChatFile[] => {
  const files = getStoredFiles()
  return files.filter((file) => file.chatId === chatId && !file.isExpired)
}

export const getFileStats = () => {
  const files = getStoredFiles()
  const now = new Date()

const stats = {
    totalFiles: files.length,
    activeFiles: files.filter((f) => !f.isExpired && now <= f.expiresAt).length,
    expiredFiles: files.filter((f) => f.isExpired || now > f.expiresAt).length,
    totalSize: files.reduce((sum, f) => sum + f.fileSize, 0),
    oldestFile: files.length > 0 ? Math.min(...files.map((f) => f.uploadedAt.getTime())) : null,
    newestFile: files.length > 0 ? Math.max(...files.map((f) => f.uploadedAt.getTime())) : null,
  }

return stats
}

// Auto-cleanup function to run periodically
export const initFileCleanup = () => {
  // Run cleanup immediately
  cleanupExpiredFiles()

// Set up periodic cleanup every hour
  setInterval(
    () => {
      cleanupExpiredFiles()
    },
    60 * 60 * 1000,
  ) // 1 hour

console.log("[v0] File cleanup system initialized")
}

export const formatFileSize = (bytes: number): string => {
  if (bytes === 0) return "0 Bytes"

const k = 1024
  const sizes = ["Bytes", "KB", "MB", "GB"]
  const i = Math.floor(Math.log(bytes) / Math.log(k))

return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i]
}

export const getFileIcon = (fileType: string): string => {
  if (fileType.startsWith("image/")) return "🖼️"
  if (fileType === "application/pdf") return "📄"
  if (fileType.includes("word") || fileType.includes("document")) return "📝"
  if (fileType.startsWith("text/")) return "📄"
  return "📎"
}
[V0_FILE]typescriptreact:file="app/admin/support/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { AdminHeader } from "@/components/admin/admin-header"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Textarea } from "@/components/ui/textarea"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { useAuth } from "@/contexts/auth-context"
import { Search, Filter, MessageSquare, Clock, Zap, AlertCircle, CheckCircle, XCircle, DollarSign } from "lucide-react"
import { formatDistanceToNow } from "date-fns"
import { toast } from "sonner"

interface SupportTicket {
  id: string
  userId: string
  userName: string
  userEmail: string
  chatId?: string
  ticketType: "free" | "priority"
  subject: string
  description: string
  priority: "low" | "normal" | "high" | "urgent"
  status: "open" | "in_progress" | "resolved" | "closed"
  assignedAdminId?: string
  assignedAdminName?: string
  paymentAmount: number
  responseTimeHours: number
  createdAt: Date
  firstResponseAt?: Date
  resolvedAt?: Date
  closedAt?: Date
  unreadMessages: number
}

// Mock data for demonstration
const mockTickets: SupportTicket[] = [
  {
    id: "1",
    userId: "user1",
    userName: "John Doe",
    userEmail: "john@example.com",
    chatId: "chat-123",
    ticketType: "priority",
    subject: "Payment not processing",
    description:
      "My payment keeps failing when trying to withdraw funds from my wallet. I've tried multiple times but it shows an error.",
    priority: "high",
    status: "open",
    paymentAmount: 0.2,
    responseTimeHours: 1,
    createdAt: new Date(Date.now() - 2 * 60 * 60 * 1000),
    unreadMessages: 3,
  },
  {
    id: "2",
    userId: "user2",
    userName: "Jane Smith",
    userEmail: "jane@example.com",
    ticketType: "free",
    subject: "Account verification issue",
    description: "Unable to complete account verification process. The upload keeps failing.",
    priority: "normal",
    status: "in_progress",
    assignedAdminId: "admin1",
    assignedAdminName: "Admin Support",
    paymentAmount: 0,
    responseTimeHours: 48,
    createdAt: new Date(Date.now() - 6 * 60 * 60 * 1000),
    firstResponseAt: new Date(Date.now() - 4 * 60 * 60 * 1000),
    unreadMessages: 1,
  },
  {
    id: "3",
    userId: "user3",
    userName: "Mike Johnson",
    userEmail: "mike@example.com",
    ticketType: "free",
    subject: "Profile not updating",
    description: "Changes to my profile are not being saved properly.",
    priority: "low",
    status: "resolved",
    assignedAdminId: "admin1",
    assignedAdminName: "Admin Support",
    paymentAmount: 0,
    responseTimeHours: 48,
    createdAt: new Date(Date.now() - 24 * 60 * 60 * 1000),
    firstResponseAt: new Date(Date.now() - 20 * 60 * 60 * 1000),
    resolvedAt: new Date(Date.now() - 2 * 60 * 60 * 1000),
    unreadMessages: 0,
  },
]

export default function AdminSupportPage() {
  const { user: currentAdmin } = useAuth()
  const [tickets, setTickets] = useState<SupportTicket[]>(mockTickets)
  const [selectedTicket, setSelectedTicket] = useState<SupportTicket | null>(null)
  const [searchQuery, setSearchQuery] = useState("")
  const [statusFilter, setStatusFilter] = useState<string>("all")
  const [typeFilter, setTypeFilter] = useState<string>("all")
  const [priorityFilter, setPriorityFilter] = useState<string>("all")
  const [showTicketDialog, setShowTicketDialog] = useState(false)
  const [responseMessage, setResponseMessage] = useState("")
  const [isResponding, setIsResponding] = useState(false)

const filteredTickets = tickets.filter((ticket) => {
    const matchesSearch =
      searchQuery === "" ||
      ticket.subject.toLowerCase().includes(searchQuery.toLowerCase()) ||
      ticket.userName.toLowerCase().includes(searchQuery.toLowerCase()) ||
      ticket.userEmail.toLowerCase().includes(searchQuery.toLowerCase()) ||
      ticket.description.toLowerCase().includes(searchQuery.toLowerCase())

const matchesStatus = statusFilter === "all" || ticket.status === statusFilter
    const matchesType = typeFilter === "all" || ticket.ticketType === typeFilter
    const matchesPriority = priorityFilter === "all" || ticket.priority === priorityFilter

return matchesSearch && matchesStatus && matchesType && matchesPriority
  })

const getStatusBadge = (status: SupportTicket["status"]) => {
    const variants = {
      open: "bg-red-100 text-red-800",
      in_progress: "bg-blue-100 text-blue-800",
      resolved: "bg-green-100 text-green-800",
      closed: "bg-gray-100 text-gray-800",
    }

const icons = {
      open: AlertCircle,
      in_progress: Clock,
      resolved: CheckCircle,
      closed: XCircle,
    }

const Icon = icons[status]

return (
      <Badge className={`${variants[status]} flex items-center gap-1`}>
        <Icon className="h-3 w-3" />
        {status.replace("_", " ").toUpperCase()}
      </Badge>
    )
  }

return <Badge className={`${colors[priority]} text-xs`}>{priority.toUpperCase()}</Badge>
  }

const handleTicketClick = (ticket: SupportTicket) => {
    setSelectedTicket(ticket)
    setShowTicketDialog(true)
  }

const handleStatusUpdate = async (ticketId: string, newStatus: SupportTicket["status"]) => {
    try {
      setTickets((prev) =>
        prev.map((ticket) =>
          ticket.id === ticketId
            ? {
                ...ticket,
                status: newStatus,
                assignedAdminId: newStatus === "in_progress" ? currentAdmin?.id : ticket.assignedAdminId,
                assignedAdminName:
                  newStatus === "in_progress"
                    ? `${currentAdmin?.firstName} ${currentAdmin?.lastName}`
                    : ticket.assignedAdminName,
                firstResponseAt:
                  newStatus === "in_progress" && !ticket.firstResponseAt ? new Date() : ticket.firstResponseAt,
                resolvedAt: newStatus === "resolved" ? new Date() : ticket.resolvedAt,
                closedAt: newStatus === "closed" ? new Date() : ticket.closedAt,
              }
            : ticket,
        ),
      )

toast.success(`Ticket status updated to ${newStatus.replace("_", " ")}`)
    } catch (error) {
      console.error("Error updating ticket status:", error)
      toast.error("Failed to update ticket status")
    }
  }

const handleSendResponse = async () => {
    if (!selectedTicket || !responseMessage.trim()) return

setIsResponding(true)
    try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 1000))

// Update ticket status to in_progress if it's open
      if (selectedTicket.status === "open") {
        await handleStatusUpdate(selectedTicket.id, "in_progress")
      }

// Clear unread messages
      setTickets((prev) =>
        prev.map((ticket) => (ticket.id === selectedTicket.id ? { ...ticket, unreadMessages: 0 } : ticket)),
      )

setResponseMessage("")
      toast.success("Response sent successfully!")

// In a real app, this would create a chat message or support message
      console.log("[v0] Admin response sent:", responseMessage)
    } catch (error) {
      console.error("Error sending response:", error)
      toast.error("Failed to send response")
    } finally {
      setIsResponding(false)
    }
  }

// Statistics
  const stats = {
    total: tickets.length,
    open: tickets.filter((t) => t.status === "open").length,
    inProgress: tickets.filter((t) => t.status === "in_progress").length,
    priority: tickets.filter((t) => t.ticketType === "priority").length,
    unread: tickets.filter((t) => t.unreadMessages > 0).length,
  }

return (
    <>
      <AdminHeader title="Support Management" description="Manage user support tickets and provide assistance" />

<div className="flex-1 overflow-auto p-6">
        <div className="space-y-6">
          {/* Statistics Cards */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Total Tickets</CardTitle>
                <MessageSquare className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{stats.total}</div>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Open Tickets</CardTitle>
                <AlertCircle className="h-4 w-4 text-red-600" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold text-red-600">{stats.open}</div>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">In Progress</CardTitle>
                <Clock className="h-4 w-4 text-blue-600" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold text-blue-600">{stats.inProgress}</div>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Priority Tickets</CardTitle>
                <Zap className="h-4 w-4 text-orange-600" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold text-orange-600">{stats.priority}</div>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Unread Messages</CardTitle>
                <Badge variant="destructive" className="h-4 w-4 p-0 text-xs">
                  !
                </Badge>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold text-red-600">{stats.unread}</div>
              </CardContent>
            </Card>
          </div>

{/* Filters */}
          <Card>
            <CardHeader>
              <CardTitle>Support Tickets</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="flex flex-col sm:flex-row gap-4 mb-6">
                <div className="relative flex-1">
                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
                  <Input
                    placeholder="Search tickets, users, or descriptions..."
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    className="pl-10"
                  />
                </div>

<Select value={statusFilter} onValueChange={setStatusFilter}>
                  <SelectTrigger className="w-full sm:w-40">
                    <Filter className="h-4 w-4 mr-2" />
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Status</SelectItem>
                    <SelectItem value="open">Open</SelectItem>
                    <SelectItem value="in_progress">In Progress</SelectItem>
                    <SelectItem value="resolved">Resolved</SelectItem>
                    <SelectItem value="closed">Closed</SelectItem>
                  </SelectContent>
                </Select>

<Select value={typeFilter} onValueChange={setTypeFilter}>
                  <SelectTrigger className="w-full sm:w-40">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Types</SelectItem>
                    <SelectItem value="free">Free Support</SelectItem>
                    <SelectItem value="priority">Priority Support</SelectItem>
                  </SelectContent>
                </Select>

<Select value={priorityFilter} onValueChange={setPriorityFilter}>
                  <SelectTrigger className="w-full sm:w-40">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Priority</SelectItem>
                    <SelectItem value="low">Low</SelectItem>
                    <SelectItem value="normal">Normal</SelectItem>
                    <SelectItem value="high">High</SelectItem>
                    <SelectItem value="urgent">Urgent</SelectItem>
                  </SelectContent>
                </Select>
              </div>

{/* Tickets Table */}
              <div className="rounded-md border">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Ticket</TableHead>
                      <TableHead>User</TableHead>
                      <TableHead>Type</TableHead>
                      <TableHead>Priority</TableHead>
                      <TableHead>Status</TableHead>
                      <TableHead>Created</TableHead>
                      <TableHead>Actions</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {filteredTickets.length === 0 ? (
                      <TableRow>
                        <TableCell colSpan={7} className="text-center py-8">
                          <div className="flex flex-col items-center">
                            <MessageSquare className="h-12 w-12 text-muted-foreground mb-4" />
                            <p className="text-muted-foreground">No support tickets found</p>
                          </div>
                        </TableCell>
                      </TableRow>
                    ) : (
                      filteredTickets.map((ticket) => (
                        <TableRow key={ticket.id} className="cursor-pointer hover:bg-muted/50">
                          <TableCell>
                            <div className="flex items-center gap-2">
                              {getTypeIcon(ticket.ticketType)}
                              <div>
                                <p className="font-medium">{ticket.subject}</p>
                                <p className="text-sm text-muted-foreground truncate max-w-xs">{ticket.description}</p>
                                {ticket.unreadMessages > 0 && (
                                  <Badge variant="destructive" className="text-xs mt-1">
                                    {ticket.unreadMessages} unread
                                  </Badge>
                                )}
                              </div>
                            </div>
                          </TableCell>
                          <TableCell>
                            <div className="flex items-center gap-2">
                              <Avatar className="h-8 w-8">
                                <AvatarFallback className="text-xs">
                                  {ticket.userName
                                    .split(" ")
                                    .map((n) => n[0])
                                    .join("")}
                                </AvatarFallback>
                              </Avatar>
                              <div>
                                <p className="font-medium text-sm">{ticket.userName}</p>
                                <p className="text-xs text-muted-foreground">{ticket.userEmail}</p>
                              </div>
                            </div>
                          </TableCell>
                          <TableCell>
                            <div className="flex items-center gap-2">
                              {ticket.ticketType === "priority" ? (
                                <Badge className="bg-orange-100 text-orange-800 text-xs">
                                  Priority (${ticket.paymentAmount.toFixed(2)})
                                </Badge>
                              ) : (
                                <Badge variant="outline" className="text-xs">
                                  Free
                                </Badge>
                              )}
                            </div>
                          </TableCell>
                          <TableCell>{getPriorityBadge(ticket.priority)}</TableCell>
                          <TableCell>{getStatusBadge(ticket.status)}</TableCell>
                          <TableCell>
                            <div className="text-sm">{formatDistanceToNow(ticket.createdAt, { addSuffix: true })}</div>
                          </TableCell>
                          <TableCell>
                            <div className="flex items-center gap-2">
                              <Button variant="outline" size="sm" onClick={() => handleTicketClick(ticket)}>
                                View
                              </Button>
                              {ticket.status === "open" && (
                                <Button
                                  variant="default"
                                  size="sm"
                                  onClick={() => handleStatusUpdate(ticket.id, "in_progress")}
                                >
                                  Take
                                </Button>
                              )}
                            </div>
                          </TableCell>
                        </TableRow>
                      ))
                    )}
                  </TableBody>
                </Table>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>

{/* Ticket Detail Dialog */}
      <Dialog open={showTicketDialog} onOpenChange={setShowTicketDialog}>
        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <MessageSquare className="h-5 w-5" />
              Support Ticket Details
            </DialogTitle>
          </DialogHeader>

{selectedTicket && (
            <div className="space-y-6">
              {/* Ticket Header */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <Card>
                  <CardHeader>
                    <CardTitle className="text-lg">Ticket Information</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-3">
                    <div className="flex items-center gap-2">
                      {getTypeIcon(selectedTicket.ticketType)}
                      <span className="font-medium">{selectedTicket.subject}</span>
                    </div>
                    <div className="flex items-center gap-2">
                      {getStatusBadge(selectedTicket.status)}
                      {getPriorityBadge(selectedTicket.priority)}
                    </div>
                    <div className="text-sm text-muted-foreground">
                      <p>Created: {formatDistanceToNow(selectedTicket.createdAt, { addSuffix: true })}</p>
                      {selectedTicket.firstResponseAt && (
                        <p>
                          First Response: {formatDistanceToNow(selectedTicket.firstResponseAt, { addSuffix: true })}
                        </p>
                      )}
                    </div>
                  </CardContent>
                </Card>

<Card>
                  <CardHeader>
                    <CardTitle className="text-lg">User Information</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-3">
                    <div className="flex items-center gap-3">
                      <Avatar className="h-10 w-10">
                        <AvatarFallback>
                          {selectedTicket.userName
                            .split(" ")
                            .map((n) => n[0])
                            .join("")}
                        </AvatarFallback>
                      </Avatar>
                      <div>
                        <p className="font-medium">{selectedTicket.userName}</p>
                        <p className="text-sm text-muted-foreground">{selectedTicket.userEmail}</p>
                      </div>
                    </div>
                    {selectedTicket.ticketType === "priority" && (
                      <div className="flex items-center gap-2 text-sm">
                        <DollarSign className="h-4 w-4 text-green-600" />
                        <span>Paid ${selectedTicket.paymentAmount.toFixed(2)} for priority support</span>
                      </div>
                    )}
                  </CardContent>
                </Card>
              </div>

{/* Ticket Description */}
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg">Issue Description</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-sm leading-relaxed">{selectedTicket.description}</p>
                </CardContent>
              </Card>

{/* Admin Response */}
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg">Admin Response</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <Textarea
                    placeholder="Type your response to the user..."
                    value={responseMessage}
                    onChange={(e) => setResponseMessage(e.target.value)}
                    rows={4}
                  />

<div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <Select
                        value={selectedTicket.status}
                        onValueChange={(value: SupportTicket["status"]) => handleStatusUpdate(selectedTicket.id, value)}
                      >
                        <SelectTrigger className="w-40">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="open">Open</SelectItem>
                          <SelectItem value="in_progress">In Progress</SelectItem>
                          <SelectItem value="resolved">Resolved</SelectItem>
                          <SelectItem value="closed">Closed</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

<Button onClick={handleSendResponse} disabled={!responseMessage.trim() || isResponding}>
                      {isResponding ? "Sending..." : "Send Response"}
                    </Button>
                  </div>
                </CardContent>
              </Card>

{/* Chat Link */}
              {selectedTicket.chatId && (
                <Card>
                  <CardContent className="p-4">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-2">
                        <MessageSquare className="h-4 w-4 text-blue-600" />
                        <span className="text-sm">This ticket is linked to a chat conversation</span>
                      </div>
                      <Button variant="outline" size="sm" asChild>
                        <a href={`/admin/chat?chatId=${selectedTicket.chatId}`}>View Chat</a>
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              )}
            </div>
          )}
        </DialogContent>
      </Dialog>
    </>
  )
}
[V0_FILE]typescriptreact:file="app/admin/support/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="lib/support.ts" isFixed="true" isQuickEdit="true" isMerged="true"
export interface SupportTicket {
  id: string
  userId: string
  chatId?: string
  ticketType: "free" | "priority"
  subject: string
  description: string
  priority: "low" | "normal" | "high" | "urgent"
  status: "open" | "in_progress" | "resolved" | "closed"
  assignedAdminId?: string
  assignedAdminName?: string
  paymentAmount: number
  paymentTransactionId?: string
  responseTimeHours: number
  createdAt: Date
  firstResponseAt?: Date
  resolvedAt?: Date
  closedAt?: Date
  unreadMessages?: number
}

export interface SupportMessage {
  id: string
  ticketId: string
  senderId: string
  message: string
  isAdminResponse: boolean
  attachments: string[]
  createdAt: Date
}

export async function createSupportTicket(ticketData: {
  subject: string
  description: string
  priority: string
  ticketType: "free" | "priority"
  chatId?: string
}): Promise<SupportTicket> {
  try {
    const response = await fetch("/api/support/tickets", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(ticketData),
    })

if (!response.ok) {
      throw new Error("Failed to create support ticket")
    }

return await response.json()
  } catch (error) {
    console.error("Error creating support ticket:", error)
    throw error
  }
}

export async function getSupportTickets(filters?: {
  status?: string
  ticketType?: string
  userId?: string
}): Promise<SupportTicket[]> {
  try {
    const params = new URLSearchParams()
    if (filters?.status) params.append("status", filters.status)
    if (filters?.ticketType) params.append("ticketType", filters.ticketType)
    if (filters?.userId) params.append("userId", filters.userId)

const response = await fetch(`/api/support/tickets?${params}`)
    if (!response.ok) {
      throw new Error("Failed to fetch support tickets")
    }

return await response.json()
  } catch (error) {
    console.error("Error fetching support tickets:", error)
    throw error
  }
}

export const getStoredSupportTickets = (): SupportTicket[] => {
  try {
    const stored = localStorage.getItem("support-tickets")
    const tickets = stored ? JSON.parse(stored) : []

// Convert date strings back to Date objects
    return tickets.map((ticket: any) => ({
      ...ticket,
      createdAt: new Date(ticket.createdAt),
      firstResponseAt: ticket.firstResponseAt ? new Date(ticket.firstResponseAt) : undefined,
      resolvedAt: ticket.resolvedAt ? new Date(ticket.resolvedAt) : undefined,
      closedAt: ticket.closedAt ? new Date(ticket.closedAt) : undefined,
    }))
  } catch (error) {
    console.error("[v0] Error loading support tickets:", error)
    return []
  }
}

export const saveSupportTicket = async (ticket: SupportTicket): Promise<SupportTicket> => {
  const tickets = getStoredSupportTickets()
  const existingIndex = tickets.findIndex((t) => t.id === ticket.id)

if (existingIndex >= 0) {
    tickets[existingIndex] = ticket
  } else {
    tickets.push(ticket)
  }

localStorage.setItem("support-tickets", JSON.stringify(tickets))
  console.log("[v0] Support ticket saved:", ticket.id)
  return ticket
}

export const createSupportTicketFromChat = async (data: {
  userId: string
  userName: string
  userEmail: string
  chatId: string
  subject: string
  description: string
  priority: string
  ticketType: "free" | "priority"
}): Promise<SupportTicket> => {
  const ticket: SupportTicket = {
    id: `ticket_${Date.now()}`,
    userId: data.userId,
    userName: data.userName,
    userEmail: data.userEmail,
    chatId: data.chatId,
    ticketType: data.ticketType,
    subject: data.subject,
    description: data.description,
    priority: data.priority as SupportTicket["priority"],
    status: "open",
    paymentAmount: data.ticketType === "priority" ? 0.2 : 0,
    responseTimeHours: data.ticketType === "priority" ? 1 : 48,
    createdAt: new Date(),
    unreadMessages: 1,
  }

return await saveSupportTicket(ticket)
}

export const updateSupportTicketStatus = async (
  ticketId: string,
  status: SupportTicket["status"],
  adminId?: string,
  adminName?: string,
): Promise<SupportTicket> => {
  const tickets = getStoredSupportTickets()
  const ticketIndex = tickets.findIndex((t) => t.id === ticketId)

if (ticketIndex === -1) {
    throw new Error("Support ticket not found")
  }

const ticket = tickets[ticketIndex]
  const updatedTicket: SupportTicket = {
    ...ticket,
    status,
    assignedAdminId: status === "in_progress" ? adminId : ticket.assignedAdminId,
    assignedAdminName: status === "in_progress" ? adminName : ticket.assignedAdminName,
    firstResponseAt: status === "in_progress" && !ticket.firstResponseAt ? new Date() : ticket.firstResponseAt,
    resolvedAt: status === "resolved" ? new Date() : ticket.resolvedAt,
    closedAt: status === "closed" ? new Date() : ticket.closedAt,
  }

return await saveSupportTicket(updatedTicket)
}

export function calculateSupportCost(ticketType: "free" | "priority"): number {
  return ticketType === "priority" ? 0.2 : 0.0
}

export function getExpectedResponseTime(ticketType: "free" | "priority"): string {
  return ticketType === "priority" ? "Within 1 hour" : "24-72 hours"
}
[V0_FILE]typescript:file="lib/categories.ts" isFixed="true" isQuickEdit="true" isMerged="true"
export interface Category {
  id: string
  name: string
  slug: string
  description?: string
  icon?: string
  thumbnail?: string
  minimumPayment: number
  sortOrder: number
  isActive: boolean
  createdAt: string
  updatedAt?: string
}

export interface Subcategory {
  id: string
  categoryId: string
  name: string
  slug: string
  description?: string
  thumbnail?: string
  minimumPayment: number
  sortOrder: number
  isActive: boolean
  createdAt: string
  updatedAt?: string
}

export interface CategoryWithSubcategories extends Category {
  subcategories: Subcategory[]
}

const CATEGORIES_STORAGE_KEY = "marketplace-categories"
const SUBCATEGORIES_STORAGE_KEY = "marketplace-subcategories"

// Mock data for development
const mockCategories: Category[] = [
  {
    id: "1",
    name: "Social Media",
    slug: "social-media",
    description: "Social media engagement and promotion tasks",
    icon: "share-2",
    thumbnail: "/placeholder.svg?height=200&width=300&text=Social+Media",
    minimumPayment: 0.5,
    sortOrder: 1,
    isActive: true,
    createdAt: "2024-01-01T00:00:00Z",
  },
  {
    id: "2",
    name: "Content Creation",
    slug: "content-creation",
    description: "Writing, video, and creative content tasks",
    icon: "edit-3",
    thumbnail: "/placeholder.svg?height=200&width=300&text=Content+Creation",
    minimumPayment: 1.0,
    sortOrder: 2,
    isActive: true,
    createdAt: "2024-01-01T00:00:00Z",
  },
  {
    id: "3",
    name: "Data Entry",
    slug: "data-entry",
    description: "Data collection and entry tasks",
    icon: "database",
    thumbnail: "/placeholder.svg?height=200&width=300&text=Data+Entry",
    minimumPayment: 0.25,
    sortOrder: 3,
    isActive: true,
    createdAt: "2024-01-01T00:00:00Z",
  },
  {
    id: "4",
    name: "Testing & Reviews",
    slug: "testing-reviews",
    description: "App testing, website reviews, and feedback",
    icon: "star",
    thumbnail: "/placeholder.svg?height=200&width=300&text=Testing+Reviews",
    minimumPayment: 0.75,
    sortOrder: 4,
    isActive: true,
    createdAt: "2024-01-01T00:00:00Z",
  },
]

const mockSubcategories: Subcategory[] = [
  {
    id: "1",
    categoryId: "1",
    name: "Facebook Tasks",
    slug: "facebook",
    description: "Facebook likes, shares, follows, and engagement",
    minimumPayment: 0.5,
    sortOrder: 1,
    isActive: true,
    createdAt: "2024-01-01T00:00:00Z",
  },
  {
    id: "2",
    categoryId: "1",
    name: "YouTube Tasks",
    slug: "youtube",
    description: "YouTube views, likes, subscribes, and comments",
    minimumPayment: 0.75,
    sortOrder: 2,
    isActive: true,
    createdAt: "2024-01-01T00:00:00Z",
  },
  {
    id: "3",
    categoryId: "1",
    name: "TikTok Tasks",
    slug: "tiktok",
    description: "TikTok likes, follows, views, and engagement",
    minimumPayment: 0.6,
    sortOrder: 3,
    isActive: true,
    createdAt: "2024-01-01T00:00:00Z",
  },
  {
    id: "4",
    categoryId: "1",
    name: "Instagram Tasks",
    slug: "instagram",
    description: "Instagram likes, follows, and story views",
    minimumPayment: 0.65,
    sortOrder: 4,
    isActive: true,
    createdAt: "2024-01-01T00:00:00Z",
  },
  {
    id: "5",
    categoryId: "2",
    name: "Article Writing",
    slug: "article-writing",
    description: "Short articles and blog posts",
    minimumPayment: 5.0,
    sortOrder: 1,
    isActive: true,
    createdAt: "2024-01-01T00:00:00Z",
  },
  {
    id: "6",
    categoryId: "3",
    name: "Data Collection",
    slug: "data-collection",
    description: "Gathering information from websites",
    minimumPayment: 0.5,
    sortOrder: 1,
    isActive: true,
    createdAt: "2024-01-01T00:00:00Z",
  },
]

const getStoredCategories = (): Category[] => {
  if (typeof window === "undefined") return mockCategories
  try {
    const stored = localStorage.getItem(CATEGORIES_STORAGE_KEY)
    return stored ? JSON.parse(stored) : mockCategories
  } catch {
    return mockCategories
  }
}

const getStoredSubcategories = (): Subcategory[] => {
  if (typeof window === "undefined") return mockSubcategories
  try {
    const stored = localStorage.getItem(SUBCATEGORIES_STORAGE_KEY)
    return stored ? JSON.parse(stored) : mockSubcategories
  } catch {
    return mockSubcategories
  }
}

const saveCategories = (categories: Category[]): void => {
  if (typeof window === "undefined") return
  try {
    localStorage.setItem(CATEGORIES_STORAGE_KEY, JSON.stringify(categories))
  } catch (error) {
    console.error("Failed to save categories:", error)
  }
}

const saveSubcategories = (subcategories: Subcategory[]): void => {
  if (typeof window === "undefined") return
  try {
    localStorage.setItem(SUBCATEGORIES_STORAGE_KEY, JSON.stringify(subcategories))
  } catch (error) {
    console.error("Failed to save subcategories:", error)
  }
}

// API Functions
export async function getAllCategories(): Promise<Category[]> {
  await new Promise((resolve) => setTimeout(resolve, 300))
  return getStoredCategories()
    .filter((cat) => cat.isActive)
    .sort((a, b) => a.sortOrder - b.sortOrder)
}

export async function getAllSubcategories(): Promise<Subcategory[]> {
  await new Promise((resolve) => setTimeout(resolve, 300))
  return getStoredSubcategories()
    .filter((sub) => sub.isActive)
    .sort((a, b) => a.sortOrder - b.sortOrder)
}

export async function getCategoriesWithSubcategories(): Promise<CategoryWithSubcategories[]> {
  await new Promise((resolve) => setTimeout(resolve, 300))

const categories = getStoredCategories()
    .filter((cat) => cat.isActive)
    .sort((a, b) => a.sortOrder - b.sortOrder)
  const subcategories = getStoredSubcategories()
    .filter((sub) => sub.isActive)
    .sort((a, b) => a.sortOrder - b.sortOrder)

return categories.map((category) => ({
    ...category,
    subcategories: subcategories.filter((sub) => sub.categoryId === category.id),
  }))
}

export async function getCategoryById(id: string): Promise<Category | null> {
  await new Promise((resolve) => setTimeout(resolve, 200))
  const categories = getStoredCategories()
  return categories.find((cat) => cat.id === id) || null
}

export async function getSubcategoryById(id: string): Promise<Subcategory | null> {
  await new Promise((resolve) => setTimeout(resolve, 200))
  const subcategories = getStoredSubcategories()
  return subcategories.find((sub) => sub.id === id) || null
}

export async function getSubcategoriesByCategory(categoryId: string): Promise<Subcategory[]> {
  await new Promise((resolve) => setTimeout(resolve, 200))
  const subcategories = getStoredSubcategories()
  return subcategories
    .filter((sub) => sub.categoryId === categoryId && sub.isActive)
    .sort((a, b) => a.sortOrder - b.sortOrder)
}

// Admin functions
export async function createCategory(data: Omit<Category, "id" | "createdAt" | "updatedAt">): Promise<Category> {
  await new Promise((resolve) => setTimeout(resolve, 300))

const newCategory: Category = {
    ...data,
    id: Date.now().toString(),
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  }

const categories = getStoredCategories()
  categories.push(newCategory)
  saveCategories(categories)

return newCategory
}

export async function updateCategory(id: string, updates: Partial<Category>): Promise<Category> {
  await new Promise((resolve) => setTimeout(resolve, 300))

const categories = getStoredCategories()
  const index = categories.findIndex((cat) => cat.id === id)
  if (index === -1) throw new Error("Category not found")

const updatedCategory = {
    ...categories[index],
    ...updates,
    updatedAt: new Date().toISOString(),
  }

categories[index] = updatedCategory
  saveCategories(categories)

return updatedCategory
}

export async function deleteCategory(id: string): Promise<void> {
  await new Promise((resolve) => setTimeout(resolve, 300))

const categories = getStoredCategories()
  const index = categories.findIndex((cat) => cat.id === id)
  if (index === -1) throw new Error("Category not found")

// Soft delete by setting isActive to false
  categories[index] = {
    ...categories[index],
    isActive: false,
    updatedAt: new Date().toISOString(),
  }

saveCategories(categories)
}

export async function createSubcategory(
  data: Omit<Subcategory, "id" | "createdAt" | "updatedAt">,
): Promise<Subcategory> {
  await new Promise((resolve) => setTimeout(resolve, 300))

const newSubcategory: Subcategory = {
    ...data,
    id: Date.now().toString(),
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  }

const subcategories = getStoredSubcategories()
  subcategories.push(newSubcategory)
  saveSubcategories(subcategories)

return newSubcategory
}

export async function updateSubcategory(id: string, updates: Partial<Subcategory>): Promise<Subcategory> {
  await new Promise((resolve) => setTimeout(resolve, 300))

const subcategories = getStoredSubcategories()
  const index = subcategories.findIndex((sub) => sub.id === id)
  if (index === -1) throw new Error("Subcategory not found")

const updatedSubcategory = {
    ...subcategories[index],
    ...updates,
    updatedAt: new Date().toISOString(),
  }

subcategories[index] = updatedSubcategory
  saveSubcategories(subcategories)

return updatedSubcategory
}

export async function deleteSubcategory(id: string): Promise<void> {
  await new Promise((resolve) => setTimeout(resolve, 300))

const subcategories = getStoredSubcategories()
  const index = subcategories.findIndex((sub) => sub.id === id)
  if (index === -1) throw new Error("Subcategory not found")

// Soft delete by setting isActive to false
  subcategories[index] = {
    ...subcategories[index],
    isActive: false,
    updatedAt: new Date().toISOString(),
  }

saveSubcategories(subcategories)
}

export async function getMinimumPayment(subcategoryId: string): Promise<number> {
  const subcategory = await getSubcategoryById(subcategoryId)
  if (subcategory) return subcategory.minimumPayment

// Fallback to category minimum if subcategory not found
  const subcategories = getStoredSubcategories()
  const sub = subcategories.find((s) => s.id === subcategoryId)
  if (sub) {
    const category = await getCategoryById(sub.categoryId)
    return category?.minimumPayment || 0.1
  }

return 0.1 // Default minimum
}

export async function getCategoryThumbnail(categoryId: string): Promise<string | null> {
  const category = await getCategoryById(categoryId)
  return category?.thumbnail || null
}

export async function getEffectiveThumbnail(subcategoryId: string): Promise<string | null> {
  const subcategory = await getSubcategoryById(subcategoryId)
  if (!subcategory) return null

// Return subcategory thumbnail if it exists
  if (subcategory.thumbnail) {
    return subcategory.thumbnail
  }

// Fallback to parent category thumbnail
  const category = await getCategoryById(subcategory.categoryId)
  return category?.thumbnail || null
}
[V0_FILE]typescriptreact:file="app/admin/categories/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { DashboardHeader } from "@/components/dashboard/dashboard-header"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
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 { Badge } from "@/components/ui/badge"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { toast } from "sonner"
import { Plus, Edit, Trash2, DollarSign, Hash, Folder, FolderOpen, ImageIcon, Upload } from "lucide-react"
import Image from "next/image"
import {
  getCategoriesWithSubcategories,
  createCategory,
  updateCategory,
  deleteCategory,
  createSubcategory,
  updateSubcategory,
  deleteSubcategory,
  type CategoryWithSubcategories,
  type Category,
  type Subcategory,
} from "@/lib/categories"

export default function AdminCategoriesPage() {
  const [categories, setCategories] = useState<CategoryWithSubcategories[]>([])
  const [loading, setLoading] = useState(true)
  const [editingCategory, setEditingCategory] = useState<Category | null>(null)
  const [editingSubcategory, setEditingSubcategory] = useState<Subcategory | null>(null)
  const [selectedCategoryId, setSelectedCategoryId] = useState<string>("")
  const [categoryDialogOpen, setCategoryDialogOpen] = useState(false)
  const [subcategoryDialogOpen, setSubcategoryDialogOpen] = useState(false)

const [categoryForm, setCategoryForm] = useState({
    name: "",
    slug: "",
    description: "",
    icon: "",
    thumbnail: "",
    minimumPayment: "0.10",
    sortOrder: "0",
  })

const [subcategoryForm, setSubcategoryForm] = useState({
    categoryId: "",
    name: "",
    slug: "",
    description: "",
    thumbnail: "",
    minimumPayment: "0.10",
    sortOrder: "0",
  })

useEffect(() => {
    loadCategories()
  }, [])

const loadCategories = async () => {
    try {
      setLoading(true)
      const data = await getCategoriesWithSubcategories()
      setCategories(data)
    } catch (error) {
      console.error("Failed to load categories:", error)
      toast.error("Failed to load categories")
    } finally {
      setLoading(false)
    }
  }

const handleCreateCategory = async () => {
    try {
      await createCategory({
        name: categoryForm.name,
        slug: categoryForm.slug,
        description: categoryForm.description,
        icon: categoryForm.icon,
        thumbnail: categoryForm.thumbnail,
        minimumPayment: Number.parseFloat(categoryForm.minimumPayment),
        sortOrder: Number.parseInt(categoryForm.sortOrder),
        isActive: true,
      })

toast.success("Category created successfully")
      setCategoryDialogOpen(false)
      setCategoryForm({
        name: "",
        slug: "",
        description: "",
        icon: "",
        thumbnail: "",
        minimumPayment: "0.10",
        sortOrder: "0",
      })
      loadCategories()
    } catch (error) {
      console.error("Failed to create category:", error)
      toast.error("Failed to create category")
    }
  }

const handleUpdateCategory = async () => {
    if (!editingCategory) return

try {
      await updateCategory(editingCategory.id, {
        name: categoryForm.name,
        slug: categoryForm.slug,
        description: categoryForm.description,
        icon: categoryForm.icon,
        thumbnail: categoryForm.thumbnail,
        minimumPayment: Number.parseFloat(categoryForm.minimumPayment),
        sortOrder: Number.parseInt(categoryForm.sortOrder),
      })

toast.success("Category updated successfully")
      setCategoryDialogOpen(false)
      setEditingCategory(null)
      setCategoryForm({
        name: "",
        slug: "",
        description: "",
        icon: "",
        thumbnail: "",
        minimumPayment: "0.10",
        sortOrder: "0",
      })
      loadCategories()
    } catch (error) {
      console.error("Failed to update category:", error)
      toast.error("Failed to update category")
    }
  }

const handleDeleteCategory = async (id: string) => {
    if (!confirm("Are you sure you want to delete this category?")) return

try {
      await deleteCategory(id)
      toast.success("Category deleted successfully")
      loadCategories()
    } catch (error) {
      console.error("Failed to delete category:", error)
      toast.error("Failed to delete category")
    }
  }

const handleCreateSubcategory = async () => {
    try {
      await createSubcategory({
        categoryId: subcategoryForm.categoryId,
        name: subcategoryForm.name,
        slug: subcategoryForm.slug,
        description: subcategoryForm.description,
        thumbnail: subcategoryForm.thumbnail || undefined,
        minimumPayment: Number.parseFloat(subcategoryForm.minimumPayment),
        sortOrder: Number.parseInt(subcategoryForm.sortOrder),
        isActive: true,
      })

toast.success("Subcategory created successfully")
      setSubcategoryDialogOpen(false)
      setSubcategoryForm({
        categoryId: "",
        name: "",
        slug: "",
        description: "",
        thumbnail: "",
        minimumPayment: "0.10",
        sortOrder: "0",
      })
      loadCategories()
    } catch (error) {
      console.error("Failed to create subcategory:", error)
      toast.error("Failed to create subcategory")
    }
  }

const handleUpdateSubcategory = async () => {
    if (!editingSubcategory) return

try {
      await updateSubcategory(editingSubcategory.id, {
        name: subcategoryForm.name,
        slug: subcategoryForm.slug,
        description: subcategoryForm.description,
        thumbnail: subcategoryForm.thumbnail || undefined,
        minimumPayment: Number.parseFloat(subcategoryForm.minimumPayment),
        sortOrder: Number.parseInt(subcategoryForm.sortOrder),
      })

toast.success("Subcategory updated successfully")
      setSubcategoryDialogOpen(false)
      setEditingSubcategory(null)
      setSubcategoryForm({
        categoryId: "",
        name: "",
        slug: "",
        description: "",
        thumbnail: "",
        minimumPayment: "0.10",
        sortOrder: "0",
      })
      loadCategories()
    } catch (error) {
      console.error("Failed to update subcategory:", error)
      toast.error("Failed to update subcategory")
    }
  }

const handleDeleteSubcategory = async (id: string) => {
    if (!confirm("Are you sure you want to delete this subcategory?")) return

try {
      await deleteSubcategory(id)
      toast.success("Subcategory deleted successfully")
      loadCategories()
    } catch (error) {
      console.error("Failed to delete subcategory:", error)
      toast.error("Failed to delete subcategory")
    }
  }

const startEditCategory = (category: Category) => {
    setEditingCategory(category)
    setCategoryForm({
      name: category.name,
      slug: category.slug,
      description: category.description || "",
      icon: category.icon || "",
      thumbnail: category.thumbnail || "",
      minimumPayment: category.minimumPayment.toString(),
      sortOrder: category.sortOrder.toString(),
    })
    setCategoryDialogOpen(true)
  }

const startEditSubcategory = (subcategory: Subcategory) => {
    setEditingSubcategory(subcategory)
    setSubcategoryForm({
      categoryId: subcategory.categoryId,
      name: subcategory.name,
      slug: subcategory.slug,
      description: subcategory.description || "",
      thumbnail: subcategory.thumbnail || "",
      minimumPayment: subcategory.minimumPayment.toString(),
      sortOrder: subcategory.sortOrder.toString(),
    })
    setSubcategoryDialogOpen(true)
  }

const convertBlobToStorage = async (blobUrl: string, filename: string): Promise<string> => {
    try {
      // Fetch the blob data
      const response = await fetch(blobUrl)
      const blob = await response.blob()

// Create a File object
      const file = new File([blob], filename, { type: blob.type })

// Upload to Vercel Blob storage (simulated - in real app would use actual Vercel Blob API)
      // For now, we'll use a more permanent blob URL format
      const permanentUrl = `https://blob.vercel-storage.com/thumbnails/${Date.now()}-${filename}`

// Store the mapping in localStorage for persistence
      const thumbnailStorage = JSON.parse(localStorage.getItem("thumbnailStorage") || "{}")
      thumbnailStorage[blobUrl] = permanentUrl
      localStorage.setItem("thumbnailStorage", JSON.stringify(thumbnailStorage))

return permanentUrl
    } catch (error) {
      console.error("Failed to convert blob to storage:", error)
      return blobUrl // Fallback to original blob URL
    }
  }

const handleThumbnailUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0]
    if (file) {
      // Create a blob URL for immediate preview
      const blobUrl = URL.createObjectURL(file)

// Convert to permanent storage
      const permanentUrl = await convertBlobToStorage(blobUrl, file.name)

setCategoryForm((prev) => ({ ...prev, thumbnail: permanentUrl }))
      toast.success("Thumbnail uploaded and saved successfully")
    }
  }

const handleSubcategoryThumbnailUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0]
    if (file) {
      // Create a blob URL for immediate preview
      const blobUrl = URL.createObjectURL(file)

// Convert to permanent storage
      const permanentUrl = await convertBlobToStorage(blobUrl, file.name)

setSubcategoryForm((prev) => ({ ...prev, thumbnail: permanentUrl }))
      toast.success("Subcategory thumbnail uploaded and saved successfully")
    }
  }

const resetCategoryDialog = () => {
    setEditingCategory(null)
    setCategoryForm({
      name: "",
      slug: "",
      description: "",
      icon: "",
      thumbnail: "",
      minimumPayment: "0.10",
      sortOrder: "0",
    })
    setCategoryDialogOpen(false)
  }

const resetSubcategoryDialog = () => {
    setEditingSubcategory(null)
    setSubcategoryForm({
      categoryId: "",
      name: "",
      slug: "",
      description: "",
      thumbnail: "",
      minimumPayment: "0.10",
      sortOrder: "0",
    })
    setSubcategoryDialogOpen(false)
  }

if (loading) {
    return (
      <>
        <DashboardHeader title="Category Management" description="Manage job categories and subcategories" />
        <div className="flex items-center justify-center h-64">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
        </div>
      </>
    )
  }

return (
    <>
      <DashboardHeader title="Category Management" description="Manage job categories and subcategories" />

<div className="max-w-6xl mx-auto p-6 space-y-6">
        {/* Action Buttons */}
        <div className="flex flex-col sm:flex-row gap-4">
          <Dialog open={categoryDialogOpen} onOpenChange={setCategoryDialogOpen}>
            <DialogTrigger asChild>
              <Button className="flex items-center space-x-2">
                <Plus className="h-4 w-4" />
                <span>Add Category</span>
              </Button>
            </DialogTrigger>
            <DialogContent className="max-w-2xl">
              <DialogHeader>
                <DialogTitle>{editingCategory ? "Edit Category" : "Create New Category"}</DialogTitle>
              </DialogHeader>
              <div className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="cat-name">Name</Label>
                    <Input
                      id="cat-name"
                      value={categoryForm.name}
                      onChange={(e) => setCategoryForm((prev) => ({ ...prev, name: e.target.value }))}
                      placeholder="Social Media"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="cat-slug">Slug</Label>
                    <Input
                      id="cat-slug"
                      value={categoryForm.slug}
                      onChange={(e) => setCategoryForm((prev) => ({ ...prev, slug: e.target.value }))}
                      placeholder="social-media"
                    />
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="cat-description">Description</Label>
                  <Textarea
                    id="cat-description"
                    value={categoryForm.description}
                    onChange={(e) => setCategoryForm((prev) => ({ ...prev, description: e.target.value }))}
                    placeholder="Social media engagement and promotion tasks"
                  />
                </div>

<div className="space-y-2">
                  <Label>Thumbnail</Label>
                  <div className="space-y-3">
                    {/* URL Input */}
                    <div className="flex gap-2">
                      <Input
                        id="cat-thumbnail"
                        value={categoryForm.thumbnail}
                        onChange={(e) => setCategoryForm((prev) => ({ ...prev, thumbnail: e.target.value }))}
                        placeholder="https://example.com/image.jpg or /placeholder.svg?text=Category"
                      />
                      <Button
                        type="button"
                        variant="outline"
                        onClick={() =>
                          setCategoryForm((prev) => ({
                            ...prev,
                            thumbnail: `/placeholder.svg?height=200&width=300&text=${encodeURIComponent(prev.name || "Category")}`,
                          }))
                        }
                      >
                        <ImageIcon className="h-4 w-4" />
                      </Button>
                    </div>

{/* File Upload */}
                    <div className="flex items-center gap-2">
                      <span className="text-sm text-muted-foreground">Or upload from PC:</span>
                      <Label htmlFor="thumbnail-upload" className="cursor-pointer">
                        <Button type="button" variant="outline" size="sm" asChild>
                          <span className="flex items-center gap-2">
                            <Upload className="h-4 w-4" />
                            Choose File
                          </span>
                        </Button>
                        <Input
                          id="thumbnail-upload"
                          type="file"
                          accept="image/*"
                          onChange={handleThumbnailUpload}
                          className="hidden"
                        />
                      </Label>
                    </div>

{/* Preview */}
                    {categoryForm.thumbnail && (
                      <div className="mt-2">
                        <Image
                          src={categoryForm.thumbnail || "/placeholder.svg"}
                          alt="Category thumbnail preview"
                          width={150}
                          height={100}
                          className="rounded-lg border object-cover"
                        />
                      </div>
                    )}
                  </div>
                </div>

<div className="grid grid-cols-3 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="cat-icon">Icon</Label>
                    <Input
                      id="cat-icon"
                      value={categoryForm.icon}
                      onChange={(e) => setCategoryForm((prev) => ({ ...prev, icon: e.target.value }))}
                      placeholder="share-2"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="cat-min-payment">Min Payment ($)</Label>
                    <Input
                      id="cat-min-payment"
                      type="number"
                      step="0.01"
                      value={categoryForm.minimumPayment}
                      onChange={(e) => setCategoryForm((prev) => ({ ...prev, minimumPayment: e.target.value }))}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="cat-sort">Sort Order</Label>
                    <Input
                      id="cat-sort"
                      type="number"
                      value={categoryForm.sortOrder}
                      onChange={(e) => setCategoryForm((prev) => ({ ...prev, sortOrder: e.target.value }))}
                    />
                  </div>
                </div>

<div className="flex justify-end space-x-2">
                  <Button variant="outline" onClick={resetCategoryDialog}>
                    Cancel
                  </Button>
                  <Button onClick={editingCategory ? handleUpdateCategory : handleCreateCategory}>
                    {editingCategory ? "Update" : "Create"}
                  </Button>
                </div>
              </div>
            </DialogContent>
          </Dialog>

<Dialog open={subcategoryDialogOpen} onOpenChange={setSubcategoryDialogOpen}>
            <DialogTrigger asChild>
              <Button variant="outline" className="flex items-center space-x-2 bg-transparent">
                <Plus className="h-4 w-4" />
                <span>Add Subcategory</span>
              </Button>
            </DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>{editingSubcategory ? "Edit Subcategory" : "Create New Subcategory"}</DialogTitle>
              </DialogHeader>
              <div className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="sub-category">Parent Category</Label>
                  <Select
                    value={subcategoryForm.categoryId}
                    onValueChange={(value) => setSubcategoryForm((prev) => ({ ...prev, categoryId: value }))}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Select parent category" />
                    </SelectTrigger>
                    <SelectContent>
                      {categories.map((category) => (
                        <SelectItem key={category.id} value={category.id}>
                          {category.name}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

<div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="sub-name">Name</Label>
                    <Input
                      id="sub-name"
                      value={subcategoryForm.name}
                      onChange={(e) => setSubcategoryForm((prev) => ({ ...prev, name: e.target.value }))}
                      placeholder="Facebook Tasks"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="sub-slug">Slug</Label>
                    <Input
                      id="sub-slug"
                      value={subcategoryForm.slug}
                      onChange={(e) => setSubcategoryForm((prev) => ({ ...prev, slug: e.target.value }))}
                      placeholder="facebook"
                    />
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="sub-description">Description</Label>
                  <Textarea
                    id="sub-description"
                    value={subcategoryForm.description}
                    onChange={(e) => setSubcategoryForm((prev) => ({ ...prev, description: e.target.value }))}
                    placeholder="Facebook likes, shares, follows, and engagement"
                  />
                </div>

<div className="space-y-2">
                  <Label>Thumbnail (Optional)</Label>
                  <p className="text-xs text-muted-foreground">
                    If no thumbnail is provided, the parent category's thumbnail will be used.
                  </p>
                  <div className="space-y-3">
                    {/* URL Input */}
                    <div className="flex gap-2">
                      <Input
                        id="sub-thumbnail"
                        value={subcategoryForm.thumbnail}
                        onChange={(e) => setSubcategoryForm((prev) => ({ ...prev, thumbnail: e.target.value }))}
                        placeholder="https://example.com/image.jpg or /placeholder.svg?text=Subcategory"
                      />
                      <Button
                        type="button"
                        variant="outline"
                        onClick={() =>
                          setSubcategoryForm((prev) => ({
                            ...prev,
                            thumbnail: `/placeholder.svg?height=200&width=300&text=${encodeURIComponent(prev.name || "Subcategory")}`,
                          }))
                        }
                      >
                        <ImageIcon className="h-4 w-4" />
                      </Button>
                    </div>

{/* File Upload */}
                    <div className="flex items-center gap-2">
                      <span className="text-sm text-muted-foreground">Or upload from PC:</span>
                      <Label htmlFor="sub-thumbnail-upload" className="cursor-pointer">
                        <Button type="button" variant="outline" size="sm" asChild>
                          <span className="flex items-center gap-2">
                            <Upload className="h-4 w-4" />
                            Choose File
                          </span>
                        </Button>
                        <Input
                          id="sub-thumbnail-upload"
                          type="file"
                          accept="image/*"
                          onChange={handleSubcategoryThumbnailUpload}
                          className="hidden"
                        />
                      </Label>
                    </div>

{/* Preview */}
                    {subcategoryForm.thumbnail && (
                      <div className="mt-2">
                        <Image
                          src={subcategoryForm.thumbnail || "/placeholder.svg"}
                          alt="Subcategory thumbnail preview"
                          width={150}
                          height={100}
                          className="rounded-lg border object-cover"
                        />
                      </div>
                    )}

{/* Show parent category thumbnail as fallback preview */}
                    {!subcategoryForm.thumbnail && subcategoryForm.categoryId && (
                      <div className="mt-2">
                        <p className="text-xs text-muted-foreground mb-2">Will use parent category thumbnail:</p>
                        {(() => {
                          const parentCategory = categories.find((cat) => cat.id === subcategoryForm.categoryId)
                          return parentCategory?.thumbnail ? (
                            <Image
                              src={parentCategory.thumbnail || "/placeholder.svg"}
                              alt="Parent category thumbnail (fallback)"
                              width={150}
                              height={100}
                              className="rounded-lg border object-cover opacity-60"
                            />
                          ) : (
                            <div className="w-[150px] h-[100px] bg-muted rounded-lg border flex items-center justify-center opacity-60">
                              <ImageIcon className="h-6 w-6 text-muted-foreground" />
                            </div>
                          )
                        })()}
                      </div>
                    )}
                  </div>
                </div>

<div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="sub-min-payment">Min Payment ($)</Label>
                    <Input
                      id="sub-min-payment"
                      type="number"
                      step="0.01"
                      value={subcategoryForm.minimumPayment}
                      onChange={(e) => setSubcategoryForm((prev) => ({ ...prev, minimumPayment: e.target.value }))}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="sub-sort">Sort Order</Label>
                    <Input
                      id="sub-sort"
                      type="number"
                      value={subcategoryForm.sortOrder}
                      onChange={(e) => setSubcategoryForm((prev) => ({ ...prev, sortOrder: e.target.value }))}
                    />
                  </div>
                </div>

<div className="flex justify-end space-x-2">
                  <Button variant="outline" onClick={resetSubcategoryDialog}>
                    Cancel
                  </Button>
                  <Button onClick={editingSubcategory ? handleUpdateSubcategory : handleCreateSubcategory}>
                    {editingSubcategory ? "Update" : "Create"}
                  </Button>
                </div>
              </div>
            </DialogContent>
          </Dialog>
        </div>

{/* Categories List */}
        <div className="space-y-4">
          {categories.map((category) => (
            <Card key={category.id}>
              <CardHeader>
                <div className="flex items-center justify-between">
                  <div className="flex items-center space-x-3">
                    <div className="relative">
                      {category.thumbnail ? (
                        <Image
                          src={category.thumbnail || "/placeholder.svg"}
                          alt={category.name}
                          width={60}
                          height={40}
                          className="rounded-lg border object-cover"
                        />
                      ) : (
                        <div className="p-2 bg-primary/10 rounded-lg">
                          <Folder className="h-5 w-5 text-primary" />
                        </div>
                      )}
                    </div>
                    <div>
                      <CardTitle className="text-lg">{category.name}</CardTitle>
                      <p className="text-sm text-muted-foreground">{category.description}</p>
                    </div>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Badge variant="secondary" className="flex items-center space-x-1">
                      <DollarSign className="h-3 w-3" />
                      <span>${category.minimumPayment}</span>
                    </Badge>
                    <Badge variant="outline" className="flex items-center space-x-1">
                      <Hash className="h-3 w-3" />
                      <span>{category.sortOrder}</span>
                    </Badge>
                    <Button variant="ghost" size="sm" onClick={() => startEditCategory(category)}>
                      <Edit className="h-4 w-4" />
                    </Button>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => handleDeleteCategory(category.id)}
                      className="text-destructive hover:text-destructive"
                    >
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
              </CardHeader>

{category.subcategories.length > 0 && (
                <CardContent>
                  <div className="space-y-2">
                    <h4 className="text-sm font-medium text-muted-foreground mb-3">Subcategories</h4>
                    <div className="grid gap-2">
                      {category.subcategories.map((subcategory) => (
                        <div
                          key={subcategory.id}
                          className="flex items-center justify-between p-3 bg-muted/50 rounded-lg"
                        >
                          <div className="flex items-center space-x-3">
                            <div className="relative">
                              {subcategory.thumbnail || category.thumbnail ? (
                                <Image
                                  src={subcategory.thumbnail || category.thumbnail || "/placeholder.svg"}
                                  alt={subcategory.name}
                                  width={32}
                                  height={24}
                                  className="rounded border object-cover"
                                />
                              ) : (
                                <FolderOpen className="h-4 w-4 text-muted-foreground" />
                              )}
                            </div>
                            <div>
                              <p className="font-medium">{subcategory.name}</p>
                              <p className="text-xs text-muted-foreground">{subcategory.description}</p>
                            </div>
                          </div>
                          <div className="flex items-center space-x-2">
                            <Badge variant="secondary" className="flex items-center space-x-1">
                              <DollarSign className="h-3 w-3" />
                              <span>${subcategory.minimumPayment}</span>
                            </Badge>
                            <Button variant="ghost" size="sm" onClick={() => startEditSubcategory(subcategory)}>
                              <Edit className="h-3 w-3" />
                            </Button>
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => handleDeleteSubcategory(subcategory.id)}
                              className="text-destructive hover:text-destructive"
                            >
                              <Trash2 className="h-3 w-3" />
                            </Button>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </CardContent>
              )}
            </Card>
          ))}
        </div>
      </div>
    </>
  )
}
[V0_FILE]typescriptreact:file="app/admin/financial-overview/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

// Mock data for demonstration
const revenueData = [
  { month: "Jan", deposits: 12500, withdrawals: 8200, chatTransfers: 3400, supportRevenue: 450 },
  { month: "Feb", deposits: 15200, withdrawals: 9800, chatTransfers: 4100, supportRevenue: 620 },
  { month: "Mar", deposits: 18900, withdrawals: 11200, chatTransfers: 5200, supportRevenue: 780 },
  { month: "Apr", deposits: 22100, withdrawals: 13500, chatTransfers: 6800, supportRevenue: 920 },
  { month: "May", deposits: 25800, withdrawals: 15900, chatTransfers: 8200, supportRevenue: 1150 },
  { month: "Jun", deposits: 28400, withdrawals: 17200, chatTransfers: 9500, supportRevenue: 1340 },
]

const commissionBreakdown = [
  { name: "Deposit Fees", value: 35, amount: 15400, color: "#3B82F6" },
  { name: "Withdrawal Fees", value: 28, amount: 12300, color: "#EF4444" },
  { name: "Transaction Fees", value: 25, amount: 11000, color: "#10B981" },
  { name: "Chat Transfer Fees", value: 8, amount: 3500, color: "#F59E0B" },
  { name: "Support Revenue", value: 4, amount: 1800, color: "#8B5CF6" },
]

const recentTransactions = [
  {
    id: "1",
    type: "chat_transfer",
    amount: 50.0,
    commission: 1.0,
    user: "John Doe",
    timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000),
  },
  {
    id: "2",
    type: "priority_support",
    amount: 0.2,
    commission: 0.2,
    user: "Jane Smith",
    timestamp: new Date(Date.now() - 4 * 60 * 60 * 1000),
  },
  {
    id: "3",
    type: "withdrawal",
    amount: 200.0,
    commission: 2.5,
    user: "Mike Johnson",
    timestamp: new Date(Date.now() - 6 * 60 * 60 * 1000),
  },
]

export default function FinancialOverviewPage() {
  const [timeRange, setTimeRange] = useState("6months")
  const [loading, setLoading] = useState(false)

const totalRevenue = revenueData.reduce(
    (sum, month) => sum + month.deposits + month.withdrawals + month.chatTransfers + month.supportRevenue,
    0,
  )

const monthlyGrowth = (((revenueData[5].deposits - revenueData[4].deposits) / revenueData[4].deposits) * 100).toFixed(
    1,
  )

const getTransactionIcon = (type: string) => {
    switch (type) {
      case "chat_transfer":
        return <MessageSquare className="h-4 w-4 text-blue-600" />
      case "priority_support":
        return <CreditCard className="h-4 w-4 text-purple-600" />
      case "withdrawal":
        return <TrendingDown className="h-4 w-4 text-red-600" />
      default:
        return <DollarSign className="h-4 w-4 text-green-600" />
    }
  }

const getTransactionLabel = (type: string) => {
    switch (type) {
      case "chat_transfer":
        return "Chat Transfer"
      case "priority_support":
        return "Priority Support"
      case "withdrawal":
        return "Withdrawal"
      default:
        return "Transaction"
    }
  }

return (
    <>
      <AdminHeader title="Financial Overview" description="Monitor revenue, commissions, and financial performance" />

<div className="flex-1 overflow-auto p-6">
        <div className="space-y-6">
          {/* Header Controls */}
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-4">
              <Select value={timeRange} onValueChange={setTimeRange}>
                <SelectTrigger className="w-40">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="1month">Last Month</SelectItem>
                  <SelectItem value="3months">Last 3 Months</SelectItem>
                  <SelectItem value="6months">Last 6 Months</SelectItem>
                  <SelectItem value="1year">Last Year</SelectItem>
                </SelectContent>
              </Select>
            </div>

<Button variant="outline" className="gap-2 bg-transparent">
              <Download className="h-4 w-4" />
              Export Report
            </Button>
          </div>

{/* Revenue Stats */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Total Revenue</CardTitle>
                <DollarSign className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">${(totalRevenue / 1000).toFixed(0)}K</div>
                <p className="text-xs text-muted-foreground flex items-center gap-1">
                  <TrendingUp className="h-3 w-3 text-green-600" />+{monthlyGrowth}% from last month
                </p>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Chat Transfers</CardTitle>
                <MessageSquare className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">${revenueData[5].chatTransfers.toLocaleString()}</div>
                <p className="text-xs text-muted-foreground">This month</p>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Support Revenue</CardTitle>
                <CreditCard className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">${revenueData[5].supportRevenue.toLocaleString()}</div>
                <p className="text-xs text-muted-foreground">Priority support fees</p>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Commission Rate</CardTitle>
                <TrendingUp className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">2.1%</div>
                <p className="text-xs text-muted-foreground">Average across all fees</p>
              </CardContent>
            </Card>
          </div>

{/* Charts */}
          <div className="grid lg:grid-cols-2 gap-6">
            {/* Revenue Trend */}
            <Card>
              <CardHeader>
                <CardTitle>Revenue Trend</CardTitle>
              </CardHeader>
              <CardContent>
                {revenueData.length > 0 ? (
                  <ChartContainer
                    config={{
                      deposits: { label: "Deposits", color: "#3B82F6" },
                      withdrawals: { label: "Withdrawals", color: "#EF4444" },
                      chatTransfers: { label: "Chat Transfers", color: "#10B981" },
                      supportRevenue: { label: "Support Revenue", color: "#8B5CF6" },
                    }}
                    className="h-[300px]"
                  >
                    <ResponsiveContainer width="100%" height="100%">
                      <LineChart data={revenueData}>
                        <XAxis dataKey="month" />
                        <YAxis />
                        <ChartTooltip content={<ChartTooltipContent />} />
                        <Line type="monotone" dataKey="deposits" stroke="#3B82F6" strokeWidth={2} />
                        <Line type="monotone" dataKey="chatTransfers" stroke="#10B981" strokeWidth={2} />
                        <Line type="monotone" dataKey="supportRevenue" stroke="#8B5CF6" strokeWidth={2} />
                      </LineChart>
                    </ResponsiveContainer>
                  </ChartContainer>
                ) : (
                  <div className="h-[300px] flex items-center justify-center text-muted-foreground">
                    No data available
                  </div>
                )}
              </CardContent>
            </Card>

{/* Commission Breakdown */}
            <Card>
              <CardHeader>
                <CardTitle>Commission Breakdown</CardTitle>
              </CardHeader>
              <CardContent>
                {commissionBreakdown.length > 0 ? (
                  <ChartContainer
                    config={{
                      value: { label: "Revenue" },
                    }}
                    className="h-[300px]"
                  >
                    <ResponsiveContainer width="100%" height="100%">
                      <PieChart>
                        <Pie
                          data={commissionBreakdown}
                          cx="50%"
                          cy="50%"
                          outerRadius={80}
                          dataKey="value"
                          label={({ name, value }) => `${name}: ${value}%`}
                        >
                          {commissionBreakdown.map((entry, index) => (
                            <Cell key={`cell-${index}`} fill={entry.color} />
                          ))}
                        </Pie>
                        <ChartTooltip content={<ChartTooltipContent />} />
                      </PieChart>
                    </ResponsiveContainer>
                  </ChartContainer>
                ) : (
                  <div className="h-[300px] flex items-center justify-center text-muted-foreground">
                    No data available
                  </div>
                )}
              </CardContent>
            </Card>
          </div>

{/* Recent Transactions */}
          <Card>
            <CardHeader>
              <CardTitle>Recent High-Value Transactions</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {recentTransactions.map((transaction) => (
                  <div key={transaction.id} className="flex items-center justify-between p-4 border rounded-lg">
                    <div className="flex items-center gap-3">
                      {getTransactionIcon(transaction.type)}
                      <div>
                        <p className="font-medium">{transaction.user}</p>
                        <p className="text-sm text-muted-foreground">{getTransactionLabel(transaction.type)}</p>
                      </div>
                    </div>
                    <div className="text-right">
                      <p className="font-medium">${transaction.amount.toFixed(2)}</p>
                      <p className="text-sm text-green-600">+${transaction.commission.toFixed(2)} commission</p>
                      <p className="text-xs text-muted-foreground">
                        {formatDistanceToNow(transaction.timestamp, { addSuffix: true })}
                      </p>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </>
  )
}
[V0_FILE]typescriptreact:file="app/admin/page.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Users, DollarSign, Briefcase, ShoppingBag } from "lucide-react"

export default function AdminPage() {
  return (
    <div className="p-6">
      <div className="mb-6">
        <h1 className="text-3xl font-bold text-gray-900">Admin Dashboard</h1>
        <p className="text-gray-600">Platform overview and key metrics</p>
      </div>

<div className="space-y-6">
        {/* Simple Stats Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Total Users</CardTitle>
              <Users className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">1,234</div>
              <p className="text-xs text-muted-foreground">+20.1% from last month</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Total Revenue</CardTitle>
              <DollarSign className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">$45,231</div>
              <p className="text-xs text-muted-foreground">+15.3% from last month</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Active Jobs</CardTitle>
              <Briefcase className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">573</div>
              <p className="text-xs text-muted-foreground">+12.5% from last month</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Active Services</CardTitle>
              <ShoppingBag className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">89</div>
              <p className="text-xs text-muted-foreground">+8.2% from last month</p>
            </CardContent>
          </Card>
        </div>

{/* Simple Content Cards */}
        <div className="grid lg:grid-cols-2 gap-6">
          <Card>
            <CardHeader>
              <CardTitle>Recent Activity</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="font-medium">New user registration</p>
                    <p className="text-sm text-muted-foreground">John Doe joined the platform</p>
                  </div>
                  <div className="text-sm text-muted-foreground">2 hours ago</div>
                </div>
                <div className="flex items-center justify-between">
                  <div>
                    <p className="font-medium">Job completed</p>
                    <p className="text-sm text-muted-foreground">React Developer project finished</p>
                  </div>
                  <div className="text-sm text-muted-foreground">4 hours ago</div>
                </div>
                <div className="flex items-center justify-between">
                  <div>
                    <p className="font-medium">Payment processed</p>
                    <p className="text-sm text-muted-foreground">$250 payment completed</p>
                  </div>
                  <div className="text-sm text-muted-foreground">6 hours ago</div>
                </div>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>System Status</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <span className="text-sm">Server Status</span>
                  <div className="flex items-center space-x-2">
                    <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                    <span className="text-sm text-green-600">Online</span>
                  </div>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm">Database</span>
                  <div className="flex items-center space-x-2">
                    <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                    <span className="text-sm text-green-600">Connected</span>
                  </div>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm">Payment Gateway</span>
                  <div className="flex items-center space-x-2">
                    <div className="w-2 h-2 bg-yellow-500 rounded-full"></div>
                    <span className="text-sm text-yellow-600">Maintenance</span>
                  </div>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm">Email Service</span>
                  <div className="flex items-center space-x-2">
                    <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                    <span className="text-sm text-green-600">Active</span>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

{/* Quick Actions */}
        <Card>
          <CardHeader>
            <CardTitle>Quick Actions</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              <button className="p-4 text-center border rounded-lg hover:bg-gray-50 transition-colors">
                <Users className="h-6 w-6 mx-auto mb-2 text-blue-600" />
                <div className="text-sm font-medium">Manage Users</div>
              </button>
              <button className="p-4 text-center border rounded-lg hover:bg-gray-50 transition-colors">
                <Briefcase className="h-6 w-6 mx-auto mb-2 text-green-600" />
                <div className="text-sm font-medium">View Jobs</div>
              </button>
              <button className="p-4 text-center border rounded-lg hover:bg-gray-50 transition-colors">
                <DollarSign className="h-6 w-6 mx-auto mb-2 text-yellow-600" />
                <div className="text-sm font-medium">Transactions</div>
              </button>
              <button className="p-4 text-center border rounded-lg hover:bg-gray-50 transition-colors">
                <ShoppingBag className="h-6 w-6 mx-auto mb-2 text-purple-600" />
                <div className="text-sm font-medium">Services</div>
              </button>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]sql:file="scripts/15-create-test-jobs-with-subcategories.sql" isMerged="true"
-- Create test jobs with proper subcategory assignments and thumbnails

-- First, let's create some categories and subcategories with thumbnails
INSERT INTO categories (id, name, slug, description, thumbnail, minimum_payment, sort_order, is_active, created_at, updated_at) 
VALUES 
  ('test_social_media', 'Social Media', 'social-media', 'Social media engagement tasks', 'https://images.unsplash.com/photo-1611162617474-5b21e879e113?w=300&h=200&fit=crop', 0.50, 1, true, NOW(), NOW()),
  ('test_content_creation', 'Content Creation', 'content-creation', 'Content writing and creation tasks', 'https://images.unsplash.com/photo-1455390582262-044cdead277a?w=300&h=200&fit=crop', 1.00, 2, true, NOW(), NOW())
ON CONFLICT (id) DO UPDATE SET
  name = EXCLUDED.name,
  thumbnail = EXCLUDED.thumbnail,
  updated_at = NOW();

-- Create subcategories with specific thumbnails
INSERT INTO subcategories (id, category_id, name, slug, description, thumbnail, minimum_payment, sort_order, is_active, created_at, updated_at)
VALUES 
  ('test_facebook', 'test_social_media', 'Facebook Tasks', 'facebook', 'Facebook likes, shares, and engagement', 'https://images.unsplash.com/photo-1611162616305-c69b3fa7fbe0?w=300&h=200&fit=crop', 0.50, 1, true, NOW(), NOW()),
  ('test_instagram', 'test_social_media', 'Instagram Tasks', 'instagram', 'Instagram likes, follows, and stories', 'https://images.unsplash.com/photo-1611162618071-b39a2ec055fb?w=300&h=200&fit=crop', 0.75, 2, true, NOW(), NOW()),
  ('test_blog_writing', 'test_content_creation', 'Blog Writing', 'blog-writing', 'Blog posts and articles', 'https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=300&h=200&fit=crop', 2.00, 1, true, NOW(), NOW())
ON CONFLICT (id) DO UPDATE SET
  name = EXCLUDED.name,
  thumbnail = EXCLUDED.thumbnail,
  updated_at = NOW();

-- Create test jobs with proper subcategory assignments
INSERT INTO jobs (id, title, description, requirements, instructions, category_id, subcategory_id, budget_min, budget_max, workers_needed, deadline, location, tags, attachments, user_id, payment_type, status, estimated_total_cost, deposit_deducted, require_screenshots, screenshot_cost, estimated_approval_days, created_at, updated_at)
VALUES 
  ('test_job_facebook_1', 'Like and Share Facebook Post', 'Steps to complete:\n1. Like the specified Facebook post\n2. Share the post to your timeline\n3. Take a screenshot as proof', 'Screenshot of liked and shared post', 'Step 1: Like the Facebook post\nStep 2: Share to your timeline\nStep 3: Screenshot for proof', 'test_social_media', 'test_facebook', 1.00, 1.00, 10, '2025-08-25', 'Remote', '[]', '[]', '02', 'instant', 'approved', 10.00, 10.50, 1, 0.50, 2, NOW(), NOW()),
  
  ('test_job_instagram_1', 'Follow Instagram Account and Like Posts', 'Steps to complete:\n1. Follow the specified Instagram account\n2. Like the last 5 posts\n3. Take screenshots as proof', 'Screenshots of follow and likes', 'Step 1: Follow the Instagram account\nStep 2: Like the last 5 posts\nStep 3: Take screenshots', 'test_social_media', 'test_instagram', 1.50, 1.50, 8, '2025-08-26', 'Remote', '[]', '[]', '02', 'instant', 'approved', 12.00, 12.60, 2, 1.00, 1, NOW(), NOW()),
  
  ('test_job_blog_1', 'Write 500-word Blog Post', 'Steps to complete:\n1. Research the given topic\n2. Write a 500-word blog post\n3. Submit the final document', 'Complete blog post document', 'Step 1: Research the topic thoroughly\nStep 2: Write engaging 500-word content\nStep 3: Proofread and submit', 'test_content_creation', 'test_blog_writing', 5.00, 5.00, 3, '2025-08-27', 'Remote', '[]', '[]', '03', 'instant', 'approved', 15.00, 15.75, 0, 0.00, 3, NOW(), NOW()),
  
  ('test_job_facebook_2', 'Facebook Page Review and Rating', 'Steps to complete:\n1. Visit the Facebook business page\n2. Leave a 5-star review\n3. Write a positive comment', 'Screenshot of review and comment', 'Step 1: Visit the Facebook page\nStep 2: Rate 5 stars\nStep 3: Write positive review', 'test_social_media', 'test_facebook', 0.75, 0.75, 15, '2025-08-24', 'Remote', '[]', '[]', '02', 'instant', 'approved', 11.25, 11.81, 1, 0.56, 1, NOW(), NOW())
ON CONFLICT (id) DO UPDATE SET
  title = EXCLUDED.title,
  subcategory_id = EXCLUDED.subcategory_id,
  status = 'approved',
  updated_at = NOW();
[V0_FILE]typescriptreact:file="components/chat/money-transfer-summary.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { DollarSign, TrendingUp, ArrowUpRight, Wallet } from "lucide-react"
import { getWalletTransactions } from "@/lib/wallet"
import { useAuth } from "@/contexts/auth-context"

interface TransferStats {
  totalSent: number
  transferCount: number
  lastTransferDate: Date | null
}

export function MoneyTransferSummary() {
  const { user } = useAuth()
  const [stats, setStats] = useState<TransferStats>({
    totalSent: 0,
    transferCount: 0,
    lastTransferDate: null,
  })
  const [loading, setLoading] = useState(true)

useEffect(() => {
    if (user) {
      loadTransferStats()
    }
  }, [user])

const loadTransferStats = async () => {
    if (!user) return

setLoading(true)
    try {
      // Get all wallet transactions for chat transfers (sent money)
      const transactions = await getWalletTransactions(user.id)

// Filter for chat transfer payments (negative amounts = money sent)
      const chatTransfers = transactions.filter(
        (tx) => tx.referenceType === "chat_transfer" && tx.type === "payment" && tx.amount < 0,
      )

const totalSent = Math.abs(chatTransfers.reduce((sum, tx) => sum + tx.amount, 0))
      const transferCount = chatTransfers.length
      const lastTransferDate =
        chatTransfers.length > 0
          ? new Date(Math.max(...chatTransfers.map((tx) => new Date(tx.createdAt).getTime())))
          : null

setStats({
        totalSent,
        transferCount,
        lastTransferDate,
      })

console.log("[v0] Loaded transfer stats:", { totalSent, transferCount, lastTransferDate })
    } catch (error) {
      console.error("[v0] Error loading transfer stats:", error)
    } finally {
      setLoading(false)
    }
  }

if (loading) {
    return (
      <Card className="bg-gradient-to-br from-emerald-50 to-teal-50 border-emerald-200">
        <CardContent className="p-6">
          <div className="flex items-center justify-center">
            <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-emerald-600"></div>
          </div>
        </CardContent>
      </Card>
    )
  }

return (
    <Card className="bg-gradient-to-br from-emerald-50 to-teal-50 border-emerald-200 hover:shadow-lg transition-all duration-300">
      <CardHeader className="pb-3">
        <CardTitle className="flex items-center gap-2 text-emerald-800">
          <div className="p-2 bg-emerald-100 rounded-lg">
            <DollarSign className="h-5 w-5 text-emerald-600" />
          </div>
          Chat Money Transfers
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        {/* Total Sent */}
        <div className="flex items-center justify-between p-3 bg-white/60 rounded-lg border border-emerald-100">
          <div className="flex items-center gap-3">
            <div className="p-2 bg-emerald-500 rounded-full">
              <ArrowUpRight className="h-4 w-4 text-white" />
            </div>
            <div>
              <p className="text-sm text-emerald-700 font-medium">Total Sent</p>
              <p className="text-2xl font-bold text-emerald-900">${stats.totalSent.toFixed(2)}</p>
            </div>
          </div>
          <Badge variant="secondary" className="bg-emerald-100 text-emerald-800 border-emerald-200">
            <TrendingUp className="h-3 w-3 mr-1" />
            All Time
          </Badge>
        </div>

{/* Transfer Count */}
        <div className="flex items-center justify-between p-3 bg-white/60 rounded-lg border border-emerald-100">
          <div className="flex items-center gap-3">
            <div className="p-2 bg-teal-500 rounded-full">
              <Wallet className="h-4 w-4 text-white" />
            </div>
            <div>
              <p className="text-sm text-teal-700 font-medium">Transactions</p>
              <p className="text-2xl font-bold text-teal-900">{stats.transferCount}</p>
            </div>
          </div>
          <Badge variant="outline" className="border-teal-200 text-teal-700">
            {stats.transferCount === 0
              ? "No transfers"
              : stats.transferCount === 1
                ? "1 transfer"
                : `${stats.transferCount} transfers`}
          </Badge>
        </div>

{/* Last Transfer */}
        {stats.lastTransferDate && (
          <div className="p-3 bg-white/40 rounded-lg border border-emerald-100">
            <p className="text-xs text-emerald-600 font-medium mb-1">Last Transfer</p>
            <p className="text-sm text-emerald-800">
              {stats.lastTransferDate.toLocaleDateString("en-US", {
                month: "short",
                day: "numeric",
                year: "numeric",
                hour: "2-digit",
                minute: "2-digit",
              })}
            </p>
          </div>
        )}

{/* No transfers message */}
        {stats.transferCount === 0 && (
          <div className="text-center p-4 bg-white/40 rounded-lg border border-emerald-100">
            <p className="text-sm text-emerald-600">No money transfers yet</p>
            <p className="text-xs text-emerald-500 mt-1">Use the $ button in chat to send money to other users</p>
          </div>
        )}
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/messages/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { ChatList } from "@/components/chat/chat-list"
import { ChatWindow } from "@/components/chat/chat-window"
import {
  type Chat,
  type Message,
  createJobChat,
  getStoredChats,
  getMessagesByChatId,
  saveMessage,
  saveChat,
} from "@/lib/chat"
import { saveFileToChat, initFileCleanup } from "@/lib/file-management"
import { getJobById } from "@/lib/jobs"
import { useAuth } from "@/contexts/auth-context"
import { MessageCircle } from "lucide-react"
import { Button } from "@/components/ui/button"

export default function MessagesPage() {
  const { user } = useAuth()
  const [chats, setChats] = useState<Chat[]>([])
  const [selectedChatId, setSelectedChatId] = useState<string | null>(null)
  const [messages, setMessages] = useState<Message[]>([])
  const [isMobile, setIsMobile] = useState(false)
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

useEffect(() => {
    initFileCleanup()

const initializeChat = async () => {
      setIsLoading(true)
      setError(null)

try {
        const storedChats = getStoredChats()
        setChats(storedChats)
        console.log("[v0] Loaded chats from storage:", storedChats.length)

const urlParams = new URLSearchParams(window.location.search)
        const jobIdFromUrl = urlParams.get("jobId")
        const chatIdFromUrl = urlParams.get("chatId")

if (jobIdFromUrl && user) {
          console.log("[v0] Creating/finding chat for job:", jobIdFromUrl)

try {
            const job = await getJobById(jobIdFromUrl)

if (!job) {
              console.error("[v0] Job not found:", jobIdFromUrl)
              setError("Job not found")
              setIsLoading(false)
              return
            }

console.log("[v0] Found job:", job.title, "posted by:", job.userId)

let existingChat = storedChats.find((chat) => chat.jobId === jobIdFromUrl)

if (!existingChat) {
              const jobPosterId = job.userId
              console.log("[v0] Creating chat between user:", user.id, "and job poster:", jobPosterId)

try {
                existingChat = await createJobChat(jobIdFromUrl, user.id, jobPosterId)
                if (existingChat) {
                  setChats((prev) => {
                    const chatExists = prev.some((chat) => chat.id === existingChat!.id)
                    if (!chatExists) {
                      console.log("[v0] Added new job chat to list:", existingChat!.id)
                      return [...prev, existingChat!]
                    }
                    return prev
                  })
                  console.log("[v0] Created new job chat:", existingChat.id)
                }
              } catch (error) {
                console.error("[v0] Error creating job chat:", error)
                setError("Failed to create chat. Please try again.")
                setIsLoading(false)
                return
              }
            }

if (existingChat) {
              setSelectedChatId(existingChat.id)
              console.log("[v0] Selected job chat:", existingChat.id)
            } else {
              setError("Unable to create or find chat for this job")
            }
          } catch (error) {
            console.error("[v0] Error retrieving job:", error)
            setError("Failed to load job details. Please try again.")
            setIsLoading(false)
            return
          }
        } else if (chatIdFromUrl) {
          setSelectedChatId(chatIdFromUrl)
        } else if (jobIdFromUrl && !user) {
          setError("Please log in to access chat")
        }
      } catch (error) {
        console.error("[v0] Error initializing chat:", error)
        setError("Failed to load chat. Please refresh the page.")
      }

setIsLoading(false)
    }

initializeChat()

const checkMobile = () => {
      setIsMobile(window.innerWidth < 768)
    }

checkMobile()
    window.addEventListener("resize", checkMobile)
    return () => window.removeEventListener("resize", checkMobile)
  }, [user])

useEffect(() => {
    if (selectedChatId) {
      try {
        const chatMessages = getMessagesByChatId(selectedChatId)
        setMessages(chatMessages)
        console.log("[v0] Loaded messages for chat:", selectedChatId, "Count:", chatMessages.length)
      } catch (error) {
        console.error("[v0] Error loading messages:", error)
        setMessages([])
      }
    }
  }, [selectedChatId])

const handleChatSelect = (chatId: string) => {
    setSelectedChatId(chatId)

setChats((prev) => prev.map((chat) => (chat.id === chatId ? { ...chat, unreadCount: 0 } : chat)))
  }

const handleSendMessage = async (content: string, files?: File[]) => {
    if (!selectedChatId || !user) return

try {
      const fileAttachments: any[] = []
      if (files && files.length > 0) {
        for (const file of files) {
          try {
            const chatFile = await saveFileToChat(file, selectedChatId, `msg_${Date.now()}`)
            fileAttachments.push({
              fileName: chatFile.fileName,
              fileSize: chatFile.fileSize,
              fileUrl: chatFile.fileUrl,
              fileType: chatFile.fileType,
            })
          } catch (error) {
            console.error("[v0] Error saving file:", error)
            // Continue with other files even if one fails
          }
        }
      }

const newMessage = await saveMessage({
        chatId: selectedChatId,
        senderId: user.id,
        sender: {
          id: user.id,
          name: `${user.firstName} ${user.lastName}`,
          userType: "user",
          isOnline: true,
        },
        content,
        messageType: files && files.length > 0 ? "file" : "text",
        fileUrl: fileAttachments[0]?.fileUrl,
        fileName: fileAttachments[0]?.fileName,
        fileSize: fileAttachments[0]?.fileSize,
        isEdited: false,
        status: "sent",
      })

// Update local state
      setMessages((prev) => [...prev, newMessage])

// Update chat with last message
      const updatedChats = chats.map((chat) =>
        chat.id === selectedChatId ? { ...chat, lastMessage: newMessage, lastMessageAt: new Date() } : chat,
      )
      setChats(updatedChats)

// Save updated chat
      const updatedChat = updatedChats.find((c) => c.id === selectedChatId)
      if (updatedChat) {
        await saveChat(updatedChat)
      }

console.log("[v0] Message sent and saved:", newMessage.id)
      if (fileAttachments.length > 0) {
        console.log("[v0] File attachments saved:", fileAttachments.length)
      }

// Simulate delivery status update
      setTimeout(() => {
        setMessages((prev) => prev.map((msg) => (msg.id === newMessage.id ? { ...msg, status: "delivered" } : msg)))
      }, 1000)
    } catch (error) {
      console.error("[v0] Error sending message:", error)
      setError("Failed to send message. Please try again.")
    }
  }

const selectedChat = chats.find((chat) => chat.id === selectedChatId)

if (isLoading) {
    return (
      <div className="h-screen flex items-center justify-center">
        <div className="text-center">
          <p className="text-lg">Loading chat...</p>
          <p className="text-sm text-muted-foreground mt-2">Setting up your conversation</p>
        </div>
      </div>
    )
  }

if (error) {
    return (
      <div className="h-screen flex items-center justify-center">
        <div className="text-center">
          <p className="text-lg text-red-600 mb-2">Chat Error</p>
          <p className="text-sm text-muted-foreground mb-4">{error}</p>
          <Button onClick={() => window.location.reload()}>Retry</Button>
        </div>
      </div>
    )
  }

if (isMobile) {
    if (selectedChatId && selectedChat) {
      return (
        <div className="h-screen">
          <div className="flex items-center gap-2 p-4 border-b bg-card/50">
            <Button variant="ghost" size="sm" onClick={() => setSelectedChatId(null)}>
              ← Back
            </Button>
            <h1 className="text-lg font-semibold">Messages</h1>
          </div>
          <div className="h-[calc(100vh-73px)]">
            <ChatWindow
              chat={selectedChat}
              messages={messages}
              currentUserId={user?.id || ""}
              onSendMessage={handleSendMessage}
            />
          </div>
        </div>
      )
    }

return (
      <div className="h-screen">
        <div className="p-4 border-b bg-card/50">
          <h1 className="text-lg font-semibold">Messages</h1>
        </div>
        <div className="h-[calc(100vh-73px)]">
          <ChatList
            chats={chats}
            selectedChatId={selectedChatId}
            onChatSelect={handleChatSelect}
            currentUserId={user?.id || ""}
          />
        </div>
      </div>
    )
  }

return (
    <div className="h-screen flex">
      <div className="w-80 border-r bg-card/30">
        <div className="p-4 border-b">
          <h1 className="text-lg font-semibold">Messages</h1>
        </div>
        <ChatList
          chats={chats}
          selectedChatId={selectedChatId}
          onChatSelect={handleChatSelect}
          currentUserId={user?.id || ""}
        />
      </div>

<div className="flex-1">
        {selectedChat ? (
          <ChatWindow
            chat={selectedChat}
            messages={messages}
            currentUserId={user?.id || ""}
            onSendMessage={handleSendMessage}
          />
        ) : (
          <div className="flex flex-col items-center justify-center h-full text-center bg-muted/20">
            <div className="bg-primary/10 rounded-full p-6 mb-6">
              <MessageCircle className="h-12 w-12 text-primary" />
            </div>
            <h2 className="text-2xl font-semibold mb-2">Welcome to Messages</h2>
            <p className="text-muted-foreground max-w-md">
              Select a conversation from the sidebar to start chatting with buyers, sellers, or our support team.
            </p>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/chat/money-transfer-dialog.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { DollarSign, AlertCircle, CreditCard, X } from "lucide-react"
import { toast } from "sonner"
import { calculateChatTransferCommission } from "@/lib/admin-commission"
import { getWallet, addWalletTransaction, type WalletType } from "@/lib/wallet"
import { useAuth } from "@/contexts/auth-context"

interface MoneyTransferDialogProps {
  isOpen: boolean
  onClose: () => void
  recipientName: string
  recipientId: string
  chatId: string
  onTransferComplete?: (transferData: any) => void
}

export function MoneyTransferDialog({
  isOpen,
  onClose,
  recipientName,
  recipientId,
  chatId,
  onTransferComplete,
}: MoneyTransferDialogProps) {
  const { user } = useAuth()
  const [amount, setAmount] = useState("")
  const [message, setMessage] = useState("")
  const [isProcessing, setIsProcessing] = useState(false)
  const [senderWallet, setSenderWallet] = useState<WalletType | null>(null)
  const [loading, setLoading] = useState(false)

// Mock commission settings - in real app, fetch from API
  const commissionSettings = {
    feePercentage: 2.0,
    feeFixed: 0.0,
    minimumFee: 0.05,
    maximumFee: null,
    isActive: true,
  }

const numericAmount = Number.parseFloat(amount) || 0
  const { commissionAmount, netAmount } = calculateChatTransferCommission(numericAmount, commissionSettings)

useEffect(() => {
    if (isOpen && user) {
      loadSenderWallet()
    }
  }, [isOpen, user])

const loadSenderWallet = async () => {
    if (!user) return

setLoading(true)
    try {
      const wallet = await getWallet(user.id)
      setSenderWallet(wallet)
      console.log("[v0] Loaded sender wallet:", wallet)
    } catch (error) {
      console.error("[v0] Error loading sender wallet:", error)
      toast.error("Failed to load wallet information")
    } finally {
      setLoading(false)
    }
  }

const handleTransfer = async () => {
    if (!user || !senderWallet) {
      toast.error("User information not available")
      return
    }

if (numericAmount <= 0) {
      toast.error("Please enter a valid amount")
      return
    }

if (numericAmount < 1) {
      toast.error("Minimum transfer amount is $1.00")
      return
    }

if (senderWallet.depositBalance < numericAmount) {
      toast.error(`Insufficient deposit balance. Available: $${senderWallet.depositBalance.toFixed(2)}`)
      return
    }

setIsProcessing(true)

try {
      const transferData = {
        chatId,
        recipientId,
        amount: numericAmount,
        commissionAmount,
        netAmount,
        message: message.trim(),
      }

console.log("[v0] Processing money transfer:", transferData)

await addWalletTransaction({
        userId: user.id,
        type: "payment",
        amount: -numericAmount, // Negative amount for deduction
        description: `Chat transfer to ${recipientName} $$ID: ${recipientId}$$${message.trim() ? ` - "${message.trim()}"` : ""}`,
        referenceId: chatId,
        referenceType: "chat_transfer",
        balanceType: "deposit",
      })

await addWalletTransaction({
        userId: recipientId,
        type: "earning",
        amount: netAmount, // Net amount after commission
        description: `Chat transfer from ${user.firstName} ${user.lastName} $$ID: ${user.id}$$${message.trim() ? ` - "${message.trim()}"` : ""}`,
        referenceId: chatId,
        referenceType: "chat_transfer",
        balanceType: "earnings",
      })

if (commissionAmount > 0) {
        console.log("[v0] Recording commission:", commissionAmount)
        // In a real app, this would be recorded in admin earnings
      }

toast.success(`$${numericAmount.toFixed(2)} sent to ${recipientName}!`)

if (onTransferComplete) {
        onTransferComplete(transferData)
      }

await loadSenderWallet()

onClose()
      setAmount("")
      setMessage("")
    } catch (error) {
      console.error("Error processing transfer:", error)
      toast.error("Transfer failed. Please try again.")
    } finally {
      setIsProcessing(false)
    }
  }

const hasInsufficientBalance = senderWallet && numericAmount > senderWallet.depositBalance

return (
    <Dialog open={isOpen} onOpenChange={onClose} modal={false}>
      <DialogContent className="max-w-md max-h-[90vh] flex flex-col">
        <DialogHeader className="flex-shrink-0">
          <div className="flex items-center justify-between">
            <DialogTitle className="flex items-center gap-2">
              <DollarSign className="h-5 w-5 text-green-600" />
              Send Money
            </DialogTitle>
            <Button variant="ghost" size="icon" onClick={onClose} className="h-6 w-6 rounded-full hover:bg-gray-100">
              <X className="h-4 w-4" />
            </Button>
          </div>
        </DialogHeader>

<div className="flex-1 overflow-y-auto min-h-0 space-y-6 pr-2">
          {loading ? (
            <div className="flex items-center justify-center p-4">
              <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary"></div>
            </div>
          ) : senderWallet ? (
            <Card className="bg-blue-50 border-blue-200">
              <CardContent className="p-4">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <CreditCard className="h-4 w-4 text-blue-600" />
                    <span className="text-sm text-blue-800">Your Deposit Balance</span>
                  </div>
                  <span className="font-bold text-blue-900">${senderWallet.depositBalance.toFixed(2)}</span>
                </div>
                <p className="text-xs text-blue-700 mt-1">Available for transfers and job payments</p>
              </CardContent>
            </Card>
          ) : (
            <Card className="bg-red-50 border-red-200">
              <CardContent className="p-4">
                <div className="flex items-center gap-2">
                  <AlertCircle className="h-4 w-4 text-red-600" />
                  <span className="text-sm text-red-800">Unable to load wallet information</span>
                </div>
              </CardContent>
            </Card>
          )}

{/* Recipient Info */}
          <Card>
            <CardContent className="p-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-muted-foreground">Sending to</p>
                  <p className="font-medium">{recipientName}</p>
                  <p className="text-xs text-muted-foreground">ID: {recipientId}</p>
                </div>
                <Badge variant="outline" className="text-xs">
                  Chat Transfer
                </Badge>
              </div>
            </CardContent>
          </Card>

{/* Amount Input */}
          <div className="space-y-2">
            <Label htmlFor="amount">Amount (USD) *</Label>
            <div className="relative">
              <DollarSign className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <Input
                id="amount"
                type="number"
                step="0.01"
                min="1"
                value={amount}
                onChange={(e) => setAmount(e.target.value)}
                placeholder="0.00"
                className={`pl-10 text-lg font-medium ${hasInsufficientBalance ? "border-red-300" : ""}`}
              />
            </div>
            <div className="flex justify-between text-xs">
              <span className="text-muted-foreground">Minimum transfer: $1.00</span>
              {senderWallet && (
                <span className="text-muted-foreground">Max: ${senderWallet.depositBalance.toFixed(2)}</span>
              )}
            </div>
            {hasInsufficientBalance && (
              <div className="flex items-center gap-1 text-red-600 text-sm">
                <AlertCircle className="h-3 w-3" />
                <span>Insufficient deposit balance</span>
              </div>
            )}
          </div>

{/* Commission Breakdown */}
          {numericAmount > 0 && (
            <Card className="bg-muted/50">
              <CardContent className="p-4 space-y-2">
                <div className="flex justify-between text-sm">
                  <span>Transfer amount:</span>
                  <span>${numericAmount.toFixed(2)}</span>
                </div>
                <div className="flex justify-between text-sm text-muted-foreground">
                  <span>Platform fee ({commissionSettings.feePercentage}%):</span>
                  <span>-${commissionAmount.toFixed(2)}</span>
                </div>
                <div className="border-t pt-2 flex justify-between font-medium">
                  <span>Recipient receives:</span>
                  <span className="text-green-600">${netAmount.toFixed(2)}</span>
                </div>
              </CardContent>
            </Card>
          )}

{/* Message */}
          <div className="space-y-2">
            <Label htmlFor="message">Message (optional)</Label>
            <Textarea
              id="message"
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              placeholder="Add a note with your transfer..."
              rows={3}
              maxLength={200}
            />
            <p className="text-xs text-muted-foreground">{message.length}/200 characters</p>
          </div>

{/* Warning */}
          <div className="bg-orange-50 border border-orange-200 rounded-lg p-3">
            <div className="flex items-start gap-2">
              <AlertCircle className="h-4 w-4 text-orange-600 mt-0.5 flex-shrink-0" />
              <div className="text-sm text-orange-800">
                <p className="font-medium mb-1">Transfer Notice</p>
                <p>
                  Money transfers are instant and cannot be reversed. Funds are deducted from your deposit balance and
                  added to recipient's earnings balance.
                </p>
              </div>
            </div>
          </div>
        </div>

<div className="flex-shrink-0 pt-4 border-t bg-background">
          <div className="flex gap-3">
            <Button variant="outline" onClick={onClose} className="flex-1 bg-transparent" disabled={isProcessing}>
              Cancel
            </Button>
            <Button
              onClick={handleTransfer}
              className="flex-1 gap-2"
              disabled={!amount || numericAmount <= 0 || isProcessing || hasInsufficientBalance || !senderWallet}
            >
              {isProcessing ? (
                "Processing..."
              ) : (
                <>
                  <CreditCard className="h-4 w-4" />
                  Send ${numericAmount.toFixed(2)}
                </>
              )}
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/refer/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/api/referrals/generate-code/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { createServerClient } from "@supabase/ssr"
import { cookies } from "next/headers"

function generateReferralCode(): string {
  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
  let result = ""
  for (let i = 0; i < 8; i++) {
    result += chars.charAt(Math.floor(Math.random() * chars.length))
  }
  return result
}

export async function POST(request: NextRequest) {
  const cookieStore = cookies()
  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        get(name: string) {
          return cookieStore.get(name)?.value
        },
      },
    },
  )

try {
    // Get current user
    const {
      data: { user },
      error: authError,
    } = await supabase.auth.getUser()
    if (authError || !user) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

// Check if user already has a referral code
    const { data: existingCode } = await supabase.from("referral_codes").select("code").eq("user_id", user.id).single()

if (existingCode) {
      return NextResponse.json({ code: existingCode.code })
    }

// Generate new referral code
    let code = generateReferralCode()
    let attempts = 0
    const maxAttempts = 10

// Ensure code is unique
    while (attempts < maxAttempts) {
      const { data: existing } = await supabase.from("referral_codes").select("id").eq("code", code).single()

if (!existing) break

code = generateReferralCode()
      attempts++
    }

// Insert new referral code
    const { data, error } = await supabase
      .from("referral_codes")
      .insert({
        user_id: user.id,
        code: code,
        uses_count: 0,
        max_uses: 100,
        is_active: true,
      })
      .select("code")
      .single()

if (error) {
      console.error("Error creating referral code:", error)
      return NextResponse.json({ error: "Failed to create referral code" }, { status: 500 })
    }

return NextResponse.json({ code: data.code })
  } catch (error) {
    console.error("Error in generate referral code API:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/register/page.tsx" isMerged="true"
import { RegisterForm } from "@/components/auth/register-form"
import { ArrowLeft } from "lucide-react"
import Link from "next/link"
import { Suspense } from "react"

function RegisterPageContent() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-white to-orange-50 p-4">
      <div className="absolute top-4 left-4">
        <Link href="/" className="flex items-center text-gray-600 hover:text-gray-900 transition-colors">
          <ArrowLeft className="h-4 w-4 mr-2" />
          Back to Home
        </Link>
      </div>

<div className="w-full max-w-md">
        <div className="text-center mb-8">
          <div className="flex items-center justify-center space-x-2 mb-4">
            <div className="w-10 h-10 bg-gradient-to-r from-blue-600 to-orange-500 rounded-lg flex items-center justify-center">
              <span className="text-white font-bold text-lg">W</span>
            </div>
            <h1 className="text-3xl font-bold text-gray-900">WorkHub</h1>
          </div>
          <p className="text-gray-600">Join thousands of professionals</p>
        </div>
        <RegisterForm />
      </div>
    </div>
  )
}

export default function RegisterPage() {
  return (
    <Suspense
      fallback={
        <div className="min-h-screen flex items-center justify-center">
          <div className="text-center">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
            <p className="mt-4 text-gray-600">Loading...</p>
          </div>
        </div>
      }
    >
      <RegisterPageContent />
    </Suspense>
  )
}
[V0_FILE]typescriptreact:file="app/admin/reviews/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Star, Search, Eye, EyeOff, Trash2, Calendar, Filter } from "lucide-react"
import { toast } from "sonner"
import { type Review, getAllReviews, hideReview, showReview, deleteReview } from "@/lib/reviews"

export default function AdminReviewsPage() {
  const [reviews, setReviews] = useState<Review[]>([])
  const [filteredReviews, setFilteredReviews] = useState<Review[]>([])
  const [loading, setLoading] = useState(true)
  const [searchTerm, setSearchTerm] = useState("")
  const [filterStatus, setFilterStatus] = useState<"all" | "visible" | "hidden">("all")
  const [actionLoading, setActionLoading] = useState<string | null>(null)

useEffect(() => {
    loadReviews()
  }, [])

useEffect(() => {
    filterReviews()
  }, [reviews, searchTerm, filterStatus])

const loadReviews = async () => {
    try {
      const allReviews = await getAllReviews()
      setReviews(allReviews)
    } catch (error) {
      console.error("[v0] Failed to load reviews:", error)
      toast.error("Failed to load reviews")
    } finally {
      setLoading(false)
    }
  }

const filterReviews = () => {
    let filtered = reviews

// Filter by search term
    if (searchTerm) {
      filtered = filtered.filter(
        (review) =>
          review.reviewer.firstName.toLowerCase().includes(searchTerm.toLowerCase()) ||
          review.reviewer.lastName.toLowerCase().includes(searchTerm.toLowerCase()) ||
          review.reviewee.firstName.toLowerCase().includes(searchTerm.toLowerCase()) ||
          review.reviewee.lastName.toLowerCase().includes(searchTerm.toLowerCase()) ||
          review.comment?.toLowerCase().includes(searchTerm.toLowerCase()) ||
          review.job.title.toLowerCase().includes(searchTerm.toLowerCase()),
      )
    }

// Filter by visibility status
    if (filterStatus !== "all") {
      filtered = filtered.filter((review) => (filterStatus === "visible" ? review.isVisible : !review.isVisible))
    }

setFilteredReviews(filtered)
  }

const handleToggleVisibility = async (reviewId: string, currentVisibility: boolean) => {
    setActionLoading(reviewId)
    try {
      if (currentVisibility) {
        await hideReview(reviewId)
        toast.success("Review hidden successfully")
      } else {
        await showReview(reviewId)
        toast.success("Review made visible successfully")
      }
      await loadReviews()
    } catch (error) {
      toast.error("Failed to update review visibility")
    } finally {
      setActionLoading(null)
    }
  }

const handleDeleteReview = async (reviewId: string) => {
    if (!confirm("Are you sure you want to permanently delete this review?")) {
      return
    }

setActionLoading(reviewId)
    try {
      await deleteReview(reviewId)
      toast.success("Review deleted successfully")
      await loadReviews()
    } catch (error) {
      toast.error("Failed to delete review")
    } finally {
      setActionLoading(null)
    }
  }

const getVisibilityStats = () => {
    const visible = reviews.filter((r) => r.isVisible).length
    const hidden = reviews.filter((r) => !r.isVisible).length
    return { visible, hidden, total: reviews.length }
  }

const stats = getVisibilityStats()

if (loading) {
    return (
      <div className="p-6 space-y-6">
        <div className="animate-pulse space-y-4">
          <div className="h-8 bg-gray-200 rounded w-1/4"></div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            {[1, 2, 3].map((i) => (
              <div key={i} className="h-24 bg-gray-200 rounded"></div>
            ))}
          </div>
        </div>
      </div>
    )
  }

return (
    <div className="p-6 space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Review Management</h1>
          <p className="text-gray-600 mt-1">Manage user reviews and ratings</p>
        </div>
      </div>

{/* Stats Cards */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-600">Total Reviews</p>
                <p className="text-2xl font-bold text-gray-900">{stats.total}</p>
              </div>
              <Star className="h-8 w-8 text-yellow-500" />
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-600">Visible Reviews</p>
                <p className="text-2xl font-bold text-green-600">{stats.visible}</p>
              </div>
              <Eye className="h-8 w-8 text-green-500" />
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-600">Hidden Reviews</p>
                <p className="text-2xl font-bold text-red-600">{stats.hidden}</p>
              </div>
              <EyeOff className="h-8 w-8 text-red-500" />
            </div>
          </CardContent>
        </Card>
      </div>

{/* Filters */}
      <Card>
        <CardContent className="p-4">
          <div className="flex flex-col sm:flex-row gap-4">
            <div className="flex-1">
              <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 reviews by user, comment, or job..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-10"
                />
              </div>
            </div>
            <div className="flex items-center gap-2">
              <Filter className="h-4 w-4 text-gray-500" />
              <select
                value={filterStatus}
                onChange={(e) => setFilterStatus(e.target.value as "all" | "visible" | "hidden")}
                className="border rounded-md px-3 py-2 text-sm"
              >
                <option value="all">All Reviews</option>
                <option value="visible">Visible Only</option>
                <option value="hidden">Hidden Only</option>
              </select>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Reviews Table */}
      <Card>
        <CardHeader>
          <CardTitle>Reviews ({filteredReviews.length})</CardTitle>
        </CardHeader>
        <CardContent className="p-0">
          <div className="overflow-x-auto">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Reviewer</TableHead>
                  <TableHead>Reviewee</TableHead>
                  <TableHead>Rating</TableHead>
                  <TableHead>Comment</TableHead>
                  <TableHead>Job</TableHead>
                  <TableHead>Date</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead>Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {filteredReviews.map((review) => (
                  <TableRow key={review.id}>
                    <TableCell>
                      <div className="flex items-center space-x-2">
                        <Avatar className="h-8 w-8">
                          <AvatarFallback className="text-xs">
                            {review.reviewer.firstName[0]}
                            {review.reviewer.lastName[0]}
                          </AvatarFallback>
                        </Avatar>
                        <div>
                          <p className="font-medium text-sm">
                            {review.reviewer.firstName} {review.reviewer.lastName}
                          </p>
                          <p className="text-xs text-gray-500">@{review.reviewer.username}</p>
                        </div>
                      </div>
                    </TableCell>
                    <TableCell>
                      <div className="flex items-center space-x-2">
                        <Avatar className="h-8 w-8">
                          <AvatarFallback className="text-xs">
                            {review.reviewee.firstName[0]}
                            {review.reviewee.lastName[0]}
                          </AvatarFallback>
                        </Avatar>
                        <div>
                          <p className="font-medium text-sm">
                            {review.reviewee.firstName} {review.reviewee.lastName}
                          </p>
                          <p className="text-xs text-gray-500">@{review.reviewee.username}</p>
                        </div>
                      </div>
                    </TableCell>
                    <TableCell>
                      <div className="flex items-center space-x-1">
                        {[1, 2, 3, 4, 5].map((star) => (
                          <Star
                            key={star}
                            className={`h-4 w-4 ${
                              star <= review.rating ? "text-yellow-400 fill-current" : "text-gray-300"
                            }`}
                          />
                        ))}
                        <span className="ml-1 text-sm font-medium">{review.rating}</span>
                      </div>
                    </TableCell>
                    <TableCell>
                      <div className="max-w-xs">
                        {review.comment ? (
                          <p className="text-sm text-gray-700 truncate" title={review.comment}>
                            "{review.comment}"
                          </p>
                        ) : (
                          <span className="text-xs text-gray-500 italic">No comment</span>
                        )}
                      </div>
                    </TableCell>
                    <TableCell>
                      <div>
                        <p className="text-sm font-medium truncate max-w-32" title={review.job.title}>
                          {review.job.title}
                        </p>
                        <Badge variant="outline" className="text-xs mt-1">
                          {typeof review.job.category === "object" ? review.job.category.name : review.job.category}
                        </Badge>
                      </div>
                    </TableCell>
                    <TableCell>
                      <div className="flex items-center text-xs text-gray-500">
                        <Calendar className="h-3 w-3 mr-1" />
                        {new Date(review.createdAt).toLocaleDateString()}
                      </div>
                    </TableCell>
                    <TableCell>
                      <Badge variant={review.isVisible ? "default" : "secondary"}>
                        {review.isVisible ? "Visible" : "Hidden"}
                      </Badge>
                    </TableCell>
                    <TableCell>
                      <div className="flex items-center space-x-2">
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={() => handleToggleVisibility(review.id, review.isVisible)}
                          disabled={actionLoading === review.id}
                          className="text-xs"
                        >
                          {review.isVisible ? (
                            <>
                              <EyeOff className="h-3 w-3 mr-1" />
                              Hide
                            </>
                          ) : (
                            <>
                              <Eye className="h-3 w-3 mr-1" />
                              Show
                            </>
                          )}
                        </Button>
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={() => handleDeleteReview(review.id)}
                          disabled={actionLoading === review.id}
                          className="text-xs text-red-600 hover:text-red-700"
                        >
                          <Trash2 className="h-3 w-3" />
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>

{filteredReviews.length === 0 && (
            <div className="text-center py-8">
              <Star className="h-12 w-12 text-gray-400 mx-auto mb-2" />
              <p className="text-gray-600">No reviews found</p>
              <p className="text-sm text-gray-500 mt-1">
                {searchTerm || filterStatus !== "all"
                  ? "Try adjusting your search or filter criteria"
                  : "Reviews will appear here once users start rating completed work"}
              </p>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]sql:file="scripts/16-add-sequential-job-ids.sql" isMerged="true"
-- Add sequential job ID column to microjobs table
ALTER TABLE microjobs ADD COLUMN job_number SERIAL;

-- Create a unique index on job_number
CREATE UNIQUE INDEX idx_microjobs_job_number ON microjobs(job_number);

-- Update existing jobs to have sequential numbers starting from 1
UPDATE microjobs SET job_number = nextval('microjobs_job_number_seq');

-- Create a function to format job numbers with leading zeros
CREATE OR REPLACE FUNCTION format_job_number(job_num INTEGER) 
RETURNS TEXT AS $$
BEGIN
    RETURN LPAD(job_num::TEXT, 3, '0');
END;
$$ LANGUAGE plpgsql;
[V0_FILE]typescriptreact:file="app/dashboard/jobs/edit/[id]/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"
import { useState, useEffect } from "react"
import { useParams, useRouter } from "next/navigation"
import { useAuth } from "@/contexts/auth-context"
import { DashboardHeader } from "@/components/dashboard/dashboard-header"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
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 { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { toast } from "sonner"
import { getJobById, updateJob, type Job } from "@/lib/jobs"
import {
  ArrowLeft,
  ArrowRight,
  X,
  CheckCircle,
  AlertCircle,
  DollarSign,
  Users,
  Clock,
  FileText,
  Save,
} from "lucide-react"
import Link from "next/link"

const CATEGORIES = [
  "FACEBOOK",
  "YOUTUBE",
  "TIKTOK",
  "TELEGRAM",
  "TWITTER",
  "INSTAGRAM",
  "WEBSITE",
  "APP_TESTING",
  "DATA_ENTRY",
  "OTHER",
]

const STEPS = [
  { id: 1, title: "Job Details", description: "Basic information about your microjob" },
  { id: 2, title: "Requirements", description: "What workers need to do" },
  { id: 3, title: "Payment & Settings", description: "Budget and job settings" },
  { id: 4, title: "Review & Submit", description: "Final review before submission" },
]

export default function EditJobPage() {
  const params = useParams()
  const router = useRouter()
  const { user } = useAuth()
  const jobId = params.id as string

const [currentStep, setCurrentStep] = useState(1)
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [loading, setLoading] = useState(true)
  const [originalJob, setOriginalJob] = useState<Job | null>(null)

const [jobData, setJobData] = useState({
    title: "",
    description: "",
    category: "",
    requirements: "",
    instructions: "",
    budget: "",
    workersNeeded: "1",
    duration: "1",
    durationType: "days",
    tags: [] as string[],
    newTag: "",
    approvalType: "instant", // Default approval type
  })

const [errors, setErrors] = useState<Record<string, string>>({})

useEffect(() => {
    const fetchJob = async () => {
      try {
        console.log("[v0] Loading job for editing:", jobId)
        const job = await getJobById(jobId)

if (!job) {
          toast.error("Job not found")
          router.push("/dashboard/jobs")
          return
        }

// Check if user owns this job
        if (job.userId !== user?.id) {
          toast.error("You don't have permission to edit this job")
          router.push("/dashboard/jobs")
          return
        }

// Check if job can be edited
        if (job.status === "in_progress" || job.status === "completed") {
          toast.error("Cannot edit jobs that are in progress or completed")
          router.push("/dashboard/jobs")
          return
        }

setOriginalJob(job)

// Pre-fill form with existing job data
        setJobData({
          title: job.title,
          description: job.description,
          category: job.categoryId,
          requirements: job.requirements || "",
          instructions: job.instructions || "",
          budget: job.budgetMin.toString(),
          workersNeeded: job.workersNeeded?.toString() || "1",
          duration: job.duration || "1",
          durationType: job.durationType || "days",
          tags: job.tags || [],
          newTag: "",
          approvalType: job.approvalType || "instant", // Pre-fill approval type
        })

console.log("[v0] Loaded job for editing:", job)
      } catch (error) {
        console.error("[v0] Error loading job:", error)
        toast.error("Failed to load job")
        router.push("/dashboard/jobs")
      } finally {
        setLoading(false)
      }
    }

if (jobId && user?.id) {
      fetchJob()
    }
  }, [jobId, user?.id, router])

const validateStep = (step: number) => {
    const newErrors: Record<string, string> = {}

if (step === 1) {
      if (!jobData.title.trim()) newErrors.title = "Job title is required"
      if (!jobData.description.trim()) newErrors.description = "Job description is required"
    }

if (step === 2) {
      if (!jobData.requirements.trim()) newErrors.requirements = "Job requirements are required"
      if (!jobData.instructions.trim()) newErrors.instructions = "Instructions are required"
    }

setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

const handleNext = () => {
    if (validateStep(currentStep)) {
      setCurrentStep((prev) => Math.min(prev + 1, STEPS.length))
    }
  }

const handlePrevious = () => {
    setCurrentStep((prev) => Math.max(prev - 1, 1))
  }

const addTag = () => {
    if (jobData.newTag.trim() && !jobData.tags.includes(jobData.newTag.trim())) {
      setJobData((prev) => ({
        ...prev,
        tags: [...prev.tags, prev.newTag.trim()],
        newTag: "",
      }))
    }
  }

const removeTag = (tag: string) => {
    setJobData((prev) => ({
      ...prev,
      tags: prev.tags.filter((t) => t !== tag),
    }))
  }

const handleSubmit = async () => {
    if (!validateStep(currentStep) || !originalJob) return

setIsSubmitting(true)
    try {
      const jobUpdateData = {
        title: jobData.title,
        description: jobData.description,
        categoryId: jobData.category.toLowerCase(),
        requirements: jobData.requirements,
        instructions: jobData.instructions,
        deadline: originalJob.deadline, // Keep original deadline
        location: originalJob.location, // Keep original location
        isRemote: originalJob.isRemote, // Keep original remote setting
        priority: originalJob.priority, // Keep original priority
        skillsRequired: jobData.tags,
        approvalType: jobData.approvalType, // Include approval type in update data
      }

await updateJob(originalJob.id, jobUpdateData)

toast.success("Job updated successfully! It will be reviewed by our admin team before going live again.")
      router.push("/dashboard/jobs")
    } catch (error) {
      console.error("Job update error:", error)
      toast.error("Failed to update job. Please try again.")
    } finally {
      setIsSubmitting(false)
    }
  }

const progress = (currentStep / STEPS.length) * 100

if (loading) {
    return (
      <>
        <DashboardHeader title="Edit Microjob" description="Update your job posting" />
        <div className="flex-1 flex items-center justify-center">
          <div className="text-center">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-4"></div>
            <p className="text-gray-600">Loading job...</p>
          </div>
        </div>
      </>
    )
  }

if (!originalJob) {
    return (
      <>
        <DashboardHeader title="Edit Microjob" description="Job not found" />
        <div className="flex-1 flex items-center justify-center">
          <div className="text-center">
            <p className="text-gray-600">Job not found</p>
            <Link href="/dashboard/jobs">
              <Button className="mt-4">Back to My Jobs</Button>
            </Link>
          </div>
        </div>
      </>
    )
  }

return (
    <>
      <DashboardHeader title="Edit Microjob" description="Update your job posting" />

<div className="flex-1 overflow-auto bg-gradient-to-br from-background via-muted/30 to-background">
        <div className="max-w-4xl mx-auto p-3 sm:p-6">
          {/* Progress Header */}
          <Card className="mb-6 sm:mb-8 border-0 gradient-card backdrop-blur-sm">
            <CardContent className="p-4 sm:p-6">
              <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-4 space-y-2 sm:space-y-0">
                <h1 className="text-xl sm:text-2xl font-heading font-bold text-foreground">Edit Microjob</h1>
                <div className="flex items-center space-x-2">
                  <Badge variant="secondary" className="bg-primary/10 text-primary border-primary/20">
                    Step {currentStep} of {STEPS.length}
                  </Badge>
                  <Link href="/dashboard/jobs">
                    <Button variant="outline" size="sm">
                      <ArrowLeft className="mr-1 h-3 w-3" />
                      Cancel
                    </Button>
                  </Link>
                </div>
              </div>

<div className="flex justify-between">
                {STEPS.map((step, index) => (
                  <div key={step.id} className="flex flex-col items-center flex-1 px-1">
                    <div
                      className={`w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center mb-2 transition-all duration-200 ${
                        currentStep > step.id
                          ? "bg-gradient-to-r from-primary to-accent text-white"
                          : currentStep === step.id
                            ? "bg-gradient-to-r from-secondary to-accent text-white"
                            : "bg-muted text-muted-foreground"
                      }`}
                    >
                      {currentStep > step.id ? (
                        <CheckCircle className="h-4 w-4 sm:h-5 sm:w-5" />
                      ) : (
                        <span className="text-xs sm:text-sm font-bold">{step.id}</span>
                      )}
                    </div>
                    <div className="text-center">
                      <p className="text-xs sm:text-sm font-medium text-foreground leading-tight">{step.title}</p>
                      <p className="text-xs text-muted-foreground hidden md:block mt-1">{step.description}</p>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

{/* Re-approval Notice */}
          <Card className="mb-6 bg-yellow-50 border-yellow-200">
            <CardContent className="p-4">
              <div className="flex items-start space-x-3">
                <AlertCircle className="h-5 w-5 text-yellow-600 mt-0.5 flex-shrink-0" />
                <div>
                  <h4 className="font-medium text-yellow-800">Re-approval Required</h4>
                  <p className="text-sm text-yellow-700 mt-1">
                    Any changes to your job will require admin re-approval before it goes live again. Your job will be
                    temporarily removed from the marketplace during review.
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Step Content - Same as create page but with pre-filled data */}
          <Card className="border-0 gradient-card backdrop-blur-sm">
            <CardHeader className="p-4 sm:p-6">
              <CardTitle className="flex items-center space-x-2 text-lg sm:text-xl">
                {currentStep === 1 && <FileText className="h-5 w-5 text-primary" />}
                {currentStep === 2 && <AlertCircle className="h-5 w-5 text-secondary" />}
                {currentStep === 3 && <DollarSign className="h-5 w-5 text-accent" />}
                {currentStep === 4 && <CheckCircle className="h-5 w-5 text-primary" />}
                <span>{STEPS[currentStep - 1].title}</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="p-4 sm:p-6">
              {/* Step 1: Job Details */}
              {currentStep === 1 && (
                <div className="space-y-6">
                  <div className="space-y-3">
                    <Label htmlFor="title" className="text-sm font-medium">
                      Job Title *
                    </Label>
                    <Input
                      id="title"
                      placeholder="e.g., YouTube video watch and like"
                      value={jobData.title}
                      onChange={(e) => setJobData((prev) => ({ ...prev, title: e.target.value }))}
                      className={`h-12 text-base ${errors.title ? "border-destructive" : ""}`}
                    />
                    {errors.title && <p className="text-sm text-destructive">{errors.title}</p>}
                  </div>

<div className="space-y-3">
                    <Label htmlFor="description" className="text-sm font-medium">
                      Job Description *
                    </Label>
                    <Textarea
                      id="description"
                      placeholder="Describe what workers need to do in detail..."
                      value={jobData.description}
                      onChange={(e) => setJobData((prev) => ({ ...prev, description: e.target.value }))}
                      rows={4}
                      className={`text-base resize-none ${errors.description ? "border-destructive" : ""}`}
                    />
                    {errors.description && <p className="text-sm text-destructive">{errors.description}</p>}
                  </div>

<div className="space-y-3">
                    <Label htmlFor="category" className="text-sm font-medium">
                      Category (Cannot be changed)
                    </Label>
                    <div className="h-12 px-3 py-2 bg-muted border border-border rounded-md flex items-center text-base text-muted-foreground">
                      {jobData.category.replace("_", " ")}
                    </div>
                    <p className="text-xs text-muted-foreground">Category cannot be changed after job creation</p>
                  </div>

<div className="space-y-3">
                    <Label htmlFor="tags" className="text-sm font-medium">
                      Tags (Optional)
                    </Label>
                    <div className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2">
                      <Input
                        id="tags"
                        placeholder="Add a tag..."
                        value={jobData.newTag}
                        onChange={(e) => setJobData((prev) => ({ ...prev, newTag: e.target.value }))}
                        onKeyPress={(e) => e.key === "Enter" && (e.preventDefault(), addTag())}
                        className="h-12 text-base flex-1"
                      />
                      <Button
                        type="button"
                        onClick={addTag}
                        variant="outline"
                        className="h-12 px-6 text-base bg-transparent"
                      >
                        Add
                      </Button>
                    </div>
                    <div className="flex flex-wrap gap-2 mt-3">
                      {jobData.tags.map((tag) => (
                        <Badge
                          key={tag}
                          variant="secondary"
                          className="bg-secondary/10 text-secondary py-1 px-3 text-sm"
                        >
                          {tag}
                          <button onClick={() => removeTag(tag)} className="ml-2 hover:text-destructive">
                            <X className="h-3 w-3" />
                          </button>
                        </Badge>
                      ))}
                    </div>
                  </div>
                </div>
              )}

{/* Step 2: Requirements */}
              {currentStep === 2 && (
                <div className="space-y-6">
                  <div className="space-y-3">
                    <Label htmlFor="requirements" className="text-sm font-medium">
                      Job Requirements *
                    </Label>
                    <Textarea
                      id="requirements"
                      placeholder="What are the requirements for this job? (e.g., Must have YouTube account, Must be from specific country, etc.)"
                      value={jobData.requirements}
                      onChange={(e) => setJobData((prev) => ({ ...prev, requirements: e.target.value }))}
                      rows={4}
                      className={`text-base resize-none ${errors.requirements ? "border-destructive" : ""}`}
                    />
                    {errors.requirements && <p className="text-sm text-destructive">{errors.requirements}</p>}
                  </div>

<div className="space-y-3">
                    <Label htmlFor="instructions" className="text-sm font-medium">
                      Step-by-Step Instructions *
                    </Label>
                    <Textarea
                      id="instructions"
                      placeholder="Provide clear step-by-step instructions for workers..."
                      value={jobData.instructions}
                      onChange={(e) => setJobData((prev) => ({ ...prev, instructions: e.target.value }))}
                      rows={6}
                      className={`text-base resize-none ${errors.instructions ? "border-destructive" : ""}`}
                    />
                    {errors.instructions && <p className="text-sm text-destructive">{errors.instructions}</p>}
                  </div>
                </div>
              )}

{/* Step 3: Payment & Settings - Limited editing */}
              {currentStep === 3 && (
                <div className="space-y-6">
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                    <div className="space-y-3">
                      <Label htmlFor="budget" className="text-sm font-medium">
                        Budget per Worker (USD) - Cannot be changed
                      </Label>
                      <div className="relative">
                        <DollarSign className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 sm:h-4 sm:w-4 text-muted-foreground" />
                        <div className="pl-12 h-12 px-3 py-2 bg-muted border border-border rounded-md flex items-center text-base text-muted-foreground">
                          ${jobData.budget}
                        </div>
                      </div>
                      <p className="text-xs text-muted-foreground">Budget cannot be changed after job creation</p>
                    </div>

<div className="space-y-3">
                      <Label htmlFor="workersNeeded" className="text-sm font-medium">
                        Number of Workers Needed - Cannot be changed
                      </Label>
                      <div className="relative">
                        <Users className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 sm:h-4 sm:w-4 text-muted-foreground" />
                        <div className="pl-12 h-12 px-3 py-2 bg-muted border border-border rounded-md flex items-center text-base text-muted-foreground">
                          {jobData.workersNeeded}
                        </div>
                      </div>
                      <p className="text-xs text-muted-foreground">Worker count cannot be changed after job creation</p>
                    </div>
                  </div>

<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                    <div className="space-y-3">
                      <Label htmlFor="duration" className="text-sm font-medium">
                        Job Duration - Cannot be changed
                      </Label>
                      <div className="relative">
                        <Clock className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 sm:h-4 sm:w-4 text-muted-foreground" />
                        <div className="pl-12 h-12 px-3 py-2 bg-muted border border-border rounded-md flex items-center text-base text-muted-foreground">
                          {jobData.duration}
                        </div>
                      </div>
                      <p className="text-xs text-muted-foreground">Duration cannot be changed after job creation</p>
                    </div>

<div className="space-y-3">
                      <Label htmlFor="durationType" className="text-sm font-medium">
                        Duration Type - Cannot be changed
                      </Label>
                      <div className="h-12 px-3 py-2 bg-muted border border-border rounded-md flex items-center text-base text-muted-foreground capitalize">
                        {jobData.durationType}
                      </div>
                      <p className="text-xs text-muted-foreground">
                        Duration type cannot be changed after job creation
                      </p>
                    </div>
                  </div>

<div className="space-y-3">
                    <Label className="text-sm font-medium">Payment Approval System</Label>
                    <div className="space-y-3">
                      <div className="flex items-center space-x-3 p-4 border border-border rounded-lg">
                        <input
                          type="radio"
                          id="instant-approval"
                          name="approvalType"
                          value="instant"
                          checked={jobData.approvalType === "instant"}
                          onChange={(e) => setJobData((prev) => ({ ...prev, approvalType: e.target.value }))}
                          className="h-4 w-4 text-primary"
                        />
                        <div className="flex-1">
                          <label htmlFor="instant-approval" className="font-medium text-sm cursor-pointer">
                            Instant Approval
                          </label>
                          <p className="text-xs text-muted-foreground mt-1">
                            Workers get paid immediately when they submit work
                          </p>
                        </div>
                      </div>

<div className="flex items-center space-x-3 p-4 border border-border rounded-lg">
                        <input
                          type="radio"
                          id="manual-approval"
                          name="approvalType"
                          value="manual"
                          checked={jobData.approvalType === "manual"}
                          onChange={(e) => setJobData((prev) => ({ ...prev, approvalType: e.target.value }))}
                          className="h-4 w-4 text-primary"
                        />
                        <div className="flex-1">
                          <label htmlFor="manual-approval" className="font-medium text-sm cursor-pointer">
                            Manual Approval (Recommended)
                          </label>
                          <p className="text-xs text-muted-foreground mt-1">Review work before payment is released</p>
                        </div>
                      </div>
                    </div>
                  </div>

<Card className="bg-muted/50 border-border/50">
                    <CardContent className="p-4 sm:p-6">
                      <h3 className="font-medium text-foreground mb-3 text-base">Cost Summary (Read-only)</h3>
                      <div className="space-y-2 text-sm sm:text-base">
                        <div className="flex justify-between items-center">
                          <span>Budget per worker:</span>
                          <span className="font-medium">${jobData.budget || "0.00"}</span>
                        </div>
                        <div className="flex justify-between items-center">
                          <span>Number of workers:</span>
                          <span className="font-medium">{jobData.workersNeeded || "0"}</span>
                        </div>
                        <div className="border-t border-border pt-2 mt-3">
                          <div className="flex justify-between items-center font-medium text-primary text-base">
                            <span>Total budget:</span>
                            <span>
                              $
                              {(
                                (Number.parseFloat(jobData.budget) || 0) * (Number.parseInt(jobData.workersNeeded) || 0)
                              ).toFixed(2)}
                            </span>
                          </div>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </div>
              )}

{/* Step 4: Review & Submit */}
              {currentStep === 4 && (
                <div className="space-y-6">
                  <div className="bg-muted/50 rounded-lg p-4 sm:p-6">
                    <h3 className="font-heading font-bold text-lg mb-4 text-foreground">Updated Job Preview</h3>

<div className="space-y-4">
                      <div>
                        <h4 className="font-medium text-foreground text-base">{jobData.title}</h4>
                        <p className="text-sm text-muted-foreground mt-2 leading-relaxed">{jobData.description}</p>
                      </div>

<div className="grid grid-cols-2 sm:grid-cols-4 gap-4 text-sm">
                        <div>
                          <span className="text-muted-foreground block">Category:</span>
                          <p className="font-medium mt-1">{jobData.category}</p>
                        </div>
                        <div>
                          <span className="text-muted-foreground block">Budget:</span>
                          <p className="font-medium mt-1">${jobData.budget}</p>
                        </div>
                        <div>
                          <span className="text-muted-foreground block">Workers:</span>
                          <p className="font-medium mt-1">{jobData.workersNeeded}</p>
                        </div>
                        <div>
                          <span className="text-muted-foreground block">Duration:</span>
                          <p className="font-medium mt-1">
                            {jobData.duration} {jobData.durationType}
                          </p>
                        </div>
                      </div>

{jobData.tags.length > 0 && (
                        <div>
                          <span className="text-sm text-muted-foreground block mb-2">Tags:</span>
                          <div className="flex flex-wrap gap-2">
                            {jobData.tags.map((tag) => (
                              <Badge key={tag} variant="secondary" className="text-xs py-1 px-2">
                                {tag}
                              </Badge>
                            ))}
                          </div>
                        </div>
                      )}
                    </div>
                  </div>

<Card className="bg-primary/5 border-primary/20">
                    <CardContent className="p-4 sm:p-6">
                      <div className="flex items-start space-x-3">
                        <AlertCircle className="h-5 w-5 text-primary mt-0.5 flex-shrink-0" />
                        <div>
                          <h4 className="font-medium text-foreground text-base">Re-approval Process</h4>
                          <p className="text-sm text-muted-foreground mt-2 leading-relaxed">
                            Your updated job will be reviewed by our admin team before being published again. This
                            usually takes 24-48 hours. You'll receive a notification once it's approved and live on the
                            platform.
                          </p>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </div>
              )}

<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between pt-6 border-t border-border space-y-4 sm:space-y-0">
                <div className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2">
                  {currentStep > 1 && (
                    <Button
                      type="button"
                      variant="outline"
                      onClick={handlePrevious}
                      className="flex items-center justify-center space-x-2 bg-transparent h-12 text-base"
                    >
                      <ArrowLeft className="h-4 w-4" />
                      <span>Previous</span>
                    </Button>
                  )}

<Link href="/dashboard/jobs">
                    <Button variant="ghost" className="text-muted-foreground h-12 text-base w-full sm:w-auto">
                      Cancel
                    </Button>
                  </Link>
                </div>

<div className="flex space-x-2">
                  {currentStep < STEPS.length ? (
                    <Button
                      type="button"
                      onClick={handleNext}
                      className="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90 text-white font-heading font-bold shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200 flex items-center justify-center space-x-2 h-12 text-base flex-1 sm:flex-none px-8"
                    >
                      <span>Next</span>
                      <ArrowRight className="h-4 w-4" />
                    </Button>
                  ) : (
                    <Button
                      type="button"
                      onClick={handleSubmit}
                      disabled={isSubmitting}
                      className="bg-gradient-to-r from-secondary to-accent hover:from-secondary/90 hover:to-accent/90 text-white font-heading font-bold shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200 flex items-center justify-center space-x-2 h-12 text-base flex-1 sm:flex-none px-8"
                    >
                      {isSubmitting ? (
                        <>
                          <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
                          <span>Updating...</span>
                        </>
                      ) : (
                        <>
                          <Save className="h-4 w-4" />
                          <span>Update Job</span>
                        </>
                      )}
                    </Button>
                  )}
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </>
  )
}
[V0_FILE]sql:file="scripts/17-platform-fee-settings.sql" isMerged="true"
-- Create platform fee settings table
CREATE TABLE IF NOT EXISTS platform_fee_settings (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  fee_type VARCHAR(50) NOT NULL UNIQUE, -- 'job_platform_fee'
  fee_percentage DECIMAL(5,2) NOT NULL DEFAULT 5.00, -- 5.00%
  fee_fixed DECIMAL(10,2) NOT NULL DEFAULT 0.00,
  minimum_fee DECIMAL(10,2) NOT NULL DEFAULT 0.00,
  maximum_fee DECIMAL(10,2) NULL,
  is_active BOOLEAN NOT NULL DEFAULT true,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Insert default platform fee setting
INSERT INTO platform_fee_settings (fee_type, fee_percentage, fee_fixed, minimum_fee, is_active)
VALUES ('job_platform_fee', 5.00, 0.00, 0.00, true)
ON CONFLICT (fee_type) DO NOTHING;

-- Create index for faster lookups
CREATE INDEX IF NOT EXISTS idx_platform_fee_settings_fee_type ON platform_fee_settings(fee_type);
CREATE INDEX IF NOT EXISTS idx_platform_fee_settings_active ON platform_fee_settings(is_active);
[V0_FILE]typescript:file="lib/platform-fee.ts" isMerged="true"
export interface PlatformFeeSettings {
  id: string
  enabled: boolean
  percentage: number
  fixed_fee: number
  minimum_fee: number
  maximum_fee: number
  created_at: string
  updated_at: string
}

export async function getPlatformFeeSettings(): Promise<PlatformFeeSettings | null> {
  try {
    const response = await fetch("/api/admin/platform-fee")

if (!response.ok) {
      console.error("Platform fee API returned error:", response.status, response.statusText)
      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
    }

const contentType = response.headers.get("content-type")
    if (!contentType || !contentType.includes("application/json")) {
      console.error("Platform fee API returned non-JSON response:", contentType)
      throw new Error("API returned non-JSON response")
    }

const data = await response.json()
    return data.settings || null
  } catch (error) {
    console.error("Error fetching platform fee settings:", error)
    return {
      id: "default",
      enabled: true,
      percentage: 5.0,
      fixed_fee: 0.0,
      minimum_fee: 0.0,
      maximum_fee: 0,
      created_at: new Date().toISOString(),
      updated_at: new Date().toISOString(),
    }
  }
}

export async function updatePlatformFeeSettings(settings: Partial<PlatformFeeSettings>): Promise<PlatformFeeSettings> {
  try {
    const requestBody = {
      isActive: settings.enabled,
      feePercentage: settings.percentage,
      feeFixed: settings.fixed_fee,
      minimumFee: settings.minimum_fee,
      maximumFee: settings.maximum_fee,
    }

const response = await fetch("/api/admin/platform-fee", {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(requestBody),
    })

if (!response.ok) {
      throw new Error("Failed to update platform fee settings")
    }

const data = await response.json()
    return data.settings
  } catch (error) {
    console.error("Error updating platform fee settings:", error)
    throw error
  }
}

export function calculatePlatformFee(
  amount: number,
  feeSettings: PlatformFeeSettings,
): { platformFee: number; netAmount: number } {
  if (!feeSettings.enabled) {
    return { platformFee: 0, netAmount: amount }
  }

let platformFee = 0

// Calculate percentage fee
  if (feeSettings.percentage > 0) {
    platformFee += (amount * feeSettings.percentage) / 100
  }

// Add fixed fee
  if (feeSettings.fixed_fee > 0) {
    platformFee += feeSettings.fixed_fee
  }

// Apply minimum fee
  if (platformFee < feeSettings.minimum_fee) {
    platformFee = feeSettings.minimum_fee
  }

// Apply maximum fee if set
  if (feeSettings.maximum_fee && platformFee > feeSettings.maximum_fee) {
    platformFee = feeSettings.maximum_fee
  }

// Round to 2 decimal places
  platformFee = Math.round(platformFee * 100) / 100
  const netAmount = Math.round((amount - platformFee) * 100) / 100

return { platformFee, netAmount }
}
[V0_FILE]typescript:file="app/api/admin/platform-fee/route.ts" isFixed="true" isQuickEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { getPlatformFeeSettingsLocal, updatePlatformFeeSettingsLocal } from "@/lib/local-storage"

const DEFAULT_SETTINGS = {
  id: "default",
  enabled: true,
  percentage: 5.0,
  fixed_fee: 0.0,
  minimum_fee: 0.0,
  maximum_fee: 0,
  created_at: new Date().toISOString(),
  updated_at: new Date().toISOString(),
}

export async function GET() {
  try {
    console.log("[v0] Platform fee API: Starting GET request (local storage)")

const settings = await getPlatformFeeSettingsLocal()

const mappedSettings = {
      ...settings,
      isActive: settings.enabled,
      feePercentage: settings.percentage,
      feeFixed: settings.fixed_fee,
      minimumFee: settings.minimum_fee,
      maximumFee: settings.maximum_fee,
    }

console.log("[v0] Platform fee API: Successfully fetched local settings:", mappedSettings)
    return NextResponse.json({ settings: mappedSettings })
  } catch (error) {
    console.error("[v0] Platform fee API: Error in GET:", error instanceof Error ? error.message : "Unknown error")
    const mappedDefaults = {
      ...DEFAULT_SETTINGS,
      isActive: DEFAULT_SETTINGS.enabled,
      feePercentage: DEFAULT_SETTINGS.percentage,
      feeFixed: DEFAULT_SETTINGS.fixed_fee,
      minimumFee: DEFAULT_SETTINGS.minimum_fee,
      maximumFee: DEFAULT_SETTINGS.maximum_fee,
    }
    return NextResponse.json({ settings: mappedDefaults })
  }
}

export async function PUT(request: NextRequest) {
  try {
    console.log("[v0] Platform fee API: Starting PUT request (local storage)")

const body = await request.json()
    console.log("[v0] Platform fee API: Received body:", body)

const updateData = {
      enabled: body.isActive !== undefined ? body.isActive : true,
      percentage: body.feePercentage !== undefined ? body.feePercentage : 5.0,
      fixed_fee: body.feeFixed !== undefined ? body.feeFixed : 0,
      minimum_fee: body.minimumFee !== undefined ? body.minimumFee : 0,
      maximum_fee: body.maximumFee !== undefined ? body.maximumFee : 0,
    }

console.log("[v0] Platform fee API: Update data:", updateData)

const settings = await updatePlatformFeeSettingsLocal(updateData)

console.log("[v0] Platform fee API: Successfully updated local settings:", mappedSettings)
    return NextResponse.json({ settings: mappedSettings })
  } catch (error) {
    console.error("[v0] Platform fee API: Error in PUT:", error instanceof Error ? error.message : "Unknown error")
    return NextResponse.json({ error: "Failed to update platform fee settings" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/admin/approval-settings/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { getApprovalSettingsLocal, updateApprovalSettingsLocal, type ApprovalSettings } from "@/lib/local-storage"

export async function GET() {
  try {
    console.log("[v0] Approval settings API: Starting GET request")

const settings = await getApprovalSettingsLocal()
    console.log("[v0] Approval settings API: Successfully fetched local settings:", settings)

return NextResponse.json(settings)
  } catch (error) {
    console.error("[v0] Approval settings API: Error fetching settings:", error)

// Return default settings if there's an error
    const defaultSettings: ApprovalSettings = {
      id: "default",
      allowManualApprovalTimeSelection: true,
      defaultManualApprovalDays: 3,
      created_at: new Date().toISOString(),
      updated_at: new Date().toISOString(),
    }

return NextResponse.json(defaultSettings)
  }
}

export async function PUT(request: NextRequest) {
  try {
    console.log("[v0] Approval settings API: Starting PUT request")

const body = await request.json()
    console.log("[v0] Approval settings API: Request body:", body)

// Validate the request body
    if (typeof body !== "object" || body === null) {
      return NextResponse.json({ error: "Invalid request body" }, { status: 400 })
    }

// Prepare update data with explicit checks for boolean and number values
    const updateData: Partial<ApprovalSettings> = {}

if (body.allowManualApprovalTimeSelection !== undefined) {
      updateData.allowManualApprovalTimeSelection = Boolean(body.allowManualApprovalTimeSelection)
    }

if (body.defaultManualApprovalDays !== undefined) {
      const days = Number(body.defaultManualApprovalDays)
      if (!isNaN(days) && days >= 0.000694 && days <= 7) {
        updateData.defaultManualApprovalDays = days
      }
    }

console.log("[v0] Approval settings API: Update data:", updateData)

const updatedSettings = await updateApprovalSettingsLocal(updateData)
    console.log("[v0] Approval settings API: Successfully updated local settings:", updatedSettings)

return NextResponse.json(updatedSettings)
  } catch (error) {
    console.error("[v0] Approval settings API: Error updating settings:", error)

return NextResponse.json({ error: "Failed to update approval settings" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/admin/jobs/approval-settings/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Trash2, Plus, ArrowLeft, Clock } from "lucide-react"
import { toast } from "sonner"

type TimePeriod = {
  id: string
  label: string
  value: number
  days: number
  hours: number
  minutes: number
}

export default function ApprovalSettingsPage() {
  const router = useRouter()
  const [customTimePeriods, setCustomTimePeriods] = useState<TimePeriod[]>([])
  const [defaultTimeOptions, setDefaultTimeOptions] = useState<TimePeriod[]>([])
  const [defaultManualApprovalDays, setDefaultManualApprovalDays] = useState(1)
  const [allowManualApprovalTimeSelection, setAllowManualApprovalTimeSelection] = useState(true)
  const [loadingApprovalSettings, setLoadingApprovalSettings] = useState(false)
  const [loadingDefaultDays, setLoadingDefaultDays] = useState(false)

const [isAddingTimePeriod, setIsAddingTimePeriod] = useState(false)
  const [newTimePeriod, setNewTimePeriod] = useState({
    days: 0,
    hours: 0,
    minutes: 0,
    label: "",
  })

const [isAddingDefaultOption, setIsAddingDefaultOption] = useState(false)
  const [newDefaultOption, setNewDefaultOption] = useState({
    days: 0,
    hours: 0,
    minutes: 0,
    label: "",
  })

useEffect(() => {
    loadSettings()
  }, [])

const loadSettings = async () => {
    try {
      const storedDefaults = localStorage.getItem("admin_default_time_options")
      if (storedDefaults) {
        const defaults = JSON.parse(storedDefaults)
        setDefaultTimeOptions(defaults)
      } else {
        const initialDefaults: TimePeriod[] = [
          { id: "test", label: "1 minute (TEST)", value: 0.000694, days: 0, hours: 0, minutes: 1 },
          { id: "1day", label: "1 day", value: 1, days: 1, hours: 0, minutes: 0 },
          { id: "2days", label: "2 days", value: 2, days: 2, hours: 0, minutes: 0 },
          { id: "3days", label: "3 days", value: 3, days: 3, hours: 0, minutes: 0 },
          { id: "4days", label: "4 days", value: 4, days: 4, hours: 0, minutes: 0 },
          { id: "5days", label: "5 days", value: 5, days: 5, hours: 0, minutes: 0 },
          { id: "6days", label: "6 days", value: 6, days: 6, hours: 0, minutes: 0 },
          { id: "7days", label: "7 days", value: 7, days: 7, hours: 0, minutes: 0 },
        ]
        setDefaultTimeOptions(initialDefaults)
        localStorage.setItem("admin_default_time_options", JSON.stringify(initialDefaults))
      }

const stored = localStorage.getItem("admin_custom_time_periods")
      if (stored) {
        const periods = JSON.parse(stored)
        setCustomTimePeriods(periods)
      }

const response = await fetch("/api/admin/approval-settings")
      if (response.ok) {
        const settings = await response.json()
        setAllowManualApprovalTimeSelection(settings.allowManualApprovalTimeSelection)
      }
    } catch (error) {
      console.error("Error loading settings:", error)
    }
  }

const saveCustomTimePeriods = (periods: TimePeriod[]) => {
    try {
      localStorage.setItem("admin_custom_time_periods", JSON.stringify(periods))
      setCustomTimePeriods(periods)
    } catch (error) {
      console.error("Failed to save custom time periods:", error)
    }
  }

const addCustomTimePeriod = () => {
    console.log("[v0] Adding custom time period:", newTimePeriod)

const { days, hours, minutes, label } = newTimePeriod

const totalDays = days + hours / 24 + minutes / (24 * 60)
    console.log("[v0] Calculated total days:", totalDays)

if (totalDays < 0.000694 || totalDays > 30) {
      console.log("[v0] Validation failed: time period out of range")
      toast.error("Time period must be between 1 minute and 30 days")
      return
    }

if (!label.trim()) {
      console.log("[v0] Validation failed: no label provided")
      toast.error("Please provide a label for the time period")
      return
    }

if (totalDays <= 0) {
      console.log("[v0] Validation failed: zero time period")
      toast.error("Please set a time period greater than 0")
      return
    }

const allOptions = [...defaultTimeOptions, ...customTimePeriods]
    const exists = allOptions.some((p) => {
      const diff = Math.abs(p.value - totalDays)
      console.log("[v0] Checking duplicate against:", p.label, "diff:", diff)
      return diff < 0.000001
    })

if (exists) {
      console.log("[v0] Validation failed: duplicate time period")
      toast.error("This time period already exists")
      return
    }

const newPeriod: TimePeriod = {
      id: Date.now().toString(),
      label: label.trim(),
      value: totalDays,
      days,
      hours,
      minutes,
    }

console.log("[v0] Creating new period:", newPeriod)

const updatedPeriods = [...customTimePeriods, newPeriod].sort((a, b) => a.value - b.value)
    saveCustomTimePeriods(updatedPeriods)

setNewTimePeriod({ days: 0, hours: 0, minutes: 0, label: "" })
    setIsAddingTimePeriod(false)

console.log("[v0] Successfully added custom time period")
    toast.success(`Added custom time period: ${label}`)
  }

const deleteCustomTimePeriod = (id: string) => {
    const updatedPeriods = customTimePeriods.filter((p) => p.id !== id)
    saveCustomTimePeriods(updatedPeriods)
    toast.success("Custom time period deleted")
  }

const saveDefaultTimeOptions = (options: TimePeriod[]) => {
    try {
      localStorage.setItem("admin_default_time_options", JSON.stringify(options))
      setDefaultTimeOptions(options)
    } catch (error) {
      console.error("Failed to save default time options:", error)
    }
  }

const addDefaultTimeOption = () => {
    console.log("[v0] Adding default time option:", newDefaultOption)

const { days, hours, minutes, label } = newDefaultOption

const totalDays = days + hours / 24 + minutes / (24 * 60)
    console.log("[v0] Calculated total days:", totalDays)

if (!label.trim()) {
      console.log("[v0] Validation failed: no label provided")
      toast.error("Please provide a label for the time period")
      return
    }

if (totalDays <= 0) {
      console.log("[v0] Validation failed: zero time period")
      toast.error("Please set a time period greater than 0")
      return
    }

if (exists) {
      console.log("[v0] Validation failed: duplicate time period")
      toast.error("This time period already exists")
      return
    }

const newOption: TimePeriod = {
      id: Date.now().toString(),
      label: label.trim(),
      value: totalDays,
      days,
      hours,
      minutes,
    }

console.log("[v0] Creating new option:", newOption)

const updatedOptions = [...defaultTimeOptions, newOption].sort((a, b) => a.value - b.value)
    saveDefaultTimeOptions(updatedOptions)

setNewDefaultOption({ days: 0, hours: 0, minutes: 0, label: "" })
    setIsAddingDefaultOption(false)

console.log("[v0] Successfully added default time option")
    toast.success(`Added default time option: ${label}`)
  }

const deleteDefaultTimeOption = (id: string) => {
    const updatedOptions = defaultTimeOptions.filter((p) => p.id !== id)
    saveDefaultTimeOptions(updatedOptions)
    toast.success("Default time option deleted")
  }

const handleDefaultManualApprovalDaysChange = async (days: number) => {
    if (days < 0.000694 || days > 30) {
      toast.error("Default approval days must be between 1 minute and 30 days")
      return
    }

setLoadingDefaultDays(true)
    try {
      localStorage.setItem("admin_default_manual_approval_days", days.toString())
      setDefaultManualApprovalDays(days)

const displayText = days === 0.000694 ? "1 minute (TEST MODE)" : `${days} day${days > 1 ? "s" : ""}`
      toast.success(`Default manual approval period set to ${displayText}`)
    } catch (error) {
      console.error("Error updating default manual approval days:", error)
      toast.error("Failed to update default approval days")
    } finally {
      setLoadingDefaultDays(false)
    }
  }

const handleManualApprovalTimeSelectionToggle = async (enabled: boolean) => {
    setLoadingApprovalSettings(true)
    try {
      const response = await fetch("/api/admin/approval-settings", {
        method: "PUT",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          allowManualApprovalTimeSelection: enabled,
        }),
      })

if (response.ok) {
        const updatedSettings = await response.json()
        setAllowManualApprovalTimeSelection(updatedSettings.allowManualApprovalTimeSelection)
        toast.success(
          enabled
            ? "Users can now customize manual approval time periods"
            : "Manual approval time selection disabled - users will use default period",
        )
      } else {
        throw new Error("Failed to update approval settings")
      }
    } catch (error) {
      console.error("Error updating manual approval time selection setting:", error)
      toast.error("Failed to update approval time selection setting")
    } finally {
      setLoadingApprovalSettings(false)
    }
  }

return (
    <div className="container mx-auto p-6 space-y-6">
      <div className="flex items-center space-x-4">
        <Button variant="ghost" onClick={() => router.push("/admin/jobs")} className="p-2">
          <ArrowLeft className="h-4 w-4" />
        </Button>
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Manual Approval Settings</h1>
          <p className="text-gray-600">Configure default approval times and manage time period options</p>
        </div>
      </div>

<Card className="bg-gradient-to-br from-blue-50 to-blue-100 border-blue-200">
        <CardHeader>
          <CardTitle className="flex items-center space-x-2">
            <Clock className="h-5 w-5 text-blue-600" />
            <span>Default Manual Approval</span>
          </CardTitle>
          <CardDescription>Set the default review period for manual approval jobs</CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="flex items-center justify-between">
            <div>
              <h3 className="text-lg font-semibold text-gray-900">Default Review Period</h3>
              <p className="text-sm text-gray-600">
                Current default:{" "}
                {defaultManualApprovalDays === 0.000694
                  ? "1 minute (TEST)"
                  : `${defaultManualApprovalDays} day${defaultManualApprovalDays > 1 ? "s" : ""}`}
              </p>
            </div>
            <Select
              value={defaultManualApprovalDays.toString()}
              onValueChange={(value) => handleDefaultManualApprovalDaysChange(Number.parseFloat(value))}
              disabled={loadingDefaultDays}
            >
              <SelectTrigger className="w-48">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {defaultTimeOptions.map((option) => (
                  <SelectItem key={option.id} value={option.value.toString()}>
                    {option.label}
                  </SelectItem>
                ))}
                {customTimePeriods.map((period) => (
                  <SelectItem key={period.id} value={period.value.toString()}>
                    {period.label} (Custom)
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

<div className="pt-4 border-t border-blue-200">
            <div className="flex items-center justify-between">
              <div>
                <span className="text-sm font-medium text-gray-700">Allow User Time Selection</span>
                <p className="text-xs text-gray-500 mt-1">
                  {allowManualApprovalTimeSelection
                    ? "Users can customize manual approval time periods when creating jobs"
                    : "Users must use the default approval period set above"}
                </p>
              </div>
              <Switch
                checked={allowManualApprovalTimeSelection}
                onCheckedChange={handleManualApprovalTimeSelectionToggle}
                disabled={loadingApprovalSettings}
                className="data-[state=checked]:bg-blue-600"
              />
            </div>
          </div>
        </CardContent>
      </Card>

<Card>
        <CardHeader>
          <CardTitle>Default Time Options</CardTitle>
          <CardDescription>Manage standard time periods available to users</CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="flex items-center justify-between">
            <div>
              <h3 className="text-lg font-medium text-gray-900">Standard Time Periods</h3>
              <p className="text-sm text-gray-600">Add or remove standard time period options</p>
            </div>
            <Button
              onClick={() => setIsAddingDefaultOption(!isAddingDefaultOption)}
              variant="outline"
              className="text-blue-600 border-blue-200 hover:bg-blue-50"
            >
              <Plus className="h-4 w-4 mr-2" />
              Add Option
            </Button>
          </div>

{isAddingDefaultOption && (
            <div className="bg-white p-6 rounded-lg border border-blue-200 shadow-sm">
              <div className="space-y-4">
                <div>
                  <Label className="text-sm font-medium text-gray-700 mb-3 block">Time Period</Label>
                  <div className="grid grid-cols-3 gap-4">
                    <div>
                      <Label className="text-xs text-gray-600">Days</Label>
                      <Input
                        type="number"
                        min="0"
                        max="30"
                        value={newDefaultOption.days}
                        onChange={(e) =>
                          setNewDefaultOption((prev) => ({
                            ...prev,
                            days: Number.parseInt(e.target.value) || 0,
                          }))
                        }
                        className="text-center"
                      />
                    </div>
                    <div>
                      <Label className="text-xs text-gray-600">Hours</Label>
                      <Input
                        type="number"
                        min="0"
                        max="23"
                        value={newDefaultOption.hours}
                        onChange={(e) =>
                          setNewDefaultOption((prev) => ({
                            ...prev,
                            hours: Number.parseInt(e.target.value) || 0,
                          }))
                        }
                        className="text-center"
                      />
                    </div>
                    <div>
                      <Label className="text-xs text-gray-600">Minutes</Label>
                      <Input
                        type="number"
                        min="0"
                        max="59"
                        value={newDefaultOption.minutes}
                        onChange={(e) =>
                          setNewDefaultOption((prev) => ({
                            ...prev,
                            minutes: Number.parseInt(e.target.value) || 0,
                          }))
                        }
                        className="text-center"
                      />
                    </div>
                  </div>
                </div>

<div>
                  <Label className="text-sm font-medium text-gray-700 mb-2 block">Display Label</Label>
                  <Input
                    type="text"
                    placeholder="e.g., 1 minute (TEST), 1 day, 2 days"
                    value={newDefaultOption.label}
                    onChange={(e) =>
                      setNewDefaultOption((prev) => ({
                        ...prev,
                        label: e.target.value,
                      }))
                    }
                    className="w-full"
                  />
                </div>

<div className="flex items-center justify-between pt-2">
                  <div className="text-xs text-gray-500">
                    Total: {(() => {
                      const total =
                        newDefaultOption.days + newDefaultOption.hours / 24 + newDefaultOption.minutes / (24 * 60)
                      if (total === 0) return "0 minutes"
                      if (total < 1) return `${Math.round(total * 24 * 60)} minutes`
                      if (total < 2) return `${(total * 24).toFixed(1)} hours`
                      return `${total.toFixed(2)} days`
                    })()}
                  </div>
                  <div className="flex space-x-2">
                    <Button
                      variant="outline"
                      onClick={() => {
                        setIsAddingDefaultOption(false)
                        setNewDefaultOption({ days: 0, hours: 0, minutes: 0, label: "" })
                      }}
                    >
                      Cancel
                    </Button>
                    <Button onClick={addDefaultTimeOption} className="bg-blue-600 hover:bg-blue-700">
                      Add Option
                    </Button>
                  </div>
                </div>
              </div>
            </div>
          )}

<div className="space-y-3">
            {defaultTimeOptions.length > 0 ? (
              <div className="space-y-3">
                <h4 className="text-sm font-medium text-gray-700">Available Default Options</h4>
                {defaultTimeOptions.map((option) => (
                  <div
                    key={option.id}
                    className="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200 shadow-sm"
                  >
                    <span className="text-sm font-medium text-gray-700">{option.label}</span>
                    <div className="flex items-center space-x-3">
                      <Button
                        size="sm"
                        variant="ghost"
                        onClick={() => handleDefaultManualApprovalDaysChange(option.value)}
                        className="text-blue-600 hover:bg-blue-50 px-3 py-1"
                      >
                        Set as Default
                      </Button>
                      <Button
                        size="sm"
                        variant="ghost"
                        onClick={() => deleteDefaultTimeOption(option.id)}
                        className="text-red-600 hover:bg-red-50 p-2"
                      >
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <div className="text-center py-8 text-gray-500">
                <p className="text-sm">No default time options available</p>
              </div>
            )}
          </div>
        </CardContent>
      </Card>

<Card>
        <CardHeader>
          <CardTitle>Custom Time Options</CardTitle>
          <CardDescription>Manage custom time periods that users can choose from when creating jobs</CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="flex items-center justify-between">
            <div>
              <h3 className="text-lg font-medium text-gray-900">Custom Time Periods</h3>
              <p className="text-sm text-gray-600">Add custom time periods for users to choose from</p>
            </div>
            <Button
              onClick={() => setIsAddingTimePeriod(!isAddingTimePeriod)}
              variant="outline"
              className="text-blue-600 border-blue-200 hover:bg-blue-50"
            >
              <Plus className="h-4 w-4 mr-2" />
              Add Time Period
            </Button>
          </div>

{isAddingTimePeriod && (
            <div className="bg-white p-6 rounded-lg border border-blue-200 shadow-sm">
              <div className="space-y-4">
                <div>
                  <Label className="text-sm font-medium text-gray-700 mb-3 block">Time Period</Label>
                  <div className="grid grid-cols-3 gap-4">
                    <div>
                      <Label className="text-xs text-gray-600">Days</Label>
                      <Input
                        type="number"
                        min="0"
                        max="30"
                        value={newTimePeriod.days}
                        onChange={(e) =>
                          setNewTimePeriod((prev) => ({
                            ...prev,
                            days: Number.parseInt(e.target.value) || 0,
                          }))
                        }
                        className="text-center"
                      />
                    </div>
                    <div>
                      <Label className="text-xs text-gray-600">Hours</Label>
                      <Input
                        type="number"
                        min="0"
                        max="23"
                        value={newTimePeriod.hours}
                        onChange={(e) =>
                          setNewTimePeriod((prev) => ({
                            ...prev,
                            hours: Number.parseInt(e.target.value) || 0,
                          }))
                        }
                        className="text-center"
                      />
                    </div>
                    <div>
                      <Label className="text-xs text-gray-600">Minutes</Label>
                      <Input
                        type="number"
                        min="0"
                        max="59"
                        value={newTimePeriod.minutes}
                        onChange={(e) =>
                          setNewTimePeriod((prev) => ({
                            ...prev,
                            minutes: Number.parseInt(e.target.value) || 0,
                          }))
                        }
                        className="text-center"
                      />
                    </div>
                  </div>
                </div>

<div>
                  <Label className="text-sm font-medium text-gray-700 mb-2 block">Display Label</Label>
                  <Input
                    type="text"
                    placeholder="e.g., 12 Hours, 2.5 Days, etc."
                    value={newTimePeriod.label}
                    onChange={(e) =>
                      setNewTimePeriod((prev) => ({
                        ...prev,
                        label: e.target.value,
                      }))
                    }
                    className="w-full"
                  />
                </div>

<div className="flex items-center justify-between pt-2">
                  <div className="text-xs text-gray-500">
                    Total: {(() => {
                      const total = newTimePeriod.days + newTimePeriod.hours / 24 + newTimePeriod.minutes / (24 * 60)
                      if (total === 0) return "0 minutes"
                      if (total < 1) return `${Math.round(total * 24 * 60)} minutes`
                      if (total < 2) return `${(total * 24).toFixed(1)} hours`
                      return `${total.toFixed(2)} days`
                    })()}
                  </div>
                  <div className="flex space-x-2">
                    <Button
                      variant="outline"
                      onClick={() => {
                        setIsAddingTimePeriod(false)
                        setNewTimePeriod({ days: 0, hours: 0, minutes: 0, label: "" })
                      }}
                    >
                      Cancel
                    </Button>
                    <Button onClick={addCustomTimePeriod} className="bg-blue-600 hover:bg-blue-700">
                      Add Option
                    </Button>
                  </div>
                </div>
              </div>
            </div>
          )}

<div className="space-y-3">
            {customTimePeriods.length > 0 ? (
              <div className="space-y-3">
                <h4 className="text-sm font-medium text-gray-700">Available Options</h4>
                {customTimePeriods.map((period) => (
                  <div
                    key={period.id}
                    className="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200 shadow-sm"
                  >
                    <span className="text-sm font-medium text-gray-700">{period.label}</span>
                    <div className="flex items-center space-x-3">
                      <Button
                        size="sm"
                        variant="ghost"
                        onClick={() => handleDefaultManualApprovalDaysChange(period.value)}
                        className="text-blue-600 hover:bg-blue-50 px-3 py-1"
                      >
                        Set as Default
                      </Button>
                      <Button
                        size="sm"
                        variant="ghost"
                        onClick={() => deleteCustomTimePeriod(period.id)}
                        className="text-red-600 hover:bg-red-50 p-2"
                      >
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <div className="text-center py-12 text-gray-500">
                <Clock className="h-16 w-16 mx-auto mb-4 text-gray-300" />
                <h3 className="text-lg font-medium text-gray-900 mb-2">No Custom Time Periods</h3>
                <p className="text-sm text-gray-600 mb-4">
                  Add custom time periods for users to choose from when creating jobs
                </p>
                <Button
                  onClick={() => setIsAddingTimePeriod(true)}
                  variant="outline"
                  className="text-blue-600 border-blue-200 hover:bg-blue-50"
                >
                  <Plus className="h-4 w-4 mr-2" />
                  Add Your First Time Period
                </Button>
              </div>
            )}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/jobs/[id]/work-proofs/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useParams, useRouter } from "next/navigation"
import { useAuth } from "@/contexts/auth-context"
import { DashboardHeader } from "@/components/dashboard/dashboard-header"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ArrowLeft, Search, Eye, Check, X, Clock, RefreshCw, FileText, ExternalLink, Timer } from "lucide-react"
import Link from "next/link"
import { toast } from "sonner"
import { getJobById, getJobStatusColor, type Job } from "@/lib/jobs"
import {
  getWorkProofsByJob,
  type WorkProof,
  getWorkProofStatusColor,
  getWorkProofStatusLabel,
  isWorkProofDeadlineExpired,
  getWorkProofEffectiveStatus,
} from "@/lib/work-proofs"
import { EnhancedWorkProofModal } from "@/components/work-proofs/enhanced-work-proof-modal"

export default function WorkProofsPage() {
  const params = useParams()
  const router = useRouter()
  const { user } = useAuth()
  const jobId = params.id as string

const [job, setJob] = useState<Job | null>(null)
  const [workProofs, setWorkProofs] = useState<WorkProof[]>([])
  const [loading, setLoading] = useState(true)
  const [searchTerm, setSearchTerm] = useState("")
  const [statusFilter, setStatusFilter] = useState("all")
  const [currentPage, setCurrentPage] = useState(1)
  const [itemsPerPage, setItemsPerPage] = useState(10)
  const [selectedProof, setSelectedProof] = useState<WorkProof | null>(null)
  const [proofModalOpen, setProofModalOpen] = useState(false)
  const [autoRefresh, setAutoRefresh] = useState(true)

useEffect(() => {
    const fetchData = async () => {
      try {
        console.log("[v0] Loading job and work proofs for:", jobId)
        const [jobData, proofsData] = await Promise.all([getJobById(jobId), getWorkProofsByJob(jobId)])

if (!jobData) {
          toast.error("Job not found")
          router.push("/dashboard/jobs")
          return
        }

if (jobData.userId !== user?.id) {
          toast.error("You don't have permission to view these work proofs")
          router.push("/dashboard/jobs")
          return
        }

setJob(jobData)
        setWorkProofs(proofsData)
        console.log("[v0] Loaded work proofs:", proofsData.length)
      } catch (error) {
        console.error("[v0] Error loading data:", error)
        toast.error("Failed to load work proofs")
      } finally {
        setLoading(false)
      }
    }

if (jobId && user?.id) {
      fetchData()
    }
  }, [jobId, user?.id, router])

// Auto-refresh every 30 seconds
  useEffect(() => {
    if (!autoRefresh) return

const interval = setInterval(async () => {
      if (!loading && jobId) {
        try {
          const updatedProofs = await getWorkProofsByJob(jobId)
          setWorkProofs(updatedProofs)
        } catch (error) {
          console.error("[v0] Auto-refresh failed:", error)
        }
      }
    }, 30000)

return () => clearInterval(interval)
  }, [autoRefresh, loading, jobId])

const getFilteredProofs = () => {
    return workProofs.filter((proof) => {
      const matchesSearch =
        proof.worker.firstName.toLowerCase().includes(searchTerm.toLowerCase()) ||
        proof.worker.lastName.toLowerCase().includes(searchTerm.toLowerCase()) ||
        proof.worker.username.toLowerCase().includes(searchTerm.toLowerCase()) ||
        proof.description.toLowerCase().includes(searchTerm.toLowerCase())

let matchesStatus = false
      if (statusFilter === "all") {
        matchesStatus = true
      } else if (statusFilter === "approved") {
        const isExpired = isWorkProofDeadlineExpired(proof, job)
        matchesStatus =
          proof.status === "approved" || proof.status === "auto_approved" || (proof.status === "submitted" && isExpired)
        console.log(
          "[v0] Filtering proof",
          proof.id,
          "for approved - status:",
          proof.status,
          "isExpired:",
          isExpired,
          "matches:",
          matchesStatus,
        )
      } else {
        matchesStatus = proof.status === statusFilter
      }

return matchesSearch && matchesStatus
    })
  }

const filteredProofs = getFilteredProofs()
  const totalPages = Math.ceil(filteredProofs.length / itemsPerPage)
  const paginatedProofs = filteredProofs.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage)

const getStatusCounts = () => {
    console.log("[v0] Calculating status counts for", workProofs.length, "work proofs")

const approvedCount = workProofs.filter((p) => {
      if (p.status === "approved") {
        console.log("[v0] Work proof", p.id, "is manually approved")
        return true
      }

if (p.status === "auto_approved") {
        console.log("[v0] Work proof", p.id, "is auto-approved in database")
        return true
      }

// Also count submitted work proofs with expired deadlines
      const effectiveStatus = getWorkProofEffectiveStatus(p, job)
      const isExpired = isWorkProofDeadlineExpired(p, job)

console.log(
        "[v0] Work proof",
        p.id,
        "- effectiveStatus:",
        effectiveStatus,
        "isExpired:",
        isExpired,
        "status:",
        p.status,
      )

if (p.status === "submitted" && isExpired) {
        console.log("[v0] Work proof", p.id, "should be counted as auto-approved")
        return true
      }

return false
    }).length

console.log("[v0] Final approved count:", approvedCount)

return {
      all: workProofs.length,
      submitted: workProofs.filter((p) => p.status === "submitted" && !isWorkProofDeadlineExpired(p, job)).length,
      approved: approvedCount,
      rejected: workProofs.filter((p) => p.status === "rejected").length,
      revision_requested: workProofs.filter((p) => p.status === "revision_requested").length,
    }
  }

const statusCounts = getStatusCounts()

const handleViewProof = (proof: WorkProof) => {
    setSelectedProof(proof)
    setProofModalOpen(true)
  }

const handleProofUpdate = async () => {
    try {
      const updatedProofs = await getWorkProofsByJob(jobId)
      setWorkProofs(updatedProofs)
      toast.success("Work proofs updated")
    } catch (error) {
      console.error("[v0] Error updating proofs:", error)
      toast.error("Failed to update work proofs")
    }
  }

const refreshProofs = async () => {
    setLoading(true)
    try {
      const updatedProofs = await getWorkProofsByJob(jobId)
      setWorkProofs(updatedProofs)
      toast.success("Work proofs refreshed")
    } catch (error) {
      console.error("[v0] Error refreshing proofs:", error)
      toast.error("Failed to refresh work proofs")
    } finally {
      setLoading(false)
    }
  }

const getApprovalCountdown = (proof: WorkProof) => {
    if (!job || job.approvalType !== "manual" || proof.status !== "submitted") {
      return null
    }

const submittedAt = new Date(proof.submittedAt)
    const approvalDays = job.manualApprovalDays || 3 // Default to 3 days
    const deadlineDate = new Date(submittedAt.getTime() + approvalDays * 24 * 60 * 60 * 1000)
    const now = new Date()
    const timeLeft = deadlineDate.getTime() - now.getTime()

if (timeLeft <= 0) {
      return {
        expired: true,
        message: "Instant Approval Enabled - Payment processing automatically",
        color: "text-green-600",
        autoApproval: true,
      }
    }

const days = Math.floor(timeLeft / (24 * 60 * 60 * 1000))
    const hours = Math.floor((timeLeft % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000))
    const minutes = Math.floor((timeLeft % (60 * 60 * 1000)) / (60 * 1000))
    const seconds = Math.floor((timeLeft % (60 * 1000)) / 1000)

let timeString = ""
    let color = "text-blue-600"

if (days > 0) {
      timeString = `${days}d ${hours}h left`
      color = days <= 1 ? "text-orange-600" : "text-blue-600"
    } else if (hours > 0) {
      timeString = `${hours}h ${minutes}m left`
      color = hours <= 6 ? "text-red-600" : "text-orange-600"
    } else {
      timeString = `${minutes}m ${seconds}s left`
      color = "text-red-600"
    }

return {
      expired: false,
      message: timeString,
      color,
      urgent: hours <= 6,
    }
  }

const handleProcessTimeouts = async () => {
    try {
      const { checkAndProcessTimeouts } = await import("@/lib/work-proofs")
      const result = await checkAndProcessTimeouts()

if (result.processed > 0) {
        toast.success(`Processed ${result.processed} expired work proofs`)
        await refreshProofs()
      } else {
        toast.info("No expired work proofs found")
      }
    } catch (error) {
      console.error("[v0] Error processing timeouts:", error)
      toast.error("Failed to process timeouts")
    }
  }

if (loading) {
    return (
      <>
        <DashboardHeader title="Work Proofs" description="Loading work proofs..." />
        <div className="flex-1 flex items-center justify-center">
          <div className="text-center">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-4"></div>
            <p className="text-gray-600">Loading work proofs...</p>
          </div>
        </div>
      </>
    )
  }

if (!job) {
    return (
      <>
        <DashboardHeader title="Work Proofs" description="Job not found" />
        <div className="flex-1 flex items-center justify-center">
          <div className="text-center">
            <p className="text-gray-600">Job not found</p>
            <Link href="/dashboard/jobs">
              <Button className="mt-4">Back to My Jobs</Button>
            </Link>
          </div>
        </div>
      </>
    )
  }

return (
    <>
      <DashboardHeader title="Work Proofs" description={`Review submissions for "${job.title}"`} />

<div className="flex-1 overflow-auto p-6">
        <div className="space-y-6">
          {/* Header with navigation */}
          <div className="flex items-center justify-between">
            <Link href="/dashboard/jobs">
              <Button variant="outline" size="sm">
                <ArrowLeft className="mr-2 h-4 w-4" />
                Back to My Jobs
              </Button>
            </Link>

<div className="flex items-center space-x-3">
              <div className="flex items-center space-x-2">
                <span className="text-sm text-gray-600">Auto-refresh:</span>
                <Button
                  variant={autoRefresh ? "default" : "outline"}
                  size="sm"
                  onClick={() => setAutoRefresh(!autoRefresh)}
                >
                  {autoRefresh ? "ON" : "OFF"}
                </Button>
              </div>

<Button variant="outline" onClick={refreshProofs} disabled={loading}>
                <RefreshCw className={`mr-2 h-4 w-4 ${loading ? "animate-spin" : ""}`} />
                Refresh
              </Button>

<Button variant="outline" onClick={handleProcessTimeouts}>
                <Timer className="mr-2 h-4 w-4" />
                Process Timeouts
              </Button>
            </div>
          </div>

{/* Job info card */}
          <Card className="border-2 border-blue-100 bg-gradient-to-r from-blue-50 to-purple-50">
            <CardHeader>
              <CardTitle>{job.title}</CardTitle>
            </CardHeader>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-gray-600 mt-1">{job.description}</p>
                  <div className="flex items-center space-x-4 mt-3 text-sm text-gray-500">
                    <span>
                      Budget: ${job.budgetMin} - ${job.budgetMax}
                    </span>
                    <span>Workers needed: {job.workersNeeded}</span>
                    <span>Deadline: {new Date(job.deadline).toLocaleDateString()}</span>
                  </div>
                </div>
                <div className="text-right">
                  <Badge className={`text-lg px-4 py-2 ${getJobStatusColor(job.status)}`}>
                    {job.status.replace("_", " ").toUpperCase()}
                  </Badge>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Status tabs with counts */}
          <Tabs value={statusFilter} onValueChange={setStatusFilter} className="space-y-6">
            <div className="flex items-center justify-between">
              <TabsList className="grid w-full max-w-2xl grid-cols-5">
                <TabsTrigger value="all">All ({statusCounts.all})</TabsTrigger>
                <TabsTrigger value="submitted">
                  <Clock className="h-4 w-4 mr-1" />
                  Pending ({statusCounts.submitted})
                </TabsTrigger>
                <TabsTrigger value="approved">
                  <Check className="h-4 w-4 mr-1" />
                  Approved ({statusCounts.approved})
                </TabsTrigger>
                <TabsTrigger value="rejected">
                  <X className="h-4 w-4 mr-1" />
                  Rejected ({statusCounts.rejected})
                </TabsTrigger>
                <TabsTrigger value="revision_requested">
                  <RefreshCw className="h-4 w-4 mr-1" />
                  Revisions ({statusCounts.revision_requested})
                </TabsTrigger>
              </TabsList>

{/* Search and filters */}
              <div className="flex items-center space-x-3">
                <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 submissions..."
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    className="pl-10 w-64"
                  />
                </div>

<Select value={itemsPerPage.toString()} onValueChange={(value) => setItemsPerPage(Number(value))}>
                  <SelectTrigger className="w-32">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="5">5 per page</SelectItem>
                    <SelectItem value="10">10 per page</SelectItem>
                    <SelectItem value="25">25 per page</SelectItem>
                    <SelectItem value="50">50 per page</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

<TabsContent value={statusFilter} className="space-y-4">
              {paginatedProofs.length > 0 ? (
                <div className="grid gap-4">
                  {paginatedProofs.map((proof) => (
                    <Card key={proof.id} className="hover:shadow-md transition-shadow">
                      <CardHeader>
                        <CardTitle>
                          {proof.worker.firstName} {proof.worker.lastName}
                        </CardTitle>
                      </CardHeader>
                      <CardContent className="p-6">
                        <div className="flex items-start justify-between">
                          <div className="flex items-start space-x-4 flex-1">
                            <Avatar className="h-12 w-12">
                              <AvatarFallback className="bg-blue-100 text-blue-700 font-semibold">
                                {proof.worker.firstName[0]}
                                {proof.worker.lastName[0]}
                              </AvatarFallback>
                            </Avatar>

<div className="flex-1 space-y-2">
                              <div className="flex items-center justify-between">
                                <div>
                                  <p className="text-sm text-gray-600">@{proof.worker.username}</p>
                                </div>

<div className="flex items-center space-x-3">
                                  {(() => {
                                    const effectiveStatus = getWorkProofEffectiveStatus(proof, job)
                                    const isExpired = isWorkProofDeadlineExpired(proof, job)

if (effectiveStatus === "auto_approved" && isExpired) {
                                      return (
                                        <Badge className="bg-green-100 text-green-800">
                                          Auto-Approved (Deadline Expired)
                                        </Badge>
                                      )
                                    } else {
                                      return (
                                        <Badge className={getWorkProofStatusColor(proof.status)}>
                                          {getWorkProofStatusLabel(proof.status)}
                                        </Badge>
                                      )
                                    }
                                  })()}
                                  <div className="text-right">
                                    <div className="text-xl font-bold text-green-600">
                                      ${proof.paymentAmount.toFixed(2)}
                                    </div>
                                    <div className="text-xs text-gray-500">Payment Amount</div>
                                  </div>
                                </div>
                              </div>

{(() => {
                                const countdown = getApprovalCountdown(proof)
                                if (countdown && job?.approvalType === "manual") {
                                  return (
                                    <div
                                      className={`flex items-center space-x-2 p-3 rounded-lg border-2 ${
                                        countdown.expired
                                          ? countdown.autoApproval
                                            ? "bg-green-50 border-green-200"
                                            : "bg-orange-50 border-orange-200"
                                          : countdown.urgent
                                            ? "bg-red-50 border-red-200"
                                            : "bg-blue-50 border-blue-200"
                                      }`}
                                    >
                                      <Timer className={`h-4 w-4 ${countdown.color}`} />
                                      <div className="flex-1">
                                        <div className={`font-semibold ${countdown.color}`}>
                                          {countdown.expired
                                            ? countdown.autoApproval
                                              ? "Instant Approval Enabled"
                                              : "Review Deadline Expired"
                                            : "Manual Review Countdown"}
                                        </div>
                                        <div className={`text-sm ${countdown.color}`}>
                                          {countdown.expired
                                            ? countdown.autoApproval
                                              ? "Payment will be processed automatically - works like instant approval"
                                              : "Manual review required - Payment will be processed after approval"
                                            : `${countdown.message} until auto-payment`}
                                        </div>
                                      </div>
                                      {!countdown.expired && countdown.urgent && (
                                        <div className="text-xs bg-red-100 text-red-800 px-2 py-1 rounded font-medium">
                                          URGENT
                                        </div>
                                      )}
                                      {countdown.expired && countdown.autoApproval && (
                                        <div className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded font-medium">
                                          AUTO-APPROVAL
                                        </div>
                                      )}
                                    </div>
                                  )
                                }
                                return null
                              })()}

<div className="bg-gray-50 rounded-lg p-3">
                                <h4 className="font-medium text-gray-900 mb-1">{proof.title}</h4>
                                <p className="text-gray-700 text-sm line-clamp-2">{proof.description}</p>
                              </div>

<div className="flex items-center justify-between">
                                <div className="flex items-center space-x-4 text-sm text-gray-500">
                                  <span>Submitted: {new Date(proof.submittedAt).toLocaleDateString()}</span>
                                  {proof.screenshots && proof.screenshots.length > 0 && (
                                    <span className="flex items-center">
                                      <FileText className="h-4 w-4 mr-1" />
                                      {proof.screenshots.length} files
                                    </span>
                                  )}
                                  {proof.proofLinks && proof.proofLinks.length > 0 && (
                                    <span className="flex items-center">
                                      <ExternalLink className="h-4 w-4 mr-1" />
                                      {proof.proofLinks.length} links
                                    </span>
                                  )}
                                </div>

<Button
                                  onClick={() => handleViewProof(proof)}
                                  className="bg-blue-600 hover:bg-blue-700"
                                >
                                  <Eye className="mr-2 h-4 w-4" />
                                  Review Submission
                                </Button>
                              </div>
                            </div>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  ))}
                </div>
              ) : (
                <div className="text-center py-12">
                  <FileText className="h-16 w-16 text-gray-300 mx-auto mb-4" />
                  <h3 className="text-xl font-semibold text-gray-900 mb-2">
                    {statusFilter === "all"
                      ? "No Work Submissions Yet"
                      : `No ${statusFilter.replace("_", " ")} Submissions`}
                  </h3>
                  <p className="text-gray-600">
                    {statusFilter === "all"
                      ? "When workers submit their completed work, you'll be able to review it here."
                      : `No submissions with ${statusFilter.replace("_", " ")} status found.`}
                  </p>
                </div>
              )}

{/* Pagination */}
              {totalPages > 1 && (
                <div className="flex items-center justify-between">
                  <div className="text-sm text-gray-600">
                    Showing {(currentPage - 1) * itemsPerPage + 1} to{" "}
                    {Math.min(currentPage * itemsPerPage, filteredProofs.length)} of {filteredProofs.length} submissions
                  </div>
                  <div className="flex items-center space-x-2">
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => setCurrentPage((prev) => Math.max(1, prev - 1))}
                      disabled={currentPage === 1}
                    >
                      Previous
                    </Button>

<div className="flex items-center space-x-1">
                      {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
                        const page = i + 1
                        return (
                          <Button
                            key={page}
                            variant={currentPage === page ? "default" : "outline"}
                            size="sm"
                            onClick={() => setCurrentPage(page)}
                            className="w-8 h-8 p-0"
                          >
                            {page}
                          </Button>
                        )
                      })}
                    </div>

<Button
                      variant="outline"
                      size="sm"
                      onClick={() => setCurrentPage((prev) => Math.min(totalPages, prev + 1))}
                      disabled={currentPage === totalPages}
                    >
                      Next
                    </Button>
                  </div>
                </div>
              )}
            </TabsContent>
          </Tabs>
        </div>
      </div>

{/* Enhanced Work Proof Modal */}
      <EnhancedWorkProofModal
        proof={selectedProof}
        isOpen={proofModalOpen}
        onClose={() => {
          setProofModalOpen(false)
          setSelectedProof(null)
        }}
        onUpdate={handleProofUpdate}
        userRole="employer"
      />
    </>
  )
}
[V0_FILE]sql:file="scripts/18-job-reservation-system.sql" isMerged="true"
-- Job Reservation System
-- Allows users to reserve microjobs for a specified time period

-- Job reservations table
CREATE TABLE job_reservations (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    job_id UUID NOT NULL REFERENCES microjobs(id) ON DELETE CASCADE,
    user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    reserved_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    expires_at TIMESTAMP WITH TIME ZONE NOT NULL,
    status VARCHAR(20) DEFAULT 'active', -- 'active', 'expired', 'completed', 'cancelled'
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    UNIQUE(job_id) -- Only one active reservation per job
);

-- Admin settings for reservation system
CREATE TABLE reservation_settings (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    is_enabled BOOLEAN DEFAULT TRUE,
    default_reservation_hours INTEGER DEFAULT 1,
    max_reservation_hours INTEGER DEFAULT 24,
    max_concurrent_reservations INTEGER DEFAULT 5, -- Max jobs a user can reserve at once
    notification_threshold INTEGER DEFAULT 3, -- Notify admin if user has this many expired reservations
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Track user reservation violations for admin notifications
CREATE TABLE reservation_violations (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    violation_type VARCHAR(50) NOT NULL, -- 'multiple_expired', 'excessive_reservations'
    violation_count INTEGER DEFAULT 1,
    details JSONB, -- Store additional violation details
    is_resolved BOOLEAN DEFAULT FALSE,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    resolved_at TIMESTAMP WITH TIME ZONE
);

-- Add reservation-related columns to microjobs table
ALTER TABLE microjobs 
ADD COLUMN is_reserved BOOLEAN DEFAULT FALSE,
ADD COLUMN reserved_by UUID REFERENCES users(id),
ADD COLUMN reserved_until TIMESTAMP WITH TIME ZONE;

-- Indexes for better performance
CREATE INDEX idx_job_reservations_job_id ON job_reservations(job_id);
CREATE INDEX idx_job_reservations_user_id ON job_reservations(user_id);
CREATE INDEX idx_job_reservations_expires_at ON job_reservations(expires_at);
CREATE INDEX idx_job_reservations_status ON job_reservations(status);
CREATE INDEX idx_microjobs_is_reserved ON microjobs(is_reserved);
CREATE INDEX idx_microjobs_reserved_until ON microjobs(reserved_until);
CREATE INDEX idx_reservation_violations_user_id ON reservation_violations(user_id);

-- Insert default reservation settings
INSERT INTO reservation_settings (is_enabled, default_reservation_hours, max_reservation_hours, max_concurrent_reservations, notification_threshold)
VALUES (TRUE, 1, 24, 5, 3);

-- Function to automatically expire reservations
CREATE OR REPLACE FUNCTION expire_job_reservations()
RETURNS void AS $$
BEGIN
    -- Update expired reservations
    UPDATE job_reservations 
    SET status = 'expired', updated_at = NOW()
    WHERE status = 'active' AND expires_at < NOW();
    
    -- Update microjobs to remove expired reservations
    UPDATE microjobs 
    SET is_reserved = FALSE, reserved_by = NULL, reserved_until = NULL, updated_at = NOW()
    WHERE is_reserved = TRUE AND reserved_until < NOW();
    
    -- Create violation records for users with multiple expired reservations
    INSERT INTO reservation_violations (user_id, violation_type, violation_count, details)
    SELECT 
        user_id,
        'multiple_expired',
        COUNT(*),
        jsonb_build_object('expired_jobs', array_agg(job_id), 'date', NOW())
    FROM job_reservations 
    WHERE status = 'expired' 
        AND updated_at >= NOW() - INTERVAL '1 hour' -- Only recent expirations
    GROUP BY user_id
    HAVING COUNT(*) >= (SELECT notification_threshold FROM reservation_settings LIMIT 1)
    ON CONFLICT DO NOTHING;
END;
$$ LANGUAGE plpgsql;
[V0_FILE]typescript:file="app/api/admin/reservation-settings/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { getReservationSettings, updateReservationSettings } from "@/lib/local-reservation-utils"

export async function GET() {
  try {
    const settings = getReservationSettings()

return NextResponse.json({
      isEnabled: settings.isEnabled,
      defaultReservationHours: Math.round(settings.defaultReservationMinutes / 60),
      defaultReservationMinutes: settings.defaultReservationMinutes,
      maxReservationHours: Math.round(settings.maxReservationMinutes / 60),
      maxReservationMinutes: settings.maxReservationMinutes,
      maxConcurrentReservations: settings.maxConcurrentReservations,
    })
  } catch (error) {
    console.error("Error in reservation settings GET:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

export async function POST(request: NextRequest) {
  try {
    const updates = await request.json()

const settingsUpdate: any = {}

if (updates.isEnabled !== undefined) {
      settingsUpdate.isEnabled = updates.isEnabled
    }

if (updates.defaultReservationHours !== undefined) {
      settingsUpdate.defaultReservationMinutes = updates.defaultReservationHours * 60
    }

if (updates.defaultReservationMinutes !== undefined) {
      settingsUpdate.defaultReservationMinutes = updates.defaultReservationMinutes
    }

if (updates.maxReservationHours !== undefined) {
      settingsUpdate.maxReservationMinutes = updates.maxReservationHours * 60
    }

if (updates.maxReservationMinutes !== undefined) {
      settingsUpdate.maxReservationMinutes = updates.maxReservationMinutes
    }

if (updates.maxConcurrentReservations !== undefined) {
      settingsUpdate.maxConcurrentReservations = updates.maxConcurrentReservations
    }

const updatedSettings = updateReservationSettings(settingsUpdate)

return NextResponse.json({
      isEnabled: updatedSettings.isEnabled,
      defaultReservationHours: Math.round(updatedSettings.defaultReservationMinutes / 60),
      defaultReservationMinutes: updatedSettings.defaultReservationMinutes,
      maxReservationHours: Math.round(updatedSettings.maxReservationMinutes / 60),
      maxReservationMinutes: updatedSettings.maxReservationMinutes,
      maxConcurrentReservations: updatedSettings.maxConcurrentReservations,
    })
  } catch (error) {
    console.error("Error in reservation settings POST:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/jobs/reserve/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { createReservation, getReservationSettings } from "@/lib/local-reservation-utils"

export async function POST(request: NextRequest) {
  try {
    const { jobId, reservationMinutes, userId } = await request.json()

if (!userId) {
      return NextResponse.json({ error: "User ID required" }, { status: 401 })
    }

const settings = getReservationSettings()

if (!settings.isEnabled) {
      return NextResponse.json({ error: "Job reservation is currently disabled" }, { status: 400 })
    }

const reservation = createReservation(jobId, userId, reservationMinutes || settings.defaultReservationMinutes)

if (!reservation) {
      return NextResponse.json({ error: "Failed to create reservation" }, { status: 500 })
    }

return NextResponse.json({
      success: true,
      reservation,
      expiresAt: reservation.expiresAt,
    })
  } catch (error) {
    console.error("Reservation API error:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/cron/expire-reservations/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { createClient } from "@/lib/supabase/server"

export async function GET(request: NextRequest) {
  try {
    const supabase = createClient()

// Verify this is a legitimate cron request (you can add auth headers here)
    const authHeader = request.headers.get("authorization")
    if (authHeader !== `Bearer ${process.env.CRON_SECRET}`) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

console.log("[CRON] Starting reservation expiry cleanup...")

// Get all active reservations that have expired
    const { data: expiredReservations, error: fetchError } = await supabase
      .from("job_reservations")
      .select(`
        id,
        job_id,
        user_id,
        expires_at,
        microjobs (
          title,
          budget_max
        )
      `)
      .eq("status", "active")
      .lt("expires_at", new Date().toISOString())

if (fetchError) {
      console.error("[CRON] Error fetching expired reservations:", fetchError)
      return NextResponse.json({ error: "Failed to fetch reservations" }, { status: 500 })
    }

if (!expiredReservations || expiredReservations.length === 0) {
      console.log("[CRON] No expired reservations found")
      return NextResponse.json({
        success: true,
        message: "No expired reservations found",
        processed: 0,
      })
    }

console.log(`[CRON] Found ${expiredReservations.length} expired reservations`)

// Update expired reservations
    const { error: updateReservationsError } = await supabase
      .from("job_reservations")
      .update({
        status: "expired",
        updated_at: new Date().toISOString(),
      })
      .in(
        "id",
        expiredReservations.map((r) => r.id),
      )

if (updateReservationsError) {
      console.error("[CRON] Error updating reservations:", updateReservationsError)
      return NextResponse.json({ error: "Failed to update reservations" }, { status: 500 })
    }

// Update microjobs to remove reservation status
    const jobIds = expiredReservations.map((r) => r.job_id)
    const { error: updateJobsError } = await supabase
      .from("microjobs")
      .update({
        is_reserved: false,
        reserved_by: null,
        reserved_until: null,
        updated_at: new Date().toISOString(),
      })
      .in("id", jobIds)

if (updateJobsError) {
      console.error("[CRON] Error updating jobs:", updateJobsError)
      return NextResponse.json({ error: "Failed to update jobs" }, { status: 500 })
    }

// Track users with multiple expired reservations for admin notifications
    const userExpirationCounts = expiredReservations.reduce(
      (acc, reservation) => {
        acc[reservation.user_id] = (acc[reservation.user_id] || 0) + 1
        return acc
      },
      {} as Record<string, number>,
    )

// Get notification threshold from settings
    const { data: settings } = await supabase.from("reservation_settings").select("notification_threshold").single()

const notificationThreshold = settings?.notification_threshold || 3

// Create violation records for users exceeding threshold
    const violationPromises = Object.entries(userExpirationCounts)
      .filter(([_, count]) => count >= notificationThreshold)
      .map(([userId, count]) =>
        supabase.from("reservation_violations").insert({
          user_id: userId,
          violation_type: "multiple_expired",
          violation_count: count,
          details: {
            expired_jobs: expiredReservations
              .filter((r) => r.user_id === userId)
              .map((r) => ({
                job_id: r.job_id,
                job_title: r.microjobs?.title,
                expired_at: r.expires_at,
              })),
            date: new Date().toISOString(),
          },
          is_resolved: false,
        }),
      )

if (violationPromises.length > 0) {
      await Promise.all(violationPromises)
      console.log(`[CRON] Created ${violationPromises.length} violation records`)
    }

console.log(`[CRON] Successfully processed ${expiredReservations.length} expired reservations`)

return NextResponse.json({
      success: true,
      message: `Processed ${expiredReservations.length} expired reservations`,
      processed: expiredReservations.length,
      violations: violationPromises.length,
    })
  } catch (error) {
    console.error("[CRON] Reservation expiry error:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

// Also allow POST for manual triggering
export async function POST(request: NextRequest) {
  return GET(request)
}
[V0_FILE]typescript:file="app/api/reservations/check-expiry/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { checkReservationStatus, cleanupExpiredReservations } from "@/lib/local-reservation-utils"

export async function POST(request: NextRequest) {
  try {
    const { jobIds } = await request.json()

if (!jobIds || !Array.isArray(jobIds)) {
      return NextResponse.json({ error: "Invalid job IDs provided" }, { status: 400 })
    }

cleanupExpiredReservations()

const updates = []

for (const jobId of jobIds) {
      const status = await checkReservationStatus(jobId)

if (status.expired) {
        updates.push({
          jobId,
          expired: true,
        })
      } else if (status.isReserved && status.timeLeft) {
        updates.push({
          jobId,
          expired: false,
          timeLeft: status.timeLeft,
        })
      } else {
        updates.push({
          jobId,
          expired: false,
        })
      }
    }

return NextResponse.json({
      success: true,
      updates,
    })
  } catch (error) {
    console.error("Reservation check error:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/admin/reservations/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescript:file="app/api/admin/reservation-violations/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { getUser } from "@/lib/auth"
import { getLocalReservations, getLocalReservationViolations } from "@/lib/local-reservation-utils"
import { getAllUsers } from "@/lib/auth"
import { getStoredJobs } from "@/lib/jobs"

export async function GET(request: NextRequest) {
  try {
    const user = await getUser()
    if (!user || user.userType !== "admin") {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const { searchParams } = new URL(request.url)
    const type = searchParams.get("type")

if (type === "active") {
      const reservations = getLocalReservations()
      const users = getAllUsers()
      const jobs = getStoredJobs()

const activeReservations = reservations
        .filter((reservation) => {
          const now = new Date()
          const expires = new Date(reservation.expiresAt)
          return expires > now // Only active (not expired) reservations
        })
        .map((reservation) => {
          const now = new Date()
          const expires = new Date(reservation.expiresAt)
          const timeLeft = expires.getTime() - now.getTime()

let timeRemaining = "Expired"
          if (timeLeft > 0) {
            const hours = Math.floor(timeLeft / (1000 * 60 * 60))
            const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60))
            timeRemaining = `${hours}h ${minutes}m`
          }

const user = users.find((u) => u.id === reservation.userId)
          const job = jobs.find((j) => j.id === reservation.jobId)

return {
            id: reservation.id,
            jobId: reservation.jobId,
            jobTitle: job?.title || "Unknown Job",
            userId: reservation.userId,
            userEmail: user?.email || "Unknown",
            userName: user ? `${user.firstName} ${user.lastName}`.trim() : "Unknown User",
            reservedAt: reservation.reservedAt,
            expiresAt: reservation.expiresAt,
            timeRemaining,
            status: timeLeft <= 0 ? "expired" : timeLeft <= 10 * 60 * 1000 ? "expiring" : "active",
          }
        })
        .sort((a, b) => new Date(a.expiresAt).getTime() - new Date(b.expiresAt).getTime())

return NextResponse.json({ activeReservations })
    }

const violations = getLocalReservationViolations()
    const users = getAllUsers()

const userViolations = violations
      .map((violation) => {
        const user = users.find((u) => u.id === violation.userId)

return {
          id: violation.id,
          userId: violation.userId,
          userEmail: user?.email || "Unknown",
          userName: user ? `${user.firstName} ${user.lastName}`.trim() : "Unknown User",
          violationCount: violation.violationCount,
          lastViolationAt: violation.lastViolationAt,
          totalReservations: violation.totalReservations,
          expiredReservations: violation.expiredReservations,
          violationRate:
            violation.totalReservations > 0 ? violation.expiredReservations / violation.totalReservations : 0,
        }
      })
      .sort((a, b) => b.violationCount - a.violationCount)

return NextResponse.json({ violations: userViolations })
  } catch (error) {
    console.error("Error fetching reservation violations:", error)
    return NextResponse.json({ error: "Failed to fetch violations" }, { status: 500 })
  }
}

export async function DELETE(request: NextRequest) {
  try {
    const user = await getUser()
    if (!user || user.userType !== "admin") {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const { userId } = await request.json()

const violations = getLocalReservationViolations()
    const updatedViolations = violations.filter((v) => v.userId !== userId)

if (typeof window !== "undefined") {
      localStorage.setItem("reservation_violations", JSON.stringify(updatedViolations))
    }

return NextResponse.json({ success: true })
  } catch (error) {
    console.error("Error resetting user violations:", error)
    return NextResponse.json({ error: "Failed to reset violations" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="lib/notification-utils.ts" isMerged="true"
interface NotificationData {
  type: "reservation_violation" | "system_alert"
  userId?: string
  userEmail?: string
  userName?: string
  violationCount?: number
  violationRate?: number
  message: string
  timestamp: string
}

export async function sendAdminNotification(data: NotificationData) {
  const notifications = []

// Console notification (always enabled for debugging)
  console.log(`[ADMIN NOTIFICATION] ${data.type.toUpperCase()}:`, data)

// Email notification
  if (process.env.ENABLE_EMAIL_NOTIFICATIONS === "true" && process.env.ADMIN_EMAIL) {
    try {
      // In a real implementation, you would integrate with an email service like SendGrid, Resend, etc.
      console.log(`[EMAIL] Would send notification to ${process.env.ADMIN_EMAIL}:`, data.message)
      notifications.push("email")
    } catch (error) {
      console.error("Failed to send email notification:", error)
    }
  }

// Webhook notification
  if (process.env.ENABLE_WEBHOOK_NOTIFICATIONS === "true" && process.env.ADMIN_WEBHOOK_URL) {
    try {
      const response = await fetch(process.env.ADMIN_WEBHOOK_URL, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          text: `🚨 Admin Alert: ${data.message}`,
          attachments: [
            {
              color: data.type === "reservation_violation" ? "warning" : "danger",
              fields: [
                {
                  title: "Type",
                  value: data.type,
                  short: true,
                },
                {
                  title: "Timestamp",
                  value: data.timestamp,
                  short: true,
                },
                ...(data.userId
                  ? [
                      {
                        title: "User",
                        value: `${data.userName} (${data.userEmail})`,
                        short: false,
                      },
                    ]
                  : []),
                ...(data.violationCount
                  ? [
                      {
                        title: "Violation Details",
                        value: `Count: ${data.violationCount}, Rate: ${((data.violationRate || 0) * 100).toFixed(1)}%`,
                        short: false,
                      },
                    ]
                  : []),
              ],
            },
          ],
        }),
      })

if (response.ok) {
        notifications.push("webhook")
      } else {
        console.error("Webhook notification failed:", response.statusText)
      }
    } catch (error) {
      console.error("Failed to send webhook notification:", error)
    }
  }

return notifications
}

export async function notifyReservationViolation(
  userId: string,
  userEmail: string,
  userName: string,
  violationCount: number,
  violationRate: number,
) {
  const severity = violationRate >= 0.8 ? "CRITICAL" : violationRate >= 0.5 ? "HIGH" : "MEDIUM"

await sendAdminNotification({
    type: "reservation_violation",
    userId,
    userEmail,
    userName,
    violationCount,
    violationRate,
    message: `${severity} reservation violation: User ${userName} has ${violationCount} violations with ${(violationRate * 100).toFixed(1)}% violation rate`,
    timestamp: new Date().toISOString(),
  })
}

export async function notifySystemAlert(message: string) {
  await sendAdminNotification({
    type: "system_alert",
    message,
    timestamp: new Date().toISOString(),
  })
}
[V0_FILE]typescript:file="lib/chat.ts" isQuickEdit="true" isMerged="true"
// Chat system types and utilities
export interface User {
  id: string
  name: string
  avatar?: string
  userType: "user" | "admin" | "buyer"
  isOnline?: boolean
}

export interface Message {
  id: string
  chatId: string
  senderId: string
  sender: User
  content: string
  messageType: "text" | "image" | "file" | "system"
  fileUrl?: string
  fileName?: string
  fileSize?: number
  replyToId?: string
  replyTo?: Message
  isEdited: boolean
  editedAt?: Date
  createdAt: Date
  status: "sent" | "delivered" | "read"
}

export interface Chat {
  id: string
  type: "direct" | "order" | "admin_support"
  title?: string
  participants: User[]
  lastMessage?: Message
  lastMessageAt: Date
  unreadCount: number
  isActive: boolean
  orderId?: string
  jobId?: string
  marketplaceItemId?: string
}

// Mock data for development
export const mockUsers: User[] = []
export const mockMessages: Message[] = []
export const mockChats: Chat[] = []

// Utility functions
export const formatMessageTime = (date: Date | string): string => {
  const dateObj = typeof date === "string" ? new Date(date) : date
  const now = new Date()
  const diff = now.getTime() - dateObj.getTime()
  const minutes = Math.floor(diff / 60000)
  const hours = Math.floor(diff / 3600000)
  const days = Math.floor(diff / 86400000)

if (minutes < 1) return "Just now"
  if (minutes < 60) return `${minutes}m ago`
  if (hours < 24) return `${hours}h ago`
  if (days < 7) return `${days}d ago`

return dateObj.toLocaleDateString()
}

export const getUnreadCount = (chatId: string): number => {
  const chat = getStoredChats().find((c) => c.id === chatId)
  return chat?.unreadCount || 0
}

// Database integration functions
export const saveMessage = async (message: Omit<Message, "id" | "createdAt">): Promise<Message> => {
  const newMessage: Message = {
    ...message,
    id: Date.now().toString(),
    createdAt: new Date(),
  }

// Store in localStorage for persistence
  const messages = getStoredMessages()
  messages.push(newMessage)
  localStorage.setItem("chat-messages", JSON.stringify(messages))

if (message.messageType === "text" && message.content.trim()) {
    const { updateLastTextActivity } = await import("./file-management")
    updateLastTextActivity(message.chatId)
  }

console.log("[v0] Message saved:", newMessage.id)
  return newMessage
}

export const getStoredMessages = (): Message[] => {
  try {
    const stored = localStorage.getItem("chat-messages")
    return stored ? JSON.parse(stored) : []
  } catch (error) {
    console.error("[v0] Error loading messages:", error)
    return []
  }
}

export const getMessagesByChatId = (chatId: string): Message[] => {
  const messages = getStoredMessages()
  return messages
    .filter((m) => m.chatId === chatId)
    .map((message) => ({
      ...message,
      createdAt: typeof message.createdAt === "string" ? new Date(message.createdAt) : message.createdAt,
      editedAt:
        message.editedAt && typeof message.editedAt === "string" ? new Date(message.editedAt) : message.editedAt,
    }))
}

export const saveChat = async (chat: Chat): Promise<Chat> => {
  const chats = getStoredChats()
  const existingIndex = chats.findIndex((c) => c.id === chat.id)

if (existingIndex >= 0) {
    chats[existingIndex] = chat
  } else {
    chats.push(chat)
  }

localStorage.setItem("chat-conversations", JSON.stringify(chats))
  console.log("[v0] Chat saved:", chat.id)
  return chat
}

export const getStoredChats = (): Chat[] => {
  try {
    const stored = localStorage.getItem("chat-conversations")
    const chats = stored ? JSON.parse(stored) : []

// Convert date strings back to Date objects
    return chats.map((chat: any) => ({
      ...chat,
      lastMessageAt: new Date(chat.lastMessageAt),
      lastMessage: chat.lastMessage
        ? {
            ...chat.lastMessage,
            createdAt: new Date(chat.lastMessage.createdAt),
          }
        : undefined,
    }))
  } catch (error) {
    console.error("[v0] Error loading chats:", error)
    return []
  }
}

// Updated createJobChat to use persistent storage
export const createJobChat = async (jobId: string, clientId: string, freelancerId: string) => {
  console.log("[v0] Creating job chat for:", { jobId, clientId, freelancerId })

const existingChats = getStoredChats()
  const existingChat = existingChats.find(
    (chat) =>
      chat.jobId === jobId &&
      chat.participants.some((p) => p.id === clientId) &&
      chat.participants.some((p) => p.id === freelancerId),
  )

if (existingChat) {
    console.log("[v0] Found existing job chat:", existingChat.id)
    return existingChat
  }

let jobTitle = "Job Discussion"
  try {
    const { getJobById } = await import("@/lib/jobs")
    const job = await getJobById(jobId)
    if (job) {
      jobTitle = `${job.title.substring(0, 30)}${job.title.length > 30 ? "..." : ""}`
    }
  } catch (error) {
    console.warn("[v0] Could not load job details for chat title")
  }

const clientParticipant: User = {
    id: clientId,
    name: "Client",
    userType: "user" as const,
    isOnline: true,
  }

const freelancerParticipant: User = {
    id: freelancerId,
    name: "Job Poster",
    userType: "user" as const,
    isOnline: false,
  }

const newChat: Chat = {
    id: `job-chat-${jobId}-${Date.now()}`,
    type: "direct",
    title: jobTitle,
    participants: [clientParticipant, freelancerParticipant],
    lastMessageAt: new Date(),
    unreadCount: 0,
    isActive: true,
    jobId,
  }

if (!newChat.id || !newChat.jobId) {
    throw new Error("Failed to create valid chat object")
  }

await saveChat(newChat)
  console.log("[v0] Job chat created successfully:", newChat.id)
  return newChat
}

// Updated createOrderChat to use persistent storage
export const createOrderChat = async (orderId: string, buyerId: string, sellerId: string) => {
  const newChat: Chat = {
    id: `order-chat-${Date.now()}`,
    type: "order",
    title: `Order Discussion`,
    participants: [
      { id: buyerId, name: "Buyer", userType: "user", isOnline: true },
      { id: sellerId, name: "Seller", userType: "user", isOnline: false },
    ],
    lastMessageAt: new Date(),
    unreadCount: 0,
    isActive: true,
    orderId,
  }

await saveChat(newChat)
  return newChat
}

// Updated createServiceInquiryChat to use persistent storage
export const createServiceInquiryChat = async (serviceId: string, buyerId: string, sellerId: string) => {
  const newChat: Chat = {
    id: `service-chat-${Date.now()}`,
    type: "direct",
    title: `Service Inquiry`,
    participants: [
      { id: buyerId, name: "Buyer", userType: "user", isOnline: true },
      { id: sellerId, name: "Seller", userType: "user", isOnline: false },
    ],
    lastMessageAt: new Date(),
    unreadCount: 0,
    isActive: true,
    marketplaceItemId: serviceId,
  }

await saveChat(newChat)
  console.log("[v0] Service inquiry chat created successfully:", newChat.id)
  return newChat
}

export const createChat = async (options: {
  type: "direct" | "order" | "admin_support"
  title: string
  participants: User[]
  jobId?: string
  orderId?: string
}) => {
  const newChat: Chat = {
    id: `${options.type}-chat-${Date.now()}`,
    type: options.type,
    title: options.title,
    participants: options.participants,
    lastMessageAt: new Date(),
    unreadCount: 0,
    isActive: true,
    jobId: options.jobId,
    orderId: options.orderId,
  }

await saveChat(newChat)
  console.log("[v0] Chat created successfully:", newChat.id)
  return newChat
}

export const getChatMessages = async (chatId: string) => {
  return getMessagesByChatId(chatId)
}

export const sendMessage = async (chatId: string, senderId: string, content: string, files?: File[]) => {
  const currentUser = JSON.parse(localStorage.getItem("currentUser") || "{}")

const sender: User = {
    id: senderId,
    name: `${currentUser.firstName || "User"} ${currentUser.lastName || ""}`.trim(),
    userType: "user",
    isOnline: true,
  }

const message = await saveMessage({
    chatId,
    senderId,
    sender,
    content,
    messageType: files && files.length > 0 ? "file" : "text",
    isEdited: false,
    status: "sent",
  })

// Update chat's last message
  const chats = getStoredChats()
  const chatIndex = chats.findIndex((c) => c.id === chatId)
  if (chatIndex >= 0) {
    chats[chatIndex].lastMessage = message
    chats[chatIndex].lastMessageAt = message.createdAt
    localStorage.setItem("chat-conversations", JSON.stringify(chats))
  }

return message
}
[V0_FILE]typescriptreact:file="app/dashboard/applied-jobs/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescript:file="lib/applications.ts" isQuickEdit="true" isMerged="true"
export interface JobApplication {
  id: string
  jobId: string
  workerId: string
  status: "pending" | "accepted" | "rejected" | "completed" | "cancelled"
  coverLetter?: string
  proposedPrice?: number
  estimatedDuration?: string
  createdAt: string
  updatedAt: string
  acceptedAt?: string
  completedAt?: string
  cancelledAt?: string
  rejectedAt?: string
  rejectionReason?: string
  // Relations
  job?: any
  worker?: any
}

function getApplicationsFromStorage(): JobApplication[] {
  if (typeof window === "undefined") return []
  try {
    const stored = localStorage.getItem("marketplace-applications")
    return stored ? JSON.parse(stored) : []
  } catch (error) {
    console.error("Error reading applications from localStorage:", error)
    return []
  }
}

function saveApplicationsToStorage(applications: JobApplication[]): void {
  if (typeof window === "undefined") return
  try {
    localStorage.setItem("marketplace-applications", JSON.stringify(applications))
  } catch (error) {
    console.error("Error saving applications to localStorage:", error)
  }
}

function getJobById(jobId: string): any {
  if (typeof window === "undefined") return null
  try {
    const jobs = JSON.parse(localStorage.getItem("jobs_database") || "[]")
    return jobs.find((job: any) => job.id === jobId)
  } catch (error) {
    console.error("Error fetching job:", error)
    return null
  }
}

function getUserById(userId: string): any {
  if (typeof window === "undefined") return null
  try {
    const users = JSON.parse(localStorage.getItem("users_database") || "[]")
    return users.find((user: any) => user.id === userId)
  } catch (error) {
    console.error("Error fetching user:", error)
    return null
  }
}

export async function getApplicationsByUser(userId: string): Promise<JobApplication[]> {
  try {
    const applications = getApplicationsFromStorage()
    const userApplications = applications
      .filter((app) => app.workerId === userId)
      .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())

// Add job and worker relations
    return userApplications.map((app) => ({
      ...app,
      job: getJobById(app.jobId),
      worker: getUserById(app.workerId),
    }))
  } catch (error) {
    console.error("Error in getApplicationsByUser:", error)
    return []
  }
}

export async function getApplicationById(applicationId: string): Promise<JobApplication | null> {
  try {
    const applications = getApplicationsFromStorage()
    const application = applications.find((app) => app.id === applicationId)

if (!application) return null

return {
      ...application,
      job: getJobById(application.jobId),
      worker: getUserById(application.workerId),
    }
  } catch (error) {
    console.error("Error in getApplicationById:", error)
    return null
  }
}

export async function createJobApplication(application: {
  jobId: string
  workerId: string
  coverLetter?: string
  proposedPrice?: number
  estimatedDuration?: string
}): Promise<JobApplication | null> {
  try {
    const applications = getApplicationsFromStorage()
    const now = new Date().toISOString()

const newApplication: JobApplication = {
      id: `app_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
      jobId: application.jobId,
      workerId: application.workerId,
      status: "pending",
      coverLetter: application.coverLetter,
      proposedPrice: application.proposedPrice,
      estimatedDuration: application.estimatedDuration,
      createdAt: now,
      updatedAt: now,
    }

applications.push(newApplication)
    saveApplicationsToStorage(applications)

return newApplication
  } catch (error) {
    console.error("Error in createJobApplication:", error)
    return null
  }
}

export async function updateApplicationStatus(
  applicationId: string,
  status: JobApplication["status"],
  additionalData?: {
    rejectionReason?: string
  },
): Promise<boolean> {
  try {
    const applications = getApplicationsFromStorage()
    const applicationIndex = applications.findIndex((app) => app.id === applicationId)

if (applicationIndex === -1) return false

const now = new Date().toISOString()
    applications[applicationIndex].status = status
    applications[applicationIndex].updatedAt = now

// Set timestamp fields based on status
    switch (status) {
      case "accepted":
        applications[applicationIndex].acceptedAt = now
        break
      case "rejected":
        applications[applicationIndex].rejectedAt = now
        if (additionalData?.rejectionReason) {
          applications[applicationIndex].rejectionReason = additionalData.rejectionReason
        }
        break
      case "completed":
        applications[applicationIndex].completedAt = now
        break
      case "cancelled":
        applications[applicationIndex].cancelledAt = now
        break
    }

saveApplicationsToStorage(applications)
    return true
  } catch (error) {
    console.error("Error in updateApplicationStatus:", error)
    return false
  }
}

export async function getApplicationsByJob(jobId: string): Promise<JobApplication[]> {
  try {
    const applications = getApplicationsFromStorage()
    const jobApplications = applications
      .filter((app) => app.jobId === jobId)
      .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())

// Add worker relations
    return jobApplications.map((app) => ({
      ...app,
      worker: getUserById(app.workerId),
    }))
  } catch (error) {
    console.error("Error in getApplicationsByJob:", error)
    return []
  }
}

export async function deleteApplication(applicationId: string): Promise<boolean> {
  try {
    const applications = getApplicationsFromStorage()
    const filteredApplications = applications.filter((app) => app.id !== applicationId)

if (filteredApplications.length === applications.length) {
      return false // Application not found
    }

saveApplicationsToStorage(filteredApplications)
    return true
  } catch (error) {
    console.error("Error in deleteApplication:", error)
    return false
  }
}
[V0_FILE]sql:file="scripts/19-admin-settings-table.sql" isMerged="true"
-- Create admin_settings table for persistent admin configuration
CREATE TABLE IF NOT EXISTS admin_settings (
    id SERIAL PRIMARY KEY,
    setting_key VARCHAR(255) UNIQUE NOT NULL,
    setting_value JSONB NOT NULL,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create index for faster lookups
CREATE INDEX IF NOT EXISTS idx_admin_settings_key ON admin_settings(setting_key);

-- Insert default revision settings if they don't exist
INSERT INTO admin_settings (setting_key, setting_value) 
VALUES (
    'revision_settings',
    '{
        "maxRevisionRequests": 2,
        "workerResponseTimeoutValue": 24,
        "workerResponseTimeoutUnit": "hours",
        "enableRevisionWarnings": true,
        "revisionPenaltyEnabled": false,
        "revisionPenaltyAmount": 0
    }'::jsonb
) ON CONFLICT (setting_key) DO NOTHING;
[V0_FILE]plaintext:file=".gitignore" isMerged="true"
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules

# next.js
/.next/
/out/

# production
/build

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*

# env files
.env*
!.env.example

# vercel
.vercel

# typescript
*.tsbuildinfo
next-env.d.ts
[V0_FILE]typescript:file="app/api/admin/feature-settings/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { getUser } from "@/lib/auth"
import { promises as fs } from "fs"
import path from "path"

const SETTINGS_DIR = path.join(process.cwd(), "data", "admin-settings")
const FEATURE_SETTINGS_FILE = path.join(SETTINGS_DIR, "feature-settings.json")

async function ensureSettingsDir() {
  try {
    await fs.mkdir(SETTINGS_DIR, { recursive: true })
  } catch (error) {
    // Directory might already exist
  }
}

export async function GET() {
  try {
    const user = await getUser()
    if (!user || user.userType !== "admin") {
      return NextResponse.json({ error: "Admin access required" }, { status: 403 })
    }

await ensureSettingsDir()

const defaultSettings = {
      enableMicrojobs: true,
      enableMarketplace: true,
      enableWallet: true,
      enableReferrals: true,
      enableReviews: true,
      enableChat: false,
    }

try {
      const fileContent = await fs.readFile(FEATURE_SETTINGS_FILE, "utf-8")
      const settings = JSON.parse(fileContent)
      console.log("[v0] Feature settings API: Successfully loaded local settings")
      return NextResponse.json(settings)
    } catch (error) {
      console.log("[v0] Feature settings file not found, using defaults")
      return NextResponse.json(defaultSettings)
    }
  } catch (error) {
    console.error("Error in feature settings GET:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

export async function POST(request: NextRequest) {
  try {
    const user = await getUser()
    if (!user || user.userType !== "admin") {
      return NextResponse.json({ error: "Admin access required" }, { status: 403 })
    }

const settings = await request.json()

console.log("[v0] API: Saving feature settings for user:", user.id, settings)

// Validate settings structure
    if (!settings || typeof settings !== "object") {
      return NextResponse.json({ error: "Invalid settings data" }, { status: 400 })
    }

await ensureSettingsDir()

const settingsWithTimestamp = {
      ...settings,
      updated_at: new Date().toISOString(),
    }

await fs.writeFile(FEATURE_SETTINGS_FILE, JSON.stringify(settingsWithTimestamp, null, 2))

console.log("[v0] API: Successfully saved feature settings to local file")
    return NextResponse.json({ success: true })
  } catch (error) {
    console.error("Error saving feature settings:", error)
    return NextResponse.json({ error: "Failed to save settings" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="components/wallet/transaction-item.tsx" isQuickEdit="true" isMerged="true"
import { Badge } from "@/components/ui/badge"
import { formatDistanceToNow } from "date-fns"
import { ArrowUpRight, ArrowDownLeft, CreditCard, DollarSign, RefreshCw, MessageCircle } from "lucide-react"
import { TransactionAmount } from "@/components/ui/price-display"
import type { WalletTransaction } from "@/lib/wallet"

interface TransactionItemProps {
  transaction: WalletTransaction
}

const getTransactionIcon = (type: WalletTransaction["type"], referenceType?: string) => {
  if (referenceType === "chat_transfer") {
    return <MessageCircle className="h-4 w-4 text-purple-600" />
  }

switch (type) {
    case "deposit":
      return <ArrowDownLeft className="h-4 w-4 text-green-600" />
    case "withdrawal":
      return <ArrowUpRight className="h-4 w-4 text-red-600" />
    case "earning":
      return <DollarSign className="h-4 w-4 text-green-600" />
    case "payment":
      return <CreditCard className="h-4 w-4 text-blue-600" />
    case "refund":
      return <RefreshCw className="h-4 w-4 text-orange-600" />
    default:
      return <DollarSign className="h-4 w-4 text-gray-600" />
  }
}

const getStatusColor = (status: WalletTransaction["status"]) => {
  switch (status) {
    case "completed":
      return "bg-green-100 text-green-800"
    case "pending":
      return "bg-yellow-100 text-yellow-800"
    case "failed":
      return "bg-red-100 text-red-800"
    default:
      return "bg-gray-100 text-gray-800"
  }
}

export function TransactionItem({ transaction }: TransactionItemProps) {
  const getTransactionDescription = () => {
    if (transaction.referenceType === "chat_transfer") {
      // Extract recipient info from description or referenceId
      const match = transaction.description.match(/to (.+?) $$ID: (.+?)$$/)
      if (match) {
        const [, recipientName, recipientId] = match
        return `Chat transfer to ${recipientName} (ID: ${recipientId})`
      }
      return transaction.description
    }

// Handle job refunds with better formatting
    if (
      transaction.description.includes("Refund for cancelled job") ||
      transaction.description.includes("Refund for rejected work")
    ) {
      const jobIdMatch = transaction.description.match(/job_(\d+)/)
      if (jobIdMatch) {
        const jobId = jobIdMatch[0]
        const isRejected = transaction.description.includes("rejected work")
        const actionType = isRejected ? "Rejected Work" : "Cancelled Job"
        return `Refund for ${actionType}: Job ${jobId.replace("job_", "#")}`
      }
    }

// Handle job creation deposits with better formatting
    if (transaction.description.includes("Job creation deposit for")) {
      const match = transaction.description.match(
        /Job creation deposit for:?\s*(.+?)\s*$$(\d+)\s*workers?\s*×\s*\$?([\d.]+)\s*\+\s*\$?([\d.]+)\s*platform fee$$/,
      )
      if (match) {
        const [, jobName, workerCount, workerRate, platformFee] = match
        const jobId = transaction.referenceId || `job_${Date.now()}`
        return `Job Creation Deposit: "${jobName.trim()}" (ID: ${jobId}) - ${workerCount} workers × $${workerRate} + $${platformFee} platform fee`
      }

// Fallback for simpler format
      const simpleMatch = transaction.description.match(/Job creation deposit for:?\s*(.+?)$/)
      if (simpleMatch) {
        const jobInfo = simpleMatch[1].trim()
        const jobId = transaction.referenceId || "Unknown ID"
        return `Job Creation Deposit: "${jobInfo}" (ID: ${jobId})`
      }
    }

// Handle job completion payments
    if (transaction.description.includes("Job completion payment")) {
      const jobIdMatch = transaction.description.match(/job_(\d+)/)
      if (jobIdMatch) {
        const jobId = jobIdMatch[0]
        return `Job Completion Payment: Job #${jobId.replace("job_", "")} (ID: ${jobId})`
      }
    }

// Handle job application fees
    if (transaction.description.includes("Job application fee")) {
      const jobIdMatch = transaction.description.match(/job_(\d+)/)
      if (jobIdMatch) {
        const jobId = jobIdMatch[0]
        return `Job Application Fee: Job #${jobId.replace("job_", "")} (ID: ${jobId})`
      }
    }

// Handle work proof submissions
    if (transaction.description.includes("Work proof for job")) {
      const jobIdMatch = transaction.description.match(/job_(\d+)/)
      if (jobIdMatch) {
        const jobId = jobIdMatch[0]
        return `Work Proof Submission: Job #${jobId.replace("job_", "")} (ID: ${jobId})`
      }
    }

return transaction.description
  }

return (
    <div className="flex items-center justify-between p-4 border rounded-lg hover:bg-gray-50 transition-colors">
      <div className="flex items-center space-x-3">
        <div className="flex-shrink-0">{getTransactionIcon(transaction.type, transaction.referenceType)}</div>
        <div className="min-w-0 flex-1">
          <p className="text-sm font-medium text-gray-900 truncate">{getTransactionDescription()}</p>
          <div className="flex items-center space-x-2 mt-1">
            <p className="text-xs text-gray-500">
              {formatDistanceToNow(new Date(transaction.createdAt), { addSuffix: true })}
            </p>
            <Badge variant="secondary" className={getStatusColor(transaction.status)}>
              {transaction.status}
            </Badge>
            {transaction.referenceType === "chat_transfer" && (
              <Badge className="bg-purple-100 text-purple-800">Chat Transfer</Badge>
            )}
            {(transaction.description.includes("Job creation deposit") ||
              transaction.description.includes("Job completion") ||
              transaction.description.includes("Job application") ||
              transaction.description.includes("Work proof")) && (
              <Badge className="bg-blue-100 text-blue-800">Job Related</Badge>
            )}
            {(transaction.description.includes("Refund for cancelled") ||
              transaction.description.includes("Refund for rejected")) && (
              <Badge className="bg-orange-100 text-orange-800">Job Refund</Badge>
            )}
          </div>
        </div>
      </div>
      <div className="flex-shrink-0">
        <TransactionAmount amount={transaction.amount} />
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="app/api/reservations/user/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { getUserReservations } from "@/lib/local-reservation-utils"

export async function GET(request: NextRequest) {
  try {
    const { searchParams } = new URL(request.url)
    const userId = searchParams.get("userId")

if (!userId) {
      return NextResponse.json({ error: "User ID required" }, { status: 400 })
    }

const reservations = getUserReservations(userId)

return NextResponse.json({
      success: true,
      reservations,
    })
  } catch (error) {
    console.error("Error fetching user reservations:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/reservations/cancel/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { cancelReservation } from "@/lib/local-reservation-utils"

export async function POST(request: NextRequest) {
  try {
    const { reservationId } = await request.json()

if (!reservationId) {
      return NextResponse.json({ error: "Reservation ID required" }, { status: 400 })
    }

const success = cancelReservation(reservationId)

if (!success) {
      return NextResponse.json({ error: "Failed to cancel reservation" }, { status: 404 })
    }

return NextResponse.json({
      success: true,
      message: "Reservation cancelled successfully",
    })
  } catch (error) {
    console.error("Error cancelling reservation:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/reservations/cleanup/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { cleanupExpiredReservations } from "@/lib/local-reservation-utils"

export async function POST(request: NextRequest) {
  try {
    const expiredReservations = cleanupExpiredReservations()

return NextResponse.json({
      success: true,
      message: `Cleaned up ${expiredReservations.length} expired reservations`,
      processed: expiredReservations.length,
      expiredReservations,
    })
  } catch (error) {
    console.error("Cleanup error:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

// Also allow GET for easy testing
export async function GET(request: NextRequest) {
  return POST(request)
}
[V0_FILE]typescriptreact:file="app/jobs/[id]/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useParams, useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Separator } from "@/components/ui/separator"
import { Textarea } from "@/components/ui/textarea"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { getJobById, submitJobApplication, getUserApplications, type Job } from "@/lib/jobs"
import { submitWorkProof, getWorkProofsByJob } from "@/lib/work-proofs"
import { createJobChat } from "@/lib/chat"
import { useAuth } from "@/contexts/auth-context"
import { useLocalReservations, useJobReservationStatus } from "@/hooks/use-local-reservations"
import { toast } from "sonner"
import {
  MapPin,
  Clock,
  DollarSign,
  Users,
  Star,
  Eye,
  Calendar,
  AlertCircle,
  MessageCircle,
  Upload,
  CheckCircle,
  Timer,
  Lock,
} from "lucide-react"
import { formatDistanceToNow } from "date-fns"

export default function JobDetailsPage() {
  const params = useParams()
  const router = useRouter()
  const { user } = useAuth()
  const { settings, reserve } = useLocalReservations(user?.id)
  const { status: reservationStatus, refresh: refreshStatus } = useJobReservationStatus(params.id as string)
  const [job, setJob] = useState<Job | null>(null)
  const [loading, setLoading] = useState(true)
  const [submitting, setSubmitting] = useState(false)
  const [contacting, setContacting] = useState(false)
  const [isReserving, setIsReserving] = useState(false)
  const [timeLeft, setTimeLeft] = useState<string>("")
  const [categoryName, setCategoryName] = useState<string>("General")
  const [hasSubmittedWork, setHasSubmittedWork] = useState(false)
  const [submissionStatus, setSubmissionStatus] = useState<string>("")
  const [isJobCompleted, setIsJobCompleted] = useState(false)
  const [workSubmissionData, setWorkSubmissionData] = useState({
    submissionText: "",
    proofFiles: [] as File[],
    proofLinks: [""],
    additionalNotes: "",
  })

useEffect(() => {
    if (reservationStatus.isReserved && reservationStatus.timeLeft) {
      const updateTimer = () => {
        const timeLeftMs = reservationStatus.timeLeft || 0

if (timeLeftMs > 0) {
          const hours = Math.floor(timeLeftMs / (1000 * 60 * 60))
          const minutes = Math.floor((timeLeftMs % (1000 * 60 * 60)) / (1000 * 60))
          const seconds = Math.floor((timeLeftMs % (1000 * 60)) / 1000)
          setTimeLeft(`${hours}h ${minutes}m ${seconds}s`)
        } else {
          setTimeLeft("Expired")
          refreshStatus()
        }
      }

updateTimer()
      const interval = setInterval(updateTimer, 1000)
      return () => clearInterval(interval)
    } else {
      setTimeLeft("")
    }
  }, [reservationStatus.isReserved, reservationStatus.timeLeft, refreshStatus])

useEffect(() => {
    const loadJob = async () => {
      if (!params.id || !user?.id) return

setLoading(true)
      try {
        const jobData = await getJobById(params.id as string)
        setJob(jobData)
        if (jobData) {
          setCategoryName(jobData.category?.name || `Category ${jobData.categoryId}` || "General")
          setWorkSubmissionData((prev) => ({
            ...prev,
            proofLinks: [jobData.proofLink || ""],
          }))

console.log("[v0] Checking if user has submitted work for job:", jobData.id)

// Check user applications for this job
          const userApplications = await getUserApplications(user.id)
          const jobApplication = userApplications.find((app) => app.job?.id === jobData.id)

if (jobApplication) {
            console.log("[v0] Found user application:", jobApplication.id, "status:", jobApplication.status)

// Check work proofs for this job
            const workProofs = await getWorkProofsByJob(jobData.id)
            const userWorkProof = workProofs.find((proof) => proof.applicationId === jobApplication.id)

if (userWorkProof) {
              console.log(
                "[v0] User has already submitted work proof:",
                userWorkProof.id,
                "status:",
                userWorkProof.status,
              )
              setHasSubmittedWork(true)

if (userWorkProof.status === "approved") {
                setIsJobCompleted(true)
                setSubmissionStatus("Your work has been approved and payment processed")
              } else {
                // Set status message based on work proof status
                switch (userWorkProof.status) {
                  case "submitted":
                    setSubmissionStatus("Your work is under review")
                    break
                  case "rejected":
                    setSubmissionStatus("Your work needs revision - check feedback")
                    break
                  default:
                    setSubmissionStatus("Work submitted")
                }
              }
            } else if (jobApplication.status === "accepted") {
              // User has been accepted but hasn't submitted work yet
              setHasSubmittedWork(false)
              setSubmissionStatus("Ready to submit work")
            } else {
              // Application exists but not accepted yet
              setHasSubmittedWork(true)
              setSubmissionStatus("Application pending review")
            }
          }
        }
      } catch (error) {
        console.error("Failed to load job:", error)
      } finally {
        setLoading(false)
      }
    }

loadJob()
  }, [params.id, user?.id])

const handleReserveJob = async () => {
    if (!settings?.isEnabled) {
      toast.error("Job reservation is currently disabled")
      return
    }

if (!user?.id) {
      toast.error("Please log in to reserve jobs")
      return
    }

if (!job) return

setIsReserving(true)
    try {
      const reservation = await reserve(job.id, settings.defaultReservationMinutes)

if (reservation) {
        const timeUnit = settings.defaultReservationMinutes >= 60 ? "hour(s)" : "minute(s)"
        const timeValue =
          settings.defaultReservationMinutes >= 60
            ? Math.round(settings.defaultReservationMinutes / 60)
            : settings.defaultReservationMinutes

toast.success(`Job reserved for ${timeValue} ${timeUnit}!`)
        refreshStatus()
      } else {
        toast.error("Failed to reserve job")
      }
    } catch (error) {
      console.error("Reservation error:", error)
      toast.error("Failed to reserve job")
    } finally {
      setIsReserving(false)
    }
  }

const handleWorkSubmission = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!job || !user) {
      alert("Please log in to submit work for this job.")
      return
    }

if (
      job.requireScreenshots &&
      job.requireScreenshots > 0 &&
      workSubmissionData.proofFiles.length !== job.requireScreenshots
    ) {
      alert(`Please upload exactly ${job.requireScreenshots} screenshot(s) as required.`)
      return
    }

if (!workSubmissionData.submissionText.trim()) {
      alert("Please provide a description of your completed work.")
      return
    }

setSubmitting(true)
    try {
      console.log("[v0] Submitting work proof for job:", job.id, "by user:", user.id)

const application = await submitJobApplication({
        jobId: job.id,
        coverLetter: workSubmissionData.submissionText,
        proposedBudget: job.budgetMin,
        estimatedDuration: `${job.duration} ${job.durationType || "days"}`,
        portfolioLinks: workSubmissionData.proofLinks.filter((link) => link.trim()),
        userId: user.id,
      })

console.log("[v0] Created job application:", application.id)

await submitWorkProof({
        jobId: job.id,
        workerId: user.id,
        applicationId: application.id,
        submissionText: workSubmissionData.submissionText,
        proofFiles: workSubmissionData.proofFiles || [],
        proofLinks: workSubmissionData.proofLinks?.filter((link) => link.trim()) || [],
        screenshots: workSubmissionData.proofFiles || [], // Use proofFiles as screenshots
        additionalNotes: workSubmissionData.additionalNotes,
      })

alert("Work submitted successfully! The job poster will review your submission.")
      router.push("/dashboard/applied-jobs")
    } catch (error) {
      console.error("Failed to submit work:", error)
      alert("Failed to submit work. Please try again.")
    } finally {
      setSubmitting(false)
    }
  }

const handleStartChat = async () => {
    if (!job || !user) {
      toast.error("Please log in to contact the client.")
      return
    }

if (user.id === job.poster.id) {
      toast.error("You cannot contact yourself.")
      return
    }

setContacting(true)
    try {
      console.log("[v0] Starting chat for job:", job.id, "between user:", user.id, "and poster:", job.poster.id)

const newChat = await createJobChat(job.id, user.id, job.poster.id)

console.log("[v0] Chat created successfully:", newChat.id)

toast.success("Chat started successfully!")
      router.push(`/dashboard/messages?chatId=${newChat.id}`)
    } catch (error) {
      console.error("[v0] Failed to start chat:", error)
      toast.error("Failed to start chat. Please try again.")
    } finally {
      setContacting(false)
    }
  }

const handleProofFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = Array.from(e.target.files || [])
    if (job?.requireScreenshots && files.length > job.requireScreenshots) {
      alert(`You can only upload up to ${job.requireScreenshots} file(s).`)
      return
    }
    setWorkSubmissionData((prev) => ({ ...prev, proofFiles: files }))
  }

const removeProofFile = (index: number) => {
    setWorkSubmissionData((prev) => ({
      ...prev,
      proofFiles: prev.proofFiles.filter((_, i) => i !== index),
    }))
  }

if (loading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
      </div>
    )
  }

if (!job) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <h1 className="text-2xl font-bold text-gray-900 mb-2">Job not found</h1>
          <p className="text-gray-600 mb-4">The job you're looking for doesn't exist or has been removed.</p>
          <Button onClick={() => router.push("/jobs")}>Browse Jobs</Button>
        </div>
      </div>
    )
  }

const getPriorityColor = (priority: Job["priority"]) => {
    switch (priority) {
      case "urgent":
        return "bg-red-100 text-red-800"
      case "high":
        return "bg-orange-100 text-orange-800"
      case "normal":
        return "bg-blue-100 text-blue-800"
      case "low":
        return "bg-gray-100 text-gray-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

return (
    <div className="min-h-screen bg-gray-50">
      <div className="container mx-auto px-4 py-8">
        <div className="grid lg:grid-cols-3 gap-8">
          {/* Main Content */}
          <div className="lg:col-span-2 space-y-6">
            {/* Job Header */}
            <Card>
              <CardHeader>
                <div className="flex items-start justify-between">
                  <div className="space-y-3 flex-1">
                    <div className="flex items-center space-x-2">
                      <Badge variant="outline">{categoryName}</Badge>
                      <Badge className={getPriorityColor(job.priority)}>{job.priority}</Badge>
                      <Badge variant="secondary">{job.status}</Badge>
                      {reservationStatus.isReserved && (
                        <Badge className="bg-orange-100 text-orange-800 flex items-center space-x-1">
                          <Lock className="h-3 w-3" />
                          <span>Reserved</span>
                        </Badge>
                      )}
                    </div>
                    <h1 className="text-2xl font-bold text-gray-900">{job.title}</h1>
                    <div className="flex items-center space-x-6 text-sm text-gray-600">
                      <div className="flex items-center">
                        <DollarSign className="mr-1 h-4 w-4" />${job.budgetMin} - ${job.budgetMax}
                      </div>
                      <div className="flex items-center">
                        <MapPin className="mr-1 h-4 w-4" />
                        {job.isRemote ? "Remote" : job.location}
                      </div>
                      <div className="flex items-center">
                        <Calendar className="mr-1 h-4 w-4" />
                        Due {new Date(job.deadline).toLocaleDateString()}
                      </div>
                      <div className="flex items-center">
                        <Users className="mr-1 h-4 w-4" />
                        {job.workersNeeded} workers needed
                      </div>
                    </div>
                  </div>
                  {job.attachments && job.attachments.length > 0 && (
                    <div className="ml-4">
                      <img
                        src={`/abstract-geometric-shapes.png?key=2rtlv&height=120&width=120&query=${encodeURIComponent(job.title + " thumbnail")}`}
                        alt={`${job.title} thumbnail`}
                        className="w-24 h-24 object-cover rounded-lg border border-gray-200"
                      />
                    </div>
                  )}
                </div>
              </CardHeader>
            </Card>

{/* Job Steps */}
            {job.instructions && (
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center space-x-2">
                    <div className="w-1 h-6 bg-blue-600 rounded-full"></div>
                    <span>Job Steps</span>
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {job.instructions
                      .split("\n")
                      .filter((step) => step.trim())
                      .map((step, index) => (
                        <div
                          key={index}
                          className="flex items-start space-x-4 p-4 bg-blue-50 rounded-lg border border-blue-100"
                        >
                          <div className="flex-shrink-0 w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center text-sm font-semibold">
                            {index + 1}
                          </div>
                          <div className="flex-1">
                            <p className="text-gray-800 leading-relaxed">{step.replace(/^Step \d+:\s*/, "")}</p>
                          </div>
                        </div>
                      ))}
                  </div>
                </CardContent>
              </Card>
            )}

{/* Job Description */}
            <Card>
              <CardHeader>
                <CardTitle>Job Description</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <p className="text-gray-700 leading-relaxed">{job.description}</p>

{job.requirements && (
                  <>
                    <Separator />
                    <div>
                      <h3 className="font-semibold text-gray-900 mb-3 flex items-center space-x-2">
                        <AlertCircle className="h-5 w-5 text-orange-600" />
                        <span>Required Proof</span>
                      </h3>
                      <div className="bg-orange-50 border border-orange-200 rounded-lg p-4">
                        <pre className="text-gray-800 whitespace-pre-wrap font-sans leading-relaxed">
                          {job.requirements}
                        </pre>
                      </div>
                    </div>
                  </>
                )}

{job.requireScreenshots && job.requireScreenshots > 0 && (
                  <>
                    <Separator />
                    <div className="bg-purple-50 border border-purple-200 rounded-lg p-4">
                      <h3 className="font-semibold text-purple-900 mb-2 flex items-center space-x-2">
                        <Eye className="h-5 w-5" />
                        <span>Screenshot Requirements</span>
                      </h3>
                      <p className="text-purple-800">
                        You must provide <strong>{job.requireScreenshots} screenshot(s)</strong> as proof of completion.
                      </p>
                    </div>
                  </>
                )}

<Separator />
                <div>
                  <h3 className="font-semibold text-gray-900 mb-3">Required Skills</h3>
                  <div className="flex flex-wrap gap-2">
                    {(job.skillsRequired || []).map((skill) => (
                      <Badge key={skill} variant="secondary">
                        {skill}
                      </Badge>
                    ))}
                  </div>
                </div>

<Separator />
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="bg-green-50 border border-green-200 rounded-lg p-4">
                    <h4 className="font-semibold text-green-900 mb-2 flex items-center space-x-2">
                      <Clock className="h-4 w-4" />
                      <span>Timeline</span>
                    </h4>
                    <p className="text-green-800 text-sm">
                      Estimated approval:{" "}
                      <strong>
                        {job.duration} {job.durationType || "days"}
                      </strong>
                    </p>
                  </div>
                  <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
                    <h4 className="font-semibold text-blue-900 mb-2 flex items-center space-x-2">
                      <DollarSign className="h-4 w-4" />
                      <span>Payment</span>
                    </h4>
                    <p className="text-blue-800 text-sm">
                      Earn: <strong>${job.budgetMin}</strong> per worker
                    </p>
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Job Stats */}
            <Card>
              <CardHeader>
                <CardTitle>Job Statistics</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-3 gap-4 text-center">
                  <div>
                    <div className="flex items-center justify-center mb-1">
                      <Users className="h-5 w-5 text-blue-600" />
                    </div>
                    <p className="text-2xl font-bold text-gray-900">{job.applicationsCount}</p>
                    <p className="text-sm text-gray-600">Applications</p>
                  </div>
                  <div>
                    <div className="flex items-center justify-center mb-1">
                      <Eye className="h-5 w-5 text-green-600" />
                    </div>
                    <p className="text-2xl font-bold text-gray-900">{job.viewsCount}</p>
                    <p className="text-sm text-gray-600">Views</p>
                  </div>
                  <div>
                    <div className="flex items-center justify-center mb-1">
                      <Clock className="h-5 w-5 text-orange-600" />
                    </div>
                    <p className="text-2xl font-bold text-gray-900">
                      {Math.ceil((new Date(job.deadline).getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24))}
                    </p>
                    <p className="text-sm text-gray-600">Days Left</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>

{/* Sidebar */}
          <div className="space-y-6">
            <Card>
              <CardContent className="p-6 space-y-3">
                {reservationStatus.isReserved ? (
                  <div className="space-y-3">
                    <div className="p-4 bg-orange-50 border border-orange-200 rounded-lg">
                      <div className="flex items-center space-x-2 mb-2">
                        <Lock className="h-5 w-5 text-orange-600" />
                        <h3 className="font-semibold text-orange-900">Job Reserved</h3>
                      </div>
                      <p className="text-orange-800 text-sm">
                        {timeLeft === "Expired" ? "Your reservation has expired" : `Time remaining: ${timeLeft}`}
                      </p>
                      {timeLeft === "Expired" && (
                        <p className="text-red-600 text-xs mt-1">Apply now or lose this opportunity!</p>
                      )}
                    </div>
                  </div>
                ) : null}

{hasSubmittedWork ? (
                  <div className="space-y-3">
                    <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
                      <div className="flex items-center space-x-2 mb-2">
                        <CheckCircle className="h-5 w-5 text-blue-600" />
                        <h3 className="font-semibold text-blue-900">Work Status</h3>
                      </div>
                      <p className="text-blue-800 text-sm">{submissionStatus}</p>
                    </div>
                    <Button
                      variant="outline"
                      className="w-full bg-transparent"
                      onClick={() => router.push("/dashboard/applied-jobs")}
                    >
                      <Eye className="mr-2 h-4 w-4" />
                      View in My Jobs
                    </Button>
                  </div>
                ) : (
                  <Dialog>
                    <DialogTrigger asChild>
                      <Button className="w-full" size="lg">
                        <Upload className="mr-2 h-4 w-4" />
                        Submit Completed Work
                      </Button>
                    </DialogTrigger>
                    <DialogContent className="max-w-4xl w-[95vw] max-h-[95vh] p-0 overflow-hidden">
                      {/* ... existing dialog content ... */}
                      <div className="flex flex-col h-full max-h-[95vh]">
                        <DialogHeader className="px-6 py-4 border-b bg-white sticky top-0 z-10">
                          <DialogTitle className="text-lg font-semibold">Submit Work for: {job.title}</DialogTitle>
                        </DialogHeader>

{/* Job Requirements Summary */}
                        <div className="flex-1 overflow-y-auto px-6 py-4 space-y-6">
                          {/* Job Requirements Summary */}
                          <div className="bg-green-50 border border-green-200 rounded-lg p-4">
                            <h3 className="font-semibold text-green-900 flex items-center space-x-2 mb-3">
                              <CheckCircle className="h-5 w-5" />
                              <span>Job Requirements Completed</span>
                            </h3>

{job.instructions && (
                              <div className="space-y-3">
                                <h4 className="font-medium text-green-800">What you should have done:</h4>
                                <div className="space-y-2 max-h-32 overflow-y-auto">
                                  {job.instructions
                                    .split("\n")
                                    .filter((step) => step.trim())
                                    .map((step, index) => (
                                      <div key={index} className="flex items-start space-x-2 text-sm">
                                        <div className="flex-shrink-0 w-5 h-5 bg-green-600 text-white rounded-full flex items-center justify-center text-xs font-semibold mt-0.5">
                                          ✓
                                        </div>
                                        <span className="text-green-800">{step.replace(/^Step \d+:\s*/, "")}</span>
                                      </div>
                                    ))}
                                </div>
                              </div>
                            )}

{job.requirements && (
                              <div className="space-y-2 mt-3">
                                <h4 className="font-medium text-green-800">Proof Required:</h4>
                                <div className="bg-white p-3 rounded border border-green-200 max-h-24 overflow-y-auto">
                                  <pre className="text-sm text-green-800 whitespace-pre-wrap font-sans">
                                    {job.requirements}
                                  </pre>
                                </div>
                              </div>
                            )}

<div className="bg-white p-3 rounded border border-green-200 mt-3">
                              <p className="text-sm text-green-800">
                                💰 <strong>Payment:</strong> ${job.budgetMin} (will be released after approval)
                                <br />
                                ⏱️ <strong>Review time:</strong> Usually within {job.duration}{" "}
                                {job.durationType || "days"}
                              </p>
                            </div>
                          </div>

{/* Form Content */}
                          <form onSubmit={handleWorkSubmission} className="space-y-6">
                            <div className="space-y-2">
                              <Label htmlFor="submissionText" className="text-base font-semibold">
                                Work Description *
                              </Label>
                              <p className="text-sm text-gray-600 mb-2">
                                Describe what you completed and how you met the requirements
                              </p>
                              <Textarea
                                id="submissionText"
                                placeholder="Describe the work you completed, how you followed each step, and any important details the client should know..."
                                value={workSubmissionData.submissionText}
                                onChange={(e) =>
                                  setWorkSubmissionData((prev) => ({ ...prev, submissionText: e.target.value }))
                                }
                                rows={4}
                                required
                                className="resize-none"
                              />
                            </div>

{job.requireScreenshots && job.requireScreenshots > 0 && (
                              <div className="space-y-3">
                                <Label htmlFor="proofFiles" className="text-base font-semibold">
                                  📸 Proof Screenshots/Files *
                                </Label>
                                <p className="text-sm text-red-600 mb-2">
                                  Upload exactly {job.requireScreenshots} file(s) as proof
                                </p>
                                <div className="border-2 border-dashed border-green-300 rounded-lg p-4 bg-green-50">
                                  <Input
                                    id="proofFiles"
                                    type="file"
                                    accept="image/*,.pdf,.doc,.docx"
                                    multiple={job.requireScreenshots > 1}
                                    onChange={handleProofFileUpload}
                                    required
                                    className="file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-green-600 file:text-white hover:file:bg-green-700"
                                  />
                                  <div className="mt-2 flex items-center justify-between">
                                    <p className="text-sm text-green-700 font-medium">
                                      {workSubmissionData.proofFiles.length} of {job.requireScreenshots} file(s)
                                      uploaded
                                    </p>
                                    {workSubmissionData.proofFiles.length === job.requireScreenshots && (
                                      <span className="text-green-600 text-sm font-medium">✓ Complete</span>
                                    )}
                                  </div>
                                </div>

{/* File Preview Section */}
                                {workSubmissionData.proofFiles.length > 0 && (
                                  <div className="space-y-3">
                                    <h4 className="text-sm font-medium text-gray-700">Preview your proof files:</h4>
                                    <div className="max-h-64 overflow-y-auto border rounded-lg p-3 bg-gray-50">
                                      <div className="grid grid-cols-2 gap-3">
                                        {workSubmissionData.proofFiles.map((file, index) => (
                                          <div key={index} className="relative group">
                                            <div className="aspect-video bg-gray-100 rounded-lg overflow-hidden border-2 border-gray-200">
                                              {file.type.startsWith("image/") ? (
                                                <img
                                                  src={URL.createObjectURL(file) || "/placeholder.svg"}
                                                  alt={`Proof ${index + 1}`}
                                                  className="w-full h-full object-cover"
                                                />
                                              ) : (
                                                <div className="w-full h-full flex items-center justify-center bg-gray-200">
                                                  <div className="text-center">
                                                    <Upload className="h-6 w-6 text-gray-400 mx-auto mb-1" />
                                                    <p className="text-xs text-gray-600">
                                                      {file.type.split("/")[1].toUpperCase()}
                                                    </p>
                                                  </div>
                                                </div>
                                              )}
                                            </div>
                                            <div className="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity">
                                              <Button
                                                type="button"
                                                size="sm"
                                                variant="destructive"
                                                className="h-5 w-5 p-0 rounded-full text-xs"
                                                onClick={() => removeProofFile(index)}
                                              >
                                                ×
                                              </Button>
                                            </div>
                                            <div className="absolute bottom-1 left-1 bg-black bg-opacity-60 text-white text-xs px-1 py-0.5 rounded">
                                              {file.name.length > 15 ? `${file.name.substring(0, 15)}...` : file.name}
                                            </div>
                                            <div className="absolute bottom-1 right-1 bg-green-600 text-white text-xs px-1 py-0.5 rounded font-medium">
                                              {index + 1}
                                            </div>
                                          </div>
                                        ))}
                                      </div>
                                    </div>
                                  </div>
                                )}
                              </div>
                            )}

<div className="space-y-2">
                              <Label htmlFor="proofLink" className="text-base font-semibold">
                                External Proof Links (Optional)
                              </Label>
                              <Input
                                id="proofLink"
                                type="url"
                                placeholder="https://link-to-your-completed-work.com"
                                value={workSubmissionData.proofLinks[0]}
                                onChange={(e) =>
                                  setWorkSubmissionData((prev) => ({
                                    ...prev,
                                    proofLinks: [e.target.value, ...prev.proofLinks.slice(1)],
                                  }))
                                }
                              />
                              <p className="text-xs text-gray-500">
                                Add links to YouTube videos, social media posts, websites, or other external proof
                              </p>
                            </div>

<div className="space-y-2">
                              <Label htmlFor="additionalNotes" className="text-base font-semibold">
                                Additional Notes (Optional)
                              </Label>
                              <Textarea
                                id="additionalNotes"
                                placeholder="Any additional information or notes for the client..."
                                value={workSubmissionData.additionalNotes}
                                onChange={(e) =>
                                  setWorkSubmissionData((prev) => ({ ...prev, additionalNotes: e.target.value }))
                                }
                                rows={3}
                                className="resize-none"
                              />
                            </div>

{/* Action Buttons */}
                            <div className="sticky bottom-0 bg-white border-t pt-4 mt-6 -mx-6 px-6 pb-4">
                              <div className="flex justify-end space-x-3">
                                <DialogTrigger asChild>
                                  <Button type="button" variant="outline">
                                    Cancel
                                  </Button>
                                </DialogTrigger>
                                <Button type="submit" disabled={submitting} className="bg-green-600 hover:bg-green-700">
                                  {submitting ? "Submitting Work..." : "Submit Completed Work"}
                                </Button>
                              </div>
                            </div>
                          </form>
                        </div>
                      </div>
                    </DialogContent>
                  </Dialog>
                )}

{!hasSubmittedWork && !reservationStatus.isReserved && settings?.isEnabled && (
                  <Button
                    variant="outline"
                    onClick={handleReserveJob}
                    disabled={isReserving}
                    className="w-full border-2 border-orange-400 text-orange-600 hover:bg-orange-50 hover:border-orange-500 font-semibold py-3 rounded-xl transition-all duration-200 bg-white shadow-sm hover:shadow-md"
                  >
                    {isReserving ? (
                      <div className="flex items-center justify-center">
                        <div className="w-4 h-4 border-2 border-orange-600 border-t-transparent rounded-full animate-spin mr-2"></div>
                        Reserving Job...
                      </div>
                    ) : (
                      <div className="flex items-center justify-center">
                        <Timer className="h-4 w-4 mr-2" />
                        Reserve for{" "}
                        {settings.defaultReservationMinutes >= 60
                          ? `${Math.round(settings.defaultReservationMinutes / 60)} Hour${Math.round(settings.defaultReservationMinutes / 60) > 1 ? "s" : ""}`
                          : `${settings.defaultReservationMinutes} Minutes`}
                      </div>
                    )}
                  </Button>
                )}

{!isJobCompleted ? (
                  <Button
                    variant="outline"
                    className="w-full bg-transparent"
                    onClick={handleStartChat}
                    disabled={contacting}
                  >
                    <MessageCircle className="mr-2 h-4 w-4" />
                    {contacting ? "Starting Chat..." : "Contact Client"}
                  </Button>
                ) : (
                  <div className="p-3 bg-green-50 border border-green-200 rounded-lg">
                    <div className="flex items-center space-x-2">
                      <CheckCircle className="h-4 w-4 text-green-600" />
                      <p className="text-sm text-green-800 font-medium">Job Completed & Paid</p>
                    </div>
                    <p className="text-xs text-green-700 mt-1">
                      Communication is no longer available for completed jobs.
                    </p>
                  </div>
                )}

<div className="mt-4 p-3 bg-green-50 rounded-lg">
                  <div className="flex items-start space-x-2">
                    <CheckCircle className="h-4 w-4 text-green-600 mt-0.5" />
                    <div className="text-sm text-green-800">
                      <p className="font-medium">Work Submission Tips:</p>
                      <ul className="mt-1 space-y-1 text-xs">
                        <li>• Complete all required steps first</li>
                        <li>• Provide clear proof of completion</li>
                        <li>• Include screenshots or links as evidence</li>
                        <li>• Payment released after approval</li>
                        {settings?.isEnabled && <li>• 💡 Reserve jobs to hold them while you decide</li>}
                      </ul>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Client Info */}
            <Card>
              <CardHeader>
                <CardTitle>About the Client</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center space-x-3">
                  <Avatar className="h-12 w-12">
                    <AvatarFallback>
                      {job.poster?.firstName?.[0] || "U"}
                      {job.poster?.lastName?.[0] || ""}
                    </AvatarFallback>
                  </Avatar>
                  <div>
                    <p className="font-medium text-gray-900">
                      {job.poster?.firstName || "Unknown"} {job.poster?.lastName || "User"}
                    </p>
                    <p className="text-sm text-gray-600">@{job.poster?.username || "unknown"}</p>
                  </div>
                </div>

<div className="flex items-center space-x-4 text-sm">
                  <div className="flex items-center">
                    <Star className="mr-1 h-4 w-4 text-yellow-400 fill-current" />
                    {job.poster?.rating || 0} ({job.poster?.totalReviews || 0} reviews)
                  </div>
                </div>

<div className="text-sm text-gray-600">
                  <p>
                    Member since{" "}
                    {formatDistanceToNow(new Date(job.poster?.createdAt || new Date()), { addSuffix: true })}
                  </p>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]sql:file="scripts/20-fix-missing-tables.sql" isMerged="true"
-- Fix missing tables and ensure all reservation system components work

-- Ensure support_pricing_settings table exists with proper structure
CREATE TABLE IF NOT EXISTS support_pricing_settings (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    support_type VARCHAR(20) NOT NULL UNIQUE,
    price DECIMAL(10,2) NOT NULL DEFAULT 0.00,
    response_time_hours INTEGER NOT NULL DEFAULT 24,
    description TEXT,
    is_active BOOLEAN DEFAULT TRUE,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Ensure reservation_violations table exists
CREATE TABLE IF NOT EXISTS reservation_violations (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    violation_count INTEGER DEFAULT 1,
    last_violation_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    total_reservations INTEGER DEFAULT 0,
    expired_reservations INTEGER DEFAULT 0,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    UNIQUE(user_id)
);

-- Insert default support pricing if not exists
INSERT INTO support_pricing_settings (support_type, price, response_time_hours, description, is_active)
VALUES 
    ('free', 0.00, 48, 'Standard support with 24-48 hour response time', true),
    ('priority', 0.50, 2, 'Priority support with 1-2 hour response time', true),
    ('urgent', 1.00, 1, 'Urgent support with response within 1 hour', true)
ON CONFLICT (support_type) DO UPDATE SET
    updated_at = NOW();

-- Create indexes for better performance
CREATE INDEX IF NOT EXISTS idx_support_pricing_settings_support_type ON support_pricing_settings(support_type);
CREATE INDEX IF NOT EXISTS idx_support_pricing_settings_is_active ON support_pricing_settings(is_active);
CREATE INDEX IF NOT EXISTS idx_reservation_violations_user_id ON reservation_violations(user_id);
CREATE INDEX IF NOT EXISTS idx_reservation_violations_violation_count ON reservation_violations(violation_count);
[V0_FILE]typescriptreact:file="app/admin/reservations/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { ArrowLeft, AlertTriangle, Users, Clock, RefreshCw, Trash2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { toast } from "sonner"

interface ReservationViolation {
  id: string
  userId: string
  userEmail: string
  userName: string
  violationCount: number
  lastViolationAt: string
  totalReservations: number
  expiredReservations: number
  violationRate: number
}

interface ActiveReservation {
  id: string
  jobId: string
  jobTitle: string
  userId: string
  userEmail: string
  userName: string
  reservedAt: string
  expiresAt: string
  timeRemaining: string
  status: "active" | "expiring" | "expired"
}

export default function AdminReservationsPage() {
  const router = useRouter()
  const [violations, setViolations] = useState<ReservationViolation[]>([])
  const [activeReservations, setActiveReservations] = useState<ActiveReservation[]>([])
  const [loading, setLoading] = useState(true)
  const [refreshing, setRefreshing] = useState(false)

const loadViolations = async () => {
    try {
      const response = await fetch("/api/admin/reservation-violations")
      if (response.ok) {
        const data = await response.json()
        setViolations(data.violations || [])
      } else {
        console.error("Failed to load violations:", response.status)
        setViolations([]) // Set empty array on error
      }
    } catch (error) {
      console.error("Error loading violations:", error)
      setViolations([]) // Set empty array on error
      toast.error("Failed to load reservation violations")
    }
  }

const loadActiveReservations = async () => {
    try {
      const response = await fetch("/api/admin/reservation-violations?type=active")
      if (response.ok) {
        const data = await response.json()
        setActiveReservations(data.activeReservations || [])
      } else {
        console.error("Failed to load active reservations:", response.status)
        setActiveReservations([]) // Set empty array on error
      }
    } catch (error) {
      console.error("Error loading active reservations:", error)
      setActiveReservations([]) // Set empty array on error
      toast.error("Failed to load active reservations")
    }
  }

const resetUserViolations = async (userId: string) => {
    try {
      const response = await fetch("/api/admin/reservation-violations", {
        method: "DELETE",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ userId }),
      })

if (response.ok) {
        toast.success("User violations reset successfully")
        loadViolations()
      } else {
        toast.error("Failed to reset user violations")
      }
    } catch (error) {
      console.error("Error resetting violations:", error)
      toast.error("Failed to reset user violations")
    }
  }

const refreshData = async () => {
    setRefreshing(true)
    await Promise.all([loadViolations(), loadActiveReservations()])
    setRefreshing(false)
    toast.success("Data refreshed")
  }

useEffect(() => {
    const loadData = async () => {
      setLoading(true)
      await Promise.all([loadViolations(), loadActiveReservations()])
      setLoading(false)
    }

loadData()

// Auto-refresh every 30 seconds
    const interval = setInterval(() => {
      loadViolations()
      loadActiveReservations()
    }, 30000)

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

const getViolationSeverity = (rate: number) => {
    if (rate >= 0.8) return { color: "bg-red-100 text-red-800 border-red-200", label: "Critical" }
    if (rate >= 0.5) return { color: "bg-orange-100 text-orange-800 border-orange-200", label: "High" }
    if (rate >= 0.3) return { color: "bg-yellow-100 text-yellow-800 border-yellow-200", label: "Medium" }
    return { color: "bg-blue-100 text-blue-800 border-blue-200", label: "Low" }
  }

const getReservationStatus = (reservation: ActiveReservation) => {
    const now = new Date()
    const expires = new Date(reservation.expiresAt)
    const timeLeft = expires.getTime() - now.getTime()

if (timeLeft <= 0) return { color: "bg-red-100 text-red-800", label: "Expired" }
    if (timeLeft <= 10 * 60 * 1000) return { color: "bg-orange-100 text-orange-800", label: "Expiring Soon" }
    return { color: "bg-green-100 text-green-800", label: "Active" }
  }

if (loading) {
    return (
      <div className="container mx-auto p-6">
        <div className="flex justify-center py-12">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600"></div>
        </div>
      </div>
    )
  }

return (
    <div className="container mx-auto p-6 space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center space-x-4">
          <Button variant="outline" onClick={() => router.back()} className="flex items-center space-x-2">
            <ArrowLeft className="h-4 w-4" />
            <span>Back</span>
          </Button>
          <div>
            <h1 className="text-3xl font-bold text-gray-900">Reservation Management</h1>
            <p className="text-gray-600 mt-1">Monitor job reservations and user violations</p>
          </div>
        </div>
        <Button onClick={refreshData} disabled={refreshing} variant="outline">
          <RefreshCw className={`h-4 w-4 mr-2 ${refreshing ? "animate-spin" : ""}`} />
          Refresh
        </Button>
      </div>

{/* Statistics Cards */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-gray-600">Active Reservations</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-blue-600">{activeReservations.length}</div>
            <p className="text-xs text-gray-500 mt-1">Currently reserved jobs</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-gray-600">Users with Violations</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-orange-600">{violations.length}</div>
            <p className="text-xs text-gray-500 mt-1">Need attention</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-gray-600">Critical Violations</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-red-600">
              {violations.filter((v) => v.violationRate >= 0.8).length}
            </div>
            <p className="text-xs text-gray-500 mt-1">≥80% violation rate</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-gray-600">Expiring Soon</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-yellow-600">
              {
                activeReservations.filter((r) => {
                  const timeLeft = new Date(r.expiresAt).getTime() - new Date().getTime()
                  return timeLeft <= 10 * 60 * 1000 && timeLeft > 0
                }).length
              }
            </div>
            <p className="text-xs text-gray-500 mt-1">≤10 minutes left</p>
          </CardContent>
        </Card>
      </div>

{/* Active Reservations */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center space-x-2">
            <Clock className="h-5 w-5" />
            <span>Active Reservations</span>
          </CardTitle>
        </CardHeader>
        <CardContent>
          {activeReservations.length === 0 ? (
            <div className="text-center py-8">
              <Clock className="h-12 w-12 text-gray-400 mx-auto mb-4" />
              <p className="text-gray-500">No active reservations</p>
            </div>
          ) : (
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Job</TableHead>
                  <TableHead>User</TableHead>
                  <TableHead>Reserved At</TableHead>
                  <TableHead>Expires At</TableHead>
                  <TableHead>Time Left</TableHead>
                  <TableHead>Status</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {activeReservations.map((reservation) => {
                  const status = getReservationStatus(reservation)
                  return (
                    <TableRow key={reservation.id}>
                      <TableCell className="font-medium">{reservation.jobTitle}</TableCell>
                      <TableCell>
                        <div>
                          <div className="font-medium">{reservation.userName}</div>
                          <div className="text-sm text-gray-500">{reservation.userEmail}</div>
                        </div>
                      </TableCell>
                      <TableCell>{new Date(reservation.reservedAt).toLocaleString()}</TableCell>
                      <TableCell>{new Date(reservation.expiresAt).toLocaleString()}</TableCell>
                      <TableCell>{reservation.timeRemaining}</TableCell>
                      <TableCell>
                        <Badge className={status.color}>{status.label}</Badge>
                      </TableCell>
                    </TableRow>
                  )
                })}
              </TableBody>
            </Table>
          )}
        </CardContent>
      </Card>

{/* User Violations */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center space-x-2">
            <AlertTriangle className="h-5 w-5" />
            <span>User Violations</span>
          </CardTitle>
        </CardHeader>
        <CardContent>
          {violations.length === 0 ? (
            <div className="text-center py-8">
              <Users className="h-12 w-12 text-gray-400 mx-auto mb-4" />
              <p className="text-gray-500">No user violations found</p>
            </div>
          ) : (
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>User</TableHead>
                  <TableHead>Total Reservations</TableHead>
                  <TableHead>Expired</TableHead>
                  <TableHead>Violation Rate</TableHead>
                  <TableHead>Last Violation</TableHead>
                  <TableHead>Severity</TableHead>
                  <TableHead>Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {violations.map((violation) => {
                  const severity = getViolationSeverity(violation.violationRate)
                  return (
                    <TableRow key={violation.id}>
                      <TableCell>
                        <div>
                          <div className="font-medium">{violation.userName}</div>
                          <div className="text-sm text-gray-500">{violation.userEmail}</div>
                        </div>
                      </TableCell>
                      <TableCell>{violation.totalReservations}</TableCell>
                      <TableCell>{violation.expiredReservations}</TableCell>
                      <TableCell>{(violation.violationRate * 100).toFixed(1)}%</TableCell>
                      <TableCell>{new Date(violation.lastViolationAt).toLocaleDateString()}</TableCell>
                      <TableCell>
                        <Badge className={severity.color}>{severity.label}</Badge>
                      </TableCell>
                      <TableCell>
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={() => resetUserViolations(violation.userId)}
                          className="text-red-600 border-red-200 hover:bg-red-50"
                        >
                          <Trash2 className="h-4 w-4 mr-1" />
                          Reset
                        </Button>
                      </TableCell>
                    </TableRow>
                  )
                })}
              </TableBody>
            </Table>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescript:file="lib/local-reservation-utils.ts" isQuickEdit="true" isMerged="true"
import {
  localReservationStorage,
  type LocalReservation,
  type LocalReservationSettings,
} from "./local-reservation-storage"

export interface ReservationStatus {
  isReserved: boolean
  timeLeft?: number
  expired?: boolean
  reservedBy?: string
}

export async function checkReservationStatus(jobId: string): Promise<ReservationStatus> {
  try {
    // First expire any old reservations
    localReservationStorage.expireOldReservations()

const reservationInfo = localReservationStorage.isJobReserved(jobId)

if (!reservationInfo.isReserved) {
      return { isReserved: false }
    }

const now = new Date().getTime()
    const reservedUntil = new Date(reservationInfo.expiresAt!).getTime()
    const timeLeft = reservedUntil - now

if (timeLeft <= 0) {
      return { isReserved: false, expired: true }
    }

return {
      isReserved: true,
      timeLeft,
      reservedBy: reservationInfo.userId,
    }
  } catch (error) {
    console.error("Error checking reservation status:", error)
    return { isReserved: false }
  }
}

export function formatTimeLeft(milliseconds: number): string {
  if (milliseconds <= 0) return "Expired"

const hours = Math.floor(milliseconds / (1000 * 60 * 60))
  const minutes = Math.floor((milliseconds % (1000 * 60 * 60)) / (1000 * 60))
  const seconds = Math.floor((milliseconds % (1000 * 60)) / 1000)

if (hours > 0) {
    return `${hours}h ${minutes}m ${seconds}s`
  } else if (minutes > 0) {
    return `${minutes}m ${seconds}s`
  } else {
    return `${seconds}s`
  }
}

export function getUserReservations(userId: string): LocalReservation[] {
  try {
    // Clean up expired reservations first
    localReservationStorage.expireOldReservations()

return localReservationStorage.getUserActiveReservations(userId)
  } catch (error) {
    console.error("Error in getUserReservations:", error)
    return []
  }
}

export function createReservation(jobId: string, userId: string, reservationMinutes: number): LocalReservation | null {
  try {
    const settings = localReservationStorage.getSettings()

if (!settings.isEnabled) {
      throw new Error("Reservation system is disabled")
    }

// Check if job is already reserved
    const reservationInfo = localReservationStorage.isJobReserved(jobId)
    if (reservationInfo.isReserved) {
      throw new Error("Job is already reserved")
    }

// Check user's current reservations
    const userReservations = localReservationStorage.getUserActiveReservations(userId)
    if (userReservations.length >= settings.maxConcurrentReservations) {
      throw new Error(`You can only reserve ${settings.maxConcurrentReservations} jobs at a time`)
    }

// Validate reservation time
    if (reservationMinutes > settings.maxReservationMinutes) {
      throw new Error(`Reservation time cannot exceed ${settings.maxReservationMinutes} minutes`)
    }

return localReservationStorage.createReservation(jobId, userId, reservationMinutes)
  } catch (error) {
    console.error("Error creating reservation:", error)
    return null
  }
}

export function cancelReservation(reservationId: string): boolean {
  try {
    return localReservationStorage.cancelReservation(reservationId)
  } catch (error) {
    console.error("Error cancelling reservation:", error)
    return false
  }
}

// Auto-cleanup function that should be called periodically
export function cleanupExpiredReservations(): LocalReservation[] {
  try {
    return localReservationStorage.expireOldReservations()
  } catch (error) {
    console.error("Error cleaning up expired reservations:", error)
    return []
  }
}

// Get reservation settings
export function getReservationSettings() {
  return localReservationStorage.getSettings()
}

// Update reservation settings
export function updateReservationSettings(updates: Partial<Omit<LocalReservationSettings, "id" | "createdAt">>) {
  const currentSettings = localReservationStorage.getSettings()
  const updatedSettings = {
    ...currentSettings,
    ...updates,
    updatedAt: new Date().toISOString(),
  }
  localReservationStorage.saveSettings(updatedSettings)
  return updatedSettings
}

export function getLocalReservations(): LocalReservation[] {
  return localReservationStorage.getReservations()
}

export interface ReservationViolation {
  id: string
  userId: string
  violationCount: number
  lastViolationAt: string
  totalReservations: number
  expiredReservations: number
}

export function getLocalReservationViolations(): ReservationViolation[] {
  // For now, generate mock violations based on expired reservations
  // In a real system, this would track actual violation history
  const reservations = localReservationStorage.getReservations()
  const userStats: Record<string, { total: number; expired: number; lastExpired?: string }> = {}

reservations.forEach((reservation) => {
    if (!userStats[reservation.userId]) {
      userStats[reservation.userId] = { total: 0, expired: 0 }
    }

userStats[reservation.userId].total++

if (reservation.status === "expired") {
      userStats[reservation.userId].expired++
      userStats[reservation.userId].lastExpired = reservation.updatedAt
    }
  })

return Object.entries(userStats)
    .filter(([_, stats]) => stats.expired > 0)
    .map(([userId, stats]) => ({
      id: `violation_${userId}`,
      userId,
      violationCount: stats.expired,
      lastViolationAt: stats.lastExpired || new Date().toISOString(),
      totalReservations: stats.total,
      expiredReservations: stats.expired,
    }))
}
[V0_FILE]sql:file="scripts/21-enhanced-revision-settings.sql" isMerged="true"
-- Update admin_settings table with enhanced revision settings
UPDATE admin_settings 
SET setting_value = jsonb_set(
    jsonb_set(
        jsonb_set(
            jsonb_set(
                jsonb_set(
                    jsonb_set(
                        setting_value,
                        '{revisionRequestTimeoutValue}',
                        COALESCE(setting_value->'workerResponseTimeoutValue', '24')
                    ),
                    '{revisionRequestTimeoutUnit}',
                    COALESCE(setting_value->'workerResponseTimeoutUnit', '"hours"')
                ),
                '{rejectionResponseTimeoutValue}',
                COALESCE(setting_value->'workerResponseTimeoutValue', '24')
            ),
            '{rejectionResponseTimeoutUnit}',
            COALESCE(setting_value->'workerResponseTimeoutUnit', '"hours"')
        ),
        '{enableAutomaticRefunds}',
        'true'
    ),
    '{refundOnRevisionTimeout}',
    'true'
),
setting_value = jsonb_set(
    setting_value,
    '{refundOnRejectionTimeout}',
    'true'
),
updated_at = NOW()
WHERE setting_key = 'revision_settings';

-- Insert enhanced revision settings if they don't exist
INSERT INTO admin_settings (setting_key, setting_value) 
VALUES (
    'revision_settings',
    '{
        "maxRevisionRequests": 2,
        "revisionRequestTimeoutValue": 24,
        "revisionRequestTimeoutUnit": "hours",
        "rejectionResponseTimeoutValue": 24,
        "rejectionResponseTimeoutUnit": "hours",
        "enableAutomaticRefunds": true,
        "refundOnRevisionTimeout": true,
        "refundOnRejectionTimeout": true,
        "enableRevisionWarnings": true,
        "revisionPenaltyEnabled": false,
        "revisionPenaltyAmount": 0
    }'::jsonb
) ON CONFLICT (setting_key) DO NOTHING;
[V0_FILE]json:file="vercel.json" isMerged="true"
{
  "crons": [
    {
      "path": "/api/cron/expire-reservations",
      "schedule": "*/5 * * * *"
    },
    {
      "path": "/api/cron/process-work-proof-timeouts",
      "schedule": "*/10 * * * *"
    }
  ]
}
[V0_FILE]typescriptreact:file="lib/admin-settings.ts" isQuickEdit="true" isMerged="true"
// Admin settings for revision system
export interface RevisionSettings {
  maxRevisionRequests: number
  revisionRequestTimeoutValue: number
  revisionRequestTimeoutUnit: "minutes" | "hours" | "days"
  rejectionResponseTimeoutValue: number
  rejectionResponseTimeoutUnit: "minutes" | "hours" | "days"
  enableAutomaticRefunds: boolean
  refundOnRevisionTimeout: boolean
  refundOnRejectionTimeout: boolean
  enableRevisionWarnings: boolean
  revisionPenaltyEnabled: boolean
  revisionPenaltyAmount: number
}

export const getRevisionSettingsFromAPI = async (): Promise<RevisionSettings> => {
  try {
    console.log("[v0] Fetching revision settings from API...")

const controller = new AbortController()
    const timeoutId = setTimeout(() => controller.abort(), 5000) // 5 second timeout

const response = await fetch("/api/admin/revision-settings", {
      signal: controller.signal,
      headers: {
        "Content-Type": "application/json",
      },
    })

clearTimeout(timeoutId)
    console.log("[v0] API response status:", response.status, response.statusText)

if (response.ok) {
      const settings = await response.json()
      console.log("[v0] Loaded revision settings from API:", settings)

if (settings && typeof settings === "object" && typeof settings.enableAutomaticRefunds === "boolean") {
        return settings
      } else {
        console.warn("[v0] Invalid settings structure from API, using defaults")
      }
    } else {
      const errorText = await response.text()
      console.error(
        `[v0] Failed to load revision settings from API. Status: ${response.status} ${response.statusText}. Response: ${errorText}`,
      )
    }
  } catch (error) {
    if (error instanceof Error && error.name === "AbortError") {
      console.error("[v0] API request timeout - using default settings")
    } else {
      console.error("[v0] Error loading revision settings from API:", error)
      console.error("[v0] Error details:", {
        message: error instanceof Error ? error.message : "Unknown error",
        stack: error instanceof Error ? error.stack : undefined,
      })
    }
  }

console.log("[v0] Using default revision settings due to API failure")
  return {
    maxRevisionRequests: 2,
    revisionRequestTimeoutValue: 24,
    revisionRequestTimeoutUnit: "hours",
    rejectionResponseTimeoutValue: 1,
    rejectionResponseTimeoutUnit: "minutes",
    enableAutomaticRefunds: true,
    refundOnRevisionTimeout: true,
    refundOnRejectionTimeout: true,
    enableRevisionWarnings: true,
    revisionPenaltyEnabled: false,
    revisionPenaltyAmount: 0,
  }
}

const REVISION_SETTINGS_KEY = "admin_revision_settings"

export const getRevisionSettings = (): RevisionSettings => {
  console.warn("[DEPRECATED] getRevisionSettings() uses localStorage. Use getRevisionSettingsFromAPI() instead.")

if (typeof window === "undefined") {
    return {
      maxRevisionRequests: 2,
      revisionRequestTimeoutValue: 24,
      revisionRequestTimeoutUnit: "hours",
      rejectionResponseTimeoutValue: 1,
      rejectionResponseTimeoutUnit: "minutes",
      enableAutomaticRefunds: true,
      refundOnRevisionTimeout: true,
      refundOnRejectionTimeout: true,
      enableRevisionWarnings: true,
      revisionPenaltyEnabled: false,
      revisionPenaltyAmount: 0,
    }
  }

try {
    const stored = localStorage.getItem(REVISION_SETTINGS_KEY)
    if (stored) {
      const parsed = JSON.parse(stored)
      if (parsed.workerResponseTimeoutHours && !parsed.revisionRequestTimeoutValue) {
        return {
          ...parsed,
          revisionRequestTimeoutValue: parsed.workerResponseTimeoutHours || 24,
          revisionRequestTimeoutUnit: "hours",
          rejectionResponseTimeoutValue: parsed.workerResponseTimeoutHours || 1,
          rejectionResponseTimeoutUnit: "minutes",
          enableAutomaticRefunds: parsed.enableAutomaticRefunds ?? true,
          refundOnRevisionTimeout: parsed.refundOnRevisionTimeout ?? true,
          refundOnRejectionTimeout: parsed.refundOnRejectionTimeout ?? true,
        }
      }
      return {
        maxRevisionRequests: 2,
        revisionRequestTimeoutValue: 24,
        revisionRequestTimeoutUnit: "hours",
        rejectionResponseTimeoutValue: 1,
        rejectionResponseTimeoutUnit: "minutes",
        enableAutomaticRefunds: true,
        refundOnRevisionTimeout: true,
        refundOnRejectionTimeout: true,
        enableRevisionWarnings: true,
        revisionPenaltyEnabled: false,
        revisionPenaltyAmount: 0,
        ...parsed,
      }
    }
  } catch (error) {
    console.error("Failed to load revision settings:", error)
  }

return {
    maxRevisionRequests: 2,
    revisionRequestTimeoutValue: 24,
    revisionRequestTimeoutUnit: "hours",
    rejectionResponseTimeoutValue: 1,
    rejectionResponseTimeoutUnit: "minutes",
    enableAutomaticRefunds: true,
    refundOnRevisionTimeout: true,
    refundOnRejectionTimeout: true,
    enableRevisionWarnings: true,
    revisionPenaltyEnabled: false,
    revisionPenaltyAmount: 0,
  }
}

export const updateRevisionSettings = (settings: RevisionSettings): void => {
  if (typeof window === "undefined") return

try {
    localStorage.setItem(REVISION_SETTINGS_KEY, JSON.stringify(settings))
  } catch (error) {
    console.error("Failed to save revision settings:", error)
  }
}
[V0_FILE]sql:file="scripts/22-ensure-support-pricing-table.sql" isMerged="true"
-- Ensure support_pricing_settings table exists with all required data
-- This script can be run safely multiple times

CREATE TABLE IF NOT EXISTS support_pricing_settings (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    support_type VARCHAR(20) NOT NULL UNIQUE,
    price DECIMAL(10,2) NOT NULL DEFAULT 0.00,
    response_time_hours INTEGER NOT NULL DEFAULT 24,
    description TEXT,
    is_active BOOLEAN DEFAULT TRUE,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Verify the table was created successfully
DO $$
BEGIN
    IF EXISTS (SELECT 1 FROM information_schema.tables WHERE table_name = 'support_pricing_settings') THEN
        RAISE NOTICE 'support_pricing_settings table created successfully';
    ELSE
        RAISE EXCEPTION 'Failed to create support_pricing_settings table';
    END IF;
END $$;
[V0_FILE]sql:file="scripts/23-add-transaction-constraints.sql" isMerged="true"
-- Add unique constraint to prevent duplicate transactions with same reference
-- This ensures database-level protection against duplicate refunds

-- First, let's check if we have any existing duplicate transactions
-- and clean them up if needed

-- Create a unique index on wallet transactions to prevent duplicates
-- based on reference_id and reference_type combination
CREATE UNIQUE INDEX IF NOT EXISTS idx_wallet_transactions_unique_reference 
ON wallet_transactions (reference_id, reference_type) 
WHERE reference_id IS NOT NULL AND reference_type IS NOT NULL;

-- Add a check constraint to ensure transaction amounts are reasonable
ALTER TABLE wallet_transactions 
ADD CONSTRAINT chk_transaction_amount_reasonable 
CHECK (amount BETWEEN -10000 AND 10000);

-- Add a check constraint to ensure fee amounts are non-negative
ALTER TABLE wallet_transactions 
ADD CONSTRAINT chk_fee_amount_non_negative 
CHECK (fee_amount >= 0);

-- Create an index on dispute status to improve query performance
CREATE INDEX IF NOT EXISTS idx_disputes_status ON disputes (status);

-- Create an index on dispute reference lookups
CREATE INDEX IF NOT EXISTS idx_disputes_job_worker ON disputes (job_id, worker_id);

-- Log the constraint creation
INSERT INTO admin_logs (action, details, created_at) 
VALUES (
  'database_constraint_added', 
  'Added unique constraints and indexes to prevent duplicate transactions and improve dispute resolution performance',
  NOW()
);
[V0_FILE]typescript:file="components/jobs/job-cancellation-modal.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import { toast } from "sonner"
import { AlertTriangle, DollarSign, Users, RefreshCw, Calculator, Wallet, FileText, Clock } from "lucide-react"
import { getWorkProofs, type Job } from "@/lib/jobs"

interface JobCancellationModalProps {
  isOpen: boolean
  onClose: () => void
  job: Job | null
  onJobCancelled: () => void
  userId: string
}

export default function JobCancellationModal({
  isOpen,
  onClose,
  job,
  onJobCancelled,
  userId,
}: JobCancellationModalProps) {
  const [workProofs, setWorkProofs] = useState<any[]>([])
  const [loading, setLoading] = useState(false)
  const [actionLoading, setActionLoading] = useState(false)

useEffect(() => {
    if (isOpen && job) {
      loadWorkProofs()
    }
  }, [isOpen, job])

const loadWorkProofs = async () => {
    if (!job) return

setLoading(true)
    try {
      const proofs = await getWorkProofs(job.id)
      setWorkProofs(proofs)
    } catch (error) {
      console.error("Error loading work proofs:", error)
      toast.error("Failed to load work submissions")
    } finally {
      setLoading(false)
    }
  }

const calculateCancellationDetails = () => {
    if (!job) return { submittedWorkCount: 0, remainingSlots: 0, refundAmount: 0, platformFeeRefund: 0, totalRefund: 0 }

const submittedWorkCount = workProofs.length
    const remainingSlots = Math.max(0, job.workersNeeded - submittedWorkCount)
    const workerPaymentRefund = remainingSlots * job.budgetMax
    const platformFeeRefund = workerPaymentRefund * 0.05
    const totalRefund = workerPaymentRefund + platformFeeRefund

return { submittedWorkCount, remainingSlots, refundAmount: workerPaymentRefund, platformFeeRefund, totalRefund }
  }

const handleCancelJob = async () => {
    if (!job) return

setActionLoading(true)
    try {
      // Cancel the job with integrated refund processing
      const { cancelJob } = await import("@/lib/jobs")
      const { refundAmount } = await cancelJob(job.id, userId)

const { submittedWorkCount } = calculateCancellationDetails()

toast.success(
        `Job cancelled successfully! ${refundAmount > 0 ? `$${refundAmount.toFixed(2)} refunded for remaining slots.` : ""} ${submittedWorkCount > 0 ? `${submittedWorkCount} submitted work(s) can still be reviewed.` : ""}`,
      )
      onJobCancelled()
      onClose()
    } catch (error) {
      console.error("Error cancelling job:", error)
      toast.error("Failed to cancel job")
    } finally {
      setActionLoading(false)
    }
  }

if (!job) return null

const { submittedWorkCount, remainingSlots, refundAmount, platformFeeRefund, totalRefund } =
    calculateCancellationDetails()

return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="flex items-center space-x-2">
            <AlertTriangle className="h-5 w-5 text-red-600" />
            <span>Cancel Job: {job.title}</span>
          </DialogTitle>
        </DialogHeader>

{loading ? (
          <div className="flex items-center justify-center py-8">
            <RefreshCw className="h-6 w-6 animate-spin text-blue-600" />
            <span className="ml-2">Loading work submissions...</span>
          </div>
        ) : (
          <div className="space-y-6">
            {/* Job Summary */}
            <Card className="bg-blue-50 border-blue-200">
              <CardContent className="p-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                  <div className="flex items-center">
                    <Users className="mr-2 h-4 w-4 text-blue-600" />
                    <span>{job.workersNeeded} workers needed</span>
                  </div>
                  <div className="flex items-center">
                    <DollarSign className="mr-2 h-4 w-4 text-blue-600" />
                    <span>${job.budgetMax} per worker</span>
                  </div>
                  <div className="flex items-center">
                    <FileText className="mr-2 h-4 w-4 text-green-600" />
                    <span>{submittedWorkCount} work submitted</span>
                  </div>
                  <div className="flex items-center">
                    <Clock className="mr-2 h-4 w-4 text-orange-600" />
                    <span>{remainingSlots} slots remaining</span>
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Cancellation Details */}
            <Card className="bg-yellow-50 border-yellow-200">
              <CardContent className="p-4">
                <h3 className="font-semibold text-yellow-900 mb-3">Cancellation Impact</h3>
                <div className="space-y-3 text-sm">
                  {submittedWorkCount > 0 && (
                    <div className="flex items-start space-x-2">
                      <FileText className="h-4 w-4 text-green-600 mt-0.5" />
                      <div>
                        <p className="font-medium text-green-800">
                          {submittedWorkCount} worker{submittedWorkCount > 1 ? "s have" : " has"} submitted work
                        </p>
                        <p className="text-green-700">
                          You can still review and approve/reject these submissions from your job dashboard
                        </p>
                      </div>
                    </div>
                  )}

{remainingSlots > 0 && (
                    <div className="flex items-start space-x-2">
                      <Wallet className="h-4 w-4 text-blue-600 mt-0.5" />
                      <div>
                        <p className="font-medium text-blue-800">
                          {remainingSlots} remaining slot{remainingSlots > 1 ? "s" : ""} will be refunded
                        </p>
                        <p className="text-blue-700">
                          ${totalRefund.toFixed(2)} will be returned to your deposit balance
                        </p>
                      </div>
                    </div>
                  )}

{submittedWorkCount === 0 && remainingSlots === job.workersNeeded && (
                    <div className="flex items-start space-x-2">
                      <Calculator className="h-4 w-4 text-gray-600 mt-0.5" />
                      <div>
                        <p className="font-medium text-gray-800">No work has been submitted yet</p>
                        <p className="text-gray-700">Full refund of ${totalRefund.toFixed(2)} will be processed</p>
                      </div>
                    </div>
                  )}
                </div>
              </CardContent>
            </Card>

{/* Refund Breakdown */}
            {totalRefund > 0 && (
              <Card className="bg-green-50 border-green-200">
                <CardContent className="p-4">
                  <h4 className="font-semibold text-green-900 mb-3">Refund Calculation</h4>
                  <div className="space-y-2 text-sm">
                    <div className="flex justify-between">
                      <span>Worker payments to refund:</span>
                      <span className="font-medium">
                        {remainingSlots} × ${job.budgetMax} = ${refundAmount.toFixed(2)}
                      </span>
                    </div>
                    <div className="flex justify-between">
                      <span>Platform fee refund (5%):</span>
                      <span className="font-medium">${platformFeeRefund.toFixed(2)}</span>
                    </div>
                    <Separator />
                    <div className="flex justify-between font-bold text-green-700">
                      <span>Total refund:</span>
                      <span>${totalRefund.toFixed(2)}</span>
                    </div>
                  </div>
                </CardContent>
              </Card>
            )}

<div className="bg-red-50 border border-red-200 rounded-lg p-4">
              <h4 className="font-semibold text-red-900 mb-2">Important:</h4>
              <ul className="text-sm text-red-800 space-y-1">
                <li>• This action cannot be undone</li>
                <li>• Job will be removed from the marketplace</li>
                {submittedWorkCount > 0 && (
                  <li>
                    • You can still review {submittedWorkCount} submitted work{submittedWorkCount > 1 ? "s" : ""} after
                    cancellation
                  </li>
                )}
                {totalRefund > 0 && <li>• ${totalRefund.toFixed(2)} will be refunded to your deposit balance</li>}
              </ul>
            </div>
          </div>
        )}

<DialogFooter className="flex justify-between">
          <Button variant="outline" onClick={onClose}>
            Keep Job Active
          </Button>
          <Button onClick={handleCancelJob} disabled={actionLoading} className="bg-red-600 hover:bg-red-700">
            {actionLoading ? (
              <>
                <RefreshCw className="mr-2 h-4 w-4 animate-spin" />
                Cancelling Job...
              </>
            ) : (
              <>
                <AlertTriangle className="mr-2 h-4 w-4" />
                Cancel Job
              </>
            )}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]sql:file="scripts/run-all-setup.sql" isMerged="true"
-- Run all setup scripts in sequence
-- This will create the complete database schema for the microjob marketplace

-- 1. Create core tables
\i scripts/01-create-tables.sql

-- 2. Create indexes for performance
\i scripts/02-create-indexes.sql

-- 3. Seed initial categories
\i scripts/03-seed-categories.sql

-- 4. Create chat system tables
\i scripts/04-create-chat-tables.sql

-- 5. Create chat indexes
\i scripts/05-create-chat-indexes.sql

-- 6. Create category management
\i scripts/06-create-category-management.sql

-- 7. Seed microjob categories
\i scripts/07-seed-microjob-categories.sql

-- 8. Seed fake microjobs for testing
\i scripts/08-seed-fake-microjobs.sql

-- 9. Workflow schema updates
\i scripts/09-workflow-schema-updates.sql

-- 10. Wallet system updates
\i scripts/10-wallet-system-updates.sql

-- 11. Currency and language system
\i scripts/11-currency-language-system.sql

-- 12. Chat money transfer system
\i scripts/12-chat-money-transfer-system.sql

-- 13. Instant payment workflow
\i scripts/13-instant-payment-workflow.sql

-- 14. Screenshot pricing system
\i scripts/14-screenshot-pricing-system.sql

-- 15. Create test jobs with subcategories
\i scripts/15-create-test-jobs-with-subcategories.sql

-- 16. Add sequential job IDs
\i scripts/16-add-sequential-job-ids.sql

-- 17. Platform fee settings
\i scripts/17-platform-fee-settings.sql

-- 18. Job reservation system
\i scripts/18-job-reservation-system.sql

-- 19. Admin settings table
\i scripts/19-admin-settings-table.sql

-- 20. Fix missing tables
\i scripts/20-fix-missing-tables.sql

-- 21. Enhanced revision settings
\i scripts/21-enhanced-revision-settings.sql

-- 22. Ensure support pricing table
\i scripts/22-ensure-support-pricing-table.sql

-- 23. Add transaction constraints
\i scripts/23-add-transaction-constraints.sql
[V0_FILE]sql:file="scripts/fix-admin-settings-table.sql" isMerged="true"
-- Fix missing admin_settings table issue
-- This script ensures the admin_settings table exists and has the correct structure

-- Drop and recreate the admin_settings table to ensure it exists
DROP TABLE IF EXISTS admin_settings CASCADE;

-- Create admin_settings table for persistent admin configuration
CREATE TABLE admin_settings (
    id SERIAL PRIMARY KEY,
    setting_key VARCHAR(255) UNIQUE NOT NULL,
    setting_value JSONB NOT NULL,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create index for faster lookups
CREATE INDEX idx_admin_settings_key ON admin_settings(setting_key);

-- Insert default revision settings
INSERT INTO admin_settings (setting_key, setting_value) 
VALUES (
    'revision_settings',
    '{
        "maxRevisionRequests": 2,
        "revisionRequestTimeoutValue": 24,
        "revisionRequestTimeoutUnit": "hours",
        "rejectionResponseTimeoutValue": 24,
        "rejectionResponseTimeoutUnit": "hours",
        "enableAutomaticRefunds": true,
        "refundOnRevisionTimeout": true,
        "refundOnRejectionTimeout": true,
        "enableRevisionWarnings": true,
        "revisionPenaltyEnabled": false,
        "revisionPenaltyAmount": 0
    }'::jsonb
) ON CONFLICT (setting_key) DO NOTHING;

-- Verify the table was created successfully
SELECT 'admin_settings table created successfully' as status;
SELECT COUNT(*) as revision_settings_count FROM admin_settings WHERE setting_key = 'revision_settings';
[V0_FILE]sql:file="scripts/fix-refund-processing-issues.sql" isMerged="true"
-- Fix refund processing issues by ensuring admin_settings table exists and has proper data
-- This script addresses the root cause of refund processing failures

-- Ensure admin_settings table exists (should already be created by previous scripts)
CREATE TABLE IF NOT EXISTS admin_settings (
    id SERIAL PRIMARY KEY,
    setting_key VARCHAR(255) UNIQUE NOT NULL,
    setting_value JSONB NOT NULL,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Insert or update revision settings with automatic refunds enabled
INSERT INTO admin_settings (setting_key, setting_value, updated_at)
VALUES (
    'revision_settings',
    '{
        "maxRevisionRequests": 2,
        "revisionRequestTimeoutValue": 24,
        "revisionRequestTimeoutUnit": "hours",
        "rejectionResponseTimeoutValue": 24,
        "rejectionResponseTimeoutUnit": "hours",
        "enableAutomaticRefunds": true,
        "refundOnRevisionTimeout": true,
        "refundOnRejectionTimeout": true,
        "enableRevisionWarnings": true,
        "revisionPenaltyEnabled": false,
        "revisionPenaltyAmount": 0,
        "updated_at": "' || NOW()::text || '"
    }'::jsonb,
    NOW()
)
ON CONFLICT (setting_key) 
DO UPDATE SET 
    setting_value = EXCLUDED.setting_value,
    updated_at = EXCLUDED.updated_at;

-- Create index for faster lookups
CREATE INDEX IF NOT EXISTS idx_admin_settings_key ON admin_settings(setting_key);

-- Verify the settings were inserted correctly
SELECT setting_key, setting_value FROM admin_settings WHERE setting_key = 'revision_settings';
[V0_FILE]javascript:file="scripts/test-refund-system.js" isMerged="true"
// Test script to verify automatic refund processing system
// This script tests the entire refund flow to ensure deadlines trigger proper refunds

console.log("🧪 Starting Refund System Test Suite...")
console.log("=".repeat(50))

// Test 1: Verify Admin Settings API
async function testAdminSettingsAPI() {
  console.log("\n📋 Test 1: Admin Settings API")
  console.log("-".repeat(30))

try {
    const response = await fetch("/api/admin/revision-settings")
    const settings = await response.json()

console.log("✅ Admin Settings API Response:", response.status)
    console.log("📊 Settings loaded:", {
      enableAutomaticRefunds: settings.enableAutomaticRefunds,
      refundOnRevisionTimeout: settings.refundOnRevisionTimeout,
      refundOnRejectionTimeout: settings.refundOnRejectionTimeout,
    })

if (settings.enableAutomaticRefunds && settings.refundOnRevisionTimeout && settings.refundOnRejectionTimeout) {
      console.log("✅ Admin settings configured correctly for automatic refunds")
      return true
    } else {
      console.log("❌ Admin settings not configured for automatic refunds")
      return false
    }
  } catch (error) {
    console.error("❌ Admin Settings API failed:", error)
    return false
  }
}

// Test 2: Create Test Work Proofs with Expired Deadlines
async function createTestWorkProofs() {
  console.log("\n🔧 Test 2: Creating Test Work Proofs")
  console.log("-".repeat(30))

try {
    // Import work proof functions
    const { getStoredWorkProofs, saveWorkProofs } = await import("../lib/work-proofs.js")

const existingProofs = getStoredWorkProofs()
    const testProofs = []

// Create test proof with expired rejection deadline
    const expiredRejectionProof = {
      id: `test-rejection-${Date.now()}`,
      jobId: `test-job-${Date.now()}`,
      applicationId: `test-app-${Date.now()}`,
      workerId: "test-worker-1",
      employerId: "test-employer-1",
      title: "Test Work Proof - Expired Rejection",
      description: "Test work proof for rejection timeout testing",
      submissionText: "This is a test submission",
      proofFiles: [],
      proofLinks: [],
      screenshots: [],
      status: "rejected",
      submittedAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(), // 2 days ago
      reviewedAt: new Date(Date.now() - 25 * 60 * 60 * 1000).toISOString(), // 25 hours ago
      reviewFeedback: "Test rejection for timeout testing",
      paymentAmount: 50.0,
      submissionNumber: 1,
      createdAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
      updatedAt: new Date(Date.now() - 25 * 60 * 60 * 1000).toISOString(),
      rejectionDeadline: new Date(Date.now() - 60 * 60 * 1000).toISOString(), // 1 hour ago (expired)
      worker: {
        id: "test-worker-1",
        firstName: "Test",
        lastName: "Worker",
        username: "testworker1",
      },
      employer: {
        id: "test-employer-1",
        firstName: "Test",
        lastName: "Employer",
        username: "testemployer1",
      },
    }

// Create test proof with expired revision deadline
    const expiredRevisionProof = {
      id: `test-revision-${Date.now()}`,
      jobId: `test-job-revision-${Date.now()}`,
      applicationId: `test-app-revision-${Date.now()}`,
      workerId: "test-worker-2",
      employerId: "test-employer-2",
      title: "Test Work Proof - Expired Revision",
      description: "Test work proof for revision timeout testing",
      submissionText: "This is a test submission for revision",
      proofFiles: [],
      proofLinks: [],
      screenshots: [],
      status: "revision_requested",
      submittedAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
      reviewedAt: new Date(Date.now() - 25 * 60 * 60 * 1000).toISOString(),
      reviewFeedback: "Test revision request for timeout testing",
      paymentAmount: 75.0,
      submissionNumber: 1,
      revisionCount: 1,
      createdAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
      updatedAt: new Date(Date.now() - 25 * 60 * 60 * 1000).toISOString(),
      revisionDeadline: new Date(Date.now() - 60 * 60 * 1000).toISOString(), // 1 hour ago (expired)
      worker: {
        id: "test-worker-2",
        firstName: "Test",
        lastName: "Worker2",
        username: "testworker2",
      },
      employer: {
        id: "test-employer-2",
        firstName: "Test",
        lastName: "Employer2",
        username: "testemployer2",
      },
    }

testProofs.push(expiredRejectionProof, expiredRevisionProof)

// Add test proofs to storage
    const allProofs = [...existingProofs, ...testProofs]
    saveWorkProofs(allProofs)

console.log("✅ Created test work proofs:")
    console.log(`   - Expired rejection proof: ${expiredRejectionProof.id}`)
    console.log(`   - Expired revision proof: ${expiredRevisionProof.id}`)

return testProofs
  } catch (error) {
    console.error("❌ Failed to create test work proofs:", error)
    return []
  }
}

// Test 3: Test Cron Job Endpoint
async function testCronEndpoint() {
  console.log("\n⏰ Test 3: Cron Job Endpoint")
  console.log("-".repeat(30))

try {
    const cronSecret = process.env.CRON_SECRET || "test-secret"
    console.log("🔑 Using CRON_SECRET:", cronSecret ? "SET" : "NOT SET")

const response = await fetch("/api/cron/process-work-proof-timeouts", {
      method: "POST",
      headers: {
        Authorization: `Bearer ${cronSecret}`,
        "Content-Type": "application/json",
      },
    })

const result = await response.json()

console.log("📊 Cron endpoint response:", response.status)
    console.log("📋 Processing result:", {
      success: result.success,
      processedCount: result.processedCount,
      settings: result.settings,
    })

if (response.ok && result.success) {
      console.log("✅ Cron endpoint working correctly")
      console.log(`✅ Processed ${result.processedCount} expired deadlines`)
      return result.processedCount
    } else {
      console.log("❌ Cron endpoint failed:", result.error || result.details)
      return 0
    }
  } catch (error) {
    console.error("❌ Cron endpoint test failed:", error)
    return 0
  }
}

// Test 4: Verify Wallet Transactions
async function verifyWalletTransactions(testProofs) {
  console.log("\n💰 Test 4: Wallet Transaction Verification")
  console.log("-".repeat(30))

try {
    // Check if refund transactions were created
    const transactions = JSON.parse(localStorage.getItem("wallet_transactions") || "[]")

let refundCount = 0
    let totalRefundAmount = 0

for (const proof of testProofs) {
      const refundTransaction = transactions.find(
        (t) => t.referenceId === proof.id && t.type === "refund" && t.status === "completed",
      )

if (refundTransaction) {
        refundCount++
        totalRefundAmount += refundTransaction.amount
        console.log(`✅ Found refund transaction for proof ${proof.id}: $${refundTransaction.amount}`)
      } else {
        console.log(`❌ Missing refund transaction for proof ${proof.id}`)
      }
    }

console.log(`📊 Refund Summary:`)
    console.log(`   - Refunds processed: ${refundCount}/${testProofs.length}`)
    console.log(`   - Total refund amount: $${totalRefundAmount.toFixed(2)}`)

return refundCount === testProofs.length
  } catch (error) {
    console.error("❌ Wallet transaction verification failed:", error)
    return false
  }
}

// Test 5: Verify Work Proof Status Updates
async function verifyWorkProofUpdates(testProofs) {
  console.log("\n📋 Test 5: Work Proof Status Updates")
  console.log("-".repeat(30))

try {
    const { getStoredWorkProofs } = await import("../lib/work-proofs.js")
    const currentProofs = getStoredWorkProofs()

let updatedCount = 0

for (const testProof of testProofs) {
      const currentProof = currentProofs.find((p) => p.id === testProof.id)

if (currentProof) {
        const expectedStatus = testProof.status === "rejected" ? "rejected_accepted" : "cancelled_by_worker"

if (currentProof.status === expectedStatus) {
          updatedCount++
          console.log(`✅ Proof ${testProof.id} status updated to: ${currentProof.status}`)
        } else {
          console.log(
            `❌ Proof ${testProof.id} status not updated. Expected: ${expectedStatus}, Got: ${currentProof.status}`,
          )
        }
      } else {
        console.log(`❌ Test proof ${testProof.id} not found in current proofs`)
      }
    }

console.log(`📊 Status Update Summary: ${updatedCount}/${testProofs.length} proofs updated correctly`)

return updatedCount === testProofs.length
  } catch (error) {
    console.error("❌ Work proof status verification failed:", error)
    return false
  }
}

// Test 6: Clean Up Test Data
async function cleanupTestData(testProofs) {
  console.log("\n🧹 Test 6: Cleanup Test Data")
  console.log("-".repeat(30))

try {
    // Remove test work proofs
    const { getStoredWorkProofs, saveWorkProofs } = await import("../lib/work-proofs.js")
    const currentProofs = getStoredWorkProofs()
    const testProofIds = testProofs.map((p) => p.id)
    const cleanedProofs = currentProofs.filter((p) => !testProofIds.includes(p.id))
    saveWorkProofs(cleanedProofs)

// Remove test wallet transactions
    const transactions = JSON.parse(localStorage.getItem("wallet_transactions") || "[]")
    const cleanedTransactions = transactions.filter((t) => !testProofIds.includes(t.referenceId))
    localStorage.setItem("wallet_transactions", JSON.stringify(cleanedTransactions))

console.log(`✅ Cleaned up ${testProofs.length} test work proofs`)
    console.log(`✅ Cleaned up test wallet transactions`)

return true
  } catch (error) {
    console.error("❌ Cleanup failed:", error)
    return false
  }
}

// Main Test Runner
async function runRefundSystemTests() {
  console.log("🚀 Running Comprehensive Refund System Tests")
  console.log("=".repeat(50))

const results = {
    adminSettings: false,
    cronEndpoint: false,
    walletTransactions: false,
    statusUpdates: false,
    cleanup: false,
  }

try {
    // Test 1: Admin Settings
    results.adminSettings = await testAdminSettingsAPI()

// Test 2: Create test data
    const testProofs = await createTestWorkProofs()

if (testProofs.length === 0) {
      console.log("❌ Cannot continue tests - failed to create test data")
      return results
    }

// Test 3: Run cron job
    const processedCount = await testCronEndpoint()
    results.cronEndpoint = processedCount > 0

// Wait a moment for processing to complete
    await new Promise((resolve) => setTimeout(resolve, 1000))

// Test 4: Verify wallet transactions
    results.walletTransactions = await verifyWalletTransactions(testProofs)

// Test 5: Verify work proof updates
    results.statusUpdates = await verifyWorkProofUpdates(testProofs)

// Test 6: Cleanup
    results.cleanup = await cleanupTestData(testProofs)
  } catch (error) {
    console.error("❌ Test suite failed:", error)
  }

// Print final results
  console.log("\n🏁 Final Test Results")
  console.log("=".repeat(50))

const testNames = {
    adminSettings: "Admin Settings API",
    cronEndpoint: "Cron Job Endpoint",
    walletTransactions: "Wallet Transactions",
    statusUpdates: "Status Updates",
    cleanup: "Data Cleanup",
  }

let passedTests = 0
  const totalTests = Object.keys(results).length

for (const [key, passed] of Object.entries(results)) {
    const status = passed ? "✅ PASS" : "❌ FAIL"
    console.log(`${status} ${testNames[key]}`)
    if (passed) passedTests++
  }

console.log("-".repeat(50))
  console.log(`📊 Overall Result: ${passedTests}/${totalTests} tests passed`)

if (passedTests === totalTests) {
    console.log("🎉 All tests passed! Refund system is working correctly.")
  } else {
    console.log("⚠️  Some tests failed. Please check the refund system configuration.")
  }

return results
}

// Export for use in browser console or Node.js
if (typeof window !== "undefined") {
  // Browser environment
  window.testRefundSystem = runRefundSystemTests
  console.log("💡 Run 'testRefundSystem()' in the browser console to test the refund system")
} else {
  // Node.js environment
  module.exports = { runRefundSystemTests }
}

// Auto-run if this script is executed directly
if (typeof window !== "undefined" && window.location.pathname.includes("test")) {
  runRefundSystemTests()
}
[V0_FILE]typescript:file="app/api/manual-cron-trigger/route.ts" isMerged="true"
import { processExpiredWorkProofs } from "@/lib/work-proofs"

export async function POST(request: Request) {
  try {
    console.log("[v0] 🔧 Manual cron trigger called")

const authHeader = request.headers.get("authorization")
    const cronSecret = process.env.CRON_SECRET

if (authHeader !== `Bearer ${cronSecret}`) {
      return Response.json({ error: "Unauthorized" }, { status: 401 })
    }

// Set environment variable to indicate cron processing
    process.env.CRON_PROCESSING = "true"
    console.log("[v0] ✅ Manual trigger - Set CRON_PROCESSING=true")

const result = await processExpiredWorkProofs()

console.log("[v0] 🎯 Manual cron trigger completed:", result)

return Response.json({
      success: true,
      message: "Manual cron trigger executed successfully",
      result,
      timestamp: new Date().toISOString(),
    })
  } catch (error) {
    console.error("[v0] ❌ Manual cron trigger failed:", error)
    return Response.json(
      {
        error: "Failed to execute manual cron trigger",
        details: error instanceof Error ? error.message : "Unknown error",
      },
      { status: 500 },
    )
  } finally {
    delete process.env.CRON_PROCESSING
    console.log("[v0] 🧹 Manual trigger - Cleaned up CRON_PROCESSING")
  }
}
[V0_FILE]typescript:file="app/api/cron/process-work-proof-timeouts/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"

export async function GET(request: NextRequest) {
  try {
    console.log("[CRON] 🚀 Cron job endpoint called at:", new Date().toISOString())
    console.log("[CRON] Request headers:", Object.fromEntries(request.headers.entries()))

const authHeader = request.headers.get("authorization")
    const expectedAuth = `Bearer ${process.env.CRON_SECRET}`

if (!process.env.CRON_SECRET) {
      console.error("[CRON] CRON_SECRET environment variable is not set!")
      return NextResponse.json({ error: "Server configuration error" }, { status: 500 })
    }

if (authHeader !== expectedAuth) {
      console.error("[CRON] Unauthorized request. Expected:", expectedAuth, "Got:", authHeader)
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

console.log("[CRON] ✅ Authorization successful, starting processing...")
    console.log("[CRON] Environment check - NODE_ENV:", process.env.NODE_ENV)

process.env.CRON_PROCESSING = "true"
    console.log("[CRON] 🔧 Set CRON_PROCESSING environment variable to:", process.env.CRON_PROCESSING)

// Import the timeout processing function
    const { processExpiredWorkProofs } = await import("@/lib/work-proofs")
    const { getRevisionSettingsFromAPI } = await import("@/lib/admin-settings")

let revisionSettings
    try {
      revisionSettings = await getRevisionSettingsFromAPI()
      console.log("[CRON] Admin refund settings loaded successfully:", {
        enableAutomaticRefunds: revisionSettings.enableAutomaticRefunds,
        refundOnRevisionTimeout: revisionSettings.refundOnRevisionTimeout,
        refundOnRejectionTimeout: revisionSettings.refundOnRejectionTimeout,
        revisionTimeout: `${revisionSettings.revisionRequestTimeoutValue} ${revisionSettings.revisionRequestTimeoutUnit}`,
        rejectionTimeout: `${revisionSettings.rejectionResponseTimeoutValue} ${revisionSettings.rejectionResponseTimeoutUnit}`,
      })
    } catch (error) {
      console.error("[CRON] Failed to load admin settings, using safe defaults:", error)
      revisionSettings = {
        maxRevisionRequests: 2,
        revisionRequestTimeoutValue: 24,
        revisionRequestTimeoutUnit: "hours" as const,
        rejectionResponseTimeoutValue: 24,
        rejectionResponseTimeoutUnit: "hours" as const,
        enableAutomaticRefunds: true,
        refundOnRevisionTimeout: true,
        refundOnRejectionTimeout: true,
        enableRevisionWarnings: true,
        revisionPenaltyEnabled: false,
        revisionPenaltyAmount: 0,
      }
    }

console.log("[CRON] 🎯 About to call processExpiredWorkProofs with CRON_PROCESSING =", process.env.CRON_PROCESSING)

// Process expired work proof deadlines
    const processedCount = await processExpiredWorkProofs()

delete process.env.CRON_PROCESSING
    console.log("[CRON] 🧹 Cleaned up CRON_PROCESSING environment variable")

console.log("[CRON] Work proof timeout processing completed successfully")
    console.log("[CRON] Processed", processedCount, "expired deadlines")

return NextResponse.json({
      success: true,
      message: "Work proof timeout processing completed",
      processedCount,
      timestamp: new Date().toISOString(),
      settings: {
        automaticRefundsEnabled: revisionSettings.enableAutomaticRefunds,
        refundOnRevisionTimeout: revisionSettings.refundOnRevisionTimeout,
        refundOnRejectionTimeout: revisionSettings.refundOnRejectionTimeout,
      },
    })
  } catch (error) {
    delete process.env.CRON_PROCESSING
    console.log("[CRON] 🧹 Cleaned up CRON_PROCESSING on error")

console.error("[CRON] Work proof timeout processing error:", error)
    console.error("[CRON] Error stack:", error instanceof Error ? error.stack : "No stack trace")

return NextResponse.json(
      {
        error: "Internal server error",
        details: error instanceof Error ? error.message : "Unknown error",
        timestamp: new Date().toISOString(),
      },
      { status: 500 },
    )
  }
}

// Also allow POST for manual triggering
export async function POST(request: NextRequest) {
  return GET(request)
}
[V0_FILE]typescript:file="app/test-cron-manual/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

export default function TestCronPage() {
  const [result, setResult] = useState<any>(null)
  const [loading, setLoading] = useState(false)

const triggerCron = async () => {
    setLoading(true)
    setResult(null)

try {
      const response = await fetch("/api/test-cron-now", {
        method: "POST",
      })

const data = await response.json()
      setResult(data)
    } catch (error) {
      setResult({
        success: false,
        error: error instanceof Error ? error.message : "Unknown error",
      })
    } finally {
      setLoading(false)
    }
  }

return (
    <div className="container mx-auto p-6">
      <Card>
        <CardHeader>
          <CardTitle>Manual Cron Job Test</CardTitle>
          <CardDescription>Test the automatic refund processing system manually</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <Button onClick={triggerCron} disabled={loading} className="w-full">
            {loading ? "Processing..." : "Trigger Cron Job Now"}
          </Button>

{result && (
            <div className="mt-4">
              <h3 className="font-semibold mb-2">Result:</h3>
              <pre className="bg-gray-100 p-4 rounded text-sm overflow-auto">{JSON.stringify(result, null, 2)}</pre>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescript:file="lib/work-proofs.ts" isQuickEdit="true" isMerged="true"
// Work proof submission and review system
export interface WorkProof {
  id: string
  jobId: string
  applicationId: string
  workerId: string
  employerId: string
  title: string
  description: string
  submissionText: string
  proofFiles: string[]
  proofLinks: string[]
  screenshots: string[]
  attachments?: string[]
  status:
    | "submitted"
    | "approved"
    | "rejected"
    | "revision_requested"
    | "auto_approved"
    | "rejected_accepted"
    | "disputed"
    | "cancelled_by_worker"
  submittedAt: string
  reviewedAt?: string
  reviewFeedback?: string
  paymentAmount: number
  submissionNumber: number
  createdAt: string
  updatedAt: string
  // New fields for enhanced workflow
  revisionCount?: number
  revisionDeadline?: string
  rejectionDeadline?: string
  workerResponse?: "accepted" | "disputed" | "cancelled"
  workerResponseAt?: string
  disputeReason?: string
  disputeEvidence?: string
  disputeRequestedAction?: string
  worker: {
    id: string
    firstName: string
    lastName: string
    username: string
    avatar?: string
  }
  employer?: {
    id: string
    firstName: string
    lastName: string
    username: string
    avatar?: string
  }
}

const WORK_PROOFS_STORAGE_KEY = "marketplace-work-proofs"

const getStoredWorkProofs = (): WorkProof[] => {
  if (typeof window === "undefined") return []
  try {
    const stored = localStorage.getItem(WORK_PROOFS_STORAGE_KEY)
    return stored ? JSON.parse(stored) : []
  } catch {
    return []
  }
}

const saveWorkProofs = (proofs: WorkProof[]): void => {
  if (typeof window === "undefined") return
  try {
    localStorage.setItem(WORK_PROOFS_STORAGE_KEY, JSON.stringify(proofs))
  } catch (error) {
    console.error("Failed to save work proofs:", error)
  }
}

export const getWorkProofs = (): WorkProof[] => {
  return getStoredWorkProofs()
}

const isAutoApprovalEnabled = (): boolean => {
  if (typeof window === "undefined") return false
  try {
    const setting = localStorage.getItem("admin_auto_approval_enabled")
    const isEnabled = setting === "true"
    console.log("[v0] Checking auto-approval setting:", setting, "-> enabled:", isEnabled)
    return isEnabled
  } catch (error) {
    console.error("[v0] Failed to check auto-approval setting:", error)
    return false
  }
}

export async function submitWorkProof(data: {
  jobId: string
  workerId: string
  applicationId?: string
  submissionText: string
  proofFiles: File[]
  proofLinks: string[]
  screenshots: File[]
  attachments?: File[]
}): Promise<WorkProof> {
  await new Promise((resolve) => setTimeout(resolve, 500))

console.log("[v0] 🚀 Starting work proof submission for job:", data.jobId, "worker:", data.workerId)

const proofFiles = data.proofFiles || []
  const screenshots = data.screenshots || []
  const proofLinks = data.proofLinks || []
  const attachments = data.attachments || []

console.log("[v0] 📸 PROCESSING FILES: Received", proofFiles.length, "files")

let job: any = null
  let shouldProcessInstantPayment = false

try {
    const { getJobById } = await import("./jobs")
    job = await getJobById(data.jobId)

if (job) {
      console.log("[v0] 🔍 FULL JOB DEBUG:")
      console.log("[v0] 🔍 Job ID:", job.id)
      console.log("[v0] 🔍 Job title:", job.title)
      console.log("[v0] 🔍 Job approvalType:", job.approvalType)
      console.log("[v0] 🔍 Job isInstantApprovalEnabled:", job.isInstantApprovalEnabled)
      console.log("[v0] 🔍 Job instantApprovalEnabled:", job.instantApprovalEnabled)
      console.log("[v0] 🔍 Job instant_approval_enabled:", job.instant_approval_enabled)
      console.log("[v0] 🔍 Job instant_payment_enabled:", job.instant_payment_enabled)
      console.log("[v0] 🔍 Job requiresInstantApproval:", job.requiresInstantApproval)
      console.log("[v0] 🔍 Job autoApproval:", job.autoApproval)
      console.log("[v0] 🔍 Job instantPayment:", job.instantPayment)

const hasInstantApproval =
        job.isInstantApprovalEnabled === true ||
        job.instantApprovalEnabled === true ||
        job.instant_approval_enabled === true ||
        job.instant_payment_enabled === true ||
        job.requiresInstantApproval === true ||
        job.autoApproval === true ||
        job.instantPayment === true

shouldProcessInstantPayment = job.approvalType === "instant" && hasInstantApproval

console.log("[v0] 📝 WORK PROOF: Job approval type:", job.approvalType)
      console.log("[v0] 📝 WORK PROOF: Has instant approval (any field):", hasInstantApproval)
      console.log("[v0] 📝 WORK PROOF: Should process instant payment:", shouldProcessInstantPayment)
    }
  } catch (error) {
    console.error("[v0] ❌ Failed to get job for instant approval check:", error)
  }

const processedFiles: string[] = []
  const processedScreenshots: string[] = []
  const processedAttachments: string[] = []

const processedFileNames = new Set<string>()

for (let i = 0; i < proofFiles.length; i++) {
    const file = proofFiles[i]
    console.log("[v0] 📁 Processing file:", file.name, "type:", file.type, "size:", file.size)

try {
      // Convert file to base64 for persistent storage
      const base64 = await new Promise<string>((resolve, reject) => {
        const reader = new FileReader()
        reader.onload = () => resolve(reader.result as string)
        reader.onerror = reject
        reader.readAsDataURL(file)
      })

const fileData = {
        name: file.name,
        type: file.type,
        size: file.size,
        data: base64,
        uploadedAt: new Date().toISOString(),
      }

const fileDataString = JSON.stringify(fileData)
      processedFiles.push(fileDataString)
      processedAttachments.push(fileDataString)

if (file.type.startsWith("image/") && !processedFileNames.has(file.name)) {
        processedScreenshots.push(fileDataString)
        processedFileNames.add(file.name)
        console.log("[v0] 📸 Added image to screenshots:", file.name)
      }

console.log("[v0] ✅ Successfully processed file:", file.name)
    } catch (error) {
      console.error("[v0] ❌ Failed to process file:", file.name, error)
    }
  }

for (let i = 0; i < screenshots.length; i++) {
    const file = screenshots[i]
    console.log("[v0] 📸 Processing screenshot:", file.name, "type:", file.type, "size:", file.size)

const fileData = {
        name: file.name,
        type: file.type,
        size: file.size,
        data: base64,
        uploadedAt: new Date().toISOString(),
      }

const fileDataString = JSON.stringify(fileData)

if (!processedFileNames.has(file.name)) {
        processedScreenshots.push(fileDataString)
        processedFileNames.add(file.name)
      }
      processedAttachments.push(fileDataString)

console.log("[v0] ✅ Successfully processed screenshot:", file.name)
    } catch (error) {
      console.error("[v0] ❌ Failed to process screenshot:", file.name, error)
    }
  }

console.log("[v0] 📊 FILE PROCESSING COMPLETE:")
  console.log("[v0] 📁 Total files processed:", processedFiles.length)
  console.log("[v0] 📸 Screenshots processed:", processedScreenshots.length)
  console.log("[v0] 📎 Attachments processed:", processedAttachments.length)

let paymentAmount = 0
  let applicationId = data.applicationId

try {
    const { getJobApplicationById, getJobApplications, getJobById } = await import("./jobs")

// First try to get from specific application
    if (applicationId) {
      console.log("[v0] 🔍 Looking for specific application:", applicationId)
      try {
        const application = await getJobApplicationById(applicationId)
        if (application && application.status === "accepted" && application.proposedBudget > 0) {
          paymentAmount = application.proposedBudget
          console.log("[v0] ✅ Found accepted application with budget:", paymentAmount)
        } else {
          console.log("[v0] ⚠️ Application not accepted or has $0 budget:", application)
        }
      } catch (error) {
        console.error("[v0] ❌ Failed to get specific application:", error)
      }
    }

// If no payment amount yet, search for ANY accepted application by this worker for this job
    if (paymentAmount === 0) {
      console.log("[v0] 🔍 Searching for ANY accepted application by worker:", data.workerId, "for job:", data.jobId)
      try {
        const applications = await getJobApplications(data.jobId)
        console.log("[v0] 📋 Found", applications.length, "applications for job")

const acceptedApp = applications.find(
          (app) => app.applicantId === data.workerId && app.status === "accepted" && app.proposedBudget > 0,
        )

if (acceptedApp) {
          paymentAmount = acceptedApp.proposedBudget
          applicationId = acceptedApp.id // Update application ID
          console.log(
            "[v0] ✅ Found accepted application for worker with budget:",
            paymentAmount,
            "app ID:",
            applicationId,
          )
        } else {
          console.log("[v0] ⚠️ No accepted application found for worker")
        }
      } catch (error) {
        console.error("[v0] ❌ Failed to search applications:", error)
      }
    }

// Fallback to job minimum budget
    if (paymentAmount === 0) {
      console.log("[v0] 🔍 Using job minimum budget as fallback")
      try {
        const job = await getJobById(data.jobId)
        if (job && job.budgetMin > 0) {
          paymentAmount = job.budgetMin
          console.log("[v0] ✅ Using job minimum budget:", paymentAmount)
        } else {
          console.log("[v0] ⚠️ Job not found or has $0 budget")
        }
      } catch (error) {
        console.error("[v0] ❌ Failed to get job:", error)
      }
    }

// Final fallback: minimum payment
    if (paymentAmount === 0) {
      paymentAmount = 25 // Minimum $25 payment
      console.warn("[v0] ⚠️ Using minimum $25 payment as final fallback")
    }
  } catch (error) {
    console.error("[v0] ❌ CRITICAL ERROR in payment calculation:", error)
    paymentAmount = 25 // Emergency fallback
  }

console.log("[v0] 💰 FINAL PAYMENT AMOUNT:", paymentAmount, "for work proof")

const { getAllUsers, getStoredUser } = await import("./auth")
  const users = getAllUsers()

console.log("[v0] 🔍 DEBUG: Looking for worker with ID:", data.workerId)
  console.log(
    "[v0] 🔍 DEBUG: Available users in database:",
    users.map((u) => ({ id: u.id, name: `${u.firstName} ${u.lastName}`, username: u.username })),
  )

const workerUser = users.find((u) => u.id === data.workerId)
  console.log(
    "[v0] 👤 Found worker user:",
    workerUser ? `${workerUser.firstName} ${workerUser.lastName} (@${workerUser.username})` : "NOT FOUND",
  )

// If worker not found, try to create a default user or find by different criteria
  let finalWorkerUser = workerUser
  if (!finalWorkerUser) {
    console.log("[v0] ⚠️ Worker not found, checking if we can find by other means...")
    // Try to find the currently logged in user as fallback
    const currentUser = getStoredUser()
    if (currentUser && currentUser.id === data.workerId) {
      finalWorkerUser = currentUser
      console.log(
        "[v0] ✅ Using current logged in user as worker:",
        finalWorkerUser.firstName,
        finalWorkerUser.lastName,
      )
    } else {
      // Create a temporary user entry for this worker ID
      console.log("[v0] ⚠️ Creating temporary user data for worker ID:", data.workerId)
      finalWorkerUser = {
        id: data.workerId,
        firstName: "Worker",
        lastName: `#${data.workerId}`,
        username: `worker${data.workerId}`,
        email: `worker${data.workerId}@temp.com`,
        userType: "user" as const,
        isVerified: false,
        deposit: 0,
        earning: 0,
        country: "Unknown",
        createdAt: new Date().toISOString(),
      }
    }
  }

const employerUser = users.find((u) => u.id === job?.userId)
  console.log(
    "[v0] 👤 Found employer user:",
    employerUser ? `${employerUser.firstName} ${employerUser.lastName} (@${employerUser.username})` : "NOT FOUND",
  )

const newProof: WorkProof = {
    id: Date.now().toString(),
    jobId: data.jobId,
    applicationId: applicationId || `app-${Date.now()}`,
    workerId: data.workerId,
    employerId: job?.userId || "employer-user",
    title: `Work proof for job ${data.jobId}`,
    description: data.submissionText,
    submissionText: data.submissionText,
    proofFiles: processedFiles,
    proofLinks: proofLinks,
    screenshots: processedScreenshots,
    attachments: processedAttachments,
    status: shouldProcessInstantPayment ? "approved" : "submitted",
    submittedAt: new Date().toISOString(),
    reviewedAt: shouldProcessInstantPayment ? new Date().toISOString() : undefined,
    reviewFeedback: shouldProcessInstantPayment ? "Automatically approved and paid (Instant Payment)" : undefined,
    paymentAmount,
    submissionNumber: 1,
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
    worker: {
      id: data.workerId,
      firstName: finalWorkerUser?.firstName || "Unknown",
      lastName: finalWorkerUser?.lastName || "Worker",
      username: finalWorkerUser?.username || `user${data.workerId}`,
      avatar: finalWorkerUser?.avatar,
    },
    employer: {
      id: job?.userId || "employer-user",
      firstName: employerUser?.firstName || "Job",
      lastName: employerUser?.lastName || "Poster",
      username: employerUser?.username || "jobposter",
    },
  }

if (shouldProcessInstantPayment && paymentAmount > 0) {
    try {
      console.log("[v0] 💰 INSTANT PAYMENT: Processing instant payment for work proof")

const { addWalletTransaction } = await import("./wallet")

// Calculate platform fee (5% default)
      const platformFeeRate = 0.05
      const platformFee = Math.round(paymentAmount * platformFeeRate * 100) / 100
      const workerAmount = Math.round((paymentAmount - platformFee) * 100) / 100

console.log("[v0] 💰 INSTANT PAYMENT: Total amount:", paymentAmount)
      console.log("[v0] 💰 INSTANT PAYMENT: Platform fee:", platformFee)
      console.log("[v0] 💰 INSTANT PAYMENT: Worker receives:", workerAmount)

const walletTransaction = await addWalletTransaction({
        userId: data.workerId,
        type: "earning",
        amount: workerAmount,
        description: `Instant payment for job: ${job?.title || "Job"}${job?.formattedJobId ? ` (#${job.formattedJobId})` : job?.jobNumber ? ` (#${job.jobNumber.toString().padStart(3, "0")})` : ""}`,
        referenceId: data.jobId,
        referenceType: "job_payment",
        balanceType: "earnings",
      })

console.log("[v0] 💰 ✅ Payment successfully added to worker's wallet!")
      console.log("[v0] 💰 Transaction ID:", walletTransaction.id)
      console.log("[v0] 💰 Worker", data.workerId, "received $", workerAmount, "in earnings balance")

const { createNotification } = await import("./notifications")
      await createNotification({
        userId: data.workerId,
        type: "payment",
        title: "Instant Payment Received! 💰",
        description: `You received $${workerAmount.toFixed(2)} for completing "${job?.title || "the job"}". Payment has been added to your withdrawal balance.`,
        actionUrl: `/dashboard/wallet`,
      })

// Create notification for employer
      if (job?.userId) {
        await createNotification({
          userId: job.userId,
          type: "job",
          title: "Work Submitted & Payment Released",
          description: `Work has been submitted for "${job.title}" and instant payment of $${paymentAmount.toFixed(2)} has been released to the worker.`,
          actionUrl: `/dashboard/jobs/${data.jobId}`,
        })
      }

console.log("[v0] ✅ INSTANT PAYMENT: Notifications sent successfully")
    } catch (error) {
      console.error("[v0] ❌ INSTANT PAYMENT: Error processing instant payment:", error)
      newProof.status = "submitted"
      newProof.reviewedAt = undefined
      newProof.reviewFeedback = undefined
      shouldProcessInstantPayment = false
      console.log("[v0] ⚠️ INSTANT PAYMENT: Reverted to manual approval due to payment error")
    }
  } else if (!shouldProcessInstantPayment) {
    console.log("[v0] 📝 WORK PROOF: Manual approval required, creating notification for employer")
    console.log("[v0] 🔍 DEBUG: Instant payment not processed because:")
    console.log("[v0] 🔍 DEBUG: - Job approval type:", job?.approvalType)
    console.log("[v0] 🔍 DEBUG: - Has instant approval enabled:", shouldProcessInstantPayment)
    console.log("[v0] 🔍 DEBUG: - Payment amount:", paymentAmount)

try {
      const { createNotification } = await import("./notifications")
      if (job?.userId) {
        await createNotification({
          userId: job.userId,
          type: "job",
          title: "Work Submitted for Review",
          description: `Work has been submitted for "${job.title}". Please review and approve within ${job.manualApprovalDays || 3} days.`,
          actionUrl: `/dashboard/jobs/${data.jobId}`,
        })
      }
    } catch (error) {
      console.error("[v0] ❌ Failed to create notification:", error)
    }
  }

const proofs = getStoredWorkProofs()
  proofs.push(newProof)
  saveWorkProofs(proofs)

console.log("[v0] ✅ Work proof created successfully!")
  console.log("[v0] 💰 Payment amount stored:", newProof.paymentAmount)
  console.log("[v0] 📋 Work proof ID:", newProof.id)
  console.log("[v0] 🔗 Application ID:", newProof.applicationId)
  console.log("[v0] ⚡ Instant approval:", shouldProcessInstantPayment ? "YES" : "NO")
  console.log("[v0] 📊 Final status:", newProof.status)

return newProof
}

export async function getWorkProofsByJob(jobId: string): Promise<WorkProof[]> {
  console.log("[v0] Loading work proofs for job:", jobId)
  await new Promise((resolve) => setTimeout(resolve, 300))

// The automatic processing should only happen server-side via the cron job endpoint

const proofs = getStoredWorkProofs()
  const jobProofs = proofs.filter((proof) => proof.jobId === jobId)
  console.log("[v0] Found work proofs for job", jobId, ":", jobProofs)
  return jobProofs
}

export async function getWorkProofById(proofId: string): Promise<WorkProof | null> {
  await new Promise((resolve) => setTimeout(resolve, 300))
  const proofs = getStoredWorkProofs()
  return proofs.find((proof) => proof.id === proofId) || null
}

export async function approveWorkProof(proofId: string, reviewNotes?: string): Promise<WorkProof> {
  await new Promise((resolve) => setTimeout(resolve, 500))

console.log("[v0] 🔍 Starting approval process for proof ID:", proofId)

const proofs = getStoredWorkProofs()
  const proofIndex = proofs.findIndex((p) => p.id === proofId)
  if (proofIndex === -1) {
    console.error("[v0] ❌ Work proof not found:", proofId)
    throw new Error("Work proof not found")
  }

const proof = proofs[proofIndex]
  console.log("[v0] 📋 Found work proof:", proof.title, "Payment amount:", proof.paymentAmount)

if (proof.paymentAmount === 0 || proof.paymentAmount === null || proof.paymentAmount === undefined) {
    console.error("[v0] ❌ CRITICAL ERROR: Work proof has invalid payment amount:", proof.paymentAmount)

try {
      const { getJobApplicationById, getJobApplications, getJobById } = await import("./jobs")

let fixedPaymentAmount = 0

// Try to get from application
      if (proof.applicationId) {
        console.log("[v0] 🔧 Attempting to fix payment from application:", proof.applicationId)
        try {
          const application = await getJobApplicationById(proof.applicationId)
          if (application && application.status === "accepted" && application.proposedBudget > 0) {
            fixedPaymentAmount = application.proposedBudget
            console.log("[v0] ✅ Fixed payment amount from application:", fixedPaymentAmount)
          }
        } catch (error) {
          console.error("[v0] ❌ Failed to get application for fixing:", error)
        }
      }

// Search for any accepted application by this worker
      if (fixedPaymentAmount === 0) {
        console.log("[v0] 🔧 Searching for accepted application by worker:", proof.workerId)
        try {
          const applications = await getJobApplications(proof.jobId)
          const acceptedApp = applications.find(
            (app) => app.applicantId === proof.workerId && app.status === "accepted" && app.proposedBudget > 0,
          )
          if (acceptedApp) {
            fixedPaymentAmount = acceptedApp.proposedBudget
            console.log("[v0] ✅ Fixed payment amount from worker's accepted application:", fixedPaymentAmount)
          }
        } catch (error) {
          console.error("[v0] ❌ Failed to search applications for fixing:", error)
        }
      }

// Fallback to job minimum budget
      if (fixedPaymentAmount === 0) {
        console.log("[v0] 🔧 Using job minimum budget as fallback")
        try {
          const job = await getJobById(proof.jobId)
          if (job && job.budgetMin > 0) {
            fixedPaymentAmount = job.budgetMin
            console.log("[v0] ✅ Fixed payment amount from job budget:", fixedPaymentAmount)
          }
        } catch (error) {
          console.error("[v0] ❌ Failed to get job for fixing:", error)
        }
      }

// Final fallback
      if (fixedPaymentAmount === 0) {
        fixedPaymentAmount = 25
        console.log("[v0] ⚠️ Using minimum $25 payment as final fallback")
      }

// Update the proof with fixed payment amount
      proof.paymentAmount = fixedPaymentAmount
      console.log("[v0] ✅ Fixed payment amount to:", fixedPaymentAmount)
    } catch (error) {
      console.error("[v0] ❌ Failed to fix payment amount:", error)
      throw new Error("Cannot approve work proof with invalid payment amount")
    }
  }

const updatedProof = {
    ...proof,
    status: "approved" as const,
    reviewedAt: new Date().toISOString(),
    reviewFeedback: reviewNotes || "Work approved by employer",
    updatedAt: new Date().toISOString(),
  }

proofs[proofIndex] = updatedProof
  saveWorkProofs(proofs)

console.log("[v0] ✅ Work proof approved by employer:", proofId)
  console.log("[v0] 💰 Processing payment of $", updatedProof.paymentAmount, "to worker", updatedProof.workerId)

try {
    const { addWalletTransaction } = await import("./wallet")
    const walletTransaction = await addWalletTransaction({
      userId: updatedProof.workerId,
      type: "earning",
      amount: updatedProof.paymentAmount,
      description: `Payment for completed work: ${updatedProof.title}`,
      referenceId: proofId,
      referenceType: "work_completion",
    })

console.log("[v0] 💰 ✅ Payment successfully added to worker's wallet!")
    console.log("[v0] 💰 Transaction ID:", walletTransaction.id)
    console.log(
      "[v0] 💰 Worker",
      updatedProof.workerId,
      "received $",
      updatedProof.paymentAmount,
      "in earnings balance",
    )

const { getJobById, updateJobStatus } = await import("./jobs")
    const job = await getJobById(updatedProof.jobId)

if (job) {
      const workersNeeded = job.workersNeeded || job.maxWorkers || 1

// Get all approved work proofs for this job
      const allJobProofs = proofs.filter((p) => p.jobId === updatedProof.jobId && p.status === "approved")

// Count unique workers who have completed work
      const uniqueWorkers = new Set(allJobProofs.map((p) => p.workerId))
      const completedWorkers = uniqueWorkers.size

console.log("[v0] 📊 Job completion check:")
      console.log("[v0] 📊 Workers needed:", workersNeeded)
      console.log("[v0] 📊 Completed workers:", completedWorkers)
      console.log("[v0] 📊 Unique workers with approved work:", Array.from(uniqueWorkers))

if (completedWorkers >= workersNeeded) {
        // All required workers have completed work - mark job as completed
        await updateJobStatus(updatedProof.jobId, "completed", updatedProof.workerId, {
          completedBy: updatedProof.workerId,
          paymentAmount: updatedProof.paymentAmount,
          completedAt: new Date().toISOString(),
          totalWorkersCompleted: completedWorkers,
          workersNeeded: workersNeeded,
        })
        console.log("[v0] ✅ Job", updatedProof.jobId, "marked as COMPLETED - all", workersNeeded, "workers finished")
      } else {
        // Still need more workers - keep job in progress
        await updateJobStatus(updatedProof.jobId, "in_progress", updatedProof.workerId, {
          completedBy: updatedProof.workerId,
          paymentAmount: updatedProof.paymentAmount,
          workersCompleted: completedWorkers,
          workersNeeded: workersNeeded,
          workersRemaining: workersNeeded - completedWorkers,
        })
        console.log(
          "[v0] 🔄 Job",
          updatedProof.jobId,
          "remains IN PROGRESS -",
          completedWorkers,
          "of",
          workersNeeded,
          "workers completed",
        )
      }
    } else {
      console.error("[v0] ❌ Could not find job to update status:", updatedProof.jobId)
    }
  } catch (error) {
    console.error("[v0] ❌ CRITICAL ERROR: Failed to process payment or update job status:", error)
    throw error
  }

return updatedProof
}

export async function rejectWorkProof(proofId: string, rejectionReason: string): Promise<WorkProof> {
  await new Promise((resolve) => setTimeout(resolve, 500))

const proofs = getStoredWorkProofs()
  const proofIndex = proofs.findIndex((p) => p.id === proofId)
  if (proofIndex === -1) throw new Error("Work proof not found")

const proof = proofs[proofIndex]

const { getRevisionSettingsFromAPI } = await import("./admin-settings")
  const revisionSettings = await getRevisionSettingsFromAPI()

// Calculate rejection deadline based on admin settings
  const timeoutValue = revisionSettings.rejectionResponseTimeoutValue || 24
  const timeoutUnit = revisionSettings.rejectionResponseTimeoutUnit || "hours"

let timeoutMs = 0
  switch (timeoutUnit) {
    case "minutes":
      timeoutMs = timeoutValue * 60 * 1000
      break
    case "hours":
      timeoutMs = timeoutValue * 60 * 60 * 1000
      break
    case "days":
      timeoutMs = timeoutValue * 24 * 60 * 60 * 1000
      break
    default:
      timeoutMs = 24 * 60 * 60 * 1000 // fallback to 24 hours
  }

const updatedProof = {
    ...proof,
    status: "rejected" as const,
    reviewedAt: new Date().toISOString(),
    reviewFeedback: rejectionReason,
    updatedAt: new Date().toISOString(),
    rejectionDeadline: new Date(Date.now() + timeoutMs).toISOString(),
  }

proofs[proofIndex] = updatedProof
  saveWorkProofs(proofs)

try {
    const { createNotification } = await import("./notifications")

const timeoutText =
      timeoutUnit === "minutes" && timeoutValue < 60
        ? `${timeoutValue} minutes`
        : timeoutUnit === "hours" && timeoutValue < 24
          ? `${timeoutValue} hours`
          : `${timeoutValue} ${timeoutUnit}`

await createNotification({
      userId: proof.workerId,
      type: "job",
      title: "Work Rejected - Action Required",
      description: `Your work for "${proof.title}" was rejected. You have ${timeoutText} to accept or dispute this decision.`,
      actionUrl: `/dashboard/applied-jobs`,
    })
  } catch (error) {
    console.error("[v0] Failed to create rejection notification:", error)
  }

return updatedProof
}

export async function requestRevision(
  proofId: string,
  revisionNotes: string,
  revisionCount?: number,
): Promise<WorkProof> {
  await new Promise((resolve) => setTimeout(resolve, 500))

const proofs = getStoredWorkProofs()
  const proofIndex = proofs.findIndex((p) => p.id === proofId)
  if (proofIndex === -1) throw new Error("Work proof not found")

const proof = proofs[proofIndex]

const { getRevisionSettingsFromAPI } = await import("./admin-settings")
  const revisionSettings = await getRevisionSettingsFromAPI()

const maxRevisions = revisionSettings.maxRevisionRequests || 2
  const currentRevisionCount = proof.revisionCount || 0
  const newRevisionCount = revisionCount !== undefined ? revisionCount : currentRevisionCount + 1

if (newRevisionCount > maxRevisions) {
    throw new Error(`Maximum revision requests (${maxRevisions}) exceeded. Please reject or approve the work.`)
  }

const timeoutValue = revisionSettings.revisionRequestTimeoutValue || 24
  const timeoutUnit = revisionSettings.revisionRequestTimeoutUnit || "hours"

const updatedProof = {
    ...proof,
    status: "revision_requested" as const,
    reviewedAt: new Date().toISOString(),
    reviewFeedback: revisionNotes,
    updatedAt: new Date().toISOString(),
    revisionCount: newRevisionCount,
    revisionDeadline: new Date(Date.now() + timeoutMs).toISOString(),
  }

proofs[proofIndex] = updatedProof
  saveWorkProofs(proofs)

try {
    const { createNotification } = await import("./notifications")

await createNotification({
      userId: proof.workerId,
      type: "job",
      title: `Revision Requested (${newRevisionCount}/${maxRevisions})`,
      description: `Your work needs revision. You have ${timeoutText} to resubmit or cancel the job.`,
      actionUrl: `/dashboard/applied-jobs`,
    })
  } catch (error) {
    console.error("[v0] Failed to create revision notification:", error)
  }

return updatedProof
}

export async function acceptRejection(proofId: string): Promise<WorkProof> {
  await new Promise((resolve) => setTimeout(resolve, 500))

const proofs = getStoredWorkProofs()
  const proofIndex = proofs.findIndex((p) => p.id === proofId)
  if (proofIndex === -1) throw new Error("Work proof not found")

const proof = proofs[proofIndex]

if (proof.status === "rejected_accepted") {
    console.log("[v0] ⚠️ WORK PROOF: Rejection already accepted for proof:", proofId)
    return proof
  }

if (proof.status !== "rejected") {
    console.log("[v0] ⚠️ WORK PROOF: Cannot accept rejection - proof status is:", proof.status)
    throw new Error(`Cannot accept rejection for proof with status: ${proof.status}`)
  }

const updatedProof = {
    ...proof,
    status: "rejected_accepted" as const,
    workerResponse: "accepted",
    workerResponseAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  }

proofs[proofIndex] = updatedProof
  saveWorkProofs(proofs)

try {
    const { addWalletTransaction } = await import("./wallet")
    const { getJobById } = await import("./jobs")

const job = await getJobById(proof.jobId)

if (job?.userId && proof.paymentAmount > 0) {
      await addWalletTransaction({
        userId: job.userId,
        type: "refund",
        amount: proof.paymentAmount,
        description: `Refund for rejected work: "${job.title}" (Job #${job.sequentialId || job.id})`,
        referenceId: proofId,
        referenceType: "work_rejection_refund",
        balanceType: "deposit",
      })

// Notify employer about refund
      const { createNotification } = await import("./notifications")
      await createNotification({
        userId: job.userId,
        type: "payment",
        title: "Refund Processed",
        description: `$${proof.paymentAmount.toFixed(2)} refunded for rejected work: ${proof.title}`,
        actionUrl: `/dashboard/wallet`,
      })
    }
  } catch (error) {
    if (error instanceof Error && error.message.includes("already exists")) {
      console.log("[v0] ⚠️ WORK PROOF: Refund already processed for proof:", proofId)
    } else {
      console.error("[v0] Failed to process rejection refund:", error)
      const proofs = getStoredWorkProofs()
      const proofIndex = proofs.findIndex((p) => p.id === proofId)
      if (proofIndex !== -1) {
        proofs[proofIndex] = { ...proof, status: "rejected" }
        saveWorkProofs(proofs)
      }
      throw error
    }
  }

return updatedProof
}

export async function createDispute(
  proofId: string,
  disputeData: {
    reason: string
    evidence: string
    requestedAction: string
  },
): Promise<void> {
  console.log("[v0] Creating dispute for proof:", proofId, "with data:", disputeData)
  await new Promise((resolve) => setTimeout(resolve, 500))

const proofs = getStoredWorkProofs()
  const proofIndex = proofs.findIndex((p) => p.id === proofId)
  if (proofIndex === -1) throw new Error("Work proof not found")

const proof = proofs[proofIndex]
  console.log("[v0] Found work proof for dispute:", proof.id, "job:", proof.jobId)

const updatedProof = {
    ...proof,
    status: "disputed" as const,
    workerResponse: "disputed",
    workerResponseAt: new Date().toISOString(),
    disputeReason: disputeData.reason,
    disputeEvidence: disputeData.evidence,
    disputeRequestedAction: disputeData.requestedAction,
    updatedAt: new Date().toISOString(),
  }

proofs[proofIndex] = updatedProof
  saveWorkProofs(proofs)
  console.log("[v0] Updated work proof status to disputed")

try {
    console.log("[v0] Importing admin dispute functions...")
    const { createAdminDispute } = await import("./admin-disputes")
    const { getJobById } = await import("./jobs")

console.log("[v0] Getting job details for dispute...")
    const job = await getJobById(proof.jobId)
    console.log("[v0] Job details:", job?.title || "Unknown Job")

console.log("[v0] Creating admin dispute...")
    await createAdminDispute({
      jobId: proof.jobId,
      workProofId: proofId,
      workerId: proof.workerId,
      employerId: proof.employerId,
      jobTitle: job?.title || "Unknown Job",
      workerName: `${proof.worker.firstName} ${proof.worker.lastName}`,
      employerName: job?.user ? `${job.user.firstName} ${job.user.lastName}` : "Unknown Employer",
      amount: proof.paymentAmount,
      reason: disputeData.reason,
      description: disputeData.evidence,
      requestedAction: disputeData.requestedAction,
      priority: "medium",
      evidenceCount: 0,
    })
    console.log("[v0] Admin dispute created successfully!")

const { createNotification } = await import("./notifications")
    await createNotification({
      userId: "admin",
      type: "admin",
      title: "New Dispute Filed",
      description: `Worker disputed rejection for "${job?.title || "job"}". Review required.`,
      actionUrl: `/admin/disputes`,
    })
    console.log("[v0] Admin notification created")
  } catch (error) {
    console.error("[v0] Failed to create admin dispute:", error)
    throw error
  }
}

export async function cancelJobByWorker(proofId: string): Promise<WorkProof> {
  await new Promise((resolve) => setTimeout(resolve, 500))

const proofs = getStoredWorkProofs()
  const proofIndex = proofs.findIndex((p) => p.id === proofId)
  if (proofIndex === -1) throw new Error("Work proof not found")

const proof = proofs[proofIndex]

const updatedProof = {
    ...proof,
    status: "cancelled_by_worker" as const,
    workerResponse: "cancelled",
    workerResponseAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  }

proofs[proofIndex] = updatedProof
  saveWorkProofs(proofs)

try {
    const { addWalletTransaction } = await import("./wallet")
    const { getJobById } = await import("./jobs")

const job = await getJobById(proof.jobId)

if (job?.userId && proof.paymentAmount > 0) {
      await addWalletTransaction({
        userId: job.userId,
        type: "refund",
        amount: proof.paymentAmount,
        description: `Refund for cancelled job: "${job.title}" (Job #${job.sequentialId || job.id})`,
        referenceId: proofId,
        referenceType: "job_cancellation_refund",
        balanceType: "deposit",
      })

// Notify employer about cancellation and refund
      const { createNotification } = await import("./notifications")
      await createNotification({
        userId: job.userId,
        type: "job",
        title: "Job Cancelled by Worker",
        description: `Worker cancelled the job "${proof.title}". $${proof.paymentAmount.toFixed(2)} has been refunded.`,
        actionUrl: `/dashboard/jobs`,
      })
    }
  } catch (error) {
    console.error("[v0] Failed to process cancellation refund:", error)
  }

return updatedProof
}

export async function resubmitWork(
  proofId: string,
  resubmissionData: {
    description: string
    proofFiles: File[]
    proofLinks: string[]
    additionalNotes?: string
  },
): Promise<WorkProof> {
  await new Promise((resolve) => setTimeout(resolve, 500))

const proofs = getStoredWorkProofs()
  const proofIndex = proofs.findIndex((p) => p.id === proofId)
  if (proofIndex === -1) throw new Error("Work proof not found")

const proof = proofs[proofIndex]

// Process new files
  const processedFiles: string[] = []
  const processedScreenshots: string[] = []
  const processedAttachments: string[] = []

const processedFileNames = new Set<string>()

for (let i = 0; i < resubmissionData.proofFiles.length; i++) {
    const file = resubmissionData.proofFiles[i]

try {
      const base64 = await new Promise<string>((resolve, reject) => {
        const reader = new FileReader()
        reader.onload = () => resolve(reader.result as string)
        reader.onerror = reject
        reader.readAsDataURL(file)
      })

const fileData = {
        name: file.name,
        type: file.type,
        size: file.size,
        data: base64,
        uploadedAt: new Date().toISOString(),
      }

const fileDataString = JSON.stringify(fileData)
      processedFiles.push(fileDataString)
      processedAttachments.push(fileDataString)

if (file.type.startsWith("image/") && !processedFileNames.has(file.name)) {
        processedScreenshots.push(fileDataString)
        processedFileNames.add(file.name)
      }
    } catch (error) {
      console.error("[v0] Failed to process resubmission file:", file.name, error)
    }
  }

const updatedProof = {
    ...proof,
    status: "submitted" as const,
    description: resubmissionData.description,
    submissionText: resubmissionData.description,
    proofFiles: processedFiles,
    proofLinks: resubmissionData.proofLinks,
    screenshots: processedScreenshots,
    attachments: processedAttachments,
    submittedAt: new Date().toISOString(), // Update submission time
    reviewedAt: undefined, // Clear previous review
    reviewFeedback: undefined, // Clear previous feedback
    submissionNumber: (proof.submissionNumber || 1) + 1,
    updatedAt: new Date().toISOString(),
    // Clear revision deadline since work is resubmitted
    revisionDeadline: undefined,
  }

proofs[proofIndex] = updatedProof
  saveWorkProofs(proofs)

try {
    const { createNotification } = await import("./notifications")
    const { getJobById } = await import("./jobs")

const job = await getJobById(proof.jobId)

if (job?.userId) {
      await createNotification({
        userId: job.userId,
        type: "job",
        title: "Work Resubmitted",
        description: `Worker has resubmitted work for "${proof.title}". Please review the updated submission.`,
        actionUrl: `/dashboard/jobs/${proof.jobId}/work-proofs`,
      })
    }
  } catch (error) {
    console.error("[v0] Failed to create resubmission notification:", error)
  }

return updatedProof
}

export const getWorkProofStatusColor = (status: string) => {
  switch (status) {
    case "submitted":
      return "bg-blue-100 text-blue-800"
    case "approved":
      return "bg-green-100 text-green-800"
    case "rejected":
      return "bg-red-100 text-red-800"
    case "revision_requested":
      return "bg-yellow-100 text-yellow-800"
    case "auto_approved":
      return "bg-green-200 text-green-900"
    case "rejected_accepted":
      return "bg-gray-100 text-gray-800"
    case "disputed":
      return "bg-orange-100 text-orange-800"
    case "cancelled_by_worker":
      return "bg-gray-100 text-gray-800"
    default:
      return "bg-gray-100 text-gray-800"
  }
}

export const getWorkProofStatusLabel = (status: string) => {
  switch (status) {
    case "submitted":
      return "Submitted"
    case "approved":
      return "Approved"
    case "rejected":
      return "Rejected"
    case "revision_requested":
      return "Revision Requested"
    case "auto_approved":
      return "Auto Approved"
    case "rejected_accepted":
      return "Rejection Accepted"
    case "disputed":
      return "Under Dispute"
    case "cancelled_by_worker":
      return "Cancelled"
    default:
      return status
  }
}

export async function processExpiredDeadlines(): Promise<void> {
  console.log("[v0] 🕐 Processing expired deadlines...")

try {
    const proofs = getStoredWorkProofs()
    let processedCount = 0

for (const proof of proofs) {
      const now = new Date()

// Auto-accept rejections after 24 hours
      if (proof.status === "rejected" && proof.rejectionDeadline) {
        const deadline = new Date(proof.rejectionDeadline)
        if (now > deadline) {
          console.log("[v0] ⏰ Auto-accepting rejection for proof:", proof.id)
          await acceptRejection(proof.id)
          processedCount++
        }
      }

// Auto-cancel jobs with expired revision deadlines
      if (proof.status === "revision_requested" && proof.revisionDeadline) {
        const deadline = new Date(proof.revisionDeadline)
        if (now > deadline) {
          console.log("[v0] ⏰ Auto-cancelling job due to expired revision deadline:", proof.id)
          await cancelJobByWorker(proof.id)
          processedCount++
        }
      }
    }

if (processedCount > 0) {
      console.log("[v0] ✅ Processed", processedCount, "expired deadlines")
    }
  } catch (error) {
    console.error("[v0] ❌ Error processing expired deadlines:", error)
  }
}

export async function processExpiredWorkProofs(): Promise<number> {
  console.log("[v0] 🕐 Processing expired work proof deadlines...")

const isFromCron = process.env.CRON_PROCESSING === "true"
  const isClientSide = typeof window !== "undefined"

console.log("[v0] 🔍 Environment check:")
  console.log("[v0] - CRON_PROCESSING env var:", process.env.CRON_PROCESSING)
  console.log("[v0] - isFromCron:", isFromCron)
  console.log("[v0] - isClientSide:", isClientSide)
  console.log("[v0] - typeof window:", typeof window)

// Only skip if we're on client side AND not from cron
  if (isClientSide && !isFromCron) {
    console.log("[v0] ⚠️ Skipping timeout processing - should only run from cron jobs or server")
    console.log("[v0] ⚠️ Reason: Running on client side without cron authorization")
    return 0
  }

if (!isFromCron && !isClientSide) {
    console.log("[v0] ⚠️ Skipping timeout processing - running on server but not from cron job")
    console.log("[v0] ⚠️ This prevents processing during page loads and API calls")
    return 0
  }

console.log("[v0] ✅ Processing authorized - isFromCron:", isFromCron, "isClientSide:", isClientSide)

try {
    const { getRevisionSettingsFromAPI } = await import("./admin-settings")

let revisionSettings
    let retryCount = 0
    const maxRetries = 3

while (retryCount < maxRetries) {
      try {
        revisionSettings = await getRevisionSettingsFromAPI()
        break
      } catch (error) {
        retryCount++
        console.error(`[v0] ❌ Failed to get revision settings (attempt ${retryCount}/${maxRetries}):`, error)

if (retryCount >= maxRetries) {
          console.log("[v0] ⚠️ Using fallback settings after max retries")
          revisionSettings = {
            maxRevisionRequests: 2,
            revisionRequestTimeoutValue: 24,
            revisionRequestTimeoutUnit: "hours" as const,
            rejectionResponseTimeoutValue: 24,
            rejectionResponseTimeoutUnit: "hours" as const,
            enableAutomaticRefunds: true,
            refundOnRevisionTimeout: true,
            refundOnRejectionTimeout: true,
            enableRevisionWarnings: true,
            revisionPenaltyEnabled: false,
            revisionPenaltyAmount: 0,
          }
        } else {
          // Wait 1 second before retry
          await new Promise((resolve) => setTimeout(resolve, 1000))
        }
      }
    }

console.log("[v0] ⚙️ Revision settings loaded:", {
      enableAutomaticRefunds: revisionSettings.enableAutomaticRefunds,
      refundOnRevisionTimeout: revisionSettings.refundOnRevisionTimeout,
      refundOnRejectionTimeout: revisionSettings.refundOnRejectionTimeout,
    })

const proofs = getStoredWorkProofs()
    const now = new Date()
    let processedCount = 0
    let errorCount = 0

console.log(`[v0] 📊 Found ${proofs.length} work proofs to check for expiration`)

for (const proof of proofs) {
      if (proof.status === "rejected_accepted" || proof.status === "cancelled_by_worker") {
        continue
      }

try {
        if (proof.status === "submitted") {
          try {
            const { getJobById } = await import("./jobs")
            const job = await getJobById(proof.jobId)
            if (job && job.approvalType === "manual") {
              const submittedAt = new Date(proof.submittedAt)
              const approvalDays = job.manualApprovalDays || 3
              const approvalDeadline = new Date(submittedAt.getTime() + approvalDays * 24 * 60 * 60 * 1000)

if (now > approvalDeadline) {
                console.log("[v0] ⏰ Auto-approving expired submitted work proof:", proof.id)
                await approveWorkProof(proof.id, "Automatically approved due to deadline expiration")
                processedCount++
                continue
              }
            }
          } catch (error) {
            console.error("[v0] ❌ Failed to process submitted work proof:", proof.id, error)
            errorCount++
            continue
          }
        }

if (proof.status === "rejected" && proof.rejectionDeadline) {
          const deadline = new Date(proof.rejectionDeadline)
          if (now > deadline) {
            console.log("[v0] ⏰ Processing expired rejection for proof:", proof.id)
            console.log(
              "[v0] 💰 Refund settings - enabled:",
              revisionSettings.enableAutomaticRefunds,
              "on rejection timeout:",
              revisionSettings.refundOnRejectionTimeout,
            )

if (revisionSettings.enableAutomaticRefunds && revisionSettings.refundOnRejectionTimeout) {
              console.log("[v0] 💰 Processing automatic refund for rejection timeout")
              try {
                await acceptRejection(proof.id)
                console.log("[v0] ✅ Successfully processed rejection refund for proof:", proof.id)
              } catch (error) {
                if (error instanceof Error && error.message.includes("already processed")) {
                  console.log("[v0] ⚠️ Rejection already processed for proof:", proof.id)
                } else if (error instanceof Error && error.message.includes("already exists")) {
                  console.log("[v0] ⚠️ Refund already exists for proof:", proof.id)
                } else {
                  console.error("[v0] ❌ Failed to process rejection refund for proof:", proof.id, error)
                  errorCount++
                  continue
                }
              }
            } else {
              console.log("[v0] ⚠️ Automatic refunds disabled - marking as accepted without refund")
              const proofs = getStoredWorkProofs()
              const proofIndex = proofs.findIndex((p) => p.id === proof.id)
              if (proofIndex !== -1 && proofs[proofIndex].status === "rejected") {
                proofs[proofIndex] = {
                  ...proofs[proofIndex],
                  status: "rejected_accepted" as const,
                  workerResponse: "accepted",
                  workerResponseAt: new Date().toISOString(),
                  updatedAt: new Date().toISOString(),
                }
                saveWorkProofs(proofs)
              }
            }
            processedCount++
          }
        }

if (proof.status === "revision_requested" && proof.revisionDeadline) {
          const deadline = new Date(proof.revisionDeadline)
          if (now > deadline) {
            console.log("[v0] ⏰ Processing expired revision deadline for proof:", proof.id)
            console.log(
              "[v0] 💰 Refund settings - enabled:",
              revisionSettings.enableAutomaticRefunds,
              "on revision timeout:",
              revisionSettings.refundOnRevisionTimeout,
            )

if (revisionSettings.enableAutomaticRefunds && revisionSettings.refundOnRevisionTimeout) {
              console.log("[v0] 💰 Processing automatic refund for revision timeout")
              try {
                await cancelJobByWorker(proof.id)
                console.log("[v0] ✅ Successfully processed revision timeout refund for proof:", proof.id)
              } catch (error) {
                if (error instanceof Error && error.message.includes("already processed")) {
                  console.log("[v0] ⚠️ Revision timeout already processed for proof:", proof.id)
                } else if (error instanceof Error && error.message.includes("already exists")) {
                  console.log("[v0] ⚠️ Refund already exists for proof:", proof.id)
                } else {
                  console.error("[v0] ❌ Failed to process revision timeout refund for proof:", proof.id, error)
                  errorCount++
                  continue
                }
              }
            } else {
              console.log("[v0] ⚠️ Automatic refunds disabled - marking as cancelled without refund")
              const proofs = getStoredWorkProofs()
              const proofIndex = proofs.findIndex((p) => p.id === proof.id)
              if (proofIndex !== -1 && proofs[proofIndex].status === "revision_requested") {
                proofs[proofIndex] = {
                  ...proofs[proofIndex],
                  status: "cancelled_by_worker" as const,
                  updatedAt: new Date().toISOString(),
                }
                saveWorkProofs(proofs)
              }
            }
            processedCount++
          }
        }
      } catch (error) {
        console.error("[v0] ❌ Error processing proof:", proof.id, error)
        errorCount++
      }
    }

console.log(`[v0] ✅ Automatic timeout processing completed. Processed ${processedCount} expired deadlines.`)
    if (errorCount > 0) {
      console.warn(`[v0] ⚠️ Encountered ${errorCount} errors during processing`)
    }
    return processedCount
  } catch (error) {
    console.error("[v0] ❌ Error in processExpiredWorkProofs:", error)
    return 0
  }
}

// Removing duplicate function
// export async function acceptRejection(proofId: string): Promise<WorkProof> {
//   console.log("[v0] 🔄 Processing rejection acceptance for proof:", proofId)

//   const proofs = getStoredWorkProofs()
//   const proofIndex = proofs.findIndex((p) => p.id === proofId)
//   if (proofIndex === -1) throw new Error("Work proof not found")

//   const proof = proofs[proofIndex]

//   if (proof.status === "rejected_accepted") {
//     console.log("[v0] ⚠️ Rejection already processed for proof:", proofId)
//     throw new Error("This rejection has already been processed")
//   }

//   if (proof.status !== "rejected") {
//     throw new Error("Work proof is not in rejected status")
//   }

//   const updatedProof = {
//     ...proof,
//     status: "rejected_accepted" as const,
//     workerResponse: "accepted",
//     workerResponseAt: new Date().toISOString(),
//     updatedAt: new Date().toISOString(),
//   }

//   proofs[proofIndex] = updatedProof
//   saveWorkProofs(proofs)

//   try {
//     const { getJobById } = await import("./jobs")
//     const job = await getJobById(proof.jobId)

//     if (job?.userId && proof.paymentAmount > 0) {
//       await addWalletTransaction({
//         userId: job.userId,
//         type: "refund",
//         amount: proof.paymentAmount,
//         description: `Refund for rejected work: ${proof.title}`,
//         referenceId: proofId,
//         referenceType: "work_rejection_refund",
//         balanceType: "deposit",
//       })

//       const { createNotification } = await import("./notifications")
//       await createNotification({
//         userId: job.userId,
//         type: "payment",
//         title: "Refund Processed",
//         description: `$${proof.paymentAmount.toFixed(2)} refunded for rejected work: ${proof.title}`,
//         actionUrl: `/dashboard/wallet`,
//       })
//     }
//   } catch (error) {
//     if (error instanceof Error && error.message.includes("already exists")) {
//       console.log("[v0] ⚠️ WORK PROOF: Refund already processed for proof:", proofId)
//     } else {
//       console.error("[v0] Failed to process rejection refund:", error)
//       const proofs = getStoredWorkProofs()
//       const proofIndex = proofs.findIndex((p) => p.id === proofId)
//       if (proofIndex !== -1) {
//         proofs[proofIndex] = { ...proof, status: "rejected" }
//         saveWorkProofs(proofs)
//       }
//       throw error
//     }
//   }

//   return updatedProof
// }

// Removing duplicate function
// export async function cancelJobByWorker(proofId: string): Promise<WorkProof> {
//   console.log("[v0] 🔄 Processing worker job cancellation for proof:", proofId)

//   const proofs = getStoredWorkProofs()
//   const proofIndex = proofs.findIndex((p) => p.id === proofId)
//   if (proofIndex === -1) throw new Error("Work proof not found")

//   const proof = proofs[proofIndex]

//   if (proof.status === "cancelled_by_worker") {
//     console.log("[v0] ⚠️ Worker cancellation already processed for proof:", proofId)
//     throw new Error("This work proof has already been cancelled")
//   }

//   const updatedProof = {
//     ...proof,
//     status: "cancelled_by_worker" as const,
//     updatedAt: new Date().toISOString(),
//   }

//   proofs[proofIndex] = updatedProof
//   saveWorkProofs(proofs)

//   try {
//     const { getJobById } = await import("./jobs")
//     const job = await getJobById(proof.jobId)

//     if (job?.userId && proof.paymentAmount > 0) {
//       await addWalletTransaction({
//         userId: job.userId,
//         type: "refund",
//         amount: proof.paymentAmount,
//         description: `Refund for cancelled job: ${proof.title}`,
//         referenceId: proofId,
//         referenceType: "job_cancellation_refund",
//         balanceType: "deposit",
//       })

//       const { createNotification } = await import("./notifications")
//       await createNotification({
//         userId: job.userId,
//         type: "job",
//         title: "Job Cancelled by Worker",
//         description: `Worker cancelled the job "${proof.title}". $${proof.paymentAmount.toFixed(2)} has been refunded.`,
//         actionUrl: `/dashboard/jobs`,
//       })
//     }
//   } catch (error) {
//     if (error instanceof Error && error.message.includes("already exists")) {
//       console.log("[v0] ⚠️ WORK PROOF: Cancellation refund already processed for proof:", proofId)
//     } else {
//       console.error("[v0] Failed to process cancellation refund:", error)
//       const proofs = getStoredWorkProofs()
//       const proofIndex = proofs.findIndex((p) => p.id === proofId)
//       if (proofIndex !== -1) {
//         proofs[proofIndex] = { ...proof, status: proof.status }
//         saveWorkProofs(proofs)
//       }
//       throw error
//     }
//   }

//   return updatedProof
// }

// Removing duplicate function
// export async function resubmitWork(
//   proofId: string,
//   resubmissionData: {
//     description: string
//     proofFiles: File[]
//     proofLinks: string[]
//     additionalNotes?: string
//   },
// ): Promise<WorkProof> {
//   await new Promise((resolve) => setTimeout(resolve, 500))

//   const proofs = getStoredWorkProofs()
//   const proofIndex = proofs.findIndex((p) => p.id === proofId)
//   if (proofIndex === -1) throw new Error("Work proof not found")

//   const proof = proofs[proofIndex]

//   const processedFiles: string[] = []
//   const processedScreenshots: string[] = []
//   const processedAttachments: string[] = []

//   const processedFileNames = new Set<string>()

//   for (let i = 0; i < resubmissionData.proofFiles.length; i++) {
//     const file = resubmissionData.proofFiles[i]

//     try {
//       const base64 = await new Promise((resolve, reject) => {
//         const reader = new FileReader()
//         reader.onload = () => resolve(reader.result as string)
//         reader.onerror = reject
//         reader.readAsDataURL(file)
//       })

//       const fileData = {
//         name: file.name,
//         type: file.type,
//         size: file.size,
//         data: base64,
//         uploadedAt: new Date().toISOString(),
//       }

//       const fileDataString = JSON.stringify(fileData)
//       processedFiles.push(fileDataString)
//       processedAttachments.push(fileDataString)

//       if (file.type.startsWith("image/") && !processedFileNames.has(file.name)) {
//         processedScreenshots.push(fileDataString)
//         processedFileNames.add(file.name)
//       }
//     } catch (error) {
//       console.error("[v0] Failed to process resubmission file:", file.name, error)
//     }
//   }

//   const updatedProof = {
//     ...proof,
//     status: "submitted" as const,
//     description: resubmissionData.description,
//     submissionText: resubmissionData.description,
//     proofFiles: processedFiles,
//     proofLinks: resubmissionData.proofLinks,
//     screenshots: processedScreenshots,
//     attachments: processedAttachments,
//     submittedAt: new Date().toISOString(),
//     reviewedAt: undefined,
//     reviewFeedback: undefined,
//     submissionNumber: (proof.submissionNumber || 1) + 1,
//     updatedAt: new Date().toISOString(),
//     revisionDeadline: undefined,
//   }

//   proofs[proofIndex] = updatedProof
//   saveWorkProofs(proofs)

//   try {
//     const { createNotification } = await import("./notifications")
//     const { getJobById } = await import("./jobs")

//     const job = await getJobById(proof.jobId)

//     if (job?.userId) {
//       await createNotification({
//         userId: job.userId,
//         type: "job",
//         title: "Work Resubmitted",
//         description: `Worker has resubmitted work for "${proof.title}". Please review the updated submission.`,
//         actionUrl: `/dashboard/jobs/${proof.jobId}/work-proofs`,
//       })
//     }
//   } catch (error) {
//     console.error("[v0] Failed to create resubmission notification:", error)
//   }

//   return updatedProof
// }

// Removing duplicate function
// export const getWorkProofStatusColor = (status: string) => {
//   switch (status) {
//     case "submitted":
//       return "bg-blue-100 text-blue-800"
//     case "approved":
//       return "bg-green-100 text-green-800"
//     case "rejected":
//       return "bg-red-100 text-red-800"
//     case "revision_requested":
//       return "bg-yellow-100 text-yellow-800"
//     case "auto_approved":
//       return "bg-green-200 text-green-900"
//     case "rejected_accepted":
//       return "bg-gray-100 text-gray-800"
//     case "disputed":
//        "rejected_accepted":
//       return "bg-gray-100 text-gray-800"
//     case "disputed":
//
// Removing duplicate function
// export const getWorkProofStatusLabel = (status: string) => {
//   switch (status) {
//     case "submitted":
//       return "Submitted"
//     case "approved":
//       return "Approved"
//     case "rejected":
//       return "Rejected"
//     case "revision_requested":
//       return "Revision Requested"
//     case "auto_approved":
//       return "Auto Approved"
//     case "rejected_accepted":
//       return "Rejection Accepted"
//     case "disputed":
//       return "Under Dispute"
//     case "cancelled_by_worker":
//       return "Cancelled"
//     default:
//       return status
//   }
// }

// Removing duplicate function
// export async function processExpiredDeadlines(): Promise<void> {
//   console.log("[v0] 🕐 Processing expired deadlines...")

//   try {
//     const proofs = getStoredWorkProofs()
//     let processedCount = 0

//     for (const proof of proofs) {
//       const now = new Date()

//       if (proof.status === "rejected" && proof.rejectionDeadline) {
//         const deadline = new Date(proof.rejectionDeadline)
//         if (now > deadline) {
//           console.log("[v0] ⏰ Auto-accepting rejection for proof:", proof.id)
//           await acceptRejection(proof.id)
//           processedCount++
//         }
//       }

//       if (proof.status === "revision_requested" && proof.revisionDeadline) {
//         const deadline = new Date(proof.revisionDeadline)
//         if (now > deadline) {
//           console.log("[v0] ⏰ Auto-cancelling job due to expired revision deadline:", proof.id)
//           await cancelJobByWorker(proof.id)
//           processedCount++
//         }
//       }
//     }

//     if (processedCount > 0) {
//       console.log("[v0] ✅ Processed", processedCount, "expired deadlines")
//     }
//   } catch (error) {
//     console.error("[v0] ❌ Error processing expired deadlines:", error)
//   }
// }

export function isWorkProofDeadlineExpired(proof: WorkProof, job?: any): boolean {
  const now = new Date()

// Check rejection deadline
  if (proof.status === "rejected" && proof.rejectionDeadline) {
    const deadline = new Date(proof.rejectionDeadline)
    return now > deadline
  }

// Check revision deadline
  if (proof.status === "revision_requested" && proof.revisionDeadline) {
    const deadline = new Date(proof.revisionDeadline)
    return now > deadline
  }

if (proof.status === "submitted" && job && job.approvalType === "manual") {
    const submittedAt = new Date(proof.submittedAt)
    const approvalDays = job.manualApprovalDays || 3
    const approvalDeadline = new Date(submittedAt.getTime() + approvalDays * 24 * 60 * 60 * 1000)
    return now > approvalDeadline
  }

return false
}

export function getWorkProofEffectiveStatus(proof: WorkProof): string {
  const job = {
    approvalType: "manual",
    manualApprovalDays: 3,
  }

if (isWorkProofDeadlineExpired(proof, job)) {
    if (proof.status === "rejected" && !proof.workerResponse) {
      return "rejected_accepted"
    }
    if (proof.status === "revision_requested") {
      return "cancelled_by_worker"
    }
    if (proof.status === "submitted") {
      return "approved"
    }
  }

return proof.status
}

export async function updateWorkProofStatus(
  jobId: string,
  workerId: string,
  status: "completed" | "rejected" | "approved" | "submitted",
): Promise<void> {
  const proofs = getStoredWorkProofs()
  const proofIndex = proofs.findIndex((p) => p.jobId === jobId && p.workerId === workerId)

if (proofIndex !== -1) {
    proofs[proofIndex] = {
      ...proofs[proofIndex],
      status: status as any,
      updatedAt: new Date().toISOString(),
      reviewedAt: new Date().toISOString(),
    }
    saveWorkProofs(proofs)
    console.log(`[v0] Updated work proof status to '${status}' for job: ${jobId}, worker: ${workerId}`)
  } else {
    console.warn(`[v0] Work proof not found for job: ${jobId}, worker: ${workerId}`)
  }
}
[V0_FILE]typescript:file="lib/admin-disputes.ts" isQuickEdit="true" isMerged="true"
export interface AdminDispute {
  id: string
  jobId: string
  jobTitle: string
  workerId: string
  workerName: string
  employerId: string
  employerName: string
  reason: string
  description: string
  amount: number
  status: "pending" | "under_review" | "resolved" | "escalated"
  priority: "low" | "medium" | "high" | "urgent"
  evidenceCount: number
  createdAt: string
  updatedAt: string
  adminId?: string
  adminNotes?: string
  resolution?: string
}

export interface DisputeResolution {
  decision: "approve_worker" | "approve_employer" | "partial_refund"
  adminNotes: string
  adminId: string
}

// Mock data for admin disputes
const DISPUTES_STORAGE_KEY = "admin_disputes_mock_data"

// Initialize mock data with persistence
function initializeMockDisputes(): AdminDispute[] {
  // Try to load from localStorage first
  if (typeof window !== "undefined") {
    const stored = localStorage.getItem(DISPUTES_STORAGE_KEY)
    if (stored) {
      try {
        const parsedDisputes = JSON.parse(stored)
        console.log(`[v0] Loaded ${parsedDisputes.length} disputes from localStorage`)
        return parsedDisputes
      } catch (error) {
        console.log(`[v0] Error parsing stored disputes, using defaults:`, error)
      }
    }
  }

const defaultDisputes: AdminDispute[] = []

// Save defaults to localStorage
  if (typeof window !== "undefined") {
    localStorage.setItem(DISPUTES_STORAGE_KEY, JSON.stringify(defaultDisputes))
    console.log(`[v0] Initialized ${defaultDisputes.length} default disputes in localStorage`)
  }

return defaultDisputes
}

function saveDisputesToStorage(disputes: AdminDispute[]): void {
  if (typeof window !== "undefined") {
    localStorage.setItem(DISPUTES_STORAGE_KEY, JSON.stringify(disputes))
    console.log(`[v0] Saved ${disputes.length} disputes to localStorage`)
  }
}

function getCurrentDisputes(): AdminDispute[] {
  if (typeof window !== "undefined") {
    const stored = localStorage.getItem(DISPUTES_STORAGE_KEY)
    if (stored) {
      try {
        return JSON.parse(stored)
      } catch (error) {
        console.log(`[v0] Error parsing stored disputes:`, error)
      }
    }
  }
  return initializeMockDisputes()
}

const mockDisputes: AdminDispute[] = initializeMockDisputes()

export async function getAdminDisputes(
  filters: {
    search?: string
    status?: string
    priority?: string
    limit?: number
  } = {},
): Promise<AdminDispute[]> {
  // Simulate API delay
  await new Promise((resolve) => setTimeout(resolve, 500))

const currentDisputes = getCurrentDisputes()

console.log(`[v0] Fetching admin disputes. Total in storage: ${currentDisputes.length}`)
  console.log(
    `[v0] Current disputes:`,
    currentDisputes.map((d) => ({ id: d.id, title: d.jobTitle, status: d.status })),
  )

let filtered = currentDisputes.filter((dispute) => !["dispute-1", "dispute-2", "dispute-3"].includes(dispute.id))

if (filters.search) {
    const search = filters.search.toLowerCase()
    filtered = filtered.filter(
      (dispute) =>
        dispute.jobTitle.toLowerCase().includes(search) ||
        dispute.workerName.toLowerCase().includes(search) ||
        dispute.employerName.toLowerCase().includes(search) ||
        dispute.reason.toLowerCase().includes(search),
    )
  }

if (filters.status) {
    filtered = filtered.filter((dispute) => dispute.status === filters.status)
  }

if (filters.priority) {
    filtered = filtered.filter((dispute) => dispute.priority === filters.priority)
  }

if (filters.limit) {
    filtered = filtered.slice(0, filters.limit)
  }

// Sort by priority and creation date
  filtered.sort((a, b) => {
    const priorityOrder = { urgent: 4, high: 3, medium: 2, low: 1 }
    const aPriority = priorityOrder[a.priority as keyof typeof priorityOrder]
    const bPriority = priorityOrder[b.priority as keyof typeof priorityOrder]

if (aPriority !== bPriority) {
      return bPriority - aPriority
    }

return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
  })

console.log(`[v0] Filtered disputes count: ${filtered.length}`)
  console.log(`[v0] Filters applied:`, filters)

return filtered
}

export async function resolveDispute(disputeId: string, resolution: DisputeResolution): Promise<void> {
  // Simulate API delay
  await new Promise((resolve) => setTimeout(resolve, 1000))

const currentDisputes = getCurrentDisputes()
  const disputeIndex = currentDisputes.findIndex((d) => d.id === disputeId)
  if (disputeIndex === -1) {
    throw new Error("Dispute not found")
  }

const dispute = currentDisputes[disputeIndex]

if (dispute.status === "resolved") {
    console.log(`[v0] ⚠️ Dispute ${disputeId} is already resolved, skipping duplicate resolution`)
    throw new Error("This dispute has already been resolved")
  }

console.log(`[v0] 🔄 Starting dispute resolution for: ${disputeId}`)
  console.log(`[v0] 🔄 Current dispute status: ${dispute.status}`)

// Update the dispute status first to prevent race conditions
  currentDisputes[disputeIndex] = {
    ...currentDisputes[disputeIndex],
    status: "resolved",
    adminId: resolution.adminId,
    adminNotes: resolution.adminNotes,
    resolution: resolution.decision,
    updatedAt: new Date().toISOString(),
  }

saveDisputesToStorage(currentDisputes)

console.log(`[v0] Dispute ${disputeId} resolved with decision: ${resolution.decision}`)
  console.log(`[v0] Admin notes: ${resolution.adminNotes}`)

try {
    await handleDisputeResolution(dispute, resolution.decision)
    console.log(`[v0] ✅ Payment processing completed for dispute: ${disputeId}`)
  } catch (error) {
    console.error(`[v0] ❌ Payment processing failed for dispute: ${disputeId}`, error)

currentDisputes[disputeIndex].status = "pending"
    saveDisputesToStorage(currentDisputes)

throw new Error("Dispute resolution failed during payment processing")
  }
}

export async function escalateDispute(disputeId: string, reason: string): Promise<void> {
  // Simulate API delay
  await new Promise((resolve) => setTimeout(resolve, 500))

const currentDisputes = getCurrentDisputes()
  const disputeIndex = currentDisputes.findIndex((d) => d.id === disputeId)
  if (disputeIndex === -1) {
    throw new Error("Dispute not found")
  }

currentDisputes[disputeIndex] = {
    ...currentDisputes[disputeIndex],
    status: "escalated",
    priority: "urgent",
    updatedAt: new Date().toISOString(),
  }

saveDisputesToStorage(currentDisputes)

console.log(`[v0] Dispute ${disputeId} escalated: ${reason}`)
}

export async function createAdminDispute(disputeData: {
  jobId: string
  workProofId: string
  workerId: string
  employerId: string
  jobTitle: string
  workerName: string
  employerName: string
  amount: number
  reason: string
  description: string
  requestedAction: string
  priority: "low" | "medium" | "high" | "urgent"
  evidenceCount: number
}): Promise<AdminDispute> {
  // Simulate API delay
  await new Promise((resolve) => setTimeout(resolve, 500))

const currentDisputes = getCurrentDisputes()

// Check if a dispute already exists for this job/worker/employer combination
  const existingDispute = currentDisputes.find(
    (dispute) =>
      dispute.jobId === disputeData.jobId &&
      dispute.workerId === disputeData.workerId &&
      dispute.employerId === disputeData.employerId &&
      (dispute.status === "pending" || dispute.status === "under_review"),
  )

if (existingDispute) {
    console.log(`[v0] ⚠️ Duplicate dispute prevented for job: ${disputeData.jobTitle}`)
    console.log(`[v0] ⚠️ Existing dispute ID: ${existingDispute.id}`)
    throw new Error("A dispute for this job already exists and is pending resolution")
  }

const timestamp = Date.now()
  const randomSuffix = Math.random().toString(36).substring(2, 8)
  const disputeId = `dispute-${timestamp}-${randomSuffix}`

const newDispute: AdminDispute = {
    id: disputeId,
    jobId: disputeData.jobId,
    jobTitle: disputeData.jobTitle,
    workerId: disputeData.workerId,
    workerName: disputeData.workerName,
    employerId: disputeData.employerId,
    employerName: disputeData.employerName,
    reason: disputeData.reason,
    description: disputeData.description,
    amount: disputeData.amount,
    status: "pending",
    priority: disputeData.priority,
    evidenceCount: disputeData.evidenceCount,
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  }

currentDisputes.unshift(newDispute)
  saveDisputesToStorage(currentDisputes)

console.log(`[v0] Created admin dispute: ${newDispute.id} for job: ${disputeData.jobTitle}`)
  console.log(`[v0] Total disputes after creation: ${currentDisputes.length}`)
  console.log(`[v0] New dispute details:`, newDispute)

return newDispute
}

import { createNotification } from "./notifications"
import { addWalletTransaction } from "./wallet"
import { updateWorkProofStatus } from "./work-proofs"

async function handleDisputeResolution(dispute: AdminDispute, decision: string): Promise<void> {
  console.log(`[v0] 💰 Processing dispute resolution payment for: ${dispute.id}`)
  console.log(`[v0] 💰 Decision: ${decision}, Amount: $${dispute.amount}`)
  console.log(`[v0] 💰 Worker: ${dispute.workerName} (${dispute.workerId})`)
  console.log(`[v0] 💰 Employer: ${dispute.employerName} (${dispute.employerId})`)

const amount = dispute.amount

try {
    switch (decision) {
      case "approve_worker":
        console.log(`[v0] 💰 APPROVE WORKER: Releasing $${amount} to worker`)

// Release full payment to worker's earnings balance
        await addWalletTransaction({
          userId: dispute.workerId,
          type: "earning",
          amount: amount,
          description: `Dispute Resolution: Payment released for "${dispute.jobTitle}" (Job #${dispute.jobId})`,
          referenceId: dispute.id,
          referenceType: "dispute_resolution",
          balanceType: "earnings",
        })

await updateWorkProofStatus(dispute.jobId, dispute.workerId, "completed")
        console.log(`[v0] ✅ Work proof status updated to 'completed' for job: ${dispute.jobId}`)

// Notify worker
        await createNotification({
          userId: dispute.workerId,
          type: "payment",
          title: "🎉 Dispute Resolved in Your Favor",
          description: `You've received $${amount.toFixed(2)} for "${dispute.jobTitle}" (Job #${dispute.jobId}). The admin has approved your work.`,
          actionUrl: "/dashboard/wallet",
        })

// Notify employer
        await createNotification({
          userId: dispute.employerId,
          type: "dispute",
          title: "📋 Dispute Resolution",
          description: `The dispute for "${dispute.jobTitle}" (Job #${dispute.jobId}) has been resolved in favor of the worker. Payment of $${amount.toFixed(2)} has been released.`,
          actionUrl: "/dashboard/jobs",
        })

console.log(`[v0] ✅ Worker payment completed: $${amount}`)
        break

case "approve_employer":
        console.log(`[v0] 💰 APPROVE EMPLOYER: Refunding $${amount} to employer`)

// Refund full amount to employer's deposit balance
        await addWalletTransaction({
          userId: dispute.employerId,
          type: "refund",
          amount: amount,
          description: `Dispute Resolution: Refund for "${dispute.jobTitle}" (Job #${dispute.jobId})`,
          referenceId: dispute.id,
          referenceType: "dispute_resolution",
          balanceType: "deposit",
        })

await updateWorkProofStatus(dispute.jobId, dispute.workerId, "rejected")
        console.log(`[v0] ✅ Work proof status updated to 'rejected' for job: ${dispute.jobId}`)

// Notify employer
        await createNotification({
          userId: dispute.employerId,
          type: "payment",
          title: "🔄 Dispute Resolved - Refund Issued",
          description: `You've received a $${amount.toFixed(2)} refund for "${dispute.jobTitle}" (Job #${dispute.jobId}). The admin has approved your dispute.`,
          actionUrl: "/dashboard/wallet",
        })

// Notify worker
        await createNotification({
          userId: dispute.workerId,
          type: "dispute",
          title: "📋 Dispute Resolution",
          description: `The dispute for "${dispute.jobTitle}" (Job #${dispute.jobId}) has been resolved in favor of the employer. A refund of $${amount.toFixed(2)} has been issued.`,
          actionUrl: "/dashboard/applied-jobs",
        })

console.log(`[v0] ✅ Employer refund completed: $${amount}`)
        break

case "partial_refund":
        console.log(`[v0] 💰 PARTIAL RESOLUTION: Splitting $${amount} between worker and employer`)

const workerAmount = amount * 0.5
        const employerAmount = amount * 0.5

// Give 50% to worker as earnings
        await addWalletTransaction({
          userId: dispute.workerId,
          type: "earning",
          amount: workerAmount,
          description: `Dispute Resolution: Partial payment (50%) for "${dispute.jobTitle}" (Job #${dispute.jobId})`,
          referenceId: dispute.id,
          referenceType: "dispute_resolution",
          balanceType: "earnings",
        })

// Refund 50% to employer
        await addWalletTransaction({
          userId: dispute.employerId,
          type: "refund",
          amount: employerAmount,
          description: `Dispute Resolution: Partial refund (50%) for "${dispute.jobTitle}" (Job #${dispute.jobId})`,
          referenceId: dispute.id,
          referenceType: "dispute_resolution",
          balanceType: "deposit",
        })

await updateWorkProofStatus(dispute.jobId, dispute.workerId, "completed")
        console.log(`[v0] ✅ Work proof status updated to 'completed' for partial resolution: ${dispute.jobId}`)

// Notify worker
        await createNotification({
          userId: dispute.workerId,
          type: "payment",
          title: "⚖️ Dispute Partially Resolved",
          description: `You've received $${workerAmount.toFixed(2)} (50%) for "${dispute.jobTitle}" (Job #${dispute.jobId}). The admin has made a partial resolution.`,
          actionUrl: "/dashboard/wallet",
        })

// Notify employer
        await createNotification({
          userId: dispute.employerId,
          type: "payment",
          title: "⚖️ Dispute Partially Resolved",
          description: `You've received a $${employerAmount.toFixed(2)} (50%) refund for "${dispute.jobTitle}" (Job #${dispute.jobId}). The admin has made a partial resolution.`,
          actionUrl: "/dashboard/wallet",
        })

console.log(`[v0] ✅ Partial resolution completed: Worker $${workerAmount}, Employer $${employerAmount}`)
        break

default:
        throw new Error(`Unknown resolution decision: ${decision}`)
    }

console.log(`[v0] 🎯 Dispute resolution payment processing completed successfully`)
  } catch (error) {
    console.error(`[v0] ❌ Error processing dispute resolution payment:`, error)
    throw error
  }
}
[V0_FILE]typescriptreact:file="components/work-proofs/enhanced-work-proof-modal.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Textarea } from "@/components/ui/textarea"
import { Input } from "@/components/ui/input"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Card, CardContent } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import {
  X,
  Check,
  RotateCcw,
  DollarSign,
  Gift,
  Star,
  ExternalLink,
  Download,
  Eye,
  Award,
  MessageCircle,
  AlertTriangle,
  FileText,
  ImageIcon,
  Clock,
} from "lucide-react"
import { toast } from "sonner"
import { type WorkProof, getWorkProofStatusLabel } from "@/lib/work-proofs"
import { ReviewForm } from "@/components/reviews/review-form"
import { ChatWindow } from "@/components/chat/chat-window"
import { createChat, getChatMessages, sendMessage } from "@/lib/chat"
import { getRevisionSettingsFromAPI, type RevisionSettings } from "@/lib/admin-settings"

interface EnhancedWorkProofModalProps {
  proof: WorkProof | null
  isOpen: boolean
  onClose: () => void
  onUpdate: () => void
  userRole: "employer" | "worker"
}

export function EnhancedWorkProofModal({ proof, isOpen, onClose, onUpdate, userRole }: EnhancedWorkProofModalProps) {
  const [reviewNotes, setReviewNotes] = useState("")
  const [rejectionReason, setRejectionReason] = useState("")
  const [tipAmount, setTipAmount] = useState("")
  const [actionLoading, setActionLoading] = useState<string | null>(null)
  const [showRejectForm, setShowRejectForm] = useState(false)
  const [showRevisionForm, setShowRevisionForm] = useState(false)
  const [showTipForm, setShowTipForm] = useState(false)
  const [showReviewForm, setShowReviewForm] = useState(false)
  const [selectedScreenshot, setSelectedScreenshot] = useState<string | null>(null)
  const [showChat, setShowChat] = useState(false)
  const [chatData, setChatData] = useState<any>(null)
  const [chatMessages, setChatMessages] = useState<any[]>([])
  const [revisionSettings, setRevisionSettings] = useState<RevisionSettings>({
    maxRevisionRequests: 2,
    revisionRequestTimeoutValue: 24,
    revisionRequestTimeoutUnit: "hours",
    rejectionResponseTimeoutValue: 24,
    rejectionResponseTimeoutUnit: "hours",
    enableAutomaticRefunds: true,
    refundOnRevisionTimeout: true,
    refundOnRejectionTimeout: true,
    enableRevisionWarnings: true,
    revisionPenaltyEnabled: false,
    revisionPenaltyAmount: 0,
  })

const remainingRevisions = revisionSettings.maxRevisionRequests - (proof?.revisionCount || 0)

// Helper function to format time display correctly
  const formatTimeDisplay = (value: number, unit: string) => {
    if (unit === "minutes") {
      return value === 1 ? "1 minute" : `${value} minutes`
    } else if (unit === "hours") {
      return value === 1 ? "1 hour" : `${value} hours`
    } else if (unit === "days") {
      return value === 1 ? "1 day" : `${value} days`
    }
    // Fallback to hours if unit is not recognized
    return value === 1 ? "1 hour" : `${value} hours`
  }

// Calculate timeout information based on admin settings
  const getTimeoutInfo = () => {
    if (!proof) return null

const now = new Date()
    let timeoutValue = 24 // default fallback
    let timeoutUnit = "hours"
    let timeoutLabel = "Response Time"

if (proof.status === "revision_requested") {
      // Use revision-specific timeout settings
      timeoutValue = revisionSettings.revisionRequestTimeoutValue || 24
      timeoutUnit = revisionSettings.revisionRequestTimeoutUnit || "hours"
      timeoutLabel = `Revision Response (${formatTimeDisplay(timeoutValue, timeoutUnit)})`
    } else if (proof.status === "rejected") {
      // Use rejection-specific timeout settings
      timeoutValue = revisionSettings.rejectionResponseTimeoutValue || 24
      timeoutUnit = revisionSettings.rejectionResponseTimeoutUnit || "hours"
      timeoutLabel = `Rejection Response (${formatTimeDisplay(timeoutValue, timeoutUnit)})`
    }

// Calculate deadline based on last action timestamp
    const lastActionTime = proof.reviewedAt ? new Date(proof.reviewedAt) : new Date(proof.submittedAt)
    const deadline = new Date(lastActionTime.getTime() + timeoutValue * 60 * 60 * 1000)
    const timeRemaining = deadline.getTime() - now.getTime()
    const hoursRemaining = Math.max(0, Math.floor(timeRemaining / (1000 * 60 * 60)))
    const minutesRemaining = Math.max(0, Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60)))

return {
      deadline,
      hoursRemaining,
      minutesRemaining,
      timeoutLabel,
      isExpired: timeRemaining <= 0,
    }
  }

const timeoutInfo = getTimeoutInfo()

useEffect(() => {
    const loadRevisionSettings = async () => {
      try {
        const settings = await getRevisionSettingsFromAPI()
        setRevisionSettings(settings)
        console.log("[v0] Loaded revision settings from API in modal:", settings)
      } catch (error) {
        console.error("Failed to load revision settings in modal:", error)
      }
    }

loadRevisionSettings()
  }, [])

if (!proof) return null

const totalPayment = proof.paymentAmount + (Number.parseFloat(tipAmount) || 0)

const handleOpenChat = async () => {
    try {
      const currentUser = JSON.parse(localStorage.getItem("currentUser") || "{}")

// Create or get existing chat with the worker
      const chat = await createChat({
        type: "order",
        title: `Job Discussion - ${proof.title}`,
        participants: [
          {
            id: currentUser.id,
            name: `${currentUser.firstName} ${currentUser.lastName}`,
            avatar: currentUser.avatar || "",
            isOnline: true,
          },
          {
            id: proof.workerId,
            name: `${proof.worker.firstName} ${proof.worker.lastName}`,
            avatar: proof.worker.avatar || "",
            isOnline: false,
          },
        ],
      })

const messages = await getChatMessages(chat.id)
      setChatData(chat)
      setChatMessages(messages)
      setShowChat(true)
    } catch (error) {
      console.error("Failed to open chat:", error)
      toast.error("Failed to open chat. Please try again.")
    }
  }

const handleSendMessage = async (content: string, files?: File[]) => {
    if (!chatData) return

try {
      const currentUser = JSON.parse(localStorage.getItem("currentUser") || "{}")
      await sendMessage(chatData.id, currentUser.id, content, files)

// Refresh messages
      const messages = await getChatMessages(chatData.id)
      setChatMessages(messages)
    } catch (error) {
      console.error("Failed to send message:", error)
      toast.error("Failed to send message. Please try again.")
    }
  }

const handleApprove = async () => {
    setActionLoading("approve")
    try {
      console.log("[v0] 🔄 Starting approval process for proof:", proof.id)
      console.log("[v0] 💰 Payment amount to be released:", proof.paymentAmount)

const response = await fetch("/api/work-proofs/approve", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          proofId: proof.id,
          reviewNotes,
          tipAmount: tipAmount && Number.parseFloat(tipAmount) > 0 ? Number.parseFloat(tipAmount) : null,
        }),
      })

const result = await response.json()

if (!response.ok) {
        throw new Error(result.error || "Failed to approve work proof")
      }

console.log("[v0] ✅ Work proof approved successfully via API")
      toast.success(result.message || "Work approved and payment released!")

setShowReviewForm(true)

onUpdate()
    } catch (error) {
      console.error("[v0] ❌ CRITICAL ERROR: Failed to approve work proof:", error)
      toast.error(error instanceof Error ? error.message : "Failed to approve work. Please try again.")
    } finally {
      setActionLoading(null)
    }
  }

const handleReviewSubmit = () => {
    setShowReviewForm(false)
    onClose()
  }

const handleReviewClose = () => {
    setShowReviewForm(false)
    onClose()
  }

const handleViewScreenshot = (screenshot: string) => {
    setSelectedScreenshot(screenshot)
  }

const handleReject = async () => {
    if (!rejectionReason.trim()) {
      toast.error("Please provide a reason for rejection")
      return
    }

setActionLoading("reject")
    try {
      const response = await fetch("/api/work-proofs/reject", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          proofId: proof.id,
          rejectionReason,
        }),
      })

const result = await response.json()

if (!response.ok) {
        throw new Error(result.error || "Failed to reject work proof")
      }

console.log("[v0] ✅ Work proof rejected successfully via API")
      toast.success(result.message || "Work rejected. Payment has been refunded.")

onUpdate()
      onClose()
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "Failed to reject work")
    } finally {
      setActionLoading(null)
    }
  }

const handleRequestRevision = async () => {
    if (!reviewNotes.trim()) {
      toast.error("Please provide revision notes")
      return
    }

setActionLoading("revision")
    try {
      const response = await fetch("/api/work-proofs/request-revision", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          proofId: proof.id,
          reviewNotes,
        }),
      })

const result = await response.json()

if (!response.ok) {
        throw new Error(result.error || "Failed to request revision")
      }

console.log("[v0] ✅ Revision requested successfully via API")
      toast.success(result.message || "Revision requested")

onUpdate()
      onClose()
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "Failed to request revision")
    } finally {
      setActionLoading(null)
    }
  }

if (showChat && chatData) {
    return (
      <Dialog open={isOpen} onOpenChange={onClose}>
        <DialogContent className="max-w-4xl max-h-[95vh] overflow-hidden p-0">
          <div className="bg-gradient-to-r from-blue-600 via-purple-600 to-blue-800 text-white p-4">
            <div className="flex items-center justify-between">
              <div>
                <DialogTitle className="text-xl font-bold">
                  Chat with {proof.worker.firstName} {proof.worker.lastName}
                </DialogTitle>
                <p className="text-blue-100 text-sm">Discuss job: {proof.title}</p>
              </div>
              <div className="flex items-center gap-2">
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => setShowChat(false)}
                  className="text-white hover:bg-white/20"
                >
                  Back to Review
                </Button>
                <Button variant="ghost" size="sm" onClick={onClose} className="text-white hover:bg-white/20">
                  <X className="h-5 w-5" />
                </Button>
              </div>
            </div>
          </div>

<div className="flex-1 h-[600px]">
            <ChatWindow
              chat={chatData}
              messages={chatMessages}
              currentUserId={JSON.parse(localStorage.getItem("currentUser") || "{}").id}
              onSendMessage={handleSendMessage}
              className="h-full"
            />
          </div>
        </DialogContent>
      </Dialog>
    )
  }

return (
    <>
      <Dialog open={isOpen} onOpenChange={onClose}>
        <DialogContent className="max-w-5xl max-h-[95vh] overflow-y-auto p-0">
          {/* Header with gradient */}
          <div className="bg-gradient-to-r from-blue-600 via-purple-600 to-blue-800 text-white p-6">
            <DialogHeader>
              <div className="flex items-center justify-between">
                <div>
                  <DialogTitle className="text-2xl font-bold">
                    {userRole === "worker" ? "My Work Submission" : "Work Submission Review"}
                  </DialogTitle>
                  <p className="text-blue-100 mt-1">
                    {userRole === "worker"
                      ? "View your submitted work and status"
                      : "Evaluate the completed work and process payment"}
                  </p>
                </div>
                <div className="flex items-center gap-3">
                  <Badge className="bg-white/20 text-white border-white/30 px-3 py-1">
                    {getWorkProofStatusLabel(proof.status)}
                  </Badge>
                  {timeoutInfo && (proof.status === "revision_requested" || proof.status === "rejected") && (
                    <Badge
                      className={`px-3 py-1 ${timeoutInfo.isExpired ? "bg-red-500 text-white" : "bg-yellow-500 text-white"}`}
                    >
                      <Clock className="mr-1 h-3 w-3" />
                      {timeoutInfo.isExpired
                        ? "Timeout Expired"
                        : `${formatTimeDisplay(timeoutInfo.hoursRemaining, "hours")} ${formatTimeDisplay(timeoutInfo.minutesRemaining, "minutes")} left`}
                    </Badge>
                  )}
                  <Button variant="ghost" size="sm" onClick={onClose} className="text-white hover:bg-white/20">
                    <X className="h-5 w-5" />
                  </Button>
                </div>
              </div>
            </DialogHeader>
          </div>

<div className="p-6 space-y-6">
            {userRole === "worker" ? (
              <>
                {/* Worker's view - show their submission details */}
                <Card className="border-2 border-blue-100 bg-gradient-to-r from-blue-50 to-purple-50">
                  <CardContent className="p-4">
                    <div className="flex items-center justify-between">
                      <div>
                        <h3 className="text-xl font-bold text-gray-900">Your Submission Status</h3>
                        <p className="text-blue-600 font-medium">
                          Submitted on {new Date(proof.submittedAt).toLocaleDateString()}
                        </p>
                        {proof.reviewedAt && (
                          <p className="text-gray-600 text-sm">
                            Reviewed on {new Date(proof.reviewedAt).toLocaleDateString()}
                          </p>
                        )}
                        {timeoutInfo && (proof.status === "revision_requested" || proof.status === "rejected") && (
                          <div
                            className={`mt-2 p-2 rounded-lg ${timeoutInfo.isExpired ? "bg-red-100 text-red-800" : "bg-yellow-100 text-yellow-800"}`}
                          >
                            <div className="flex items-center text-sm">
                              <Clock className="mr-1 h-4 w-4" />
                              {timeoutInfo.isExpired
                                ? "Timeout Expired"
                                : `${formatTimeDisplay(timeoutInfo.hoursRemaining, "hours")} ${formatTimeDisplay(timeoutInfo.minutesRemaining, "minutes")} remaining`}
                            </div>
                          </div>
                        )}
                      </div>
                      <div className="text-right">
                        <Badge
                          className={`text-lg px-4 py-2 ${
                            proof.status === "approved"
                              ? "bg-green-100 text-green-800"
                              : proof.status === "rejected"
                                ? "bg-red-100 text-red-800"
                                : proof.status === "revision_requested"
                                  ? "bg-yellow-100 text-yellow-800"
                                  : "bg-blue-100 text-blue-800"
                          }`}
                        >
                          {getWorkProofStatusLabel(proof.status)}
                        </Badge>
                        <div className="text-2xl font-bold text-green-600 mt-2">${proof.paymentAmount.toFixed(2)}</div>
                        <p className="text-sm text-gray-600">Payment Amount</p>
                      </div>
                    </div>
                  </CardContent>
                </Card>

{/* Work Submission Details */}
                <div className="space-y-4">
                  <h4 className="text-lg font-semibold flex items-center">
                    <Eye className="mr-2 h-5 w-5 text-blue-600" />
                    Your Work Submission
                  </h4>

<Card className="border border-gray-200">
                    <CardContent className="p-4">
                      <h5 className="font-medium text-gray-900 mb-2">{proof.title}</h5>
                      <p className="text-gray-700 leading-relaxed">{proof.description}</p>
                    </CardContent>
                  </Card>
                </div>
              </>
            ) : (
              <>
                {/* Employer's view - existing content */}
                <Card className="border-2 border-blue-100 bg-gradient-to-r from-blue-50 to-purple-50">
                  <CardContent className="p-4">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center space-x-4">
                        <Avatar className="h-16 w-16 border-4 border-white shadow-lg">
                          <AvatarFallback className="bg-gradient-to-r from-blue-500 to-purple-500 text-white text-lg font-bold">
                            {proof.worker.firstName?.[0] || "W"}
                            {proof.worker.lastName?.[0] || "W"}
                          </AvatarFallback>
                        </Avatar>
                        <div>
                          <h3 className="text-xl font-bold text-gray-900">
                            {proof.worker.firstName || "Worker"} {proof.worker.lastName || ""}
                          </h3>
                          <p className="text-blue-600 font-medium">@{proof.worker.username || "worker"}</p>
                          <div className="flex items-center mt-2 space-x-4">
                            <div className="flex items-center">
                              <Star className="h-4 w-4 text-yellow-400 fill-current" />
                              <span className="ml-1 text-sm font-medium">{proof.worker.rating || "4.8"}</span>
                            </div>
                            <div className="flex items-center">
                              <Award className="h-4 w-4 text-purple-500" />
                              <span className="ml-1 text-sm">{proof.worker.badge || "Top Rated"}</span>
                            </div>
                          </div>
                          <Button
                            onClick={handleOpenChat}
                            size="sm"
                            className="mt-3 bg-gradient-to-r from-green-500 to-teal-600 hover:from-green-600 hover:to-teal-700 text-white"
                          >
                            <MessageCircle className="mr-2 h-4 w-4" />
                            Chat with Worker
                          </Button>
                        </div>
                      </div>
                      <div className="text-right">
                        <div className="text-3xl font-bold text-green-600">${proof.paymentAmount.toFixed(2)}</div>
                        <p className="text-sm text-gray-600">Base Payment</p>
                      </div>
                    </div>
                  </CardContent>
                </Card>

<Card className="border-2 border-orange-200 bg-gradient-to-r from-orange-50 to-yellow-50">
                  <CardContent className="p-4">
                    <div className="flex items-start space-x-3">
                      <div className="bg-orange-100 rounded-full p-2">
                        <AlertTriangle className="h-5 w-5 text-orange-600" />
                      </div>
                      <div className="flex-1">
                        <h4 className="text-lg font-semibold text-orange-800 mb-2">Having Issues with the Work?</h4>
                        <p className="text-orange-700 mb-3">
                          If you notice any problems or need clarification about the submitted work,
                          <strong> contact the worker directly</strong> before making a decision. Clear communication
                          helps resolve issues quickly and fairly.
                        </p>
                        <div className="flex items-center gap-2">
                          <Button
                            onClick={handleOpenChat}
                            size="sm"
                            className="bg-orange-600 hover:bg-orange-700 text-white font-medium"
                          >
                            <MessageCircle className="mr-2 h-4 w-4" />
                            Contact Worker Now
                          </Button>
                          <span className="text-sm text-orange-600">
                            💡 Most issues can be resolved through direct communication
                          </span>
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>

{/* Work Submission */}
                <div className="space-y-4">
                  <h4 className="text-lg font-semibold flex items-center">
                    <Eye className="mr-2 h-5 w-5 text-blue-600" />
                    Work Submission
                  </h4>

{/* Payment & Tip Section */}
                {userRole === "employer" && proof.status === "submitted" && (
                  <Card className="border-2 border-green-200 bg-gradient-to-r from-green-50 to-emerald-50">
                    <CardContent className="p-6">
                      <div className="flex items-center justify-between mb-4">
                        <h4 className="text-lg font-semibold flex items-center">
                          <DollarSign className="mr-2 h-5 w-5 text-green-600" />
                          Payment Summary
                        </h4>
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() => setShowTipForm(!showTipForm)}
                          className="text-purple-600 border-purple-200 hover:bg-purple-50"
                        >
                          <Gift className="mr-1 h-4 w-4" />
                          Add Tip
                        </Button>
                      </div>

<div className="space-y-3">
                        <div className="flex justify-between items-center">
                          <span className="text-gray-700">Base Payment:</span>
                          <span className="font-semibold text-lg">${proof.paymentAmount.toFixed(2)}</span>
                        </div>

{showTipForm && (
                          <div className="flex items-center space-x-2 p-3 bg-white rounded-lg border border-purple-200">
                            <Gift className="h-4 w-4 text-purple-600" />
                            <span className="text-sm font-medium">Tip Amount:</span>
                            <Input
                              type="number"
                              placeholder="0.00"
                              value={tipAmount}
                              onChange={(e) => setTipAmount(e.target.value)}
                              className="w-24"
                              min="0"
                              step="0.01"
                            />
                            <span className="text-sm text-gray-600">USD</span>
                          </div>
                        )}

{tipAmount && Number.parseFloat(tipAmount) > 0 && (
                          <div className="flex justify-between items-center text-purple-600">
                            <span>Tip Amount:</span>
                            <span className="font-semibold">+${Number.parseFloat(tipAmount).toFixed(2)}</span>
                          </div>
                        )}

<div className="flex justify-between items-center text-lg font-bold">
                          <span>Total Payment:</span>
                          <span className="text-green-600">${totalPayment.toFixed(2)}</span>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                )}

{/* Action Buttons */}
                {userRole === "employer" && proof.status === "submitted" && (
                  <div className="space-y-4">
                    {!showRejectForm && !showRevisionForm && (
                      <div className="flex gap-3">
                        <Button
                          onClick={handleApprove}
                          disabled={actionLoading === "approve"}
                          className="flex-1 bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white font-semibold py-3"
                        >
                          <Check className="mr-2 h-5 w-5" />
                          Approve & Pay ${totalPayment.toFixed(2)}
                        </Button>
                        {remainingRevisions > 0 && (
                          <Button
                            variant="outline"
                            onClick={() => setShowRevisionForm(true)}
                            className="text-yellow-600 border-yellow-300 hover:bg-yellow-50"
                          >
                            <RotateCcw className="mr-1 h-4 w-4" />
                            Request Changes ({remainingRevisions} left,{" "}
                            {formatTimeDisplay(
                              revisionSettings.revisionRequestTimeoutValue || 24,
                              revisionSettings.revisionRequestTimeoutUnit || "hours",
                            )}{" "}
                            response)
                          </Button>
                        )}
                        <Button
                          variant="outline"
                          onClick={() => setShowRejectForm(true)}
                          className="text-red-600 border-red-300 hover:bg-red-50"
                        >
                          <X className="mr-1 h-4 w-4" />
                          Reject (
                          {formatTimeDisplay(
                            revisionSettings.rejectionResponseTimeoutValue || 24,
                            revisionSettings.rejectionResponseTimeoutUnit || "hours",
                          )}{" "}
                          response)
                        </Button>
                      </div>
                    )}

{/* Revision Form */}
                    {showRevisionForm && (
                      <Card className="border-yellow-200 bg-yellow-50">
                        <CardContent className="p-4 space-y-3">
                          <div className="flex items-center justify-between">
                            <h5 className="font-medium text-yellow-800">Request Revision</h5>
                            <Badge variant="outline" className="text-yellow-700 border-yellow-300">
                              {remainingRevisions} requests left
                            </Badge>
                          </div>
                          <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
                            <div className="flex items-center text-sm text-blue-800">
                              <Clock className="mr-1 h-4 w-4" />
                              Worker will have{" "}
                              {formatTimeDisplay(
                                revisionSettings.revisionRequestTimeoutValue || 24,
                                revisionSettings.revisionRequestTimeoutUnit || "hours",
                              )}{" "}
                              to respond.
                              {revisionSettings.enableAutomaticRefunds &&
                                revisionSettings.refundOnRevisionTimeout &&
                                " Automatic refund will be processed if no response is received."}
                            </div>
                          </div>
                          <div className="bg-red-50 border border-red-200 rounded-lg p-3 space-y-2">
                            <div className="flex items-start space-x-2">
                              <AlertTriangle className="h-4 w-4 text-red-600 mt-0.5" />
                              <div className="text-sm text-red-800">
                                <p className="font-semibold mb-1">⚠️ Important Guidelines:</p>
                                <ul className="space-y-1 text-xs">
                                  <li>• You can't ask revision if worker completed the work perfectly</li>
                                  <li>• You can't give extra work beyond the original requirements</li>
                                  <li>• Misuse may result in account suspension and penalties</li>
                                  <li>• Worker has options to revision/dispute/cancel if they disagree</li>
                                </ul>
                              </div>
                            </div>
                          </div>
                          <Textarea
                            placeholder="Explain what needs to be revised..."
                            value={reviewNotes}
                            onChange={(e) => setReviewNotes(e.target.value)}
                            rows={3}
                            className="border-yellow-300"
                          />
                          <div className="flex gap-2">
                            <Button
                              onClick={handleRequestRevision}
                              disabled={actionLoading === "revision" || remainingRevisions <= 0}
                              size="sm"
                              className="bg-yellow-600 hover:bg-yellow-700"
                            >
                              {remainingRevisions <= 0 ? "No Revisions Left" : "Send Revision Request"}
                            </Button>
                            <Button variant="outline" onClick={() => setShowRevisionForm(false)} size="sm">
                              Cancel
                            </Button>
                          </div>
                        </CardContent>
                      </Card>
                    )}

{/* Rejection Form */}
                    {showRejectForm && (
                      <Card className="border-red-200 bg-red-50">
                        <CardContent className="p-4 space-y-3">
                          <h5 className="font-medium text-red-800">Reject Work</h5>
                          <p className="text-sm text-red-700">
                            Please explain why you're rejecting this work. The payment will be refunded.
                          </p>
                          <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
                            <div className="flex items-center text-sm text-blue-800">
                              <Clock className="mr-1 h-4 w-4" />
                              Worker will have{" "}
                              {formatTimeDisplay(
                                revisionSettings.rejectionResponseTimeoutValue || 24,
                                revisionSettings.rejectionResponseTimeoutUnit || "hours",
                              )}{" "}
                              to respond.
                              {revisionSettings.enableAutomaticRefunds &&
                                revisionSettings.refundOnRejectionTimeout &&
                                " Automatic refund will be processed if no response is received."}
                            </div>
                          </div>
                          <Textarea
                            placeholder="Explain why you're rejecting this work..."
                            value={rejectionReason}
                            onChange={(e) => setRejectionReason(e.target.value)}
                            rows={3}
                            className="border-red-300"
                          />
                          <div className="flex gap-2">
                            <Button
                              onClick={handleReject}
                              disabled={actionLoading === "reject"}
                              variant="destructive"
                              size="sm"
                            >
                              Reject & Refund
                            </Button>
                            <Button variant="outline" onClick={() => setShowRejectForm(false)} size="sm">
                              Cancel
                            </Button>
                          </div>
                        </CardContent>
                      </Card>
                    )}
                  </div>
                )}
              </>
            )}

{/* Screenshots Gallery */}
            <div className="space-y-4">
              <h4 className="text-lg font-semibold flex items-center">
                <Download className="mr-2 h-5 w-5 text-blue-600" />
                Work Screenshots & Files
              </h4>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {(() => {
                  const screenshots: string[] = []

console.log("[v0] Processing work proof screenshots:", proof.screenshots?.length || 0)

// Try to get screenshots from the screenshots array first
                  if (proof.screenshots && proof.screenshots.length > 0) {
                    proof.screenshots.forEach((screenshot, index) => {
                      console.log(
                        `[v0] Processing screenshot ${index}:`,
                        typeof screenshot,
                        screenshot?.substring?.(0, 50),
                      )

try {
                        let screenshotData = null

// Case 1: Direct base64 string
                        if (typeof screenshot === "string" && screenshot.startsWith("data:")) {
                          screenshotData = screenshot
                          console.log(`[v0] Screenshot ${index}: Direct base64`)
                        }
                        // Case 2: JSON string with data property
                        else if (typeof screenshot === "string" && screenshot.includes("{")) {
                          const parsed = JSON.parse(screenshot)
                          if (parsed.data && parsed.data.startsWith("data:")) {
                            screenshotData = parsed.data
                            console.log(`[v0] Screenshot ${index}: Parsed from JSON`)
                          }
                        }
                        // Case 3: Object with data property
                        else if (typeof screenshot === "object" && screenshot?.data?.startsWith?.("data:")) {
                          screenshotData = screenshot.data
                          console.log(`[v0] Screenshot ${index}: Object with data`)
                        }
                        // Case 4: Try as direct string (fallback)
                        else if (typeof screenshot === "string" && screenshot.length > 100) {
                          screenshotData = screenshot.startsWith("data:")
                            ? screenshot
                            : `data:image/png;base64,${screenshot}`
                          console.log(`[v0] Screenshot ${index}: Fallback processing`)
                        }

if (screenshotData && screenshotData.startsWith("data:")) {
                          screenshots.push(screenshotData)
                        } else {
                          console.warn(`[v0] Invalid screenshot data for ${index}:`, typeof screenshot)
                        }
                      } catch (error) {
                        console.error(`[v0] Failed to parse screenshot ${index}:`, error)
                      }
                    })
                  }

// If no screenshots found, try proofFiles as fallback
                  if (screenshots.length === 0 && proof.proofFiles && proof.proofFiles.length > 0) {
                    console.log("[v0] No screenshots found, trying proofFiles as fallback")
                    proof.proofFiles.forEach((file, index) => {
                      try {
                        let fileData = null

// Similar processing for proof files
                        if (typeof file === "string" && file.startsWith("data:")) {
                          fileData = file
                        } else if (typeof file === "string" && file.includes("{")) {
                          const parsed = JSON.parse(file)
                          if (parsed.data && parsed.data.startsWith("data:") && parsed.type?.startsWith("image/")) {
                            fileData = parsed.data
                          }
                        } else if (
                          typeof file === "object" &&
                          file?.data?.startsWith?.("data:") &&
                          file?.type?.startsWith?.("image/")
                        ) {
                          fileData = file.data
                        }

if (fileData && fileData.startsWith("data:")) {
                          screenshots.push(fileData)
                        }
                      } catch (error) {
                        console.error(`[v0] Failed to parse proof file ${index}:`, error)
                      }
                    })
                  }

console.log(`[v0] Final processed screenshots count: ${screenshots.length}`)

return screenshots.length > 0 ? (
                    screenshots.map((screenshot, index) => (
                      <Card key={index} className="overflow-hidden hover:shadow-lg transition-shadow">
                        <div className="aspect-video bg-gray-100 flex items-center justify-center">
                          <img
                            src={screenshot || "/placeholder.svg"}
                            alt={`Work Screenshot ${index + 1}`}
                            className="w-full h-full object-cover cursor-pointer"
                            onClick={() => handleViewScreenshot(screenshot)}
                            onError={(e) => {
                              console.error(`[v0] Failed to load screenshot ${index + 1}`)
                              e.currentTarget.src = "/placeholder.svg?height=200&width=300&text=Failed+to+Load"
                            }}
                          />
                        </div>
                        <CardContent className="p-3">
                          <div className="flex items-center justify-between">
                            <span className="text-sm font-medium">Screenshot {index + 1}</span>
                            <Button size="sm" variant="outline" onClick={() => handleViewScreenshot(screenshot)}>
                              <Eye className="h-3 w-3 mr-1" />
                              View
                            </Button>
                          </div>
                        </CardContent>
                      </Card>
                    ))
                  ) : (
                    <div className="col-span-full">
                      <Card className="border-dashed border-2 border-gray-300">
                        <CardContent className="p-8 text-center">
                          <ImageIcon className="h-12 w-12 text-gray-400 mx-auto mb-2" />
                          <p className="text-gray-600">No screenshots provided</p>
                          <p className="text-gray-400 text-sm mt-1">Screenshots will appear here when uploaded</p>
                        </CardContent>
                      </Card>
                    </div>
                  )
                })()}

{/* Proof Links */}
                {proof.proofLinks && proof.proofLinks.length > 0 && (
                  <div className="space-y-2">
                    <h5 className="font-medium text-gray-900">Proof Links:</h5>
                    <div className="space-y-2">
                      {proof.proofLinks.map((link, index) => (
                        <Card key={index} className="border border-blue-200 bg-blue-50">
                          <CardContent className="p-3">
                            <a
                              href={link}
                              target="_blank"
                              rel="noopener noreferrer"
                              className="flex items-center text-blue-600 hover:text-blue-800 font-medium"
                            >
                              <ExternalLink className="mr-2 h-4 w-4" />
                              {link}
                            </a>
                          </CardContent>
                        </Card>
                      ))}
                    </div>
                  </div>
                )}

{/* Submitted Evidence */}
                {(proof.proofFiles?.length > 0 || proof.proofLinks?.length > 0 || proof.screenshots?.length > 0) && (
                  <div className="space-y-2">
                    <span className="text-gray-600">Submitted Evidence:</span>
                    <div className="bg-white p-3 rounded border space-y-2">
                      {proof.proofFiles?.length > 0 && (
                        <div className="flex items-center space-x-2">
                          <FileText className="h-4 w-4 text-blue-500" />
                          <span>{proof.proofFiles.length} file(s) attached</span>
                          <div className="ml-4 space-y-1">
                            {proof.proofFiles.map((file: any, index: number) => {
                              try {
                                const fileData = typeof file === "string" ? JSON.parse(file) : file
                                if (fileData.data && fileData.name) {
                                  return (
                                    <div key={index} className="flex items-center space-x-2">
                                      <a
                                        href={fileData.data}
                                        download={fileData.name}
                                        className="text-blue-600 hover:underline text-sm"
                                      >
                                        📎 {fileData.name}
                                      </a>
                                    </div>
                                  )
                                }
                              } catch (error) {
                                console.error("[v0] Failed to parse file:", error)
                              }
                              return null
                            })}
                          </div>
                        </div>
                      )}
                      {proof.screenshots?.length > 0 && (
                        <div className="flex items-center space-x-2">
                          <ImageIcon className="h-4 w-4 text-green-500" />
                          <span>{proof.screenshots.length} screenshot(s) attached</span>
                          <div className="ml-4 grid grid-cols-4 gap-2">
                            {proof.screenshots.map((screenshot: any, index: number) => {
                              try {
                                const screenshotData =
                                  typeof screenshot === "string"
                                    ? screenshot.startsWith("data:")
                                      ? screenshot
                                      : JSON.parse(screenshot).data
                                    : screenshot.data

if (screenshotData && screenshotData.startsWith("data:")) {
                                  return (
                                    <div key={index} className="relative group">
                                      <img
                                        src={screenshotData || "/placeholder.svg"}
                                        alt={`Screenshot ${index + 1}`}
                                        className="w-16 h-16 object-cover rounded border cursor-pointer hover:opacity-80"
                                        onClick={() => {
                                          // Open in new tab for full view
                                          const newWindow = window.open()
                                          if (newWindow) {
                                            newWindow.document.write(
                                              `<img src="${screenshotData}" style="max-width:100%;height:auto;" />`,
                                            )
                                          }
                                        }}
                                      />
                                      <div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 rounded flex items-center justify-center">
                                        <Eye className="h-4 w-4 text-white opacity-0 group-hover:opacity-100" />
                                      </div>
                                    </div>
                                  )
                                }
                              } catch (error) {
                                console.error("[v0] Failed to parse screenshot:", error)
                              }
                              return null
                            })}
                          </div>
                        </div>
                      )}
                    </div>
                  </div>
                )}
              </div>
            </div>
          </div>
        </DialogContent>
      </Dialog>

{/* Screenshot Modal for Full-Screen Viewing */}
      <Dialog open={!!selectedScreenshot} onOpenChange={() => setSelectedScreenshot(null)}>
        <DialogContent className="max-w-4xl max-h-[90vh] p-2">
          <div className="relative">
            <Button
              variant="ghost"
              size="sm"
              onClick={() => setSelectedScreenshot(null)}
              className="absolute top-2 right-2 z-10 bg-black/50 text-white hover:bg-black/70"
            >
              <X className="h-4 w-4" />
            </Button>
            {selectedScreenshot && (
              <img
                src={selectedScreenshot || "/placeholder.svg"}
                alt="Full size screenshot"
                className="w-full h-auto max-h-[80vh] object-contain rounded-lg"
              />
            )}
          </div>
        </DialogContent>
      </Dialog>

{/* Review Form Modal */}
      <ReviewForm
        isOpen={showReviewForm}
        onClose={handleReviewClose}
        onSubmit={handleReviewSubmit}
        jobId={proof.jobId}
        workProofId={proof.id}
        reviewerId={proof.employerId}
        revieweeId={proof.workerId}
        workerName={`${proof.worker.firstName} ${proof.worker.lastName}`}
      />
    </>
  )
}
[V0_FILE]typescriptreact:file="app/api/test-cron-now/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { processExpiredWorkProofs } from "@/lib/work-proofs"

export async function GET(request: NextRequest) {
  console.log("[v0] Manual cron test triggered")

try {
    process.env.CRON_PROCESSING = "true"

console.log("[v0] Starting manual processing of expired work proofs...")
    const result = await processExpiredWorkProofs()

console.log("[v0] Manual processing completed:", result)

return NextResponse.json({
      success: true,
      message: "Manual cron processing completed",
      result: result,
    })
  } catch (error) {
    console.error("[v0] Manual cron processing failed:", error)
    return NextResponse.json(
      {
        success: false,
        error: error instanceof Error ? error.message : "Unknown error",
      },
      { status: 500 },
    )
  } finally {
    delete process.env.CRON_PROCESSING
  }
}

export async function POST(request: NextRequest) {
  return GET(request)
}
[V0_FILE]typescriptreact:file="app/dashboard/jobs/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { useAuth } from "@/contexts/auth-context"
import { DashboardHeader } from "@/components/dashboard/dashboard-header"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Progress } from "@/components/ui/progress"
import {
  Plus,
  Eye,
  Edit,
  Pause,
  Play,
  RefreshCw,
  FileText,
  AlertTriangle,
  Trash2,
  Users,
  Search,
  Filter,
  ExternalLink,
  Clock,
  CheckCircle,
  XCircle,
} from "lucide-react"
import Link from "next/link"
import { toast } from "sonner"
import {
  getUserJobs,
  pauseJob,
  reactivateJob,
  toggleJobOn,
  toggleJobOff,
  getJobStatusColor,
  getJobStatusLabel,
  JOB_STATUS,
  type Job,
} from "@/lib/jobs"
import type { WorkProof } from "@/lib/work-proofs"
import WorkProofModal from "@/components/work-proofs/work-proof-modal"
import JobCancellationModal from "@/components/jobs/job-cancellation-modal"
import { Label } from "@/components/ui/label"
import { getWorkProofsByJob } from "@/lib/work-proofs"

interface ConfirmationDialog {
  isOpen: boolean
  title: string
  description: string
  action: () => void
  actionLabel: string
  variant: "default" | "destructive"
}

export default function JobsPage() {
  const [userJobs, setUserJobs] = useState<Job[]>([])
  const [jobWorkProofs, setJobWorkProofs] = useState<Record<string, WorkProof[]>>({})
  const [loading, setLoading] = useState(true)
  const [actionLoading, setActionLoading] = useState<string | null>(null)
  const [selectedJobProofs, setSelectedJobProofs] = useState<WorkProof[]>([])
  const [proofModalOpen, setProofModalOpen] = useState(false)
  const [cancellationModalOpen, setCancellationModalOpen] = useState(false)
  const [selectedJobForCancellation, setSelectedJobForCancellation] = useState<Job | null>(null)
  const [workerUpdateModalOpen, setWorkerUpdateModalOpen] = useState(false)
  const [selectedJobForWorkerUpdate, setSelectedJobForWorkerUpdate] = useState<Job | null>(null)
  const [newWorkerCount, setNewWorkerCount] = useState<number>(1)
  const [jobVisibility, setJobVisibility] = useState<Record<string, boolean>>({})
  const [jobDetailsModalOpen, setJobDetailsModalOpen] = useState(false)
  const [selectedJobForDetails, setSelectedJobForDetails] = useState<Job | null>(null)
  const [confirmDialog, setConfirmDialog] = useState<ConfirmationDialog>({
    isOpen: false,
    title: "",
    description: "",
    action: () => {},
    actionLabel: "",
    variant: "default",
  })
  const { user } = useAuth()
  const router = useRouter()

const [searchTerm, setSearchTerm] = useState("")
  const [statusFilter, setStatusFilter] = useState("all")
  const [currentPage, setCurrentPage] = useState(1)
  const [itemsPerPage, setItemsPerPage] = useState(10)
  const [sortBy, setSortBy] = useState("createdAt")
  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc")

useEffect(() => {
    const fetchUserJobs = async () => {
      if (!user?.id) {
        console.log("[v0] No user ID available")
        setLoading(false)
        return
      }

try {
        console.log("[v0] Loading user jobs for:", user.id)
        const jobs = await getUserJobs(user.id)
        console.log("[v0] Loaded user jobs:", jobs.length, "jobs")
        console.log(
          "[v0] User jobs details:",
          jobs.map((j) => ({ id: j.id, title: j.title, userId: j.userId, status: j.status })),
        )
        setUserJobs(jobs)

const workProofsData: Record<string, WorkProof[]> = {}
        for (const job of jobs) {
          try {
            const proofs = await getWorkProofsByJob(job.id)
            workProofsData[job.id] = proofs
            console.log(`[v0] Loaded ${proofs.length} work proofs for job ${job.id}`)
          } catch (error) {
            console.error(`[v0] Error loading work proofs for job ${job.id}:`, error)
            workProofsData[job.id] = []
          }
        }
        setJobWorkProofs(workProofsData)

const initialVisibility: Record<string, boolean> = {}
        jobs.forEach((job) => {
          const savedVisibility = localStorage.getItem(`job_visibility_${job.id}`)
          initialVisibility[job.id] = savedVisibility !== null ? savedVisibility === "true" : true
        })
        setJobVisibility(initialVisibility)
      } catch (error) {
        console.error("[v0] Error loading user jobs:", error)
        toast.error("Failed to load your jobs")
      } finally {
        setLoading(false)
      }
    }

fetchUserJobs()
  }, [user?.id])

const handlePauseJob = async (jobId: string, jobTitle: string) => {
    showConfirmDialog(
      "Pause Job",
      `Are you sure you want to pause "${jobTitle}"? This will temporarily remove it from the marketplace and stop accepting new applications.`,
      async () => {
        if (!user?.id) return
        setActionLoading(jobId)
        try {
          await pauseJob(jobId, user.id)
          toast.success("Job paused successfully")
          await refreshJobs()
        } catch (error) {
          console.error("Error pausing job:", error)
          toast.error("Failed to pause job")
        } finally {
          setActionLoading(null)
        }
      },
      "Pause Job",
      "default",
    )
  }

const handleCancelJob = async (job: Job) => {
    if (job.status === JOB_STATUS.CANCELLED || job.status === JOB_STATUS.REJECTED) {
      console.log("[v0] Cannot cancel job that is already cancelled or rejected:", job.id)
      return
    }

setSelectedJobForCancellation(job)
    setCancellationModalOpen(true)
  }

const handleReactivateJob = async (jobId: string, jobTitle: string) => {
    showConfirmDialog(
      "Reactivate Job",
      `Reactivate "${jobTitle}"? The job will be submitted for admin review and will go live once approved.`,
      async () => {
        if (!user?.id) return
        setActionLoading(jobId)
        try {
          await reactivateJob(jobId, user.id)
          toast.success("Job reactivated and submitted for review")
          await refreshJobs()
        } catch (error) {
          console.error("Error reactivating job:", error)
          toast.error("Failed to reactivate job")
        } finally {
          setActionLoading(null)
        }
      },
      "Reactivate Job",
      "default",
    )
  }

const handleEditJob = (jobId: string) => {
    router.push(`/dashboard/jobs/edit/${jobId}`)
  }

const handleViewApplications = (jobId: string) => {
    router.push(`/dashboard/jobs/${jobId}/applications`)
  }

const handleDuplicateJob = (jobId: string) => {
    router.push(`/dashboard/jobs/create?duplicate=${jobId}`)
    toast.success("Job template loaded for duplication")
  }

const getJobsByStatus = (status?: string) => {
    if (!status || status === "all") return userJobs
    return userJobs.filter((job) => job.status === status)
  }

const getStatusStats = () => {
    return {
      pending: userJobs.filter((job) => job.status === JOB_STATUS.PENDING).length,
      open: userJobs.filter((job) => job.status === JOB_STATUS.OPEN).length,
      inProgress: userJobs.filter((job) => job.status === JOB_STATUS.IN_PROGRESS).length,
      completed: userJobs.filter((job) => job.status === JOB_STATUS.COMPLETED).length,
      paused: userJobs.filter((job) => job.status === JOB_STATUS.SUSPENDED).length,
      cancelled: userJobs.filter((job) => job.status === JOB_STATUS.CANCELLED).length,
      rejected: userJobs.filter((job) => job.status === JOB_STATUS.REJECTED).length,
      approved: userJobs.filter((job) => job.status === JOB_STATUS.APPROVED).length,
    }
  }

const getFilteredAndSortedJobs = () => {
    const filtered = userJobs.filter((job) => {
      const matchesSearch =
        job.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
        job.description.toLowerCase().includes(searchTerm.toLowerCase())
      const matchesStatus = statusFilter === "all" || job.status === statusFilter
      return matchesSearch && matchesStatus
    })

// Sort jobs
    filtered.sort((a, b) => {
      let aValue = a[sortBy as keyof Job]
      let bValue = b[sortBy as keyof Job]

if (sortBy === "createdAt" || sortBy === "updatedAt") {
        aValue = new Date(aValue as string).getTime()
        bValue = new Date(bValue as string).getTime()
      }

if (sortOrder === "asc") {
        return aValue > bValue ? 1 : -1
      } else {
        return aValue < bValue ? 1 : -1
      }
    })

return filtered
  }

const filteredJobs = getFilteredAndSortedJobs()
  const totalPages = Math.ceil(filteredJobs.length / itemsPerPage)
  const paginatedJobs = filteredJobs.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage)

const handleViewProof = async (jobId: string) => {
    // Navigate to dedicated work proof page instead of modal
    router.push(`/dashboard/jobs/${jobId}/work-proofs`)
  }

const getJobProgress = (job: Job): number => {
    console.log(
      "[v0] Calculating progress for job:",
      job.title,
      "Status:",
      job.status,
      "Workers needed:",
      job.workersNeeded,
      "Applications:",
      job.applicationsCount,
    )

const workersNeeded = job.workersNeeded || 1
    let completedWork = 0

// For cancelled/rejected jobs, show progress based on all submitted work proofs before cancellation
    if (job.status === JOB_STATUS.CANCELLED || job.status === JOB_STATUS.REJECTED) {
      const workProofs =
        jobWorkProofs[job.id]?.filter((proof) =>
          ["submitted", "approved", "auto_approved", "revision_requested", "rejected"].includes(proof.status),
        ) || []
      completedWork = workProofs.length
    } else if (job.status === JOB_STATUS.APPROVED) {
      const workProofs =
        jobWorkProofs[job.id]?.filter((proof) =>
          ["submitted", "approved", "auto_approved", "revision_requested", "rejected"].includes(proof.status),
        ) || []
      completedWork = workProofs.length
    } else {
      completedWork = job.applicationsCount || 0
    }

const progress = Math.min((completedWork / workersNeeded) * 100, 100)
    const finalProgress = Math.round(progress)
    console.log("[v0] Final progress for", job.title, ":", finalProgress, "%")
    return finalProgress
  }

const handleToggleJobOn = async (jobId: string, jobTitle: string) => {
    setActionLoading(jobId)
    try {
      await toggleJobOn(jobId, user!.id)
      toast.success(`"${jobTitle}" is now live and accepting applications!`)
      await refreshJobs()
    } catch (error) {
      console.error("Error turning job on:", error)
      toast.error("Failed to turn job on")
    } finally {
      setActionLoading(null)
    }
  }

const handleToggleJobOff = async (jobId: string, jobTitle: string) => {
    setActionLoading(jobId)
    try {
      await toggleJobOff(jobId, user!.id)
      toast.success(`"${jobTitle}" is now paused and not accepting applications`)
      await refreshJobs()
    } catch (error) {
      console.error("Error turning job off:", error)
      toast.error("Failed to turn job off")
    } finally {
      setActionLoading(null)
    }
  }

const handleUpdateWorkers = (job: Job) => {
    setSelectedJobForWorkerUpdate(job)
    setNewWorkerCount(job.workersNeeded || 1)
    setWorkerUpdateModalOpen(true)
  }

const handleWorkerCountUpdate = async (newWorkerCount: number) => {
    if (!selectedJobForWorkerUpdate || !user?.id) return

setActionLoading("update-workers")
    try {
      console.log("[v0] 👥 Updating worker count via API:", {
        jobId: selectedJobForWorkerUpdate.id,
        newWorkerCount,
        userId: user.id,
      })

const response = await fetch("/api/jobs", {
        method: "PUT",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          jobId: selectedJobForWorkerUpdate.id,
          newWorkerCount,
          userId: user.id,
        }),
      })

const result = await response.json()

if (!response.ok || !result.success) {
        throw new Error(result.message || "Failed to update worker count")
      }

console.log("[v0] ✅ Worker count updated successfully:", result)

toast.success(result.message || "Worker count updated successfully")
      setWorkerUpdateModalOpen(false)

await refreshJobs()
    } catch (error) {
      console.error("[v0] ❌ Error updating worker count:", error)
      toast.error(error instanceof Error ? error.message : "Failed to update worker count")
    } finally {
      setActionLoading(null)
    }
  }

const handleToggleJobVisibility = async (jobId: string, jobTitle: string, currentVisibility: boolean) => {
    const newVisibility = !currentVisibility
    setJobVisibility((prev) => ({ ...prev, [jobId]: newVisibility }))

localStorage.setItem(`job_visibility_${jobId}`, newVisibility.toString())

toast.success(
      newVisibility
        ? `"${jobTitle}" is now visible on your dashboard`
        : `"${jobTitle}" is now hidden from your dashboard`,
    )
  }

const handleViewJobDetails = (job: Job) => {
    setSelectedJobForDetails(job)
    setJobDetailsModalOpen(true)
  }

const refreshJobs = async () => {
    if (!user?.id) return

try {
      console.log("[v0] Refreshing jobs for user:", user.id)
      const updatedJobs = await getUserJobs(user.id)
      console.log("[v0] Refreshed jobs count:", updatedJobs.length)

const hasChanges =
        userJobs.length !== updatedJobs.length ||
        updatedJobs.some((updatedJob) => {
          const currentJob = userJobs.find((j) => j.id === updatedJob.id)
          return (
            !currentJob ||
            currentJob.workersNeeded !== updatedJob.workersNeeded ||
            currentJob.status !== updatedJob.status ||
            currentJob.estimatedTotalCost !== updatedJob.estimatedTotalCost
          )
        })

if (hasChanges) {
        console.log("[v0] Changes detected, updating jobs data")
        setUserJobs(updatedJobs)

const workProofsData: Record<string, WorkProof[]> = {}
        for (const job of updatedJobs) {
          try {
            console.log(`[v0] Loading work proofs for job: ${job.id}`)
            const proofs = await getWorkProofsByJob(job.id)
            workProofsData[job.id] = proofs
            console.log(`[v0] Found work proofs for job ${job.id} :`, proofs)
          } catch (error) {
            console.error(`[v0] Error refreshing work proofs for job ${job.id}:`, error)
            workProofsData[job.id] = []
          }
        }
        setJobWorkProofs(workProofsData)
        console.log("[v0] Jobs data updated")
      } else {
        console.log("[v0] No changes detected, skipping state update")
      }
    } catch (error) {
      console.error("[v0] Error refreshing jobs:", error)
      toast.error("Failed to refresh jobs")
    }
  }

const showConfirmDialog = (
    title: string,
    description: string,
    action: () => void,
    actionLabel: string,
    variant: "default" | "destructive" = "default",
  ) => {
    setConfirmDialog({
      isOpen: true,
      title,
      description,
      action,
      actionLabel,
      variant,
    })
  }

useEffect(() => {
    let intervalId: NodeJS.Timeout

const startInterval = () => {
      intervalId = setInterval(() => {
        if (user?.id && !actionLoading) {
          refreshJobs()
        }
      }, 30000) // Refresh every 30 seconds only when not performing actions
    }

if (user?.id) {
      startInterval()
    }

return () => {
      if (intervalId) {
        clearInterval(intervalId)
      }
    }
  }, [user?.id, actionLoading])

const getJobWorkProofCounts = (jobId: string) => {
    const proofs = jobWorkProofs[jobId] || []
    const job = userJobs.find((j) => j.id === jobId)

return {
      pending: proofs.filter((proof) => proof.status === "submitted" || proof.status === "pending").length,
      approved: proofs.filter((proof) => {
        // Count manually approved proofs
        if (proof.status === "approved") return true

// Count auto-approved proofs
        if (proof.status === "auto_approved") return true

// Count submitted proofs with expired deadlines (should be auto-approved)
        if (proof.status === "submitted" && job && job.approvalType === "manual") {
          const submittedAt = new Date(proof.submittedAt)
          const approvalDays = job.manualApprovalDays || 3
          const deadlineDate = new Date(submittedAt.getTime() + approvalDays * 24 * 60 * 60 * 1000)
          const now = new Date()

if (now > deadlineDate) return true
        }

return false
      }).length,
      rejected: proofs.filter((proof) => proof.status === "rejected").length,
    }
  }

const stats = getStatusStats()

if (loading) {
    return (
      <>
        <DashboardHeader title="My Jobs" description="Manage your posted jobs and track applications" />
        <div className="flex-1 flex items-center justify-center">
          <div className="text-center">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-4"></div>
            <p className="text-gray-600">Loading your jobs...</p>
          </div>
        </div>
      </>
    )
  }

if (!user?.id) {
    return (
      <>
        <DashboardHeader title="My Jobs" description="Manage your posted jobs and track applications" />
        <div className="flex-1 flex items-center justify-center">
          <div className="text-center">
            <AlertTriangle className="h-8 w-8 text-red-500 mx-auto mb-4" />
            <p className="text-gray-600">Please log in to view your jobs</p>
            <Link href="/login">
              <Button className="mt-4">Go to Login</Button>
            </Link>
          </div>
        </div>
      </>
    )
  }

return (
    <>
      <DashboardHeader title="My Jobs" description="Manage your posted jobs and track applications" />

<div className="flex-1 overflow-auto p-6">
        <div className="space-y-6">
          <div className="flex justify-between items-center">
            <div>
              <h2 className="text-2xl font-bold text-gray-900">Job Management</h2>
              <p className="text-gray-600">Track and manage your {userJobs.length} job postings</p>
            </div>
            <div className="flex space-x-3">
              <Button variant="outline" onClick={refreshJobs} disabled={loading}>
                <RefreshCw className={`mr-2 h-4 w-4 ${loading ? "animate-spin" : ""}`} />
                Refresh
              </Button>
              <Link href="/dashboard/jobs/create">
                <Button className="bg-gradient-to-r from-blue-600 via-purple-600 to-blue-700 hover:from-blue-700 hover:via-purple-700 hover:to-blue-800 text-white font-bold px-8 py-3 text-lg rounded-xl shadow-lg hover:shadow-2xl transform hover:scale-105 transition-all duration-300 border-0 relative overflow-hidden group">
                  <div className="absolute inset-0 bg-gradient-to-r from-white/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                  <Plus className="mr-3 h-5 w-5 group-hover:rotate-90 transition-transform duration-300" />
                  <span className="relative z-10">Post New Job</span>
                  <div className="absolute -top-1 -right-1 w-3 h-3 bg-yellow-400 rounded-full animate-pulse"></div>
                </Button>
              </Link>
            </div>
          </div>

<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-4">
            <Card className="bg-gradient-to-r from-blue-50 to-blue-100 border-blue-200">
              <CardContent className="p-4 text-center">
                <div className="text-2xl font-bold text-blue-700">{userJobs.length}</div>
                <div className="text-sm text-blue-600">Total Jobs</div>
              </CardContent>
            </Card>
            <Card className="bg-gradient-to-r from-yellow-50 to-yellow-100 border-yellow-200">
              <CardContent className="p-4 text-center">
                <div className="text-2xl font-bold text-yellow-700">{stats.pending}</div>
                <div className="text-sm text-yellow-600">Pending</div>
              </CardContent>
            </Card>
            <Card className="bg-gradient-to-r from-green-50 to-green-100 border-green-200">
              <CardContent className="p-4 text-center">
                <div className="text-2xl font-bold text-green-700">{stats.open}</div>
                <div className="text-sm text-green-600">Open</div>
              </CardContent>
            </Card>
            <Card className="bg-gradient-to-r from-blue-50 to-blue-100 border-blue-200">
              <CardContent className="p-4 text-center">
                <div className="text-2xl font-bold text-blue-700">{stats.inProgress}</div>
                <div className="text-sm text-blue-600">Active</div>
              </CardContent>
            </Card>
            <Card className="bg-gradient-to-r from-gray-50 to-gray-100 border-gray-200">
              <CardContent className="p-4 text-center">
                <div className="text-2xl font-bold text-gray-700">{stats.paused}</div>
                <div className="text-sm text-gray-600">Paused</div>
              </CardContent>
            </Card>
            <Card className="bg-gradient-to-r from-purple-50 to-purple-100 border-purple-200">
              <CardContent className="p-4 text-center">
                <div className="text-2xl font-bold text-purple-700">{stats.completed}</div>
                <div className="text-sm text-purple-600">Completed</div>
              </CardContent>
            </Card>
            <Card className="bg-gradient-to-r from-red-50 to-red-100 border-red-200">
              <CardContent className="p-4 text-center">
                <div className="text-2xl font-bold text-red-700">{stats.cancelled + stats.rejected}</div>
                <div className="text-sm text-red-600">Inactive</div>
              </CardContent>
            </Card>
            <Card className="bg-gradient-to-r from-green-50 to-green-100 border-green-200">
              <CardContent className="p-4 text-center">
                <div className="text-2xl font-bold text-green-700">{stats.approved}</div>
                <div className="text-sm text-green-600">Approved</div>
              </CardContent>
            </Card>
          </div>

<Card className="border-0 shadow-lg">
            <CardHeader className="bg-gray-50 border-b">
              <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
                <CardTitle className="text-lg font-semibold">Job Listings</CardTitle>

<div className="flex flex-col sm:flex-row gap-3">
                  <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 jobs..."
                      value={searchTerm}
                      onChange={(e) => setSearchTerm(e.target.value)}
                      className="pl-10 w-64"
                    />
                  </div>

<Select value={statusFilter} onValueChange={setStatusFilter}>
                    <SelectTrigger className="w-40">
                      <Filter className="h-4 w-4 mr-2" />
                      <SelectValue placeholder="Filter by status" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">All Status</SelectItem>
                      <SelectItem value="pending">Pending</SelectItem>
                      <SelectItem value="open">Open</SelectItem>
                      <SelectItem value="in_progress">In Progress</SelectItem>
                      <SelectItem value="completed">Completed</SelectItem>
                      <SelectItem value="paused">Paused</SelectItem>
                      <SelectItem value="cancelled">Cancelled</SelectItem>
                      <SelectItem value="approved">Approved</SelectItem>
                    </SelectContent>
                  </Select>

<Select value={itemsPerPage.toString()} onValueChange={(value) => setItemsPerPage(Number(value))}>
                    <SelectTrigger className="w-32">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="5">5 per page</SelectItem>
                      <SelectItem value="10">10 per page</SelectItem>
                      <SelectItem value="25">25 per page</SelectItem>
                      <SelectItem value="50">50 per page</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
            </CardHeader>

<CardContent className="p-0">
              <div className="overflow-x-auto">
                <Table>
                  <TableHeader>
                    <TableRow className="bg-gray-50">
                      <TableHead className="font-semibold text-gray-900">Job Name</TableHead>
                      <TableHead className="font-semibold text-gray-900">Status</TableHead>
                      <TableHead className="font-semibold text-gray-900">Work Proofs</TableHead>
                      <TableHead className="font-semibold text-gray-900">Total Cost Paid</TableHead>
                      <TableHead className="font-semibold text-gray-900">Progress</TableHead>
                      <TableHead className="font-semibold text-gray-900 text-center">Actions</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {paginatedJobs.map((job) => (
                      <TableRow key={job.id} className="hover:bg-gray-50 transition-colors">
                        <TableCell className="py-4">
                          <div className="space-y-1">
                            <div className="flex items-center space-x-2 mb-1">
                              <Badge
                                variant="outline"
                                className="text-xs bg-blue-50 text-blue-700 border-blue-200 font-mono"
                              >
                                #{job.formattedJobId || job.jobNumber?.toString().padStart(3, "0") || "N/A"}
                              </Badge>
                              <div className="font-medium text-gray-900">{job.title}</div>
                            </div>
                            <div className="text-sm text-gray-500 line-clamp-1">{job.description}</div>
                            <div className="text-xs text-gray-400">
                              {job.applicationsCount} applications • {job.viewsCount} views
                            </div>
                          </div>
                        </TableCell>
                        <TableCell className="py-4">
                          <Badge className={getJobStatusColor(job.status)}>{getJobStatusLabel(job.status)}</Badge>
                        </TableCell>

<TableCell className="py-4">
                          <div className="space-y-2">
                            <Button
                              onClick={() => handleViewProof(job.id)}
                              className="w-full justify-start relative overflow-hidden bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 hover:from-blue-600 hover:via-purple-600 hover:to-pink-600 text-white border-0 shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300 group"
                              size="sm"
                            >
                              {/* Animated background overlay */}
                              <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-1000"></div>

{/* Pulsing dot indicator */}
                              <div className="absolute -top-1 -right-1 w-3 h-3 bg-red-400 rounded-full animate-pulse shadow-lg"></div>

<FileText className="h-4 w-4 mr-2 group-hover:rotate-12 transition-transform duration-300" />
                              <span className="font-semibold">View Submissions</span>
                              <ExternalLink className="h-3 w-3 ml-auto group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform duration-300" />

{/* Glowing border effect */}
                              <div className="absolute inset-0 rounded-md bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 opacity-0 group-hover:opacity-100 blur-sm -z-10 transition-opacity duration-300"></div>
                            </Button>

{job.approvalType === "instant" ? (
                              <div className="bg-green-50 border border-green-200 rounded-lg p-2">
                                <div className="flex items-center text-xs text-green-700">
                                  <CheckCircle className="h-3 w-3 mr-1" />
                                  <span className="font-medium">Instant Approval Enabled</span>
                                </div>
                                <p className="text-xs text-green-600 mt-1">
                                  Workers receive payment immediately upon work submission
                                </p>
                              </div>
                            ) : job.approvalType === "manual" ? (
                              <div className="bg-orange-50 border border-orange-200 rounded-lg p-2">
                                <div className="flex items-center text-xs text-orange-700">
                                  <Clock className="h-3 w-3 mr-1" />
                                  <span className="font-medium">
                                    Manual Approval ({job.manualApprovalDays || 3} days)
                                  </span>
                                </div>
                                <p className="text-xs text-orange-600 mt-1">
                                  Auto-payment if not reviewed within deadline
                                </p>
                              </div>
                            ) : (
                              <div className="bg-blue-50 border border-blue-200 rounded-lg p-2">
                                <div className="flex items-center text-xs text-blue-700">
                                  <Clock className="h-3 w-3 mr-1" />
                                  <span className="font-medium">Standard Review Process</span>
                                </div>
                                <p className="text-xs text-blue-600 mt-1">Manual review and approval required</p>
                              </div>
                            )}

<div className="flex items-center gap-2 text-xs">
                              <div className="flex items-center text-blue-600">
                                <Clock className="h-3 w-3 mr-1" />
                                <span>Pending: {getJobWorkProofCounts(job.id).pending}</span>
                              </div>
                              <div className="flex items-center text-green-600">
                                <CheckCircle className="h-3 w-3 mr-1" />
                                <span>Approved: {getJobWorkProofCounts(job.id).approved}</span>
                              </div>
                              <div className="flex items-center text-red-600">
                                <XCircle className="h-3 w-3 mr-1" />
                                <span>Rejected: {getJobWorkProofCounts(job.id).rejected}</span>
                              </div>
                            </div>
                          </div>
                        </TableCell>
                        <TableCell className="py-4">
                          <div className="space-y-1">
                            <div className="text-lg font-semibold text-green-600">
                              ${(() => {
                                if (job.estimatedTotalCost) {
                                  return job.estimatedTotalCost.toFixed(2)
                                }

if (job.depositDeducted) {
                                  return job.depositDeducted.toFixed(2)
                                }

// Calculate the actual total cost step by step
                                const baseJobCost = (job.workersNeeded || 1) * job.budgetMax
                                const screenshotCount = job.requireScreenshots || 0
                                let screenshotCost = 0
                                if (screenshotCount > 0) {
                                  screenshotCost = Math.max(0, screenshotCount - 1) * (baseJobCost * 0.03)
                                }
                                const subtotal = baseJobCost + screenshotCost
                                const platformFee = subtotal * 0.05
                                const totalCost = subtotal + platformFee

return totalCost.toFixed(2)
                              })()}
                            </div>
                            <div className="text-xs text-gray-500 space-y-0.5">
                              <div className="flex justify-between">
                                <span>Workers:</span>
                                <span>
                                  {job.workersNeeded || 1} × ${job.budgetMax?.toFixed(2) || "0.00"}
                                </span>
                              </div>
                              <div className="flex justify-between">
                                <span>Job Cost:</span>
                                <span>${((job.workersNeeded || 1) * job.budgetMax).toFixed(2)}</span>
                              </div>
                              {(job.requireScreenshots || 0) > 0 && (
                                <div className="flex justify-between">
                                  <span>Screenshot Cost:</span>
                                  <span>
                                    ${(() => {
                                      const baseJobCost = (job.workersNeeded || 1) * job.budgetMax
                                      const screenshotCount = job.requireScreenshots || 0
                                      // Calculate screenshot cost based on the pricing structure
                                      let screenshotCost = 0
                                      if (screenshotCount > 0) {
                                        // First screenshot is free, subsequent ones are 3% of base cost each
                                        screenshotCost = Math.max(0, screenshotCount - 1) * (baseJobCost * 0.03)
                                      }
                                      return screenshotCost.toFixed(2)
                                    })()}
                                  </span>
                                </div>
                              )}
                              <div className="flex justify-between">
                                <span>Platform fee (5%):</span>
                                <span>
                                  ${(() => {
                                    const baseJobCost = (job.workersNeeded || 1) * job.budgetMax
                                    const screenshotCount = job.requireScreenshots || 0
                                    let screenshotCost = 0
                                    if (screenshotCount > 0) {
                                      screenshotCost = Math.max(0, screenshotCount - 1) * (baseJobCost * 0.03)
                                    }
                                    const subtotal = baseJobCost + screenshotCost
                                    const platformFee = subtotal * 0.05
                                    return platformFee.toFixed(2)
                                  })()}
                                </span>
                              </div>
                              <div className="flex justify-between font-semibold border-t pt-1">
                                <span>Total Paid:</span>
                                <span>
                                  ${(() => {
                                    if (job.estimatedTotalCost) {
                                      return job.estimatedTotalCost.toFixed(2)
                                    }

if (job.depositDeducted) {
                                      return job.depositDeducted.toFixed(2)
                                    }

// Use the same calculation as above for consistency
                                    const baseJobCost = (job.workersNeeded || 1) * job.budgetMax
                                    const screenshotCount = job.requireScreenshots || 0
                                    let screenshotCost = 0
                                    if (screenshotCount > 0) {
                                      screenshotCost = Math.max(0, screenshotCount - 1) * (baseJobCost * 0.03)
                                    }
                                    const subtotal = baseJobCost + screenshotCost
                                    const platformFee = subtotal * 0.05
                                    const totalCost = subtotal + platformFee

return totalCost.toFixed(2)
                                  })()}
                                </span>
                              </div>
                            </div>
                          </div>
                        </TableCell>
                        <TableCell className="py-4">
                          <div className="space-y-2">
                            <Progress value={getJobProgress(job)} className="h-2" />
                            <div className="text-sm text-gray-600">{getJobProgress(job)}% Complete</div>
                          </div>
                        </TableCell>
                        <TableCell className="py-4">
                          <div className="flex items-center justify-center space-x-2">
                            <Button
                              variant="outline"
                              size="sm"
                              onClick={() => handleViewJobDetails(job)}
                              className="h-8 w-8 p-0"
                              title="View Job Details"
                            >
                              <Eye className="h-4 w-4" />
                            </Button>

{jobVisibility[job.id] ? (
                              <Button
                                variant="outline"
                                size="sm"
                                onClick={() => handleToggleJobVisibility(job.id, job.title, true)}
                                disabled={
                                  actionLoading === job.id ||
                                  job.status === JOB_STATUS.CANCELLED ||
                                  job.status === JOB_STATUS.REJECTED
                                }
                                className={`h-8 w-8 p-0 ${
                                  job.status === JOB_STATUS.CANCELLED || job.status === JOB_STATUS.REJECTED
                                    ? "text-gray-400 cursor-not-allowed"
                                    : "text-orange-600 hover:text-orange-700 hover:bg-orange-50"
                                }`}
                                title={
                                  job.status === JOB_STATUS.CANCELLED || job.status === JOB_STATUS.REJECTED
                                    ? "Cannot modify cancelled/rejected jobs"
                                    : "Hide from Dashboard"
                                }
                              >
                                <Pause className="h-4 w-4" />
                              </Button>
                            ) : (
                              <Button
                                variant="outline"
                                size="sm"
                                onClick={() => handleToggleJobVisibility(job.id, job.title, false)}
                                disabled={
                                  actionLoading === job.id ||
                                  job.status === JOB_STATUS.CANCELLED ||
                                  job.status === JOB_STATUS.REJECTED
                                }
                                className={`h-8 w-8 p-0 ${
                                  job.status === JOB_STATUS.CANCELLED || job.status === JOB_STATUS.REJECTED
                                    ? "text-gray-400 cursor-not-allowed"
                                    : "text-green-600 hover:text-green-700 hover:bg-green-50"
                                }`}
                                title={
                                  job.status === JOB_STATUS.CANCELLED || job.status === JOB_STATUS.REJECTED
                                    ? "Cannot modify cancelled/rejected jobs"
                                    : "Show on Dashboard"
                                }
                              >
                                <Play className="h-4 w-4" />
                              </Button>
                            )}

<Button
                              variant="outline"
                              size="sm"
                              onClick={() => handleUpdateWorkers(job)}
                              disabled={job.status === JOB_STATUS.CANCELLED || job.status === JOB_STATUS.REJECTED}
                              className={`h-8 w-8 p-0 ${
                                job.status === JOB_STATUS.CANCELLED || job.status === JOB_STATUS.REJECTED
                                  ? "text-gray-400 cursor-not-allowed"
                                  : "text-blue-600 hover:text-blue-700 hover:bg-blue-50"
                              }`}
                              title={
                                job.status === JOB_STATUS.CANCELLED || job.status === JOB_STATUS.REJECTED
                                  ? "Cannot modify cancelled/rejected jobs"
                                  : "Update Worker Count"
                              }
                            >
                              <Users className="h-4 w-4" />
                            </Button>

<Button
                              variant="outline"
                              size="sm"
                              onClick={() => handleCancelJob(job)}
                              disabled={
                                job.status === JOB_STATUS.CANCELLED ||
                                job.status === JOB_STATUS.REJECTED ||
                                actionLoading === job.id
                              }
                              className={`h-8 w-8 p-0 ${
                                job.status === JOB_STATUS.CANCELLED || job.status === JOB_STATUS.REJECTED
                                  ? "text-gray-400 cursor-not-allowed"
                                  : "text-red-600 hover:text-red-700 hover:bg-red-50"
                              }`}
                              title={
                                job.status === JOB_STATUS.CANCELLED || job.status === JOB_STATUS.REJECTED
                                  ? "Job already cancelled"
                                  : "Cancel Job"
                              }
                            >
                              <Trash2 className="h-4 w-4" />
                            </Button>

<Button
                              variant="outline"
                              size="sm"
                              onClick={() => handleEditJob(job.id)}
                              disabled={job.status === JOB_STATUS.CANCELLED || job.status === JOB_STATUS.REJECTED}
                              className={`h-8 w-8 p-0 ${
                                job.status === JOB_STATUS.CANCELLED || job.status === JOB_STATUS.REJECTED
                                  ? "text-gray-400 cursor-not-allowed"
                                  : ""
                              }`}
                              title={
                                job.status === JOB_STATUS.CANCELLED || job.status === JOB_STATUS.REJECTED
                                  ? "Cannot edit cancelled/rejected jobs"
                                  : "Edit Job"
                              }
                            >
                              <Edit className="h-4 w-4" />
                            </Button>
                          </div>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>

{totalPages > 1 && (
                <div className="flex items-center justify-between px-6 py-4 border-t">
                  <div className="text-sm text-gray-600">
                    Showing {(currentPage - 1) * itemsPerPage + 1} to{" "}
                    {Math.min(currentPage * itemsPerPage, filteredJobs.length)} of {filteredJobs.length} jobs
                  </div>
                  <div className="flex items-center space-x-2">
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => setCurrentPage((prev) => Math.max(1, prev - 1))}
                      disabled={currentPage === 1}
                    >
                      Previous
                    </Button>

{filteredJobs.length === 0 && (
                <div className="text-center py-12">
                  <FileText className="h-12 w-12 text-gray-400 mx-auto mb-4" />
                  <p className="text-gray-600 mb-4">
                    {searchTerm || statusFilter !== "all"
                      ? "No jobs match your search criteria"
                      : "You haven't posted any jobs yet"}
                  </p>
                  {!searchTerm && statusFilter === "all" && (
                    <Link href="/dashboard/jobs/create">
                      <Button>
                        <Plus className="mr-2 h-4 w-4" />
                        Create Your First Job
                      </Button>
                    </Link>
                  )}
                </div>
              )}
            </CardContent>
          </Card>
        </div>
      </div>

<JobCancellationModal
        isOpen={cancellationModalOpen}
        onClose={() => {
          setCancellationModalOpen(false)
          setSelectedJobForCancellation(null)
        }}
        job={selectedJobForCancellation}
        onJobCancelled={refreshJobs}
        userId={user?.id || ""}
      />

<Dialog open={proofModalOpen} onOpenChange={setProofModalOpen}>
        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <div className="flex items-center justify-between">
              <DialogTitle className="text-xl font-semibold">Work Proofs</DialogTitle>
              <Button
                variant="outline"
                size="sm"
                className="text-red-600 hover:text-red-700 hover:bg-red-50 bg-transparent"
              >
                <AlertTriangle className="mr-2 h-4 w-4" />
                Report User
              </Button>
            </div>
          </DialogHeader>

<WorkProofModal
            proofs={selectedJobProofs}
            isOpen={proofModalOpen}
            onClose={() => setProofModalOpen(false)}
            onUpdate={refreshJobs}
            userRole="employer"
          />
        </DialogContent>
      </Dialog>

<Dialog
        open={confirmDialog.isOpen}
        onOpenChange={(open) => setConfirmDialog((prev) => ({ ...prev, isOpen: open }))}
      >
        <DialogContent>
          <DialogHeader>
            <DialogTitle>{confirmDialog.title}</DialogTitle>
            <DialogDescription>{confirmDialog.description}</DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setConfirmDialog((prev) => ({ ...prev, isOpen: false }))}>
              Cancel
            </Button>
            <Button
              variant={confirmDialog.variant}
              onClick={() => {
                confirmDialog.action()
                setConfirmDialog((prev) => ({ ...prev, isOpen: false }))
              }}
            >
              {confirmDialog.actionLabel}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

<Dialog open={workerUpdateModalOpen} onOpenChange={setWorkerUpdateModalOpen}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle>Update Worker Count</DialogTitle>
            <DialogDescription>
              Add more workers to "{selectedJobForWorkerUpdate?.title}". Additional workers will be charged to your
              deposit balance.
            </DialogDescription>
          </DialogHeader>

<div className="space-y-4">
            <div>
              <Label htmlFor="worker-count">Number of Workers</Label>
              <Input
                id="worker-count"
                type="number"
                min="1"
                value={newWorkerCount}
                onChange={(e) => setNewWorkerCount(Number.parseInt(e.target.value) || 1)}
                className="mt-1"
              />
            </div>

{selectedJobForWorkerUpdate && newWorkerCount > (selectedJobForWorkerUpdate.workersNeeded || 1) && (
              <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
                <h4 className="font-semibold text-blue-900 mb-2">Additional Cost</h4>
                <div className="text-sm text-blue-800 space-y-1">
                  <div className="flex justify-between">
                    <span>Additional workers:</span>
                    <span>{newWorkerCount - (selectedJobForWorkerUpdate.workersNeeded || 1)}</span>
                  </div>
                  <div className="flex justify-between">
                    <span>Cost per worker:</span>
                    <span>${selectedJobForWorkerUpdate.budgetMax}</span>
                  </div>
                  {(selectedJobForWorkerUpdate.requireScreenshots || 0) > 0 && (
                    <div className="flex justify-between">
                      <span>Additional screenshot cost:</span>
                      <span>
                        ${(() => {
                          const currentWorkers = selectedJobForWorkerUpdate.workersNeeded || 1
                          const additionalWorkers = newWorkerCount - currentWorkers
                          const costPerWorker = selectedJobForWorkerUpdate.budgetMax

// Calculate new total base cost and current base cost
                          const newTotalBaseCost = newWorkerCount * costPerWorker
                          const currentTotalBaseCost = currentWorkers * costPerWorker

const screenshotCount = selectedJobForWorkerUpdate.requireScreenshots || 0

// Calculate screenshot costs
                          let newScreenshotCost = 0
                          let currentScreenshotCost = 0

if (screenshotCount > 0) {
                            // First screenshot free, rest are 3% each
                            newScreenshotCost = Math.max(0, screenshotCount - 1) * (newTotalBaseCost * 0.03)
                            currentScreenshotCost = Math.max(0, screenshotCount - 1) * (currentTotalBaseCost * 0.03)
                          }

const additionalScreenshotCost = newScreenshotCost - currentScreenshotCost
                          return additionalScreenshotCost.toFixed(2)
                        })()}
                      </span>
                    </div>
                  )}
                  <div className="flex justify-between">
                    <span>Platform fee (5%):</span>
                    <span>
                      ${(() => {
                        const currentWorkers = selectedJobForWorkerUpdate.workersNeeded || 1
                        const additionalWorkers = newWorkerCount - currentWorkers
                        const costPerWorker = selectedJobForWorkerUpdate.budgetMax
                        const additionalBaseCost = additionalWorkers * costPerWorker

// Calculate additional screenshot cost
                        let additionalScreenshotCost = 0
                        const screenshotCount = selectedJobForWorkerUpdate.requireScreenshots || 0
                        if (screenshotCount > 0) {
                          const newTotalBaseCost = newWorkerCount * costPerWorker
                          const currentTotalBaseCost = currentWorkers * costPerWorker
                          const newScreenshotCost = Math.max(0, screenshotCount - 1) * (newTotalBaseCost * 0.03)
                          const currentScreenshotCost = Math.max(0, screenshotCount - 1) * (currentTotalBaseCost * 0.03)
                          additionalScreenshotCost = newScreenshotCost - currentScreenshotCost
                        }

const additionalSubtotal = additionalBaseCost + additionalScreenshotCost
                        const platformFee = additionalSubtotal * 0.05
                        return platformFee.toFixed(2)
                      })()}
                    </span>
                  </div>
                  <div className="flex justify-between font-semibold border-t pt-1">
                    <span>Total additional cost:</span>
                    <span>
                      ${(() => {
                        const currentWorkers = selectedJobForWorkerUpdate.workersNeeded || 1
                        const additionalWorkers = newWorkerCount - currentWorkers
                        const costPerWorker = selectedJobForWorkerUpdate.budgetMax
                        const additionalBaseCost = additionalWorkers * costPerWorker

const additionalSubtotal = additionalBaseCost + additionalScreenshotCost
                        const totalAdditionalCost = additionalSubtotal * 1.05
                        return totalAdditionalCost.toFixed(2)
                      })()}
                    </span>
                  </div>
                </div>
              </div>
            )}
          </div>

<DialogFooter>
            <Button variant="outline" onClick={() => setWorkerUpdateModalOpen(false)}>
              Cancel
            </Button>
            <Button
              onClick={() => handleWorkerCountUpdate(newWorkerCount)}
              disabled={
                actionLoading === "update-workers" ||
                newWorkerCount === (selectedJobForWorkerUpdate?.workersNeeded || 1)
              }
              className="bg-blue-600 hover:bg-blue-700"
            >
              {actionLoading === "update-workers" ? (
                <>
                  <RefreshCw className="mr-2 h-4 w-4 animate-spin" />
                  Updating...
                </>
              ) : (
                "Update Worker Count"
              )}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

<Dialog open={jobDetailsModalOpen} onOpenChange={setJobDetailsModalOpen}>
        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle className="text-xl font-semibold">Job Details</DialogTitle>
            <DialogDescription>Complete details of your posted job</DialogDescription>
          </DialogHeader>

{selectedJobForDetails && (
            <div className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="space-y-4">
                  <div>
                    <Label className="text-sm font-semibold text-gray-700">Job ID</Label>
                    <p className="text-lg font-mono font-medium text-blue-600 mt-1">
                      #
                      {selectedJobForDetails.formattedJobId ||
                        selectedJobForDetails.jobNumber?.toString().padStart(3, "0") ||
                        "N/A"}
                    </p>
                  </div>

<div>
                    <Label className="text-sm font-semibold text-gray-700">Job Title</Label>
                    <p className="text-lg font-medium text-gray-900 mt-1">{selectedJobForDetails.title}</p>
                  </div>

<div>
                    <Label className="text-sm font-semibold text-gray-700">Description</Label>
                    <p className="text-gray-800 mt-1 whitespace-pre-wrap">{selectedJobForDetails.description}</p>
                  </div>

<div>
                    <Label className="text-sm font-semibold text-gray-700">Requirements</Label>
                    <p className="text-gray-800 mt-1 whitespace-pre-wrap">{selectedJobForDetails.requirements}</p>
                  </div>

<div>
                    <Label className="text-sm font-semibold text-gray-700">Instructions</Label>
                    <p className="text-gray-800 mt-1 whitespace-pre-wrap">{selectedJobForDetails.instructions}</p>
                  </div>
                </div>

<div className="space-y-4">
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <Label className="text-sm font-semibold text-gray-700">Budget Range</Label>
                      <p className="text-lg font-medium text-green-600 mt-1">
                        ${selectedJobForDetails.budgetMin} - ${selectedJobForDetails.budgetMax}
                      </p>
                    </div>

<div>
                      <Label className="text-sm font-semibold text-gray-700">Workers Needed</Label>
                      <p className="text-lg font-medium text-blue-600 mt-1">{selectedJobForDetails.workersNeeded}</p>
                    </div>
                  </div>

<div className="grid grid-cols-2 gap-4">
                    <div>
                      <Label className="text-sm font-semibold text-gray-700">Deadline</Label>
                      <p className="text-gray-800 mt-1">
                        {selectedJobForDetails.deadline
                          ? new Date(selectedJobForDetails.deadline).toLocaleDateString()
                          : "Not specified"}
                      </p>
                    </div>

<div>
                      <Label className="text-sm font-semibold text-gray-700">Location</Label>
                      <p className="text-gray-800 mt-1">{selectedJobForDetails.location || "Remote"}</p>
                    </div>
                  </div>

<div>
                    <Label className="text-sm font-semibold text-gray-700">Status</Label>
                    <div className="mt-1">
                      <Badge className={getJobStatusColor(selectedJobForDetails.status)}>
                        {getJobStatusLabel(selectedJobForDetails.status)}
                      </Badge>
                    </div>
                  </div>

<div>
                    <Label className="text-sm font-semibold text-gray-700">Payment Type</Label>
                    <p className="text-gray-800 mt-1 capitalize">{selectedJobForDetails.paymentType || "Standard"}</p>
                  </div>

{selectedJobForDetails.tags && selectedJobForDetails.tags.length > 0 && (
                    <div>
                      <Label className="text-sm font-semibold text-gray-700">Tags</Label>
                      <div className="flex flex-wrap gap-2 mt-1">
                        {selectedJobForDetails.tags.map((tag, index) => (
                          <Badge key={index} variant="secondary" className="text-xs">
                            {tag}
                          </Badge>
                        ))}
                      </div>
                    </div>
                  )}

<div className="bg-gray-50 rounded-lg p-4">
                    <Label className="text-sm font-semibold text-gray-700">Job Statistics</Label>
                    <div className="grid grid-cols-2 gap-4 mt-2 text-sm">
                      <div className="flex justify-between">
                        <span>Applications:</span>
                        <span className="font-medium">{selectedJobForDetails.applicationsCount || 0}</span>
                      </div>
                      <div className="flex justify-between">
                        <span>Views:</span>
                        <span className="font-medium">{selectedJobForDetails.viewsCount || 0}</span>
                      </div>
                      <div className="flex justify-between">
                        <span>Created:</span>
                        <span className="font-medium">
                          {selectedJobForDetails.createdAt
                            ? new Date(selectedJobForDetails.createdAt).toLocaleDateString()
                            : "N/A"}
                        </span>
                      </div>
                      <div className="flex justify-between">
                        <span>Updated:</span>
                        <span className="font-medium">
                          {selectedJobForDetails.updatedAt
                            ? new Date(selectedJobForDetails.updatedAt).toLocaleDateString()
                            : "N/A"}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}

<DialogFooter>
            <Button variant="outline" onClick={() => setJobDetailsModalOpen(false)}>
              Close
            </Button>
            {selectedJobForDetails && selectedJobForDetails.status !== "cancelled" && (
              <Button
                onClick={() => {
                  setJobDetailsModalOpen(false)
                  handleEditJob(selectedJobForDetails.id)
                }}
                className="bg-blue-600 hover:bg-blue-700"
              >
                <Edit className="mr-2 h-4 w-4" />
                Edit Job
              </Button>
            )}
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  )
}
[V0_FILE]typescriptreact:file="lib/default-thumbnails.ts" isQuickEdit="true" isMerged="true"
/**
 * Default thumbnail images for jobs when category thumbnails are not available
 * These images will be used randomly as fallbacks
 */
export const DEFAULT_THUMBNAILS = [
  "/anime-person-with-laptop-in-rain-storm.png", // Anime-style person with laptop in rain/storm
  "/anime-person-with-laptop-indoors-rainy-day.png", // Anime-style person with laptop indoors on rainy day
] as const

/**
 * Get a random default thumbnail from the available options
 * @returns {string} Path to a random default thumbnail image
 */
export function getRandomDefaultThumbnail(): string {
  const randomIndex = Math.floor(Math.random() * DEFAULT_THUMBNAILS.length)
  return DEFAULT_THUMBNAILS[randomIndex]
}

/**
 * Get all available default thumbnails
 * @returns {readonly string[]} Array of all default thumbnail paths
 */
export function getAllDefaultThumbnails(): readonly string[] {
  return DEFAULT_THUMBNAILS
}
[V0_FILE]png:file="public/professional-logo-design-portfolio.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-logo-design-portfolio-5gIz84ISkRRII99JDhnIsRKqrBHjwT.png" isMerged="true"
[V0_FILE]png:file="public/logo-design-examples.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/logo-design-examples-iyQWbKbDrueMs7hlzwUgBlkHZPdctQ.png" isMerged="true"
[V0_FILE]png:file="public/react-website-development.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/react-website-development-puaS6Nb002pjFcApZPm4Q1U8cbQ7Lq.png" isMerged="true"
[V0_FILE]png:file="public/modern-website-examples.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-website-examples-lD1AGGFlatad03OozsRtTfcFS56ueY.png" isMerged="true"
[V0_FILE]png:file="public/content-writing-blog-posts.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/content-writing-blog-posts-4iMtRoGZ1EpkrXpGXC5pFfvenmwRcr.png" isMerged="true"
[V0_FILE]png:file="public/anime-person-with-laptop-in-rain-storm.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/anime-person-with-laptop-in-rain-storm-wvJMYnOAGb7t6GkBFQWqIYpWtisdE8.png" isMerged="true"
[V0_FILE]png:file="public/anime-person-with-laptop-indoors-rainy-day.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/anime-person-with-laptop-indoors-rainy-day-UBHIo2z7zxaUPY1usLO4ZIJZ70hHkc.png" isMerged="true"
[V0_FILE]typescriptreact:file="lib/local-reservation-storage.ts" isQuickEdit="true" isMerged="true"
export interface LocalReservation {
  id: string
  jobId: string
  userId: string
  reservedAt: string
  expiresAt: string
  status: "active" | "expired" | "completed" | "cancelled"
  createdAt: string
  updatedAt: string
}

export interface LocalReservationSettings {
  id: string
  isEnabled: boolean
  defaultReservationMinutes: number
  maxReservationMinutes: number
  maxConcurrentReservations: number
  createdAt: string
  updatedAt: string
}

class LocalReservationStorage {
  private readonly RESERVATIONS_KEY = "microjob_reservations"
  private readonly SETTINGS_KEY = "microjob_reservation_settings"
  private readonly JOB_RESERVATIONS_KEY = "microjob_job_reservations"

// Get all reservations from localStorage
  getReservations(): LocalReservation[] {
    if (typeof window === "undefined") return []

try {
      const stored = localStorage.getItem(this.RESERVATIONS_KEY)
      return stored ? JSON.parse(stored) : []
    } catch (error) {
      console.error("Error loading reservations from localStorage:", error)
      return []
    }
  }

// Save reservations to localStorage
  saveReservations(reservations: LocalReservation[]): void {
    if (typeof window === "undefined") return

try {
      localStorage.setItem(this.RESERVATIONS_KEY, JSON.stringify(reservations))
      this.dispatchStorageEvent(this.RESERVATIONS_KEY, reservations)
    } catch (error) {
      console.error("Error saving reservations to localStorage:", error)
    }
  }

// Get reservation settings
  getSettings(): LocalReservationSettings {
    if (typeof window === "undefined") {
      return this.getDefaultSettings()
    }

try {
      const stored = localStorage.getItem(this.SETTINGS_KEY)
      return stored ? JSON.parse(stored) : this.getDefaultSettings()
    } catch (error) {
      console.error("Error loading settings from localStorage:", error)
      return this.getDefaultSettings()
    }
  }

// Save reservation settings
  saveSettings(settings: LocalReservationSettings): void {
    if (typeof window === "undefined") return

try {
      localStorage.setItem(this.SETTINGS_KEY, JSON.stringify(settings))
    } catch (error) {
      console.error("Error saving settings to localStorage:", error)
    }
  }

// Get job reservation status (which jobs are reserved)
  getJobReservations(): Record<string, { userId: string; expiresAt: string }> {
    if (typeof window === "undefined") return {}

try {
      const stored = localStorage.getItem(this.JOB_RESERVATIONS_KEY)
      return stored ? JSON.parse(stored) : {}
    } catch (error) {
      console.error("Error loading job reservations from localStorage:", error)
      return {}
    }
  }

// Save job reservation status
  saveJobReservations(jobReservations: Record<string, { userId: string; expiresAt: string }>): void {
    if (typeof window === "undefined") return

try {
      localStorage.setItem(this.JOB_RESERVATIONS_KEY, JSON.stringify(jobReservations))
      this.dispatchStorageEvent(this.JOB_RESERVATIONS_KEY, jobReservations)
    } catch (error) {
      console.error("Error saving job reservations to localStorage:", error)
    }
  }

// Create a new reservation
  createReservation(jobId: string, userId: string, reservationMinutes: number): LocalReservation {
    const now = new Date()
    const expiresAt = new Date(now.getTime() + reservationMinutes * 60 * 1000)

const reservation: LocalReservation = {
      id: this.generateId(),
      jobId,
      userId,
      reservedAt: now.toISOString(),
      expiresAt: expiresAt.toISOString(),
      status: "active",
      createdAt: now.toISOString(),
      updatedAt: now.toISOString(),
    }

// Add to reservations list
    const reservations = this.getReservations()
    reservations.push(reservation)
    this.saveReservations(reservations)

// Update job reservations mapping
    const jobReservations = this.getJobReservations()
    jobReservations[jobId] = {
      userId,
      expiresAt: expiresAt.toISOString(),
    }
    this.saveJobReservations(jobReservations)

return reservation
  }

// Cancel a reservation
  cancelReservation(reservationId: string): boolean {
    const reservations = this.getReservations()
    const reservationIndex = reservations.findIndex((r) => r.id === reservationId)

if (reservationIndex === -1) return false

const reservation = reservations[reservationIndex]
    reservation.status = "cancelled"
    reservation.updatedAt = new Date().toISOString()

this.saveReservations(reservations)

// Remove from job reservations
    const jobReservations = this.getJobReservations()
    delete jobReservations[reservation.jobId]
    this.saveJobReservations(jobReservations)

return true
  }

// Check and expire old reservations
  expireOldReservations(): LocalReservation[] {
    const now = new Date()
    const reservations = this.getReservations()
    const jobReservations = this.getJobReservations()
    const expiredReservations: LocalReservation[] = []

let hasChanges = false

reservations.forEach((reservation) => {
      if (reservation.status === "active" && new Date(reservation.expiresAt) < now) {
        reservation.status = "expired"
        reservation.updatedAt = now.toISOString()
        expiredReservations.push(reservation)

// Remove from job reservations
        delete jobReservations[reservation.jobId]
        hasChanges = true
      }
    })

if (hasChanges) {
      this.saveReservations(reservations)
      this.saveJobReservations(jobReservations)
    }

return expiredReservations
  }

// Get user's active reservations
  getUserActiveReservations(userId: string): LocalReservation[] {
    const reservations = this.getReservations()
    return reservations.filter((r) => r.userId === userId && r.status === "active")
  }

// Check if job is reserved
  isJobReserved(jobId: string): { isReserved: boolean; userId?: string; expiresAt?: string } {
    const jobReservations = this.getJobReservations()
    const reservation = jobReservations[jobId]

if (!reservation) {
      return { isReserved: false }
    }

// Check if expired
    if (new Date(reservation.expiresAt) < new Date()) {
      // Clean up expired reservation
      delete jobReservations[jobId]
      this.saveJobReservations(jobReservations)
      return { isReserved: false }
    }

return {
      isReserved: true,
      userId: reservation.userId,
      expiresAt: reservation.expiresAt,
    }
  }

// Get default settings
  private getDefaultSettings(): LocalReservationSettings {
    return {
      id: "default",
      isEnabled: true,
      defaultReservationMinutes: 60, // 1 hour default
      maxReservationMinutes: 1440, // 24 hours max
      maxConcurrentReservations: 5,
      createdAt: new Date().toISOString(),
      updatedAt: new Date().toISOString(),
    }
  }

// Generate a simple ID
  private generateId(): string {
    return Date.now().toString(36) + Math.random().toString(36).substr(2)
  }

// Clear all data (for testing/reset)
  clearAll(): void {
    if (typeof window === "undefined") return

localStorage.removeItem(this.RESERVATIONS_KEY)
    localStorage.removeItem(this.SETTINGS_KEY)
    localStorage.removeItem(this.JOB_RESERVATIONS_KEY)
  }

private dispatchStorageEvent(key: string, data: any) {
    if (typeof window !== "undefined") {
      window.dispatchEvent(
        new CustomEvent("reservationStorageChange", {
          detail: { key, data },
        }),
      )
    }
  }
}

// Export singleton instance
export const localReservationStorage = new LocalReservationStorage()
[V0_FILE]typescriptreact:file="hooks/use-local-reservations.ts" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect, useCallback } from "react"
import type { LocalReservation, LocalReservationSettings } from "@/lib/local-reservation-storage"
import {
  checkReservationStatus,
  getUserReservations,
  createReservation,
  cancelReservation,
  cleanupExpiredReservations,
  getReservationSettings,
  updateReservationSettings,
  type ReservationStatus,
} from "@/lib/local-reservation-utils"

export function useLocalReservations(userId?: string) {
  const [reservations, setReservations] = useState<LocalReservation[]>([])
  const [settings, setSettings] = useState<LocalReservationSettings | null>(null)
  const [loading, setLoading] = useState(true)

// Load user reservations
  const loadReservations = useCallback(() => {
    if (!userId) {
      setReservations([])
      return
    }

try {
      const userReservations = getUserReservations(userId)
      setReservations(userReservations)
    } catch (error) {
      console.error("Error loading reservations:", error)
      setReservations([])
    }
  }, [userId])

// Load settings
  const loadSettings = useCallback(() => {
    try {
      const currentSettings = getReservationSettings()
      setSettings(currentSettings)
    } catch (error) {
      console.error("Error loading settings:", error)
    }
  }, [])

// Create a new reservation
  const reserve = useCallback(
    async (jobId: string, reservationMinutes?: number) => {
      if (!userId || !settings) return null

const minutes = reservationMinutes || settings.defaultReservationMinutes
      const reservation = createReservation(jobId, userId, minutes)

if (reservation) {
        loadReservations()
      }

return reservation
    },
    [userId, settings, loadReservations],
  )

// Cancel a reservation
  const cancel = useCallback(
    (reservationId: string) => {
      const success = cancelReservation(reservationId)
      if (success) {
        loadReservations()
      }
      return success
    },
    [loadReservations],
  )

// Check if a job is reserved
  const checkJobReservation = useCallback(async (jobId: string): Promise<ReservationStatus> => {
    return checkReservationStatus(jobId)
  }, [])

// Update settings (admin only)
  const updateSettings = useCallback((updates: Partial<Omit<LocalReservationSettings, "id" | "createdAt">>) => {
    try {
      const updated = updateReservationSettings(updates)
      setSettings(updated)
      return updated
    } catch (error) {
      console.error("Error updating settings:", error)
      return null
    }
  }, [])

// Cleanup expired reservations
  const cleanup = useCallback(() => {
    const expired = cleanupExpiredReservations()
    if (expired.length > 0) {
      loadReservations()
    }
    return expired
  }, [loadReservations])

// Initialize and set up periodic cleanup
  useEffect(() => {
    const initialize = async () => {
      setLoading(true)
      loadSettings()
      loadReservations()

// Initial cleanup
      cleanup()

setLoading(false)
    }

initialize()

// Set up periodic cleanup every minute
    const cleanupInterval = setInterval(cleanup, 60000)

const handleStorageChange = (e: CustomEvent) => {
      const { key } = e.detail
      if (key === "microjob_reservations" || key === "microjob_job_reservations") {
        loadReservations()
      }
    }

const handleStorageEvent = (e: StorageEvent) => {
      if (e.key === "microjob_reservations" || e.key === "microjob_job_reservations") {
        loadReservations()
      }
    }

// Listen for custom events (same tab) and storage events (other tabs)
    window.addEventListener("reservationStorageChange", handleStorageChange as EventListener)
    window.addEventListener("storage", handleStorageEvent)

return () => {
      clearInterval(cleanupInterval)
      window.removeEventListener("reservationStorageChange", handleStorageChange as EventListener)
      window.removeEventListener("storage", handleStorageEvent)
    }
  }, [loadSettings, loadReservations, cleanup])

return {
    reservations,
    settings,
    loading,
    reserve,
    cancel,
    checkJobReservation,
    updateSettings,
    cleanup,
    refresh: () => {
      loadReservations()
      loadSettings()
    },
  }
}

// Hook for checking individual job reservation status
export function useJobReservationStatus(jobId: string) {
  const [status, setStatus] = useState<ReservationStatus>({ isReserved: false })
  const [loading, setLoading] = useState(true)

const checkStatus = useCallback(async () => {
    try {
      const reservationStatus = await checkReservationStatus(jobId)
      setStatus(reservationStatus)
    } catch (error) {
      console.error("Error checking job reservation status:", error)
      setStatus({ isReserved: false })
    } finally {
      setLoading(false)
    }
  }, [jobId])

useEffect(() => {
    checkStatus()

// Check status every 30 seconds
    const interval = setInterval(checkStatus, 30000)

const handleStorageChange = (e: CustomEvent) => {
      const { key } = e.detail
      if (key === "microjob_job_reservations") {
        checkStatus()
      }
    }

const handleStorageEvent = (e: StorageEvent) => {
      if (e.key === "microjob_job_reservations") {
        checkStatus()
      }
    }

window.addEventListener("reservationStorageChange", handleStorageChange as EventListener)
    window.addEventListener("storage", handleStorageEvent)

return () => {
      clearInterval(interval)
      window.removeEventListener("reservationStorageChange", handleStorageChange as EventListener)
      window.removeEventListener("storage", handleStorageEvent)
    }
  }, [checkStatus])

return {
    status,
    loading,
    refresh: checkStatus,
  }
}
[V0_FILE]typescriptreact:file="components/reservation-timer.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Timer, AlertTriangle } from "lucide-react"
import { formatTimeLeft } from "@/lib/local-reservation-utils"

interface ReservationTimerProps {
  expiresAt: string
  onExpire?: () => void
  className?: string
}

export function ReservationTimer({ expiresAt, onExpire, className = "" }: ReservationTimerProps) {
  const [timeLeft, setTimeLeft] = useState<number>(0)
  const [isExpired, setIsExpired] = useState(false)

useEffect(() => {
    const updateTimer = () => {
      const now = new Date().getTime()
      const expiry = new Date(expiresAt).getTime()
      const difference = expiry - now

if (difference <= 0) {
        setTimeLeft(0)
        setIsExpired(true)
        onExpire?.()
      } else {
        setTimeLeft(difference)
        setIsExpired(false)
      }
    }

updateTimer()
    const interval = setInterval(updateTimer, 1000)

const handleStorageChange = (e: CustomEvent) => {
      const { key } = e.detail
      if (key === "microjob_job_reservations") {
        updateTimer()
      }
    }

const handleStorageEvent = (e: StorageEvent) => {
      if (e.key === "microjob_job_reservations") {
        updateTimer()
      }
    }

window.addEventListener("reservationStorageChange", handleStorageChange as EventListener)
    window.addEventListener("storage", handleStorageEvent)

if (isExpired) {
    return (
      <div className={`flex items-center text-red-600 ${className}`}>
        <AlertTriangle className="h-4 w-4 mr-1" />
        <span className="font-medium">Expired</span>
      </div>
    )
  }

const isUrgent = timeLeft < 5 * 60 * 1000 // Less than 5 minutes
  const isWarning = timeLeft < 15 * 60 * 1000 // Less than 15 minutes

return (
    <div
      className={`flex items-center ${
        isUrgent ? "text-red-600" : isWarning ? "text-orange-600" : "text-blue-600"
      } ${className}`}
    >
      <Timer className={`h-4 w-4 mr-1 ${isUrgent ? "animate-pulse" : ""}`} />
      <span className="font-medium">{formatTimeLeft(timeLeft)}</span>
    </div>
  )
}
[V0_FILE]png:file="public/professional-developer.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-developer-Io2VFokrpOx0SUCW38Ihry9ONLCJaH.png" isMerged="true"
[V0_FILE]png:file="public/modern-website-design.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-website-design-csY89d8MUvpgm8LwYJyyuj6ookRN6r.png" isMerged="true"
[V0_FILE]png:file="public/female-designer.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/female-designer-LKnhAm0wvFrje5NeSWUBSYB87uY7iX.png" isMerged="true"
[V0_FILE]png:file="public/content-writer.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/content-writer-irVvM9gaNBwPOQx8y9bNloDjIptYpM.png" isMerged="true"
[V0_FILE]png:file="public/placeholder-wv0wq.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/placeholder-eber4.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/video-animation-motion-graphics.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/video-animation-motion-graphics-gsG2gdWyj9lPWQJuzeKz0nIIsNNsJx.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/marketplace/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/test-refunds/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { CheckCircle, XCircle, Clock, Play, RefreshCw } from "lucide-react"

interface TestResult {
  adminSettings: boolean
  cronEndpoint: boolean
  walletTransactions: boolean
  statusUpdates: boolean
  cleanup: boolean
}

export default function TestRefundsPage() {
  const [isRunning, setIsRunning] = useState(false)
  const [results, setResults] = useState<TestResult | null>(null)
  const [logs, setLogs] = useState<string[]>([])

const addLog = (message: string) => {
    setLogs((prev) => [...prev, `${new Date().toLocaleTimeString()}: ${message}`])
  }

const runTests = async () => {
    setIsRunning(true)
    setResults(null)
    setLogs([])

addLog("🧪 Starting Refund System Test Suite...")

try {
      // Test 1: Admin Settings API
      addLog("📋 Testing Admin Settings API...")
      let adminSettingsPass = false
      try {
        const response = await fetch("/api/admin/revision-settings")
        const settings = await response.json()

if (settings.enableAutomaticRefunds && settings.refundOnRevisionTimeout && settings.refundOnRejectionTimeout) {
          addLog("✅ Admin settings configured correctly for automatic refunds")
          adminSettingsPass = true
        } else {
          addLog("❌ Admin settings not configured for automatic refunds")
        }
      } catch (error) {
        addLog(`❌ Admin Settings API failed: ${error}`)
      }

// Test 2: Create test work proofs with expired deadlines
      addLog("🔧 Creating test work proofs with expired deadlines...")
      const testProofs = []

// Create expired rejection proof
      const expiredRejectionProof = {
        id: `test-rejection-${Date.now()}`,
        jobId: `test-job-${Date.now()}`,
        applicationId: `test-app-${Date.now()}`,
        workerId: "test-worker-1",
        employerId: "test-employer-1",
        title: "Test Work Proof - Expired Rejection",
        description: "Test work proof for rejection timeout testing",
        submissionText: "This is a test submission",
        proofFiles: [],
        proofLinks: [],
        screenshots: [],
        status: "rejected",
        submittedAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
        reviewedAt: new Date(Date.now() - 25 * 60 * 60 * 1000).toISOString(),
        reviewFeedback: "Test rejection for timeout testing",
        paymentAmount: 50.0,
        submissionNumber: 1,
        createdAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
        updatedAt: new Date(Date.now() - 25 * 60 * 60 * 1000).toISOString(),
        rejectionDeadline: new Date(Date.now() - 60 * 60 * 1000).toISOString(), // 1 hour ago (expired)
        worker: {
          id: "test-worker-1",
          firstName: "Test",
          lastName: "Worker",
          username: "testworker1",
        },
        employer: {
          id: "test-employer-1",
          firstName: "Test",
          lastName: "Employer",
          username: "testemployer1",
        },
      }

// Create expired revision proof
      const expiredRevisionProof = {
        id: `test-revision-${Date.now()}`,
        jobId: `test-job-revision-${Date.now()}`,
        applicationId: `test-app-revision-${Date.now()}`,
        workerId: "test-worker-2",
        employerId: "test-employer-2",
        title: "Test Work Proof - Expired Revision",
        description: "Test work proof for revision timeout testing",
        submissionText: "This is a test submission for revision",
        proofFiles: [],
        proofLinks: [],
        screenshots: [],
        status: "revision_requested",
        submittedAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
        reviewedAt: new Date(Date.now() - 25 * 60 * 60 * 1000).toISOString(),
        reviewFeedback: "Test revision request for timeout testing",
        paymentAmount: 75.0,
        submissionNumber: 1,
        revisionCount: 1,
        createdAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
        updatedAt: new Date(Date.now() - 25 * 60 * 60 * 1000).toISOString(),
        revisionDeadline: new Date(Date.now() - 60 * 60 * 1000).toISOString(), // 1 hour ago (expired)
        worker: {
          id: "test-worker-2",
          firstName: "Test",
          lastName: "Worker2",
          username: "testworker2",
        },
        employer: {
          id: "test-employer-2",
          firstName: "Test",
          lastName: "Employer2",
          username: "testemployer2",
        },
      }

testProofs.push(expiredRejectionProof, expiredRevisionProof)

// Add to localStorage
      const existingProofs = JSON.parse(localStorage.getItem("marketplace-work-proofs") || "[]")
      const allProofs = [...existingProofs, ...testProofs]
      localStorage.setItem("marketplace-work-proofs", JSON.stringify(allProofs))

addLog(`✅ Created ${testProofs.length} test work proofs with expired deadlines`)

// Test 3: Test cron endpoint via secure API
      addLog("⏰ Testing cron job endpoint...")
      let cronEndpointPass = false
      let processedCount = 0

try {
        const response = await fetch("/api/test-cron", {
          method: "GET",
        })

const result = await response.json()
        processedCount = result.cronResponse?.processedCount || 0

if (response.ok && result.success) {
          addLog(`✅ Cron endpoint processed ${processedCount} expired deadlines`)
          cronEndpointPass = true
        } else {
          addLog(`❌ Cron endpoint failed: ${result.error || result.cronResponse?.details}`)
        }
      } catch (error) {
        addLog(`❌ Cron endpoint test failed: ${error}`)
      }

// Wait for processing
      await new Promise((resolve) => setTimeout(resolve, 2000))

// Test 4: Verify wallet transactions
      addLog("💰 Verifying wallet transactions...")
      let walletTransactionsPass = false

try {
        const transactions = JSON.parse(localStorage.getItem("wallet_transactions") || "[]")
        let refundCount = 0

for (const proof of testProofs) {
          const refundTransaction = transactions.find(
            (t: any) => t.referenceId === proof.id && t.type === "refund" && t.status === "completed",
          )

if (refundTransaction) {
            refundCount++
            addLog(`✅ Found refund transaction for proof ${proof.id}: $${refundTransaction.amount}`)
          } else {
            addLog(`❌ Missing refund transaction for proof ${proof.id}`)
          }
        }

walletTransactionsPass = refundCount === testProofs.length
        addLog(`📊 Refunds processed: ${refundCount}/${testProofs.length}`)
      } catch (error) {
        addLog(`❌ Wallet transaction verification failed: ${error}`)
      }

// Test 5: Verify status updates
      addLog("📋 Verifying work proof status updates...")
      let statusUpdatesPass = false

try {
        const currentProofs = JSON.parse(localStorage.getItem("marketplace-work-proofs") || "[]")
        let updatedCount = 0

for (const testProof of testProofs) {
          const currentProof = currentProofs.find((p: any) => p.id === testProof.id)

if (currentProof) {
            const expectedStatus = testProof.status === "rejected" ? "rejected_accepted" : "cancelled_by_worker"

if (currentProof.status === expectedStatus) {
              updatedCount++
              addLog(`✅ Proof ${testProof.id} status updated to: ${currentProof.status}`)
            } else {
              addLog(
                `❌ Proof ${testProof.id} status not updated. Expected: ${expectedStatus}, Got: ${currentProof.status}`,
              )
            }
          }
        }

statusUpdatesPass = updatedCount === testProofs.length
        addLog(`📊 Status updates: ${updatedCount}/${testProofs.length}`)
      } catch (error) {
        addLog(`❌ Status update verification failed: ${error}`)
      }

// Test 6: Cleanup
      addLog("🧹 Cleaning up test data...")
      let cleanupPass = false

try {
        // Remove test proofs
        const currentProofs = JSON.parse(localStorage.getItem("marketplace-work-proofs") || "[]")
        const testProofIds = testProofs.map((p) => p.id)
        const cleanedProofs = currentProofs.filter((p: any) => !testProofIds.includes(p.id))
        localStorage.setItem("marketplace-work-proofs", JSON.stringify(cleanedProofs))

// Remove test transactions
        const transactions = JSON.parse(localStorage.getItem("wallet_transactions") || "[]")
        const cleanedTransactions = transactions.filter((t: any) => !testProofIds.includes(t.referenceId))
        localStorage.setItem("wallet_transactions", JSON.stringify(cleanedTransactions))

addLog(`✅ Cleaned up ${testProofs.length} test work proofs and transactions`)
        cleanupPass = true
      } catch (error) {
        addLog(`❌ Cleanup failed: ${error}`)
      }

// Set final results
      const finalResults: TestResult = {
        adminSettings: adminSettingsPass,
        cronEndpoint: cronEndpointPass,
        walletTransactions: walletTransactionsPass,
        statusUpdates: statusUpdatesPass,
        cleanup: cleanupPass,
      }

setResults(finalResults)

const passedTests = Object.values(finalResults).filter(Boolean).length
      const totalTests = Object.keys(finalResults).length

if (passedTests === totalTests) {
        addLog("🎉 All tests passed! Refund system is working correctly.")
      } else {
        addLog(`⚠️ ${passedTests}/${totalTests} tests passed. Please check the refund system configuration.`)
      }
    } catch (error) {
      addLog(`❌ Test suite failed: ${error}`)
    } finally {
      setIsRunning(false)
    }
  }

const getStatusIcon = (status: boolean | null) => {
    if (status === null) return <Clock className="h-4 w-4 text-gray-400" />
    return status ? <CheckCircle className="h-4 w-4 text-green-600" /> : <XCircle className="h-4 w-4 text-red-600" />
  }

const getStatusBadge = (status: boolean | null) => {
    if (status === null) return <Badge variant="secondary">Pending</Badge>
    return status ? (
      <Badge variant="default" className="bg-green-600">
        Pass
      </Badge>
    ) : (
      <Badge variant="destructive">Fail</Badge>
    )
  }

return (
    <div className="container mx-auto p-6 max-w-4xl">
      <div className="mb-8">
        <h1 className="text-3xl font-bold mb-2">Refund System Test Suite</h1>
        <p className="text-gray-600">
          Comprehensive testing of the automatic refund processing system to ensure expired deadlines trigger proper
          refunds.
        </p>
      </div>

<div className="mb-6">
        <Button onClick={runTests} disabled={isRunning} size="lg" className="w-full sm:w-auto">
          {isRunning ? (
            <>
              <RefreshCw className="mr-2 h-4 w-4 animate-spin" />
              Running Tests...
            </>
          ) : (
            <>
              <Play className="mr-2 h-4 w-4" />
              Run Refund System Tests
            </>
          )}
        </Button>
      </div>

{results && (
        <Card className="mb-6">
          <CardHeader>
            <CardTitle>Test Results</CardTitle>
            <CardDescription>
              {Object.values(results).filter(Boolean).length}/{Object.keys(results).length} tests passed
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  {getStatusIcon(results.adminSettings)}
                  <span>Admin Settings API</span>
                </div>
                {getStatusBadge(results.adminSettings)}
              </div>

<div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  {getStatusIcon(results.cronEndpoint)}
                  <span>Cron Job Endpoint</span>
                </div>
                {getStatusBadge(results.cronEndpoint)}
              </div>

<div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  {getStatusIcon(results.walletTransactions)}
                  <span>Wallet Transactions</span>
                </div>
                {getStatusBadge(results.walletTransactions)}
              </div>

<div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  {getStatusIcon(results.statusUpdates)}
                  <span>Status Updates</span>
                </div>
                {getStatusBadge(results.statusUpdates)}
              </div>

<div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  {getStatusIcon(results.cleanup)}
                  <span>Data Cleanup</span>
                </div>
                {getStatusBadge(results.cleanup)}
              </div>
            </div>
          </CardContent>
        </Card>
      )}

<Card>
        <CardHeader>
          <CardTitle>Test Logs</CardTitle>
          <CardDescription>Detailed logs from the test execution</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="bg-gray-50 rounded-lg p-4 max-h-96 overflow-y-auto">
            {logs.length === 0 ? (
              <p className="text-gray-500 italic">No logs yet. Run the tests to see detailed output.</p>
            ) : (
              <div className="space-y-1 font-mono text-sm">
                {logs.map((log, index) => (
                  <div key={index} className="text-gray-800">
                    {log}
                  </div>
                ))}
              </div>
            )}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/api/test-cron/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"

export async function GET(request: NextRequest) {
  try {
    const cronSecret = process.env.CRON_SECRET || "test-secret"

console.log("[v0] Testing cron endpoint with secret:", cronSecret ? "Present" : "Missing")

const response = await fetch(`${request.nextUrl.origin}/api/cron/process-work-proof-timeouts`, {
      method: "POST",
      headers: {
        Authorization: `Bearer ${cronSecret}`,
        "Content-Type": "application/json",
      },
    })

const result = await response.json()

console.log("[v0] Cron endpoint response:", response.status, result)

return NextResponse.json({
      success: true,
      cronEndpointStatus: response.status,
      cronResponse: result,
      secretConfigured: !!cronSecret,
    })
  } catch (error) {
    console.error("[v0] Cron test error:", error)
    return NextResponse.json(
      {
        success: false,
        error: error instanceof Error ? error.message : "Unknown error",
      },
      { status: 500 },
    )
  }
}
[V0_FILE]png:file="public/service-placeholder.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/service-placeholder-J6ubL55sDTfbZAO5oIy7myPkiijdtl.png" isMerged="true"
[V0_FILE]typescript:file="lib/seller-profiles.ts" isQuickEdit="true" isMerged="true"
export interface SellerProfile {
  id: string
  username: string
  firstName: string
  lastName: string
  email: string
  bio: string
  location: string
  country: string
  languages: string[]
  timezone: string
  sellerType: "Individual" | "Business"
  isVerified: boolean
  isOnline: boolean
  lastSeen: string
  joinedAt: string

// Statistics
  completedOrders: number
  onTimeDeliveryRate: number
  averageResponseTime: string
  lastDelivery: string
  totalEarnings: number

// Professional Info
  sellerLevel: number
  sellerBadge: string
  skills: string[]
  certifications: string[]

// Contact & Availability
  availableForConsultation: boolean
  workingHours: {
    start: string
    end: string
    timezone: string
  }

// Profile customization
  profileImage?: string
  coverImage?: string
  portfolioItems: {
    id: string
    title: string
    description: string
    imageUrl: string
    tags: string[]
    createdAt: string
  }[]

// Reviews & Ratings
  rating: number
  totalReviews: number

createdAt: string
  updatedAt: string
}

class SellerProfileStorage {
  private storageKey = "seller_profiles"

getAll(): SellerProfile[] {
    try {
      const stored = localStorage.getItem(this.storageKey)
      return stored ? JSON.parse(stored) : []
    } catch (error) {
      console.error("Error loading seller profiles:", error)
      return []
    }
  }

getById(id: string): SellerProfile | null {
    const profiles = this.getAll()
    return profiles.find((profile) => profile.id === id) || null
  }

getByUsername(username: string): SellerProfile | null {
    const profiles = this.getAll()
    return profiles.find((profile) => profile.username === username) || null
  }

save(profile: SellerProfile): void {
    try {
      const profiles = this.getAll()
      const existingIndex = profiles.findIndex((p) => p.id === profile.id)

profile.updatedAt = new Date().toISOString()

if (existingIndex >= 0) {
        profiles[existingIndex] = profile
      } else {
        profiles.push(profile)
      }

localStorage.setItem(this.storageKey, JSON.stringify(profiles))
    } catch (error) {
      console.error("Error saving seller profile:", error)
    }
  }

createDefaultProfile(userId: string, userData: Partial<SellerProfile>): SellerProfile {
    const now = new Date().toISOString()

const defaultProfile: SellerProfile = {
      id: userId,
      username: userData.username || `user${userId.slice(0, 8)}`,
      firstName: userData.firstName || "Current",
      lastName: userData.lastName || "User",
      email: userData.email || "",
      bio:
        userData.bio ||
        "Professional service provider ready to help with your projects. Let's work together to bring your vision to life!",
      location: userData.location || "United States",
      country: userData.country || "US",
      languages: userData.languages || ["English", "Spanish"],
      timezone: userData.timezone || "America/New_York",
      sellerType: userData.sellerType || "Individual",
      isVerified: userData.isVerified || false,
      isOnline: true,
      lastSeen: now,
      joinedAt: userData.joinedAt || now,

// Statistics
      completedOrders: userData.completedOrders || 0,
      onTimeDeliveryRate: userData.onTimeDeliveryRate || 100,
      averageResponseTime: userData.averageResponseTime || "2 hours",
      lastDelivery: userData.lastDelivery || "about 6 hours",
      totalEarnings: userData.totalEarnings || 0,

// Professional Info
      sellerLevel: userData.sellerLevel || 1,
      sellerBadge: userData.sellerBadge || "New Seller",
      skills: userData.skills || [],
      certifications: userData.certifications || [],

// Contact & Availability
      availableForConsultation: userData.availableForConsultation || true,
      workingHours: userData.workingHours || {
        start: "09:00",
        end: "17:00",
        timezone: "America/New_York",
      },

portfolioItems: userData.portfolioItems || [],

// Reviews & Ratings
      rating: userData.rating || 5.0,
      totalReviews: userData.totalReviews || 0,

createdAt: now,
      updatedAt: now,
    }

this.save(defaultProfile)
    return defaultProfile
  }

updateStats(
    userId: string,
    stats: Partial<Pick<SellerProfile, "completedOrders" | "totalEarnings" | "lastDelivery" | "onTimeDeliveryRate">>,
  ) {
    const profile = this.getById(userId)
    if (profile) {
      Object.assign(profile, stats)
      this.save(profile)
    }
  }

updateOnlineStatus(userId: string, isOnline: boolean) {
    const profile = this.getById(userId)
    if (profile) {
      profile.isOnline = isOnline
      profile.lastSeen = new Date().toISOString()
      this.save(profile)
    }
  }
}

export const sellerProfileStorage = new SellerProfileStorage()

// Helper function to get current user's profile
export function getCurrentUserProfile(): SellerProfile {
  const currentUserId = "current-user" // This should match your user system
  let profile = sellerProfileStorage.getById(currentUserId)

if (!profile) {
    // Create default profile for current user
    profile = sellerProfileStorage.createDefaultProfile(currentUserId, {
      username: "currentuser",
      firstName: "Current",
      lastName: "User",
    })
  }

return profile
}

// Helper function to format local time
export function formatLocalTime(timezone: string): string {
  try {
    return new Intl.DateTimeFormat("en-US", {
      timeZone: timezone,
      hour: "2-digit",
      minute: "2-digit",
      hour12: true,
    }).format(new Date())
  } catch (error) {
    return new Date().toLocaleTimeString("en-US", {
      hour: "2-digit",
      minute: "2-digit",
      hour12: true,
    })
  }
}

// Helper function to get country flag emoji
export function getCountryFlag(countryCode: string): string {
  const flags: Record<string, string> = {
    US: "🇺🇸",
    UK: "🇬🇧",
    CA: "🇨🇦",
    AU: "🇦🇺",
    DE: "🇩🇪",
    FR: "🇫���",
    ES: "🇪🇸",
    IT: "🇮🇹",
    BR: "🇧🇷",
    IN: "🇮🇳",
    ID: "🇮🇩",
    PH: "🇵🇭",
    PK: "🇵🇰",
    BD: "🇧🇩",
    NG: "🇳🇬",
    EG: "🇪🇬",
    ZA: "🇿🇦",
    JP: "🇯🇵",
    KR: "🇰🇷",
    CN: "🇨🇳",
    RU: "🇷🇺",
    MX: "🇲🇽",
    AR: "🇦🇷",
    CL: "🇨🇱",
    CO: "🇨🇴",
  }
  return flags[countryCode] || "🌍"
}
[V0_FILE]typescriptreact:file="contexts/auth-context.tsx" isMerged="true"
"use client"

import type React from "react"
import { createContext, useContext, useEffect, useState, useMemo } from "react"
import type { AuthState } from "@/lib/auth"

interface AuthContextType extends AuthState {
  signIn: (email: string, password: string) => Promise<void>
  signUp: (data: {
    email: string
    password: string
    firstName: string
    lastName: string
    username: string
  }) => Promise<void>
  signOut: () => Promise<void>
  refreshUser: () => void
  signInWithOAuth: (provider: string) => Promise<void>
  handleOAuthCallback: (provider: string, code: string, state?: string) => Promise<void>
}

const AuthContext = createContext<AuthContextType | undefined>(undefined)

export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [state, setState] = useState<AuthState>({
    user: null,
    isLoading: true,
    isAuthenticated: false,
  })

useEffect(() => {
    const initializeAuth = async () => {
      try {
        // Lazy load auth functions to reduce initial bundle size
        const { getStoredUser, initializeDefaultUsers } = await import("@/lib/auth")

// Initialize default users asynchronously
        await new Promise((resolve) => {
          setTimeout(() => {
            initializeDefaultUsers()
            resolve(void 0)
          }, 0) // Defer to next tick
        })

const storedUser = getStoredUser()
        setState({
          user: storedUser,
          isLoading: false,
          isAuthenticated: !!storedUser,
        })
      } catch (error) {
        console.error("[v0] Failed to initialize auth:", error)
        setState({
          user: null,
          isLoading: false,
          isAuthenticated: false,
        })
      }
    }

initializeAuth()
  }, [])

const signIn = async (email: string, password: string) => {
    setState((prev) => ({ ...prev, isLoading: true }))

try {
      const { signIn: authSignIn, storeUser } = await import("@/lib/auth")
      const user = await authSignIn(email, password)

storeUser(user)
      setState({
        user,
        isLoading: false,
        isAuthenticated: true,
      })
    } catch (error) {
      setState((prev) => ({ ...prev, isLoading: false }))
      throw error
    }
  }

const signUp = async (data: {
    email: string
    password: string
    firstName: string
    lastName: string
    username: string
  }) => {
    setState((prev) => ({ ...prev, isLoading: true }))

try {
      const { signUp: authSignUp, storeUser } = await import("@/lib/auth")
      const user = await authSignUp(data)

const signInWithOAuth = async (provider: string) => {
    setState((prev) => ({ ...prev, isLoading: true }))

try {
      const { initiateOAuthFlow } = await import("@/lib/oauth")
      await initiateOAuthFlow(provider)
      // OAuth flow will redirect to provider, so we don't need to update state here
    } catch (error) {
      setState((prev) => ({ ...prev, isLoading: false }))
      throw error
    }
  }

const handleOAuthCallback = async (provider: string, code: string, state?: string) => {
    setState((prev) => ({ ...prev, isLoading: true }))

try {
      const { handleOAuthCallback: handleCallback, storeUser } = await import("@/lib/oauth")
      const user = await handleCallback(provider, code, state)

const signOut = async () => {
    setState((prev) => ({ ...prev, isLoading: true }))

try {
      const { signOut: authSignOut, clearStoredUser } = await import("@/lib/auth")
      await authSignOut()

clearStoredUser()
      setState({
        user: null,
        isLoading: false,
        isAuthenticated: false,
      })
    } catch (error) {
      setState((prev) => ({ ...prev, isLoading: false }))
      throw error
    }
  }

const refreshUser = () => {
    import("@/lib/auth").then(({ getStoredUser }) => {
      const storedUser = getStoredUser()
      setState({
        user: storedUser,
        isLoading: false,
        isAuthenticated: !!storedUser,
      })
    })
  }

const contextValue = useMemo(
    () => ({
      ...state,
      signIn,
      signUp,
      signOut,
      refreshUser,
      signInWithOAuth,
      handleOAuthCallback,
    }),
    [state],
  )

return <AuthContext.Provider value={contextValue}>{children}</AuthContext.Provider>
}

export function useAuth() {
  const context = useContext(AuthContext)
  if (context === undefined) {
    throw new Error("useAuth must be used within an AuthProvider")
  }
  return context
}
[V0_FILE]typescript:file="app/api/admin/revision-settings/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { getUser } from "@/lib/auth"

export async function GET() {
  try {
    const defaultSettings = {
      maxRevisionRequests: 2,
      revisionRequestTimeoutValue: 24,
      revisionRequestTimeoutUnit: "hours",
      rejectionResponseTimeoutValue: 24,
      rejectionResponseTimeoutUnit: "hours",
      enableAutomaticRefunds: true,
      refundOnRevisionTimeout: true,
      refundOnRejectionTimeout: true,
      enableRevisionWarnings: true,
      revisionPenaltyEnabled: false,
      revisionPenaltyAmount: 0,
    }

try {
      if (typeof window !== "undefined") {
        const stored = localStorage.getItem("admin_revision_settings")
        if (stored) {
          const storedSettings = JSON.parse(stored)
          const mergedSettings = {
            ...defaultSettings,
            ...storedSettings,
          }
          console.log("[v0] Revision settings API: Successfully loaded from localStorage")
          return NextResponse.json(mergedSettings)
        }
      }

console.log("[v0] Revision settings not found in localStorage, using defaults")
      return NextResponse.json(defaultSettings)
    } catch (error) {
      console.log("[v0] Error loading revision settings from localStorage, using defaults:", error)
      return NextResponse.json(defaultSettings)
    }
  } catch (error) {
    console.error("Error in revision settings GET:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

const settings = await request.json()

console.log("[v0] API: Saving revision settings for user:", user.id, settings)

// Validate settings structure
    if (!settings || typeof settings !== "object") {
      return NextResponse.json({ error: "Invalid settings data" }, { status: 400 })
    }

const settingsWithTimestamp = {
      ...settings,
      updated_at: new Date().toISOString(),
    }

try {
      if (typeof window !== "undefined") {
        localStorage.setItem("admin_revision_settings", JSON.stringify(settingsWithTimestamp))
      }
      console.log("[v0] API: Successfully saved revision settings to localStorage")
      return NextResponse.json({ success: true })
    } catch (error) {
      console.error("[v0] Error saving revision settings to localStorage:", error)
      return NextResponse.json({ error: "Failed to save settings" }, { status: 500 })
    }
  } catch (error) {
    console.error("Error saving revision settings:", error)
    return NextResponse.json({ error: "Failed to save settings" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/admin/support-pricing/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { getUser } from "@/lib/auth"

const defaultPricing = [
      {
        id: "1",
        support_type: "free",
        price: 0.0,
        response_time_hours: 48,
        description: "Standard support with 24-48 hour response time",
        is_active: true,
      },
      {
        id: "2",
        support_type: "priority",
        price: 0.5,
        response_time_hours: 2,
        description: "Priority support with 1-2 hour response time",
        is_active: true,
      },
      {
        id: "3",
        support_type: "urgent",
        price: 1.0,
        response_time_hours: 1,
        description: "Urgent support with response within 1 hour",
        is_active: true,
      },
    ]

try {
      if (typeof window !== "undefined") {
        const stored = localStorage.getItem("admin_support_pricing")
        if (stored) {
          const supportPricing = JSON.parse(stored)
          console.log("[v0] Support pricing loaded from localStorage")
          return NextResponse.json({ supportPricing })
        }
      }

console.log("[v0] Support pricing not found in localStorage, returning default pricing")
      return NextResponse.json({ supportPricing: defaultPricing })
    } catch (error) {
      console.error("Error loading support pricing from localStorage:", error)
      return NextResponse.json({ supportPricing: defaultPricing })
    }
  } catch (error) {
    console.error("Error in support pricing GET:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

export async function PUT(request: NextRequest) {
  try {
    const user = await getUser()
    if (!user || user.userType !== "admin") {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const { supportType, settings } = await request.json()

if (!supportType || !settings) {
      return NextResponse.json({ error: "Missing required fields" }, { status: 400 })
    }

try {
      let supportPricing = []

if (typeof window !== "undefined") {
        const stored = localStorage.getItem("admin_support_pricing")
        if (stored) {
          supportPricing = JSON.parse(stored)
        }
      }

// Find and update the specific support type
      const existingIndex = supportPricing.findIndex((item: any) => item.support_type === supportType)

const updatedItem = {
        id: existingIndex >= 0 ? supportPricing[existingIndex].id : Date.now().toString(),
        support_type: supportType,
        price: settings.price || 0,
        response_time_hours: settings.responseTimeHours || 24,
        description: settings.description || "",
        is_active: settings.isActive || false,
        updated_at: new Date().toISOString(),
      }

if (existingIndex >= 0) {
        supportPricing[existingIndex] = updatedItem
      } else {
        supportPricing.push(updatedItem)
      }

if (typeof window !== "undefined") {
        localStorage.setItem("admin_support_pricing", JSON.stringify(supportPricing))
      }

console.log("[v0] Support pricing updated in localStorage")
      return NextResponse.json({ success: true, data: updatedItem })
    } catch (error) {
      console.error("Error updating support pricing in localStorage:", error)
      return NextResponse.json({ error: "Failed to update support pricing" }, { status: 500 })
    }
  } catch (error) {
    console.error("Error in support pricing PUT:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="lib/marketplace.ts" isQuickEdit="true" isMerged="true"
import { serviceStorage, orderStorage, type StorageService, type StorageOrder } from "./local-storage"

// Re-export types for compatibility
export type MarketplaceService = StorageService
export type Order = StorageOrder

// Updated API functions to use local storage
export async function getServices(filters?: {
  category?: string
  priceMin?: number
  priceMax?: number
  deliveryTime?: number
  search?: string
}): Promise<MarketplaceService[]> {
  // Simulate API delay
  await new Promise((resolve) => setTimeout(resolve, 300))

return serviceStorage.search(filters || {})
}

export async function getServiceById(id: string): Promise<MarketplaceService | null> {
  await new Promise((resolve) => setTimeout(resolve, 200))

console.log("[v0] Looking for service with ID:", id)

// First try direct ID lookup
  let service = serviceStorage.getById(id)

if (!service) {
    console.log("[v0] Direct ID lookup failed, trying alternative lookups...")

// Try to find by slug or title match
    const allServices = serviceStorage.getAll()
    console.log("[v0] Total services available:", allServices.length)
    console.log(
      "[v0] Available service IDs:",
      allServices.map((s) => s.id),
    )

// Try to find by slug (convert title to slug format)
    service = allServices.find((s) => {
      const titleSlug = s.title
        .toLowerCase()
        .replace(/[^a-z0-9]+/g, "-")
        .replace(/^-|-$/g, "")
      const categorySlug = s.category.slug || s.category.name.toLowerCase().replace(/[^a-z0-9]+/g, "-")
      const subcategorySlug = s.subcategory?.slug || s.subcategory?.name.toLowerCase().replace(/[^a-z0-9]+/g, "-")

return (
        titleSlug === id ||
        `${categorySlug}-${titleSlug}` === id ||
        `${subcategorySlug}-${titleSlug}` === id ||
        s.id.includes(id) ||
        id.includes(s.id)
      )
    })

if (service) {
      console.log("[v0] Found service by alternative lookup:", service.id, service.title)
    } else {
      console.log("[v0] No service found for ID:", id)
    }
  } else {
    console.log("[v0] Found service by direct ID lookup:", service.id, service.title)
  }

return service
}

export async function createService(
  data: Omit<MarketplaceService, "id" | "createdAt" | "updatedAt">,
): Promise<MarketplaceService> {
  console.log("[v0] Creating service with data:", data)
  await new Promise((resolve) => setTimeout(resolve, 500))

const serviceData = {
    ...data,
    // If serviceTiers exist, use them; otherwise create a default tier from basic pricing
    serviceTiers: data.serviceTiers || [
      {
        id: "basic",
        name: "Basic",
        price: data.price,
        deliveryTime: data.deliveryTime.value,
        revisions: data.revisionsIncluded === -1 ? "unlimited" : data.revisionsIncluded,
        features: ["Standard delivery", "Professional quality"],
        description: data.shortDescription,
      },
    ],
    addOns: data.addOns || [],
  }

console.log("[v0] Service data with tiers:", serviceData)
  return serviceStorage.create(serviceData)
}

export async function updateService(
  id: string,
  updates: Partial<MarketplaceService>,
): Promise<MarketplaceService | null> {
  await new Promise((resolve) => setTimeout(resolve, 300))
  return serviceStorage.update(id, updates)
}

export async function deleteService(id: string): Promise<boolean> {
  await new Promise((resolve) => setTimeout(resolve, 300))
  return serviceStorage.delete(id)
}

export async function createOrder(data: {
  serviceId: string
  requirements: string
}): Promise<Order> {
  await new Promise((resolve) => setTimeout(resolve, 500))

const service = serviceStorage.getById(data.serviceId)
  if (!service) throw new Error("Service not found")

const newOrder: Omit<Order, "id" | "createdAt"> = {
    marketplaceItemId: data.serviceId,
    buyerId: "current-user",
    sellerId: service.sellerId,
    amount: service.price,
    status: "pending",
    requirementsProvided: data.requirements,
    deliveryDate: new Date(Date.now() + service.deliveryTime * 24 * 60 * 60 * 1000).toISOString().split("T")[0],
    service: {
      title: service.title,
      deliveryTime: service.deliveryTime,
    },
    buyer: {
      firstName: "Current",
      lastName: "User",
      username: "currentuser",
    },
    seller: service.seller,
  }

return orderStorage.create(newOrder)
}

export async function getUserOrders(userId: string): Promise<Order[]> {
  await new Promise((resolve) => setTimeout(resolve, 300))
  return orderStorage.getUserOrders(userId)
}

// Additional utility functions
export async function incrementServiceViews(serviceId: string): Promise<void> {
  const service = serviceStorage.getById(serviceId)
  if (service) {
    serviceStorage.update(serviceId, { viewsCount: service.viewsCount + 1 })
  }
}

export async function getPopularServices(limit = 6): Promise<MarketplaceService[]> {
  const services = serviceStorage.getAll()
  return services.sort((a, b) => b.totalOrders - a.totalOrders).slice(0, limit)
}

export async function getNewServices(limit = 6): Promise<MarketplaceService[]> {
  const services = serviceStorage.getAll()
  return services.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()).slice(0, limit)
}
[V0_FILE]typescript:file="lib/marketplace-reviews.ts" isQuickEdit="true" isMerged="true"
// Modern review system for marketplace - only buyers with completed orders can review
export interface MarketplaceReview {
  id: string
  serviceId: string
  orderId: string // Links review to specific completed order
  buyerId: string
  sellerId: string
  rating: number // Overall rating 1-5
  comment?: string
  // Rating breakdown categories
  sellerCommunication: number // 1-5
  qualityOfDelivery: number // 1-5
  valueOfDelivery: number // 1-5
  // Purchase details
  purchaseAmount: number
  purchaseDate: string
  deliveryTime: string
  createdAt: string
  updatedAt: string
  isVisible: boolean
  // User info
  buyer: {
    id: string
    firstName: string
    lastName: string
    username: string
    avatar?: string
    country?: string
  }
  // Order details for display
  order: {
    id: string
    tierName: string
    totalAmount: number
    completedAt: string
  }
}

export interface ReviewStats {
  totalReviews: number
  averageRating: number
  ratingBreakdown: {
    5: number
    4: number
    3: number
    2: number
    1: number
  }
  categoryAverages: {
    sellerCommunication: number
    qualityOfDelivery: number
    valueOfDelivery: number
  }
}

const MARKETPLACE_REVIEWS_KEY = "marketplace_reviews_v2"

// Get all reviews from localStorage
const getStoredReviews = (): MarketplaceReview[] => {
  if (typeof window === "undefined") return []
  try {
    const stored = localStorage.getItem(MARKETPLACE_REVIEWS_KEY)
    return stored ? JSON.parse(stored) : []
  } catch {
    return []
  }
}

// Save reviews to localStorage
const saveReviews = (reviews: MarketplaceReview[]): void => {
  if (typeof window === "undefined") return
  try {
    localStorage.setItem(MARKETPLACE_REVIEWS_KEY, JSON.stringify(reviews))
  } catch (error) {
    console.error("Failed to save marketplace reviews:", error)
  }
}

// Check if user can review (has completed order for this service)
export async function canUserReview(
  buyerId: string,
  serviceId: string,
): Promise<{
  canReview: boolean
  completedOrders: any[]
  existingReviews: MarketplaceReview[]
}> {
  const { orderStorage } = await import("./local-storage")

// Get user's completed orders for this service
  const allOrders = orderStorage.getAll()
  const completedOrders = allOrders.filter(
    (order) => order.buyerId === buyerId && order.marketplaceItemId === serviceId && order.status === "completed",
  )

// Get existing reviews by this user for this service
  const reviews = getStoredReviews()
  const existingReviews = reviews.filter((review) => review.buyerId === buyerId && review.serviceId === serviceId)

// User can review if they have more completed orders than reviews
  const canReview = completedOrders.length > existingReviews.length

return { canReview, completedOrders, existingReviews }
}

// Submit a new review (only if user has completed order)
export async function submitMarketplaceReview(data: {
  serviceId: string
  orderId: string
  buyerId: string
  sellerId: string
  rating: number
  sellerCommunication: number
  qualityOfDelivery: number
  valueOfDelivery: number
  comment?: string
}): Promise<MarketplaceReview> {
  await new Promise((resolve) => setTimeout(resolve, 300))

// Verify user can review
  const { canReview, completedOrders } = await canUserReview(data.buyerId, data.serviceId)
  if (!canReview) {
    throw new Error("You can only review services you have purchased and completed")
  }

// Find the specific order
  const order = completedOrders.find((o) => o.id === data.orderId)
  if (!order) {
    throw new Error("Order not found or not completed")
  }

// Get service details
  const { getServiceById } = await import("./marketplace")
  const service = await getServiceById(data.serviceId)
  if (!service) {
    throw new Error("Service not found")
  }

const newReview: MarketplaceReview = {
    id: `review_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
    serviceId: data.serviceId,
    orderId: data.orderId,
    buyerId: data.buyerId,
    sellerId: data.sellerId,
    rating: Math.max(1, Math.min(5, Math.round(data.rating))),
    sellerCommunication: Math.max(1, Math.min(5, Math.round(data.sellerCommunication))),
    qualityOfDelivery: Math.max(1, Math.min(5, Math.round(data.qualityOfDelivery))),
    valueOfDelivery: Math.max(1, Math.min(5, Math.round(data.valueOfDelivery))),
    comment: data.comment?.trim() || undefined,
    purchaseAmount: order.amount,
    purchaseDate: order.createdAt,
    deliveryTime: order.deliveredAt
      ? Math.ceil(
          (new Date(order.deliveredAt).getTime() - new Date(order.createdAt).getTime()) / (1000 * 60 * 60 * 24),
        ) + " days"
      : "N/A",
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
    isVisible: true,
    buyer: {
      id: data.buyerId,
      firstName: order.buyer.firstName,
      lastName: order.buyer.lastName,
      username: order.buyer.username,
      country: "US", // Default, could be enhanced
    },
    order: {
      id: order.id,
      tierName: "Standard", // Could be enhanced from order data
      totalAmount: order.amount,
      completedAt: order.completedAt || order.deliveredAt || new Date().toISOString(),
    },
  }

const reviews = getStoredReviews()
  reviews.push(newReview)
  saveReviews(reviews)

console.log("[v0] ✅ Marketplace review submitted:", newReview.id)
  return newReview
}

// Get reviews for a service with search and sorting
export async function getServiceReviews(
  serviceId: string,
  options: {
    search?: string
    sortBy?: "most_recent" | "most_relevant" | "highest_rating" | "lowest_rating"
    limit?: number
    offset?: number
  } = {},
): Promise<MarketplaceReview[]> {
  await new Promise((resolve) => setTimeout(resolve, 200))

let reviews = getStoredReviews().filter((review) => review.serviceId === serviceId && review.isVisible)

// Apply search filter
  if (options.search) {
    const searchTerm = options.search.toLowerCase()
    reviews = reviews.filter(
      (review) =>
        review.comment?.toLowerCase().includes(searchTerm) ||
        review.buyer.firstName.toLowerCase().includes(searchTerm) ||
        review.buyer.lastName.toLowerCase().includes(searchTerm) ||
        review.buyer.username.toLowerCase().includes(searchTerm),
    )
  }

// Apply sorting
  switch (options.sortBy) {
    case "most_recent":
      reviews.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
      break
    case "most_relevant":
      // Sort by rating and recency combined
      reviews.sort((a, b) => {
        const aScore = a.rating * 0.7 + (new Date(a.createdAt).getTime() / 1000000000) * 0.3
        const bScore = b.rating * 0.7 + (new Date(b.createdAt).getTime() / 1000000000) * 0.3
        return bScore - aScore
      })
      break
    case "highest_rating":
      reviews.sort((a, b) => b.rating - a.rating)
      break
    case "lowest_rating":
      reviews.sort((a, b) => a.rating - b.rating)
      break
    default:
      reviews.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
  }

// Apply pagination
  if (options.offset) {
    reviews = reviews.slice(options.offset)
  }
  if (options.limit) {
    reviews = reviews.slice(0, options.limit)
  }

return reviews
}

// Calculate review statistics for a service
export async function getServiceReviewStats(serviceId: string): Promise<ReviewStats> {
  await new Promise((resolve) => setTimeout(resolve, 100))

const reviews = getStoredReviews().filter((review) => review.serviceId === serviceId && review.isVisible)

if (reviews.length === 0) {
    return {
      totalReviews: 0,
      averageRating: 0,
      ratingBreakdown: { 5: 0, 4: 0, 3: 0, 2: 0, 1: 0 },
      categoryAverages: {
        sellerCommunication: 0,
        qualityOfDelivery: 0,
        valueOfDelivery: 0,
      },
    }
  }

// Calculate rating breakdown
  const ratingBreakdown = { 5: 0, 4: 0, 3: 0, 2: 0, 1: 0 }
  reviews.forEach((review) => {
    ratingBreakdown[review.rating as keyof typeof ratingBreakdown]++
  })

// Calculate averages
  const totalRating = reviews.reduce((sum, review) => sum + review.rating, 0)
  const totalCommunication = reviews.reduce((sum, review) => sum + review.sellerCommunication, 0)
  const totalQuality = reviews.reduce((sum, review) => sum + review.qualityOfDelivery, 0)
  const totalValue = reviews.reduce((sum, review) => sum + review.valueOfDelivery, 0)

return {
    totalReviews: reviews.length,
    averageRating: Math.round((totalRating / reviews.length) * 10) / 10,
    ratingBreakdown,
    categoryAverages: {
      sellerCommunication: Math.round((totalCommunication / reviews.length) * 10) / 10,
      qualityOfDelivery: Math.round((totalQuality / reviews.length) * 10) / 10,
      valueOfDelivery: Math.round((totalValue / reviews.length) * 10) / 10,
    },
  }
}

// Get user's purchase history for a service (for review eligibility)
export async function getUserPurchaseHistory(
  buyerId: string,
  serviceId: string,
): Promise<{
  completedOrders: any[]
  availableForReview: any[]
  reviewedOrders: string[]
}> {
  const { orderStorage } = await import("./local-storage")

const allOrders = orderStorage.getAll()
  const completedOrders = allOrders.filter(
    (order) => order.buyerId === buyerId && order.marketplaceItemId === serviceId && order.status === "completed",
  )

const reviews = getStoredReviews()
  const reviewedOrders = reviews
    .filter((review) => review.buyerId === buyerId && review.serviceId === serviceId)
    .map((review) => review.orderId)

const availableForReview = completedOrders.filter((order) => !reviewedOrders.includes(order.id))

return {
    completedOrders,
    availableForReview,
    reviewedOrders,
  }
}

// Initialize with some sample reviews for testing
export async function initializeSampleReviews(): Promise<void> {
  if (typeof window === "undefined") return

const existing = getStoredReviews()
  if (existing.length > 0) return // Already has data

const sampleReviews: MarketplaceReview[] = [
    {
      id: "review_sample_1",
      serviceId: "2",
      orderId: "order_sample_1",
      buyerId: "buyer_1",
      sellerId: "seller2",
      rating: 5,
      sellerCommunication: 5,
      qualityOfDelivery: 5,
      valueOfDelivery: 5,
      comment:
        "Outstanding work! Emma delivered exactly what I needed and was very responsive throughout the process. The logo design exceeded my expectations and really captures our brand identity perfectly.",
      purchaseAmount: 150,
      purchaseDate: "2024-01-15T10:00:00Z",
      deliveryTime: "2 days",
      createdAt: "2024-01-18T14:30:00Z",
      updatedAt: "2024-01-18T14:30:00Z",
      isVisible: true,
      buyer: {
        id: "buyer_1",
        firstName: "Michael",
        lastName: "Johnson",
        username: "mjohnson_biz",
        country: "US",
      },
      order: {
        id: "order_sample_1",
        tierName: "Standard",
        totalAmount: 150,
        completedAt: "2024-01-18T12:00:00Z",
      },
    },
    {
      id: "review_sample_2",
      serviceId: "2",
      orderId: "order_sample_2",
      buyerId: "buyer_2",
      sellerId: "seller2",
      rating: 5,
      sellerCommunication: 5,
      qualityOfDelivery: 5,
      valueOfDelivery: 4,
      comment:
        "Great experience overall. The communication was excellent and the final product was very professional. Minor revisions were handled quickly.",
      purchaseAmount: 250,
      purchaseDate: "2024-01-10T08:00:00Z",
      deliveryTime: "3 days",
      createdAt: "2024-01-14T16:45:00Z",
      updatedAt: "2024-01-14T16:45:00Z",
      isVisible: true,
      buyer: {
        id: "buyer_2",
        firstName: "Sarah",
        lastName: "Chen",
        username: "sarahc_startup",
        country: "CA",
      },
      order: {
        id: "order_sample_2",
        tierName: "Premium",
        totalAmount: 250,
        completedAt: "2024-01-13T15:30:00Z",
      },
    },
    {
      id: "review_sample_3",
      serviceId: "2",
      orderId: "order_sample_3",
      buyerId: "buyer_3",
      sellerId: "seller2",
      rating: 4,
      sellerCommunication: 4,
      qualityOfDelivery: 5,
      valueOfDelivery: 4,
      comment:
        "Great work overall. The design was creative and met our requirements. Communication could have been a bit more frequent, but the end result was worth it.",
      purchaseAmount: 100,
      purchaseDate: "2024-01-05T12:00:00Z",
      deliveryTime: "4 days",
      createdAt: "2024-01-10T09:20:00Z",
      updatedAt: "2024-01-10T09:20:00Z",
      isVisible: true,
      buyer: {
        id: "buyer_3",
        firstName: "David",
        lastName: "Rodriguez",
        username: "drodriguez_tech",
        country: "MX",
      },
      order: {
        id: "order_sample_3",
        tierName: "Basic",
        totalAmount: 100,
        completedAt: "2024-01-09T18:00:00Z",
      },
    },
    {
      id: "review_sample_4",
      serviceId: "2",
      orderId: "order_sample_4",
      buyerId: "buyer_4",
      sellerId: "seller2",
      rating: 5,
      sellerCommunication: 5,
      qualityOfDelivery: 5,
      valueOfDelivery: 5,
      comment:
        "Absolutely fantastic! This is my third project with this seller and they never disappoint. Fast delivery, excellent communication, and top-quality work every time.",
      purchaseAmount: 200,
      purchaseDate: "2024-01-20T14:00:00Z",
      deliveryTime: "1 day",
      createdAt: "2024-01-22T11:15:00Z",
      updatedAt: "2024-01-22T11:15:00Z",
      isVisible: true,
      buyer: {
        id: "buyer_4",
        firstName: "Lisa",
        lastName: "Thompson",
        username: "lisa_creative",
        country: "AU",
      },
      order: {
        id: "order_sample_4",
        tierName: "Standard",
        totalAmount: 200,
        completedAt: "2024-01-21T16:30:00Z",
      },
    },
    {
      id: "review_sample_5",
      serviceId: "2",
      orderId: "order_sample_5",
      buyerId: "buyer_5",
      sellerId: "seller2",
      rating: 4,
      sellerCommunication: 4,
      qualityOfDelivery: 4,
      valueOfDelivery: 5,
      comment:
        "Good value for money. The work was completed as requested and the seller was helpful with revisions. Would work with them again.",
      purchaseAmount: 75,
      purchaseDate: "2024-01-25T09:00:00Z",
      deliveryTime: "2 days",
      createdAt: "2024-01-28T13:45:00Z",
      updatedAt: "2024-01-28T13:45:00Z",
      isVisible: true,
      buyer: {
        id: "buyer_5",
        firstName: "James",
        lastName: "Wilson",
        username: "jwilson_biz",
        country: "UK",
      },
      order: {
        id: "order_sample_5",
        tierName: "Basic",
        totalAmount: 75,
        completedAt: "2024-01-27T15:20:00Z",
      },
    },
  ]

saveReviews(sampleReviews)
  console.log("[v0] ✅ Sample marketplace reviews initialized")
}

// Get seller's total review stats across all services
export async function getSellerReviewStats(sellerId: string): Promise<ReviewStats & { totalProjects: number }> {
  await new Promise((resolve) => setTimeout(resolve, 100))

const reviews = getStoredReviews().filter((review) => review.sellerId === sellerId && review.isVisible)

// Calculate rating breakdown
  const ratingBreakdown = { 5: 0, 4: 0, 3: 0, 2: 0, 1: 0 }
  reviews.forEach((review) => {
    ratingBreakdown[review.rating as keyof typeof ratingBreakdown]++
  })

// Count unique services (projects)
  const uniqueServices = new Set(reviews.map((review) => review.serviceId))

// Get seller's reviews across all services
export async function getSellerReviews(
  sellerId: string,
  options: {
    search?: string
    sortBy?: "most_recent" | "most_relevant" | "highest_rating" | "lowest_rating"
    limit?: number
    offset?: number
  } = {},
): Promise<MarketplaceReview[]> {
  await new Promise((resolve) => setTimeout(resolve, 200))

let reviews = getStoredReviews().filter((review) => review.sellerId === sellerId && review.isVisible)

// Apply sorting
  switch (options.sortBy) {
    case "most_recent":
      reviews.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
      break
    case "most_relevant":
      reviews.sort((a, b) => {
        const aScore = a.rating * 0.7 + (new Date(a.createdAt).getTime() / 1000000000) * 0.3
        const bScore = b.rating * 0.7 + (new Date(b.createdAt).getTime() / 1000000000) * 0.3
        return bScore - aScore
      })
      break
    case "highest_rating":
      reviews.sort((a, b) => b.rating - a.rating)
      break
    case "lowest_rating":
      reviews.sort((a, b) => a.rating - b.rating)
      break
    default:
      reviews.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
  }

// Apply pagination
  if (options.offset) {
    reviews = reviews.slice(options.offset)
  }
  if (options.limit) {
    reviews = reviews.slice(0, options.limit)
  }

return reviews
}
[V0_FILE]typescriptreact:file="components/marketplace/modern-review-system.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "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 } from "@/components/ui/avatar"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Separator } from "@/components/ui/separator"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Star, Search, Calendar, DollarSign, Clock, MessageSquare, AlertCircle } from "lucide-react"
import {
  getServiceReviews,
  getServiceReviewStats,
  getSellerReviews,
  getSellerReviewStats,
  submitMarketplaceReview,
  getUserPurchaseHistory,
  initializeSampleReviews,
  type MarketplaceReview,
  type ReviewStats,
} from "@/lib/marketplace-reviews"
import { formatDistanceToNow } from "date-fns"

interface ModernReviewSystemProps {
  serviceId: string
  sellerId: string
  currentUserId?: string
}

export function ModernReviewSystem({ serviceId, sellerId, currentUserId = "current-user" }: ModernReviewSystemProps) {
  const [reviews, setReviews] = useState<MarketplaceReview[]>([])
  const [allSellerReviews, setAllSellerReviews] = useState<MarketplaceReview[]>([])
  const [reviewStats, setReviewStats] = useState<ReviewStats | null>(null)
  const [sellerStats, setSellerStats] = useState<(ReviewStats & { totalProjects: number }) | null>(null)
  const [loading, setLoading] = useState(true)
  const [searchTerm, setSearchTerm] = useState("")
  const [sortBy, setSortBy] = useState<"most_recent" | "most_relevant" | "highest_rating" | "lowest_rating">(
    "most_recent",
  )
  const [activeTab, setActiveTab] = useState("this-project")
  const [showReviewForm, setShowReviewForm] = useState(false)
  const [canReview, setCanReview] = useState(false)
  const [availableOrders, setAvailableOrders] = useState<any[]>([])
  const [selectedOrderId, setSelectedOrderId] = useState("")

const [displayedReviewsCount, setDisplayedReviewsCount] = useState(5)
  const [displayedSellerReviewsCount, setDisplayedSellerReviewsCount] = useState(5)
  const REVIEWS_PER_PAGE = 5

// Review form state
  const [rating, setRating] = useState(5)
  const [sellerCommunication, setSellerCommunication] = useState(5)
  const [qualityOfDelivery, setQualityOfDelivery] = useState(5)
  const [valueOfDelivery, setValueOfDelivery] = useState(5)
  const [comment, setComment] = useState("")
  const [submitting, setSubmitting] = useState(false)

useEffect(() => {
    initializeSampleReviews()
    loadReviews()
    checkReviewEligibility()
    setDisplayedReviewsCount(5)
    setDisplayedSellerReviewsCount(5)
  }, [serviceId, searchTerm, sortBy, activeTab])

const loadReviews = async () => {
    try {
      const [serviceReviewsData, serviceStatsData, sellerReviewsData, sellerStatsData] = await Promise.all([
        getServiceReviews(serviceId, { search: searchTerm, sortBy, limit: 50 }),
        getServiceReviewStats(serviceId),
        getSellerReviews(sellerId, { search: searchTerm, sortBy, limit: 50 }),
        getSellerReviewStats(sellerId),
      ])

setReviews(serviceReviewsData)
      setAllSellerReviews(sellerReviewsData)
      setReviewStats(serviceStatsData)
      setSellerStats(sellerStatsData)
    } catch (error) {
      console.error("Failed to load reviews:", error)
    } finally {
      setLoading(false)
    }
  }

const checkReviewEligibility = async () => {
    try {
      const { canReview: eligible, availableForReview } = await getUserPurchaseHistory(currentUserId, serviceId)
      setCanReview(availableForReview.length > 0)
      setAvailableOrders(availableForReview)
      if (availableForReview.length > 0) {
        setSelectedOrderId(availableForReview[0].id)
      }
    } catch (error) {
      console.error("Failed to check review eligibility:", error)
    }
  }

const handleSubmitReview = async () => {
    if (!selectedOrderId) return

setSubmitting(true)
    try {
      await submitMarketplaceReview({
        serviceId,
        orderId: selectedOrderId,
        buyerId: currentUserId,
        sellerId,
        rating,
        sellerCommunication,
        qualityOfDelivery,
        valueOfDelivery,
        comment: comment.trim() || undefined,
      })

setShowReviewForm(false)
      setComment("")
      setRating(5)
      setSellerCommunication(5)
      setQualityOfDelivery(5)
      setValueOfDelivery(5)

// Reload reviews and eligibility
      await loadReviews()
      await checkReviewEligibility()
    } catch (error) {
      console.error("Failed to submit review:", error)
      alert("Failed to submit review. Please try again.")
    } finally {
      setSubmitting(false)
    }
  }

const StarRating = ({
    value,
    onChange,
    readonly = false,
  }: { value: number; onChange?: (value: number) => void; readonly?: boolean }) => (
    <div className="flex items-center space-x-1">
      {[1, 2, 3, 4, 5].map((star) => (
        <button
          key={star}
          type="button"
          disabled={readonly}
          onClick={() => !readonly && onChange?.(star)}
          className={`${readonly ? "cursor-default" : "cursor-pointer hover:scale-110"} transition-transform`}
        >
          <Star className={`h-4 w-4 ${star <= value ? "text-yellow-400 fill-current" : "text-gray-300"}`} />
        </button>
      ))}
    </div>
  )

if (loading) {
    return (
      <Card>
        <CardContent className="p-6">
          <div className="animate-pulse space-y-6">
            <div className="flex items-center space-x-4">
              <div className="h-8 bg-gray-200 rounded w-32"></div>
              <div className="h-6 bg-gray-200 rounded w-24"></div>
              <div className="h-6 bg-gray-200 rounded w-20"></div>
            </div>
            <div className="grid md:grid-cols-2 gap-6">
              <div className="space-y-3">
                {[1, 2, 3, 4, 5].map((i) => (
                  <div key={i} className="flex items-center space-x-3">
                    <div className="h-4 bg-gray-200 rounded w-16"></div>
                    <div className="flex-1 h-2 bg-gray-200 rounded"></div>
                    <div className="h-4 bg-gray-200 rounded w-8"></div>
                  </div>
                ))}
              </div>
              <div className="space-y-3">
                {[1, 2, 3].map((i) => (
                  <div key={i} className="flex justify-between">
                    <div className="h-4 bg-gray-200 rounded w-32"></div>
                    <div className="h-4 bg-gray-200 rounded w-8"></div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    )
  }

const currentStats = activeTab === "this-project" ? reviewStats : sellerStats
  const currentReviews = activeTab === "this-project" ? reviews : allSellerReviews

const handleShowMoreReviews = () => {
    setDisplayedReviewsCount((prev) => prev + REVIEWS_PER_PAGE)
  }

const handleShowMoreSellerReviews = () => {
    setDisplayedSellerReviewsCount((prev) => prev + REVIEWS_PER_PAGE)
  }

return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-3">
            <CardTitle className="text-xl">Reviews</CardTitle>
            {currentStats && currentStats.totalReviews > 0 && (
              <div className="flex items-center space-x-2">
                <div className="flex items-center">
                  <Star className="h-5 w-5 text-yellow-400 fill-current mr-1" />
                  <span className="font-bold text-lg">{currentStats.averageRating}</span>
                  <span className="text-gray-600 ml-1">•</span>
                  <span className="font-medium text-gray-700 ml-1">
                    {currentStats.totalReviews.toLocaleString()} review{currentStats.totalReviews !== 1 ? "s" : ""}
                  </span>
                </div>
              </div>
            )}
          </div>
          {canReview && activeTab === "this-project" && (
            <Button onClick={() => setShowReviewForm(true)} size="sm" className="bg-green-600 hover:bg-green-700">
              <MessageSquare className="mr-2 h-4 w-4" />
              Write Review
            </Button>
          )}
        </div>
      </CardHeader>

<CardContent className="space-y-6">
        {currentStats && currentStats.totalReviews > 0 && (
          <div className="grid md:grid-cols-2 gap-8">
            <div className="space-y-3">
              {[5, 4, 3, 2, 1].map((stars) => (
                <div key={stars} className="flex items-center space-x-3">
                  <span className="text-sm font-medium w-12">{stars} stars</span>
                  <div className="flex-1 bg-gray-200 rounded-full h-2">
                    <div
                      className="bg-gray-800 h-2 rounded-full transition-all duration-300"
                      style={{
                        width: `${currentStats.totalReviews > 0 ? (currentStats.ratingBreakdown[stars as keyof typeof currentStats.ratingBreakdown] / currentStats.totalReviews) * 100 : 0}%`,
                      }}
                    ></div>
                  </div>
                  <span className="text-sm text-green-600 font-medium w-12 text-right">
                    ({currentStats.ratingBreakdown[stars as keyof typeof currentStats.ratingBreakdown]})
                  </span>
                </div>
              ))}
            </div>

<div className="space-y-4">
              <h4 className="font-semibold text-gray-900">Rating breakdown</h4>
              <div className="space-y-3">
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600">Seller communication level</span>
                  <div className="flex items-center space-x-1">
                    <Star className="h-4 w-4 text-yellow-400 fill-current" />
                    <span className="font-semibold">{currentStats.categoryAverages.sellerCommunication}</span>
                  </div>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600">Quality of delivery</span>
                  <div className="flex items-center space-x-1">
                    <Star className="h-4 w-4 text-yellow-400 fill-current" />
                    <span className="font-semibold">{currentStats.categoryAverages.qualityOfDelivery}</span>
                  </div>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600">Value of delivery</span>
                  <div className="flex items-center space-x-1">
                    <Star className="h-4 w-4 text-yellow-400 fill-current" />
                    <span className="font-semibold">{currentStats.categoryAverages.valueOfDelivery}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}

{currentStats && currentStats.totalReviews > 0 && <Separator />}

<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
          <TabsList className="grid w-full grid-cols-2 mb-6">
            <TabsTrigger value="this-project" className="text-sm">
              This project ({reviewStats?.totalReviews || 0})
            </TabsTrigger>
            <TabsTrigger value="all-projects" className="text-sm">
              All projects ({sellerStats?.totalReviews || 0})
            </TabsTrigger>
          </TabsList>

<TabsContent value="this-project" className="space-y-6">
            <div className="flex flex-col sm:flex-row gap-4">
              <div className="relative flex-1">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                <Input
                  placeholder="Search reviews"
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-10"
                />
              </div>
              <Select value={sortBy} onValueChange={(value: any) => setSortBy(value)}>
                <SelectTrigger className="w-full sm:w-48">
                  <SelectValue placeholder="Sort by" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="most_recent">Most recent</SelectItem>
                  <SelectItem value="most_relevant">Most relevant</SelectItem>
                  <SelectItem value="highest_rating">Highest rating</SelectItem>
                  <SelectItem value="lowest_rating">Lowest rating</SelectItem>
                </SelectContent>
              </Select>
            </div>

{reviews.length > 0 ? (
              <div className="space-y-4">
                {reviews.slice(0, displayedReviewsCount).map((review) => (
                  <div key={review.id} className="border rounded-lg p-4 hover:bg-gray-50 transition-colors">
                    <div className="flex items-start justify-between mb-3">
                      <div className="flex items-center space-x-3">
                        <Avatar className="h-10 w-10">
                          <AvatarFallback className="bg-green-500 text-white text-sm font-medium">
                            {review.buyer.firstName[0]}
                            {review.buyer.lastName[0]}
                          </AvatarFallback>
                        </Avatar>
                        <div>
                          <p className="font-medium text-sm">
                            {review.buyer.firstName} {review.buyer.lastName}
                          </p>
                          <div className="flex items-center space-x-2 text-xs text-gray-500">
                            <span>🇺🇸 {review.buyer.country}</span>
                            <span>•</span>
                            <span>{formatDistanceToNow(new Date(review.createdAt), { addSuffix: true })}</span>
                          </div>
                        </div>
                      </div>
                      <div className="text-right">
                        <StarRating value={review.rating} readonly />
                        <div className="flex items-center text-xs text-gray-500 mt-1">
                          <Calendar className="h-3 w-3 mr-1" />
                          {new Date(review.createdAt).toLocaleDateString()}
                        </div>
                      </div>
                    </div>

{review.comment && <p className="text-gray-700 text-sm leading-relaxed mb-3">{review.comment}</p>}

<div className="flex items-center justify-between text-xs bg-gray-50 p-3 rounded-lg">
                      <div className="flex items-center space-x-4">
                        <div className="flex items-center">
                          <DollarSign className="h-3 w-3 mr-1 text-gray-400" />
                          <span className="font-medium">${review.purchaseAmount}</span>
                          <span className="text-gray-500 ml-1">Price</span>
                        </div>
                        <div className="flex items-center">
                          <Clock className="h-3 w-3 mr-1 text-gray-400" />
                          <span className="font-medium">{review.deliveryTime}</span>
                          <span className="text-gray-500 ml-1">Duration</span>
                        </div>
                      </div>
                      <Badge variant="outline" className="text-xs">
                        {review.order.tierName}
                      </Badge>
                    </div>
                  </div>
                ))}

{reviews.length > displayedReviewsCount && (
                  <div className="flex justify-center pt-4">
                    <Button variant="outline" onClick={handleShowMoreReviews} className="px-8 py-2 bg-transparent">
                      Show More Reviews
                    </Button>
                  </div>
                )}
              </div>
            ) : (
              <div className="text-center py-8">
                <Star className="h-12 w-12 text-gray-400 mx-auto mb-3" />
                <h3 className="text-lg font-medium text-gray-900 mb-2">No reviews yet</h3>
                <p className="text-gray-600 mb-4">
                  {canReview
                    ? "Be the first to review this service!"
                    : "Only buyers who have completed orders can write reviews."}
                </p>
                {canReview && (
                  <Button onClick={() => setShowReviewForm(true)} className="bg-green-600 hover:bg-green-700">
                    <MessageSquare className="mr-2 h-4 w-4" />
                    Write First Review
                  </Button>
                )}
              </div>
            )}
          </TabsContent>

<TabsContent value="all-projects" className="space-y-6">
            <div className="flex flex-col sm:flex-row gap-4">
              <div className="relative flex-1">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                <Input
                  placeholder="Search reviews"
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-10"
                />
              </div>
              <Select value={sortBy} onValueChange={(value: any) => setSortBy(value)}>
                <SelectTrigger className="w-full sm:w-48">
                  <SelectValue placeholder="Sort by" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="most_recent">Most recent</SelectItem>
                  <SelectItem value="most_relevant">Most relevant</SelectItem>
                  <SelectItem value="highest_rating">Highest rating</SelectItem>
                  <SelectItem value="lowest_rating">Lowest rating</SelectItem>
                </SelectContent>
              </Select>
            </div>

{allSellerReviews.length > 0 ? (
              <div className="space-y-4">
                {allSellerReviews.slice(0, displayedSellerReviewsCount).map((review) => (
                  <div key={review.id} className="border rounded-lg p-4 hover:bg-gray-50 transition-colors">
                    <div className="flex items-start justify-between mb-3">
                      <div className="flex items-center space-x-3">
                        <Avatar className="h-10 w-10">
                          <AvatarFallback className="bg-blue-500 text-white text-sm font-medium">
                            {review.buyer.firstName[0]}
                            {review.buyer.lastName[0]}
                          </AvatarFallback>
                        </Avatar>
                        <div>
                          <p className="font-medium text-sm">
                            {review.buyer.firstName} {review.buyer.lastName}
                          </p>
                          <div className="flex items-center space-x-2 text-xs text-gray-500">
                            <span>🇺🇸 {review.buyer.country}</span>
                            <span>•</span>
                            <span>{formatDistanceToNow(new Date(review.createdAt), { addSuffix: true })}</span>
                          </div>
                        </div>
                      </div>
                      <div className="text-right">
                        <StarRating value={review.rating} readonly />
                        <div className="flex items-center text-xs text-gray-500 mt-1">
                          <Calendar className="h-3 w-3 mr-1" />
                          {new Date(review.createdAt).toLocaleDateString()}
                        </div>
                      </div>
                    </div>

{review.comment && <p className="text-gray-700 text-sm leading-relaxed mb-3">{review.comment}</p>}

{allSellerReviews.length > displayedSellerReviewsCount && (
                  <div className="flex justify-center pt-4">
                    <Button
                      variant="outline"
                      onClick={handleShowMoreSellerReviews}
                      className="px-8 py-2 bg-transparent"
                    >
                      Show More Reviews
                    </Button>
                  </div>
                )}
              </div>
            ) : (
              <div className="text-center py-8">
                <Star className="h-12 w-12 text-gray-400 mx-auto mb-3" />
                <h3 className="text-lg font-medium text-gray-900 mb-2">No reviews found</h3>
                <p className="text-gray-600">This seller hasn't received any reviews yet.</p>
              </div>
            )}
          </TabsContent>
        </Tabs>

<Dialog open={showReviewForm} onOpenChange={setShowReviewForm}>
          <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
            <DialogHeader>
              <DialogTitle>Write a Review</DialogTitle>
            </DialogHeader>

<div className="space-y-6">
              {availableOrders.length > 1 && (
                <div className="space-y-2">
                  <label className="text-sm font-medium">Select Order to Review</label>
                  <Select value={selectedOrderId} onValueChange={setSelectedOrderId}>
                    <SelectTrigger>
                      <SelectValue placeholder="Choose an order" />
                    </SelectTrigger>
                    <SelectContent>
                      {availableOrders.map((order) => (
                        <SelectItem key={order.id} value={order.id}>
                          ${order.amount} - {new Date(order.completedAt || order.createdAt).toLocaleDateString()}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              )}

<div className="space-y-2">
                <label className="text-sm font-medium">Overall Rating</label>
                <div className="flex items-center space-x-2">
                  <StarRating value={rating} onChange={setRating} />
                  <span className="text-sm text-gray-600">
                    ({rating} star{rating !== 1 ? "s" : ""})
                  </span>
                </div>
              </div>

<div className="grid gap-4">
                <div className="space-y-2">
                  <label className="text-sm font-medium">Seller communication skill</label>
                  <div className="flex items-center space-x-2">
                    <StarRating value={sellerCommunication} onChange={setSellerCommunication} />
                    <span className="text-sm text-gray-600">({sellerCommunication})</span>
                  </div>
                </div>

<div className="space-y-2">
                  <label className="text-sm font-medium">Quality of delivery</label>
                  <div className="flex items-center space-x-2">
                    <StarRating value={qualityOfDelivery} onChange={setQualityOfDelivery} />
                    <span className="text-sm text-gray-600">({qualityOfDelivery})</span>
                  </div>
                </div>

<div className="space-y-2">
                  <label className="text-sm font-medium">Value of delivery</label>
                  <div className="flex items-center space-x-2">
                    <StarRating value={valueOfDelivery} onChange={setValueOfDelivery} />
                    <span className="text-sm text-gray-600">({valueOfDelivery})</span>
                  </div>
                </div>
              </div>

<div className="space-y-2">
                <label className="text-sm font-medium">Your Review (Optional)</label>
                <Textarea
                  placeholder="Share your experience with this seller..."
                  value={comment}
                  onChange={(e) => setComment(e.target.value)}
                  rows={4}
                  maxLength={1000}
                />
                <div className="text-xs text-gray-500 text-right">{comment.length}/1000 characters</div>
              </div>

<div className="flex items-start space-x-2 p-3 bg-blue-50 rounded-lg">
                <AlertCircle className="h-4 w-4 text-blue-500 mt-0.5 flex-shrink-0" />
                <div className="text-xs text-blue-700">
                  <p className="font-medium mb-1">Review Guidelines:</p>
                  <ul className="space-y-1">
                    <li>• Only buyers who completed orders can write reviews</li>
                    <li>• You can write one review per completed order</li>
                    <li>• Reviews help other buyers make informed decisions</li>
                  </ul>
                </div>
              </div>

<div className="flex justify-end space-x-2 pt-4">
                <Button type="button" variant="outline" onClick={() => setShowReviewForm(false)} disabled={submitting}>
                  Cancel
                </Button>
                <Button
                  onClick={handleSubmitReview}
                  disabled={submitting || !selectedOrderId}
                  className="bg-green-600 hover:bg-green-700"
                >
                  {submitting ? "Publishing..." : "Publish Review"}
                </Button>
              </div>
            </div>
          </DialogContent>
        </Dialog>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/marketplace/tier-comparison.tsx" isMerged="true"
"use client"

interface ServiceTier {
  name: string
  price: number
  deliveryTime: string
  revisions: string
  features: string[]
  description?: string
}

interface ServiceAddOn {
  id: string
  name: string
  description: string
  price: number
  deliveryTime?: string
}

interface TierComparisonProps {
  serviceTiers: ServiceTier[]
  serviceAddOns: ServiceAddOn[]
  onTierSelect?: (tier: ServiceTier) => void
  selectedTier?: ServiceTier | null
}

export function TierComparison({ serviceTiers, serviceAddOns, onTierSelect, selectedTier }: TierComparisonProps) {
  const [isVisible, setIsVisible] = useState(false)

// Load visibility state from localStorage
  useEffect(() => {
    const saved = localStorage.getItem("tier-comparison-visible")
    setIsVisible(saved === "true")
  }, [])

// Save visibility state to localStorage
  const toggleVisibility = () => {
    const newState = !isVisible
    setIsVisible(newState)
    localStorage.setItem("tier-comparison-visible", newState.toString())
  }

// Only show if there are 2 or 3 tiers
  if (serviceTiers.length < 2 || serviceTiers.length > 3) {
    return null
  }

// Get all unique features across all tiers
  const allFeatures = Array.from(new Set(serviceTiers.flatMap((tier) => tier.features)))

// Common comparison rows
  const comparisonRows = [
    { label: "Delivery Time", key: "deliveryTime", icon: Clock },
    { label: "Number of Revisions", key: "revisions", icon: RefreshCw },
    ...allFeatures.map((feature) => ({ label: feature, key: feature, icon: null })),
  ]

const hasFeature = (tier: ServiceTier, feature: string) => {
    if (feature === "deliveryTime") return tier.deliveryTime
    if (feature === "revisions") return tier.revisions
    return tier.features.includes(feature)
  }

if (!isVisible) {
    return (
      <Card>
        <CardContent className="p-6">
          <div className="flex items-center justify-between">
            <div>
              <h3 className="text-lg font-semibold text-gray-900">Compare Service Tiers</h3>
              <p className="text-sm text-gray-600">See detailed comparison of all available packages</p>
            </div>
            <Button onClick={toggleVisibility} variant="outline">
              Compare Tiers
            </Button>
          </div>
        </CardContent>
      </Card>
    )
  }

return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between">
          <CardTitle>Service Tiers Comparison</CardTitle>
          <Button onClick={toggleVisibility} variant="ghost" size="sm">
            Hide Comparison
          </Button>
        </div>
      </CardHeader>
      <CardContent>
        <div className="overflow-x-auto">
          <table className="w-full border-collapse">
            <thead>
              <tr>
                <th className="text-left p-4 border-b font-medium text-gray-600 bg-gray-50">Service Tiers</th>
                {serviceTiers.map((tier) => (
                  <th key={tier.name} className="text-center p-4 border-b bg-gray-50 min-w-[200px]">
                    <div className="space-y-2">
                      <div className="font-semibold text-gray-900">{tier.name}</div>
                      <div className="text-2xl font-bold text-green-600">${tier.price}</div>
                      {tier.description && (
                        <div className="text-xs text-gray-600 uppercase tracking-wide">{tier.description}</div>
                      )}
                    </div>
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {comparisonRows.map((row, index) => (
                <tr key={row.key} className={index % 2 === 0 ? "bg-white" : "bg-gray-50"}>
                  <td className="p-4 border-b font-medium text-gray-900">
                    <div className="flex items-center">
                      {row.icon && <row.icon className="mr-2 h-4 w-4 text-gray-400" />}
                      {row.label}
                    </div>
                  </td>
                  {serviceTiers.map((tier) => {
                    const value = hasFeature(tier, row.key)
                    return (
                      <td key={`${tier.name}-${row.key}`} className="p-4 border-b text-center">
                        {row.key === "deliveryTime" || row.key === "revisions" ? (
                          <span className="font-medium text-gray-900">{value}</span>
                        ) : value ? (
                          <Check className="h-5 w-5 text-green-500 mx-auto" />
                        ) : (
                          <X className="h-5 w-5 text-gray-300 mx-auto" />
                        )}
                      </td>
                    )
                  })}
                </tr>
              ))}
            </tbody>
          </table>
        </div>

{serviceAddOns.length > 0 && (
          <div className="mt-8">
            <h4 className="text-lg font-semibold text-gray-900 mb-4">Optional add-ons</h4>
            <p className="text-sm text-gray-600 mb-4">You can add these on the next page.</p>
            <div className="space-y-3">
              {serviceAddOns.map((addOn) => (
                <div key={addOn.id} className="flex items-center justify-between p-3 border rounded-lg bg-gray-50">
                  <div className="flex-1">
                    <div className="font-medium text-gray-900">{addOn.name}</div>
                    <div className="text-sm text-gray-600">{addOn.description}</div>
                    {addOn.deliveryTime && <div className="text-xs text-gray-500 mt-1">+{addOn.deliveryTime}</div>}
                  </div>
                  <div className="text-lg font-semibold text-green-600">+${addOn.price}</div>
                </div>
              ))}
            </div>
          </div>
        )}

<div className="mt-6 flex justify-center space-x-4">
          {serviceTiers.map((tier) => (
            <Button
              key={tier.name}
              onClick={() => onTierSelect?.(tier)}
              variant={selectedTier?.name === tier.name ? "default" : "outline"}
              className="min-w-[120px]"
            >
              Select {tier.name}
            </Button>
          ))}
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescript:file="lib/seller-levels.ts" isMerged="true"
export interface SellerMetrics {
  totalOrders: number
  totalEarnings: number
  averageRating: number
  onTimeDeliveryRate: number
  responseRate: number
  orderCompletionRate: number
  accountAge: number // days since account creation
  policyViolations: number
  lastUpdated: string
}

export interface LevelRequirements {
  id: string
  name: string
  displayName: string
  maxGigs: number
  requirements: {
    minOrders?: number
    minEarnings?: number
    minRating?: number
    minOnTimeDelivery?: number
    minResponseRate?: number
    minOrderCompletion?: number
    minAccountAge?: number
    maxPolicyViolations?: number
    evaluationPeriod?: number // days to look back for metrics
  }
  benefits: string[]
  color: string
  badge?: string
}

export const DEFAULT_LEVEL_REQUIREMENTS: LevelRequirements[] = [
  {
    id: "new",
    name: "new",
    displayName: "New Seller",
    maxGigs: 5,
    requirements: {},
    benefits: ["Create up to 5 gigs", "Start building your reputation", "Access to basic seller tools"],
    color: "gray",
  },
  {
    id: "level1",
    name: "level1",
    displayName: "Level 1 Seller",
    maxGigs: 10,
    requirements: {
      minOrders: 10,
      minEarnings: 400,
      minRating: 4.7,
      minOnTimeDelivery: 90,
      minResponseRate: 90,
      maxPolicyViolations: 0,
      evaluationPeriod: 30,
    },
    benefits: [
      "Create up to 10 gigs",
      "Add extras to your gigs",
      "Priority placement over new sellers",
      "Enhanced seller tools",
    ],
    color: "blue",
  },
  {
    id: "level2",
    name: "level2",
    displayName: "Level 2 Seller",
    maxGigs: 20,
    requirements: {
      minOrders: 50,
      minEarnings: 2000,
      minRating: 4.7,
      minOnTimeDelivery: 90,
      minResponseRate: 90,
      minOrderCompletion: 90,
      maxPolicyViolations: 0,
      evaluationPeriod: 60,
    },
    benefits: [
      "Create up to 20 gigs",
      "Higher ranking in search results",
      "Access to more buyer requests",
      "Priority customer support",
    ],
    color: "green",
  },
  {
    id: "top",
    name: "top",
    displayName: "Top Rated Seller",
    maxGigs: 30,
    requirements: {
      minOrders: 100,
      minEarnings: 20000,
      minRating: 4.7,
      minOnTimeDelivery: 90,
      minResponseRate: 90,
      minOrderCompletion: 90,
      minAccountAge: 180,
      maxPolicyViolations: 0,
      evaluationPeriod: 60,
    },
    benefits: [
      "Create up to 30 gigs",
      '"Top Rated" badge with high trust factor',
      "Priority in search results",
      "VIP customer support",
      "Special promotions and invitations",
    ],
    color: "yellow",
    badge: "⭐",
  },
]

export class SellerLevelManager {
  private static readonly STORAGE_KEYS = {
    LEVEL_REQUIREMENTS: "seller_level_requirements",
    SELLER_METRICS: "seller_metrics",
    SELLER_LEVELS: "seller_levels",
    MANUAL_OVERRIDES: "seller_manual_overrides",
  }

// Admin functions
  static getLevelRequirements(): LevelRequirements[] {
    if (typeof window === "undefined") return DEFAULT_LEVEL_REQUIREMENTS

const stored = localStorage.getItem(this.STORAGE_KEYS.LEVEL_REQUIREMENTS)
    return stored ? JSON.parse(stored) : DEFAULT_LEVEL_REQUIREMENTS
  }

static updateLevelRequirements(requirements: LevelRequirements[]): void {
    if (typeof window === "undefined") return

localStorage.setItem(this.STORAGE_KEYS.LEVEL_REQUIREMENTS, JSON.stringify(requirements))
  }

static resetToDefaults(): void {
    if (typeof window === "undefined") return

localStorage.setItem(this.STORAGE_KEYS.LEVEL_REQUIREMENTS, JSON.stringify(DEFAULT_LEVEL_REQUIREMENTS))
  }

// Seller metrics management
  static getSellerMetrics(sellerId: string): SellerMetrics | null {
    if (typeof window === "undefined") return null

const stored = localStorage.getItem(this.STORAGE_KEYS.SELLER_METRICS)
    const allMetrics = stored ? JSON.parse(stored) : {}
    return allMetrics[sellerId] || null
  }

static updateSellerMetrics(sellerId: string, metrics: SellerMetrics): void {
    if (typeof window === "undefined") return

const stored = localStorage.getItem(this.STORAGE_KEYS.SELLER_METRICS)
    const allMetrics = stored ? JSON.parse(stored) : {}

allMetrics[sellerId] = {
      ...metrics,
      lastUpdated: new Date().toISOString(),
    }

localStorage.setItem(this.STORAGE_KEYS.SELLER_METRICS, JSON.stringify(allMetrics))

// Recalculate level after metrics update
    this.calculateSellerLevel(sellerId)
  }

// Level calculation
  static calculateSellerLevel(sellerId: string): string {
    if (typeof window === "undefined") return "new"

// Check for manual override first
    const overrides = this.getManualOverrides()
    if (overrides[sellerId]) {
      return overrides[sellerId]
    }

const metrics = this.getSellerMetrics(sellerId)
    if (!metrics) return "new"

const requirements = this.getLevelRequirements()

// Check levels from highest to lowest
    for (let i = requirements.length - 1; i >= 0; i--) {
      const level = requirements[i]
      if (this.meetsRequirements(metrics, level.requirements)) {
        this.setSellerLevel(sellerId, level.id)
        return level.id
      }
    }

// Default to new seller
    this.setSellerLevel(sellerId, "new")
    return "new"
  }

private static meetsRequirements(metrics: SellerMetrics, requirements: LevelRequirements["requirements"]): boolean {
    if (requirements.minOrders && metrics.totalOrders < requirements.minOrders) return false
    if (requirements.minEarnings && metrics.totalEarnings < requirements.minEarnings) return false
    if (requirements.minRating && metrics.averageRating < requirements.minRating) return false
    if (requirements.minOnTimeDelivery && metrics.onTimeDeliveryRate < requirements.minOnTimeDelivery) return false
    if (requirements.minResponseRate && metrics.responseRate < requirements.minResponseRate) return false
    if (requirements.minOrderCompletion && metrics.orderCompletionRate < requirements.minOrderCompletion) return false
    if (requirements.minAccountAge && metrics.accountAge < requirements.minAccountAge) return false
    if (requirements.maxPolicyViolations !== undefined && metrics.policyViolations > requirements.maxPolicyViolations)
      return false

return true
  }

// Manual overrides (admin only)
  static getManualOverrides(): Record<string, string> {
    if (typeof window === "undefined") return {}

const stored = localStorage.getItem(this.STORAGE_KEYS.MANUAL_OVERRIDES)
    return stored ? JSON.parse(stored) : {}
  }

static setManualOverride(sellerId: string, levelId: string): void {
    if (typeof window === "undefined") return

const overrides = this.getManualOverrides()
    overrides[sellerId] = levelId

localStorage.setItem(this.STORAGE_KEYS.MANUAL_OVERRIDES, JSON.stringify(overrides))
    this.setSellerLevel(sellerId, levelId)
  }

static removeManualOverride(sellerId: string): void {
    if (typeof window === "undefined") return

const overrides = this.getManualOverrides()
    delete overrides[sellerId]

localStorage.setItem(this.STORAGE_KEYS.MANUAL_OVERRIDES, JSON.stringify(overrides))

// Recalculate level based on metrics
    this.calculateSellerLevel(sellerId)
  }

// Current seller level
  static getSellerLevel(sellerId: string): string {
    if (typeof window === "undefined") return "new"

const stored = localStorage.getItem(this.STORAGE_KEYS.SELLER_LEVELS)
    const allLevels = stored ? JSON.parse(stored) : {}
    return allLevels[sellerId] || "new"
  }

private static setSellerLevel(sellerId: string, levelId: string): void {
    if (typeof window === "undefined") return

const stored = localStorage.getItem(this.STORAGE_KEYS.SELLER_LEVELS)
    const allLevels = stored ? JSON.parse(stored) : {}

allLevels[sellerId] = levelId
    localStorage.setItem(this.STORAGE_KEYS.SELLER_LEVELS, JSON.stringify(allLevels))
  }

// Helper functions
  static getLevelInfo(levelId: string): LevelRequirements | null {
    const requirements = this.getLevelRequirements()
    return requirements.find((level) => level.id === levelId) || null
  }

static getNextLevel(currentLevelId: string): LevelRequirements | null {
    const requirements = this.getLevelRequirements()
    const currentIndex = requirements.findIndex((level) => level.id === currentLevelId)

if (currentIndex === -1 || currentIndex === requirements.length - 1) {
      return null // Already at top level or level not found
    }

return requirements[currentIndex + 1]
  }

static getProgressToNextLevel(sellerId: string): {
    currentLevel: LevelRequirements
    nextLevel: LevelRequirements | null
    progress: Record<string, { current: number; required: number; percentage: number }>
  } | null {
    const currentLevelId = this.getSellerLevel(sellerId)
    const currentLevel = this.getLevelInfo(currentLevelId)
    const nextLevel = this.getNextLevel(currentLevelId)
    const metrics = this.getSellerMetrics(sellerId)

if (!currentLevel || !metrics) return null

const progress: Record<string, { current: number; required: number; percentage: number }> = {}

if (nextLevel) {
      const req = nextLevel.requirements

if (req.minOrders) {
        progress.orders = {
          current: metrics.totalOrders,
          required: req.minOrders,
          percentage: Math.min(100, (metrics.totalOrders / req.minOrders) * 100),
        }
      }

if (req.minEarnings) {
        progress.earnings = {
          current: metrics.totalEarnings,
          required: req.minEarnings,
          percentage: Math.min(100, (metrics.totalEarnings / req.minEarnings) * 100),
        }
      }

if (req.minRating) {
        progress.rating = {
          current: metrics.averageRating,
          required: req.minRating,
          percentage: Math.min(100, (metrics.averageRating / req.minRating) * 100),
        }
      }

if (req.minOnTimeDelivery) {
        progress.onTimeDelivery = {
          current: metrics.onTimeDeliveryRate,
          required: req.minOnTimeDelivery,
          percentage: Math.min(100, (metrics.onTimeDeliveryRate / req.minOnTimeDelivery) * 100),
        }
      }

if (req.minResponseRate) {
        progress.responseRate = {
          current: metrics.responseRate,
          required: req.minResponseRate,
          percentage: Math.min(100, (metrics.responseRate / req.minResponseRate) * 100),
        }
      }

if (req.minAccountAge) {
        progress.accountAge = {
          current: metrics.accountAge,
          required: req.minAccountAge,
          percentage: Math.min(100, (metrics.accountAge / req.minAccountAge) * 100),
        }
      }
    }

return { currentLevel, nextLevel, progress }
  }

// Initialize seller with default metrics
  static initializeSeller(sellerId: string): void {
    const existingMetrics = this.getSellerMetrics(sellerId)
    if (!existingMetrics) {
      const defaultMetrics: SellerMetrics = {
        totalOrders: 0,
        totalEarnings: 0,
        averageRating: 5.0,
        onTimeDeliveryRate: 100,
        responseRate: 100,
        orderCompletionRate: 100,
        accountAge: 0,
        policyViolations: 0,
        lastUpdated: new Date().toISOString(),
      }

this.updateSellerMetrics(sellerId, defaultMetrics)
    }
  }
}
[V0_FILE]typescriptreact:file="components/seller/seller-level-badge.tsx" isMerged="true"
"use client"

import { SellerLevelManager } from "@/lib/seller-levels"
import { useEffect, useState } from "react"

interface SellerLevelBadgeProps {
  sellerId: string
  showName?: boolean
  size?: "sm" | "md" | "lg"
}

export function SellerLevelBadge({ sellerId, showName = true, size = "md" }: SellerLevelBadgeProps) {
  const [levelInfo, setLevelInfo] = useState<any>(null)

useEffect(() => {
    const levelId = SellerLevelManager.getSellerLevel(sellerId)
    const info = SellerLevelManager.getLevelInfo(levelId)
    setLevelInfo(info)
  }, [sellerId])

if (!levelInfo) return null

const sizeClasses = {
    sm: "px-2 py-1 text-xs",
    md: "px-3 py-1.5 text-sm",
    lg: "px-4 py-2 text-base",
  }

const colorClasses = {
    gray: "bg-gray-100 text-gray-800 border-gray-200",
    blue: "bg-blue-100 text-blue-800 border-blue-200",
    green: "bg-green-100 text-green-800 border-green-200",
    yellow: "bg-yellow-100 text-yellow-800 border-yellow-200",
  }

return (
    <div
      className={`inline-flex items-center gap-1 rounded-full border font-medium ${sizeClasses[size]} ${colorClasses[levelInfo.color as keyof typeof colorClasses]}`}
    >
      {levelInfo.badge && <span>{levelInfo.badge}</span>}
      {showName && <span>{levelInfo.displayName}</span>}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/seller/seller-progress-dashboard.tsx" isMerged="true"
"use client"

import { SellerLevelManager } from "@/lib/seller-levels"
import { useEffect, useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Progress } from "@/components/ui/progress"
import { Badge } from "@/components/ui/badge"
import { SellerLevelBadge } from "./seller-level-badge"

interface SellerProgressDashboardProps {
  sellerId: string
}

export function SellerProgressDashboard({ sellerId }: SellerProgressDashboardProps) {
  const [progressData, setProgressData] = useState<any>(null)
  const [loading, setLoading] = useState(true)

useEffect(() => {
    // Initialize seller if not exists
    SellerLevelManager.initializeSeller(sellerId)

const data = SellerLevelManager.getProgressToNextLevel(sellerId)
    setProgressData(data)
    setLoading(false)
  }, [sellerId])

if (loading) {
    return <div className="animate-pulse">Loading seller progress...</div>
  }

if (!progressData) {
    return <div>Unable to load seller progress</div>
  }

const { currentLevel, nextLevel, progress } = progressData

return (
    <div className="space-y-6">
      {/* Current Level Status */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-3">
            <span>Your Seller Level</span>
            <SellerLevelBadge sellerId={sellerId} size="lg" />
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div>
              <h4 className="font-medium text-gray-900 mb-2">Current Benefits:</h4>
              <ul className="space-y-1">
                {currentLevel.benefits.map((benefit: string, index: number) => (
                  <li key={index} className="flex items-center gap-2 text-sm text-gray-600">
                    <span className="text-green-500">✓</span>
                    {benefit}
                  </li>
                ))}
              </ul>
            </div>

<div className="pt-4 border-t">
              <p className="text-sm text-gray-600">
                You can create up to <strong>{currentLevel.maxGigs} gigs</strong> at your current level.
              </p>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Progress to Next Level */}
      {nextLevel ? (
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-3">
              <span>Progress to {nextLevel.displayName}</span>
              <Badge
                variant="outline"
                className={`bg-${nextLevel.color}-50 text-${nextLevel.color}-700 border-${nextLevel.color}-200`}
              >
                {nextLevel.badge} {nextLevel.displayName}
              </Badge>
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-6">
              {/* Progress Bars */}
              <div className="space-y-4">
                {Object.entries(progress).map(([key, data]: [string, any]) => (
                  <div key={key} className="space-y-2">
                    <div className="flex justify-between items-center">
                      <span className="text-sm font-medium capitalize">{key.replace(/([A-Z])/g, " $1").trim()}</span>
                      <span className="text-sm text-gray-600">
                        {key === "rating"
                          ? `${data.current.toFixed(1)}/${data.required}`
                          : key === "earnings"
                            ? `$${data.current}/$${data.required}`
                            : key === "accountAge"
                              ? `${data.current}/${data.required} days`
                              : `${data.current}${key.includes("Rate") ? "%" : ""}/${data.required}${key.includes("Rate") ? "%" : ""}`}
                      </span>
                    </div>
                    <Progress value={data.percentage} className="h-2" />
                  </div>
                ))}
              </div>

{/* Next Level Benefits */}
              <div className="pt-4 border-t">
                <h4 className="font-medium text-gray-900 mb-2">What you'll unlock:</h4>
                <ul className="space-y-1">
                  {nextLevel.benefits.map((benefit: string, index: number) => (
                    <li key={index} className="flex items-center gap-2 text-sm text-gray-600">
                      <span className="text-blue-500">→</span>
                      {benefit}
                    </li>
                  ))}
                </ul>
              </div>

{/* Requirements Summary */}
              <div className="bg-blue-50 p-4 rounded-lg">
                <h4 className="font-medium text-blue-900 mb-2">Requirements Summary:</h4>
                <div className="text-sm text-blue-800 space-y-1">
                  {nextLevel.requirements.evaluationPeriod && (
                    <p>• Evaluated over the last {nextLevel.requirements.evaluationPeriod} days</p>
                  )}
                  {nextLevel.requirements.minOrders && (
                    <p>• Complete at least {nextLevel.requirements.minOrders} orders</p>
                  )}
                  {nextLevel.requirements.minEarnings && (
                    <p>• Earn at least ${nextLevel.requirements.minEarnings} total</p>
                  )}
                  {nextLevel.requirements.minRating && (
                    <p>• Maintain {nextLevel.requirements.minRating}+ star rating</p>
                  )}
                  {nextLevel.requirements.minOnTimeDelivery && (
                    <p>• Keep {nextLevel.requirements.minOnTimeDelivery}%+ on-time delivery</p>
                  )}
                  {nextLevel.requirements.minResponseRate && (
                    <p>• Maintain {nextLevel.requirements.minResponseRate}%+ response rate</p>
                  )}
                  {nextLevel.requirements.minAccountAge && (
                    <p>• Be active for at least {nextLevel.requirements.minAccountAge} days</p>
                  )}
                  <p>• Avoid policy violations</p>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      ) : (
        <Card>
          <CardContent className="text-center py-8">
            <div className="text-6xl mb-4">🎉</div>
            <h3 className="text-xl font-semibold text-gray-900 mb-2">
              Congratulations! You've reached the highest level!
            </h3>
            <p className="text-gray-600">
              You're now a {currentLevel.displayName} with access to all platform benefits.
            </p>
          </CardContent>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin/seller-level-admin.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { SellerLevelManager, type LevelRequirements } from "@/lib/seller-levels"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
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 { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export function SellerLevelAdmin() {
  const [levelRequirements, setLevelRequirements] = useState<LevelRequirements[]>([])
  const [editingLevel, setEditingLevel] = useState<LevelRequirements | null>(null)
  const [manualOverrideUserId, setManualOverrideUserId] = useState("")
  const [manualOverrideLevel, setManualOverrideLevel] = useState("")

useEffect(() => {
    loadLevelRequirements()
  }, [])

const loadLevelRequirements = () => {
    const requirements = SellerLevelManager.getLevelRequirements()
    setLevelRequirements(requirements)
  }

const saveLevelRequirements = () => {
    SellerLevelManager.updateLevelRequirements(levelRequirements)
    alert("Level requirements updated successfully!")
  }

const resetToDefaults = () => {
    if (confirm("Are you sure you want to reset all level requirements to defaults?")) {
      SellerLevelManager.resetToDefaults()
      loadLevelRequirements()
      alert("Level requirements reset to defaults!")
    }
  }

const updateLevelRequirement = (levelId: string, field: string, value: any) => {
    setLevelRequirements((prev) =>
      prev.map((level) => {
        if (level.id === levelId) {
          if (field.startsWith("requirements.")) {
            const reqField = field.replace("requirements.", "")
            return {
              ...level,
              requirements: {
                ...level.requirements,
                [reqField]: value === "" ? undefined : Number(value),
              },
            }
          } else if (field === "benefits") {
            return {
              ...level,
              benefits: value.split("\n").filter((b: string) => b.trim()),
            }
          } else {
            return {
              ...level,
              [field]: field === "maxGigs" ? Number(value) : value,
            }
          }
        }
        return level
      }),
    )
  }

const applyManualOverride = () => {
    if (!manualOverrideUserId || !manualOverrideLevel) {
      alert("Please enter both User ID and Level")
      return
    }

SellerLevelManager.setManualOverride(manualOverrideUserId, manualOverrideLevel)
    alert(`Manual override applied: User ${manualOverrideUserId} set to ${manualOverrideLevel}`)
    setManualOverrideUserId("")
    setManualOverrideLevel("")
  }

const removeManualOverride = () => {
    if (!manualOverrideUserId) {
      alert("Please enter User ID")
      return
    }

SellerLevelManager.removeManualOverride(manualOverrideUserId)
    alert(`Manual override removed for user ${manualOverrideUserId}`)
    setManualOverrideUserId("")
  }

return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h2 className="text-2xl font-bold">Seller Level Administration</h2>
        <div className="space-x-2">
          <Button onClick={saveLevelRequirements}>Save Changes</Button>
          <Button onClick={resetToDefaults} variant="outline">
            Reset to Defaults
          </Button>
        </div>
      </div>

<Tabs defaultValue="requirements" className="space-y-4">
        <TabsList>
          <TabsTrigger value="requirements">Level Requirements</TabsTrigger>
          <TabsTrigger value="overrides">Manual Overrides</TabsTrigger>
        </TabsList>

<TabsContent value="requirements" className="space-y-4">
          {levelRequirements.map((level) => (
            <Card key={level.id}>
              <CardHeader>
                <CardTitle className="flex items-center gap-3">
                  <Badge className={`bg-${level.color}-100 text-${level.color}-800`}>
                    {level.badge} {level.displayName}
                  </Badge>
                  <span className="text-sm text-gray-500">Max {level.maxGigs} gigs</span>
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <Label>Display Name</Label>
                    <Input
                      value={level.displayName}
                      onChange={(e) => updateLevelRequirement(level.id, "displayName", e.target.value)}
                    />
                  </div>
                  <div>
                    <Label>Max Gigs</Label>
                    <Input
                      type="number"
                      value={level.maxGigs}
                      onChange={(e) => updateLevelRequirement(level.id, "maxGigs", e.target.value)}
                    />
                  </div>
                </div>

<div className="grid grid-cols-3 gap-4">
                  <div>
                    <Label>Min Orders</Label>
                    <Input
                      type="number"
                      value={level.requirements.minOrders || ""}
                      onChange={(e) => updateLevelRequirement(level.id, "requirements.minOrders", e.target.value)}
                    />
                  </div>
                  <div>
                    <Label>Min Earnings ($)</Label>
                    <Input
                      type="number"
                      value={level.requirements.minEarnings || ""}
                      onChange={(e) => updateLevelRequirement(level.id, "requirements.minEarnings", e.target.value)}
                    />
                  </div>
                  <div>
                    <Label>Min Rating</Label>
                    <Input
                      type="number"
                      step="0.1"
                      min="0"
                      max="5"
                      value={level.requirements.minRating || ""}
                      onChange={(e) => updateLevelRequirement(level.id, "requirements.minRating", e.target.value)}
                    />
                  </div>
                </div>

<div className="grid grid-cols-3 gap-4">
                  <div>
                    <Label>Min On-Time Delivery (%)</Label>
                    <Input
                      type="number"
                      min="0"
                      max="100"
                      value={level.requirements.minOnTimeDelivery || ""}
                      onChange={(e) =>
                        updateLevelRequirement(level.id, "requirements.minOnTimeDelivery", e.target.value)
                      }
                    />
                  </div>
                  <div>
                    <Label>Min Response Rate (%)</Label>
                    <Input
                      type="number"
                      min="0"
                      max="100"
                      value={level.requirements.minResponseRate || ""}
                      onChange={(e) => updateLevelRequirement(level.id, "requirements.minResponseRate", e.target.value)}
                    />
                  </div>
                  <div>
                    <Label>Min Account Age (days)</Label>
                    <Input
                      type="number"
                      value={level.requirements.minAccountAge || ""}
                      onChange={(e) => updateLevelRequirement(level.id, "requirements.minAccountAge", e.target.value)}
                    />
                  </div>
                </div>

<div className="grid grid-cols-2 gap-4">
                  <div>
                    <Label>Evaluation Period (days)</Label>
                    <Input
                      type="number"
                      value={level.requirements.evaluationPeriod || ""}
                      onChange={(e) =>
                        updateLevelRequirement(level.id, "requirements.evaluationPeriod", e.target.value)
                      }
                    />
                  </div>
                  <div>
                    <Label>Max Policy Violations</Label>
                    <Input
                      type="number"
                      min="0"
                      value={level.requirements.maxPolicyViolations ?? ""}
                      onChange={(e) =>
                        updateLevelRequirement(level.id, "requirements.maxPolicyViolations", e.target.value)
                      }
                    />
                  </div>
                </div>

<div>
                  <Label>Benefits (one per line)</Label>
                  <Textarea
                    value={level.benefits.join("\n")}
                    onChange={(e) => updateLevelRequirement(level.id, "benefits", e.target.value)}
                    rows={4}
                  />
                </div>
              </CardContent>
            </Card>
          ))}
        </TabsContent>

<TabsContent value="overrides" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Manual Level Override</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <Label>User ID</Label>
                  <Input
                    value={manualOverrideUserId}
                    onChange={(e) => setManualOverrideUserId(e.target.value)}
                    placeholder="Enter user ID"
                  />
                </div>
                <div>
                  <Label>Level</Label>
                  <select
                    className="w-full p-2 border rounded-md"
                    value={manualOverrideLevel}
                    onChange={(e) => setManualOverrideLevel(e.target.value)}
                  >
                    <option value="">Select level</option>
                    {levelRequirements.map((level) => (
                      <option key={level.id} value={level.id}>
                        {level.displayName}
                      </option>
                    ))}
                  </select>
                </div>
              </div>
              <div className="flex gap-2">
                <Button onClick={applyManualOverride}>Apply Override</Button>
                <Button onClick={removeManualOverride} variant="outline">
                  Remove Override
                </Button>
              </div>
              <p className="text-sm text-gray-600">
                Manual overrides bypass all requirements and immediately set a seller to the specified level. Use this
                feature carefully as it overrides the automatic level calculation.
              </p>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/orders/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/profile/[username]/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useParams } from "next/navigation"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Star, MapPin, Verified, MessageCircle, ExternalLink, Plane } from "lucide-react"
import { formatDistanceToNow } from "date-fns"
import Link from "next/link"
import { ReviewDisplay } from "@/components/reviews/review-display"
import { useMarketplace } from "@/components/marketplace/marketplace-provider"

interface PublicProfile {
  id: string
  username: string
  firstName: string
  lastName: string
  bio: string
  location: string
  joinedAt: string
  isVerified: boolean
  rating: number
  totalReviews: number
  totalEarned: number
  completedJobs: number
  skills: string[]
  portfolio: {
    id: string
    title: string
    description: string
    imageUrl: string
    projectUrl?: string
    tags: string[]
    createdAt: string
  }[]
  services: {
    id: string
    title: string
    price: number
    rating: number
    totalOrders: number
    imageUrl: string
  }[]
  reviews: {
    id: string
    rating: number
    comment: string
    clientName: string
    projectTitle: string
    createdAt: string
  }[]
}

const mockProfile: PublicProfile = {
  id: "1",
  username: "sarah_designer",
  firstName: "Sarah",
  lastName: "Johnson",
  bio: "Creative UI/UX designer with 5+ years of experience in web and mobile design. I specialize in creating beautiful, user-friendly interfaces that drive engagement and conversions. Let's bring your vision to life!",
  location: "San Francisco, CA",
  joinedAt: "2023-01-15T10:00:00Z",
  isVerified: true,
  rating: 4.9,
  totalReviews: 127,
  totalEarned: 45000,
  completedJobs: 89,
  skills: ["UI/UX Design", "Figma", "Adobe XD", "Prototyping", "User Research", "Wireframing", "React", "CSS"],
  portfolio: [
    {
      id: "1",
      title: "E-commerce Mobile App",
      description: "Complete UI/UX design for a fashion e-commerce mobile application with modern, clean interface.",
      imageUrl: "/mobile-app-design-concept.png",
      projectUrl: "https://dribbble.com/shots/example",
      tags: ["Mobile Design", "E-commerce", "Figma"],
      createdAt: "2024-01-10T10:00:00Z",
    },
    {
      id: "2",
      title: "SaaS Dashboard Design",
      description: "Dashboard design for a project management SaaS platform with complex data visualization.",
      imageUrl: "/modern-data-dashboard.png",
      tags: ["Web Design", "Dashboard", "Data Viz"],
      createdAt: "2024-01-05T10:00:00Z",
    },
    {
      id: "3",
      title: "Brand Identity Package",
      description: "Complete brand identity including logo, color palette, typography, and brand guidelines.",
      imageUrl: "/brand-identity-concept.png",
      tags: ["Branding", "Logo Design", "Identity"],
      createdAt: "2023-12-20T10:00:00Z",
    },
  ],
  services: [
    {
      id: "1",
      title: "Custom Website Design",
      price: 500,
      rating: 4.9,
      totalOrders: 45,
      imageUrl: "/website-design-concept.png",
    },
    {
      id: "2",
      title: "Mobile App UI Design",
      price: 750,
      rating: 5.0,
      totalOrders: 32,
      imageUrl: "/mobile-app-ui.png",
    },
  ],
  reviews: [
    {
      id: "1",
      rating: 5,
      comment:
        "Sarah delivered exceptional work on our e-commerce redesign. Her attention to detail and understanding of user experience is outstanding. Highly recommended!",
      clientName: "Mike Chen",
      projectTitle: "E-commerce Website Redesign",
      createdAt: "2024-01-15T10:00:00Z",
    },
    {
      id: "2",
      rating: 5,
      comment:
        "Professional, creative, and delivered exactly what we needed. The mobile app design exceeded our expectations.",
      clientName: "Lisa Rodriguez",
      projectTitle: "Mobile App Design",
      createdAt: "2024-01-10T10:00:00Z",
    },
  ],
}

export default function PublicProfilePage() {
  const params = useParams()
  const [profile, setProfile] = useState<PublicProfile | null>(null)
  const [loading, setLoading] = useState(true)

const { isUserInVacationMode } = useMarketplace()

useEffect(() => {
    const loadProfile = async () => {
      setLoading(true)
      try {
        await new Promise((resolve) => setTimeout(resolve, 500))
        setProfile(mockProfile)
      } catch (error) {
        console.error("Failed to load profile:", error)
      } finally {
        setLoading(false)
      }
    }

loadProfile()
  }, [params.username])

if (!profile) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <h1 className="text-2xl font-bold text-gray-900 mb-2">Profile not found</h1>
          <p className="text-gray-600 mb-4">The user profile you're looking for doesn't exist.</p>
          <Link href="/marketplace">
            <Button>Browse Services</Button>
          </Link>
        </div>
      </div>
    )
  }

const isInVacationMode = isUserInVacationMode(profile.id)

return (
    <div className="min-h-screen bg-gray-50">
      <div className="container mx-auto px-4 py-8">
        <div className="grid lg:grid-cols-3 gap-8">
          {/* Profile Sidebar */}
          <div className="lg:col-span-1 space-y-6">
            {/* Basic Info */}
            <Card>
              <CardContent className="p-6 text-center">
                <Avatar className="h-24 w-24 mx-auto mb-4">
                  <AvatarFallback className="text-2xl">
                    {profile.firstName[0]}
                    {profile.lastName[0]}
                  </AvatarFallback>
                </Avatar>

<div className="flex items-center justify-center space-x-2 mb-2">
                  <h1 className="text-xl font-bold text-gray-900">
                    {profile.firstName} {profile.lastName}
                  </h1>
                  {profile.isVerified && <Verified className="h-5 w-5 text-blue-500" />}
                </div>

<p className="text-gray-600 mb-1">@{profile.username}</p>

{isInVacationMode && (
                  <div className="flex items-center justify-center space-x-2 mb-3 text-orange-600">
                    <Plane className="h-4 w-4" />
                    <span className="text-sm font-medium">On Vacation</span>
                  </div>
                )}

<div className="flex items-center justify-center space-x-1 mb-4">
                  <Star className="h-4 w-4 text-yellow-400 fill-current" />
                  <span className="font-medium">{profile.rating}</span>
                  <span className="text-gray-500">({profile.totalReviews} reviews)</span>
                </div>

<div className="flex items-center justify-center text-gray-600 mb-4">
                  <MapPin className="h-4 w-4 mr-1" />
                  {profile.location}
                </div>

<Button className="w-full mb-2" disabled={isInVacationMode}>
                  <MessageCircle className="mr-2 h-4 w-4" />
                  {isInVacationMode ? "Currently Unavailable" : "Contact Me"}
                </Button>

<p className="text-xs text-gray-500">
                  Member since {formatDistanceToNow(new Date(profile.joinedAt), { addSuffix: true })}
                </p>
              </CardContent>
            </Card>

{/* Stats */}
            <Card>
              <CardHeader>
                <CardTitle>Statistics</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex justify-between">
                  <span className="text-gray-600">Total Earned:</span>
                  <span className="font-medium">${profile.totalEarned.toLocaleString()}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-600">Completed Jobs:</span>
                  <span className="font-medium">{profile.completedJobs}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-600">Success Rate:</span>
                  <span className="font-medium">98%</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-600">Response Time:</span>
                  <span className="font-medium">< 1 hour</span>
                </div>
              </CardContent>
            </Card>

{/* Skills */}
            <Card>
              <CardHeader>
                <CardTitle>Skills</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="flex flex-wrap gap-2">
                  {profile.skills.map((skill) => (
                    <Badge key={skill} variant="secondary">
                      {skill}
                    </Badge>
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>

{/* Main Content */}
          <div className="lg:col-span-2">
            <Tabs defaultValue="about" className="space-y-6">
              <TabsList className="grid w-full grid-cols-4">
                <TabsTrigger value="about">About</TabsTrigger>
                <TabsTrigger value="portfolio">Portfolio</TabsTrigger>
                <TabsTrigger value="services" disabled={isInVacationMode}>
                  Services
                </TabsTrigger>
                <TabsTrigger value="reviews">Reviews</TabsTrigger>
              </TabsList>

{/* About Tab */}
              <TabsContent value="about">
                <Card>
                  <CardHeader>
                    <CardTitle>About Me</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-gray-700 leading-relaxed whitespace-pre-line">{profile.bio}</p>
                  </CardContent>
                </Card>
              </TabsContent>

{/* Portfolio Tab */}
              <TabsContent value="portfolio">
                <div className="space-y-6">
                  {profile.portfolio.map((item) => (
                    <Card key={item.id} className="hover:shadow-md transition-shadow">
                      <CardContent className="p-0">
                        <div className="grid md:grid-cols-2 gap-6">
                          <div className="aspect-video md:aspect-square">
                            <img
                              src={item.imageUrl || "/placeholder.svg"}
                              alt={item.title}
                              className="w-full h-full object-cover rounded-l-lg"
                            />
                          </div>
                          <div className="p-6">
                            <div className="flex items-start justify-between mb-3">
                              <h3 className="text-xl font-semibold text-gray-900">{item.title}</h3>
                              {item.projectUrl && (
                                <Button variant="ghost" size="sm" asChild>
                                  <a href={item.projectUrl} target="_blank" rel="noopener noreferrer">
                                    <ExternalLink className="h-4 w-4" />
                                  </a>
                                </Button>
                              )}
                            </div>
                            <p className="text-gray-600 mb-4">{item.description}</p>
                            <div className="flex flex-wrap gap-2 mb-3">
                              {item.tags.map((tag) => (
                                <Badge key={tag} variant="outline">
                                  {tag}
                                </Badge>
                              ))}
                            </div>
                            <p className="text-sm text-gray-500">
                              {formatDistanceToNow(new Date(item.createdAt), { addSuffix: true })}
                            </p>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  ))}
                </div>
              </TabsContent>

{/* Services Tab */}
              <TabsContent value="services">
                {isInVacationMode ? (
                  <Card className="border-orange-200 bg-orange-50">
                    <CardContent className="p-8 text-center">
                      <Plane className="h-12 w-12 text-orange-600 mx-auto mb-4" />
                      <h3 className="text-lg font-semibold text-orange-800 mb-2">Services Currently Unavailable</h3>
                      <p className="text-orange-700">
                        This seller is currently on vacation and their services are temporarily hidden.
                      </p>
                    </CardContent>
                  </Card>
                ) : (
                  <div className="grid md:grid-cols-2 gap-6">
                    {profile.services.map((service) => (
                      <Card key={service.id} className="hover:shadow-md transition-shadow">
                        <CardContent className="p-0">
                          <div className="aspect-video">
                            <img
                              src={service.imageUrl || "/placeholder.svg"}
                              alt={service.title}
                              className="w-full h-full object-cover rounded-t-lg"
                            />
                          </div>
                          <div className="p-4">
                            <h3 className="font-semibold text-gray-900 mb-2">{service.title}</h3>
                            <div className="flex items-center justify-between mb-3">
                              <div className="flex items-center space-x-1">
                                <Star className="h-4 w-4 text-yellow-400 fill-current" />
                                <span className="text-sm font-medium">{service.rating}</span>
                                <span className="text-sm text-gray-500">({service.totalOrders})</span>
                              </div>
                              <span className="text-lg font-bold text-green-600">${service.price}</span>
                            </div>
                            <Link href={`/marketplace/${service.id}`}>
                              <Button className="w-full" size="sm">
                                View Service
                              </Button>
                            </Link>
                          </div>
                        </CardContent>
                      </Card>
                    ))}
                  </div>
                )}
              </TabsContent>

{/* Reviews Tab */}
              <TabsContent value="reviews">
                <ReviewDisplay userId={profile.id} showTitle={false} />
              </TabsContent>
            </Tabs>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/marketplace/edit/[id]/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

export default function EditServicePage() {
  const [service, setService] = useState<StorageService | null>(null)
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [formData, setFormData] = useState({
    title: "",
    shortDescription: "",
    description: "",
    price: 0,
  })

const { user, isAuthenticated, isLoading } = useAuth()
  const router = useRouter()
  const params = useParams()
  const serviceId = params.id as string

useEffect(() => {
    if (!isLoading && !isAuthenticated) {
      router.push("/login")
    }
  }, [isAuthenticated, isLoading, router])

useEffect(() => {
    const loadService = () => {
      try {
        const foundService = serviceStorage.getById(serviceId)

if (!foundService) {
          console.log("[v0] Service not found:", serviceId)
          router.push("/dashboard/services")
          return
        }

// Check if user owns this service
        if (foundService.sellerId !== user?.id) {
          console.log("[v0] User doesn't own this service")
          router.push("/dashboard/services")
          return
        }

setService(foundService)
        setFormData({
          title: foundService.title,
          shortDescription: foundService.shortDescription,
          description: foundService.description,
          price: foundService.price,
        })
      } catch (error) {
        console.error("[v0] Error loading service:", error)
        router.push("/dashboard/services")
      } finally {
        setLoading(false)
      }
    }

if (user?.id && isAuthenticated) {
      loadService()
    }
  }, [serviceId, user?.id, router, isAuthenticated])

if (!isAuthenticated && !isLoading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <h1 className="text-2xl font-bold text-gray-900 mb-2">Authentication Required</h1>
          <p className="text-gray-600 mb-4">Please log in to edit services.</p>
          <Button onClick={() => router.push("/login")}>Log In</Button>
        </div>
      </div>
    )
  }

if (loading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-4"></div>
          <p className="text-gray-600">Loading service...</p>
        </div>
      </div>
    )
  }

if (!service) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <h1 className="text-2xl font-bold text-gray-900 mb-2">Service not found</h1>
          <p className="text-gray-600 mb-4">The service you're trying to edit doesn't exist.</p>
          <Link href="/dashboard/services">
            <Button>Back to Services</Button>
          </Link>
        </div>
      </div>
    )
  }

const handleSave = async () => {
    if (!service || !user?.id) return

setSaving(true)
    try {
      const updatedService: StorageService = {
        ...service,
        title: formData.title,
        shortDescription: formData.shortDescription,
        description: formData.description,
        price: formData.price,
        updatedAt: new Date().toISOString(),
      }

serviceStorage.update(serviceId, updatedService)
      console.log("[v0] Service updated successfully")

// Redirect back to services page
      router.push("/dashboard/services")
    } catch (error) {
      console.error("[v0] Error updating service:", error)
      alert("Failed to update service. Please try again.")
    } finally {
      setSaving(false)
    }
  }

return (
    <div className="min-h-screen bg-gray-50">
      <div className="max-w-4xl mx-auto py-8 px-4">
        <div className="mb-6">
          <Link href="/dashboard/services">
            <Button variant="ghost" className="mb-4">
              <ArrowLeft className="mr-2 h-4 w-4" />
              Back to Services
            </Button>
          </Link>
          <h1 className="text-3xl font-bold text-gray-900">Edit Service</h1>
          <p className="text-gray-600">Update your service details and pricing</p>
        </div>

<Card>
          <CardHeader>
            <CardTitle>Service Information</CardTitle>
          </CardHeader>
          <CardContent className="space-y-6">
            <div>
              <Label htmlFor="title">Service Title</Label>
              <Input
                id="title"
                value={formData.title}
                onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                placeholder="Enter service title"
                className="mt-1"
              />
            </div>

<div>
              <Label htmlFor="shortDescription">Short Description</Label>
              <Textarea
                id="shortDescription"
                value={formData.shortDescription}
                onChange={(e) => setFormData({ ...formData, shortDescription: e.target.value })}
                placeholder="Brief description that appears in search results"
                className="mt-1"
                rows={2}
              />
            </div>

<div>
              <Label htmlFor="description">Full Description</Label>
              <Textarea
                id="description"
                value={formData.description}
                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                placeholder="Detailed description of your service"
                className="mt-1"
                rows={6}
              />
            </div>

<div>
              <Label htmlFor="price">Price ($)</Label>
              <Input
                id="price"
                type="number"
                value={formData.price}
                onChange={(e) => setFormData({ ...formData, price: Number(e.target.value) })}
                placeholder="Enter price"
                className="mt-1"
                min="1"
              />
            </div>

<div className="flex justify-end space-x-4">
              <Link href="/dashboard/services">
                <Button variant="outline">Cancel</Button>
              </Link>
              <Button onClick={handleSave} disabled={saving}>
                {saving ? (
                  <>
                    <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
                    Saving...
                  </>
                ) : (
                  <>
                    <Save className="mr-2 h-4 w-4" />
                    Save Changes
                  </>
                )}
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/analytics/service/[id]/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useRouter, useParams } from "next/navigation"
import { useAuth } from "@/contexts/auth-context"
import { serviceStorage, type StorageService } from "@/lib/local-storage"
import { DashboardHeader } from "@/components/dashboard/dashboard-header"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  LineChart,
  Line,
  PieChart,
  Pie,
  Cell,
  AreaChart,
  Area,
} from "recharts"
import { ArrowLeft, Eye, ShoppingCart, Star, DollarSign, Target, Zap } from "lucide-react"
import Link from "next/link"

const generateEnhancedMockData = (serviceId: string) => {
  const hourlyViews = Array.from({ length: 24 }, (_, i) => ({
    hour: `${i}:00`,
    views: Math.floor(Math.random() * 20) + 5,
    clicks: Math.floor(Math.random() * 10) + 2,
  }))

const dailyViews = [
    { day: "Mon", views: Math.floor(Math.random() * 50) + 10, orders: Math.floor(Math.random() * 5) + 1 },
    { day: "Tue", views: Math.floor(Math.random() * 50) + 10, orders: Math.floor(Math.random() * 5) + 1 },
    { day: "Wed", views: Math.floor(Math.random() * 50) + 10, orders: Math.floor(Math.random() * 5) + 1 },
    { day: "Thu", views: Math.floor(Math.random() * 50) + 10, orders: Math.floor(Math.random() * 5) + 1 },
    { day: "Fri", views: Math.floor(Math.random() * 50) + 10, orders: Math.floor(Math.random() * 5) + 1 },
    { day: "Sat", views: Math.floor(Math.random() * 50) + 10, orders: Math.floor(Math.random() * 5) + 1 },
    { day: "Sun", views: Math.floor(Math.random() * 50) + 10, orders: Math.floor(Math.random() * 5) + 1 },
  ]

const weeklyData = Array.from({ length: 12 }, (_, i) => ({
    week: `Week ${i + 1}`,
    views: Math.floor(Math.random() * 200) + 50,
    orders: Math.floor(Math.random() * 15) + 3,
    revenue: Math.floor(Math.random() * 500) + 100,
  }))

const monthlyOrders = [
    { month: "Jul", orders: Math.floor(Math.random() * 20) + 5, revenue: Math.floor(Math.random() * 1000) + 200 },
    { month: "Aug", orders: Math.floor(Math.random() * 20) + 5, revenue: Math.floor(Math.random() * 1000) + 200 },
    { month: "Sep", orders: Math.floor(Math.random() * 20) + 5, revenue: Math.floor(Math.random() * 1000) + 200 },
    { month: "Oct", orders: Math.floor(Math.random() * 20) + 5, revenue: Math.floor(Math.random() * 1000) + 200 },
    { month: "Nov", orders: Math.floor(Math.random() * 20) + 5, revenue: Math.floor(Math.random() * 1000) + 200 },
    { month: "Dec", orders: Math.floor(Math.random() * 20) + 5, revenue: Math.floor(Math.random() * 1000) + 200 },
  ]

const trafficSources = [
    { name: "Direct", value: 35, color: "#3b82f6" },
    { name: "Search", value: 28, color: "#10b981" },
    { name: "Social Media", value: 20, color: "#f59e0b" },
    { name: "Referrals", value: 12, color: "#ef4444" },
    { name: "Email", value: 5, color: "#8b5cf6" },
  ]

const demographics = [
    { age: "18-24", percentage: 15 },
    { age: "25-34", percentage: 35 },
    { age: "35-44", percentage: 28 },
    { age: "45-54", percentage: 15 },
    { age: "55+", percentage: 7 },
  ]

const topCountries = [
    { country: "United States", orders: 45, revenue: 2250 },
    { country: "United Kingdom", orders: 23, revenue: 1150 },
    { country: "Canada", orders: 18, revenue: 900 },
    { country: "Australia", orders: 12, revenue: 600 },
    { country: "Germany", orders: 8, revenue: 400 },
  ]

return {
    hourlyViews,
    dailyViews,
    weeklyData,
    monthlyOrders,
    trafficSources,
    demographics,
    topCountries,
  }
}

export default function ServiceAnalyticsPage() {
  const [service, setService] = useState<StorageService | null>(null)
  const [loading, setLoading] = useState(true)
  const [analyticsData, setAnalyticsData] = useState<any>(null)
  const [timeRange, setTimeRange] = useState("7days")

const { user } = useAuth()
  const router = useRouter()
  const params = useParams()
  const serviceId = params.id as string

useEffect(() => {
    const loadService = () => {
      try {
        const foundService = serviceStorage.getById(serviceId)

if (!foundService) {
          console.log("[v0] Service not found:", serviceId)
          router.push("/dashboard/services")
          return
        }

if (foundService.sellerId !== user?.id) {
          console.log("[v0] User doesn't own this service")
          router.push("/dashboard/services")
          return
        }

setService(foundService)
        setAnalyticsData(generateEnhancedMockData(serviceId))
      } catch (error) {
        console.error("[v0] Error loading service:", error)
        router.push("/dashboard/services")
      } finally {
        setLoading(false)
      }
    }

if (user?.id) {
      loadService()
    }
  }, [serviceId, user?.id, router])

if (loading) {
    return (
      <>
        <DashboardHeader title="Service Analytics" description="Loading service analytics..." />
        <div className="flex-1 overflow-auto p-6">
          <div className="text-center py-8">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-4"></div>
            <p className="text-gray-600">Loading analytics...</p>
          </div>
        </div>
      </>
    )
  }

if (!service) {
    return (
      <>
        <DashboardHeader title="Service Analytics" description="Service not found" />
        <div className="flex-1 overflow-auto p-6">
          <div className="text-center py-8">
            <h2 className="text-xl font-semibold text-gray-900 mb-2">Service not found</h2>
            <p className="text-gray-600 mb-4">The service you're looking for doesn't exist.</p>
            <Link href="/dashboard/services">
              <Button>Back to Services</Button>
            </Link>
          </div>
        </div>
      </>
    )
  }

const conversionRate = ((service.totalOrders / service.viewsCount) * 100).toFixed(2)
  const avgOrderValue = service.price
  const totalRevenue = service.totalOrders * service.price
  const impressionClickRate = (85.5).toFixed(1) // Mock CTR

return (
    <>
      <DashboardHeader
        title={`Analytics: ${service.title}`}
        description="Comprehensive performance metrics and insights"
      />

<div className="flex-1 overflow-auto p-6">
        <div className="space-y-6">
          <div className="flex items-center justify-between">
            <Link href="/dashboard/services">
              <Button variant="ghost" size="sm">
                <ArrowLeft className="mr-2 h-4 w-4" />
                Back to Services
              </Button>
            </Link>
            <Select value={timeRange} onValueChange={setTimeRange}>
              <SelectTrigger className="w-48">
                <SelectValue placeholder="Select time range" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="24hours">Last 24 Hours</SelectItem>
                <SelectItem value="7days">Last 7 Days</SelectItem>
                <SelectItem value="30days">Last 30 Days</SelectItem>
                <SelectItem value="90days">Last 3 Months</SelectItem>
                <SelectItem value="1year">Last Year</SelectItem>
              </SelectContent>
            </Select>
          </div>

{/* Service Overview */}
          <Card>
            <CardHeader>
              <CardTitle>Service Overview</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="flex items-start space-x-4">
                <img
                  src={service.images[0] || "/placeholder.svg"}
                  alt={service.title}
                  className="w-20 h-20 object-cover rounded-lg"
                />
                <div>
                  <h3 className="text-lg font-semibold">{service.title}</h3>
                  <p className="text-gray-600 text-sm">{service.shortDescription}</p>
                  <div className="flex items-center space-x-4 mt-2 text-sm text-gray-600">
                    <span className="font-semibold text-green-600">${service.price}</span>
                    <span>⭐ {service.rating}</span>
                    <span>{service.totalOrders} orders</span>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 gap-4">
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Total Views</CardTitle>
                <Eye className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{service.viewsCount}</div>
                <p className="text-xs text-muted-foreground">+12% from last week</p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Total Orders</CardTitle>
                <ShoppingCart className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{service.totalOrders}</div>
                <p className="text-xs text-muted-foreground">+8% from last week</p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Conversion Rate</CardTitle>
                <Target className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{conversionRate}%</div>
                <p className="text-xs text-muted-foreground">+2.1% from last week</p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Avg Rating</CardTitle>
                <Star className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{service.rating}</div>
                <p className="text-xs text-muted-foreground">Based on reviews</p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Total Revenue</CardTitle>
                <DollarSign className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">${totalRevenue.toLocaleString()}</div>
                <p className="text-xs text-muted-foreground">+15% from last month</p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Click Rate</CardTitle>
                <Zap className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{impressionClickRate}%</div>
                <p className="text-xs text-muted-foreground">Impression to click</p>
              </CardContent>
            </Card>
          </div>

<Tabs defaultValue="performance" className="space-y-6">
            <TabsList className="grid w-full grid-cols-4">
              <TabsTrigger value="performance">Performance</TabsTrigger>
              <TabsTrigger value="audience">Audience</TabsTrigger>
              <TabsTrigger value="geography">Geography</TabsTrigger>
              <TabsTrigger value="revenue">Revenue</TabsTrigger>
            </TabsList>

<TabsContent value="performance" className="space-y-6">
              <div className="grid lg:grid-cols-2 gap-6">
                {/* Hourly Views */}
                <Card>
                  <CardHeader>
                    <CardTitle>Hourly Views (Last 24 Hours)</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <ResponsiveContainer width="100%" height={300}>
                      <AreaChart data={analyticsData?.hourlyViews}>
                        <CartesianGrid strokeDasharray="3 3" />
                        <XAxis dataKey="hour" />
                        <YAxis />
                        <Tooltip />
                        <Area type="monotone" dataKey="views" stroke="#3b82f6" fill="#3b82f6" fillOpacity={0.3} />
                      </AreaChart>
                    </ResponsiveContainer>
                  </CardContent>
                </Card>

{/* Daily Performance */}
                <Card>
                  <CardHeader>
                    <CardTitle>Daily Performance (Last 7 Days)</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <ResponsiveContainer width="100%" height={300}>
                      <LineChart data={analyticsData?.dailyViews}>
                        <CartesianGrid strokeDasharray="3 3" />
                        <XAxis dataKey="day" />
                        <YAxis />
                        <Tooltip />
                        <Line type="monotone" dataKey="views" stroke="#3b82f6" strokeWidth={2} name="Views" />
                        <Line type="monotone" dataKey="orders" stroke="#10b981" strokeWidth={2} name="Orders" />
                      </LineChart>
                    </ResponsiveContainer>
                  </CardContent>
                </Card>

{/* Weekly Trends */}
                <Card>
                  <CardHeader>
                    <CardTitle>Weekly Trends (Last 12 Weeks)</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <ResponsiveContainer width="100%" height={300}>
                      <BarChart data={analyticsData?.weeklyData}>
                        <CartesianGrid strokeDasharray="3 3" />
                        <XAxis dataKey="week" />
                        <YAxis />
                        <Tooltip />
                        <Bar dataKey="views" fill="#3b82f6" name="Views" />
                        <Bar dataKey="orders" fill="#10b981" name="Orders" />
                      </BarChart>
                    </ResponsiveContainer>
                  </CardContent>
                </Card>

{/* Traffic Sources */}
                <Card>
                  <CardHeader>
                    <CardTitle>Traffic Sources</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <ResponsiveContainer width="100%" height={300}>
                      <PieChart>
                        <Pie
                          data={analyticsData?.trafficSources}
                          cx="50%"
                          cy="50%"
                          outerRadius={100}
                          fill="#8884d8"
                          dataKey="value"
                          label={({ name, value }) => `${name}: ${value}%`}
                        >
                          {analyticsData?.trafficSources.map((entry: any, index: number) => (
                            <Cell key={`cell-${index}`} fill={entry.color} />
                          ))}
                        </Pie>
                        <Tooltip />
                      </PieChart>
                    </ResponsiveContainer>
                  </CardContent>
                </Card>
              </div>
            </TabsContent>

<TabsContent value="audience" className="space-y-6">
              <div className="grid lg:grid-cols-2 gap-6">
                {/* Age Demographics */}
                <Card>
                  <CardHeader>
                    <CardTitle>Age Demographics</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <ResponsiveContainer width="100%" height={300}>
                      <BarChart data={analyticsData?.demographics}>
                        <CartesianGrid strokeDasharray="3 3" />
                        <XAxis dataKey="age" />
                        <YAxis />
                        <Tooltip />
                        <Bar dataKey="percentage" fill="#8b5cf6" />
                      </BarChart>
                    </ResponsiveContainer>
                  </CardContent>
                </Card>

{/* Audience Insights */}
                <Card>
                  <CardHeader>
                    <CardTitle>Audience Insights</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="flex items-center justify-between">
                      <span className="text-sm font-medium">Returning Customers</span>
                      <span className="text-sm text-gray-600">68%</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm font-medium">Average Session Duration</span>
                      <span className="text-sm text-gray-600">3m 24s</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm font-medium">Bounce Rate</span>
                      <span className="text-sm text-gray-600">24%</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm font-medium">Peak Activity Time</span>
                      <span className="text-sm text-gray-600">2:00 PM - 4:00 PM</span>
                    </div>
                  </CardContent>
                </Card>
              </div>
            </TabsContent>

<TabsContent value="geography" className="space-y-6">
              <Card>
                <CardHeader>
                  <CardTitle>Top Countries by Orders</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {analyticsData?.topCountries.map((country: any, index: number) => (
                      <div
                        key={country.country}
                        className="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
                      >
                        <div className="flex items-center space-x-3">
                          <span className="text-sm font-medium text-gray-600">#{index + 1}</span>
                          <span className="font-medium">{country.country}</span>
                        </div>
                        <div className="text-right">
                          <div className="font-semibold">{country.orders} orders</div>
                          <div className="text-sm text-gray-600">${country.revenue}</div>
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="revenue" className="space-y-6">
              <div className="grid lg:grid-cols-2 gap-6">
                {/* Monthly Revenue */}
                <Card>
                  <CardHeader>
                    <CardTitle>Monthly Revenue (Last 6 Months)</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <ResponsiveContainer width="100%" height={300}>
                      <AreaChart data={analyticsData?.monthlyOrders}>
                        <CartesianGrid strokeDasharray="3 3" />
                        <XAxis dataKey="month" />
                        <YAxis />
                        <Tooltip />
                        <Area type="monotone" dataKey="revenue" stroke="#10b981" fill="#10b981" fillOpacity={0.3} />
                      </AreaChart>
                    </ResponsiveContainer>
                  </CardContent>
                </Card>

{/* Revenue Breakdown */}
                <Card>
                  <CardHeader>
                    <CardTitle>Revenue Breakdown</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="flex items-center justify-between">
                      <span className="text-sm font-medium">Gross Revenue</span>
                      <span className="text-sm font-semibold text-green-600">${totalRevenue.toLocaleString()}</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm font-medium">Platform Fee (5%)</span>
                      <span className="text-sm text-red-600">-${(totalRevenue * 0.05).toLocaleString()}</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm font-medium">Processing Fee (3%)</span>
                      <span className="text-sm text-red-600">-${(totalRevenue * 0.03).toLocaleString()}</span>
                    </div>
                    <hr />
                    <div className="flex items-center justify-between">
                      <span className="font-medium">Net Revenue</span>
                      <span className="font-semibold text-green-600">${(totalRevenue * 0.92).toLocaleString()}</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm font-medium">Average Order Value</span>
                      <span className="text-sm text-gray-600">${avgOrderValue}</span>
                    </div>
                  </CardContent>
                </Card>
              </div>
            </TabsContent>
          </Tabs>
        </div>
      </div>
    </>
  )
}
[V0_FILE]typescript:file="lib/marketplace-orders.ts" isQuickEdit="true" isMerged="true"
export interface MarketplaceOrder {
  id: string
  serviceId: string
  sellerId: string
  buyerId: string
  serviceName: string
  serviceImage?: string
  tier: "basic" | "standard" | "premium"
  price: number
  deliveryTime: number // in days
  status:
    | "awaiting_acceptance"
    | "pending"
    | "in_progress"
    | "delivered"
    | "completed"
    | "cancelled"
    | "disputed"
    | "dispute_resolved"
  createdAt: string
  acceptedAt?: string
  deliveredAt?: string
  completedAt?: string
  disputedAt?: string

// Countdown timers
  acceptanceDeadline?: string
  reviewDeadline?: string

// Order details
  requirements: string
  deliverables?: {
    files: string[]
    message: string
    submittedAt: string
  }

// Communication
  messages: OrderMessage[]

// Dispute info
  disputeReason?: string
  disputeDetails?: string
  adminDecision?: "refund_buyer" | "pay_seller"
  adminNotes?: string
}

export interface OrderMessage {
  id: string
  senderId: string
  senderType: "buyer" | "seller" | "admin"
  message: string
  files?: string[]
  timestamp: string
}

export interface OrderSettings {
  acceptanceWindowHours: number
  reviewPeriodDays: number
  autoReleasePayment: boolean
}

export interface WalletTransaction {
  id: string
  userId: string
  type: "deposit" | "withdrawal" | "order_hold" | "order_release" | "refund"
  amount: number
  orderId?: string
  description: string
  timestamp: string
  status: "pending" | "completed" | "failed"
}

class MarketplaceOrderManager {
  private readonly ORDERS_KEY = "marketplace_orders"
  private readonly SETTINGS_KEY = "marketplace_order_settings"
  private readonly WALLET_KEY = "marketplace_wallets"
  private readonly TRANSACTIONS_KEY = "marketplace_transactions"

// Default settings
  private defaultSettings: OrderSettings = {
    acceptanceWindowHours: 24,
    reviewPeriodDays: 3,
    autoReleasePayment: true,
  }

// Order Management
  createOrder(
    orderData: Omit<MarketplaceOrder, "id" | "status" | "createdAt" | "acceptanceDeadline" | "messages">,
  ): MarketplaceOrder {
    const settings = this.getSettings()
    const orderId = `order_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`

const acceptanceDeadline = new Date()
    acceptanceDeadline.setHours(acceptanceDeadline.getHours() + settings.acceptanceWindowHours)

const order: MarketplaceOrder = {
      ...orderData,
      id: orderId,
      status: "awaiting_acceptance",
      createdAt: new Date().toISOString(),
      acceptanceDeadline: acceptanceDeadline.toISOString(),
      messages: [],
    }

// Hold money in buyer's wallet
    this.holdOrderPayment(orderData.buyerId, order.price, orderId)

this.saveOrder(order)
    return order
  }

acceptOrder(orderId: string, sellerId: string): boolean {
    const order = this.getOrder(orderId)
    if (!order || order.sellerId !== sellerId || order.status !== "awaiting_acceptance") {
      return false
    }

// Check if acceptance window hasn't expired
    if (new Date() > new Date(order.acceptanceDeadline!)) {
      this.cancelOrder(orderId, "Acceptance window expired")
      return false
    }

order.status = "pending"
    order.acceptedAt = new Date().toISOString()

// Calculate delivery deadline
    const deliveryDeadline = new Date()
    deliveryDeadline.setDate(deliveryDeadline.getDate() + order.deliveryTime)

this.saveOrder(order)
    return true
  }

declineOrder(orderId: string, sellerId: string, reason?: string): boolean {
    const order = this.getOrder(orderId)
    if (!order || order.sellerId !== sellerId || order.status !== "awaiting_acceptance") {
      return false
    }

return this.cancelOrder(orderId, reason || "Declined by seller")
  }

updateOrderStatus(orderId: string, sellerId: string, newStatus: "pending" | "in_progress" | "delivered"): boolean {
    const order = this.getOrder(orderId)
    if (!order || order.sellerId !== sellerId) {
      return false
    }

const validTransitions: Record<string, string[]> = {
      pending: ["in_progress"],
      in_progress: ["delivered"],
      delivered: [], // Can't change from delivered
    }

if (!validTransitions[order.status]?.includes(newStatus)) {
      return false
    }

order.status = newStatus

if (newStatus === "delivered") {
      order.deliveredAt = new Date().toISOString()

// Start review countdown
      const settings = this.getSettings()
      const reviewDeadline = new Date()
      reviewDeadline.setDate(reviewDeadline.getDate() + settings.reviewPeriodDays)
      order.reviewDeadline = reviewDeadline.toISOString()

// Schedule auto-release if enabled
      if (settings.autoReleasePayment) {
        this.scheduleAutoRelease(orderId, reviewDeadline)
      }
    }

this.saveOrder(order)
    return true
  }

submitDelivery(orderId: string, sellerId: string, deliverables: { files: string[]; message: string }): boolean {
    const order = this.getOrder(orderId)
    if (!order || order.sellerId !== sellerId || order.status !== "in_progress") {
      return false
    }

order.deliverables = {
      ...deliverables,
      submittedAt: new Date().toISOString(),
    }

return this.updateOrderStatus(orderId, sellerId, "delivered")
  }

releasePayment(orderId: string, buyerId: string): boolean {
    const order = this.getOrder(orderId)
    if (!order || order.buyerId !== buyerId || order.status !== "delivered") {
      return false
    }

order.status = "completed"
    order.completedAt = new Date().toISOString()

// Release payment to seller
    this.releaseOrderPayment(order.buyerId, order.sellerId, order.price, orderId)

this.saveOrder(order)
    return true
  }

openDispute(orderId: string, buyerId: string, reason: string, details: string): boolean {
    const order = this.getOrder(orderId)
    if (!order || order.buyerId !== buyerId || order.status !== "delivered") {
      return false
    }

order.status = "disputed"
    order.disputedAt = new Date().toISOString()
    order.disputeReason = reason
    order.disputeDetails = details

this.saveOrder(order)
    return true
  }

resolveDispute(orderId: string, adminId: string, decision: "refund_buyer" | "pay_seller", notes?: string): boolean {
    const order = this.getOrder(orderId)
    if (!order || order.status !== "disputed") {
      return false
    }

order.status = "dispute_resolved"
    order.adminDecision = decision
    order.adminNotes = notes
    order.completedAt = new Date().toISOString()

// Handle payment based on decision
    if (decision === "refund_buyer") {
      this.refundOrderPayment(order.buyerId, order.price, orderId)
    } else {
      this.releaseOrderPayment(order.buyerId, order.sellerId, order.price, orderId)
    }

this.saveOrder(order)
    return true
  }

cancelOrder(orderId: string, reason: string): boolean {
    const order = this.getOrder(orderId)
    if (!order || !["awaiting_acceptance", "pending"].includes(order.status)) {
      return false
    }

order.status = "cancelled"
    order.completedAt = new Date().toISOString()

// Refund buyer
    this.refundOrderPayment(order.buyerId, order.price, orderId)

this.saveOrder(order)
    return true
  }

updateOrderRequirements(orderId: string, buyerId: string, requirements: string): boolean {
    const order = this.getOrder(orderId)
    if (!order || order.buyerId !== buyerId) {
      return false
    }

// Only allow requirements updates for orders that haven't started work yet
    if (!["awaiting_acceptance", "pending"].includes(order.status)) {
      return false
    }

order.requirements = requirements
    this.saveOrder(order)
    return true
  }

// Message Management
  addMessage(
    orderId: string,
    senderId: string,
    senderType: "buyer" | "seller" | "admin",
    message: string,
    files?: string[],
  ): boolean {
    const order = this.getOrder(orderId)
    if (!order) return false

const messageObj: OrderMessage = {
      id: `msg_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
      senderId,
      senderType,
      message,
      files,
      timestamp: new Date().toISOString(),
    }

order.messages.push(messageObj)
    this.saveOrder(order)
    return true
  }

// Wallet Management
  getWalletBalance(userId: string): number {
    const wallets = this.getWallets()
    return wallets[userId] || 0
  }

depositToWallet(userId: string, amount: number): boolean {
    if (amount <= 0) return false

const wallets = this.getWallets()
    wallets[userId] = (wallets[userId] || 0) + amount

this.saveWallets(wallets)
    this.addTransaction(userId, "deposit", amount, undefined, `Wallet deposit of $${amount}`)
    return true
  }

withdrawFromWallet(userId: string, amount: number): boolean {
    const balance = this.getWalletBalance(userId)
    if (amount <= 0 || amount > balance) return false

const wallets = this.getWallets()
    wallets[userId] = balance - amount

this.saveWallets(wallets)
    this.addTransaction(userId, "withdrawal", -amount, undefined, `Wallet withdrawal of $${amount}`)
    return true
  }

private holdOrderPayment(buyerId: string, amount: number, orderId: string): boolean {
    const balance = this.getWalletBalance(buyerId)
    if (amount > balance) return false

const wallets = this.getWallets()
    wallets[buyerId] = balance - amount

this.saveWallets(wallets)
    this.addTransaction(buyerId, "order_hold", -amount, orderId, `Payment held for order ${orderId}`)
    return true
  }

private releaseOrderPayment(buyerId: string, sellerId: string, amount: number, orderId: string): void {
    const wallets = this.getWallets()
    wallets[sellerId] = (wallets[sellerId] || 0) + amount

this.saveWallets(wallets)
    this.addTransaction(sellerId, "order_release", amount, orderId, `Payment received for order ${orderId}`)
  }

private refundOrderPayment(buyerId: string, amount: number, orderId: string): void {
    const wallets = this.getWallets()
    wallets[buyerId] = (wallets[buyerId] || 0) + amount

this.saveWallets(wallets)
    this.addTransaction(buyerId, "refund", amount, orderId, `Refund for order ${orderId}`)
  }

private addTransaction(
    userId: string,
    type: WalletTransaction["type"],
    amount: number,
    orderId?: string,
    description?: string,
  ): void {
    const transactions = this.getTransactions()
    const transaction: WalletTransaction = {
      id: `txn_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
      userId,
      type,
      amount,
      orderId,
      description: description || "",
      timestamp: new Date().toISOString(),
      status: "completed",
    }

transactions.push(transaction)
    localStorage.setItem(this.TRANSACTIONS_KEY, JSON.stringify(transactions))
  }

// Auto-release scheduling (simplified - in real app would use proper scheduling)
  private scheduleAutoRelease(orderId: string, deadline: Date): void {
    const timeUntilRelease = deadline.getTime() - Date.now()
    if (timeUntilRelease > 0) {
      setTimeout(() => {
        const order = this.getOrder(orderId)
        if (order && order.status === "delivered") {
          this.releasePayment(orderId, order.buyerId)
        }
      }, timeUntilRelease)
    }
  }

// Data persistence
  private saveOrder(order: MarketplaceOrder): void {
    const orders = this.getAllOrders()
    const index = orders.findIndex((o) => o.id === order.id)

if (index >= 0) {
      orders[index] = order
    } else {
      orders.push(order)
    }

localStorage.setItem(this.ORDERS_KEY, JSON.stringify(orders))
  }

getOrder(orderId: string): MarketplaceOrder | null {
    const orders = this.getAllOrders()
    return orders.find((o) => o.id === orderId) || null
  }

getAllOrders(): MarketplaceOrder[] {
    const stored = localStorage.getItem(this.ORDERS_KEY)
    return stored ? JSON.parse(stored) : []
  }

getOrdersByUser(userId: string, userType: "buyer" | "seller"): MarketplaceOrder[] {
    const orders = this.getAllOrders()
    return orders.filter((order) => (userType === "buyer" ? order.buyerId === userId : order.sellerId === userId))
  }

getOrdersByStatus(status: MarketplaceOrder["status"]): MarketplaceOrder[] {
    return this.getAllOrders().filter((order) => order.status === status)
  }

// Settings Management
  getSettings(): OrderSettings {
    const stored = localStorage.getItem(this.SETTINGS_KEY)
    return stored ? { ...this.defaultSettings, ...JSON.parse(stored) } : this.defaultSettings
  }

updateSettings(settings: Partial<OrderSettings>): void {
    const current = this.getSettings()
    const updated = { ...current, ...settings }
    localStorage.setItem(this.SETTINGS_KEY, JSON.stringify(updated))
  }

// Wallet data
  private getWallets(): Record<string, number> {
    const stored = localStorage.getItem(this.WALLET_KEY)
    return stored ? JSON.parse(stored) : {}
  }

private saveWallets(wallets: Record<string, number>): void {
    localStorage.setItem(this.WALLET_KEY, JSON.stringify(wallets))
  }

getTransactions(userId?: string): WalletTransaction[] {
    const stored = localStorage.getItem(this.TRANSACTIONS_KEY)
    const transactions: WalletTransaction[] = stored ? JSON.parse(stored) : []

return userId ? transactions.filter((t) => t.userId === userId) : transactions
  }

// Utility methods
  isOrderExpired(order: MarketplaceOrder): boolean {
    if (order.status === "awaiting_acceptance" && order.acceptanceDeadline) {
      return new Date() > new Date(order.acceptanceDeadline)
    }
    if (order.status === "delivered" && order.reviewDeadline) {
      return new Date() > new Date(order.reviewDeadline)
    }
    return false
  }

getTimeRemaining(deadline: string): { days: number; hours: number; minutes: number } {
    const now = new Date().getTime()
    const target = new Date(deadline).getTime()
    const diff = target - now

if (diff <= 0) {
      return { days: 0, hours: 0, minutes: 0 }
    }

const days = Math.floor(diff / (1000 * 60 * 60 * 24))
    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))

return { days, hours, minutes }
  }

// Admin methods
  getAllOrdersForAdmin(): MarketplaceOrder[] {
    return this.getAllOrders()
  }

getDisputedOrders(): MarketplaceOrder[] {
    return this.getOrdersByStatus("disputed")
  }

// Cleanup expired orders
  cleanupExpiredOrders(): void {
    const orders = this.getAllOrders()
    const now = new Date()

orders.forEach((order) => {
      if (order.status === "awaiting_acceptance" && order.acceptanceDeadline) {
        if (now > new Date(order.acceptanceDeadline)) {
          this.cancelOrder(order.id, "Acceptance window expired")
        }
      } else if (order.status === "delivered" && order.reviewDeadline) {
        if (now > new Date(order.reviewDeadline)) {
          const settings = this.getSettings()
          if (settings.autoReleasePayment) {
            this.releasePayment(order.id, order.buyerId)
          }
        }
      }
    })
  }
}

// Export singleton instance
export const marketplaceOrderManager = new MarketplaceOrderManager()

// Helper functions
export const formatOrderStatus = (status: MarketplaceOrder["status"]): string => {
  const statusMap: Record<MarketplaceOrder["status"], string> = {
    awaiting_acceptance: "Awaiting Seller Acceptance",
    pending: "Pending",
    in_progress: "In Progress",
    delivered: "Delivered",
    completed: "Completed",
    cancelled: "Cancelled",
    disputed: "Disputed",
    dispute_resolved: "Dispute Resolved",
  }
  return statusMap[status] || status
}

export const getOrderStatusColor = (status: MarketplaceOrder["status"]): string => {
  const colorMap: Record<MarketplaceOrder["status"], string> = {
    awaiting_acceptance: "text-yellow-600 bg-yellow-50",
    pending: "text-blue-600 bg-blue-50",
    in_progress: "text-purple-600 bg-purple-50",
    delivered: "text-green-600 bg-green-50",
    completed: "text-green-700 bg-green-100",
    cancelled: "text-red-600 bg-red-50",
    disputed: "text-orange-600 bg-orange-50",
    dispute_resolved: "text-gray-600 bg-gray-50",
  }
  return colorMap[status] || "text-gray-600 bg-gray-50"
}
[V0_FILE]typescriptreact:file="app/dashboard/services/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useAuth } from "@/contexts/auth-context"
import { useRouter } from "next/navigation"
import { DashboardHeader } from "@/components/dashboard/dashboard-header"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Switch } from "@/components/ui/switch"
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"
import { Plus, Star, Eye, ShoppingCart, BarChart3, Edit, Package, Plane } from "lucide-react"
import Link from "next/link"
import { serviceStorage, type StorageService } from "@/lib/local-storage"

const getStatusColor = (status: string) => {
  switch (status) {
    case "active":
      return "bg-green-100 text-green-800"
    case "paused":
      return "bg-yellow-100 text-yellow-800"
    case "draft":
      return "bg-gray-100 text-gray-800"
    default:
      return "bg-gray-100 text-gray-800"
  }
}

export default function ServicesPage() {
  const [services, setServices] = useState<StorageService[]>([])
  const [loading, setLoading] = useState(true)
  const [vacationMode, setVacationMode] = useState(false)
  const [currentPage, setCurrentPage] = useState(1)
  const itemsPerPage = 5
  const { user } = useAuth()
  const router = useRouter()

useEffect(() => {
    const loadServices = () => {
      try {
        console.log("[v0] Loading services for current user...")
        if (!user?.id) {
          console.log("[v0] No user ID available, skipping service load")
          setServices([])
          return
        }

const userServices = serviceStorage.getBySeller(user.id)
        const sortedServices = userServices.sort((a, b) => {
          const dateA = new Date(a.createdAt || 0).getTime()
          const dateB = new Date(b.createdAt || 0).getTime()
          return dateB - dateA
        })
        console.log("[v0] Found services:", sortedServices.length)
        setServices(sortedServices)
      } catch (error) {
        console.error("[v0] Error loading services:", error)
        setServices([])
      } finally {
        setLoading(false)
      }
    }

const loadVacationMode = () => {
      if (!user?.id) return
      const savedVacationMode = localStorage.getItem(`vacation_mode_${user.id}`)
      setVacationMode(savedVacationMode === "true")
    }

loadServices()
    loadVacationMode()

const handleStorageChange = (e: StorageEvent) => {
      if (e.key === "marketplace_services") {
        console.log("[v0] Services updated, reloading...")
        loadServices()
      }
    }

window.addEventListener("storage", handleStorageChange)
    return () => window.removeEventListener("storage", handleStorageChange)
  }, [user?.id])

const handleVacationModeToggle = (enabled: boolean) => {
    if (!user?.id) return

setVacationMode(enabled)
    localStorage.setItem(`vacation_mode_${user.id}`, enabled.toString())

console.log("[v0] Vacation mode", enabled ? "enabled" : "disabled")

if (enabled) {
      alert("Vacation mode enabled! Your services are now hidden from the marketplace.")
    } else {
      alert("Vacation mode disabled! Your services are now visible in the marketplace.")
    }
  }

const handleServiceClick = (serviceId: string) => {
    console.log("[v0] Navigating to service:", serviceId)
    router.push(`/marketplace/${serviceId}`)
  }

const handleViewOrders = (e: React.MouseEvent, serviceId: string) => {
    e.stopPropagation()
    console.log("[v0] Viewing orders for service:", serviceId)
    router.push(`/dashboard/orders?service=${serviceId}`)
  }

const handleEditService = (e: React.MouseEvent, serviceId: string) => {
    e.stopPropagation()
    console.log("[v0] Editing service:", serviceId)
    router.push(`/marketplace/edit/${serviceId}`)
  }

const handleViewAnalytics = (e: React.MouseEvent, serviceId: string) => {
    e.stopPropagation()
    console.log("[v0] Viewing analytics for service:", serviceId)
    router.push(`/dashboard/analytics/service/${serviceId}`)
  }

const activeServices = services.filter((service) => service.status === "active")
  const pausedServices = services.filter((service) => service.status === "paused")
  const draftServices = services.filter((service) => service.status === "draft")

const ServiceCard = ({ service }: { service: StorageService }) => (
    <Card
      key={service.id}
      className="hover:shadow-md transition-shadow cursor-pointer"
      onClick={() => handleServiceClick(service.id)}
    >
      <CardContent className="p-6">
        <div className="flex space-x-4">
          <div className="flex-shrink-0">
            <img
              src={service.images[0] || "/placeholder.svg"}
              alt={service.title}
              className="w-24 h-24 object-cover rounded-lg"
            />
          </div>

<div className="flex-1 min-w-0">
            <div className="flex items-start justify-between mb-2">
              <h3 className="text-lg font-semibold text-gray-900 truncate hover:text-blue-600 transition-colors">
                {service.title}
              </h3>
              <Badge className={getStatusColor(service.status)}>{service.status}</Badge>
            </div>

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

<div className="flex items-center space-x-6 text-sm text-gray-600 mb-4">
              <div className="flex items-center">
                <Star className="mr-1 h-4 w-4 text-yellow-400 fill-current" />
                {service.rating} ({service.totalOrders} orders)
              </div>
              <div className="flex items-center">
                <Eye className="mr-1 h-4 w-4" />
                {service.viewsCount} views
              </div>
              <div className="flex items-center">
                <ShoppingCart className="mr-1 h-4 w-4" />
                {service.deliveryTime.unit === "instant"
                  ? "Instant"
                  : `${service.deliveryTime.value} ${service.deliveryTime.unit}`}{" "}
                delivery
              </div>
            </div>

<div className="flex items-center justify-between">
              <div className="text-lg font-bold text-green-600">${service.price}</div>
              <div className="flex space-x-2">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={(e) => handleViewOrders(e, service.id)}
                  className="flex items-center gap-1"
                >
                  <Package className="h-3 w-3" />
                  View Orders
                </Button>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={(e) => handleEditService(e, service.id)}
                  className="flex items-center gap-1"
                >
                  <Edit className="h-3 w-3" />
                  Edit
                </Button>
                <Button
                  size="sm"
                  onClick={(e) => handleViewAnalytics(e, service.id)}
                  className="flex items-center gap-1"
                >
                  <BarChart3 className="h-3 w-3" />
                  Analytics
                </Button>
              </div>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  )

const getPaginatedServices = (serviceList: StorageService[]) => {
    const startIndex = (currentPage - 1) * itemsPerPage
    const endIndex = startIndex + itemsPerPage
    return serviceList.slice(startIndex, endIndex)
  }

const getTotalPages = (serviceList: StorageService[]) => {
    return Math.ceil(serviceList.length / itemsPerPage)
  }

const handlePageChange = (page: number) => {
    setCurrentPage(page)
    window.scrollTo({ top: 0, behavior: "smooth" })
  }

const handleTabChange = () => {
    setCurrentPage(1)
  }

const PaginationControls = ({ serviceList }: { serviceList: StorageService[] }) => {
    const totalPages = getTotalPages(serviceList)

if (totalPages <= 1) return null

return (
      <div className="flex justify-center mt-8">
        <Pagination>
          <PaginationContent>
            <PaginationItem>
              <PaginationPrevious
                href="#"
                onClick={(e) => {
                  e.preventDefault()
                  if (currentPage > 1) handlePageChange(currentPage - 1)
                }}
                className={currentPage <= 1 ? "pointer-events-none opacity-50" : ""}
              />
            </PaginationItem>

{Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
              <PaginationItem key={page}>
                <PaginationLink
                  href="#"
                  onClick={(e) => {
                    e.preventDefault()
                    handlePageChange(page)
                  }}
                  isActive={currentPage === page}
                >
                  {page}
                </PaginationLink>
              </PaginationItem>
            ))}

<PaginationItem>
              <PaginationNext
                href="#"
                onClick={(e) => {
                  e.preventDefault()
                  if (currentPage < totalPages) handlePageChange(currentPage + 1)
                }}
                className={currentPage >= totalPages ? "pointer-events-none opacity-50" : ""}
              />
            </PaginationItem>
          </PaginationContent>
        </Pagination>
      </div>
    )
  }

if (loading) {
    return (
      <>
        <DashboardHeader title="My Services" description="Manage your marketplace services and track performance" />
        <div className="flex-1 overflow-auto p-6">
          <div className="text-center py-8">
            <p className="text-gray-600">Loading your services...</p>
          </div>
        </div>
      </>
    )
  }

return (
    <>
      <DashboardHeader title="My Services" description="Manage your marketplace services and track performance" />

<div className="flex-1 overflow-auto p-6">
        <div className="space-y-6">
          {vacationMode && (
            <Card className="border-orange-200 bg-orange-50">
              <CardContent className="p-4">
                <div className="flex items-center space-x-3">
                  <Plane className="h-5 w-5 text-orange-600" />
                  <div>
                    <h3 className="font-semibold text-orange-800">Vacation Mode Active</h3>
                    <p className="text-sm text-orange-700">
                      Your services are currently hidden from the marketplace. Customers cannot view or order your
                      services.
                    </p>
                  </div>
                </div>
              </CardContent>
            </Card>
          )}

<div className="flex justify-between items-center">
            <div>
              <h2 className="text-lg font-semibold text-gray-900">Service Listings</h2>
              <p className="text-gray-600">
                You have {services.length} service{services.length !== 1 ? "s" : ""} • Click on any service to view
                details
              </p>
            </div>
            <div className="flex items-center space-x-4">
              <div className="flex items-center space-x-3">
                <Plane className="h-4 w-4 text-gray-600" />
                <span className="text-sm font-medium text-gray-700">Vacation Mode</span>
                <Switch
                  checked={vacationMode}
                  onCheckedChange={handleVacationModeToggle}
                  className="data-[state=checked]:bg-orange-500"
                />
              </div>
              <Link href="/marketplace/new">
                <Button>
                  <Plus className="mr-2 h-4 w-4" />
                  Create New Service
                </Button>
              </Link>
            </div>
          </div>

{services.length === 0 ? (
            <Card>
              <CardContent className="p-12 text-center">
                <div className="space-y-4">
                  <div className="text-gray-400">
                    <ShoppingCart className="mx-auto h-12 w-12" />
                  </div>
                  <div>
                    <h3 className="text-lg font-semibold text-gray-900">No services yet</h3>
                    <p className="text-gray-600">Create your first service to start earning on the marketplace</p>
                  </div>
                  <Link href="/marketplace/new">
                    <Button>
                      <Plus className="mr-2 h-4 w-4" />
                      Create Your First Service
                    </Button>
                  </Link>
                </div>
              </CardContent>
            </Card>
          ) : (
            <Tabs defaultValue="all" className="space-y-6" onValueChange={handleTabChange}>
              <TabsList>
                <TabsTrigger value="all">All Services ({services.length})</TabsTrigger>
                <TabsTrigger value="active">Active ({activeServices.length})</TabsTrigger>
                <TabsTrigger value="paused">Paused ({pausedServices.length})</TabsTrigger>
                <TabsTrigger value="draft">Draft ({draftServices.length})</TabsTrigger>
              </TabsList>

<TabsContent value="all" className="space-y-4">
                {getPaginatedServices(services).map((service) => (
                  <ServiceCard key={service.id} service={service} />
                ))}
                <PaginationControls serviceList={services} />
              </TabsContent>

<TabsContent value="active" className="space-y-4">
                {activeServices.length === 0 ? (
                  <div className="text-center py-8">
                    <p className="text-gray-600">No active services</p>
                  </div>
                ) : (
                  <>
                    {getPaginatedServices(activeServices).map((service) => (
                      <ServiceCard key={service.id} service={service} />
                    ))}
                    <PaginationControls serviceList={activeServices} />
                  </>
                )}
              </TabsContent>

<TabsContent value="paused" className="space-y-4">
                {pausedServices.length === 0 ? (
                  <div className="text-center py-8">
                    <p className="text-gray-600">No paused services</p>
                  </div>
                ) : (
                  <>
                    {getPaginatedServices(pausedServices).map((service) => (
                      <ServiceCard key={service.id} service={service} />
                    ))}
                    <PaginationControls serviceList={pausedServices} />
                  </>
                )}
              </TabsContent>

<TabsContent value="draft" className="space-y-4">
                {draftServices.length === 0 ? (
                  <div className="text-center py-8">
                    <p className="text-gray-600">No draft services</p>
                  </div>
                ) : (
                  <>
                    {getPaginatedServices(draftServices).map((service) => (
                      <ServiceCard key={service.id} service={service} />
                    ))}
                    <PaginationControls serviceList={draftServices} />
                  </>
                )}
              </TabsContent>
            </Tabs>
          )}
        </div>
      </div>
    </>
  )
}
[V0_FILE]png:file="public/wordpress-website-design.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/wordpress-website-design-LOP5bqnpm7RogS3sMv0ruQQUE1p9hq.png" isMerged="true"
[V0_FILE]png:file="public/shopify-store-design-modern.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/shopify-store-design-modern-A8TrJX7SvxSXT4ob9CdGxakNwJKCVX.png" isMerged="true"
[V0_FILE]png:file="public/professional-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-logo-RPIJR07Q8qBC0NIWnM06uijoTNVe2N.png" isMerged="true"
[V0_FILE]png:file="public/react-web-application-modern.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/react-web-application-modern-s9YNPnjfpbwHWkve9yfDyFC19nqFs4.png" isMerged="true"
[V0_FILE]png:file="public/social-media-content-strategy.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/social-media-content-strategy-XrF3Zlq38YawUOD33QYqxcxArrGbGq.png" isMerged="true"
[V0_FILE]typescript:file="hooks/use-cached-api.ts" isMerged="true"
"use client"

import { useState, useEffect, useCallback } from "react"
import { cacheUtils } from "@/lib/local-redis"

interface UseCachedApiOptions {
  ttl?: number // Cache TTL in seconds
  enabled?: boolean // Whether to fetch data
  refetchOnMount?: boolean // Refetch even if cached
}

export function useCachedApi<T>(endpoint: string, fetcher: () => Promise<T>, options: UseCachedApiOptions = {}) {
  const { ttl = 300, enabled = true, refetchOnMount = false } = options

const [data, setData] = useState<T | null>(null)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<Error | null>(null)

const fetchData = useCallback(
    async (forceRefresh = false) => {
      if (!enabled) return

// Check cache first
      if (!forceRefresh) {
        const cached = cacheUtils.getCachedApiResponse<T>(endpoint)
        if (cached) {
          setData(cached)
          return cached
        }
      }

setLoading(true)
      setError(null)

try {
        const result = await fetcher()
        setData(result)

// Cache the result
        cacheUtils.cacheApiResponse(endpoint, result, ttl)

return result
      } catch (err) {
        const error = err instanceof Error ? err : new Error("Unknown error")
        setError(error)
        throw error
      } finally {
        setLoading(false)
      }
    },
    [endpoint, fetcher, ttl, enabled],
  )

useEffect(() => {
    fetchData(refetchOnMount)
  }, [fetchData, refetchOnMount])

const refetch = useCallback(() => fetchData(true), [fetchData])
  const invalidate = useCallback(() => {
    cacheUtils.redis.del(`api:${endpoint}`)
  }, [endpoint])

return {
    data,
    loading,
    error,
    refetch,
    invalidate,
  }
}
[V0_FILE]typescript:file="hooks/use-local-storage-state.ts" isMerged="true"
"use client"

import { useState, useEffect, useCallback } from "react"
import { redis } from "@/lib/local-redis"

export function useLocalStorageState<T>(
  key: string,
  defaultValue: T,
  ttl?: number,
): [T, (value: T) => void, () => void] {
  const [state, setState] = useState<T>(() => {
    const cached = redis.get<T>(key)
    return cached !== null ? cached : defaultValue
  })

const setValue = useCallback(
    (value: T) => {
      setState(value)
      redis.set(key, value, ttl)
    },
    [key, ttl],
  )

const clearValue = useCallback(() => {
    setState(defaultValue)
    redis.del(key)
  }, [key, defaultValue])

useEffect(() => {
    const cached = redis.get<T>(key)
    if (cached !== null) {
      setState(cached)
    }
  }, [key])

return [state, setValue, clearValue]
}
[V0_FILE]typescriptreact:file="components/cache/cache-manager.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { redis, sessionRedis } from "@/lib/local-redis"
import { Trash2, RefreshCw, Database, Clock } from "lucide-react"

export function CacheManager() {
  const [cacheInfo, setCacheInfo] = useState({
    localStorage: { keys: 0, size: "0 KB", storage: "localStorage" },
    sessionStorage: { keys: 0, size: "0 KB", storage: "sessionStorage" },
  })
  const [keys, setKeys] = useState<{ local: string[]; session: string[] }>({
    local: [],
    session: [],
  })

const refreshInfo = () => {
    setCacheInfo({
      localStorage: redis.info(),
      sessionStorage: sessionRedis.info(),
    })
    setKeys({
      local: redis.keys("*"),
      session: sessionRedis.keys("*"),
    })
  }

useEffect(() => {
    refreshInfo()
  }, [])

const clearAllCache = () => {
    redis.flushall()
    sessionRedis.flushall()
    refreshInfo()
  }

const clearLocalStorage = () => {
    redis.flushall()
    refreshInfo()
  }

const clearSessionStorage = () => {
    sessionRedis.flushall()
    refreshInfo()
  }

const deleteKey = (key: string, isSession = false) => {
    if (isSession) {
      sessionRedis.del(key)
    } else {
      redis.del(key)
    }
    refreshInfo()
  }

const getTTL = (key: string, isSession = false) => {
    const ttl = isSession ? sessionRedis.ttl(key) : redis.ttl(key)
    if (ttl === -1) return "No expiration"
    if (ttl === -2) return "Expired/Not found"
    return `${ttl}s`
  }

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h2 className="text-2xl font-bold">Cache Manager</h2>
        <div className="flex gap-2">
          <Button onClick={refreshInfo} variant="outline" size="sm">
            <RefreshCw className="h-4 w-4 mr-2" />
            Refresh
          </Button>
          <Button onClick={clearAllCache} variant="destructive" size="sm">
            <Trash2 className="h-4 w-4 mr-2" />
            Clear All
          </Button>
        </div>
      </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {/* Local Storage Cache */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">
              <Database className="h-4 w-4 inline mr-2" />
              Local Storage Cache
            </CardTitle>
            <Button onClick={clearLocalStorage} variant="outline" size="sm">
              Clear
            </Button>
          </CardHeader>
          <CardContent>
            <div className="space-y-2 mb-4">
              <div className="flex justify-between text-sm">
                <span>Keys:</span>
                <Badge variant="secondary">{cacheInfo.localStorage.keys}</Badge>
              </div>
              <div className="flex justify-between text-sm">
                <span>Size:</span>
                <Badge variant="secondary">{cacheInfo.localStorage.size}</Badge>
              </div>
            </div>

<div className="space-y-2 max-h-64 overflow-y-auto">
              {keys.local.map((key) => (
                <div key={key} className="flex items-center justify-between p-2 bg-muted rounded text-sm">
                  <div className="flex-1 truncate">
                    <div className="font-mono">{key}</div>
                    <div className="text-xs text-muted-foreground flex items-center">
                      <Clock className="h-3 w-3 mr-1" />
                      TTL: {getTTL(key)}
                    </div>
                  </div>
                  <Button onClick={() => deleteKey(key)} variant="ghost" size="sm" className="h-6 w-6 p-0">
                    <Trash2 className="h-3 w-3" />
                  </Button>
                </div>
              ))}
              {keys.local.length === 0 && <div className="text-center text-muted-foreground py-4">No cached items</div>}
            </div>
          </CardContent>
        </Card>

{/* Session Storage Cache */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">
              <Database className="h-4 w-4 inline mr-2" />
              Session Storage Cache
            </CardTitle>
            <Button onClick={clearSessionStorage} variant="outline" size="sm">
              Clear
            </Button>
          </CardHeader>
          <CardContent>
            <div className="space-y-2 mb-4">
              <div className="flex justify-between text-sm">
                <span>Keys:</span>
                <Badge variant="secondary">{cacheInfo.sessionStorage.keys}</Badge>
              </div>
              <div className="flex justify-between text-sm">
                <span>Size:</span>
                <Badge variant="secondary">{cacheInfo.sessionStorage.size}</Badge>
              </div>
            </div>

<div className="space-y-2 max-h-64 overflow-y-auto">
              {keys.session.map((key) => (
                <div key={key} className="flex items-center justify-between p-2 bg-muted rounded text-sm">
                  <div className="flex-1 truncate">
                    <div className="font-mono">{key}</div>
                    <div className="text-xs text-muted-foreground flex items-center">
                      <Clock className="h-3 w-3 mr-1" />
                      TTL: {getTTL(key, true)}
                    </div>
                  </div>
                  <Button onClick={() => deleteKey(key, true)} variant="ghost" size="sm" className="h-6 w-6 p-0">
                    <Trash2 className="h-3 w-3" />
                  </Button>
                </div>
              ))}
              {keys.session.length === 0 && (
                <div className="text-center text-muted-foreground py-4">No cached items</div>
              )}
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="lib/local-redis.ts" isMerged="true"
/**
 * Local Redis-like caching utility using browser storage
 * Provides Redis-like methods for client-side caching
 */

interface CacheItem<T> {
  value: T
  expiry?: number
  timestamp: number
}

class LocalRedis {
  private prefix: string
  private storage: Storage

constructor(prefix = "redis:", useSessionStorage = false) {
    this.prefix = prefix
    this.storage = useSessionStorage ? sessionStorage : localStorage
  }

private getKey(key: string): string {
    return `${this.prefix}${key}`
  }

private isExpired(item: CacheItem<any>): boolean {
    if (!item.expiry) return false
    return Date.now() > item.expiry
  }

// SET - Store a value with optional expiration (in seconds)
  set<T>(key: string, value: T, ttl?: number): boolean {
    try {
      const item: CacheItem<T> = {
        value,
        timestamp: Date.now(),
        expiry: ttl ? Date.now() + ttl * 1000 : undefined,
      }

this.storage.setItem(this.getKey(key), JSON.stringify(item))
      return true
    } catch (error) {
      console.warn("[LocalRedis] Failed to set item:", error)
      return false
    }
  }

// GET - Retrieve a value
  get<T>(key: string): T | null {
    try {
      const stored = this.storage.getItem(this.getKey(key))
      if (!stored) return null

const item: CacheItem<T> = JSON.parse(stored)

if (this.isExpired(item)) {
        this.del(key)
        return null
      }

return item.value
    } catch (error) {
      console.warn("[LocalRedis] Failed to get item:", error)
      return null
    }
  }

// DEL - Delete a key
  del(key: string): boolean {
    try {
      this.storage.removeItem(this.getKey(key))
      return true
    } catch (error) {
      console.warn("[LocalRedis] Failed to delete item:", error)
      return false
    }
  }

// EXISTS - Check if key exists and is not expired
  exists(key: string): boolean {
    return this.get(key) !== null
  }

// EXPIRE - Set expiration for existing key
  expire(key: string, ttl: number): boolean {
    const value = this.get(key)
    if (value === null) return false
    return this.set(key, value, ttl)
  }

// TTL - Get time to live for a key
  ttl(key: string): number {
    try {
      const stored = this.storage.getItem(this.getKey(key))
      if (!stored) return -2 // Key doesn't exist

const item: CacheItem<any> = JSON.parse(stored)
      if (!item.expiry) return -1 // No expiration set

const remaining = Math.ceil((item.expiry - Date.now()) / 1000)
      return remaining > 0 ? remaining : -2 // Expired
    } catch (error) {
      return -2
    }
  }

// KEYS - Get all keys matching pattern (simple wildcard support)
  keys(pattern?: string): string[] {
    try {
      const keys: string[] = []
      const prefixLength = this.prefix.length

for (let i = 0; i < this.storage.length; i++) {
        const key = this.storage.key(i)
        if (key && key.startsWith(this.prefix)) {
          const cleanKey = key.substring(prefixLength)

if (!pattern || this.matchPattern(cleanKey, pattern)) {
            // Check if not expired
            if (this.exists(cleanKey)) {
              keys.push(cleanKey)
            }
          }
        }
      }

return keys
    } catch (error) {
      console.warn("[LocalRedis] Failed to get keys:", error)
      return []
    }
  }

private matchPattern(key: string, pattern: string): boolean {
    // Simple wildcard matching (* only)
    if (pattern === "*") return true

const regex = new RegExp("^" + pattern.replace(/\*/g, ".*") + "$")
    return regex.test(key)
  }

// FLUSHALL - Clear all cache
  flushall(): boolean {
    try {
      const keysToDelete = this.keys("*")
      keysToDelete.forEach((key) => this.del(key))
      return true
    } catch (error) {
      console.warn("[LocalRedis] Failed to flush all:", error)
      return false
    }
  }

// HSET - Hash set (store object fields)
  hset(key: string, field: string, value: any): boolean {
    const hash = this.get<Record<string, any>>(key) || {}
    hash[field] = value
    return this.set(key, hash)
  }

// HGET - Hash get (get object field)
  hget<T>(key: string, field: string): T | null {
    const hash = this.get<Record<string, any>>(key)
    return hash ? hash[field] || null : null
  }

// HGETALL - Get all hash fields
  hgetall<T>(key: string): Record<string, T> | null {
    return this.get<Record<string, T>>(key)
  }

// HDEL - Delete hash field
  hdel(key: string, field: string): boolean {
    const hash = this.get<Record<string, any>>(key)
    if (!hash || !(field in hash)) return false

delete hash[field]
    return this.set(key, hash)
  }

// INCR - Increment number
  incr(key: string): number {
    const current = this.get<number>(key) || 0
    const newValue = current + 1
    this.set(key, newValue)
    return newValue
  }

// DECR - Decrement number
  decr(key: string): number {
    const current = this.get<number>(key) || 0
    const newValue = current - 1
    this.set(key, newValue)
    return newValue
  }

// Get storage usage info
  info(): { keys: number; size: string; storage: string } {
    const keys = this.keys("*")
    let totalSize = 0

keys.forEach((key) => {
      const item = this.storage.getItem(this.getKey(key))
      if (item) totalSize += item.length
    })

return {
      keys: keys.length,
      size: `${(totalSize / 1024).toFixed(2)} KB`,
      storage: this.storage === localStorage ? "localStorage" : "sessionStorage",
    }
  }
}

// Create singleton instances
export const redis = new LocalRedis("redis:", false)
export const sessionRedis = new LocalRedis("session:", true)

// Export class for custom instances
export { LocalRedis }

// Utility functions for common caching patterns
export const cacheUtils = {
  setJSON: <T,>(key: string, data: T, ttl?: number) => redis.set(key, data, ttl),

getJSON: <T,>(key: string): T | null => redis.get<T>(key),

cacheApiResponse: <T,>(endpoint: string, data: T, ttl = 300) => redis.set(`api:${endpoint}`, data, ttl),

getCachedApiResponse: <T,>(endpoint: string): T | null => redis.get<T>(`api:${endpoint}`),

cacheUser: (userId: string, userData: any, ttl = 1800) => redis.set(`user:${userId}`, userData, ttl),

getCachedUser: (userId: string) => redis.get(`user:${userId}`),

cacheJobs: (filters: string, jobs: any[], ttl = 600) => {
    const key = `jobs:${btoa(filters)}`
    return redis.set(key, jobs, ttl)
  },

getCachedJobs: (filters: string) => {
    const key = `jobs:${btoa(filters)}`
    return redis.get<any[]>(key)
  },

cacheDashboardStats: (userId: string, stats: any, ttl = 300) => redis.set(`dashboard:${userId}`, stats, ttl),

getCachedDashboardStats: (userId: string) => redis.get(`dashboard:${userId}`),
}
[V0_FILE]typescriptreact:file="components/marketplace/service-filters.tsx" isQuickEdit="true" isMerged="true"
"use client"

interface ServiceFiltersProps {
  onFiltersChange: (filters: {
    search?: string
    category?: string
    priceMin?: number
    priceMax?: number
    deliveryTime?: number
  }) => void
}

const deliveryTimes = [
  { value: "1", label: "1 day" },
  { value: "3", label: "3 days" },
  { value: "7", label: "1 week" },
  { value: "14", label: "2 weeks" },
  { value: "30", label: "1 month" },
]

export function ServiceFilters({ onFiltersChange }: ServiceFiltersProps) {
  const [categories, setCategories] = useState<Category[]>([])
  const [loadingCategories, setLoadingCategories] = useState(true)

const [filters, setFilters] = useState({
    search: "",
    category: "",
    priceMin: "",
    priceMax: "",
    deliveryTime: "",
  })

useEffect(() => {
    const loadCategories = async () => {
      try {
        console.log("[v0] Loading categories for filters from Redis cache...")
        const allCategories = await CategoriesAPI.getCategories()

// Convert admin categories to filter categories format
        const filterCategories: Category[] = allCategories.map((cat) => ({
          id: cat.id,
          name: cat.name,
          slug: cat.id,
          description: cat.description,
          minimumPayment: 0,
          sortOrder: cat.sortOrder,
          isActive: true,
          createdAt: new Date().toISOString(),
        }))

setCategories(filterCategories)
        console.log("[v0] Categories loaded for filters:", filterCategories.length)
      } catch (error) {
        console.error("Failed to load categories for filters:", error)
        // Fallback to existing getAllCategories function
        try {
          const allCategories = await getAllCategories()
          setCategories(allCategories)
        } catch (fallbackError) {
          console.error("Fallback categories loading failed:", fallbackError)
        }
      } finally {
        setLoadingCategories(false)
      }
    }

loadCategories()
  }, [])

const handleFilterChange = (key: string, value: any) => {
    const newFilters = { ...filters, [key]: value }
    setFilters(newFilters)

onFiltersChange(processedFilters)
  }

const clearFilters = () => {
    const clearedFilters = {
      search: "",
      category: "",
      priceMin: "",
      priceMax: "",
      deliveryTime: "",
    }
    setFilters(clearedFilters)
    onFiltersChange({})
  }

return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center justify-between">
          <div className="flex items-center">
            <Filter className="mr-2 h-5 w-5" />
            Filters
          </div>
          <Button variant="ghost" size="sm" onClick={clearFilters}>
            <X className="mr-1 h-4 w-4" />
            Clear
          </Button>
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        {/* Search */}
        <div className="space-y-2">
          <Label htmlFor="search">Search Services</Label>
          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
            <Input
              id="search"
              placeholder="Search services..."
              value={filters.search}
              onChange={(e) => handleFilterChange("search", e.target.value)}
              className="pl-10"
            />
          </div>
        </div>

{/* Category */}
        <div className="space-y-2">
          <Label>Category</Label>
          <Select value={filters.category} onValueChange={(value) => handleFilterChange("category", value)}>
            <SelectTrigger>
              <SelectValue placeholder={loadingCategories ? "Loading categories..." : "All categories"} />
            </SelectTrigger>
            <SelectContent>
              {categories.map((category) => (
                <SelectItem key={category.slug} value={category.slug}>
                  {category.name}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>

{/* Price Range */}
        <div className="space-y-2">
          <Label>Price Range</Label>
          <div className="grid grid-cols-2 gap-2">
            <Input
              placeholder="Min ($)"
              type="number"
              value={filters.priceMin}
              onChange={(e) => handleFilterChange("priceMin", e.target.value)}
            />
            <Input
              placeholder="Max ($)"
              type="number"
              value={filters.priceMax}
              onChange={(e) => handleFilterChange("priceMax", e.target.value)}
            />
          </div>
        </div>

{/* Delivery Time */}
        <div className="space-y-2">
          <Label>Delivery Time</Label>
          <Select value={filters.deliveryTime} onValueChange={(value) => handleFilterChange("deliveryTime", value)}>
            <SelectTrigger>
              <SelectValue placeholder="Any delivery time" />
            </SelectTrigger>
            <SelectContent>
              {deliveryTimes.map((time) => (
                <SelectItem key={time.value} value={time.value}>
                  Up to {time.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/marketplace/advanced-service-filters.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Switch } from "@/components/ui/switch"
import { Slider } from "@/components/ui/slider"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Separator } from "@/components/ui/separator"
import { Checkbox } from "@/components/ui/checkbox"
import {
  ChevronDown,
  Star,
  Clock,
  User,
  Zap,
  Crown,
  SortAsc,
  SortDesc,
  Calendar,
  Award,
  MapPin,
  Globe,
  Filter,
  X,
  DollarSign,
  Timer,
  Users,
  Eye,
  MessageCircle,
  Verified,
  Target,
  Briefcase,
  TrendingUp,
  Activity,
} from "lucide-react"
import { CategoriesAPI } from "@/lib/categories-api"

interface AdvancedServiceFiltersProps {
  onFiltersChange: (filters: {
    search?: string
    category?: string
    subcategory?: string
    priceMin?: number
    priceMax?: number
    deliveryTime?: number[]
    sellerLevel?: string[]
    proServices?: boolean
    instantResponse?: boolean
    rating?: number
    sortBy?: string
    location?: string[]
    languages?: string[]
    verifiedSellers?: boolean
    newSellers?: boolean
    hasPortfolio?: boolean
    fastDelivery?: boolean
    revisions?: number
    serviceType?: string[]
    skills?: string[]
    onlineNow?: boolean
  }) => void
  totalResults?: number
  selectedCategory?: string
  filterStats?: {
    sellerLevels?: { [key: string]: number }
    languages?: { [key: string]: number }
    locations?: { [key: string]: number }
    onlineCount?: number
    proCount?: number
    instantResponseCount?: number
    deliveryTimes?: { [key: string]: number }
    priceRanges?: { [key: string]: number }
    totalSellers?: number
  }
}

const deliveryTimeOptions = [
  { value: "0", label: "Express 24H", icon: Zap, color: "text-red-500" },
  { value: "1", label: "Up to 1 day", icon: Clock, color: "text-orange-500" },
  { value: "3", label: "Up to 3 days", icon: Clock, color: "text-yellow-500" },
  { value: "7", label: "Up to 1 week", icon: Calendar, color: "text-blue-500" },
  { value: "14", label: "Up to 2 weeks", icon: Calendar, color: "text-green-500" },
  { value: "30", label: "Up to 1 month", icon: Calendar, color: "text-gray-500" },
]

const sellerLevelOptions = [
  { value: "new", label: "New Seller", color: "bg-gray-100 text-gray-700", badge: "🆕", mockCount: 1247 },
  { value: "level1", label: "Level 1", color: "bg-blue-100 text-blue-700", badge: "⭐", mockCount: 3456 },
  { value: "level2", label: "Level 2", color: "bg-green-100 text-green-700", badge: "⭐⭐", mockCount: 892 },
  { value: "top", label: "Top Rated", color: "bg-yellow-100 text-yellow-700", badge: "👑", mockCount: 234 },
]

const sortOptions = [
  { value: "relevance", label: "Relevance", icon: Target },
  { value: "bestselling", label: "Best Selling", icon: Award },
  { value: "newest", label: "Newest Arrivals", icon: Calendar },
  { value: "price_low", label: "Price: Low to High", icon: SortAsc },
  { value: "price_high", label: "Price: High to Low", icon: SortDesc },
  { value: "rating", label: "Highest Rated", icon: Star },
  { value: "most_reviews", label: "Most Reviews", icon: MessageCircle },
  { value: "fastest_delivery", label: "Fastest Delivery", icon: Zap },
  { value: "most_viewed", label: "Most Popular", icon: Eye },
]

const serviceTypeOptions = [
  { value: "basic", label: "Basic Services", icon: Briefcase },
  { value: "premium", label: "Premium Services", icon: Crown },
  { value: "custom", label: "Custom Offers", icon: Target },
  { value: "packages", label: "Service Packages", icon: Users },
]

const locationOptions = [
  { name: "United States", count: 2847 },
  { name: "United Kingdom", count: 1923 },
  { name: "Canada", count: 1456 },
  { name: "Australia", count: 987 },
  { name: "Germany", count: 1234 },
  { name: "France", count: 876 },
  { name: "India", count: 3456 },
  { name: "Pakistan", count: 2134 },
  { name: "Bangladesh", count: 1567 },
  { name: "Philippines", count: 1890 },
  { name: "Ukraine", count: 654 },
  { name: "Brazil", count: 789 },
  { name: "Mexico", count: 543 },
  { name: "Spain", count: 432 },
  { name: "Italy", count: 321 },
  { name: "Netherlands", count: 234 },
  { name: "Poland", count: 345 },
  { name: "Romania", count: 456 },
]

const languageOptions = [
  { name: "English", count: 8934 },
  { name: "Spanish", count: 2456 },
  { name: "French", count: 1234 },
  { name: "German", count: 987 },
  { name: "Italian", count: 654 },
  { name: "Portuguese", count: 789 },
  { name: "Russian", count: 543 },
  { name: "Arabic", count: 432 },
  { name: "Hindi", count: 1567 },
  { name: "Chinese", count: 876 },
  { name: "Japanese", count: 345 },
  { name: "Korean", count: 234 },
  { name: "Dutch", count: 123 },
]

const skillOptions = [
  "WordPress",
  "Shopify",
  "React",
  "Node.js",
  "Python",
  "PHP",
  "JavaScript",
  "Graphic Design",
  "Logo Design",
  "Web Design",
  "Mobile App",
  "SEO",
  "Content Writing",
  "Copywriting",
  "Translation",
  "Video Editing",
  "Animation",
]

export function AdvancedServiceFilters({
  onFiltersChange,
  totalResults = 0,
  selectedCategory,
  filterStats = {}, // Added filterStats prop with default empty object
}: AdvancedServiceFiltersProps) {
  const [categories, setCategories] = useState<any[]>([])
  const [subcategories, setSubcategories] = useState<any[]>([])
  const [filters, setFilters] = useState({
    search: "",
    category: selectedCategory || "",
    subcategory: "",
    priceRange: [5, 1000] as [number, number],
    deliveryTime: [] as string[],
    sellerLevel: [] as string[],
    proServices: false,
    instantResponse: false,
    onlineNow: false,
    rating: 0,
    sortBy: "relevance",
    location: [] as string[],
    languages: [] as string[],
    verifiedSellers: false,
    newSellers: false,
    hasPortfolio: false,
    fastDelivery: false,
    revisions: 0,
    serviceType: [] as string[],
    skills: [] as string[],
  })

const mockStats = {
    sellerLevels: { new: 1247, level1: 3456, level2: 892, top: 234 },
    languages: { English: 8934, Spanish: 2456, French: 1234, German: 987 },
    locations: { "United States": 2847, "United Kingdom": 1923, Canada: 1456 },
    onlineCount: 1847,
    proCount: 2134,
    instantResponseCount: 3456,
    deliveryTimes: { "0": 567, "1": 1234, "3": 2345, "7": 3456 },
    priceRanges: { "5-25": 1234, "25-50": 2345, "50-100": 1567 },
    totalSellers: 12456,
  }

const stats = { ...mockStats, ...filterStats }

useEffect(() => {
    const loadCategories = async () => {
      try {
        const allCategories = await CategoriesAPI.getCategories()
        setCategories(allCategories)

// Load subcategories for selected category
        if (filters.category) {
          const subs = allCategories.filter((cat) => cat.parent_id === filters.category)
          setSubcategories(subs)
        }
      } catch (error) {
        console.error("Failed to load categories:", error)
      }
    }
    loadCategories()
  }, [filters.category])

const handleFilterChange = (key: string, value: any) => {
    const newFilters = { ...filters, [key]: value }

// Reset subcategory when category changes
    if (key === "category") {
      newFilters.subcategory = ""
    }

setFilters(newFilters)

const processedFilters: any = {}
    if (newFilters.search) processedFilters.search = newFilters.search
    if (newFilters.category) processedFilters.category = newFilters.category
    if (newFilters.subcategory) processedFilters.subcategory = newFilters.subcategory
    if (newFilters.priceRange) {
      processedFilters.priceMin = newFilters.priceRange[0]
      processedFilters.priceMax = newFilters.priceRange[1]
    }
    if (newFilters.deliveryTime.length > 0) processedFilters.deliveryTime = newFilters.deliveryTime.map(Number)
    if (newFilters.sellerLevel.length > 0) processedFilters.sellerLevel = newFilters.sellerLevel
    if (newFilters.proServices) processedFilters.proServices = newFilters.proServices
    if (newFilters.instantResponse) processedFilters.instantResponse = newFilters.instantResponse
    if (newFilters.onlineNow) processedFilters.onlineNow = newFilters.onlineNow
    if (newFilters.rating > 0) processedFilters.rating = newFilters.rating
    if (newFilters.sortBy) processedFilters.sortBy = newFilters.sortBy
    if (newFilters.location.length > 0) processedFilters.location = newFilters.location
    if (newFilters.languages.length > 0) processedFilters.languages = newFilters.languages
    if (newFilters.verifiedSellers) processedFilters.verifiedSellers = newFilters.verifiedSellers
    if (newFilters.newSellers) processedFilters.newSellers = newFilters.newSellers
    if (newFilters.hasPortfolio) processedFilters.hasPortfolio = newFilters.hasPortfolio
    if (newFilters.fastDelivery) processedFilters.fastDelivery = newFilters.fastDelivery
    if (newFilters.revisions > 0) processedFilters.revisions = newFilters.revisions
    if (newFilters.serviceType.length > 0) processedFilters.serviceType = newFilters.serviceType
    if (newFilters.skills.length > 0) processedFilters.skills = newFilters.skills

onFiltersChange(processedFilters)
  }

const toggleArrayFilter = (key: string, value: string) => {
    const currentArray = filters[key as keyof typeof filters] as string[]
    const newArray = currentArray.includes(value)
      ? currentArray.filter((item) => item !== value)
      : [...currentArray, value]
    handleFilterChange(key, newArray)
  }

const clearAllFilters = () => {
    const clearedFilters = {
      search: "",
      category: selectedCategory || "",
      subcategory: "",
      priceRange: [5, 1000] as [number, number],
      deliveryTime: [] as string[],
      sellerLevel: [] as string[],
      proServices: false,
      instantResponse: false,
      onlineNow: false,
      rating: 0,
      sortBy: "relevance",
      location: [] as string[],
      languages: [] as string[],
      verifiedSellers: false,
      newSellers: false,
      hasPortfolio: false,
      fastDelivery: false,
      revisions: 0,
      serviceType: [] as string[],
      skills: [] as string[],
    }
    setFilters(clearedFilters)
    onFiltersChange({ category: selectedCategory })
  }

const getActiveFiltersCount = () => {
    let count = 0
    if (filters.category && filters.category !== selectedCategory) count++
    if (filters.subcategory) count++
    if (filters.priceRange[0] > 5 || filters.priceRange[1] < 1000) count++
    if (filters.deliveryTime.length > 0) count++
    if (filters.sellerLevel.length > 0) count++
    if (filters.proServices) count++
    if (filters.instantResponse) count++
    if (filters.onlineNow) count++
    if (filters.rating > 0) count++
    if (filters.location.length > 0) count++
    if (filters.languages.length > 0) count++
    if (filters.verifiedSellers) count++
    if (filters.newSellers) count++
    if (filters.hasPortfolio) count++
    if (filters.fastDelivery) count++
    if (filters.revisions > 0) count++
    if (filters.serviceType.length > 0) count++
    if (filters.skills.length > 0) count++
    return count
  }

return (
    <div className="bg-white border-b sticky top-16 z-40 shadow-sm">
      <div className="container mx-auto px-4 py-4">
        <div className="flex items-center gap-3 flex-wrap">
          {/* Service Options */}
          <Popover>
            <PopoverTrigger asChild>
              <Button variant="outline" className="h-10 px-4 font-medium bg-transparent hover:bg-gray-50">
                <Filter className="mr-2 h-4 w-4" />
                Service options
                <ChevronDown className="ml-2 h-4 w-4" />
                {(filters.category || filters.subcategory || filters.rating > 0 || filters.serviceType.length > 0) && (
                  <Badge variant="secondary" className="ml-2 h-5 w-5 p-0 text-xs">
                    {
                      [
                        filters.category,
                        filters.subcategory,
                        filters.rating > 0,
                        filters.serviceType.length > 0,
                      ].filter(Boolean).length
                    }
                  </Badge>
                )}
              </Button>
            </PopoverTrigger>
            <PopoverContent className="w-96 p-6" align="start">
              <div className="space-y-6">
                <h4 className="font-semibold text-base flex items-center">
                  <Filter className="mr-2 h-4 w-4" />
                  Service Options
                </h4>

{/* Category & Subcategory */}
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label className="text-sm font-medium">Category</Label>
                    <Select value={filters.category} onValueChange={(value) => handleFilterChange("category", value)}>
                      <SelectTrigger className="h-9">
                        <SelectValue placeholder="All categories" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">All categories</SelectItem>
                        {categories
                          .filter((cat) => !cat.parent_id)
                          .map((category) => (
                            <SelectItem key={category.id} value={category.id}>
                              {category.name}
                            </SelectItem>
                          ))}
                      </SelectContent>
                    </Select>
                  </div>

<div className="space-y-2">
                    <Label className="text-sm font-medium">Subcategory</Label>
                    <Select
                      value={filters.subcategory}
                      onValueChange={(value) => handleFilterChange("subcategory", value)}
                      disabled={!filters.category}
                    >
                      <SelectTrigger className="h-9">
                        <SelectValue placeholder="All subcategories" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">All subcategories</SelectItem>
                        {subcategories.map((subcategory) => (
                          <SelectItem key={subcategory.id} value={subcategory.id}>
                            {subcategory.name}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                </div>

{/* Service Type */}
                <div className="space-y-3">
                  <Label className="text-sm font-medium">Service Type</Label>
                  <div className="grid grid-cols-2 gap-2">
                    {serviceTypeOptions.map((type) => {
                      const Icon = type.icon
                      return (
                        <Button
                          key={type.value}
                          variant={filters.serviceType.includes(type.value) ? "default" : "outline"}
                          size="sm"
                          onClick={() => toggleArrayFilter("serviceType", type.value)}
                          className="justify-start h-9"
                        >
                          <Icon className="mr-2 h-3 w-3" />
                          {type.label}
                        </Button>
                      )
                    })}
                  </div>
                </div>

{/* Rating Filter */}
                <div className="space-y-3">
                  <Label className="text-sm font-medium">Minimum Rating</Label>
                  <div className="flex gap-2">
                    {[4, 4.5, 4.7, 4.9].map((rating) => (
                      <Button
                        key={rating}
                        variant={filters.rating === rating ? "default" : "outline"}
                        size="sm"
                        onClick={() => handleFilterChange("rating", filters.rating === rating ? 0 : rating)}
                        className="flex items-center gap-1 h-8"
                      >
                        <Star className="h-3 w-3 fill-current" />
                        {rating}+
                      </Button>
                    ))}
                  </div>
                </div>

{/* Revisions */}
                <div className="space-y-3">
                  <Label className="text-sm font-medium">Minimum Revisions</Label>
                  <div className="flex gap-2">
                    {[1, 2, 3, 5, 10].map((rev) => (
                      <Button
                        key={rev}
                        variant={filters.revisions === rev ? "default" : "outline"}
                        size="sm"
                        onClick={() => handleFilterChange("revisions", filters.revisions === rev ? 0 : rev)}
                        className="h-8"
                      >
                        {rev}+ revisions
                      </Button>
                    ))}
                  </div>
                </div>
              </div>
            </PopoverContent>
          </Popover>

{/* Seller Details */}
          <Popover>
            <PopoverTrigger asChild>
              <Button variant="outline" className="h-10 px-4 font-medium bg-transparent hover:bg-gray-50">
                <User className="mr-2 h-4 w-4" />
                Seller details
                <ChevronDown className="ml-2 h-4 w-4" />
                {(filters.sellerLevel.length > 0 ||
                  filters.location.length > 0 ||
                  filters.languages.length > 0 ||
                  filters.verifiedSellers ||
                  filters.newSellers ||
                  filters.hasPortfolio) && (
                  <Badge variant="secondary" className="ml-2 h-5 w-5 p-0 text-xs">
                    {
                      [
                        filters.sellerLevel.length > 0,
                        filters.location.length > 0,
                        filters.languages.length > 0,
                        filters.verifiedSellers,
                        filters.newSellers,
                        filters.hasPortfolio,
                      ].filter(Boolean).length
                    }
                  </Badge>
                )}
              </Button>
            </PopoverTrigger>
            <PopoverContent className="w-96 p-6" align="start">
              <div className="space-y-6">
                <h4 className="font-semibold text-base flex items-center">
                  <User className="mr-2 h-4 w-4" />
                  Seller Details
                </h4>

{/* Seller Level */}
                <div className="space-y-3">
                  <div className="flex items-center justify-between">
                    <Label className="text-sm font-medium">Seller Level</Label>
                    <Badge variant="outline" className="text-xs bg-blue-50 text-blue-600">
                      <TrendingUp className="mr-1 h-3 w-3" />
                      {stats.totalSellers?.toLocaleString()} total sellers
                    </Badge>
                  </div>
                  <div className="space-y-2">
                    {sellerLevelOptions.map((level) => (
                      <Button
                        key={level.value}
                        variant={filters.sellerLevel.includes(level.value) ? "default" : "outline"}
                        size="sm"
                        onClick={() => toggleArrayFilter("sellerLevel", level.value)}
                        className="w-full justify-between h-10 px-3"
                      >
                        <div className="flex items-center">
                          <span className="mr-2">{level.badge}</span>
                          {level.label}
                        </div>
                        <Badge variant="secondary" className="text-xs bg-gray-100 text-gray-600">
                          {(stats.sellerLevels?.[level.value] || level.mockCount).toLocaleString()}
                        </Badge>
                      </Button>
                    ))}
                  </div>
                </div>

{/* Seller Status */}
                <div className="space-y-3">
                  <Label className="text-sm font-medium">Seller Status</Label>
                  <div className="space-y-2">
                    <div className="flex items-center space-x-2">
                      <Checkbox
                        id="verified-sellers"
                        checked={filters.verifiedSellers}
                        onCheckedChange={(checked) => handleFilterChange("verifiedSellers", checked)}
                      />
                      <Label htmlFor="verified-sellers" className="text-sm cursor-pointer flex items-center">
                        <Verified className="mr-1 h-4 w-4 text-blue-500" />
                        Verified sellers only
                      </Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <Checkbox
                        id="new-sellers"
                        checked={filters.newSellers}
                        onCheckedChange={(checked) => handleFilterChange("newSellers", checked)}
                      />
                      <Label htmlFor="new-sellers" className="text-sm cursor-pointer flex items-center">
                        <Star className="mr-1 h-4 w-4 text-green-500" />
                        New sellers
                      </Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <Checkbox
                        id="has-portfolio"
                        checked={filters.hasPortfolio}
                        onCheckedChange={(checked) => handleFilterChange("hasPortfolio", checked)}
                      />
                      <Label htmlFor="has-portfolio" className="text-sm cursor-pointer flex items-center">
                        <Briefcase className="mr-1 h-4 w-4 text-purple-500" />
                        Has portfolio
                      </Label>
                    </div>
                  </div>
                </div>

{/* Location */}
                <div className="space-y-3">
                  <div className="flex items-center justify-between">
                    <Label className="text-sm font-medium">Location</Label>
                    <Badge variant="outline" className="text-xs bg-green-50 text-green-600">
                      <Globe className="mr-1 h-3 w-3" />
                      {locationOptions.length} countries
                    </Badge>
                  </div>
                  <div className="max-h-40 overflow-y-auto space-y-1">
                    {locationOptions.slice(0, 10).map((location) => (
                      <div
                        key={location.name}
                        className="flex items-center justify-between p-2 hover:bg-gray-50 rounded"
                      >
                        <div className="flex items-center space-x-2">
                          <Checkbox
                            id={`location-${location.name}`}
                            checked={filters.location.includes(location.name)}
                            onCheckedChange={() => toggleArrayFilter("location", location.name)}
                          />
                          <Label
                            htmlFor={`location-${location.name}`}
                            className="text-sm cursor-pointer flex items-center"
                          >
                            <MapPin className="mr-1 h-3 w-3 text-gray-400" />
                            {location.name}
                          </Label>
                        </div>
                        <Badge variant="outline" className="text-xs">
                          {(stats.locations?.[location.name] || location.count).toLocaleString()}
                        </Badge>
                      </div>
                    ))}
                    {locationOptions.length > 10 && (
                      <Button variant="ghost" size="sm" className="w-full text-xs text-blue-600">
                        Show {locationOptions.length - 10} more countries
                      </Button>
                    )}
                  </div>
                </div>

{/* Languages */}
                <div className="space-y-3">
                  <div className="flex items-center justify-between">
                    <Label className="text-sm font-medium">Languages</Label>
                    <Badge variant="outline" className="text-xs bg-purple-50 text-purple-600">
                      <MessageCircle className="mr-1 h-3 w-3" />
                      {languageOptions.length} languages
                    </Badge>
                  </div>
                  <div className="max-h-40 overflow-y-auto space-y-1">
                    {languageOptions.slice(0, 8).map((language) => (
                      <div
                        key={language.name}
                        className="flex items-center justify-between p-2 hover:bg-gray-50 rounded"
                      >
                        <div className="flex items-center space-x-2">
                          <Checkbox
                            id={`language-${language.name}`}
                            checked={filters.languages.includes(language.name)}
                            onCheckedChange={() => toggleArrayFilter("languages", language.name)}
                          />
                          <Label
                            htmlFor={`language-${language.name}`}
                            className="text-sm cursor-pointer flex items-center"
                          >
                            <Globe className="mr-1 h-3 w-3 text-gray-400" />
                            {language.name}
                          </Label>
                        </div>
                        <Badge variant="outline" className="text-xs">
                          {(stats.languages?.[language.name] || language.count).toLocaleString()}
                        </Badge>
                      </div>
                    ))}
                    {languageOptions.length > 8 && (
                      <Button variant="ghost" size="sm" className="w-full text-xs text-blue-600">
                        Show {languageOptions.length - 8} more languages
                      </Button>
                    )}
                  </div>
                </div>
              </div>
            </PopoverContent>
          </Popover>

{/* Budget */}
          <Popover>
            <PopoverTrigger asChild>
              <Button variant="outline" className="h-10 px-4 font-medium bg-transparent hover:bg-gray-50">
                <DollarSign className="mr-2 h-4 w-4" />
                Budget
                <ChevronDown className="ml-2 h-4 w-4" />
                {(filters.priceRange[0] > 5 || filters.priceRange[1] < 1000) && (
                  <Badge variant="secondary" className="ml-2 h-5 w-5 p-0 text-xs">
                    1
                  </Badge>
                )}
              </Button>
            </PopoverTrigger>
            <PopoverContent className="w-80 p-6" align="start">
              <div className="space-y-6">
                <h4 className="font-semibold text-base flex items-center">
                  <DollarSign className="mr-2 h-4 w-4" />
                  Budget Range
                </h4>

{/* Quick Budget Options */}
                <div className="grid grid-cols-2 gap-2">
                  {[
                    { label: "Under $25", min: 5, max: 25 },
                    { label: "$25 - $50", min: 25, max: 50 },
                    { label: "$50 - $100", min: 50, max: 100 },
                    { label: "$100 - $250", min: 100, max: 250 },
                    { label: "$250 - $500", min: 250, max: 500 },
                    { label: "$500+", min: 500, max: 1000 },
                  ].map((range) => (
                    <Button
                      key={range.label}
                      variant={
                        filters.priceRange[0] === range.min && filters.priceRange[1] === range.max
                          ? "default"
                          : "outline"
                      }
                      size="sm"
                      onClick={() => handleFilterChange("priceRange", [range.min, range.max])}
                      className="h-8 text-xs"
                    >
                      {range.label}
                    </Button>
                  ))}
                </div>

{/* Custom Range Slider */}
                <div className="space-y-4">
                  <Label className="text-sm font-medium">Custom Range</Label>
                  <div className="px-2">
                    <Slider
                      value={filters.priceRange}
                      onValueChange={(value) => handleFilterChange("priceRange", value as [number, number])}
                      max={1000}
                      min={5}
                      step={5}
                      className="w-full"
                    />
                    <div className="flex justify-between mt-2 text-sm text-gray-600">
                      <span>${filters.priceRange[0]}</span>
                      <span>${filters.priceRange[1]}+</span>
                    </div>
                  </div>

{/* Manual Input */}
                  <div className="grid grid-cols-2 gap-2">
                    <div>
                      <Label className="text-xs">Min ($)</Label>
                      <Input
                        type="number"
                        value={filters.priceRange[0]}
                        onChange={(e) => {
                          const value = Number.parseInt(e.target.value) || 5
                          handleFilterChange("priceRange", [value, filters.priceRange[1]])
                        }}
                        className="h-8"
                      />
                    </div>
                    <div>
                      <Label className="text-xs">Max ($)</Label>
                      <Input
                        type="number"
                        value={filters.priceRange[1]}
                        onChange={(e) => {
                          const value = Number.parseInt(e.target.value) || 1000
                          handleFilterChange("priceRange", [filters.priceRange[0], value])
                        }}
                        className="h-8"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </PopoverContent>
          </Popover>

{/* Delivery Time */}
          <Popover>
            <PopoverTrigger asChild>
              <Button variant="outline" className="h-10 px-4 font-medium bg-transparent hover:bg-gray-50">
                <Timer className="mr-2 h-4 w-4" />
                Delivery time
                <ChevronDown className="ml-2 h-4 w-4" />
                {filters.deliveryTime.length > 0 && (
                  <Badge variant="secondary" className="ml-2 h-5 w-5 p-0 text-xs">
                    {filters.deliveryTime.length}
                  </Badge>
                )}
              </Button>
            </PopoverTrigger>
            <PopoverContent className="w-80 p-6" align="start">
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <h4 className="font-semibold text-base flex items-center">
                    <Timer className="mr-2 h-4 w-4" />
                    Delivery Time
                  </h4>
                  <Badge variant="outline" className="text-xs bg-orange-50 text-orange-600">
                    <Activity className="mr-1 h-3 w-3" />
                    Live data
                  </Badge>
                </div>

<div className="space-y-2">
                  {deliveryTimeOptions.map((option) => {
                    const Icon = option.icon
                    const count = stats.deliveryTimes?.[option.value] || Math.floor(Math.random() * 2000) + 500
                    return (
                      <div
                        key={option.value}
                        className="flex items-center justify-between p-2 hover:bg-gray-50 rounded"
                      >
                        <div className="flex items-center space-x-2">
                          <Checkbox
                            id={`delivery-${option.value}`}
                            checked={filters.deliveryTime.includes(option.value)}
                            onCheckedChange={() => toggleArrayFilter("deliveryTime", option.value)}
                          />
                          <Label
                            htmlFor={`delivery-${option.value}`}
                            className="text-sm cursor-pointer flex items-center"
                          >
                            <Icon className={`mr-2 h-4 w-4 ${option.color}`} />
                            {option.label}
                          </Label>
                        </div>
                        <Badge variant="outline" className="text-xs">
                          {count.toLocaleString()}
                        </Badge>
                      </div>
                    )
                  })}
                </div>

<div className="flex items-center space-x-2">
                  <Checkbox
                    id="fast-delivery"
                    checked={filters.fastDelivery}
                    onCheckedChange={(checked) => handleFilterChange("fastDelivery", checked)}
                  />
                  <Label htmlFor="fast-delivery" className="text-sm cursor-pointer flex items-center">
                    <Zap className="mr-1 h-4 w-4 text-yellow-500" />
                    Express delivery available
                  </Label>
                </div>
              </div>
            </PopoverContent>
          </Popover>

<div className="flex items-center space-x-2">
            <Switch
              id="pro-services"
              checked={filters.proServices}
              onCheckedChange={(checked) => handleFilterChange("proServices", checked)}
            />
            <Label htmlFor="pro-services" className="text-sm font-medium cursor-pointer flex items-center">
              <Crown className="mr-1 h-4 w-4 text-yellow-500" />
              Pro services
              <Badge variant="secondary" className="ml-2 text-xs bg-yellow-100 text-yellow-700">
                {(stats.proCount || 2134).toLocaleString()}
              </Badge>
            </Label>
          </div>

<div className="flex items-center space-x-2">
            <Switch
              id="instant-response"
              checked={filters.instantResponse}
              onCheckedChange={(checked) => handleFilterChange("instantResponse", checked)}
            />
            <Label htmlFor="instant-response" className="text-sm font-medium cursor-pointer flex items-center">
              <MessageCircle className="mr-1 h-4 w-4 text-green-500" />
              Instant response
              <Badge variant="secondary" className="ml-1 text-xs bg-green-100 text-green-700">
                {(stats.instantResponseCount || 3456).toLocaleString()}
              </Badge>
              <Badge variant="secondary" className="ml-1 text-xs bg-green-100 text-green-700">
                New
              </Badge>
            </Label>
          </div>

<div className="flex items-center space-x-2">
            <Switch
              id="online-now"
              checked={filters.onlineNow}
              onCheckedChange={(checked) => handleFilterChange("onlineNow", checked)}
            />
            <Label htmlFor="online-now" className="text-sm font-medium cursor-pointer flex items-center">
              <div className="mr-1 h-2 w-2 bg-green-500 rounded-full animate-pulse"></div>
              Online now
              <Badge variant="secondary" className="ml-2 text-xs bg-green-100 text-green-700">
                {(stats.onlineCount || 1847).toLocaleString()} live
              </Badge>
            </Label>
          </div>
        </div>

<div className="flex items-center justify-between mt-4 pt-4 border-t">
          <div className="flex items-center gap-4">
            <span className="text-sm text-gray-600 font-medium">
              {totalResults.toLocaleString()} services available
            </span>

{/* Active Filters */}
            {getActiveFiltersCount() > 0 && (
              <div className="flex items-center gap-2">
                <Badge variant="outline" className="text-xs bg-blue-50 text-blue-700 border-blue-200">
                  <Filter className="mr-1 h-3 w-3" />
                  {getActiveFiltersCount()} filter{getActiveFiltersCount() !== 1 ? "s" : ""}
                </Badge>
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={clearAllFilters}
                  className="text-xs h-6 px-2 text-red-600 hover:text-red-700 hover:bg-red-50"
                >
                  <X className="mr-1 h-3 w-3" />
                  Clear all
                </Button>
              </div>
            )}
          </div>

{/* Sort Options */}
          <div className="flex items-center gap-2">
            <span className="text-sm text-gray-600">Sort by:</span>
            <Select value={filters.sortBy} onValueChange={(value) => handleFilterChange("sortBy", value)}>
              <SelectTrigger className="w-48 h-8">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {sortOptions.map((option) => {
                  const Icon = option.icon
                  return (
                    <SelectItem key={option.value} value={option.value}>
                      <div className="flex items-center">
                        <Icon className="mr-2 h-4 w-4" />
                        {option.label}
                      </div>
                    </SelectItem>
                  )
                })}
              </SelectContent>
            </Select>
          </div>
        </div>

{getActiveFiltersCount() > 0 && (
          <div className="flex flex-wrap gap-2 mt-3">
            {filters.category && filters.category !== selectedCategory && (
              <Badge variant="secondary" className="flex items-center gap-1 bg-blue-100 text-blue-700">
                <Target className="h-3 w-3" />
                {categories.find((c) => c.id === filters.category)?.name}
                <button
                  onClick={() => handleFilterChange("category", selectedCategory || "")}
                  className="ml-1 hover:bg-blue-200 rounded-full p-0.5"
                >
                  <X className="h-3 w-3" />
                </button>
              </Badge>
            )}
            {filters.subcategory && (
              <Badge variant="secondary" className="flex items-center gap-1 bg-purple-100 text-purple-700">
                {subcategories.find((c) => c.id === filters.subcategory)?.name}
                <button
                  onClick={() => handleFilterChange("subcategory", "")}
                  className="ml-1 hover:bg-purple-200 rounded-full p-0.5"
                >
                  <X className="h-3 w-3" />
                </button>
              </Badge>
            )}
            {filters.sellerLevel.map((level) => (
              <Badge key={level} variant="secondary" className="flex items-center gap-1 bg-green-100 text-green-700">
                <span>{sellerLevelOptions.find((l) => l.value === level)?.badge}</span>
                {sellerLevelOptions.find((l) => l.value === level)?.label}
                <button
                  onClick={() => toggleArrayFilter("sellerLevel", level)}
                  className="ml-1 hover:bg-green-200 rounded-full p-0.5"
                >
                  <X className="h-3 w-3" />
                </button>
              </Badge>
            ))}
            {filters.proServices && (
              <Badge variant="secondary" className="flex items-center gap-1 bg-yellow-100 text-yellow-700">
                <Crown className="h-3 w-3" />
                Pro services
                <button
                  onClick={() => handleFilterChange("proServices", false)}
                  className="ml-1 hover:bg-yellow-200 rounded-full p-0.5"
                >
                  <X className="h-3 w-3" />
                </button>
              </Badge>
            )}
            {filters.instantResponse && (
              <Badge variant="secondary" className="flex items-center gap-1 bg-green-100 text-green-700">
                <MessageCircle className="h-3 w-3" />
                Instant response
                <button
                  onClick={() => handleFilterChange("instantResponse", false)}
                  className="ml-1 hover:bg-green-200 rounded-full p-0.5"
                >
                  <X className="h-3 w-3" />
                </button>
              </Badge>
            )}
            {filters.onlineNow && (
              <Badge variant="secondary" className="flex items-center gap-1 bg-green-100 text-green-700">
                <div className="h-2 w-2 bg-green-500 rounded-full"></div>
                Online now
                <button
                  onClick={() => handleFilterChange("onlineNow", false)}
                  className="ml-1 hover:bg-green-200 rounded-full p-0.5"
                >
                  <X className="h-3 w-3" />
                </button>
              </Badge>
            )}
            {filters.deliveryTime.map((time) => (
              <Badge key={time} variant="secondary" className="flex items-center gap-1 bg-orange-100 text-orange-700">
                <Clock className="h-3 w-3" />
                {deliveryTimeOptions.find((d) => d.value === time)?.label}
                <button
                  onClick={() => toggleArrayFilter("deliveryTime", time)}
                  className="ml-1 hover:bg-orange-200 rounded-full p-0.5"
                >
                  <X className="h-3 w-3" />
                </button>
              </Badge>
            ))}
            {(filters.priceRange[0] > 5 || filters.priceRange[1] < 1000) && (
              <Badge variant="secondary" className="flex items-center gap-1 bg-blue-100 text-blue-700">
                <DollarSign className="h-3 w-3" />${filters.priceRange[0]} - ${filters.priceRange[1]}
                <button
                  onClick={() => handleFilterChange("priceRange", [5, 1000])}
                  className="ml-1 hover:bg-blue-200 rounded-full p-0.5"
                >
                  <X className="h-3 w-3" />
                </button>
              </Badge>
            )}
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/jobs/create/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { useAuth } from "@/contexts/auth-context"
import { DashboardHeader } from "@/components/dashboard/dashboard-header"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { toast } from "sonner"
import { getCategoriesWithSubcategories, type CategoryWithSubcategories } from "@/lib/categories"
import { getWallet, type Wallet } from "@/lib/wallet"
import {
  calculateScreenshotCosts,
  getScreenshotPricingSettings,
  type ScreenshotPricingCalculation,
  type ScreenshotPricingSettings,
} from "@/lib/screenshot-pricing"
import { getPlatformFeeSettings, calculatePlatformFee, type PlatformFeeSettings } from "@/lib/platform-fee"
import {
  X,
  Plus,
  DollarSign,
  Users,
  Clock,
  AlertCircle,
  Info,
  Camera,
  WalletIcon,
  HelpCircle,
  Zap,
  Shield,
} from "lucide-react"

interface JobStep {
  id: string
  content: string
}

const REGIONS = {
  Asia: [
    "CN",
    "IN",
    "JP",
    "KR",
    "TH",
    "VN",
    "PH",
    "ID",
    "MY",
    "SG",
    "BD",
    "PK",
    "LK",
    "MM",
    "KH",
    "LA",
    "BN",
    "MN",
    "TW",
    "HK",
    "MO",
  ],
  Europe: [
    "DE",
    "FR",
    "IT",
    "ES",
    "GB",
    "PL",
    "RO",
    "NL",
    "BE",
    "GR",
    "PT",
    "CZ",
    "HU",
    "SE",
    "AT",
    "BY",
    "CH",
    "BG",
    "RS",
    "SK",
    "DK",
    "FI",
    "NO",
    "IE",
    "HR",
    "BA",
    "AL",
    "LT",
    "SI",
    "LV",
    "EE",
    "MK",
    "MD",
    "MT",
    "LU",
    "IS",
    "ME",
    "CY",
    "AD",
    "SM",
    "LI",
    "MC",
    "VA",
  ],
  "North America": [
    "US",
    "CA",
    "MX",
    "GT",
    "CU",
    "DO",
    "HT",
    "HN",
    "NI",
    "CR",
    "PA",
    "JM",
    "TT",
    "BS",
    "BZ",
    "SV",
    "BB",
    "GD",
    "LC",
    "VC",
    "AG",
    "DM",
    "KN",
  ],
  "South America": ["BR", "AR", "CO", "PE", "VE", "CL", "EC", "BO", "PY", "UY", "GY", "SR", "GF"],
  Africa: [
    "NG",
    "ET",
    "EG",
    "ZA",
    "KE",
    "UG",
    "DZ",
    "SD",
    "MA",
    "AO",
    "GH",
    "MZ",
    "MG",
    "CM",
    "CI",
    "NE",
    "BF",
    "ML",
    "MW",
    "ZM",
    "SO",
    "SN",
    "TD",
    "ZW",
    "GN",
    "RW",
    "BJ",
    "TN",
    "BI",
    "ER",
    "SL",
    "TG",
    "CF",
    "LY",
    "LR",
    "MR",
    "GM",
    "BW",
    "GA",
    "LS",
    "GW",
    "GQ",
    "MU",
    "SZ",
    "DJ",
    "KM",
    "CV",
    "ST",
    "SC",
  ],
  Oceania: ["AU", "PG", "NZ", "FJ", "SB", "NC", "PF", "VU", "WS", "KI", "FM", "TO", "MH", "PW", "CK", "NU", "TV", "NR"],
}

const COUNTRIES = {
  US: "United States",
  CA: "Canada",
  GB: "United Kingdom",
  DE: "Germany",
  FR: "France",
  IT: "Italy",
  ES: "Spain",
  NL: "Netherlands",
  BE: "Belgium",
  CH: "Switzerland",
  AT: "Austria",
  SE: "Sweden",
  NO: "Norway",
  DK: "Denmark",
  FI: "Finland",
  PL: "Poland",
  CZ: "Czech Republic",
  HU: "Hungary",
  SK: "Slovakia",
  SI: "Slovenia",
  HR: "Croatia",
  RO: "Romania",
  BG: "Bulgaria",
  GR: "Greece",
  PT: "Portugal",
  IE: "Ireland",
  LU: "Luxembourg",
  MT: "Malta",
  CY: "Cyprus",
  EE: "Estonia",
  LV: "Latvia",
  LT: "Lithuania",
  AU: "Australia",
  NZ: "New Zealand",
  JP: "Japan",
  KR: "South Korea",
  CN: "China",
  IN: "India",
  SG: "Singapore",
  HK: "Hong Kong",
  TW: "Taiwan",
  MY: "Malaysia",
  TH: "Thailand",
  PH: "Philippines",
  ID: "Indonesia",
  VN: "Vietnam",
  BD: "Bangladesh",
  PK: "Pakistan",
  LK: "Sri Lanka",
  MM: "Myanmar",
  BR: "Brazil",
  AR: "Argentina",
  MX: "Mexico",
  CO: "Colombia",
  PE: "Peru",
  CL: "Chile",
  VE: "Venezuela",
  EC: "Ecuador",
  BO: "Bolivia",
  PY: "Paraguay",
  UY: "Uruguay",
  NG: "Nigeria",
  ZA: "South Africa",
  EG: "Egypt",
  KE: "Kenya",
  MA: "Morocco",
  GH: "Ghana",
  ET: "Ethiopia",
  UG: "Uganda",
  TN: "Tunisia",
  DZ: "Algeria",
  AO: "Angola",
  MZ: "Mozambique",
  MG: "Madagascar",
  CM: "Cameroon",
  CI: "Ivory Coast",
  NE: "Niger",
  BF: "Burkina Faso",
  ML: "Mali",
  MW: "Malawi",
  ZM: "Zambia",
  SO: "Somalia",
  SN: "Senegal",
  TD: "Chad",
  ZW: "Zimbabwe",
  GN: "Guinea",
  RW: "Rwanda",
  BJ: "Benin",
  BI: "Burundi",
  ER: "Eritrea",
  SL: "Sierra Leone",
  TG: "Togo",
  CF: "Central African Republic",
  LY: "Libya",
  LR: "Liberia",
  MR: "Mauritania",
  GM: "Gambia",
  BW: "Botswana",
  GA: "Gabon",
  LS: "Lesotho",
  GW: "Guinea-Bissau",
  GQ: "Equatorial Guinea",
  MU: "Mauritius",
  SZ: "Eswatini",
  DJ: "Djibouti",
  KM: "Comoros",
  CV: "Cape Verde",
  ST: "São Tomé and Príncipe",
  SC: "Seychelles",
  RU: "Russia",
  TR: "Turkey",
  IL: "Israel",
  AE: "UAE",
  SA: "Saudi Arabia",
  IR: "Iran",
  IQ: "Iraq",
  JO: "Jordan",
  LB: "Lebanon",
  SY: "Syria",
  YE: "Yemen",
  OM: "Oman",
  QA: "Qatar",
  KW: "Kuwait",
  BH: "Bahrain",
}

export default function CreateJobPage() {
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [categories, setCategories] = useState<CategoryWithSubcategories[]>([])
  const [selectedSubcategoryMinPayment, setSelectedSubcategoryMinPayment] = useState<number>(0)
  const [wallet, setWallet] = useState<Wallet | null>(null)
  const [walletLoading, setWalletLoading] = useState(true)
  const [screenshotPricing, setScreenshotPricing] = useState<ScreenshotPricingCalculation | null>(null)
  const [screenshotSettings, setScreenshotSettings] = useState<ScreenshotPricingSettings | null>(null)
  const [isInstantApprovalEnabled, setIsInstantApprovalEnabled] = useState(false)
  const [platformFeeSettings, setPlatformFeeSettings] = useState<PlatformFeeSettings | null>(null)
  const [allowManualApprovalTimeSelection, setAllowManualApprovalTimeSelection] = useState(true)
  const [availableTimeOptions, setAvailableTimeOptions] = useState<
    Array<{
      label: string
      value: string
      isDefault: boolean
    }>
  >([])
  const router = useRouter()
  const { user } = useAuth()

const [jobData, setJobData] = useState({
    category: "",
    subcategory: "",
    title: "",
    steps: [{ id: "1", content: "" }] as JobStep[],
    requiredProof: "",
    workersNeeded: "1",
    workerEarning: "",
    requireScreenshots: "0",
    approvalType: "manual", // "instant" or "manual"
    manualApprovalDays: "3", // 1-7 days for manual approval
    estimatedJobCost: "0.00",
    enableCountryRestrictions: false,
    restrictionType: "include", // "include" or "exclude"
    selectedCountries: [] as string[],
    selectedRegions: [] as string[],
    enableThumbnail: false,
    thumbnailFile: null as File | null,
    thumbnailPreview: "",
  })

const [countryRestrictionsEnabled, setCountryRestrictionsEnabled] = useState(true)
  const [thumbnailEnabled, setThumbnailEnabled] = useState(true)

const [errors, setErrors] = useState<Record<string, string>>({})

useEffect(() => {
    loadCategories()
    loadWalletData()
    loadScreenshotSettings()
    checkInstantApprovalSetting()
    loadDefaultManualApprovalDays()
    loadPlatformFeeSettings()
    loadApprovalSettings()
    loadAvailableTimeOptions()
    loadCountryRestrictionSettings()
    loadThumbnailSettings()
  }, [])

const loadThumbnailSettings = () => {
    try {
      const setting = localStorage.getItem("admin_thumbnail_enabled")
      setThumbnailEnabled(setting !== "false") // Default to true
    } catch (error) {
      console.error("Failed to load thumbnail settings:", error)
      setThumbnailEnabled(true)
    }
  }

const handleThumbnailUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0]
    if (file) {
      // Validate file type
      if (!file.type.startsWith("image/")) {
        toast.error("Please select an image file")
        return
      }

// Validate file size (max 5MB)
      if (file.size > 5 * 1024 * 1024) {
        toast.error("Image size must be less than 5MB")
        return
      }

const reader = new FileReader()
      reader.onload = (e) => {
        setJobData((prev) => ({
          ...prev,
          thumbnailFile: file,
          thumbnailPreview: e.target?.result as string,
        }))
      }
      reader.readAsDataURL(file)
    }
  }

const removeThumbnail = () => {
    setJobData((prev) => ({
      ...prev,
      thumbnailFile: null,
      thumbnailPreview: "",
    }))
  }

const loadCountryRestrictionSettings = () => {
    try {
      const setting = localStorage.getItem("admin_country_restrictions_enabled")
      setCountryRestrictionsEnabled(setting !== "false") // Default to true
    } catch (error) {
      console.error("Failed to load country restriction settings:", error)
      setCountryRestrictionsEnabled(true)
    }
  }

const handleRegionToggle = (regionName: string) => {
    const regionCountries = REGIONS[regionName as keyof typeof REGIONS]
    const isRegionSelected = jobData.selectedRegions.includes(regionName)

if (isRegionSelected) {
      // Remove region and its countries
      setJobData((prev) => ({
        ...prev,
        selectedRegions: prev.selectedRegions.filter((r) => r !== regionName),
        selectedCountries: prev.selectedCountries.filter((c) => !regionCountries.includes(c)),
      }))
    } else {
      // Add region and its countries
      setJobData((prev) => ({
        ...prev,
        selectedRegions: [...prev.selectedRegions, regionName],
        selectedCountries: [...new Set([...prev.selectedCountries, ...regionCountries])],
      }))
    }
  }

const handleCountryToggle = (countryCode: string) => {
    const isSelected = jobData.selectedCountries.includes(countryCode)

if (isSelected) {
      setJobData((prev) => ({
        ...prev,
        selectedCountries: prev.selectedCountries.filter((c) => c !== countryCode),
      }))
    } else {
      setJobData((prev) => ({
        ...prev,
        selectedCountries: [...prev.selectedCountries, countryCode],
      }))
    }

// Update region selection based on countries
    const updatedCountries = isSelected
      ? jobData.selectedCountries.filter((c) => c !== countryCode)
      : [...jobData.selectedCountries, countryCode]

const updatedRegions = Object.entries(REGIONS)
      .filter(([regionName, regionCountries]) => {
        return regionCountries.every((country) => updatedCountries.includes(country))
      })
      .map(([regionName]) => regionName)

setJobData((prev) => ({
      ...prev,
      selectedRegions: updatedRegions,
    }))
  }

const removeCountry = (countryCode: string) => {
    setJobData((prev) => ({
      ...prev,
      selectedCountries: prev.selectedCountries.filter((c) => c !== countryCode),
      selectedRegions: prev.selectedRegions.filter((regionName) => {
        const regionCountries = REGIONS[regionName as keyof typeof REGIONS]
        return !regionCountries.includes(countryCode)
      }),
    }))
  }

const loadApprovalSettings = async () => {
    try {
      const response = await fetch("/api/admin/approval-settings")
      if (response.ok) {
        const settings = await response.json()
        setAllowManualApprovalTimeSelection(settings.allowManualApprovalTimeSelection)
        console.log("[v0] 🔧 Loaded approval settings:", settings)
      } else {
        console.log("[v0] Using default approval settings")
        setAllowManualApprovalTimeSelection(true)
      }
    } catch (error) {
      console.error("Failed to load approval settings:", error)
      setAllowManualApprovalTimeSelection(true)
    }
  }

const checkInstantApprovalSetting = () => {
    try {
      const setting = localStorage.getItem("admin_instant_approval_enabled")
      setIsInstantApprovalEnabled(setting === "true")
    } catch (error) {
      console.error("Failed to check instant approval setting:", error)
      setIsInstantApprovalEnabled(false)
    }
  }

const loadScreenshotSettings = async () => {
    try {
      const settings = await getScreenshotPricingSettings()
      setScreenshotSettings(settings)
    } catch (error) {
      console.error("Failed to load screenshot settings:", error)
    }
  }

const loadCategories = async () => {
    try {
      const data = await getCategoriesWithSubcategories()
      setCategories(data)
    } catch (error) {
      console.error("Failed to load categories:", error)
      toast.error("Failed to load categories")
    }
  }

const loadWalletData = async () => {
    if (!user?.id) return

setWalletLoading(true)
    try {
      const walletData = await getWallet(user.id)
      setWallet(walletData)
    } catch (error) {
      console.error("Failed to load wallet data:", error)
      toast.error("Failed to load wallet information")
    } finally {
      setWalletLoading(false)
    }
  }

const loadDefaultManualApprovalDays = () => {
    try {
      const defaultDays = localStorage.getItem("admin_default_manual_approval_days")
      if (defaultDays) {
        const days = Number.parseFloat(defaultDays)
        setJobData((prev) => ({ ...prev, manualApprovalDays: days.toString() }))
        console.log("[v0] 🔧 Loaded default manual approval days:", days)
      }
    } catch (error) {
      console.error("Failed to load default manual approval days:", error)
    }
  }

const loadPlatformFeeSettings = async () => {
    try {
      const settings = await getPlatformFeeSettings()
      setPlatformFeeSettings(settings)
    } catch (error) {
      console.error("Failed to load platform fee settings:", error)
      setPlatformFeeSettings({
        id: "default",
        feeType: "job_platform_fee",
        feePercentage: 5.0,
        feeFixed: 0.0,
        minimumFee: 0.0,
        isActive: true,
        createdAt: new Date().toISOString(),
        updatedAt: new Date().toISOString(),
      })
    }
  }

const loadAvailableTimeOptions = () => {
    try {
      let allOptions: Array<{ label: string; value: string; isDefault: boolean }> = []

const defaultTimeOptions = localStorage.getItem("admin_default_time_options")
      if (defaultTimeOptions) {
        const defaultPeriods = JSON.parse(defaultTimeOptions)
        const defaultOptions = defaultPeriods.map((period: any) => ({
          label: period.label,
          value: period.value.toString(),
          isDefault: true,
        }))
        allOptions = [...allOptions, ...defaultOptions]
        console.log("[v0] 🔧 Loaded default time options from admin:", defaultOptions)
      }

const customPeriods = localStorage.getItem("admin_custom_time_periods")
      if (customPeriods) {
        const periods = JSON.parse(customPeriods)
        const customOptions = periods.map((period: any) => ({
          label: period.label,
          value: period.value.toString(),
          isDefault: false,
        }))
        allOptions = [...allOptions, ...customOptions]
        console.log("[v0] 🔧 Loaded custom time options from admin:", customOptions)
      }

if (allOptions.length === 0) {
        console.log("[v0] 🔧 No admin time options found, using fallback defaults")
        allOptions = [
          { label: "1 Day", value: "1", isDefault: true },
          { label: "3 Days", value: "3", isDefault: true },
          { label: "7 Days", value: "7", isDefault: true },
        ]
      }

const sortedOptions = allOptions.sort((a, b) => Number.parseFloat(a.value) - Number.parseFloat(b.value))

setAvailableTimeOptions(sortedOptions)
      console.log("[v0] 🔧 Final available time options:", sortedOptions)
    } catch (error) {
      console.error("Failed to load time options:", error)
      setAvailableTimeOptions([
        { label: "1 Day", value: "1", isDefault: true },
        { label: "3 Days", value: "3", isDefault: true },
        { label: "7 Days", value: "7", isDefault: true },
      ])
    }
  }

useEffect(() => {
    const calculateCosts = async () => {
      const workers = Number.parseInt(jobData.workersNeeded) || 0
      const earning = Number.parseFloat(jobData.workerEarning) || 0
      const baseJobCost = workers * earning
      const screenshotCount = Number.parseInt(jobData.requireScreenshots) || 0

let screenshotCost = 0
      let screenshotCalculation: ScreenshotPricingCalculation | null = null

if (screenshotCount > 0) {
        try {
          screenshotCalculation = await calculateScreenshotCosts(screenshotCount, baseJobCost)
          screenshotCost = screenshotCalculation.totalScreenshotCost
          setScreenshotPricing(screenshotCalculation)
        } catch (error) {
          console.error("Error calculating screenshot costs:", error)
          screenshotCost = screenshotCount * 0.05
          setScreenshotPricing(null)
        }
      } else {
        setScreenshotPricing(null)
      }

const subtotal = baseJobCost + screenshotCost

let platformFee = 0
      let platformFeeRate = 5

if (platformFeeSettings) {
        const feeCalculation = calculatePlatformFee(subtotal, platformFeeSettings)
        platformFee = feeCalculation.platformFee
        platformFeeRate = platformFeeSettings.feePercentage
      } else {
        platformFee = subtotal * 0.05
      }

const totalCost = subtotal + platformFee
      setJobData((prev) => ({ ...prev, estimatedJobCost: totalCost.toFixed(2) }))
    }

calculateCosts()
  }, [jobData.workersNeeded, jobData.workerEarning, jobData.requireScreenshots, platformFeeSettings])

const validateForm = () => {
    const newErrors: Record<string, string> = {}

if (!jobData.category) newErrors.category = "Please select a category"
    if (!jobData.subcategory) newErrors.subcategory = "Please select a subcategory"
    if (!jobData.title.trim()) newErrors.title = "Job title is required"
    if (jobData.steps.some((step) => !step.content.trim())) newErrors.steps = "All steps must have content"
    if (!jobData.requiredProof.trim()) newErrors.requiredProof = "Required proof is needed"

if (!jobData.workersNeeded || Number.parseInt(jobData.workersNeeded) <= 0) {
      newErrors.workersNeeded = "Number of workers is required"
    }
    if (!jobData.workerEarning || Number.parseFloat(jobData.workerEarning) <= 0) {
      newErrors.workerEarning = "Worker earning is required"
    }
    if (selectedSubcategoryMinPayment > 0 && Number.parseFloat(jobData.workerEarning) < selectedSubcategoryMinPayment) {
      newErrors.workerEarning = `Minimum payment for this category is $${selectedSubcategoryMinPayment}`
    }

const screenshotCount = Number.parseInt(jobData.requireScreenshots) || 0
    const maxScreenshots = screenshotSettings?.max_screenshots_allowed || 5
    if (screenshotCount > maxScreenshots) {
      newErrors.requireScreenshots = `Maximum ${maxScreenshots} screenshots allowed`
    }

if (jobData.approvalType === "manual") {
      const days = Number.parseFloat(jobData.manualApprovalDays)
      if (!days || days < 0.000694 || days > 7) {
        newErrors.manualApprovalDays = "Manual approval days must be between 1 minute and 7 days"
      }
    }

const totalCost = Number.parseFloat(jobData.estimatedJobCost)

if (wallet && wallet.depositBalance < totalCost) {
      newErrors.wallet = `Insufficient deposit balance. Required: $${totalCost.toFixed(2)}, Available: $${wallet.depositBalance.toFixed(2)}`
    }

setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

const addStep = () => {
    const newStep: JobStep = {
      id: (jobData.steps.length + 1).toString(),
      content: "",
    }
    setJobData((prev) => ({
      ...prev,
      steps: [...prev.steps, newStep],
    }))
  }

const removeStep = (stepId: string) => {
    if (jobData.steps.length <= 1) return
    setJobData((prev) => ({
      ...prev,
      steps: prev.steps.filter((step) => step.id !== stepId),
    }))
  }

const updateStep = (stepId: string, content: string) => {
    setJobData((prev) => ({
      ...prev,
      steps: prev.steps.map((step) => (step.id === stepId ? { ...step, content } : step)),
    }))
  }

const getSelectedCategory = () => {
    return categories.find((cat) => cat.id === jobData.category)
  }

const getSelectedSubcategories = () => {
    const category = getSelectedCategory()
    return category?.subcategories || []
  }

const handleSubmit = async () => {
    if (!validateForm()) return

setIsSubmitting(true)
    try {
      const { createJob } = await import("@/lib/jobs")

const jobSubmissionData = {
        title: jobData.title,
        description: `Steps to complete:\n${jobData.steps.map((step, index) => `${index + 1}. ${step.content}`).join("\n")}`,
        categoryId: jobData.category,
        subcategoryId: jobData.subcategory,
        requirements: jobData.requiredProof,
        instructions: jobData.steps.map((step, index) => `Step ${index + 1}: ${step.content}`).join("\n"),
        budgetMin: Number.parseFloat(jobData.workerEarning),
        budgetMax: Number.parseFloat(jobData.workerEarning),
        deadline:
          jobData.approvalType === "instant"
            ? new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString().split("T")[0]
            : new Date(Date.now() + Number.parseInt(jobData.manualApprovalDays) * 24 * 60 * 60 * 1000)
                .toISOString()
                .split("T")[0],
        location: "Remote",
        workersNeeded: Number.parseInt(jobData.workersNeeded),
        tags: [],
        attachments: [],
        userId: user?.id || "",
        requireScreenshots: Number.parseInt(jobData.requireScreenshots) || 0,
        approvalType: jobData.approvalType,
        manualApprovalDays: jobData.approvalType === "manual" ? Number.parseFloat(jobData.manualApprovalDays) : null,
        estimatedApprovalDays: jobData.approvalType === "instant" ? 0 : Number.parseFloat(jobData.manualApprovalDays),
        enableCountryRestrictions: jobData.enableCountryRestrictions,
        restrictionType: jobData.restrictionType,
        allowedCountries: jobData.enableCountryRestrictions ? jobData.selectedCountries : [],
        restrictedCountries:
          jobData.enableCountryRestrictions && jobData.restrictionType === "exclude" ? jobData.selectedCountries : [],
      }

console.log(
        "[v0] 📸 JOB CREATION: Submitting job with approval type:",
        jobData.approvalType,
        "and screenshot requirements:",
        jobSubmissionData.requireScreenshots,
        "and country restrictions:",
        jobSubmissionData.enableCountryRestrictions,
      )

await createJob(jobSubmissionData)

toast.success("Microjob created successfully! The estimated cost has been deducted from your deposit balance.")
      await loadWalletData()
      router.push("/dashboard")
    } catch (error) {
      console.error("Job creation error:", error)
      toast.error(error instanceof Error ? error.message : "Failed to create microjob. Please try again.")
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <>
      <DashboardHeader title="Create Microjob" description="Post a new microjob for the community" />

<div className="flex-1 overflow-auto bg-gray-50">
        <div className="max-w-4xl mx-auto p-6 space-y-8">
          <Card className="shadow-sm border-0 bg-gradient-to-r from-blue-50 to-purple-50 border-blue-200">
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div className="flex items-center space-x-4">
                  <div className="p-3 bg-blue-100 rounded-full">
                    <WalletIcon className="h-6 w-6 text-blue-600" />
                  </div>
                  <div>
                    <h3 className="text-lg font-semibold text-blue-900">Your Deposit Balance</h3>
                    <p className="text-sm text-blue-700">Required to post microjobs</p>
                  </div>
                </div>
                <div className="text-right">
                  {walletLoading ? (
                    <div className="animate-pulse">
                      <div className="h-8 w-24 bg-blue-200 rounded"></div>
                    </div>
                  ) : (
                    <div className="text-3xl font-bold text-blue-800">
                      ${wallet?.depositBalance?.toFixed(2) || "0.00"}
                    </div>
                  )}
                  <p className="text-sm text-blue-600">Available for job posting</p>
                </div>
              </div>
              {errors.wallet && (
                <div className="mt-4 p-3 bg-red-50 border border-red-200 rounded-lg">
                  <div className="flex items-center space-x-2">
                    <AlertCircle className="h-4 w-4 text-red-600" />
                    <p className="text-sm text-red-700 font-medium">{errors.wallet}</p>
                  </div>
                </div>
              )}
            </CardContent>
          </Card>

<Card className="shadow-sm border-0 bg-white">
            <CardHeader className="border-b border-gray-100 bg-gray-50/50">
              <CardTitle className="text-xl font-semibold text-gray-900 flex items-center space-x-2">
                <div className="w-1 h-6 bg-purple-600 rounded-full"></div>
                <span>JOB INFORMATION</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="p-8 space-y-8">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div className="space-y-3">
                  <Label htmlFor="category" className="text-sm font-semibold text-gray-700">
                    Category *
                  </Label>
                  <Select
                    value={jobData.category}
                    onValueChange={(value) => setJobData((prev) => ({ ...prev, category: value, subcategory: "" }))}
                  >
                    <SelectTrigger
                      className={`h-12 border-gray-200 focus:border-purple-500 focus:ring-purple-500 ${errors.category ? "border-red-500" : ""}`}
                    >
                      <SelectValue placeholder="Select Category" />
                    </SelectTrigger>
                    <SelectContent>
                      {categories.map((category) => (
                        <SelectItem key={category.id} value={category.id}>
                          {category.name}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  {errors.category && <p className="text-sm text-red-500 mt-1">{errors.category}</p>}
                </div>

<div className="space-y-3">
                  <Label htmlFor="subcategory" className="text-sm font-semibold text-gray-700">
                    Sub Category *
                  </Label>
                  <Select
                    value={jobData.subcategory}
                    onValueChange={(value) => {
                      const selectedSubcategory = getSelectedSubcategories().find((sub) => sub.id === value)
                      const minPayment = selectedSubcategory?.minimumPayment || 0
                      setSelectedSubcategoryMinPayment(minPayment)

const currentEarning = Number.parseFloat(jobData.workerEarning) || 0
                      const newWorkerEarning =
                        currentEarning < minPayment ? minPayment.toString() : jobData.workerEarning

setJobData((prev) => ({
                        ...prev,
                        subcategory: value,
                        workerEarning: newWorkerEarning,
                      }))
                    }}
                    disabled={!jobData.category}
                  >
                    <SelectTrigger
                      className={`h-12 border-gray-200 focus:border-purple-500 focus:ring-purple-500 ${errors.subcategory ? "border-red-500" : ""}`}
                    >
                      <SelectValue placeholder="Select Sub Category" />
                    </SelectTrigger>
                    <SelectContent>
                      {getSelectedSubcategories().map((subcategory) => (
                        <SelectItem key={subcategory.id} value={subcategory.id}>
                          <div className="flex items-center justify-between w-full">
                            <span>{subcategory.name}</span>
                            <Badge variant="secondary" className="ml-2 text-xs bg-green-100 text-green-700">
                              Min: ${subcategory.minimumPayment}
                            </Badge>
                          </div>
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  {errors.subcategory && <p className="text-sm text-red-500 mt-1">{errors.subcategory}</p>}
                  {selectedSubcategoryMinPayment > 0 && (
                    <div className="flex items-center space-x-2 text-sm text-blue-600 bg-blue-50 p-3 rounded-lg">
                      <Info className="h-4 w-4" />
                      <span>Minimum payment for this category: ${selectedSubcategoryMinPayment}</span>
                    </div>
                  )}
                </div>
              </div>

<div className="space-y-3">
                <Label htmlFor="title" className="text-sm font-semibold text-gray-700">
                  Job Title *
                </Label>
                <Input
                  id="title"
                  placeholder="Enter a clear and descriptive job title"
                  value={jobData.title}
                  onChange={(e) => setJobData((prev) => ({ ...prev, title: e.target.value }))}
                  className={`h-12 border-gray-200 focus:border-purple-500 focus:ring-purple-500 ${errors.title ? "border-red-500" : ""}`}
                />
                {errors.title && <p className="text-sm text-red-500 mt-1">{errors.title}</p>}
              </div>

<div className="space-y-6">
                <div className="flex items-center justify-between">
                  <Label className="text-sm font-semibold text-gray-700">Job Steps *</Label>
                  <Button
                    type="button"
                    variant="outline"
                    onClick={addStep}
                    className="flex items-center space-x-2 text-purple-600 border-purple-200 hover:bg-purple-50 bg-transparent"
                  >
                    <Plus className="h-4 w-4" />
                    <span>Add New Step</span>
                  </Button>
                </div>

<div className="space-y-4">
                  {jobData.steps.map((step, index) => (
                    <div key={step.id} className="border border-gray-200 rounded-lg p-4 bg-gray-50/30">
                      <div className="flex items-center justify-between mb-3">
                        <Label className="text-sm font-medium text-gray-700">Step {index + 1} *</Label>
                        {jobData.steps.length > 1 && (
                          <Button
                            type="button"
                            variant="ghost"
                            size="sm"
                            onClick={() => removeStep(step.id)}
                            className="text-red-500 hover:text-red-700 hover:bg-red-50"
                          >
                            <X className="h-4 w-4" />
                          </Button>
                        )}
                      </div>
                      <Textarea
                        placeholder={`Describe what workers need to do in step ${index + 1}...`}
                        value={step.content}
                        onChange={(e) => updateStep(step.id, e.target.value)}
                        rows={3}
                        className="resize-none border-gray-200 focus:border-purple-500 focus:ring-purple-500"
                      />
                    </div>
                  ))}
                </div>
                {errors.steps && <p className="text-sm text-red-500">{errors.steps}</p>}
              </div>

<div className="space-y-3">
                <Label htmlFor="requiredProof" className="text-sm font-semibold text-gray-700">
                  Required Proof *
                </Label>
                <Textarea
                  id="requiredProof"
                  placeholder="Describe what proof workers need to provide to complete this job (screenshots, links, files, etc.)"
                  value={jobData.requiredProof}
                  onChange={(e) => setJobData((prev) => ({ ...prev, requiredProof: e.target.value }))}
                  rows={4}
                  className="resize-none border-gray-200 focus:border-purple-500 focus:ring-purple-500"
                />
                {errors.requiredProof && <p className="text-sm text-red-500 mt-1">{errors.requiredProof}</p>}
              </div>

{thumbnailEnabled && (
                <div className="space-y-4">
                  <div className="flex items-center justify-between">
                    <div>
                      <Label className="text-sm font-semibold text-gray-700">Job Thumbnail (Optional)</Label>
                      <p className="text-sm text-gray-500 mt-1">Add an image to make your job more attractive</p>
                    </div>
                    <div className="flex items-center space-x-3">
                      <span className="text-sm text-gray-600">Off</span>
                      <button
                        type="button"
                        onClick={() => setJobData((prev) => ({ ...prev, enableThumbnail: !prev.enableThumbnail }))}
                        className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
                          jobData.enableThumbnail ? "bg-purple-600" : "bg-gray-200"
                        }`}
                      >
                        <span
                          className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                            jobData.enableThumbnail ? "translate-x-6" : "translate-x-1"
                          }`}
                        />
                      </button>
                      <span className="text-sm text-gray-600">On</span>
                    </div>
                  </div>

{jobData.enableThumbnail && (
                    <div className="space-y-4">
                      {!jobData.thumbnailPreview ? (
                        <div className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-purple-400 transition-colors">
                          <div className="space-y-2">
                            <Camera className="h-12 w-12 text-gray-400 mx-auto" />
                            <div>
                              <label htmlFor="thumbnail-upload" className="cursor-pointer">
                                <span className="text-purple-600 hover:text-purple-700 font-medium">
                                  Click to upload
                                </span>
                                <span className="text-gray-500"> or drag and drop</span>
                              </label>
                              <input
                                id="thumbnail-upload"
                                type="file"
                                accept="image/*"
                                onChange={handleThumbnailUpload}
                                className="hidden"
                              />
                            </div>
                            <p className="text-xs text-gray-500">PNG, JPG, GIF up to 5MB</p>
                          </div>
                        </div>
                      ) : (
                        <div className="relative">
                          <div className="border border-gray-200 rounded-lg p-4 bg-gray-50">
                            <div className="flex items-start space-x-4">
                              <img
                                src={jobData.thumbnailPreview || "/placeholder.svg"}
                                alt="Job thumbnail preview"
                                className="w-24 h-24 object-cover rounded-lg border border-gray-200"
                              />
                              <div className="flex-1">
                                <h4 className="font-medium text-gray-900">Thumbnail Preview</h4>
                                <p className="text-sm text-gray-600 mt-1">{jobData.thumbnailFile?.name}</p>
                                <p className="text-xs text-gray-500 mt-1">
                                  {jobData.thumbnailFile && (jobData.thumbnailFile.size / 1024 / 1024).toFixed(2)} MB
                                </p>
                              </div>
                              <Button
                                type="button"
                                variant="ghost"
                                size="sm"
                                onClick={removeThumbnail}
                                className="text-red-500 hover:text-red-700 hover:bg-red-50"
                              >
                                <X className="h-4 w-4" />
                              </Button>
                            </div>
                          </div>
                        </div>
                      )}

<div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
                        <div className="flex items-center space-x-2">
                          <Info className="h-4 w-4 text-blue-600" />
                          <p className="text-sm text-blue-700">
                            Adding a thumbnail can increase worker interest by up to 40%. Choose an image that
                            represents your job clearly.
                          </p>
                        </div>
                      </div>
                    </div>
                  )}
                </div>
              )}
            </CardContent>
          </Card>

<Card className="shadow-sm border-0 bg-white">
            <CardHeader className="border-b border-gray-100 bg-gray-50/50">
              <CardTitle className="text-xl font-semibold text-gray-900 flex items-center space-x-2">
                <div className="w-1 h-6 bg-purple-600 rounded-full"></div>
                <span>BUDGET & SETTING</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="p-8 space-y-8">
              <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div className="space-y-3">
                  <Label htmlFor="workersNeeded" className="text-sm font-semibold text-gray-700">
                    Worker Need
                  </Label>
                  <div className="relative">
                    <Users className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
                    <Input
                      id="workersNeeded"
                      type="number"
                      min="1"
                      value={jobData.workersNeeded}
                      onChange={(e) => setJobData((prev) => ({ ...prev, workersNeeded: e.target.value }))}
                      className={`pl-12 h-14 text-center text-lg font-semibold border-gray-200 focus:border-purple-500 focus:ring-purple-500 ${errors.workersNeeded ? "border-red-500" : ""}`}
                    />
                  </div>
                  {errors.workersNeeded && <p className="text-sm text-red-500">{errors.workersNeeded}</p>}
                </div>

<div className="space-y-3">
                  <Label htmlFor="workerEarning" className="text-sm font-semibold text-gray-700">
                    Each Worker Earn ($)
                  </Label>
                  <div className="relative">
                    <DollarSign className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
                    <Input
                      id="workerEarning"
                      type="number"
                      step="0.01"
                      min={selectedSubcategoryMinPayment || 0.01}
                      value={jobData.workerEarning}
                      onChange={(e) => setJobData((prev) => ({ ...prev, workerEarning: e.target.value }))}
                      className={`pl-12 h-14 text-center text-lg font-semibold border-gray-200 focus:border-purple-500 focus:ring-purple-500 ${errors.workerEarning ? "border-red-500" : ""}`}
                    />
                  </div>
                  {errors.workerEarning && <p className="text-sm text-red-500">{errors.workerEarning}</p>}
                </div>

<div className="space-y-3">
                  <Label className="text-sm font-semibold text-gray-700">Estimated Job Cost ($)</Label>
                  <div className="h-14 bg-gradient-to-r from-green-50 to-green-100 border border-green-200 rounded-lg flex items-center justify-center">
                    <span className="text-2xl font-bold text-green-700">{jobData.estimatedJobCost}</span>
                  </div>
                  <div className="text-xs text-gray-600 space-y-1">
                    <div className="flex justify-between">
                      <span>Base Job Cost:</span>
                      <span>
                        $
                        {(
                          (Number.parseInt(jobData.workersNeeded) || 0) *
                          (Number.parseFloat(jobData.workerEarning) || 0)
                        ).toFixed(2)}
                      </span>
                    </div>
                    {screenshotPricing && screenshotPricing.totalScreenshotCost > 0 && (
                      <div className="flex justify-between">
                        <span>Screenshot Cost:</span>
                        <span>${screenshotPricing.totalScreenshotCost.toFixed(2)}</span>
                      </div>
                    )}
                    <div className="flex justify-between">
                      <span>Platform Fee ({platformFeeSettings?.feePercentage || 5}%):</span>
                      <span>
                        ${(() => {
                          const subtotal =
                            (Number.parseInt(jobData.workersNeeded) || 0) *
                              (Number.parseFloat(jobData.workerEarning) || 0) +
                            (screenshotPricing?.totalScreenshotCost || 0)

if (platformFeeSettings) {
                            const feeCalculation = calculatePlatformFee(subtotal, platformFeeSettings)
                            return feeCalculation.platformFee.toFixed(2)
                          } else {
                            return (subtotal * 0.05).toFixed(2)
                          }
                        })()}
                      </span>
                    </div>
                    <div className="flex justify-between font-semibold border-t pt-1">
                      <span>Total Required:</span>
                      <span>${jobData.estimatedJobCost}</span>
                    </div>
                  </div>
                </div>
              </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div className="space-y-4">
                  <Label className="text-sm font-semibold text-gray-700">Payment Approval System</Label>

<RadioGroup
                    value={jobData.approvalType}
                    onValueChange={(value) => setJobData((prev) => ({ ...prev, approvalType: value }))}
                    className="space-y-4"
                  >
                    <div
                      className={`flex items-start space-x-3 p-4 rounded-lg border-2 transition-all ${
                        jobData.approvalType === "instant"
                          ? "border-orange-300 bg-orange-50"
                          : "border-gray-200 bg-gray-50"
                      } ${!isInstantApprovalEnabled ? "opacity-50" : ""}`}
                    >
                      <RadioGroupItem
                        value="instant"
                        id="instant"
                        disabled={!isInstantApprovalEnabled}
                        className="mt-1"
                      />
                      <div className="flex-1">
                        <div className="flex items-center space-x-2">
                          <Zap className="h-4 w-4 text-orange-600" />
                          <Label htmlFor="instant" className="font-medium text-gray-900">
                            Instant Approval
                          </Label>
                          {!isInstantApprovalEnabled && (
                            <Badge variant="secondary" className="text-xs bg-gray-200 text-gray-600">
                              Disabled by Admin
                            </Badge>
                          )}
                        </div>
                        <p className="text-sm text-gray-600 mt-1">
                          Workers get paid immediately when they submit their work.
                          <span className="text-orange-600 font-medium"> Higher risk of scams</span> - use with caution.
                        </p>
                      </div>
                    </div>

<div
                      className={`flex items-start space-x-3 p-4 rounded-lg border-2 transition-all ${
                        jobData.approvalType === "manual"
                          ? "border-green-300 bg-green-50"
                          : "border-gray-200 bg-gray-50"
                      }`}
                    >
                      <RadioGroupItem value="manual" id="manual" className="mt-1" />
                      <div className="flex-1">
                        <div className="flex items-center space-x-2">
                          <Shield className="h-4 w-4 text-green-600" />
                          <Label htmlFor="manual" className="font-medium text-gray-900">
                            Manual Approval (Recommended)
                          </Label>
                          <Badge variant="secondary" className="text-xs bg-green-100 text-green-700">
                            Recommended
                          </Badge>
                        </div>
                        <p className="text-sm text-gray-600 mt-1">
                          You review and approve work before payment.
                          <span className="text-green-600 font-medium"> Protects against scams</span> and ensures
                          quality.
                        </p>

{jobData.approvalType === "manual" && allowManualApprovalTimeSelection && (
                          <div className="mt-3 space-y-3">
                            <Label htmlFor="manualApprovalDays" className="text-xs font-medium text-gray-700">
                              Review Period
                            </Label>
                            <Select
                              value={jobData.manualApprovalDays}
                              onValueChange={(value) => setJobData((prev) => ({ ...prev, manualApprovalDays: value }))}
                            >
                              <SelectTrigger className="h-10 border-gray-200 focus:border-green-500 focus:ring-green-500">
                                <div className="flex items-center space-x-2">
                                  <Clock className="h-4 w-4 text-gray-400" />
                                  <SelectValue placeholder="Select review period" />
                                </div>
                              </SelectTrigger>
                              <SelectContent>
                                {availableTimeOptions.map((option) => (
                                  <SelectItem key={option.value} value={option.value}>
                                    <div className="flex items-center justify-between w-full">
                                      <span>{option.label}</span>
                                      {!option.isDefault && (
                                        <Badge variant="secondary" className="ml-2 text-xs bg-blue-100 text-blue-700">
                                          Custom
                                        </Badge>
                                      )}
                                    </div>
                                  </SelectItem>
                                ))}
                              </SelectContent>
                            </Select>
                            {errors.manualApprovalDays && (
                              <p className="text-xs text-red-500">{errors.manualApprovalDays}</p>
                            )}
                            <div className="bg-green-50 border border-green-200 rounded-lg p-3">
                              <p className="text-xs text-green-700">
                                <Info className="h-3 w-3 inline mr-1" />
                                Selected period:{" "}
                                <span className="font-medium">
                                  {availableTimeOptions.find((opt) => opt.value === jobData.manualApprovalDays)
                                    ?.label ||
                                    `${jobData.manualApprovalDays} day${Number.parseFloat(jobData.manualApprovalDays) > 1 ? "s" : ""}`}
                                </span>
                                . If you don't approve/reject within this time, payment will be automatically released
                                to the worker.
                              </p>
                            </div>
                          </div>
                        )}

{jobData.approvalType === "manual" && !allowManualApprovalTimeSelection && (
                          <div className="mt-3 p-3 bg-gray-100 border border-gray-200 rounded-lg">
                            <p className="text-xs text-gray-600">
                              <Info className="h-3 w-3 inline mr-1" />
                              Review period is set to{" "}
                              <span className="font-medium">
                                {availableTimeOptions.find((opt) => opt.value === jobData.manualApprovalDays)?.label ||
                                  `${jobData.manualApprovalDays} day${Number.parseFloat(jobData.manualApprovalDays) > 1 ? "s" : ""}`}
                              </span>{" "}
                              by the administrator. You cannot customize the approval time for this job.
                            </p>
                          </div>
                        )}
                      </div>
                    </div>
                  </RadioGroup>
                </div>

<div className="space-y-3">
                  <Label htmlFor="requireScreenshots" className="text-sm font-semibold text-gray-700">
                    Require Screenshots
                  </Label>
                  {screenshotSettings && (
                    <div className="flex items-center space-x-1 text-xs text-gray-500">
                      <HelpCircle className="h-3 w-3" />
                      <span>Max: {screenshotSettings.max_screenshots_allowed}</span>
                    </div>
                  )}
                  <div className="relative">
                    <Camera className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
                    <Input
                      id="requireScreenshots"
                      type="number"
                      min="0"
                      max={screenshotSettings?.max_screenshots_allowed || 5}
                      value={jobData.requireScreenshots}
                      onChange={(e) => setJobData((prev) => ({ ...prev, requireScreenshots: e.target.value }))}
                      className={`pl-12 h-12 text-center border-gray-200 focus:border-purple-500 focus:ring-purple-500 ${errors.requireScreenshots ? "border-red-500" : ""}`}
                    />
                  </div>
                  {errors.requireScreenshots && <p className="text-sm text-red-500">{errors.requireScreenshots}</p>}

{screenshotPricing && screenshotPricing.screenshotCosts.length > 0 && (
                    <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
                      <h5 className="text-xs font-semibold text-blue-800 mb-2">Screenshot Pricing Breakdown:</h5>
                      <div className="space-y-1">
                        {screenshotPricing.screenshotCosts.map((cost) => (
                          <div key={cost.screenshotNumber} className="flex justify-between text-xs">
                            <span className="text-blue-700">Screenshot {cost.screenshotNumber}:</span>
                            <span className="font-medium text-blue-800">
                              {cost.isFree ? (
                                <Badge variant="secondary" className="text-xs bg-green-100 text-green-700">
                                  Free
                                </Badge>
                              ) : (
                                `${cost.percentage}% ($${cost.cost.toFixed(2)})`
                              )}
                            </span>
                          </div>
                        ))}
                        <div className="flex justify-between text-xs font-semibold border-t border-blue-300 pt-1 mt-2">
                          <span className="text-blue-800">Total Screenshot Cost:</span>
                          <span className="text-blue-900">${screenshotPricing.totalScreenshotCost.toFixed(2)}</span>
                        </div>
                      </div>
                    </div>
                  )}
                </div>
              </div>

<div className="flex justify-center pt-8">
                <Button
                  type="button"
                  onClick={handleSubmit}
                  disabled={
                    isSubmitting ||
                    walletLoading ||
                    (wallet && wallet.depositBalance < Number.parseFloat(jobData.estimatedJobCost))
                  }
                  className="bg-gradient-to-r from-purple-600 via-pink-600 to-purple-700 hover:from-purple-700 hover:via-pink-700 hover:to-purple-800 text-white font-bold px-20 py-5 text-xl rounded-2xl shadow-2xl hover:shadow-purple-500/50 transform hover:scale-110 transition-all duration-300 h-16 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none relative overflow-hidden group border-0"
                >
                  <div className="absolute inset-0 bg-gradient-to-r from-white/30 via-white/10 to-white/30 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                  <div className="absolute inset-0 -skew-x-12 bg-gradient-to-r from-transparent via-white/20 to-transparent opacity-0 group-hover:opacity-100 group-hover:animate-pulse"></div>
                  <div className="relative z-10 flex items-center justify-center">
                    {isSubmitting ? (
                      <>
                        <div className="animate-spin rounded-full h-7 w-7 border-b-3 border-white mr-4"></div>
                        <span className="animate-pulse">Posting Microjob...</span>
                      </>
                    ) : walletLoading ? (
                      <>
                        <div className="animate-pulse rounded-full h-7 w-7 bg-white/30 mr-4"></div>
                        <span>Loading Wallet...</span>
                      </>
                    ) : wallet && wallet.depositBalance < Number.parseFloat(jobData.estimatedJobCost) ? (
                      <>
                        <AlertCircle className="h-6 w-6 mr-3 text-red-200" />
                        <span>Insufficient Balance</span>
                      </>
                    ) : (
                      <>
                        <div className="flex items-center">
                          <div className="p-2 bg-white/20 rounded-full mr-4 group-hover:bg-white/30 transition-colors duration-300">
                            <Plus className="h-6 w-6 group-hover:rotate-180 transition-transform duration-500" />
                          </div>
                          <span className="tracking-wide">Post Microjob</span>
                        </div>
                        <div className="absolute -top-2 -right-2 w-4 h-4 bg-yellow-400 rounded-full animate-bounce"></div>
                      </>
                    )}
                  </div>
                  <div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-purple-600 to-pink-600 opacity-0 group-hover:opacity-20 blur-xl transition-opacity duration-300 -z-10"></div>
                </Button>
              </div>
            </CardContent>
          </Card>

<Card className="bg-blue-50 border border-blue-200 shadow-sm">
            <CardContent className="p-6">
              <div className="flex items-start space-x-4">
                <div className="p-2 bg-blue-100 rounded-lg">
                  <AlertCircle className="h-6 w-6 text-blue-600" />
                </div>
                <div>
                  <h4 className="font-semibold text-blue-900 text-lg">Payment & Approval Process</h4>
                  <div className="text-blue-700 mt-2 leading-relaxed space-y-2">
                    <p>
                      <strong>Payment Required:</strong> You must have sufficient deposit balance to post a microjob.
                      The estimated cost plus {platformFeeSettings?.feePercentage || 5}% platform fee will be deducted
                      from your deposit balance.
                    </p>
                    <p>
                      <strong>Instant Approval:</strong> Workers receive payment immediately upon work submission. Use
                      only for trusted tasks as this increases scam risk.
                    </p>
                    <p>
                      <strong>Manual Approval (Recommended):</strong> You have 1-7 days to review and approve work
                      before payment. If no action is taken within the timeframe, payment is automatically released to
                      protect workers.
                    </p>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </>
  )
}
[V0_FILE]typescript:file="lib/auth.ts" isQuickEdit="true" isMerged="true"
// Authentication utilities and types
export interface User {
  id: string
  email: string
  firstName: string
  lastName: string
  username: string
  avatar?: string
  userType: "user" | "admin" | "suspended" | "agent" // Added agent user type
  isVerified: boolean
  deposit: number
  earning: number
  country: string
  createdAt: string
  isSuspended?: boolean
  suspensionReason?: string
  suspendedAt?: string
  suspendedBy?: string
  agentStatus?: "available" | "busy" | "offline"
  maxConcurrentChats?: number
  currentChatCount?: number
}

export interface AuthState {
  user: User | null
  isLoading: boolean
  isAuthenticated: boolean
}

export function getAllUsers(): User[] {
  if (typeof window === "undefined") return []

const stored = localStorage.getItem("users_database")
  return stored ? JSON.parse(stored) : []
}

export function saveUserToDatabase(user: User): void {
  if (typeof window === "undefined") return

const users = getAllUsers()
  const existingIndex = users.findIndex((u) => u.email === user.email)

if (existingIndex >= 0) {
    users[existingIndex] = user
  } else {
    users.push(user)
  }

localStorage.setItem("users_database", JSON.stringify(users))
}

export function getNextUserId(): string {
  const users = getAllUsers()
  const maxId = users.reduce((max, user) => {
    const numId = Number.parseInt(user.id)
    return isNaN(numId) ? max : Math.max(max, numId)
  }, 0)

return String(maxId + 1).padStart(2, "0")
}

export function initializeDefaultUsers(): void {
  const users = getAllUsers()

if (users.length === 0) {
    const defaultUsers: User[] = [
      {
        id: "01",
        email: "admin@marketplace.com",
        firstName: "Admin",
        lastName: "User",
        username: "admin",
        userType: "admin",
        isVerified: true,
        deposit: 0,
        earning: 0,
        country: "United States",
        createdAt: new Date().toISOString(),
      },
      {
        id: "02",
        email: "agent1@marketplace.com",
        firstName: "Sarah",
        lastName: "Agent",
        username: "sarahagent",
        userType: "agent",
        isVerified: true,
        deposit: 0,
        earning: 0,
        country: "United States",
        createdAt: new Date().toISOString(),
        agentStatus: "available",
        maxConcurrentChats: 5,
        currentChatCount: 0,
      },
      {
        id: "03",
        email: "agent2@marketplace.com",
        firstName: "Mike",
        lastName: "Support",
        username: "mikesupport",
        userType: "agent",
        isVerified: true,
        deposit: 0,
        earning: 0,
        country: "United States",
        createdAt: new Date().toISOString(),
        agentStatus: "available",
        maxConcurrentChats: 3,
        currentChatCount: 0,
      },
      {
        id: "04",
        email: "worker1@marketplace.com",
        firstName: "John",
        lastName: "Worker",
        username: "johnworker",
        userType: "user",
        isVerified: true,
        deposit: 0,
        earning: 0,
        country: "United States",
        createdAt: new Date().toISOString(),
      },
      {
        id: "05",
        email: "employer1@marketplace.com",
        firstName: "Jane",
        lastName: "Employer",
        username: "janeemployer",
        userType: "user",
        isVerified: true,
        deposit: 100,
        earning: 0,
        country: "United States",
        createdAt: new Date().toISOString(),
      },
    ]

defaultUsers.forEach((user) => saveUserToDatabase(user))
    console.log(
      "[v0] ✅ Initialized default users:",
      defaultUsers.map((u) => `${u.firstName} ${u.lastName} (ID: ${u.id})`),
    )
  }
}

// Mock authentication functions (replace with real API calls when database is connected)
export async function signIn(email: string, password: string): Promise<User> {
  // Simulate API call
  await new Promise((resolve) => setTimeout(resolve, 1000))

const users = getAllUsers()
  const user = users.find((u) => u.email === email)

if (!user) {
    throw new Error("Invalid email or password")
  }

if (user.userType === "suspended") {
    const reason = user.suspensionReason || "No reason provided"
    throw new Error(`Your account has been suspended. Reason: ${reason}`)
  }

if (email === "admin@marketplace.com" && password === "admin123") {
    console.log("[v0] Admin login successful for:", user.email)
    return user
  }

if ((email === "agent1@marketplace.com" || email === "agent2@marketplace.com") && password === "agent123") {
    console.log("[v0] Agent login successful for:", user.email)
    return user
  }

if (password === "password123" || password.length >= 8) {
    console.log("[v0] User login successful for:", user.email)
    return user
  }

throw new Error("Invalid email or password")
}

export async function signUp(data: {
  email: string
  password: string
  firstName: string
  lastName: string
  username: string
}): Promise<User> {
  // Simulate API call
  await new Promise((resolve) => setTimeout(resolve, 1000))

if (!isValidEmail(data.email)) {
    throw new Error("Please enter a valid email address")
  }

if (data.password.length < 8) {
    throw new Error("Password must be at least 8 characters long")
  }

if (!isValidPassword(data.password)) {
    throw new Error("Password must contain at least one uppercase letter, one lowercase letter, and one number")
  }

if (data.username.length < 3) {
    throw new Error("Username must be at least 3 characters long")
  }

if (!/^[a-zA-Z0-9_]+$/.test(data.username)) {
    throw new Error("Username can only contain letters, numbers, and underscores")
  }

const users = getAllUsers()
  const existingUser = users.find((u) => u.email === data.email || u.username === data.username)

if (existingUser) {
    if (existingUser.email === data.email) {
      throw new Error("An account with this email already exists")
    } else {
      throw new Error("This username is already taken")
    }
  }

const newUser: User = {
    id: getNextUserId(),
    email: data.email,
    firstName: data.firstName,
    lastName: data.lastName,
    username: data.username,
    userType: "user",
    isVerified: false,
    deposit: 0,
    earning: 0,
    country: "United States", // Default to US instead of hardcoded Bangladesh
    createdAt: new Date().toISOString(),
  }

saveUserToDatabase(newUser)

return newUser
}

export async function signOut(): Promise<void> {
  // Simulate API call
  await new Promise((resolve) => setTimeout(resolve, 500))
}

export function getStoredUser(): User | null {
  if (typeof window === "undefined") return null

const stored = localStorage.getItem("user")
  return stored ? JSON.parse(stored) : null
}

export function storeUser(user: User): void {
  if (typeof window === "undefined") return
  localStorage.setItem("user", JSON.stringify(user))
}

export function clearStoredUser(): void {
  if (typeof window === "undefined") return
  localStorage.removeItem("user")
}

function isValidEmail(email: string): boolean {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  return emailRegex.test(email)
}

function isValidPassword(password: string): boolean {
  // At least 8 characters, one uppercase, one lowercase, one number
  const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/
  return passwordRegex.test(password)
}

export function updateUser(userId: string, updates: Partial<User>): User {
  const users = getAllUsers()
  const userIndex = users.findIndex((u) => u.id === userId)

if (userIndex === -1) {
    throw new Error("User not found")
  }

const updatedUser = { ...users[userIndex], ...updates }
  users[userIndex] = updatedUser

localStorage.setItem("users_database", JSON.stringify(users))

return updatedUser
}

export function toggleUserSuspension(userId: string): User {
  const users = getAllUsers()
  const userIndex = users.findIndex((u) => u.id === userId)

if (userIndex === -1) {
    throw new Error("User not found")
  }

const user = users[userIndex]
  // Toggle between user and suspended status (using a custom field)
  const updatedUser = {
    ...user,
    isSuspended: !user.isSuspended,
  }

users[userIndex] = updatedUser
  localStorage.setItem("users_database", JSON.stringify(users))

return updatedUser
}

export function suspendUserWithReason(userId: string, reason: string, suspendedBy: string): User {
  const users = getAllUsers()
  const userIndex = users.findIndex((u) => u.id === userId)

if (userIndex === -1) {
    throw new Error("User not found")
  }

const updatedUser = {
    ...users[userIndex],
    userType: "suspended" as const,
    suspensionReason: reason,
    suspendedAt: new Date().toISOString(),
    suspendedBy: suspendedBy,
  }

users[userIndex] = updatedUser
  localStorage.setItem("users_database", JSON.stringify(users))

return updatedUser
}

export function activateUser(userId: string): User {
  const users = getAllUsers()
  const userIndex = users.findIndex((u) => u.id === userId)

if (userIndex === -1) {
    throw new Error("User not found")
  }

const updatedUser = {
    ...users[userIndex],
    userType: "user" as const,
    suspensionReason: undefined,
    suspendedAt: undefined,
    suspendedBy: undefined,
  }

users[userIndex] = updatedUser
  localStorage.setItem("users_database", JSON.stringify(users))

return updatedUser
}

export async function getUser(): Promise<User | null> {
  // In a real implementation, this would validate JWT tokens or session cookies
  // For now, we'll simulate getting the current user from localStorage on the client
  // or return null on the server (since we don't have real session management)

if (typeof window === "undefined") {
    // Server-side: In a real app, you'd validate session tokens here
    // For demo purposes, return a mock admin user for API calls
    return {
      id: "01",
      email: "admin@marketplace.com",
      firstName: "Admin",
      lastName: "User",
      username: "admin",
      userType: "admin",
      isVerified: true,
      deposit: 0,
      earning: 0,
      country: "United States",
      createdAt: new Date().toISOString(),
    }
  }

// Client-side: Get user from localStorage
  return getStoredUser()
}

export function getAvailableAgents(): User[] {
  const users = getAllUsers()
  return users.filter(
    (user) =>
      user.userType === "agent" &&
      user.agentStatus === "available" &&
      (user.currentChatCount || 0) < (user.maxConcurrentChats || 5),
  )
}

export function updateAgentStatus(agentId: string, status: "available" | "busy" | "offline"): User {
  const users = getAllUsers()
  const agentIndex = users.findIndex((u) => u.id === agentId && u.userType === "agent")

if (agentIndex === -1) {
    throw new Error("Agent not found")
  }

const updatedAgent = { ...users[agentIndex], agentStatus: status }
  users[agentIndex] = updatedAgent

localStorage.setItem("users_database", JSON.stringify(users))
  return updatedAgent
}

export function assignAgentToSession(sessionId: string): User | null {
  const availableAgents = getAvailableAgents()

if (availableAgents.length === 0) {
    return null
  }

// Simple round-robin assignment - pick agent with least current chats
  const agent = availableAgents.reduce((prev, current) =>
    (prev.currentChatCount || 0) < (current.currentChatCount || 0) ? prev : current,
  )

// Update agent's current chat count
  const users = getAllUsers()
  const agentIndex = users.findIndex((u) => u.id === agent.id)
  if (agentIndex !== -1) {
    users[agentIndex].currentChatCount = (users[agentIndex].currentChatCount || 0) + 1
    localStorage.setItem("users_database", JSON.stringify(users))
  }

return agent
}

export function releaseAgentFromSession(agentId: string): void {
  const users = getAllUsers()
  const agentIndex = users.findIndex((u) => u.id === agentId && u.userType === "agent")

if (agentIndex !== -1) {
    users[agentIndex].currentChatCount = Math.max(0, (users[agentIndex].currentChatCount || 0) - 1)
    localStorage.setItem("users_database", JSON.stringify(users))
  }
}
[V0_FILE]typescriptreact:file="components/admin/suspension-dialog.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { AlertTriangle } from "lucide-react"

interface SuspensionDialogProps {
  isOpen: boolean
  onClose: () => void
  onConfirm: (reason: string) => void
  userName: string
  isLoading?: boolean
}

export function SuspensionDialog({ isOpen, onClose, onConfirm, userName, isLoading = false }: SuspensionDialogProps) {
  const [reason, setReason] = useState("")

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (reason.trim()) {
      onConfirm(reason.trim())
      setReason("")
    }
  }

const handleClose = () => {
    setReason("")
    onClose()
  }

return (
    <Dialog open={isOpen} onOpenChange={handleClose}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <AlertTriangle className="h-5 w-5 text-red-500" />
            Suspend User Account
          </DialogTitle>
          <DialogDescription>
            You are about to suspend <strong>{userName}</strong>'s account. Please provide a reason that will be shown
            to the user when they try to log in.
          </DialogDescription>
        </DialogHeader>

<form onSubmit={handleSubmit} className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="suspension-reason">Suspension Reason *</Label>
            <Textarea
              id="suspension-reason"
              placeholder="Enter the reason for suspension (e.g., violation of terms of service, inappropriate behavior, etc.)"
              value={reason}
              onChange={(e) => setReason(e.target.value)}
              className="min-h-[100px]"
              disabled={isLoading}
              required
            />
            <p className="text-sm text-gray-500">
              This message will be displayed to the user when they attempt to log in.
            </p>
          </div>

<DialogFooter className="gap-2">
            <Button type="button" variant="outline" onClick={handleClose} disabled={isLoading}>
              Cancel
            </Button>
            <Button type="submit" variant="destructive" disabled={isLoading || !reason.trim()}>
              {isLoading ? "Suspending..." : "Suspend User"}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="app/admin/users/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { AdminHeader } from "@/components/admin/admin-header"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { getAllUsers, saveUserToDatabase, suspendUserWithReason, activateUser, type User } from "@/lib/auth"
import { getWallet, type Wallet } from "@/lib/wallet"
import { loginAsUser } from "@/lib/admin"
import { useAuth } from "@/contexts/auth-context"
import { Shield, Ban, CheckCircle, LogIn, MoreHorizontal, ChevronLeft, ChevronRight, Eye } from "lucide-react"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { SuspensionDialog } from "@/components/admin/suspension-dialog"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"

interface UserWithWallet extends User {
  walletData?: Wallet
}

export default function AdminUsersPage() {
  const [users, setUsers] = useState<UserWithWallet[]>([])
  const [loading, setLoading] = useState(true)
  const [searchQuery, setSearchQuery] = useState("")
  const [nameFilter, setNameFilter] = useState("")
  const [emailFilter, setEmailFilter] = useState("")
  const [countryFilter, setCountryFilter] = useState("all")
  const [verifiedFilter, setVerifiedFilter] = useState("all")
  const [statusFilter, setStatusFilter] = useState("all")
  const [currentPage, setCurrentPage] = useState(1)
  const usersPerPage = 10
  const [suspensionDialog, setSuspensionDialog] = useState<{
    isOpen: boolean
    userId: string
    userName: string
  }>({ isOpen: false, userId: "", userName: "" })
  const [suspensionDetailsDialog, setSuspensionDetailsDialog] = useState<{
    isOpen: boolean
    user: User | null
  }>({ isOpen: false, user: null })
  const [actionLoading, setActionLoading] = useState(false)

const router = useRouter()
  const { user: currentUser, refreshUser } = useAuth()

useEffect(() => {
    loadUsers()
  }, [])

const loadUsers = async () => {
    setLoading(true)
    try {
      const usersData = await getAllUsers()
      console.log("[v0] Loading wallet data for", usersData.length, "users")
      const usersWithWallets = await Promise.all(
        usersData.map(async (user) => {
          try {
            const walletData = await getWallet(user.id)
            console.log(
              "[v0] Loaded wallet for user",
              user.id,
              "- Deposit:",
              walletData.depositBalance,
              "Earnings:",
              walletData.earningsBalance,
            )
            return { ...user, walletData }
          } catch (error) {
            console.error("[v0] Failed to load wallet for user", user.id, error)
            return { ...user, walletData: undefined }
          }
        }),
      )
      setUsers(usersWithWallets)
    } catch (error) {
      console.error("Failed to load users:", error)
    } finally {
      setLoading(false)
    }
  }

const handleUserAction = async (userId: string, action: "suspend" | "activate" | "verify") => {
    if (action === "suspend") {
      const user = users.find((u) => u.id === userId)
      if (user) {
        setSuspensionDialog({
          isOpen: true,
          userId,
          userName: `${user.firstName} ${user.lastName}`,
        })
      }
      return
    }

try {
      const users = getAllUsers()
      const userIndex = users.findIndex((u) => u.id === userId)

if (userIndex === -1) {
        throw new Error("User not found")
      }

const updatedUser = { ...users[userIndex] }

if (action === "activate") {
        activateUser(userId)
      } else if (action === "verify") {
        updatedUser.isVerified = true
        saveUserToDatabase(updatedUser)
      }

await loadUsers()
      alert(`User ${action}d successfully!`)
    } catch (error) {
      console.error(`Failed to ${action} user:`, error)
      alert(`Failed to ${action} user. Please try again.`)
    }
  }

const handleSuspensionConfirm = async (reason: string) => {
    if (!currentUser) return

setActionLoading(true)
    try {
      suspendUserWithReason(suspensionDialog.userId, reason, currentUser.id)
      await loadUsers()
      setSuspensionDialog({ isOpen: false, userId: "", userName: "" })
      alert("User suspended successfully!")
    } catch (error) {
      console.error("Failed to suspend user:", error)
      alert("Failed to suspend user. Please try again.")
    } finally {
      setActionLoading(false)
    }
  }

const showSuspensionDetails = (user: User) => {
    setSuspensionDetailsDialog({ isOpen: true, user })
  }

const filteredUsers = users.filter((user) => {
    const matchesSearch =
      searchQuery === "" ||
      user.firstName.toLowerCase().includes(searchQuery.toLowerCase()) ||
      user.lastName.toLowerCase().includes(searchQuery.toLowerCase()) ||
      user.username.toLowerCase().includes(searchQuery.toLowerCase()) ||
      user.email.toLowerCase().includes(searchQuery.toLowerCase()) ||
      user.id.toLowerCase().includes(searchQuery.toLowerCase())

const matchesName =
      nameFilter === "" || `${user.firstName} ${user.lastName}`.toLowerCase().includes(nameFilter.toLowerCase())

const matchesEmail = emailFilter === "" || user.email.toLowerCase().includes(emailFilter.toLowerCase())

const matchesCountry =
      countryFilter === "all" || (user.country && user.country.toLowerCase() === countryFilter.toLowerCase())

const matchesVerified =
      verifiedFilter === "all" ||
      (verifiedFilter === "verified" && user.isVerified) ||
      (verifiedFilter === "not-verified" && !user.isVerified)

const matchesStatus =
      statusFilter === "all" ||
      (statusFilter === "active" && user.userType !== "suspended") ||
      (statusFilter === "inactive" && user.userType === "suspended")

return matchesSearch && matchesName && matchesEmail && matchesCountry && matchesVerified && matchesStatus
  })

const totalPages = Math.ceil(filteredUsers.length / usersPerPage)
  const startIndex = (currentPage - 1) * usersPerPage
  const paginatedUsers = filteredUsers.slice(startIndex, startIndex + usersPerPage)

useEffect(() => {
    setCurrentPage(1)
  }, [searchQuery, nameFilter, emailFilter, countryFilter, verifiedFilter, statusFilter])

const countries = [...new Set(users.map((user) => user.country).filter(Boolean))]

return (
    <>
      <AdminHeader title="User List" description="Manage platform users and their accounts" />

<div className="flex-1 overflow-auto p-6">
        <div className="space-y-6">
          <Card>
            <CardContent className="p-6">
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
                <div>
                  <label className="text-sm font-medium text-gray-700 mb-2 block">User ID:</label>
                  <Input placeholder="User ID" value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} />
                </div>
                <div>
                  <label className="text-sm font-medium text-gray-700 mb-2 block">Name:</label>
                  <Input placeholder="User Name" value={nameFilter} onChange={(e) => setNameFilter(e.target.value)} />
                </div>
                <div>
                  <label className="text-sm font-medium text-gray-700 mb-2 block">Email:</label>
                  <Input
                    placeholder="User Email"
                    value={emailFilter}
                    onChange={(e) => setEmailFilter(e.target.value)}
                  />
                </div>
                <div>
                  <label className="text-sm font-medium text-gray-700 mb-2 block">Country:</label>
                  <Select value={countryFilter} onValueChange={setCountryFilter}>
                    <SelectTrigger>
                      <SelectValue placeholder="--Select Country--" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">--Select Country--</SelectItem>
                      {countries.map((country) => (
                        <SelectItem key={country} value={country.toLowerCase()}>
                          {country}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                  <label className="text-sm font-medium text-gray-700 mb-2 block">Verified For Contest:</label>
                  <Select value={verifiedFilter} onValueChange={setVerifiedFilter}>
                    <SelectTrigger>
                      <SelectValue placeholder="Select Status" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">Select Status</SelectItem>
                      <SelectItem value="verified">Verified</SelectItem>
                      <SelectItem value="not-verified">Not Verified</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div>
                  <label className="text-sm font-medium text-gray-700 mb-2 block">Status:</label>
                  <Select value={statusFilter} onValueChange={setStatusFilter}>
                    <SelectTrigger>
                      <SelectValue placeholder="Select Status" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">Select Status</SelectItem>
                      <SelectItem value="active">Active</SelectItem>
                      <SelectItem value="inactive">Inactive</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="flex items-end">
                  <Button onClick={loadUsers} className="bg-purple-600 hover:bg-purple-700 text-white px-8">
                    Search
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardContent className="p-0">
              {loading ? (
                <div className="flex items-center justify-center h-64">
                  <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600"></div>
                </div>
              ) : (
                <>
                  <div className="overflow-x-auto">
                    <Table>
                      <TableHeader>
                        <TableRow className="bg-purple-600 hover:bg-purple-600">
                          <TableHead className="text-white font-semibold text-center">#</TableHead>
                          <TableHead className="text-white font-semibold text-center">ID</TableHead>
                          <TableHead className="text-white font-semibold text-center">Full Name</TableHead>
                          <TableHead className="text-white font-semibold text-center">Email</TableHead>
                          <TableHead className="text-white font-semibold text-center">Deposit</TableHead>
                          <TableHead className="text-white font-semibold text-center">Earning</TableHead>
                          <TableHead className="text-white font-semibold text-center">Country</TableHead>
                          <TableHead className="text-white font-semibold text-center">Status</TableHead>
                          <TableHead className="text-white font-semibold text-center">Actions</TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {paginatedUsers.map((user, index) => (
                          <TableRow key={user.id} className="hover:bg-gray-50">
                            <TableCell className="text-center font-medium">
                              <div className="bg-purple-600 text-white px-3 py-1 rounded text-sm font-bold">
                                {String(startIndex + index + 1).padStart(2, "0")}
                              </div>
                            </TableCell>
                            <TableCell className="text-center">{user.id}</TableCell>
                            <TableCell className="text-center">
                              <div className="flex items-center justify-center space-x-2">
                                <span>
                                  {user.firstName} {user.lastName}
                                </span>
                                {user.userType === "admin" && <Shield className="h-4 w-4 text-purple-500" />}
                              </div>
                            </TableCell>
                            <TableCell className="text-center">{user.email}</TableCell>
                            <TableCell className="text-center">
                              {user.walletData ? (
                                <span className="font-medium text-blue-600">
                                  ${user.walletData.depositBalance.toFixed(2)}
                                </span>
                              ) : (
                                <span className="text-gray-400">Loading...</span>
                              )}
                            </TableCell>
                            <TableCell className="text-center">
                              {user.walletData ? (
                                <span className="font-medium text-green-600">
                                  ${user.walletData.earningsBalance.toFixed(2)}
                                </span>
                              ) : (
                                <span className="text-gray-400">Loading...</span>
                              )}
                            </TableCell>
                            <TableCell className="text-center">{user.country || "N/A"}</TableCell>
                            <TableCell className="text-center">
                              {user.userType === "suspended" ? (
                                <div className="flex items-center justify-center gap-2">
                                  <Badge variant="secondary" className="bg-red-100 text-red-800">
                                    Suspended
                                  </Badge>
                                  <Button
                                    variant="ghost"
                                    size="sm"
                                    onClick={() => showSuspensionDetails(user)}
                                    className="h-6 w-6 p-0"
                                  >
                                    <Eye className="h-3 w-3" />
                                  </Button>
                                </div>
                              ) : user.isVerified ? (
                                <Badge variant="secondary" className="bg-green-100 text-green-800">
                                  Verified
                                </Badge>
                              ) : (
                                <Badge variant="secondary" className="bg-red-100 text-red-800">
                                  Not Verified
                                </Badge>
                              )}
                            </TableCell>
                            <TableCell className="text-center">
                              <DropdownMenu>
                                <DropdownMenuTrigger asChild>
                                  <Button variant="ghost" size="sm">
                                    <MoreHorizontal className="h-4 w-4" />
                                  </Button>
                                </DropdownMenuTrigger>
                                <DropdownMenuContent align="end">
                                  {!user.isVerified && (
                                    <DropdownMenuItem onClick={() => handleUserAction(user.id, "verify")}>
                                      <CheckCircle className="mr-2 h-4 w-4" />
                                      Verify
                                    </DropdownMenuItem>
                                  )}
                                  {user.userType === "user" && (
                                    <DropdownMenuItem onClick={() => loginAsUser(user.id)}>
                                      <LogIn className="mr-2 h-4 w-4" />
                                      Login as User
                                    </DropdownMenuItem>
                                  )}
                                  {user.userType !== "suspended" ? (
                                    <DropdownMenuItem
                                      onClick={() => handleUserAction(user.id, "suspend")}
                                      className="text-red-600"
                                    >
                                      <Ban className="mr-2 h-4 w-4" />
                                      Suspend
                                    </DropdownMenuItem>
                                  ) : (
                                    <DropdownMenuItem
                                      onClick={() => handleUserAction(user.id, "activate")}
                                      className="text-green-600"
                                    >
                                      <CheckCircle className="mr-2 h-4 w-4" />
                                      Activate
                                    </DropdownMenuItem>
                                  )}
                                </DropdownMenuContent>
                              </DropdownMenu>
                            </TableCell>
                          </TableRow>
                        ))}
                      </TableBody>
                    </Table>

{filteredUsers.length === 0 && (
                      <div className="text-center py-12">
                        <p className="text-gray-600">No users found matching your criteria.</p>
                      </div>
                    )}
                  </div>

{totalPages > 1 && (
                    <div className="flex items-center justify-between px-6 py-4 border-t bg-gray-50">
                      <div className="text-sm text-gray-600">
                        Showing {startIndex + 1} to {Math.min(startIndex + usersPerPage, filteredUsers.length)} of{" "}
                        {filteredUsers.length} users
                      </div>
                      <div className="flex items-center space-x-2">
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
                          disabled={currentPage === 1}
                          className="text-gray-600 border-gray-300"
                        >
                          <ChevronLeft className="w-4 h-4 mr-1" />
                          Previous
                        </Button>
                        <div className="flex items-center space-x-1">
                          {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
                            const pageNum = i + 1
                            return (
                              <Button
                                key={pageNum}
                                variant={currentPage === pageNum ? "default" : "outline"}
                                size="sm"
                                onClick={() => setCurrentPage(pageNum)}
                                className={`w-8 h-8 p-0 ${
                                  currentPage === pageNum ? "bg-purple-600 text-white" : "text-gray-600 border-gray-300"
                                }`}
                              >
                                {pageNum}
                              </Button>
                            )
                          })}
                          {totalPages > 5 && (
                            <>
                              <span className="text-gray-400">...</span>
                              <Button
                                variant={currentPage === totalPages ? "default" : "outline"}
                                size="sm"
                                onClick={() => setCurrentPage(totalPages)}
                                className={`w-8 h-8 p-0 ${
                                  currentPage === totalPages
                                    ? "bg-purple-600 text-white"
                                    : "text-gray-600 border-gray-300"
                                }`}
                              >
                                {totalPages}
                              </Button>
                            </>
                          )}
                        </div>
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() => setCurrentPage((prev) => Math.min(prev + 1, totalPages))}
                          disabled={currentPage === totalPages}
                          className="text-gray-600 border-gray-300"
                        >
                          Next
                          <ChevronRight className="w-4 h-4 ml-1" />
                        </Button>
                      </div>
                    </div>
                  )}
                </>
              )}
            </CardContent>
          </Card>
        </div>
      </div>

<SuspensionDialog
        isOpen={suspensionDialog.isOpen}
        onClose={() => setSuspensionDialog({ isOpen: false, userId: "", userName: "" })}
        onConfirm={handleSuspensionConfirm}
        userName={suspensionDialog.userName}
        isLoading={actionLoading}
      />

<Dialog
        open={suspensionDetailsDialog.isOpen}
        onOpenChange={() => setSuspensionDetailsDialog({ isOpen: false, user: null })}
      >
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Suspension Details</DialogTitle>
            <DialogDescription>Information about this user's suspension</DialogDescription>
          </DialogHeader>

{suspensionDetailsDialog.user && (
            <div className="space-y-4">
              <div>
                <h4 className="font-medium text-sm text-gray-700">User:</h4>
                <p className="text-sm">
                  {suspensionDetailsDialog.user.firstName} {suspensionDetailsDialog.user.lastName}
                </p>
              </div>

<div>
                <h4 className="font-medium text-sm text-gray-700">Suspension Reason:</h4>
                <p className="text-sm bg-gray-50 p-3 rounded border">
                  {suspensionDetailsDialog.user.suspensionReason || "No reason provided"}
                </p>
              </div>

{suspensionDetailsDialog.user.suspendedAt && (
                <div>
                  <h4 className="font-medium text-sm text-gray-700">Suspended On:</h4>
                  <p className="text-sm">{new Date(suspensionDetailsDialog.user.suspendedAt).toLocaleString()}</p>
                </div>
              )}

{suspensionDetailsDialog.user.suspendedBy && (
                <div>
                  <h4 className="font-medium text-sm text-gray-700">Suspended By:</h4>
                  <p className="text-sm">Admin ID: {suspensionDetailsDialog.user.suspendedBy}</p>
                </div>
              )}
            </div>
          )}
        </DialogContent>
      </Dialog>
    </>
  )
}
[V0_FILE]sql:file="scripts/24-create-favorites-system.sql" isMerged="true"
-- Create user favorites table for persistent wishlist functionality
CREATE TABLE IF NOT EXISTS user_favorites (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    job_id UUID NOT NULL REFERENCES microjobs(id) ON DELETE CASCADE,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    UNIQUE(user_id, job_id)
);

-- Create indexes for optimal query performance
CREATE INDEX IF NOT EXISTS idx_user_favorites_user_id ON user_favorites(user_id);
CREATE INDEX IF NOT EXISTS idx_user_favorites_job_id ON user_favorites(job_id);
CREATE INDEX IF NOT EXISTS idx_user_favorites_created_at ON user_favorites(created_at DESC);

-- Create composite index for efficient user-specific queries
CREATE INDEX IF NOT EXISTS idx_user_favorites_user_created ON user_favorites(user_id, created_at DESC);

-- Add trigger to update updated_at timestamp
CREATE OR REPLACE FUNCTION update_user_favorites_updated_at()
RETURNS TRIGGER AS $$
BEGIN
    NEW.updated_at = NOW();
    RETURN NEW;
END;
$$ LANGUAGE plpgsql;

CREATE TRIGGER trigger_update_user_favorites_updated_at
    BEFORE UPDATE ON user_favorites
    FOR EACH ROW
    EXECUTE FUNCTION update_user_favorites_updated_at();
[V0_FILE]typescriptreact:file="app/dashboard/favorites/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescript:file="hooks/use-favorites.ts" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useAuth } from "@/contexts/auth-context"
import { toast } from "sonner"
import type { Job } from "@/lib/jobs"

interface FavoriteJob extends Job {
  favoriteId: string
  favoritedAt: string
}

export function useFavorites() {
  const { user } = useAuth()
  const [favorites, setFavorites] = useState<FavoriteJob[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [favoriteJobIds, setFavoriteJobIds] = useState<Set<string>>(new Set())

// Load favorites on mount and when user changes
  useEffect(() => {
    if (user?.id) {
      loadFavorites()
    } else {
      setFavorites([])
      setFavoriteJobIds(new Set())
      setIsLoading(false)
    }
  }, [user?.id])

const loadFavorites = async () => {
    if (!user?.id) return

setIsLoading(true)
    try {
      const response = await fetch("/api/favorites")

if (!response.ok) {
        throw new Error("Failed to fetch favorites")
      }

const favoritesData: FavoriteJob[] = await response.json()
      setFavorites(favoritesData)

// Create a Set of job IDs for quick lookup
      const jobIds = new Set(favoritesData.map((fav) => fav.id))
      setFavoriteJobIds(jobIds)
    } catch (error) {
      console.error("Error loading favorites:", error)
      toast.error("Failed to load favorites")
    } finally {
      setIsLoading(false)
    }
  }

const addFavorite = async (jobId: string): Promise<boolean> => {
    if (!user?.id) {
      toast.error("Please log in to save favorites")
      return false
    }

try {
      const response = await fetch("/api/favorites", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ jobId }),
      })

if (!response.ok) {
        const errorData = await response.json()
        throw new Error(errorData.error || "Failed to add favorite")
      }

// Update local state
      setFavoriteJobIds((prev) => new Set([...prev, jobId]))

// Reload favorites to get complete job data
      await loadFavorites()

toast.success("Added to favorites!")
      return true
    } catch (error) {
      console.error("Error adding favorite:", error)
      toast.error("Failed to add favorite")
      return false
    }
  }

const removeFavorite = async (jobId: string): Promise<boolean> => {
    if (!user?.id) {
      toast.error("Please log in to manage favorites")
      return false
    }

try {
      const response = await fetch("/api/favorites", {
        method: "DELETE",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ jobId }),
      })

if (!response.ok) {
        const errorData = await response.json()
        throw new Error(errorData.error || "Failed to remove favorite")
      }

// Update local state
      setFavoriteJobIds((prev) => {
        const newSet = new Set(prev)
        newSet.delete(jobId)
        return newSet
      })

setFavorites((prev) => prev.filter((fav) => fav.id !== jobId))

toast.success("Removed from favorites")
      return true
    } catch (error) {
      console.error("Error removing favorite:", error)
      toast.error("Failed to remove favorite")
      return false
    }
  }

const toggleFavorite = async (jobId: string): Promise<boolean> => {
    const isFavorited = favoriteJobIds.has(jobId)

if (isFavorited) {
      return await removeFavorite(jobId)
    } else {
      return await addFavorite(jobId)
    }
  }

const isFavorite = (jobId: string): boolean => {
    return favoriteJobIds.has(jobId)
  }

const clearAllFavorites = async (): Promise<boolean> => {
    if (!user?.id) {
      toast.error("Please log in to manage favorites")
      return false
    }

try {
      // Remove all favorites one by one
      const promises = favorites.map((fav) => removeFavorite(fav.id))
      await Promise.all(promises)

setFavorites([])
      setFavoriteJobIds(new Set())

toast.success("All favorites cleared")
      return true
    } catch (error) {
      console.error("Error clearing favorites:", error)
      toast.error("Failed to clear favorites")
      return false
    }
  }

return {
    favorites,
    isLoading,
    isFavorite,
    addFavorite,
    removeFavorite,
    toggleFavorite,
    clearAllFavorites,
    refreshFavorites: loadFavorites,
  }
}
[V0_FILE]typescriptreact:file="app/dashboard/favorites/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { JobCard } from "@/components/jobs/job-card"
import { Heart, Search, Grid, List, Trash2 } from "lucide-react"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useAuth } from "@/contexts/auth-context"
import { useFavorites } from "@/hooks/use-favorites"

export default function FavoritesPage() {
  const { user } = useAuth()
  const { favorites, isLoading, clearAllFavorites } = useFavorites()
  const [filteredFavorites, setFilteredFavorites] = useState(favorites)
  const [searchQuery, setSearchQuery] = useState("")
  const [categoryFilter, setCategoryFilter] = useState("all")
  const [viewMode, setViewMode] = useState<"grid" | "list">("grid")
  const [sortBy, setSortBy] = useState("newest")

useEffect(() => {
    filterAndSortFavorites()
  }, [favorites, searchQuery, categoryFilter, sortBy])

const filterAndSortFavorites = () => {
    let filtered = [...favorites]

// Apply search filter
    if (searchQuery) {
      filtered = filtered.filter(
        (job) =>
          job.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
          job.category.name.toLowerCase().includes(searchQuery.toLowerCase()),
      )
    }

// Apply category filter
    if (categoryFilter !== "all") {
      filtered = filtered.filter((job) => job.category.name === categoryFilter)
    }

// Apply sorting
    switch (sortBy) {
      case "newest":
        filtered.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
        break
      case "oldest":
        filtered.sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime())
        break
      case "price-high":
        filtered.sort((a, b) => b.budgetMax - a.budgetMax)
        break
      case "price-low":
        filtered.sort((a, b) => a.budgetMax - b.budgetMax)
        break
      case "title":
        filtered.sort((a, b) => a.title.localeCompare(b.title))
        break
      case "favorited":
        filtered.sort(
          (a, b) => new Date(b.favoritedAt || b.createdAt).getTime() - new Date(a.favoritedAt || a.createdAt).getTime(),
        )
        break
    }

setFilteredFavorites(filtered)
  }

const getUniqueCategories = () => {
    const categories = favorites.map((job) => job.category.name)
    return [...new Set(categories)]
  }

if (isLoading) {
    return (
      <div className="p-6">
        <div className="flex items-center justify-center min-h-[400px]">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-red-500"></div>
        </div>
      </div>
    )
  }

return (
    <div className="p-6 space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900 flex items-center gap-2">
            <Heart className="h-6 w-6 text-red-500 fill-red-500" />
            My Favorites
          </h1>
          <p className="text-gray-600 mt-1">Jobs you've saved for later • {favorites.length} total</p>
        </div>
        {favorites.length > 0 && (
          <Button
            variant="outline"
            onClick={clearAllFavorites}
            className="text-red-600 border-red-200 hover:bg-red-50 bg-transparent"
          >
            <Trash2 className="h-4 w-4 mr-2" />
            Clear All
          </Button>
        )}
      </div>

{favorites.length === 0 ? (
        <Card className="text-center py-12">
          <CardContent>
            <Heart className="h-16 w-16 text-gray-300 mx-auto mb-4" />
            <h3 className="text-lg font-semibold text-gray-900 mb-2">No favorites yet</h3>
            <p className="text-gray-600 mb-6 max-w-md mx-auto">
              Start exploring jobs and click the heart icon to save them here for easy access later.
            </p>
            <Button asChild>
              <a href="/jobs">Browse Jobs</a>
            </Button>
          </CardContent>
        </Card>
      ) : (
        <>
          {/* Filters and Controls */}
          <Card>
            <CardContent className="p-4">
              <div className="flex flex-col lg:flex-row gap-4 items-start lg:items-center justify-between">
                <div className="flex flex-col sm:flex-row gap-3 flex-1">
                  <div className="relative flex-1 max-w-md">
                    <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                    <Input
                      placeholder="Search favorites..."
                      value={searchQuery}
                      onChange={(e) => setSearchQuery(e.target.value)}
                      className="pl-10"
                    />
                  </div>
                  <Select value={categoryFilter} onValueChange={setCategoryFilter}>
                    <SelectTrigger className="w-full sm:w-48">
                      <SelectValue placeholder="All Categories" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">All Categories</SelectItem>
                      {getUniqueCategories().map((category) => (
                        <SelectItem key={category} value={category}>
                          {category}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  <Select value={sortBy} onValueChange={setSortBy}>
                    <SelectTrigger className="w-full sm:w-48">
                      <SelectValue placeholder="Sort by" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="favorited">Recently Favorited</SelectItem>
                      <SelectItem value="newest">Newest Jobs</SelectItem>
                      <SelectItem value="oldest">Oldest Jobs</SelectItem>
                      <SelectItem value="price-high">Price: High to Low</SelectItem>
                      <SelectItem value="price-low">Price: Low to High</SelectItem>
                      <SelectItem value="title">Title A-Z</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="flex items-center gap-2">
                  <Button
                    variant={viewMode === "grid" ? "default" : "outline"}
                    size="sm"
                    onClick={() => setViewMode("grid")}
                  >
                    <Grid className="h-4 w-4" />
                  </Button>
                  <Button
                    variant={viewMode === "list" ? "default" : "outline"}
                    size="sm"
                    onClick={() => setViewMode("list")}
                  >
                    <List className="h-4 w-4" />
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Results Summary */}
          {(searchQuery || categoryFilter !== "all") && (
            <div className="flex items-center gap-2 text-sm text-gray-600">
              <span>
                Showing {filteredFavorites.length} of {favorites.length} favorites
              </span>
              {searchQuery && (
                <Badge variant="secondary" className="text-xs">
                  Search: "{searchQuery}"
                </Badge>
              )}
              {categoryFilter !== "all" && (
                <Badge variant="secondary" className="text-xs">
                  Category: {categoryFilter}
                </Badge>
              )}
            </div>
          )}

{/* Jobs Grid/List */}
          {filteredFavorites.length === 0 ? (
            <Card className="text-center py-8">
              <CardContent>
                <Search className="h-12 w-12 text-gray-300 mx-auto mb-3" />
                <h3 className="text-lg font-semibold text-gray-900 mb-2">No matches found</h3>
                <p className="text-gray-600">Try adjusting your search or filter criteria.</p>
              </CardContent>
            </Card>
          ) : (
            <div
              className={
                viewMode === "grid"
                  ? "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
                  : "space-y-4"
              }
            >
              {filteredFavorites.map((job) => (
                <div key={job.id} className={viewMode === "list" ? "max-w-none" : ""}>
                  <JobCard job={job} showApplyButton={true} />
                </div>
              ))}
            </div>
          )}
        </>
      )}
    </div>
  )
}
[V0_FILE]typescript:file="lib/admin.ts" isQuickEdit="true" isMerged="true"
// Admin-related types and mock data
export interface AdminStats {
  totalUsers: number
  activeUsers: number
  totalJobs: number
  totalServices: number
  totalTransactions: number
  totalRevenue: number
  monthlyGrowth: {
    users: number
    revenue: number
    jobs: number
    services: number
  }
}

export interface AdminUser {
  id: string
  firstName: string
  lastName: string
  username: string
  email: string
  userType: "user" | "admin"
  isVerified: boolean
  isActive: boolean
  totalEarned: number
  totalSpent: number
  joinedAt: string
  lastActive: string
}

export interface AdminTransaction {
  id: string
  userId: string
  type: "deposit" | "withdrawal" | "payment" | "earning" | "refund"
  amount: number
  status: "pending" | "completed" | "failed"
  description: string
  createdAt: string
  user: {
    firstName: string
    lastName: string
    username: string
  }
}

export interface PlatformMetrics {
  dailyActiveUsers: { date: string; users: number }[]
  monthlyRevenue: { month: string; revenue: number }[]
  categoryDistribution: { category: string; count: number; percentage: number }[]
  userGrowth: { month: string; newUsers: number; totalUsers: number }[]
}

// Mock data
// Removed mock data as it will be replaced with real data functions

// Mock API functions
export async function getAdminStats(): Promise<AdminStats> {
  await new Promise((resolve) => setTimeout(resolve, 300))

try {
    // Get real data from existing systems
    const { getAllUsers } = await import("./auth")
    const { getAllJobs } = await import("./jobs")
    const { getAllServices } = await import("./services")

const users = getAllUsers()
    const jobs = await getAllJobs()
    const services = await getAllServices()

// Calculate real stats
    const totalUsers = users.length
    const activeUsers = users.filter((user) => {
      const lastActive = new Date(user.lastActive || user.createdAt || Date.now())
      const thirtyDaysAgo = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000)
      return lastActive > thirtyDaysAgo
    }).length

const totalJobs = jobs.length
    const totalServices = services.length

// Calculate total revenue from user earnings and deposits
    const totalRevenue = users.reduce((sum, user) => sum + (user.earning || 0), 0)
    const totalTransactions = users.reduce((sum, user) => sum + (user.deposit || 0) + (user.earning || 0), 0)

// Calculate monthly growth (simplified - comparing to previous period)
    const currentMonth = new Date().getMonth()
    const currentYear = new Date().getFullYear()
    const currentMonthUsers = users.filter((user) => {
      const joinDate = new Date(user.createdAt || Date.now())
      return joinDate.getMonth() === currentMonth && joinDate.getFullYear() === currentYear
    }).length

const currentMonthJobs = jobs.filter((job) => {
      const createDate = new Date(job.createdAt || Date.now())
      return createDate.getMonth() === currentMonth && createDate.getFullYear() === currentYear
    }).length

return {
      totalUsers,
      activeUsers,
      totalJobs,
      totalServices,
      totalTransactions: Math.round(totalTransactions),
      totalRevenue,
      monthlyGrowth: {
        users: totalUsers > 0 ? Math.round((currentMonthUsers / totalUsers) * 100) : 0,
        revenue: totalRevenue > 0 ? Math.round(totalRevenue * 0.1) : 0, // Simplified calculation
        jobs: totalJobs > 0 ? Math.round((currentMonthJobs / totalJobs) * 100) : 0,
        services: totalServices > 0 ? Math.round(totalServices * 0.05) : 0, // Simplified calculation
      },
    }
  } catch (error) {
    console.error("Error calculating admin stats:", error)
    // Fallback to basic stats if there's an error
    return {
      totalUsers: 0,
      activeUsers: 0,
      totalJobs: 0,
      totalServices: 0,
      totalTransactions: 0,
      totalRevenue: 0,
      monthlyGrowth: {
        users: 0,
        revenue: 0,
        jobs: 0,
        services: 0,
      },
    }
  }
}

export async function getAdminUsers(filters?: {
  search?: string
  userType?: string
  isActive?: boolean
  limit?: number
}): Promise<AdminUser[]> {
  await new Promise((resolve) => setTimeout(resolve, 400))

try {
    const { getAllUsers } = await import("./auth")
    const users = getAllUsers()

// Convert to AdminUser format
    let adminUsers: AdminUser[] = users.map((user) => ({
      id: user.id,
      firstName: user.firstName,
      lastName: user.lastName,
      username: user.username,
      email: user.email,
      userType: user.userType as "user" | "admin",
      isVerified: user.isVerified || false,
      isActive: user.userType !== "suspended",
      totalEarned: user.earning || 0,
      totalSpent: user.deposit || 0,
      joinedAt: user.createdAt || new Date().toISOString(),
      lastActive: user.lastActive || user.createdAt || new Date().toISOString(),
    }))

// Apply filters
    if (filters?.search) {
      const search = filters.search.toLowerCase()
      adminUsers = adminUsers.filter(
        (user) =>
          user.firstName.toLowerCase().includes(search) ||
          user.lastName.toLowerCase().includes(search) ||
          user.username.toLowerCase().includes(search) ||
          user.email.toLowerCase().includes(search),
      )
    }

if (filters?.userType) {
      adminUsers = adminUsers.filter((user) => user.userType === filters.userType)
    }

if (filters?.isActive !== undefined) {
      adminUsers = adminUsers.filter((user) => user.isActive === filters.isActive)
    }

if (filters?.limit) {
      adminUsers = adminUsers.slice(0, filters.limit)
    }

return adminUsers.sort((a, b) => new Date(b.joinedAt).getTime() - new Date(a.joinedAt).getTime())
  } catch (error) {
    console.error("Error getting admin users:", error)
    return []
  }
}

export async function getAdminTransactions(filters?: {
  type?: string
  status?: string
  limit?: number
}): Promise<AdminTransaction[]> {
  await new Promise((resolve) => setTimeout(resolve, 400))

try {
    const { getAllUsers } = await import("./auth")
    const users = getAllUsers()

// Generate transactions from user data
    let transactions: AdminTransaction[] = []

users.forEach((user) => {
      // Add deposit transactions
      if (user.deposit && user.deposit > 0) {
        transactions.push({
          id: `deposit_${user.id}_${Date.now()}`,
          userId: user.id,
          type: "deposit",
          amount: user.deposit,
          status: "completed",
          description: "Account deposit",
          createdAt: user.createdAt || new Date().toISOString(),
          user: {
            firstName: user.firstName,
            lastName: user.lastName,
            username: user.username,
          },
        })
      }

// Add earning transactions
      if (user.earning && user.earning > 0) {
        transactions.push({
          id: `earning_${user.id}_${Date.now()}`,
          userId: user.id,
          type: "earning",
          amount: user.earning,
          status: "completed",
          description: "Job completion earnings",
          createdAt: user.createdAt || new Date().toISOString(),
          user: {
            firstName: user.firstName,
            lastName: user.lastName,
            username: user.username,
          },
        })
      }
    })

// Apply filters
    if (filters?.type) {
      transactions = transactions.filter((t) => t.type === filters.type)
    }

if (filters?.status) {
      transactions = transactions.filter((t) => t.status === filters.status)
    }

if (filters?.limit) {
      transactions = transactions.slice(0, filters.limit)
    }

return transactions.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
  } catch (error) {
    console.error("Error getting admin transactions:", error)
    return []
  }
}

export async function getPlatformMetrics(): Promise<PlatformMetrics> {
  await new Promise((resolve) => setTimeout(resolve, 500))

try {
    const { getAllUsers } = await import("./auth")
    const { getAllJobs } = await import("./jobs")
    const { getAllCategories } = await import("./categories")

const users = getAllUsers()
    const jobs = await getAllJobs()
    const categories = await getAllCategories()

// Generate daily active users for last 7 days
    const dailyActiveUsers = []
    for (let i = 6; i >= 0; i--) {
      const date = new Date()
      date.setDate(date.getDate() - i)
      const dateStr = date.toISOString().split("T")[0]

// Simulate daily active users based on total users
      const activeCount = Math.max(1, Math.floor(users.length * (0.1 + Math.random() * 0.3)))
      dailyActiveUsers.push({
        date: dateStr,
        users: activeCount,
      })
    }

// Generate monthly revenue for last 6 months
    const monthlyRevenue = []
    const months = ["Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
    const totalRevenue = users.reduce((sum, user) => sum + (user.earning || 0), 0)

for (let i = 0; i < 6; i++) {
      const monthRevenue = Math.max(0, Math.floor(totalRevenue * (0.1 + Math.random() * 0.2)))
      monthlyRevenue.push({
        month: months[i],
        revenue: monthRevenue,
      })
    }

// Generate category distribution from real jobs
    const categoryDistribution = []
    const categoryMap = new Map()

jobs.forEach((job) => {
      const categoryName = job.category?.name || job.categoryId || "Other"
      categoryMap.set(categoryName, (categoryMap.get(categoryName) || 0) + 1)
    })

const totalJobs = jobs.length || 1
    categoryMap.forEach((count, category) => {
      categoryDistribution.push({
        category,
        count,
        percentage: Math.round((count / totalJobs) * 100 * 10) / 10,
      })
    })

// If no jobs, show default categories
    if (categoryDistribution.length === 0) {
      categories.forEach((category) => {
        categoryDistribution.push({
          category: category.name,
          count: 0,
          percentage: 0,
        })
      })
    }

// Generate user growth
    const userGrowth = []
    const growthMonths = ["Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
    let cumulativeUsers = 0

for (let i = 0; i < 6; i++) {
      const newUsers = Math.max(0, Math.floor(users.length * (0.05 + Math.random() * 0.15)))
      cumulativeUsers += newUsers
      userGrowth.push({
        month: growthMonths[i],
        newUsers,
        totalUsers: Math.min(cumulativeUsers, users.length),
      })
    }

return {
      dailyActiveUsers,
      monthlyRevenue,
      categoryDistribution: categoryDistribution.slice(0, 5), // Top 5 categories
      userGrowth,
    }
  } catch (error) {
    console.error("Error getting platform metrics:", error)
    // Return empty metrics if there's an error
    return {
      dailyActiveUsers: [],
      monthlyRevenue: [],
      categoryDistribution: [],
      userGrowth: [],
    }
  }
}

export async function updateUserStatus(userId: string, isActive: boolean): Promise<void> {
  await new Promise((resolve) => setTimeout(resolve, 300))
  // Mock API call to update user status
}

export async function verifyUser(userId: string): Promise<void> {
  await new Promise((resolve) => setTimeout(resolve, 300))
  // Mock API call to verify user
}

export async function loginAsUser(userId: string): Promise<void> {
  await new Promise((resolve) => setTimeout(resolve, 300))

const { getStoredUser } = await import("./auth")
  const currentUser = getStoredUser()

if (!currentUser || currentUser.userType !== "admin") {
    throw new Error("Only administrators can impersonate users")
  }

try {
    const { getAllUsers } = await import("./auth")
    const users = getAllUsers()

// Find the user to impersonate
    const targetUser = users.find((user) => user.id === userId)
    if (!targetUser) {
      throw new Error("User not found")
    }

if (targetUser.userType === "admin") {
      throw new Error("Cannot impersonate other administrators")
    }

if (targetUser.userType === "suspended") {
      throw new Error("Cannot impersonate suspended users")
    }

localStorage.setItem("original_admin_session", JSON.stringify(currentUser))

const impersonatedSession = {
      ...targetUser,
      isImpersonating: true,
      originalAdminId: currentUser.id,
      originalAdminName: `${currentUser.firstName} ${currentUser.lastName}`,
    }

localStorage.setItem("user", JSON.stringify(impersonatedSession))

// Log the impersonation for security audit
    console.log(
      `[ADMIN IMPERSONATION] Admin ${currentUser.id} (${currentUser.firstName} ${currentUser.lastName}) is now impersonating user ${userId} (${targetUser.firstName} ${targetUser.lastName})`,
    )

// Redirect to dashboard
    window.location.href = "/dashboard"
  } catch (error) {
    console.error("Error in user impersonation:", error)
    throw error
  }
}

export async function restoreAdminSession(): Promise<void> {
  await new Promise((resolve) => setTimeout(resolve, 200))

const originalSession = localStorage.getItem("original_admin_session")
  if (!originalSession) {
    throw new Error("No original admin session found")
  }

const adminUser = JSON.parse(originalSession)

// Log the session restoration
  console.log(
    `[ADMIN IMPERSONATION] Restoring admin session for ${adminUser.id} (${adminUser.firstName} ${adminUser.lastName})`,
  )

localStorage.setItem("user", originalSession)
  localStorage.removeItem("original_admin_session")

// Redirect to admin panel
  window.location.href = "/admin"
}
[V0_FILE]typescriptreact:file="components/marketplace/share-modal.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { toast } from "@/hooks/use-toast"
import { Copy, Facebook, Twitter, Linkedin, MessageCircle, X } from "lucide-react"

interface ShareModalProps {
  isOpen: boolean
  onClose: () => void
  title: string
  description: string
  url: string
}

export function ShareModal({ isOpen, onClose, title, description, url }: ShareModalProps) {
  const [copied, setCopied] = useState(false)

const shareOptions = [
    {
      name: "Facebook",
      icon: Facebook,
      color: "bg-blue-600 hover:bg-blue-700",
      action: () => {
        window.open(
          `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`,
          "_blank",
          "width=600,height=400",
        )
      },
    },
    {
      name: "Twitter",
      icon: Twitter,
      color: "bg-sky-500 hover:bg-sky-600",
      action: () => {
        window.open(
          `https://twitter.com/intent/tweet?text=${encodeURIComponent(title)}&url=${encodeURIComponent(url)}`,
          "_blank",
          "width=600,height=400",
        )
      },
    },
    {
      name: "LinkedIn",
      icon: Linkedin,
      color: "bg-blue-700 hover:bg-blue-800",
      action: () => {
        window.open(
          `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`,
          "_blank",
          "width=600,height=400",
        )
      },
    },
    {
      name: "WhatsApp",
      icon: MessageCircle,
      color: "bg-green-600 hover:bg-green-700",
      action: () => {
        window.open(`https://wa.me/?text=${encodeURIComponent(`${title} - ${url}`)}`, "_blank")
      },
    },
  ]

const copyToClipboard = async () => {
    try {
      await navigator.clipboard.writeText(url)
      setCopied(true)
      toast({
        title: "Link copied!",
        description: "The service link has been copied to your clipboard.",
      })
      setTimeout(() => setCopied(false), 2000)
    } catch (err) {
      toast({
        title: "Failed to copy",
        description: "Please copy the link manually.",
        variant: "destructive",
      })
    }
  }

return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader className="text-center pb-4">
          <DialogTitle className="text-xl font-semibold text-gray-900">Share This Service</DialogTitle>
          <p className="text-sm text-gray-600 mt-2">Spread the word about this service</p>
        </DialogHeader>

{/* Social Media Share Options */}
        <div className="grid grid-cols-4 gap-3 mb-6">
          {shareOptions.map((option) => (
            <button
              key={option.name}
              onClick={option.action}
              className={`${option.color} text-white p-3 rounded-lg transition-all duration-200 hover:scale-105 flex flex-col items-center gap-2 group`}
            >
              <option.icon className="w-5 h-5" />
              <span className="text-xs font-medium">{option.name}</span>
            </button>
          ))}
        </div>

{/* Copy Link Section */}
        <div className="space-y-3">
          <label className="text-sm font-medium text-gray-700">Copy Link</label>
          <div className="flex gap-2">
            <Input value={url} readOnly className="flex-1 bg-gray-50 border-gray-200 text-sm" />
            <Button
              onClick={copyToClipboard}
              variant={copied ? "default" : "outline"}
              size="sm"
              className={`px-4 transition-all duration-200 ${
                copied ? "bg-green-600 hover:bg-green-700 text-white" : "hover:bg-gray-50"
              }`}
            >
              <Copy className="w-4 h-4 mr-1" />
              {copied ? "Copied!" : "Copy"}
            </Button>
          </div>
        </div>

{/* Close Button */}
        <Button
          onClick={onClose}
          variant="ghost"
          size="sm"
          className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
        >
          <X className="h-4 w-4" />
          <span className="sr-only">Close</span>
        </Button>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]go:file="backend/go.mod" isMerged="true"
module microjob-backend

go 1.21

require (
	github.com/gofiber/fiber/v2 v2.52.0
	github.com/joho/godotenv v1.5.1
	github.com/lib/pq v1.10.9
	github.com/golang-jwt/jwt/v5 v5.2.0
	github.com/google/uuid v1.6.0
	github.com/robfig/cron/v3 v3.0.1
	github.com/go-redis/redis/v8 v8.11.5
	golang.org/x/crypto v0.18.0
)

require (
	github.com/andybalholm/brotli v1.0.5 // indirect
	github.com/cespare/xxhash/v2 v2.1.2 // indirect
	github.com/dgryski/go-rendezvous v0.0.0-20200823014737-9f7001d12a5f // indirect
	github.com/klauspost/compress v1.17.0 // indirect
	github.com/mattn/go-colorable v0.1.13 // indirect
	github.com/mattn/go-isatty v0.0.20 // indirect
	github.com/mattn/go-runewidth v0.0.15 // indirect
	github.com/rivo/uniseg v0.2.0 // indirect
	github.com/valyala/bytebufferpool v1.0.0 // indirect
	github.com/valyala/fasthttp v1.51.0 // indirect
	github.com/valyala/tcplisten v1.0.0 // indirect
	golang.org/x/sys v0.16.0 // indirect
)
[V0_FILE]go:file="backend/config/config.go" isQuickEdit="true" isMerged="true"
package config

import (
	"os"
	"strings"
)

type Config struct {
	DatabaseURL    string
	JWTSecret      string
	SupabaseURL    string
	SupabaseKey    string
	CronSecret     string
	AllowedOrigins string
	Environment    string
	RedisURL       string
	RedisPassword  string
	RedisDB        int
}

func New() *Config {
	return &Config{
		DatabaseURL:    getEnv("DATABASE_URL", "postgres://localhost/microjob_db?sslmode=disable"),
		JWTSecret:      getEnv("JWT_SECRET", "your-secret-key"),
		SupabaseURL:    getEnv("NEXT_PUBLIC_SUPABASE_URL", ""),
		SupabaseKey:    getEnv("NEXT_PUBLIC_SUPABASE_ANON_KEY", ""),
		CronSecret:     getEnv("CRON_SECRET", "test-secret"),
		AllowedOrigins: getEnv("ALLOWED_ORIGINS", "http://localhost:3000,https://localhost:3000"),
		Environment:    getEnv("NODE_ENV", "development"),
		RedisURL:       getEnv("REDIS_URL", "localhost:6379"),
		RedisPassword:  getEnv("REDIS_PASSWORD", ""),
		RedisDB:        getEnvInt("REDIS_DB", 0),
	}
}

func getEnv(key, defaultValue string) string {
	if value := os.Getenv(key); value != "" {
		return value
	}
	return defaultValue
}

func getEnvInt(key string, defaultValue int) int {
	if value := os.Getenv(key); value != "" {
		if intValue := parseInt(value); intValue != -1 {
			return intValue
		}
	}
	return defaultValue
}

func parseInt(s string) int {
	switch s {
	case "0":
		return 0
	case "1":
		return 1
	case "2":
		return 2
	default:
		return -1
	}
}

func (c *Config) IsDevelopment() bool {
	return strings.ToLower(c.Environment) == "development"
}

func (c *Config) IsProduction() bool {
	return strings.ToLower(c.Environment) == "production"
}
[V0_FILE]go:file="backend/database/connection.go" isQuickEdit="true" isMerged="true"
package database

import (
	"database/sql"
	"fmt"
	"log"

_ "github.com/lib/pq"
)

type DB struct {
	*sql.DB
}

func Connect(databaseURL string) (*DB, error) {
	db, err := sql.Open("postgres", databaseURL)
	if err != nil {
		return nil, fmt.Errorf("failed to open database: %w", err)
	}

if err := db.Ping(); err != nil {
		return nil, fmt.Errorf("failed to ping database: %w", err)
	}

db.SetMaxOpenConns(100)
	db.SetMaxIdleConns(25)
	db.SetConnMaxLifetime(0)

log.Println("Successfully connected to database")
	return &DB{db}, nil
}

func (db *DB) Close() error {
	return db.DB.Close()
}

// Transaction helper
func (db *DB) WithTransaction(fn func(*sql.Tx) error) error {
	tx, err := db.Begin()
	if err != nil {
		return err
	}

defer func() {
		if p := recover(); p != nil {
			tx.Rollback()
			panic(p)
		} else if err != nil {
			tx.Rollback()
		} else {
			err = tx.Commit()
		}
	}()

err = fn(tx)
	return err
}
[V0_FILE]go:file="backend/models/user.go" isMerged="true"
package models

import (
	"database/sql/driver"
	"encoding/json"
	"time"
)

type User struct {
	ID           string    `json:"id" db:"id"`
	Email        string    `json:"email" db:"email"`
	PasswordHash string    `json:"-" db:"password_hash"`
	FirstName    string    `json:"first_name" db:"first_name"`
	LastName     string    `json:"last_name" db:"last_name"`
	Username     string    `json:"username" db:"username"`
	Phone        *string   `json:"phone" db:"phone"`
	AvatarURL    *string   `json:"avatar_url" db:"avatar_url"`
	Bio          *string   `json:"bio" db:"bio"`
	Location     *string   `json:"location" db:"location"`
	Skills       JSONArray `json:"skills" db:"skills"`
	Rating       float64   `json:"rating" db:"rating"`
	TotalReviews int       `json:"total_reviews" db:"total_reviews"`
	IsVerified   bool      `json:"is_verified" db:"is_verified"`
	IsActive     bool      `json:"is_active" db:"is_active"`
	UserType     string    `json:"user_type" db:"user_type"` // "user", "admin"
	CreatedAt    time.Time `json:"created_at" db:"created_at"`
	UpdatedAt    time.Time `json:"updated_at" db:"updated_at"`
}

type JSONArray []string

func (j JSONArray) Value() (driver.Value, error) {
	if len(j) == 0 {
		return "{}", nil
	}
	return json.Marshal(j)
}

func (j *JSONArray) Scan(value interface{}) error {
	if value == nil {
		*j = JSONArray{}
		return nil
	}
	
	bytes, ok := value.([]byte)
	if !ok {
		return nil
	}
	
	return json.Unmarshal(bytes, j)
}

type AuthUser struct {
	ID       string `json:"id"`
	Email    string `json:"email"`
	UserType string `json:"userType"`
}

type LoginRequest struct {
	Email    string `json:"email" validate:"required,email"`
	Password string `json:"password" validate:"required,min=6"`
}

type RegisterRequest struct {
	Email     string `json:"email" validate:"required,email"`
	Password  string `json:"password" validate:"required,min=6"`
	FirstName string `json:"firstName" validate:"required"`
	LastName  string `json:"lastName" validate:"required"`
	UserType  string `json:"userType" validate:"required,oneof=user admin"`
}

type ReferralCode struct {
	ID        string    `json:"id" db:"id"`
	UserID    string    `json:"user_id" db:"user_id"`
	Code      string    `json:"code" db:"code"`
	UsesCount int       `json:"uses_count" db:"uses_count"`
	MaxUses   int       `json:"max_uses" db:"max_uses"`
	IsActive  bool      `json:"is_active" db:"is_active"`
	CreatedAt time.Time `json:"created_at" db:"created_at"`
}

type Referral struct {
	ID           string    `json:"id" db:"id"`
	ReferrerID   string    `json:"referrer_id" db:"referrer_id"`
	ReferredID   string    `json:"referred_id" db:"referred_id"`
	ReferralCode string    `json:"referral_code" db:"referral_code"`
	Status       string    `json:"status" db:"status"` // "pending", "completed"
	RewardAmount float64   `json:"reward_amount" db:"reward_amount"`
	CreatedAt    time.Time `json:"created_at" db:"created_at"`
}
[V0_FILE]go:file="backend/models/job.go" isMerged="true"
package models

import (
	"time"
)

type Category struct {
	ID          string     `json:"id" db:"id"`
	Name        string     `json:"name" db:"name"`
	Slug        string     `json:"slug" db:"slug"`
	Description *string    `json:"description" db:"description"`
	Icon        *string    `json:"icon" db:"icon"`
	ParentID    *string    `json:"parent_id" db:"parent_id"`
	IsActive    bool       `json:"is_active" db:"is_active"`
	CreatedAt   time.Time  `json:"created_at" db:"created_at"`
}

type Microjob struct {
	ID                 string    `json:"id" db:"id"`
	UserID             string    `json:"user_id" db:"user_id"`
	CategoryID         string    `json:"category_id" db:"category_id"`
	Title              string    `json:"title" db:"title"`
	Description        string    `json:"description" db:"description"`
	Requirements       *string   `json:"requirements" db:"requirements"`
	BudgetMin          *float64  `json:"budget_min" db:"budget_min"`
	BudgetMax          *float64  `json:"budget_max" db:"budget_max"`
	Deadline           *string   `json:"deadline" db:"deadline"` // DATE type
	Location           *string   `json:"location" db:"location"`
	IsRemote           bool      `json:"is_remote" db:"is_remote"`
	Status             string    `json:"status" db:"status"` // "open", "in_progress", "completed", "cancelled"
	Priority           string    `json:"priority" db:"priority"` // "low", "normal", "high", "urgent"
	Attachments        JSONArray `json:"attachments" db:"attachments"`
	SkillsRequired     JSONArray `json:"skills_required" db:"skills_required"`
	ApplicationsCount  int       `json:"applications_count" db:"applications_count"`
	ViewsCount         int       `json:"views_count" db:"views_count"`
	CreatedAt          time.Time `json:"created_at" db:"created_at"`
	UpdatedAt          time.Time `json:"updated_at" db:"updated_at"`
}

type JobApplication struct {
	ID                string     `json:"id" db:"id"`
	JobID             string     `json:"job_id" db:"job_id"`
	ApplicantID       string     `json:"applicant_id" db:"applicant_id"`
	CoverLetter       *string    `json:"cover_letter" db:"cover_letter"`
	ProposedBudget    *float64   `json:"proposed_budget" db:"proposed_budget"`
	EstimatedDuration *string    `json:"estimated_duration" db:"estimated_duration"`
	PortfolioLinks    JSONArray  `json:"portfolio_links" db:"portfolio_links"`
	Status            string     `json:"status" db:"status"` // "pending", "accepted", "rejected"
	CreatedAt         time.Time  `json:"created_at" db:"created_at"`
}

type WorkProof struct {
	ID            string     `json:"id" db:"id"`
	JobID         string     `json:"job_id" db:"job_id"`
	WorkerID      string     `json:"worker_id" db:"worker_id"`
	ApplicationID string     `json:"application_id" db:"application_id"`
	Title         string     `json:"title" db:"title"`
	Description   string     `json:"description" db:"description"`
	Status        string     `json:"status" db:"status"` // "pending", "approved", "rejected", "revision_requested"
	PaymentAmount float64    `json:"payment_amount" db:"payment_amount"`
	ReviewNotes   *string    `json:"review_notes" db:"review_notes"`
	CreatedAt     time.Time  `json:"created_at" db:"created_at"`
	UpdatedAt     time.Time  `json:"updated_at" db:"updated_at"`
	ApprovedAt    *time.Time `json:"approved_at" db:"approved_at"`
	RejectedAt    *time.Time `json:"rejected_at" db:"rejected_at"`
}

type JobReservation struct {
	ID        string    `json:"id" db:"id"`
	JobID     string    `json:"job_id" db:"job_id"`
	UserID    string    `json:"user_id" db:"user_id"`
	Status    string    `json:"status" db:"status"` // "active", "expired", "cancelled"
	ExpiresAt time.Time `json:"expires_at" db:"expires_at"`
	CreatedAt time.Time `json:"created_at" db:"created_at"`
	UpdatedAt time.Time `json:"updated_at" db:"updated_at"`
}

type UserFavorite struct {
	ID        string    `json:"id" db:"id"`
	UserID    string    `json:"user_id" db:"user_id"`
	JobID     string    `json:"job_id" db:"job_id"`
	CreatedAt time.Time `json:"created_at" db:"created_at"`
}
[V0_FILE]go:file="backend/models/wallet.go" isMerged="true"
package models

import (
	"time"
)

type Wallet struct {
	ID             string    `json:"id" db:"id"`
	UserID         string    `json:"user_id" db:"user_id"`
	Balance        float64   `json:"balance" db:"balance"`
	PendingBalance float64   `json:"pending_balance" db:"pending_balance"`
	TotalEarned    float64   `json:"total_earned" db:"total_earned"`
	TotalSpent     float64   `json:"total_spent" db:"total_spent"`
	CreatedAt      time.Time `json:"created_at" db:"created_at"`
	UpdatedAt      time.Time `json:"updated_at" db:"updated_at"`
}

type WalletTransaction struct {
	ID            string    `json:"id" db:"id"`
	WalletID      string    `json:"wallet_id" db:"wallet_id"`
	Type          string    `json:"type" db:"type"` // "deposit", "withdrawal", "payment", "earning", "refund"
	Amount        float64   `json:"amount" db:"amount"`
	Description   *string   `json:"description" db:"description"`
	ReferenceID   *string   `json:"reference_id" db:"reference_id"`
	ReferenceType *string   `json:"reference_type" db:"reference_type"`
	Status        string    `json:"status" db:"status"` // "pending", "completed", "failed"
	CreatedAt     time.Time `json:"created_at" db:"created_at"`
}

type ChatMoneyTransfer struct {
	ID               string     `json:"id" db:"id"`
	ChatID           string     `json:"chat_id" db:"chat_id"`
	SenderID         string     `json:"sender_id" db:"sender_id"`
	ReceiverID       string     `json:"receiver_id" db:"receiver_id"`
	Amount           float64    `json:"amount" db:"amount"`
	CommissionAmount float64    `json:"commission_amount" db:"commission_amount"`
	NetAmount        float64    `json:"net_amount" db:"net_amount"`
	Message          *string    `json:"message" db:"message"`
	Status           string     `json:"status" db:"status"` // "pending", "completed", "failed"
	CreatedAt        time.Time  `json:"created_at" db:"created_at"`
	CompletedAt      *time.Time `json:"completed_at" db:"completed_at"`
}
[V0_FILE]go:file="backend/models/admin.go" isMerged="true"
package models

import (
	"time"
)

type AdminSettings struct {
	ID        string    `json:"id" db:"id"`
	Key       string    `json:"key" db:"key"`
	Value     string    `json:"value" db:"value"`
	CreatedAt time.Time `json:"created_at" db:"created_at"`
	UpdatedAt time.Time `json:"updated_at" db:"updated_at"`
}

type PlatformFeeSettings struct {
	ID         string    `json:"id" db:"id"`
	Enabled    bool      `json:"enabled" db:"enabled"`
	Percentage float64   `json:"percentage" db:"percentage"`
	FixedFee   float64   `json:"fixed_fee" db:"fixed_fee"`
	MinimumFee float64   `json:"minimum_fee" db:"minimum_fee"`
	MaximumFee float64   `json:"maximum_fee" db:"maximum_fee"`
	CreatedAt  time.Time `json:"created_at" db:"created_at"`
	UpdatedAt  time.Time `json:"updated_at" db:"updated_at"`
}

type AdminFeeSettings struct {
	ID            string    `json:"id" db:"id"`
	FeeType       string    `json:"fee_type" db:"fee_type"`
	FeePercentage float64   `json:"fee_percentage" db:"fee_percentage"`
	FeeFixed      float64   `json:"fee_fixed" db:"fee_fixed"`
	MinimumFee    float64   `json:"minimum_fee" db:"minimum_fee"`
	MaximumFee    *float64  `json:"maximum_fee" db:"maximum_fee"`
	IsActive      bool      `json:"is_active" db:"is_active"`
	CreatedAt     time.Time `json:"created_at" db:"created_at"`
	UpdatedAt     time.Time `json:"updated_at" db:"updated_at"`
}

type SupportPricingSettings struct {
	ID                string    `json:"id" db:"id"`
	SupportType       string    `json:"support_type" db:"support_type"`
	Price             float64   `json:"price" db:"price"`
	ResponseTimeHours int       `json:"response_time_hours" db:"response_time_hours"`
	Description       *string   `json:"description" db:"description"`
	IsActive          bool      `json:"is_active" db:"is_active"`
	CreatedAt         time.Time `json:"created_at" db:"created_at"`
	UpdatedAt         time.Time `json:"updated_at" db:"updated_at"`
}

type SupportTicket struct {
	ID                   string     `json:"id" db:"id"`
	UserID               string     `json:"user_id" db:"user_id"`
	ChatID               *string    `json:"chat_id" db:"chat_id"`
	TicketType           string     `json:"ticket_type" db:"ticket_type"`
	Subject              string     `json:"subject" db:"subject"`
	Description          string     `json:"description" db:"description"`
	Priority             string     `json:"priority" db:"priority"`
	Status               string     `json:"status" db:"status"`
	PaymentAmount        float64    `json:"payment_amount" db:"payment_amount"`
	ResponseTimeHours    int        `json:"response_time_hours" db:"response_time_hours"`
	PaymentTransactionID *string    `json:"payment_transaction_id" db:"payment_transaction_id"`
	CreatedAt            time.Time  `json:"created_at" db:"created_at"`
	UpdatedAt            time.Time  `json:"updated_at" db:"updated_at"`
}

type ReservationViolation struct {
	ID                   string    `json:"id" db:"id"`
	UserID               string    `json:"user_id" db:"user_id"`
	ViolationCount       int       `json:"violation_count" db:"violation_count"`
	LastViolationAt      time.Time `json:"last_violation_at" db:"last_violation_at"`
	TotalReservations    int       `json:"total_reservations" db:"total_reservations"`
	ExpiredReservations  int       `json:"expired_reservations" db:"expired_reservations"`
	CreatedAt            time.Time `json:"created_at" db:"created_at"`
	UpdatedAt            time.Time `json:"updated_at" db:"updated_at"`
}
[V0_FILE]go:file="backend/middleware/error.go" isMerged="true"
package middleware

import (
	"log"

"github.com/gofiber/fiber/v2"
)

func ErrorHandler(c *fiber.Ctx, err error) error {
	code := fiber.StatusInternalServerError

if e, ok := err.(*fiber.Error); ok {
		code = e.Code
	}

log.Printf("Error: %v", err)

return c.Status(code).JSON(fiber.Map{
		"error": err.Error(),
	})
}
[V0_FILE]dockerfile:file="backend/Dockerfile" isMerged="true"
FROM golang:1.21-alpine AS builder

WORKDIR /app

# Install dependencies
COPY go.mod go.sum ./
RUN go mod download

# Copy source code
COPY . .

# Build the application
RUN CGO_ENABLED=0 GOOS=linux go build -a -installsuffix cgo -o main .

# Final stage
FROM alpine:latest

RUN apk --no-cache add ca-certificates tzdata
WORKDIR /root/

# Copy the binary from builder
COPY --from=builder /app/main .

# Expose port
EXPOSE 8080

# Run the application
CMD ["./main"]
[V0_FILE]yaml:file="backend/docker-compose.yml" isMerged="true"
version: '3.8'

services:
  app:
    build: .
    ports:
      - "8080:8080"
    environment:
      - DATABASE_URL=postgres://postgres:password@db:5432/microjob_db?sslmode=disable
      - JWT_SECRET=your-secret-key
      - CRON_SECRET=test-secret
      - NODE_ENV=development
      - ALLOWED_ORIGINS=http://localhost:3000,https://localhost:3000
    depends_on:
      - db
    volumes:
      - .:/app
    working_dir: /app

db:
    image: postgres:15-alpine
    environment:
      - POSTGRES_DB=microjob_db
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=password
    ports:
      - "5432:5432"
    volumes:
      - postgres_data:/var/lib/postgresql/data

volumes:
  postgres_data:
[V0_FILE]plaintext:file="backend/.env.example" isMerged="true"
# Database
DATABASE_URL=postgres://postgres:password@localhost:5432/microjob_db?sslmode=disable

# JWT
JWT_SECRET=your-super-secret-jwt-key-here

# Supabase (if using)
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key

# Cron
CRON_SECRET=your-cron-secret-key

# Server
PORT=8080
NODE_ENV=development
ALLOWED_ORIGINS=http://localhost:3000,https://localhost:3000

# Email notifications (optional)
ENABLE_EMAIL_NOTIFICATIONS=false
ADMIN_EMAIL=admin@example.com

# Webhook notifications (optional)
ENABLE_WEBHOOK_NOTIFICATIONS=false
ADMIN_WEBHOOK_URL=https://your-webhook-url.com
[V0_FILE]makefile:file="backend/Makefile" isMerged="true"
.PHONY: build run test clean docker-build docker-run

# Build the application
build:
	go build -o bin/main .

# Run the application
run:
	go run .

# Run with hot reload (requires air: go install github.com/cosmtrek/air@latest)
dev:
	air

# Run tests
test:
	go test -v ./...

# Clean build artifacts
clean:
	rm -rf bin/

# Install dependencies
deps:
	go mod download
	go mod tidy

# Format code
fmt:
	go fmt ./...

# Lint code (requires golangci-lint)
lint:
	golangci-lint run

# Docker commands
docker-build:
	docker build -t microjob-backend .

docker-run:
	docker-compose up --build

docker-down:
	docker-compose down

# Database migrations (if using migrate tool)
migrate-up:
	migrate -path migrations -database "$(DATABASE_URL)" up

migrate-down:
	migrate -path migrations -database "$(DATABASE_URL)" down

# Generate API documentation (if using swag)
docs:
	swag init
[V0_FILE]go:file="backend/models/marketplace.go" isMerged="true"
package models

import (
	"time"
)

type MarketplaceItem struct {
	ID                string    `json:"id" db:"id"`
	SellerID          string    `json:"seller_id" db:"seller_id"`
	CategoryID        string    `json:"category_id" db:"category_id"`
	Title             string    `json:"title" db:"title"`
	Description       string    `json:"description" db:"description"`
	ShortDescription  *string   `json:"short_description" db:"short_description"`
	Price             float64   `json:"price" db:"price"`
	DeliveryTime      int       `json:"delivery_time" db:"delivery_time"` // in days
	RevisionsIncluded int       `json:"revisions_included" db:"revisions_included"`
	Images            JSONArray `json:"images" db:"images"`
	Tags              JSONArray `json:"tags" db:"tags"`
	Requirements      *string   `json:"requirements" db:"requirements"`
	Status            string    `json:"status" db:"status"` // "active", "paused", "draft"
	Rating            float64   `json:"rating" db:"rating"`
	TotalOrders       int       `json:"total_orders" db:"total_orders"`
	ViewsCount        int       `json:"views_count" db:"views_count"`
	CreatedAt         time.Time `json:"created_at" db:"created_at"`
	UpdatedAt         time.Time `json:"updated_at" db:"updated_at"`
}

type Order struct {
	ID                   string     `json:"id" db:"id"`
	MarketplaceItemID    string     `json:"marketplace_item_id" db:"marketplace_item_id"`
	BuyerID              string     `json:"buyer_id" db:"buyer_id"`
	SellerID             string     `json:"seller_id" db:"seller_id"`
	Amount               float64    `json:"amount" db:"amount"`
	Status               string     `json:"status" db:"status"` // "pending", "in_progress", "delivered", "completed", "cancelled", "disputed"
	RequirementsProvided *string    `json:"requirements_provided" db:"requirements_provided"`
	DeliveryDate         *string    `json:"delivery_date" db:"delivery_date"` // DATE type
	DeliveredAt          *time.Time `json:"delivered_at" db:"delivered_at"`
	CompletedAt          *time.Time `json:"completed_at" db:"completed_at"`
	CreatedAt            time.Time  `json:"created_at" db:"created_at"`
}
[V0_FILE]go:file="backend/models/chat.go" isMerged="true"
package models

import (
	"time"
)

type Chat struct {
	ID                 string     `json:"id" db:"id"`
	Type               string     `json:"type" db:"type"` // "direct", "order", "admin_support"
	Title              *string    `json:"title" db:"title"`
	OrderID            *string    `json:"order_id" db:"order_id"`
	JobID              *string    `json:"job_id" db:"job_id"`
	MarketplaceItemID  *string    `json:"marketplace_item_id" db:"marketplace_item_id"`
	CreatedBy          string     `json:"created_by" db:"created_by"`
	IsActive           bool       `json:"is_active" db:"is_active"`
	LastMessageAt      time.Time  `json:"last_message_at" db:"last_message_at"`
	CreatedAt          time.Time  `json:"created_at" db:"created_at"`
	UpdatedAt          time.Time  `json:"updated_at" db:"updated_at"`
}

type ChatParticipant struct {
	ID       string     `json:"id" db:"id"`
	ChatID   string     `json:"chat_id" db:"chat_id"`
	UserID   string     `json:"user_id" db:"user_id"`
	Role     string     `json:"role" db:"role"` // "participant", "admin", "moderator"
	JoinedAt time.Time  `json:"joined_at" db:"joined_at"`
	LeftAt   *time.Time `json:"left_at" db:"left_at"`
	IsActive bool       `json:"is_active" db:"is_active"`
}

type Message struct {
	ID          string     `json:"id" db:"id"`
	ChatID      string     `json:"chat_id" db:"chat_id"`
	SenderID    string     `json:"sender_id" db:"sender_id"`
	MessageType string     `json:"message_type" db:"message_type"` // "text", "image", "file", "system"
	Content     string     `json:"content" db:"content"`
	FileURL     *string    `json:"file_url" db:"file_url"`
	FileName    *string    `json:"file_name" db:"file_name"`
	FileSize    *int       `json:"file_size" db:"file_size"`
	ReplyToID   *string    `json:"reply_to_id" db:"reply_to_id"`
	IsEdited    bool       `json:"is_edited" db:"is_edited"`
	EditedAt    *time.Time `json:"edited_at" db:"edited_at"`
	CreatedAt   time.Time  `json:"created_at" db:"created_at"`
	UpdatedAt   time.Time  `json:"updated_at" db:"updated_at"`
}

type MessageStatus struct {
	ID        string     `json:"id" db:"id"`
	MessageID string     `json:"message_id" db:"message_id"`
	UserID    string     `json:"user_id" db:"user_id"`
	Status    string     `json:"status" db:"status"` // "sent", "delivered", "read"
	ReadAt    *time.Time `json:"read_at" db:"read_at"`
	CreatedAt time.Time  `json:"created_at" db:"created_at"`
}

type ChatSettings struct {
	ID                   string     `json:"id" db:"id"`
	UserID               string     `json:"user_id" db:"user_id"`
	ChatID               string     `json:"chat_id" db:"chat_id"`
	NotificationsEnabled bool       `json:"notifications_enabled" db:"notifications_enabled"`
	MutedUntil           *time.Time `json:"muted_until" db:"muted_until"`
	CustomName           *string    `json:"custom_name" db:"custom_name"`
	CreatedAt            time.Time  `json:"created_at" db:"created_at"`
	UpdatedAt            time.Time  `json:"updated_at" db:"updated_at"`
}
[V0_FILE]go:file="backend/models/notification.go" isMerged="true"
package models

import (
	"time"
)

type Notification struct {
	ID            string    `json:"id" db:"id"`
	UserID        string    `json:"user_id" db:"user_id"`
	Title         string    `json:"title" db:"title"`
	Message       string    `json:"message" db:"message"`
	Type          string    `json:"type" db:"type"` // "job_application", "order_update", "payment", "review", etc.
	ReferenceID   *string   `json:"reference_id" db:"reference_id"`
	ReferenceType *string   `json:"reference_type" db:"reference_type"`
	IsRead        bool      `json:"is_read" db:"is_read"`
	CreatedAt     time.Time `json:"created_at" db:"created_at"`
}

type Review struct {
	ID         string    `json:"id" db:"id"`
	ReviewerID string    `json:"reviewer_id" db:"reviewer_id"`
	RevieweeID string    `json:"reviewee_id" db:"reviewee_id"`
	OrderID    *string   `json:"order_id" db:"order_id"`
	JobID      *string   `json:"job_id" db:"job_id"`
	Rating     int       `json:"rating" db:"rating"` // 1-5
	Comment    *string   `json:"comment" db:"comment"`
	CreatedAt  time.Time `json:"created_at" db:"created_at"`
}
[V0_FILE]go:file="backend/database/queries.go" isMerged="true"
package database

import (
	"database/sql"
	"fmt"
	"strings"

"microjob-backend/models"
)

// User queries
func (db *DB) GetUserByEmail(email string) (*models.User, error) {
	query := `
		SELECT id, email, password_hash, first_name, last_name, username, phone, 
		       avatar_url, bio, location, skills, rating, total_reviews, 
		       is_verified, is_active, user_type, created_at, updated_at
		FROM users WHERE email = $1 AND is_active = true`
	
	var user models.User
	err := db.QueryRow(query, email).Scan(
		&user.ID, &user.Email, &user.PasswordHash, &user.FirstName, &user.LastName,
		&user.Username, &user.Phone, &user.AvatarURL, &user.Bio, &user.Location,
		&user.Skills, &user.Rating, &user.TotalReviews, &user.IsVerified,
		&user.IsActive, &user.UserType, &user.CreatedAt, &user.UpdatedAt,
	)
	
	if err != nil {
		return nil, err
	}
	
	return &user, nil
}

func (db *DB) GetUserByID(id string) (*models.User, error) {
	query := `
		SELECT id, email, password_hash, first_name, last_name, username, phone, 
		       avatar_url, bio, location, skills, rating, total_reviews, 
		       is_verified, is_active, user_type, created_at, updated_at
		FROM users WHERE id = $1 AND is_active = true`
	
	var user models.User
	err := db.QueryRow(query, id).Scan(
		&user.ID, &user.Email, &user.PasswordHash, &user.FirstName, &user.LastName,
		&user.Username, &user.Phone, &user.AvatarURL, &user.Bio, &user.Location,
		&user.Skills, &user.Rating, &user.TotalReviews, &user.IsVerified,
		&user.IsActive, &user.UserType, &user.CreatedAt, &user.UpdatedAt,
	)
	
	if err != nil {
		return nil, err
	}
	
	return &user, nil
}

func (db *DB) CreateUser(user *models.User) error {
	query := `
		INSERT INTO users (id, email, password_hash, first_name, last_name, username, user_type)
		VALUES ($1, $2, $3, $4, $5, $6, $7)
		RETURNING created_at, updated_at`
	
	return db.QueryRow(query, user.ID, user.Email, user.PasswordHash, 
		user.FirstName, user.LastName, user.Username, user.UserType).Scan(
		&user.CreatedAt, &user.UpdatedAt)
}

// Wallet queries
func (db *DB) GetWalletByUserID(userID string) (*models.Wallet, error) {
	query := `
		SELECT id, user_id, balance, pending_balance, total_earned, total_spent, created_at, updated_at
		FROM wallets WHERE user_id = $1`
	
	var wallet models.Wallet
	err := db.QueryRow(query, userID).Scan(
		&wallet.ID, &wallet.UserID, &wallet.Balance, &wallet.PendingBalance,
		&wallet.TotalEarned, &wallet.TotalSpent, &wallet.CreatedAt, &wallet.UpdatedAt,
	)
	
	if err != nil {
		return nil, err
	}
	
	return &wallet, nil
}

func (db *DB) CreateWallet(wallet *models.Wallet) error {
	query := `
		INSERT INTO wallets (id, user_id, balance, pending_balance, total_earned, total_spent)
		VALUES ($1, $2, $3, $4, $5, $6)
		RETURNING created_at, updated_at`
	
	return db.QueryRow(query, wallet.ID, wallet.UserID, wallet.Balance,
		wallet.PendingBalance, wallet.TotalEarned, wallet.TotalSpent).Scan(
		&wallet.CreatedAt, &wallet.UpdatedAt)
}

func (db *DB) UpdateWalletBalance(userID string, amount float64, transactionType string) error {
	return db.WithTransaction(func(tx *sql.Tx) error {
		// Update wallet balance
		_, err := tx.Exec(`
			UPDATE wallets 
			SET balance = balance + $1, 
			    total_earned = CASE WHEN $1 > 0 THEN total_earned + $1 ELSE total_earned END,
			    total_spent = CASE WHEN $1 < 0 THEN total_spent + ABS($1) ELSE total_spent END,
			    updated_at = NOW()
			WHERE user_id = $2`, amount, userID)
		
		if err != nil {
			return err
		}
		
		// Get wallet ID for transaction record
		var walletID string
		err = tx.QueryRow("SELECT id FROM wallets WHERE user_id = $1", userID).Scan(&walletID)
		if err != nil {
			return err
		}
		
		// Create transaction record
		_, err = tx.Exec(`
			INSERT INTO wallet_transactions (id, wallet_id, type, amount, description, status)
			VALUES (gen_random_uuid(), $1, $2, $3, $4, 'completed')`,
			walletID, transactionType, amount, fmt.Sprintf("Wallet %s", transactionType))
		
		return err
	})
}

// Job queries
func (db *DB) GetJobs(filters map[string]interface{}) ([]*models.Microjob, error) {
	query := `
		SELECT id, user_id, category_id, title, description, requirements, budget_min, budget_max,
		       deadline, location, is_remote, status, priority, attachments, skills_required,
		       applications_count, views_count, created_at, updated_at
		FROM microjobs WHERE status = 'open'`
	
	args := []interface{}{}
	argCount := 0
	
	if category, ok := filters["category"]; ok && category != "" {
		argCount++
		query += fmt.Sprintf(" AND category_id = $%d", argCount)
		args = append(args, category)
	}
	
	if search, ok := filters["search"]; ok && search != "" {
		argCount++
		query += fmt.Sprintf(" AND (title ILIKE $%d OR description ILIKE $%d)", argCount, argCount)
		args = append(args, "%"+search.(string)+"%")
	}
	
	query += " ORDER BY created_at DESC LIMIT 50"
	
	rows, err := db.Query(query, args...)
	if err != nil {
		return nil, err
	}
	defer rows.Close()
	
	var jobs []*models.Microjob
	for rows.Next() {
		var job models.Microjob
		err := rows.Scan(
			&job.ID, &job.UserID, &job.CategoryID, &job.Title, &job.Description,
			&job.Requirements, &job.BudgetMin, &job.BudgetMax, &job.Deadline,
			&job.Location, &job.IsRemote, &job.Status, &job.Priority,
			&job.Attachments, &job.SkillsRequired, &job.ApplicationsCount,
			&job.ViewsCount, &job.CreatedAt, &job.UpdatedAt,
		)
		if err != nil {
			return nil, err
		}
		jobs = append(jobs, &job)
	}
	
	return jobs, nil
}

func (db *DB) GetJobByID(id string) (*models.Microjob, error) {
	query := `
		SELECT id, user_id, category_id, title, description, requirements, budget_min, budget_max,
		       deadline, location, is_remote, status, priority, attachments, skills_required,
		       applications_count, views_count, created_at, updated_at
		FROM microjobs WHERE id = $1`
	
	var job models.Microjob
	err := db.QueryRow(query, id).Scan(
		&job.ID, &job.UserID, &job.CategoryID, &job.Title, &job.Description,
		&job.Requirements, &job.BudgetMin, &job.BudgetMax, &job.Deadline,
		&job.Location, &job.IsRemote, &job.Status, &job.Priority,
		&job.Attachments, &job.SkillsRequired, &job.ApplicationsCount,
		&job.ViewsCount, &job.CreatedAt, &job.UpdatedAt,
	)
	
	if err != nil {
		return nil, err
	}
	
	return &job, nil
}

// Admin settings queries
func (db *DB) GetAdminSetting(key string) (string, error) {
	var value string
	err := db.QueryRow("SELECT value FROM admin_settings WHERE key = $1", key).Scan(&value)
	return value, err
}

func (db *DB) SetAdminSetting(key, value string) error {
	_, err := db.Exec(`
		INSERT INTO admin_settings (id, key, value) 
		VALUES (gen_random_uuid(), $1, $2)
		ON CONFLICT (key) DO UPDATE SET value = $2, updated_at = NOW()`,
		key, value)
	return err
}

// Platform fee settings
func (db *DB) GetPlatformFeeSettings() (*models.PlatformFeeSettings, error) {
	query := `
		SELECT id, enabled, percentage, fixed_fee, minimum_fee, maximum_fee, created_at, updated_at
		FROM platform_fee_settings ORDER BY created_at DESC LIMIT 1`
	
	var settings models.PlatformFeeSettings
	err := db.QueryRow(query).Scan(
		&settings.ID, &settings.Enabled, &settings.Percentage, &settings.FixedFee,
		&settings.MinimumFee, &settings.MaximumFee, &settings.CreatedAt, &settings.UpdatedAt,
	)
	
	if err != nil {
		return nil, err
	}
	
	return &settings, nil
}

func (db *DB) UpdatePlatformFeeSettings(settings *models.PlatformFeeSettings) error {
	_, err := db.Exec(`
		INSERT INTO platform_fee_settings (id, enabled, percentage, fixed_fee, minimum_fee, maximum_fee)
		VALUES (gen_random_uuid(), $1, $2, $3, $4, $5)`,
		settings.Enabled, settings.Percentage, settings.FixedFee,
		settings.MinimumFee, settings.MaximumFee)
	return err
}
[V0_FILE]go:file="backend/database/migrations.go" isMerged="true"
package database

import (
	"log"
)

// RunMigrations executes database migrations
func (db *DB) RunMigrations() error {
	migrations := []string{
		createUsersTable,
		createCategoriesTable,
		createMicrojobsTable,
		createJobApplicationsTable,
		createMarketplaceItemsTable,
		createOrdersTable,
		createWalletsTable,
		createWalletTransactionsTable,
		createReviewsTable,
		createNotificationsTable,
		createReferralsTable,
		createReferralCodesTable,
		createChatsTable,
		createChatParticipantsTable,
		createMessagesTable,
		createMessageStatusTable,
		createChatSettingsTable,
		createAdminSettingsTable,
		createPlatformFeeSettingsTable,
		createAdminFeeSettingsTable,
		createSupportPricingSettingsTable,
		createSupportTicketsTable,
		createReservationViolationsTable,
		createUserFavoritesTable,
		createJobReservationsTable,
		createWorkProofsTable,
		createIndexes,
	}

for i, migration := range migrations {
		log.Printf("Running migration %d/%d", i+1, len(migrations))
		if _, err := db.Exec(migration); err != nil {
			log.Printf("Migration %d failed: %v", i+1, err)
			return err
		}
	}

log.Println("All migrations completed successfully")
	return nil
}

const createUsersTable = `
CREATE TABLE IF NOT EXISTS users (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    email VARCHAR(255) UNIQUE NOT NULL,
    password_hash VARCHAR(255) NOT NULL,
    first_name VARCHAR(100) NOT NULL,
    last_name VARCHAR(100) NOT NULL,
    username VARCHAR(50) UNIQUE NOT NULL,
    phone VARCHAR(20),
    avatar_url TEXT,
    bio TEXT,
    location VARCHAR(255),
    skills TEXT[] DEFAULT '{}',
    rating DECIMAL(3,2) DEFAULT 0.00,
    total_reviews INTEGER DEFAULT 0,
    is_verified BOOLEAN DEFAULT FALSE,
    is_active BOOLEAN DEFAULT TRUE,
    user_type VARCHAR(20) DEFAULT 'user',
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);`

const createCategoriesTable = `
CREATE TABLE IF NOT EXISTS categories (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    name VARCHAR(100) NOT NULL,
    slug VARCHAR(100) UNIQUE NOT NULL,
    description TEXT,
    icon VARCHAR(50),
    parent_id UUID REFERENCES categories(id),
    is_active BOOLEAN DEFAULT TRUE,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);`

const createMicrojobsTable = `
CREATE TABLE IF NOT EXISTS microjobs (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    category_id UUID NOT NULL REFERENCES categories(id),
    title VARCHAR(255) NOT NULL,
    description TEXT NOT NULL,
    requirements TEXT,
    budget_min DECIMAL(10,2),
    budget_max DECIMAL(10,2),
    deadline DATE,
    location VARCHAR(255),
    is_remote BOOLEAN DEFAULT FALSE,
    status VARCHAR(20) DEFAULT 'open',
    priority VARCHAR(10) DEFAULT 'normal',
    attachments TEXT[] DEFAULT '{}',
    skills_required TEXT[] DEFAULT '{}',
    applications_count INTEGER DEFAULT 0,
    views_count INTEGER DEFAULT 0,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);`

const createJobApplicationsTable = `
CREATE TABLE IF NOT EXISTS job_applications (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    job_id UUID NOT NULL REFERENCES microjobs(id) ON DELETE CASCADE,
    applicant_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    cover_letter TEXT,
    proposed_budget DECIMAL(10,2),
    estimated_duration VARCHAR(50),
    portfolio_links TEXT[] DEFAULT '{}',
    status VARCHAR(20) DEFAULT 'pending',
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    UNIQUE(job_id, applicant_id)
);`

const createMarketplaceItemsTable = `
CREATE TABLE IF NOT EXISTS marketplace_items (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    seller_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    category_id UUID NOT NULL REFERENCES categories(id),
    title VARCHAR(255) NOT NULL,
    description TEXT NOT NULL,
    short_description VARCHAR(500),
    price DECIMAL(10,2) NOT NULL,
    delivery_time INTEGER NOT NULL,
    revisions_included INTEGER DEFAULT 0,
    images TEXT[] DEFAULT '{}',
    tags TEXT[] DEFAULT '{}',
    requirements TEXT,
    status VARCHAR(20) DEFAULT 'active',
    rating DECIMAL(3,2) DEFAULT 0.00,
    total_orders INTEGER DEFAULT 0,
    views_count INTEGER DEFAULT 0,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);`

const createOrdersTable = `
CREATE TABLE IF NOT EXISTS orders (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    marketplace_item_id UUID NOT NULL REFERENCES marketplace_items(id),
    buyer_id UUID NOT NULL REFERENCES users(id),
    seller_id UUID NOT NULL REFERENCES users(id),
    amount DECIMAL(10,2) NOT NULL,
    status VARCHAR(20) DEFAULT 'pending',
    requirements_provided TEXT,
    delivery_date DATE,
    delivered_at TIMESTAMP WITH TIME ZONE,
    completed_at TIMESTAMP WITH TIME ZONE,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);`

const createWalletsTable = `
CREATE TABLE IF NOT EXISTS wallets (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    balance DECIMAL(12,2) DEFAULT 0.00,
    pending_balance DECIMAL(12,2) DEFAULT 0.00,
    total_earned DECIMAL(12,2) DEFAULT 0.00,
    total_spent DECIMAL(12,2) DEFAULT 0.00,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    UNIQUE(user_id)
);`

const createWalletTransactionsTable = `
CREATE TABLE IF NOT EXISTS wallet_transactions (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    wallet_id UUID NOT NULL REFERENCES wallets(id),
    type VARCHAR(20) NOT NULL,
    amount DECIMAL(12,2) NOT NULL,
    description TEXT,
    reference_id UUID,
    reference_type VARCHAR(50),
    status VARCHAR(20) DEFAULT 'completed',
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);`

const createReviewsTable = `
CREATE TABLE IF NOT EXISTS reviews (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    reviewer_id UUID NOT NULL REFERENCES users(id),
    reviewee_id UUID NOT NULL REFERENCES users(id),
    order_id UUID REFERENCES orders(id),
    job_id UUID REFERENCES microjobs(id),
    rating INTEGER NOT NULL CHECK (rating >= 1 AND rating <= 5),
    comment TEXT,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    UNIQUE(reviewer_id, order_id),
    UNIQUE(reviewer_id, job_id)
);`

const createNotificationsTable = `
CREATE TABLE IF NOT EXISTS notifications (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    title VARCHAR(255) NOT NULL,
    message TEXT NOT NULL,
    type VARCHAR(50) NOT NULL,
    reference_id UUID,
    reference_type VARCHAR(50),
    is_read BOOLEAN DEFAULT FALSE,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);`

const createReferralsTable = `
CREATE TABLE IF NOT EXISTS referrals (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    referrer_id UUID NOT NULL REFERENCES users(id),
    referred_id UUID NOT NULL REFERENCES users(id),
    referral_code VARCHAR(20) NOT NULL,
    status VARCHAR(20) DEFAULT 'pending',
    reward_amount DECIMAL(10,2) DEFAULT 0.00,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    UNIQUE(referrer_id, referred_id)
);`

const createReferralCodesTable = `
CREATE TABLE IF NOT EXISTS referral_codes (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    code VARCHAR(20) UNIQUE NOT NULL,
    uses_count INTEGER DEFAULT 0,
    max_uses INTEGER DEFAULT 100,
    is_active BOOLEAN DEFAULT TRUE,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    UNIQUE(user_id)
);`

const createChatsTable = `
CREATE TABLE IF NOT EXISTS chats (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    type VARCHAR(20) NOT NULL CHECK (type IN ('direct', 'order', 'admin_support')),
    title VARCHAR(255),
    order_id UUID REFERENCES orders(id) ON DELETE CASCADE,
    job_id UUID REFERENCES microjobs(id) ON DELETE CASCADE,
    marketplace_item_id UUID REFERENCES marketplace_items(id) ON DELETE CASCADE,
    created_by UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    is_active BOOLEAN DEFAULT true,
    last_message_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);`

const createChatParticipantsTable = `
CREATE TABLE IF NOT EXISTS chat_participants (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    chat_id UUID NOT NULL REFERENCES chats(id) ON DELETE CASCADE,
    user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    role VARCHAR(20) DEFAULT 'participant' CHECK (role IN ('participant', 'admin', 'moderator')),
    joined_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
    left_at TIMESTAMP WITH TIME ZONE,
    is_active BOOLEAN DEFAULT true,
    UNIQUE(chat_id, user_id)
);`

const createMessagesTable = `
CREATE TABLE IF NOT EXISTS messages (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    chat_id UUID NOT NULL REFERENCES chats(id) ON DELETE CASCADE,
    sender_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    message_type VARCHAR(20) DEFAULT 'text' CHECK (message_type IN ('text', 'image', 'file', 'system')),
    content TEXT NOT NULL,
    file_url VARCHAR(500),
    file_name VARCHAR(255),
    file_size INTEGER,
    reply_to_id UUID REFERENCES messages(id) ON DELETE SET NULL,
    is_edited BOOLEAN DEFAULT false,
    edited_at TIMESTAMP WITH TIME ZONE,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);`

const createMessageStatusTable = `
CREATE TABLE IF NOT EXISTS message_status (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    message_id UUID NOT NULL REFERENCES messages(id) ON DELETE CASCADE,
    user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    status VARCHAR(20) DEFAULT 'sent' CHECK (status IN ('sent', 'delivered', 'read')),
    read_at TIMESTAMP WITH TIME ZONE,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
    UNIQUE(message_id, user_id)
);`

const createChatSettingsTable = `
CREATE TABLE IF NOT EXISTS chat_settings (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    chat_id UUID NOT NULL REFERENCES chats(id) ON DELETE CASCADE,
    notifications_enabled BOOLEAN DEFAULT true,
    muted_until TIMESTAMP WITH TIME ZONE,
    custom_name VARCHAR(255),
    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
    UNIQUE(user_id, chat_id)
);`

const createAdminSettingsTable = `
CREATE TABLE IF NOT EXISTS admin_settings (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    key VARCHAR(100) UNIQUE NOT NULL,
    value TEXT NOT NULL,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);`

const createPlatformFeeSettingsTable = `
CREATE TABLE IF NOT EXISTS platform_fee_settings (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    enabled BOOLEAN DEFAULT TRUE,
    percentage DECIMAL(5,2) DEFAULT 5.00,
    fixed_fee DECIMAL(10,2) DEFAULT 0.00,
    minimum_fee DECIMAL(10,2) DEFAULT 0.00,
    maximum_fee DECIMAL(10,2) DEFAULT 0.00,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);`

const createAdminFeeSettingsTable = `
CREATE TABLE IF NOT EXISTS admin_fee_settings (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    fee_type VARCHAR(50) UNIQUE NOT NULL,
    fee_percentage DECIMAL(5,2) DEFAULT 0.00,
    fee_fixed DECIMAL(10,2) DEFAULT 0.00,
    minimum_fee DECIMAL(10,2) DEFAULT 0.00,
    maximum_fee DECIMAL(10,2),
    is_active BOOLEAN DEFAULT TRUE,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);`

const createSupportPricingSettingsTable = `
CREATE TABLE IF NOT EXISTS support_pricing_settings (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    support_type VARCHAR(20) NOT NULL UNIQUE,
    price DECIMAL(10,2) NOT NULL DEFAULT 0.00,
    response_time_hours INTEGER NOT NULL DEFAULT 24,
    description TEXT,
    is_active BOOLEAN DEFAULT TRUE,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);`

const createSupportTicketsTable = `
CREATE TABLE IF NOT EXISTS support_tickets (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    chat_id UUID REFERENCES chats(id) ON DELETE SET NULL,
    ticket_type VARCHAR(20) NOT NULL,
    subject VARCHAR(255) NOT NULL,
    description TEXT NOT NULL,
    priority VARCHAR(20) DEFAULT 'normal',
    status VARCHAR(20) DEFAULT 'open',
    payment_amount DECIMAL(10,2) DEFAULT 0.00,
    response_time_hours INTEGER DEFAULT 24,
    payment_transaction_id VARCHAR(255),
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);`

const createReservationViolationsTable = `
CREATE TABLE IF NOT EXISTS reservation_violations (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    violation_count INTEGER DEFAULT 1,
    last_violation_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    total_reservations INTEGER DEFAULT 0,
    expired_reservations INTEGER DEFAULT 0,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    UNIQUE(user_id)
);`

const createUserFavoritesTable = `
CREATE TABLE IF NOT EXISTS user_favorites (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    job_id UUID NOT NULL REFERENCES microjobs(id) ON DELETE CASCADE,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    UNIQUE(user_id, job_id)
);`

const createJobReservationsTable = `
CREATE TABLE IF NOT EXISTS job_reservations (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    job_id UUID NOT NULL REFERENCES microjobs(id) ON DELETE CASCADE,
    user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    status VARCHAR(20) DEFAULT 'active',
    expires_at TIMESTAMP WITH TIME ZONE NOT NULL,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);`

const createWorkProofsTable = `
CREATE TABLE IF NOT EXISTS work_proofs (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    job_id UUID NOT NULL REFERENCES microjobs(id) ON DELETE CASCADE,
    worker_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    application_id UUID NOT NULL REFERENCES job_applications(id) ON DELETE CASCADE,
    title VARCHAR(255) NOT NULL,
    description TEXT NOT NULL,
    status VARCHAR(20) DEFAULT 'pending',
    payment_amount DECIMAL(10,2) NOT NULL,
    review_notes TEXT,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    approved_at TIMESTAMP WITH TIME ZONE,
    rejected_at TIMESTAMP WITH TIME ZONE
);`

const createIndexes = `
CREATE INDEX IF NOT EXISTS idx_users_email ON users(email);
CREATE INDEX IF NOT EXISTS idx_users_username ON users(username);
CREATE INDEX IF NOT EXISTS idx_users_user_type ON users(user_type);
CREATE INDEX IF NOT EXISTS idx_microjobs_status ON microjobs(status);
CREATE INDEX IF NOT EXISTS idx_microjobs_category_id ON microjobs(category_id);
CREATE INDEX IF NOT EXISTS idx_microjobs_user_id ON microjobs(user_id);
CREATE INDEX IF NOT EXISTS idx_job_applications_job_id ON job_applications(job_id);
CREATE INDEX IF NOT EXISTS idx_job_applications_applicant_id ON job_applications(applicant_id);
CREATE INDEX IF NOT EXISTS idx_job_applications_status ON job_applications(status);
CREATE INDEX IF NOT EXISTS idx_wallets_user_id ON wallets(user_id);
CREATE INDEX IF NOT EXISTS idx_wallet_transactions_wallet_id ON wallet_transactions(wallet_id);
CREATE INDEX IF NOT EXISTS idx_notifications_user_id ON notifications(user_id);
CREATE INDEX IF NOT EXISTS idx_notifications_is_read ON notifications(is_read);
CREATE INDEX IF NOT EXISTS idx_messages_chat_id ON messages(chat_id);
CREATE INDEX IF NOT EXISTS idx_messages_sender_id ON messages(sender_id);
CREATE INDEX IF NOT EXISTS idx_work_proofs_job_id ON work_proofs(job_id);
CREATE INDEX IF NOT EXISTS idx_work_proofs_worker_id ON work_proofs(worker_id);
CREATE INDEX IF NOT EXISTS idx_work_proofs_status ON work_proofs(status);
CREATE INDEX IF NOT EXISTS idx_job_reservations_job_id ON job_reservations(job_id);
CREATE INDEX IF NOT EXISTS idx_job_reservations_user_id ON job_reservations(user_id);
CREATE INDEX IF NOT EXISTS idx_job_reservations_expires_at ON job_reservations(expires_at);
`
[V0_FILE]go:file="backend/handlers/auth.go" isMerged="true"
package handlers

import (
	"crypto/rand"
	"encoding/hex"
	"fmt"
	"regexp"
	"strings"
	"time"

"github.com/gofiber/fiber/v2"
	"github.com/google/uuid"
	"golang.org/x/crypto/bcrypt"

"microjob-backend/config"
	"microjob-backend/database"
	"microjob-backend/middleware"
	"microjob-backend/models"
)

type AuthHandler struct {
	db  *database.DB
	cfg *config.Config
}

func NewAuthHandler(db *database.DB, cfg *config.Config) *AuthHandler {
	return &AuthHandler{db: db, cfg: cfg}
}

type LoginResponse struct {
	Success bool         `json:"success"`
	User    *models.User `json:"user"`
	Token   string       `json:"token"`
	Message string       `json:"message"`
}

type RegisterResponse struct {
	Success bool         `json:"success"`
	User    *models.User `json:"user"`
	Token   string       `json:"token"`
	Message string       `json:"message"`
}

func (h *AuthHandler) Login(c *fiber.Ctx) error {
	var req models.LoginRequest
	if err := c.BodyParser(&req); err != nil {
		return c.Status(400).JSON(fiber.Map{
			"error": "Invalid request body",
		})
	}

// Validate input
	if req.Email == "" || req.Password == "" {
		return c.Status(400).JSON(fiber.Map{
			"error": "Email and password are required",
		})
	}

if !isValidEmail(req.Email) {
		return c.Status(400).JSON(fiber.Map{
			"error": "Invalid email format",
		})
	}

// Get user from database
	user, err := h.db.GetUserByEmail(req.Email)
	if err != nil {
		return c.Status(401).JSON(fiber.Map{
			"error": "Invalid email or password",
		})
	}

// Check if user is suspended
	if user.UserType == "suspended" {
		return c.Status(403).JSON(fiber.Map{
			"error": "Your account has been suspended",
		})
	}

if !user.IsActive {
		return c.Status(403).JSON(fiber.Map{
			"error": "Your account has been deactivated",
		})
	}

// Verify password
	if err := bcrypt.CompareHashAndPassword([]byte(user.PasswordHash), []byte(req.Password)); err != nil {
		return c.Status(401).JSON(fiber.Map{
			"error": "Invalid email or password",
		})
	}

// Generate JWT token
	token, err := middleware.GenerateJWT(user, h.cfg.JWTSecret)
	if err != nil {
		return c.Status(500).JSON(fiber.Map{
			"error": "Failed to generate token",
		})
	}

// Create wallet if it doesn't exist
	_, err = h.db.GetWalletByUserID(user.ID)
	if err != nil {
		wallet := &models.Wallet{
			ID:             uuid.New().String(),
			UserID:         user.ID,
			Balance:        0,
			PendingBalance: 0,
			TotalEarned:    0,
			TotalSpent:     0,
		}
		h.db.CreateWallet(wallet)
	}

// Remove password hash from response
	user.PasswordHash = ""

return c.JSON(LoginResponse{
		Success: true,
		User:    user,
		Token:   token,
		Message: "Login successful",
	})
}

func (h *AuthHandler) Register(c *fiber.Ctx) error {
	var req models.RegisterRequest
	if err := c.BodyParser(&req); err != nil {
		return c.Status(400).JSON(fiber.Map{
			"error": "Invalid request body",
		})
	}

// Validate input
	if err := h.validateRegistration(&req); err != nil {
		return c.Status(400).JSON(fiber.Map{
			"error": err.Error(),
		})
	}

// Check if user already exists
	existingUser, _ := h.db.GetUserByEmail(req.Email)
	if existingUser != nil {
		return c.Status(409).JSON(fiber.Map{
			"error": "An account with this email already exists",
		})
	}

// Hash password
	hashedPassword, err := bcrypt.GenerateFromPassword([]byte(req.Password), bcrypt.DefaultCost)
	if err != nil {
		return c.Status(500).JSON(fiber.Map{
			"error": "Failed to process password",
		})
	}

// Generate username if not provided
	username := req.Email
	if strings.Contains(username, "@") {
		username = strings.Split(username, "@")[0]
	}
	username = generateUniqueUsername(h.db, username)

// Create user
	user := &models.User{
		ID:           uuid.New().String(),
		Email:        req.Email,
		PasswordHash: string(hashedPassword),
		FirstName:    req.FirstName,
		LastName:     req.LastName,
		Username:     username,
		UserType:     req.UserType,
		IsVerified:   false,
		IsActive:     true,
		Skills:       models.JSONArray{},
		Rating:       0.0,
		TotalReviews: 0,
	}

if err := h.db.CreateUser(user); err != nil {
		return c.Status(500).JSON(fiber.Map{
			"error": "Failed to create user account",
		})
	}

// Create wallet for new user
	wallet := &models.Wallet{
		ID:             uuid.New().String(),
		UserID:         user.ID,
		Balance:        0,
		PendingBalance: 0,
		TotalEarned:    0,
		TotalSpent:     0,
	}
	h.db.CreateWallet(wallet)

// Generate JWT token
	token, err := middleware.GenerateJWT(user, h.cfg.JWTSecret)
	if err != nil {
		return c.Status(500).JSON(fiber.Map{
			"error": "Failed to generate token",
		})
	}

// Remove password hash from response
	user.PasswordHash = ""

return c.Status(201).JSON(RegisterResponse{
		Success: true,
		User:    user,
		Token:   token,
		Message: "Account created successfully",
	})
}

func (h *AuthHandler) GetReferrals(c *fiber.Ctx) error {
	user := c.Locals("user").(*models.AuthUser)

// Get user's referral code
	var referralCode string
	err := h.db.QueryRow("SELECT code FROM referral_codes WHERE user_id = $1", user.ID).Scan(&referralCode)
	if err != nil {
		referralCode = ""
	}

// Get referrals
	rows, err := h.db.Query(`
		SELECT r.id, r.status, r.created_at, u.id, u.first_name, u.last_name, u.email, u.location, u.created_at
		FROM referrals r
		JOIN users u ON r.referred_id = u.id
		WHERE r.referrer_id = $1
		ORDER BY r.created_at DESC`, user.ID)

if err != nil {
		return c.Status(500).JSON(fiber.Map{
			"error": "Failed to fetch referrals",
		})
	}
	defer rows.Close()

var referrals []map[string]interface{}
	totalReferrals := 0
	completedReferrals := 0
	pendingReferrals := 0

for rows.Next() {
		var referral struct {
			ID        string
			Status    string
			CreatedAt time.Time
			User      struct {
				ID        string
				FirstName string
				LastName  string
				Email     string
				Location  *string
				CreatedAt time.Time
			}
		}

err := rows.Scan(
			&referral.ID, &referral.Status, &referral.CreatedAt,
			&referral.User.ID, &referral.User.FirstName, &referral.User.LastName,
			&referral.User.Email, &referral.User.Location, &referral.User.CreatedAt,
		)
		if err != nil {
			continue
		}

totalReferrals++
		if referral.Status == "completed" {
			completedReferrals++
		} else {
			pendingReferrals++
		}

location := "Not specified"
		if referral.User.Location != nil {
			location = *referral.User.Location
		}

referralType := "Regular"
		if referral.Status == "completed" {
			referralType = "VIP"
		}

referrals = append(referrals, map[string]interface{}{
			"id":          referral.ID,
			"userId":      referral.User.ID,
			"fullName":    fmt.Sprintf("%s %s", referral.User.FirstName, referral.User.LastName),
			"email":       referral.User.Email,
			"country":     location,
			"joiningDate": referral.User.CreatedAt,
			"status":      referral.Status,
			"type":        referralType,
		})
	}

return c.JSON(fiber.Map{
		"referralCode": referralCode,
		"statistics": fiber.Map{
			"total":     totalReferrals,
			"completed": completedReferrals,
			"pending":   pendingReferrals,
			"vip":       completedReferrals,
		},
		"referrals": referrals,
	})
}

func (h *AuthHandler) GenerateReferralCode(c *fiber.Ctx) error {
	user := c.Locals("user").(*models.AuthUser)

// Check if user already has a referral code
	var existingCode string
	err := h.db.QueryRow("SELECT code FROM referral_codes WHERE user_id = $1", user.ID).Scan(&existingCode)
	if err == nil {
		return c.JSON(fiber.Map{
			"code": existingCode,
		})
	}

// Generate new referral code
	code := generateReferralCode()
	attempts := 0
	maxAttempts := 10

// Ensure code is unique
	for attempts < maxAttempts {
		var existing string
		err := h.db.QueryRow("SELECT code FROM referral_codes WHERE code = $1", code).Scan(&existing)
		if err != nil {
			// Code is unique
			break
		}
		code = generateReferralCode()
		attempts++
	}

if attempts >= maxAttempts {
		return c.Status(500).JSON(fiber.Map{
			"error": "Failed to generate unique referral code",
		})
	}

// Insert new referral code
	_, err = h.db.Exec(`
		INSERT INTO referral_codes (id, user_id, code, uses_count, max_uses, is_active)
		VALUES ($1, $2, $3, 0, 100, true)`,
		uuid.New().String(), user.ID, code)

if err != nil {
		return c.Status(500).JSON(fiber.Map{
			"error": "Failed to create referral code",
		})
	}

return c.JSON(fiber.Map{
		"code": code,
	})
}

// Helper functions
func (h *AuthHandler) validateRegistration(req *models.RegisterRequest) error {
	if req.Email == "" {
		return fmt.Errorf("email is required")
	}

if !isValidEmail(req.Email) {
		return fmt.Errorf("please enter a valid email address")
	}

if len(req.Password) < 8 {
		return fmt.Errorf("password must be at least 8 characters long")
	}

if !isValidPassword(req.Password) {
		return fmt.Errorf("password must contain at least one uppercase letter, one lowercase letter, and one number")
	}

if req.FirstName == "" {
		return fmt.Errorf("first name is required")
	}

if req.LastName == "" {
		return fmt.Errorf("last name is required")
	}

if req.UserType != "user" && req.UserType != "admin" {
		return fmt.Errorf("invalid user type")
	}

return nil
}

func isValidEmail(email string) bool {
	emailRegex := regexp.MustCompile(`^[^\s@]+@[^\s@]+\.[^\s@]+$`)
	return emailRegex.Test(email)
}

func isValidPassword(password string) bool {
	// At least 8 characters, one uppercase, one lowercase, one number
	passwordRegex := regexp.MustCompile(`^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$`)
	return passwordRegex.Test(password)
}

func generateUniqueUsername(db *database.DB, baseUsername string) string {
	username := baseUsername
	counter := 1

for {
		var existing string
		err := db.QueryRow("SELECT username FROM users WHERE username = $1", username).Scan(&existing)
		if err != nil {
			// Username is available
			break
		}
		username = fmt.Sprintf("%s%d", baseUsername, counter)
		counter++
	}

return username
}

func generateReferralCode() string {
	const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
	bytes := make([]byte, 4)
	rand.Read(bytes)
	
	result := make([]byte, 8)
	for i := 0; i < 8; i++ {
		result[i] = chars[bytes[i%4]%byte(len(chars))]
	}
	
	return string(result)
}
[V0_FILE]go:file="backend/middleware/auth.go" isMerged="true"
package middleware

import (
	"strings"
	"time"

"github.com/gofiber/fiber/v2"
	"github.com/golang-jwt/jwt/v5"

"microjob-backend/models"
)

type Claims struct {
	UserID   string `json:"user_id"`
	Email    string `json:"email"`
	UserType string `json:"user_type"`
	jwt.RegisteredClaims
}

func AuthMiddleware(jwtSecret string) fiber.Handler {
	return func(c *fiber.Ctx) error {
		authHeader := c.Get("Authorization")
		if authHeader == "" {
			return c.Status(401).JSON(fiber.Map{
				"error": "Authorization header required",
			})
		}

tokenString := strings.TrimPrefix(authHeader, "Bearer ")
		if tokenString == authHeader {
			return c.Status(401).JSON(fiber.Map{
				"error": "Invalid authorization format",
			})
		}

token, err := jwt.ParseWithClaims(tokenString, &Claims{}, func(token *jwt.Token) (interface{}, error) {
			return []byte(jwtSecret), nil
		})

if err != nil || !token.Valid {
			return c.Status(401).JSON(fiber.Map{
				"error": "Invalid token",
			})
		}

claims, ok := token.Claims.(*Claims)
		if !ok {
			return c.Status(401).JSON(fiber.Map{
				"error": "Invalid token claims",
			})
		}

// Store user info in context
		c.Locals("user", &models.AuthUser{
			ID:       claims.UserID,
			Email:    claims.Email,
			UserType: claims.UserType,
		})

return c.Next()
	}
}

func AdminMiddleware() fiber.Handler {
	return func(c *fiber.Ctx) error {
		user := c.Locals("user").(*models.AuthUser)
		if user.UserType != "admin" {
			return c.Status(403).JSON(fiber.Map{
				"error": "Admin access required",
			})
		}
		return c.Next()
	}
}

func CronAuthMiddleware(cronSecret string) fiber.Handler {
	return func(c *fiber.Ctx) error {
		authHeader := c.Get("Authorization")
		expectedAuth := "Bearer " + cronSecret

if authHeader != expectedAuth {
			return c.Status(401).JSON(fiber.Map{
				"error": "Unauthorized",
			})
		}

return c.Next()
	}
}

func GenerateJWT(user *models.User, jwtSecret string) (string, error) {
	claims := &Claims{
		UserID:   user.ID,
		Email:    user.Email,
		UserType: user.UserType,
		RegisteredClaims: jwt.RegisteredClaims{
			ExpiresAt: jwt.NewNumericDate(time.Now().Add(24 * time.Hour)),
			IssuedAt:  jwt.NewNumericDate(time.Now()),
		},
	}

token := jwt.NewWithClaims(jwt.SigningMethodHS256, claims)
	return token.SignedString([]byte(jwtSecret))
}

// Optional middleware for endpoints that can work with or without auth
func OptionalAuthMiddleware(jwtSecret string) fiber.Handler {
	return func(c *fiber.Ctx) error {
		authHeader := c.Get("Authorization")
		if authHeader == "" {
			// No auth header, continue without user context
			return c.Next()
		}

tokenString := strings.TrimPrefix(authHeader, "Bearer ")
		if tokenString == authHeader {
			// Invalid format, continue without user context
			return c.Next()
		}

token, err := jwt.ParseWithClaims(tokenString, &Claims{}, func(token *jwt.Token) (interface{}, error) {
			return []byte(jwtSecret), nil
		})

if err != nil || !token.Valid {
			// Invalid token, continue without user context
			return c.Next()
		}

claims, ok := token.Claims.(*Claims)
		if !ok {
			// Invalid claims, continue without user context
			return c.Next()
		}

// Store user info in context
		c.Locals("user", &models.AuthUser{
			ID:       claims.UserID,
			Email:    claims.Email,
			UserType: claims.UserType,
		})

return c.Next()
	}
}
[V0_FILE]go:file="backend/utils/validation.go" isMerged="true"
package utils

import (
	"regexp"
	"strings"
)

// Email validation
func IsValidEmail(email string) bool {
	emailRegex := regexp.MustCompile(`^[^\s@]+@[^\s@]+\.[^\s@]+$`)
	return emailRegex.Test(email)
}

// Password validation - at least 8 characters, one uppercase, one lowercase, one number
func IsValidPassword(password string) bool {
	if len(password) < 8 {
		return false
	}
	
	hasUpper := regexp.MustCompile(`[A-Z]`).MatchString(password)
	hasLower := regexp.MustCompile(`[a-z]`).MatchString(password)
	hasNumber := regexp.MustCompile(`\d`).MatchString(password)
	
	return hasUpper && hasLower && hasNumber
}

// Username validation - alphanumeric and underscores only, 3-30 characters
func IsValidUsername(username string) bool {
	if len(username) < 3 || len(username) > 30 {
		return false
	}
	
	usernameRegex := regexp.MustCompile(`^[a-zA-Z0-9_]+$`)
	return usernameRegex.Test(username)
}

// Sanitize input strings
func SanitizeString(input string) string {
	// Remove leading/trailing whitespace
	input = strings.TrimSpace(input)
	
	// Remove null bytes
	input = strings.ReplaceAll(input, "\x00", "")
	
	return input
}

// Validate required fields
func ValidateRequired(fields map[string]string) []string {
	var errors []string
	
	for fieldName, value := range fields {
		if strings.TrimSpace(value) == "" {
			errors = append(errors, fieldName+" is required")
		}
	}
	
	return errors
}

// Check if string contains only allowed characters
func ContainsOnlyAllowed(input string, allowedChars string) bool {
	for _, char := range input {
		if !strings.ContainsRune(allowedChars, char) {
			return false
		}
	}
	return true
}

// Validate string length
func ValidateLength(input string, min, max int) bool {
	length := len(input)
	return length >= min && length <= max
}
[V0_FILE]go:file="backend/database/auth_queries.go" isMerged="true"
package database

import (
	"database/sql"
	"fmt"

"microjob-backend/models"
)

// Authentication-related database queries

func (db *DB) GetUserByEmail(email string) (*models.User, error) {
	query := `
		SELECT id, email, password_hash, first_name, last_name, username, phone, 
		       avatar_url, bio, location, skills, rating, total_reviews, 
		       is_verified, is_active, user_type, created_at, updated_at
		FROM users WHERE email = $1 AND is_active = true`
	
	var user models.User
	err := db.QueryRow(query, email).Scan(
		&user.ID, &user.Email, &user.PasswordHash, &user.FirstName, &user.LastName,
		&user.Username, &user.Phone, &user.AvatarURL, &user.Bio, &user.Location,
		&user.Skills, &user.Rating, &user.TotalReviews, &user.IsVerified,
		&user.IsActive, &user.UserType, &user.CreatedAt, &user.UpdatedAt,
	)
	
	if err != nil {
		return nil, err
	}
	
	return &user, nil
}

func (db *DB) GetUserByUsername(username string) (*models.User, error) {
	query := `
		SELECT id, email, password_hash, first_name, last_name, username, phone, 
		       avatar_url, bio, location, skills, rating, total_reviews, 
		       is_verified, is_active, user_type, created_at, updated_at
		FROM users WHERE username = $1 AND is_active = true`
	
	var user models.User
	err := db.QueryRow(query, username).Scan(
		&user.ID, &user.Email, &user.PasswordHash, &user.FirstName, &user.LastName,
		&user.Username, &user.Phone, &user.AvatarURL, &user.Bio, &user.Location,
		&user.Skills, &user.Rating, &user.TotalReviews, &user.IsVerified,
		&user.IsActive, &user.UserType, &user.CreatedAt, &user.UpdatedAt,
	)
	
	if err != nil {
		return nil, err
	}
	
	return &user, nil
}

func (db *DB) CreateUser(user *models.User) error {
	query := `
		INSERT INTO users (id, email, password_hash, first_name, last_name, username, user_type, skills)
		VALUES ($1, $2, $3, $4, $5, $6, $7, $8)
		RETURNING created_at, updated_at`
	
	return db.QueryRow(query, user.ID, user.Email, user.PasswordHash, 
		user.FirstName, user.LastName, user.Username, user.UserType, user.Skills).Scan(
		&user.CreatedAt, &user.UpdatedAt)
}

func (db *DB) UpdateUser(userID string, updates map[string]interface{}) error {
	if len(updates) == 0 {
		return fmt.Errorf("no updates provided")
	}

// Build dynamic query
	setParts := []string{}
	args := []interface{}{}
	argIndex := 1

for field, value := range updates {
		setParts = append(setParts, fmt.Sprintf("%s = $%d", field, argIndex))
		args = append(args, value)
		argIndex++
	}

// Add updated_at
	setParts = append(setParts, fmt.Sprintf("updated_at = NOW()"))
	
	// Add WHERE clause
	args = append(args, userID)
	whereClause := fmt.Sprintf("WHERE id = $%d", argIndex)

query := fmt.Sprintf("UPDATE users SET %s %s", 
		fmt.Sprintf("%s", setParts), whereClause)

_, err := db.Exec(query, args...)
	return err
}

func (db *DB) SuspendUser(userID, reason, suspendedBy string) error {
	return db.WithTransaction(func(tx *sql.Tx) error {
		// Update user type to suspended
		_, err := tx.Exec(`
			UPDATE users 
			SET user_type = 'suspended', updated_at = NOW()
			WHERE id = $1`, userID)
		if err != nil {
			return err
		}

// Log suspension reason (you might want to create a separate table for this)
		_, err = tx.Exec(`
			INSERT INTO admin_settings (id, key, value)
			VALUES (gen_random_uuid(), $1, $2)`,
			fmt.Sprintf("suspension_%s", userID),
			fmt.Sprintf("reason:%s|by:%s|at:%s", reason, suspendedBy, "NOW()"))
		
		return err
	})
}

func (db *DB) ActivateUser(userID string) error {
	_, err := db.Exec(`
		UPDATE users 
		SET user_type = 'user', updated_at = NOW()
		WHERE id = $1`, userID)
	return err
}

func (db *DB) GetAllUsers(limit, offset int) ([]*models.User, error) {
	query := `
		SELECT id, email, first_name, last_name, username, phone, 
		       avatar_url, bio, location, skills, rating, total_reviews, 
		       is_verified, is_active, user_type, created_at, updated_at
		FROM users 
		ORDER BY created_at DESC
		LIMIT $1 OFFSET $2`
	
	rows, err := db.Query(query, limit, offset)
	if err != nil {
		return nil, err
	}
	defer rows.Close()

var users []*models.User
	for rows.Next() {
		var user models.User
		err := rows.Scan(
			&user.ID, &user.Email, &user.FirstName, &user.LastName,
			&user.Username, &user.Phone, &user.AvatarURL, &user.Bio, &user.Location,
			&user.Skills, &user.Rating, &user.TotalReviews, &user.IsVerified,
			&user.IsActive, &user.UserType, &user.CreatedAt, &user.UpdatedAt,
		)
		if err != nil {
			return nil, err
		}
		users = append(users, &user)
	}

return users, nil
}

func (db *DB) GetUserStats() (map[string]int, error) {
	stats := make(map[string]int)

// Total users
	err := db.QueryRow("SELECT COUNT(*) FROM users WHERE is_active = true").Scan(&stats["total"])
	if err != nil {
		return nil, err
	}

// Active users (not suspended)
	err = db.QueryRow("SELECT COUNT(*) FROM users WHERE is_active = true AND user_type != 'suspended'").Scan(&stats["active"])
	if err != nil {
		return nil, err
	}

// Suspended users
	err = db.QueryRow("SELECT COUNT(*) FROM users WHERE user_type = 'suspended'").Scan(&stats["suspended"])
	if err != nil {
		return nil, err
	}

// Verified users
	err = db.QueryRow("SELECT COUNT(*) FROM users WHERE is_verified = true AND is_active = true").Scan(&stats["verified"])
	if err != nil {
		return nil, err
	}

// Admin users
	err = db.QueryRow("SELECT COUNT(*) FROM users WHERE user_type = 'admin' AND is_active = true").Scan(&stats["admin"])
	if err != nil {
		return nil, err
	}

return stats, nil
}
[V0_FILE]go:file="backend/services/wallet.go" isMerged="true"
package services

import (
	"database/sql"
	"fmt"
	"time"

"github.com/google/uuid"
	"microjob-backend/database"
	"microjob-backend/models"
)

type WalletService struct {
	db *sql.DB
}

func NewWalletService(db *sql.DB) *WalletService {
	return &WalletService{db: db}
}

func (ws *WalletService) GetWalletByUserID(userID string) (*models.Wallet, error) {
	query := `
		SELECT id, user_id, balance, pending_balance, total_earned, total_spent, 
			   created_at, updated_at 
		FROM wallets 
		WHERE user_id = $1`
	
	var wallet models.Wallet
	err := ws.db.QueryRow(query, userID).Scan(
		&wallet.ID, &wallet.UserID, &wallet.Balance, &wallet.PendingBalance,
		&wallet.TotalEarned, &wallet.TotalSpent, &wallet.CreatedAt, &wallet.UpdatedAt,
	)
	
	if err == sql.ErrNoRows {
		// Create wallet if it doesn't exist
		return ws.CreateWallet(userID)
	}
	
	return &wallet, err
}

func (ws *WalletService) CreateWallet(userID string) (*models.Wallet, error) {
	wallet := &models.Wallet{
		ID:             uuid.New().String(),
		UserID:         userID,
		Balance:        0,
		PendingBalance: 0,
		TotalEarned:    0,
		TotalSpent:     0,
		CreatedAt:      time.Now(),
		UpdatedAt:      time.Now(),
	}
	
	query := `
		INSERT INTO wallets (id, user_id, balance, pending_balance, total_earned, total_spent, created_at, updated_at)
		VALUES ($1, $2, $3, $4, $5, $6, $7, $8)`
	
	_, err := ws.db.Exec(query, wallet.ID, wallet.UserID, wallet.Balance, wallet.PendingBalance,
		wallet.TotalEarned, wallet.TotalSpent, wallet.CreatedAt, wallet.UpdatedAt)
	
	return wallet, err
}

func (ws *WalletService) AddTransaction(transaction *models.WalletTransaction) error {
	tx, err := ws.db.Begin()
	if err != nil {
		return err
	}
	defer tx.Rollback()

// Insert transaction
	transactionQuery := `
		INSERT INTO wallet_transactions (id, user_id, type, amount, description, reference_id, 
			reference_type, balance_type, status, created_at, updated_at)
		VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11)`
	
	_, err = tx.Exec(transactionQuery, transaction.ID, transaction.UserID, transaction.Type,
		transaction.Amount, transaction.Description, transaction.ReferenceID, transaction.ReferenceType,
		transaction.BalanceType, transaction.Status, transaction.CreatedAt, transaction.UpdatedAt)
	
	if err != nil {
		return err
	}

// Update wallet balance
	var updateQuery string
	switch transaction.Type {
	case "deposit", "earning", "refund":
		if transaction.BalanceType == "pending" {
			updateQuery = `UPDATE wallets SET pending_balance = pending_balance + $1, updated_at = $2 WHERE user_id = $3`
		} else {
			updateQuery = `UPDATE wallets SET balance = balance + $1, total_earned = total_earned + $1, updated_at = $2 WHERE user_id = $3`
		}
	case "withdrawal", "payment", "fee":
		if transaction.BalanceType == "pending" {
			updateQuery = `UPDATE wallets SET pending_balance = pending_balance - $1, updated_at = $2 WHERE user_id = $3`
		} else {
			updateQuery = `UPDATE wallets SET balance = balance - $1, total_spent = total_spent + $1, updated_at = $2 WHERE user_id = $3`
		}
	case "transfer_pending_to_available":
		// Move from pending to available balance
		_, err = tx.Exec(`UPDATE wallets SET pending_balance = pending_balance - $1, balance = balance + $1, updated_at = $2 WHERE user_id = $3`,
			transaction.Amount, time.Now(), transaction.UserID)
		if err != nil {
			return err
		}
		return tx.Commit()
	}

_, err = tx.Exec(updateQuery, transaction.Amount, time.Now(), transaction.UserID)
	if err != nil {
		return err
	}

return tx.Commit()
}

func (ws *WalletService) GetTransactionsByUserID(userID string, limit, offset int) ([]models.WalletTransaction, error) {
	query := `
		SELECT id, user_id, type, amount, description, reference_id, reference_type, 
			   balance_type, status, created_at, updated_at
		FROM wallet_transactions 
		WHERE user_id = $1 
		ORDER BY created_at DESC 
		LIMIT $2 OFFSET $3`
	
	rows, err := ws.db.Query(query, userID, limit, offset)
	if err != nil {
		return nil, err
	}
	defer rows.Close()

var transactions []models.WalletTransaction
	for rows.Next() {
		var transaction models.WalletTransaction
		err := rows.Scan(&transaction.ID, &transaction.UserID, &transaction.Type, &transaction.Amount,
			&transaction.Description, &transaction.ReferenceID, &transaction.ReferenceType,
			&transaction.BalanceType, &transaction.Status, &transaction.CreatedAt, &transaction.UpdatedAt)
		if err != nil {
			return nil, err
		}
		transactions = append(transactions, transaction)
	}

return transactions, nil
}

func (ws *WalletService) ProcessPayment(payerID, payeeID string, amount float64, description, referenceID, referenceType string) error {
	tx, err := ws.db.Begin()
	if err != nil {
		return err
	}
	defer tx.Rollback()

// Check payer balance
	var payerBalance float64
	err = tx.QueryRow("SELECT balance FROM wallets WHERE user_id = $1", payerID).Scan(&payerBalance)
	if err != nil {
		return fmt.Errorf("failed to get payer balance: %w", err)
	}

if payerBalance < amount {
		return fmt.Errorf("insufficient balance")
	}

// Create payment transaction for payer
	paymentTransaction := &models.WalletTransaction{
		ID:            uuid.New().String(),
		UserID:        payerID,
		Type:          "payment",
		Amount:        amount,
		Description:   description,
		ReferenceID:   &referenceID,
		ReferenceType: &referenceType,
		BalanceType:   "deposit",
		Status:        "completed",
		CreatedAt:     time.Now(),
		UpdatedAt:     time.Now(),
	}

// Create earning transaction for payee
	earningTransaction := &models.WalletTransaction{
		ID:            uuid.New().String(),
		UserID:        payeeID,
		Type:          "earning",
		Amount:        amount,
		Description:   description,
		ReferenceID:   &referenceID,
		ReferenceType: &referenceType,
		BalanceType:   "pending", // Earnings go to pending first
		Status:        "completed",
		CreatedAt:     time.Now(),
		UpdatedAt:     time.Now(),
	}

// Insert both transactions
	transactionQuery := `
		INSERT INTO wallet_transactions (id, user_id, type, amount, description, reference_id, 
			reference_type, balance_type, status, created_at, updated_at)
		VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11)`

_, err = tx.Exec(transactionQuery, paymentTransaction.ID, paymentTransaction.UserID, paymentTransaction.Type,
		paymentTransaction.Amount, paymentTransaction.Description, paymentTransaction.ReferenceID,
		paymentTransaction.ReferenceType, paymentTransaction.BalanceType, paymentTransaction.Status,
		paymentTransaction.CreatedAt, paymentTransaction.UpdatedAt)
	if err != nil {
		return err
	}

_, err = tx.Exec(transactionQuery, earningTransaction.ID, earningTransaction.UserID, earningTransaction.Type,
		earningTransaction.Amount, earningTransaction.Description, earningTransaction.ReferenceID,
		earningTransaction.ReferenceType, earningTransaction.BalanceType, earningTransaction.Status,
		earningTransaction.CreatedAt, earningTransaction.UpdatedAt)
	if err != nil {
		return err
	}

// Update balances
	_, err = tx.Exec("UPDATE wallets SET balance = balance - $1, total_spent = total_spent + $1, updated_at = $2 WHERE user_id = $3",
		amount, time.Now(), payerID)
	if err != nil {
		return err
	}

_, err = tx.Exec("UPDATE wallets SET pending_balance = pending_balance + $1, total_earned = total_earned + $1, updated_at = $2 WHERE user_id = $3",
		amount, time.Now(), payeeID)
	if err != nil {
		return err
	}

return tx.Commit()
}
[V0_FILE]go:file="backend/services/job.go" isMerged="true"
package services

import (
	"database/sql"
	"fmt"
	"time"

"github.com/google/uuid"
	"microjob-backend/models"
)

type JobService struct {
	db *sql.DB
}

func NewJobService(db *sql.DB) *JobService {
	return &JobService{db: db}
}

func (js *JobService) CreateJob(job *models.Job) error {
	query := `
		INSERT INTO jobs (id, user_id, title, description, category_id, subcategory_id, 
			budget_min, budget_max, deadline, status, approval_type, instant_approval_enabled,
			manual_approval_days, created_at, updated_at)
		VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15)`
	
	_, err := js.db.Exec(query, job.ID, job.UserID, job.Title, job.Description, job.CategoryID,
		job.SubcategoryID, job.BudgetMin, job.BudgetMax, job.Deadline, job.Status,
		job.ApprovalType, job.InstantApprovalEnabled, job.ManualApprovalDays,
		job.CreatedAt, job.UpdatedAt)
	
	return err
}

func (js *JobService) GetJobByID(jobID string) (*models.Job, error) {
	query := `
		SELECT j.id, j.user_id, j.title, j.description, j.category_id, j.subcategory_id,
			   j.budget_min, j.budget_max, j.deadline, j.status, j.approval_type,
			   j.instant_approval_enabled, j.manual_approval_days, j.created_at, j.updated_at,
			   u.first_name, u.last_name, u.username, u.avatar
		FROM jobs j
		LEFT JOIN users u ON j.user_id = u.id
		WHERE j.id = $1`
	
	var job models.Job
	var user models.User
	err := js.db.QueryRow(query, jobID).Scan(
		&job.ID, &job.UserID, &job.Title, &job.Description, &job.CategoryID, &job.SubcategoryID,
		&job.BudgetMin, &job.BudgetMax, &job.Deadline, &job.Status, &job.ApprovalType,
		&job.InstantApprovalEnabled, &job.ManualApprovalDays, &job.CreatedAt, &job.UpdatedAt,
		&user.FirstName, &user.LastName, &user.Username, &user.Avatar,
	)
	
	if err != nil {
		return nil, err
	}
	
	job.User = &user
	return &job, nil
}

func (js *JobService) GetJobsByUserID(userID string, status string, limit, offset int) ([]models.Job, error) {
	query := `
		SELECT id, user_id, title, description, category_id, subcategory_id,
			   budget_min, budget_max, deadline, status, approval_type,
			   instant_approval_enabled, manual_approval_days, created_at, updated_at
		FROM jobs 
		WHERE user_id = $1`
	
	args := []interface{}{userID}
	argCount := 1
	
	if status != "" {
		argCount++
		query += fmt.Sprintf(" AND status = $%d", argCount)
		args = append(args, status)
	}
	
	query += " ORDER BY created_at DESC"
	
	if limit > 0 {
		argCount++
		query += fmt.Sprintf(" LIMIT $%d", argCount)
		args = append(args, limit)
		
		if offset > 0 {
			argCount++
			query += fmt.Sprintf(" OFFSET $%d", argCount)
			args = append(args, offset)
		}
	}
	
	rows, err := js.db.Query(query, args...)
	if err != nil {
		return nil, err
	}
	defer rows.Close()

var jobs []models.Job
	for rows.Next() {
		var job models.Job
		err := rows.Scan(&job.ID, &job.UserID, &job.Title, &job.Description, &job.CategoryID,
			&job.SubcategoryID, &job.BudgetMin, &job.BudgetMax, &job.Deadline, &job.Status,
			&job.ApprovalType, &job.InstantApprovalEnabled, &job.ManualApprovalDays,
			&job.CreatedAt, &job.UpdatedAt)
		if err != nil {
			return nil, err
		}
		jobs = append(jobs, job)
	}

return jobs, nil
}

func (js *JobService) CreateApplication(application *models.JobApplication) error {
	query := `
		INSERT INTO job_applications (id, job_id, applicant_id, cover_letter, proposed_budget,
			estimated_completion, status, created_at, updated_at)
		VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9)`
	
	_, err := js.db.Exec(query, application.ID, application.JobID, application.ApplicantID,
		application.CoverLetter, application.ProposedBudget, application.EstimatedCompletion,
		application.Status, application.CreatedAt, application.UpdatedAt)
	
	return err
}

func (js *JobService) GetApplicationsByJobID(jobID string) ([]models.JobApplication, error) {
	query := `
		SELECT ja.id, ja.job_id, ja.applicant_id, ja.cover_letter, ja.proposed_budget,
			   ja.estimated_completion, ja.status, ja.created_at, ja.updated_at,
			   u.first_name, u.last_name, u.username, u.avatar
		FROM job_applications ja
		LEFT JOIN users u ON ja.applicant_id = u.id
		WHERE ja.job_id = $1
		ORDER BY ja.created_at DESC`
	
	rows, err := js.db.Query(query, jobID)
	if err != nil {
		return nil, err
	}
	defer rows.Close()

var applications []models.JobApplication
	for rows.Next() {
		var application models.JobApplication
		var user models.User
		err := rows.Scan(&application.ID, &application.JobID, &application.ApplicantID,
			&application.CoverLetter, &application.ProposedBudget, &application.EstimatedCompletion,
			&application.Status, &application.CreatedAt, &application.UpdatedAt,
			&user.FirstName, &user.LastName, &user.Username, &user.Avatar)
		if err != nil {
			return nil, err
		}
		application.Applicant = &user
		applications = append(applications, application)
	}

return applications, nil
}

func (js *JobService) UpdateApplicationStatus(applicationID, status string) error {
	query := `UPDATE job_applications SET status = $1, updated_at = $2 WHERE id = $3`
	_, err := js.db.Exec(query, status, time.Now(), applicationID)
	return err
}

func (js *JobService) UpdateJobStatus(jobID, status string) error {
	query := `UPDATE jobs SET status = $1, updated_at = $2 WHERE id = $3`
	_, err := js.db.Exec(query, status, time.Now(), jobID)
	return err
}
[V0_FILE]go:file="backend/services/workproof.go" isMerged="true"
package services

import (
	"database/sql"
	"encoding/json"
	"fmt"
	"time"

"github.com/google/uuid"
	"microjob-backend/models"
)

type WorkProofService struct {
	db *sql.DB
}

func NewWorkProofService(db *sql.DB) *WorkProofService {
	return &WorkProofService{db: db}
}

func (wps *WorkProofService) CreateWorkProof(workProof *models.WorkProof) error {
	// Convert file arrays to JSON
	proofFilesJSON, _ := json.Marshal(workProof.ProofFiles)
	proofLinksJSON, _ := json.Marshal(workProof.ProofLinks)
	screenshotsJSON, _ := json.Marshal(workProof.Screenshots)
	attachmentsJSON, _ := json.Marshal(workProof.Attachments)

query := `
		INSERT INTO work_proofs (id, job_id, application_id, worker_id, employer_id, title,
			description, submission_text, proof_files, proof_links, screenshots, attachments,
			status, submitted_at, payment_amount, submission_number, created_at, updated_at)
		VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15, $16, $17, $18)`
	
	_, err := wps.db.Exec(query, workProof.ID, workProof.JobID, workProof.ApplicationID,
		workProof.WorkerID, workProof.EmployerID, workProof.Title, workProof.Description,
		workProof.SubmissionText, proofFilesJSON, proofLinksJSON, screenshotsJSON, attachmentsJSON,
		workProof.Status, workProof.SubmittedAt, workProof.PaymentAmount, workProof.SubmissionNumber,
		workProof.CreatedAt, workProof.UpdatedAt)
	
	return err
}

func (wps *WorkProofService) GetWorkProofByID(proofID string) (*models.WorkProof, error) {
	query := `
		SELECT wp.id, wp.job_id, wp.application_id, wp.worker_id, wp.employer_id, wp.title,
			   wp.description, wp.submission_text, wp.proof_files, wp.proof_links, wp.screenshots,
			   wp.attachments, wp.status, wp.submitted_at, wp.reviewed_at, wp.review_feedback,
			   wp.payment_amount, wp.submission_number, wp.revision_count, wp.revision_deadline,
			   wp.rejection_deadline, wp.worker_response, wp.worker_response_at, wp.dispute_reason,
			   wp.dispute_evidence, wp.dispute_requested_action, wp.created_at, wp.updated_at,
			   u1.first_name, u1.last_name, u1.username, u1.avatar,
			   u2.first_name, u2.last_name, u2.username, u2.avatar
		FROM work_proofs wp
		LEFT JOIN users u1 ON wp.worker_id = u1.id
		LEFT JOIN users u2 ON wp.employer_id = u2.id
		WHERE wp.id = $1`
	
	var workProof models.WorkProof
	var worker, employer models.User
	var proofFilesJSON, proofLinksJSON, screenshotsJSON, attachmentsJSON []byte
	
	err := wps.db.QueryRow(query, proofID).Scan(
		&workProof.ID, &workProof.JobID, &workProof.ApplicationID, &workProof.WorkerID,
		&workProof.EmployerID, &workProof.Title, &workProof.Description, &workProof.SubmissionText,
		&proofFilesJSON, &proofLinksJSON, &screenshotsJSON, &attachmentsJSON,
		&workProof.Status, &workProof.SubmittedAt, &workProof.ReviewedAt, &workProof.ReviewFeedback,
		&workProof.PaymentAmount, &workProof.SubmissionNumber, &workProof.RevisionCount,
		&workProof.RevisionDeadline, &workProof.RejectionDeadline, &workProof.WorkerResponse,
		&workProof.WorkerResponseAt, &workProof.DisputeReason, &workProof.DisputeEvidence,
		&workProof.DisputeRequestedAction, &workProof.CreatedAt, &workProof.UpdatedAt,
		&worker.FirstName, &worker.LastName, &worker.Username, &worker.Avatar,
		&employer.FirstName, &employer.LastName, &employer.Username, &employer.Avatar,
	)
	
	if err != nil {
		return nil, err
	}

// Parse JSON arrays
	json.Unmarshal(proofFilesJSON, &workProof.ProofFiles)
	json.Unmarshal(proofLinksJSON, &workProof.ProofLinks)
	json.Unmarshal(screenshotsJSON, &workProof.Screenshots)
	json.Unmarshal(attachmentsJSON, &workProof.Attachments)

workProof.Worker = &worker
	workProof.Employer = &employer
	
	return &workProof, nil
}

func (wps *WorkProofService) ApproveWorkProof(proofID, reviewNotes string, walletService *WalletService) error {
	tx, err := wps.db.Begin()
	if err != nil {
		return err
	}
	defer tx.Rollback()

// Get work proof details
	workProof, err := wps.GetWorkProofByID(proofID)
	if err != nil {
		return err
	}

// Update work proof status
	query := `
		UPDATE work_proofs 
		SET status = 'approved', reviewed_at = $1, review_feedback = $2, updated_at = $1
		WHERE id = $3`
	
	_, err = tx.Exec(query, time.Now(), reviewNotes, proofID)
	if err != nil {
		return err
	}

// Process payment from employer to worker
	err = walletService.ProcessPayment(
		workProof.EmployerID,
		workProof.WorkerID,
		workProof.PaymentAmount,
		fmt.Sprintf("Payment for approved work: %s", workProof.Title),
		proofID,
		"work_proof_payment",
	)
	if err != nil {
		return err
	}

return tx.Commit()
}

func (wps *WorkProofService) RejectWorkProof(proofID, rejectionReason string, timeoutHours int) error {
	rejectionDeadline := time.Now().Add(time.Duration(timeoutHours) * time.Hour)
	
	query := `
		UPDATE work_proofs 
		SET status = 'rejected', reviewed_at = $1, review_feedback = $2, 
			rejection_deadline = $3, updated_at = $1
		WHERE id = $4`
	
	_, err := wps.db.Exec(query, time.Now(), rejectionReason, rejectionDeadline, proofID)
	return err
}

func (wps *WorkProofService) RequestRevision(proofID, revisionNotes string, timeoutHours int) error {
	revisionDeadline := time.Now().Add(time.Duration(timeoutHours) * time.Hour)
	
	query := `
		UPDATE work_proofs 
		SET status = 'revision_requested', reviewed_at = $1, review_feedback = $2,
			revision_deadline = $3, revision_count = COALESCE(revision_count, 0) + 1, updated_at = $1
		WHERE id = $4`
	
	_, err := wps.db.Exec(query, time.Now(), revisionNotes, revisionDeadline, proofID)
	return err
}

func (wps *WorkProofService) GetWorkProofsByJobID(jobID string) ([]models.WorkProof, error) {
	query := `
		SELECT wp.id, wp.job_id, wp.application_id, wp.worker_id, wp.employer_id, wp.title,
			   wp.description, wp.submission_text, wp.proof_files, wp.proof_links, wp.screenshots,
			   wp.attachments, wp.status, wp.submitted_at, wp.reviewed_at, wp.review_feedback,
			   wp.payment_amount, wp.submission_number, wp.created_at, wp.updated_at,
			   u.first_name, u.last_name, u.username, u.avatar
		FROM work_proofs wp
		LEFT JOIN users u ON wp.worker_id = u.id
		WHERE wp.job_id = $1
		ORDER BY wp.created_at DESC`
	
	rows, err := wps.db.Query(query, jobID)
	if err != nil {
		return nil, err
	}
	defer rows.Close()

var workProofs []models.WorkProof
	for rows.Next() {
		var workProof models.WorkProof
		var worker models.User
		var proofFilesJSON, proofLinksJSON, screenshotsJSON, attachmentsJSON []byte
		
		err := rows.Scan(&workProof.ID, &workProof.JobID, &workProof.ApplicationID,
			&workProof.WorkerID, &workProof.EmployerID, &workProof.Title, &workProof.Description,
			&workProof.SubmissionText, &proofFilesJSON, &proofLinksJSON, &screenshotsJSON,
			&attachmentsJSON, &workProof.Status, &workProof.SubmittedAt, &workProof.ReviewedAt,
			&workProof.ReviewFeedback, &workProof.PaymentAmount, &workProof.SubmissionNumber,
			&workProof.CreatedAt, &workProof.UpdatedAt,
			&worker.FirstName, &worker.LastName, &worker.Username, &worker.Avatar)
		
		if err != nil {
			return nil, err
		}

// Parse JSON arrays
		json.Unmarshal(proofFilesJSON, &workProof.ProofFiles)
		json.Unmarshal(proofLinksJSON, &workProof.ProofLinks)
		json.Unmarshal(screenshotsJSON, &workProof.Screenshots)
		json.Unmarshal(attachmentsJSON, &workProof.Attachments)

workProof.Worker = &worker
		workProofs = append(workProofs, workProof)
	}

return workProofs, nil
}

func (wps *WorkProofService) ProcessExpiredDeadlines(walletService *WalletService) (int, error) {
	now := time.Now()
	processedCount := 0

// Auto-approve expired submitted work proofs
	query := `
		SELECT wp.id, wp.job_id, wp.submitted_at, j.manual_approval_days
		FROM work_proofs wp
		JOIN jobs j ON wp.job_id = j.id
		WHERE wp.status = 'submitted' AND j.approval_type = 'manual'`
	
	rows, err := wps.db.Query(query)
	if err != nil {
		return 0, err
	}
	defer rows.Close()

for rows.Next() {
		var proofID, jobID string
		var submittedAt time.Time
		var approvalDays int
		
		err := rows.Scan(&proofID, &jobID, &submittedAt, &approvalDays)
		if err != nil {
			continue
		}

approvalDeadline := submittedAt.Add(time.Duration(approvalDays) * 24 * time.Hour)
		if now.After(approvalDeadline) {
			err = wps.ApproveWorkProof(proofID, "Automatically approved due to deadline expiration", walletService)
			if err == nil {
				processedCount++
			}
		}
	}

// Process expired rejection deadlines
	rejectionQuery := `
		UPDATE work_proofs 
		SET status = 'rejected_accepted', worker_response = 'accepted', 
			worker_response_at = $1, updated_at = $1
		WHERE status = 'rejected' AND rejection_deadline < $1`
	
	result, err := wps.db.Exec(rejectionQuery, now)
	if err == nil {
		if affected, _ := result.RowsAffected(); affected > 0 {
			processedCount += int(affected)
		}
	}

// Process expired revision deadlines (auto-cancel)
	revisionQuery := `
		UPDATE work_proofs 
		SET status = 'cancelled_by_worker', worker_response = 'cancelled',
			worker_response_at = $1, updated_at = $1
		WHERE status = 'revision_requested' AND revision_deadline < $1`
	
	result, err = wps.db.Exec(revisionQuery, now)
	if err == nil {
		if affected, _ := result.RowsAffected(); affected > 0 {
			processedCount += int(affected)
		}
	}

return processedCount, nil
}
[V0_FILE]go:file="backend/services/notification.go" isMerged="true"
package services

import (
	"database/sql"
	"time"

"github.com/google/uuid"
	"microjob-backend/models"
)

type NotificationService struct {
	db *sql.DB
}

func NewNotificationService(db *sql.DB) *NotificationService {
	return &NotificationService{db: db}
}

func (ns *NotificationService) CreateNotification(notification *models.Notification) error {
	query := `
		INSERT INTO notifications (id, user_id, type, title, description, action_url, 
			is_read, created_at, updated_at)
		VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9)`
	
	_, err := ns.db.Exec(query, notification.ID, notification.UserID, notification.Type,
		notification.Title, notification.Description, notification.ActionURL,
		notification.IsRead, notification.CreatedAt, notification.UpdatedAt)
	
	return err
}

func (ns *NotificationService) GetNotificationsByUserID(userID string, limit, offset int) ([]models.Notification, error) {
	query := `
		SELECT id, user_id, type, title, description, action_url, is_read, created_at, updated_at
		FROM notifications 
		WHERE user_id = $1 
		ORDER BY created_at DESC 
		LIMIT $2 OFFSET $3`
	
	rows, err := ns.db.Query(query, userID, limit, offset)
	if err != nil {
		return nil, err
	}
	defer rows.Close()

var notifications []models.Notification
	for rows.Next() {
		var notification models.Notification
		err := rows.Scan(¬ification.ID, ¬ification.UserID, ¬ification.Type,
			¬ification.Title, ¬ification.Description, ¬ification.ActionURL,
			¬ification.IsRead, ¬ification.CreatedAt, ¬ification.UpdatedAt)
		if err != nil {
			return nil, err
		}
		notifications = append(notifications, notification)
	}

return notifications, nil
}

func (ns *NotificationService) MarkAsRead(notificationID string) error {
	query := `UPDATE notifications SET is_read = true, updated_at = $1 WHERE id = $2`
	_, err := ns.db.Exec(query, time.Now(), notificationID)
	return err
}

func (ns *NotificationService) MarkAllAsRead(userID string) error {
	query := `UPDATE notifications SET is_read = true, updated_at = $1 WHERE user_id = $2 AND is_read = false`
	_, err := ns.db.Exec(query, time.Now(), userID)
	return err
}

func (ns *NotificationService) GetUnreadCount(userID string) (int, error) {
	var count int
	query := `SELECT COUNT(*) FROM notifications WHERE user_id = $1 AND is_read = false`
	err := ns.db.QueryRow(query, userID).Scan(&count)
	return count, err
}
[V0_FILE]go:file="backend/handlers/admin.go" isMerged="true"
package handlers

import (
	"encoding/json"
	"strconv"
	"time"

"github.com/gofiber/fiber/v2"
	"microjob-backend/models"
	"microjob-backend/services"
)

type AdminHandler struct {
	adminService *services.AdminService
}

func NewAdminHandler(adminService *services.AdminService) *AdminHandler {
	return &AdminHandler{adminService: adminService}
}

// Platform Fee Settings
func (ah *AdminHandler) GetPlatformFeeSettings(c *fiber.Ctx) error {
	settings, err := ah.adminService.GetPlatformFeeSettings()
	if err != nil {
		// Return default settings on error
		defaultSettings := &models.PlatformFeeSettings{
			ID:         "default",
			Enabled:    true,
			Percentage: 5.0,
			FixedFee:   0.0,
			MinimumFee: 0.0,
			MaximumFee: 0,
			CreatedAt:  time.Now(),
			UpdatedAt:  time.Now(),
		}
		
		// Map to frontend format
		response := map[string]interface{}{
			"settings": map[string]interface{}{
				"id":           defaultSettings.ID,
				"enabled":      defaultSettings.Enabled,
				"percentage":   defaultSettings.Percentage,
				"fixed_fee":    defaultSettings.FixedFee,
				"minimum_fee":  defaultSettings.MinimumFee,
				"maximum_fee":  defaultSettings.MaximumFee,
				"isActive":     defaultSettings.Enabled,
				"feePercentage": defaultSettings.Percentage,
				"feeFixed":     defaultSettings.FixedFee,
				"minimumFee":   defaultSettings.MinimumFee,
				"maximumFee":   defaultSettings.MaximumFee,
				"created_at":   defaultSettings.CreatedAt,
				"updated_at":   defaultSettings.UpdatedAt,
			},
		}
		return c.JSON(response)
	}

// Map to frontend format
	response := map[string]interface{}{
		"settings": map[string]interface{}{
			"id":           settings.ID,
			"enabled":      settings.Enabled,
			"percentage":   settings.Percentage,
			"fixed_fee":    settings.FixedFee,
			"minimum_fee":  settings.MinimumFee,
			"maximum_fee":  settings.MaximumFee,
			"isActive":     settings.Enabled,
			"feePercentage": settings.Percentage,
			"feeFixed":     settings.FixedFee,
			"minimumFee":   settings.MinimumFee,
			"maximumFee":   settings.MaximumFee,
			"created_at":   settings.CreatedAt,
			"updated_at":   settings.UpdatedAt,
		},
	}

return c.JSON(response)
}

func (ah *AdminHandler) UpdatePlatformFeeSettings(c *fiber.Ctx) error {
	var body map[string]interface{}
	if err := c.BodyParser(&body); err != nil {
		return c.Status(400).JSON(fiber.Map{"error": "Invalid request body"})
	}

updateData := &models.PlatformFeeSettings{}
	
	if isActive, ok := body["isActive"].(bool); ok {
		updateData.Enabled = isActive
	} else {
		updateData.Enabled = true
	}
	
	if feePercentage, ok := body["feePercentage"].(float64); ok {
		updateData.Percentage = feePercentage
	} else {
		updateData.Percentage = 5.0
	}
	
	if feeFixed, ok := body["feeFixed"].(float64); ok {
		updateData.FixedFee = feeFixed
	} else {
		updateData.FixedFee = 0.0
	}
	
	if minimumFee, ok := body["minimumFee"].(float64); ok {
		updateData.MinimumFee = minimumFee
	} else {
		updateData.MinimumFee = 0.0
	}
	
	if maximumFee, ok := body["maximumFee"].(float64); ok {
		updateData.MaximumFee = maximumFee
	} else {
		updateData.MaximumFee = 0
	}

settings, err := ah.adminService.UpdatePlatformFeeSettings(updateData)
	if err != nil {
		return c.Status(500).JSON(fiber.Map{"error": "Failed to update platform fee settings"})
	}

return c.JSON(response)
}

// Revision Settings
func (ah *AdminHandler) GetRevisionSettings(c *fiber.Ctx) error {
	settings, err := ah.adminService.GetRevisionSettings()
	if err != nil {
		// Return default settings
		defaultSettings := map[string]interface{}{
			"maxRevisionRequests":         2,
			"revisionRequestTimeoutValue": 24,
			"revisionRequestTimeoutUnit":  "hours",
			"rejectionResponseTimeoutValue": 24,
			"rejectionResponseTimeoutUnit":  "hours",
			"enableAutomaticRefunds":      true,
			"refundOnRevisionTimeout":     true,
			"refundOnRejectionTimeout":    true,
			"enableRevisionWarnings":      true,
			"revisionPenaltyEnabled":      false,
			"revisionPenaltyAmount":       0,
		}
		return c.JSON(defaultSettings)
	}

return c.JSON(settings)
}

func (ah *AdminHandler) UpdateRevisionSettings(c *fiber.Ctx) error {
	// Check admin authorization
	userID := c.Locals("userID").(string)
	userType := c.Locals("userType").(string)
	
	if userType != "admin" {
		return c.Status(403).JSON(fiber.Map{"error": "Admin access required"})
	}

var settings map[string]interface{}
	if err := c.BodyParser(&settings); err != nil {
		return c.Status(400).JSON(fiber.Map{"error": "Invalid settings data"})
	}

// Add timestamp
	settings["updated_at"] = time.Now().Format(time.RFC3339)

err := ah.adminService.UpdateRevisionSettings(settings)
	if err != nil {
		return c.Status(500).JSON(fiber.Map{"error": "Failed to save settings"})
	}

return c.JSON(fiber.Map{"success": true})
}

// Commission Settings
func (ah *AdminHandler) GetCommissionSettings(c *fiber.Ctx) error {
	// Check admin authorization
	userType := c.Locals("userType").(string)
	if userType != "admin" {
		return c.Status(401).JSON(fiber.Map{"error": "Unauthorized"})
	}

feeSettings, err := ah.adminService.GetAllFeeSettings()
	if err != nil {
		return c.Status(500).JSON(fiber.Map{"error": "Failed to fetch commission settings"})
	}

return c.JSON(fiber.Map{"feeSettings": feeSettings})
}

func (ah *AdminHandler) UpdateCommissionSettings(c *fiber.Ctx) error {
	// Check admin authorization
	userType := c.Locals("userType").(string)
	if userType != "admin" {
		return c.Status(401).JSON(fiber.Map{"error": "Unauthorized"})
	}

var body struct {
		FeeType  string                 `json:"feeType"`
		Settings map[string]interface{} `json:"settings"`
	}

if err := c.BodyParser(&body); err != nil {
		return c.Status(400).JSON(fiber.Map{"error": "Invalid request body"})
	}

if body.FeeType == "" || body.Settings == nil {
		return c.Status(400).JSON(fiber.Map{"error": "Missing required fields"})
	}

feeSetting := &models.AdminFeeSetting{
		FeeType:    body.FeeType,
		UpdatedAt:  time.Now(),
	}

if feePercentage, ok := body.Settings["feePercentage"].(float64); ok {
		feeSetting.FeePercentage = feePercentage
	}
	if feeFixed, ok := body.Settings["feeFixed"].(float64); ok {
		feeSetting.FeeFixed = feeFixed
	}
	if minimumFee, ok := body.Settings["minimumFee"].(float64); ok {
		feeSetting.MinimumFee = minimumFee
	}
	if maximumFee, ok := body.Settings["maximumFee"].(float64); ok {
		feeSetting.MaximumFee = &maximumFee
	}
	if isActive, ok := body.Settings["isActive"].(bool); ok {
		feeSetting.IsActive = isActive
	}

data, err := ah.adminService.UpsertFeeSetting(feeSetting)
	if err != nil {
		return c.Status(500).JSON(fiber.Map{"error": "Failed to update commission settings"})
	}

return c.JSON(fiber.Map{"success": true, "data": data})
}

// Approval Settings
func (ah *AdminHandler) GetApprovalSettings(c *fiber.Ctx) error {
	settings, err := ah.adminService.GetApprovalSettings()
	if err !=</article></body></html>