[V0_FILE]sql:file="scripts/001-initial-schema.sql" -- Enable necessary extensions CREATE EXTENSION IF NOT EXISTS "uuid-ossp"; -- Create enum types CREATE TYPE user_role AS ENUM ('student', 'tutor', 'community_member', 'employer', 'admin'); CREATE TYPE course_status AS ENUM ('draft', 'pending', 'approved', 'rejected'); CREATE TYPE job_status AS ENUM ('pending', 'approved', 'rejected', 'active', 'completed'); CREATE TYPE transaction_type AS ENUM ('earned', 'spent'); -- Users table (extends Supabase auth.users) CREATE TABLE profiles ( id UUID REFERENCES auth.users(id) PRIMARY KEY, email TEXT UNIQUE NOT NULL, full_name TEXT, avatar_url TEXT, role user_role NOT NULL DEFAULT 'student', age INTEGER, bio TEXT, lab_coins INTEGER DEFAULT 0, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Lab Coin Transactions CREATE TABLE lab_coin_transactions ( id UUID DEFAULT uuid_generate_v4() PRIMARY KEY, user_id UUID REFERENCES profiles(id) ON DELETE CASCADE, amount INTEGER NOT NULL, type transaction_type NOT NULL, description TEXT NOT NULL, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Courses CREATE TABLE courses ( id UUID DEFAULT uuid_generate_v4() PRIMARY KEY, title TEXT NOT NULL, description TEXT, tutor_id UUID REFERENCES profiles(id) ON DELETE CASCADE, price_money DECIMAL(10,2) DEFAULT 0, price_coins INTEGER DEFAULT 0, age_group TEXT, thumbnail_url TEXT, status course_status DEFAULT 'draft', created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Course Modules CREATE TABLE course_modules ( id UUID DEFAULT uuid_generate_v4() PRIMARY KEY, course_id UUID REFERENCES courses(id) ON DELETE CASCADE, title TEXT NOT NULL, description TEXT, video_url TEXT, order_index INTEGER NOT NULL, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Course Enrollments CREATE TABLE course_enrollments ( id UUID DEFAULT uuid_generate_v4() PRIMARY KEY, student_id UUID REFERENCES profiles(id) ON DELETE CASCADE, course_id UUID REFERENCES courses(id) ON DELETE CASCADE, progress INTEGER DEFAULT 0, completed_at TIMESTAMP WITH TIME ZONE, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), UNIQUE(student_id, course_id) ); -- Communities CREATE TABLE communities ( id UUID DEFAULT uuid_generate_v4() PRIMARY KEY, name TEXT NOT NULL, description TEXT, min_age INTEGER, max_age INTEGER, created_by UUID REFERENCES profiles(id), created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Community Members CREATE TABLE community_members ( id UUID DEFAULT uuid_generate_v4() PRIMARY KEY, community_id UUID REFERENCES communities(id) ON DELETE CASCADE, user_id UUID REFERENCES profiles(id) ON DELETE CASCADE, joined_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), UNIQUE(community_id, user_id) ); -- Community Posts CREATE TABLE community_posts ( id UUID DEFAULT uuid_generate_v4() PRIMARY KEY, community_id UUID REFERENCES communities(id) ON DELETE CASCADE, author_id UUID REFERENCES profiles(id) ON DELETE CASCADE, content TEXT NOT NULL, likes_count INTEGER DEFAULT 0, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Job Listings CREATE TABLE job_listings ( id UUID DEFAULT uuid_generate_v4() PRIMARY KEY, employer_id UUID REFERENCES profiles(id) ON DELETE CASCADE, title TEXT NOT NULL, description TEXT NOT NULL, timeframe TEXT, manpower_needed INTEGER, budget DECIMAL(10,2), status job_status DEFAULT 'pending', created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Community Services/Events CREATE TABLE community_services ( id UUID DEFAULT uuid_generate_v4() PRIMARY KEY, name TEXT NOT NULL, description TEXT, service_type TEXT, -- 'play_scheme', 'workshop', 'event' schedule TIMESTAMP WITH TIME ZONE, venue TEXT, min_age INTEGER, max_age INTEGER, capacity INTEGER, price_money DECIMAL(10,2) DEFAULT 0, price_coins INTEGER DEFAULT 0, created_by UUID REFERENCES profiles(id), created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Service Registrations CREATE TABLE service_registrations ( id UUID DEFAULT uuid_generate_v4() PRIMARY KEY, service_id UUID REFERENCES community_services(id) ON DELETE CASCADE, user_id UUID REFERENCES profiles(id) ON DELETE CASCADE, registered_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), checked_in_at TIMESTAMP WITH TIME ZONE, UNIQUE(service_id, user_id) ); -- Create Row Level Security policies ALTER TABLE profiles ENABLE ROW LEVEL SECURITY; ALTER TABLE lab_coin_transactions ENABLE ROW LEVEL SECURITY; ALTER TABLE courses ENABLE ROW LEVEL SECURITY; ALTER TABLE course_modules ENABLE ROW LEVEL SECURITY; ALTER TABLE course_enrollments ENABLE ROW LEVEL SECURITY; ALTER TABLE communities ENABLE ROW LEVEL SECURITY; ALTER TABLE community_members ENABLE ROW LEVEL SECURITY; ALTER TABLE community_posts ENABLE ROW LEVEL SECURITY; ALTER TABLE job_listings ENABLE ROW LEVEL SECURITY; ALTER TABLE community_services ENABLE ROW LEVEL SECURITY; ALTER TABLE service_registrations ENABLE ROW LEVEL SECURITY; -- Basic RLS policies (you can expand these) CREATE POLICY "Users can view their own profile" ON profiles FOR SELECT USING (auth.uid() = id); CREATE POLICY "Users can update their own profile" ON profiles FOR UPDATE USING (auth.uid() = id); -- Functions and triggers for updated_at CREATE OR REPLACE FUNCTION update_updated_at_column() RETURNS TRIGGER AS $$ BEGIN NEW.updated_at = NOW(); RETURN NEW; END; $$ language 'plpgsql'; CREATE TRIGGER update_profiles_updated_at BEFORE UPDATE ON profiles FOR EACH ROW EXECUTE FUNCTION update_updated_at_column(); CREATE TRIGGER update_courses_updated_at BEFORE UPDATE ON courses FOR EACH ROW EXECUTE FUNCTION update_updated_at_column(); [V0_FILE]sql:file="scripts/002-seed-data.sql" -- Insert sample data for testing -- Sample communities INSERT INTO communities (id, name, description, min_age, max_age) VALUES (uuid_generate_v4(), 'Young Creators', 'A community for young creative minds', 13, 18), (uuid_generate_v4(), 'Adult Learners', 'Professional development community', 18, 65), (uuid_generate_v4(), 'Kids Zone', 'Safe space for children to learn and play', 5, 12); -- Sample community services INSERT INTO community_services (id, name, description, service_type, schedule, venue, min_age, max_age, capacity, price_money, price_coins) VALUES (uuid_generate_v4(), 'Creative Arts Workshop', 'Learn painting and drawing techniques', 'workshop', NOW() + INTERVAL '7 days', 'Community Center A', 8, 16, 20, 15.00, 50), (uuid_generate_v4(), 'Summer Play Scheme', 'Fun activities for kids during summer', 'play_scheme', NOW() + INTERVAL '14 days', 'Local Park', 5, 12, 30, 10.00, 30), (uuid_generate_v4(), 'Tech Talk: AI Basics', 'Introduction to artificial intelligence', 'event', NOW() + INTERVAL '3 days', 'Tech Hub', 16, 99, 50, 0.00, 0); [V0_FILE]typescriptreact:file="components/dashboard/student-dashboard.tsx" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import { BookOpen, Users, Calendar, Coins, Play, Trophy, Clock } from "lucide-react" import Link from "next/link" export function StudentDashboard() { return (

Welcome back, Student!

Continue your learning journey

250 Lab Coins

{/* Quick Stats */}

Courses Enrolled

Completed

Communities

Events Booked

{/* Continue Learning */} Continue Learning Pick up where you left off

Web Development Basics

Module 3: JavaScript Fundamentals

65% complete

Digital Art Mastery

Module 2: Color Theory

30% complete

{/* Upcoming Events */} Upcoming Events Don't miss these exciting activities

Creative Arts Workshop

Community Center A

Tomorrow, 2:00 PM Registered

Tech Talk: AI Basics

Tech Hub

Friday, 6:00 PM Free

{/* Quick Actions */} Quick Actions What would you like to do today?

) } [V0_FILE]typescriptreact:file="components/dashboard/tutor-dashboard.tsx" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { BookOpen, Users, Plus, TrendingUp, Eye, Star } from "lucide-react" import Link from "next/link" export function TutorDashboard() { return (

Tutor Dashboard

Manage your courses and track your impact

{/* Quick Stats */}

Active Courses

342

Total Students

4.8

Avg Rating

£2,450

This Month

{/* Recent Courses */} Your Courses Manage and track your course performance

Web Development Basics

Active

45 students enrolled

1,234 views 4.9 rating

Digital Art Mastery

Pending

Awaiting approval

Submitted 2 days ago

{/* Recent Activity */} Recent Activity Latest updates from your courses

New student enrolled

Sarah joined "Web Development Basics"

2 hours ago

Course review received

5-star review on "JavaScript Fundamentals"

5 hours ago

Course approved

"React Advanced Concepts" is now live

1 day ago

{/* Quick Actions */} Quick Actions Common tasks for course management

) } [V0_FILE]typescriptreact:file="components/dashboard/admin-dashboard.tsx" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Users, BookOpen, Briefcase, Calendar, TrendingUp, AlertCircle, CheckCircle, Clock } from "lucide-react" import Link from "next/link" export function AdminDashboard() { return (

Admin Dashboard

Manage the Creative Labz platform

{/* Platform Stats */}

1,247

Total Users

Active Courses

Job Listings

Upcoming Events

{/* Pending Approvals */} Pending Approvals Items requiring your attention

Digital Art Mastery

Course by John Smith

Pending

Web Developer Position

Job by TechCorp Ltd

Pending

Summer Coding Camp

Event proposal

Pending

{/* Recent Activity */} Platform Activity Latest platform updates

Course approved

"React Fundamentals" by Sarah Johnson

2 hours ago

New user registered

Mike Chen joined as a student

4 hours ago

Community report

Inappropriate content flagged in "Young Creators"

6 hours ago

Job posted

"Graphic Designer" by Creative Agency

1 day ago

{/* Quick Actions */} Admin Tools Platform management and oversight

) } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { Toaster } from "@/components/ui/toaster" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Creative Labz - Learning Platform", description: "Interactive learning platform with courses, communities, and services", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/dashboard/layout.tsx" import type React from "react" import { SidebarProvider, SidebarInset } from "@/components/ui/sidebar" import { AppSidebar } from "@/components/layout/app-sidebar" export default function DashboardLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="app/academy/page.tsx" "use client" import { Card, CardContent, CardDescription, 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 { BookOpen, Clock, Users, Star, Coins, Search } from "lucide-react" import Link from "next/link" export default function AcademyPage() { const courses = [ { id: 1, title: "Web Development Fundamentals", description: "Learn HTML, CSS, and JavaScript from scratch", tutor: "Sarah Johnson", rating: 4.8, students: 1234, duration: "8 weeks", price_money: 49.99, price_coins: 150, thumbnail: "/placeholder.svg?height=200&width=300", ageGroup: "16+", level: "Beginner", }, { id: 2, title: "Digital Art Mastery", description: "Create stunning digital artwork with professional techniques", tutor: "Mike Chen", rating: 4.9, students: 856, duration: "6 weeks", price_money: 39.99, price_coins: 120, thumbnail: "/placeholder.svg?height=200&width=300", ageGroup: "13+", level: "Intermediate", }, { id: 3, title: "Creative Writing Workshop", description: "Develop your storytelling skills and find your voice", tutor: "Emma Wilson", rating: 4.7, students: 642, duration: "4 weeks", price_money: 29.99, price_coins: 90, thumbnail: "/placeholder.svg?height=200&width=300", ageGroup: "14+", level: "Beginner", }, { id: 4, title: "Music Production Basics", description: "Learn to create and produce your own music", tutor: "David Rodriguez", rating: 4.6, students: 423, duration: "10 weeks", price_money: 59.99, price_coins: 180, thumbnail: "/placeholder.svg?height=200&width=300", ageGroup: "15+", level: "Beginner", }, { id: 5, title: "Photography Essentials", description: "Master the art of photography with hands-on practice", tutor: "Lisa Park", rating: 4.8, students: 789, duration: "5 weeks", price_money: 34.99, price_coins: 105, thumbnail: "/placeholder.svg?height=200&width=300", ageGroup: "12+", level: "Beginner", }, { id: 6, title: "Game Development with Unity", description: "Build your first video game from concept to completion", tutor: "Alex Thompson", rating: 4.9, students: 567, duration: "12 weeks", price_money: 79.99, price_coins: 240, thumbnail: "/placeholder.svg?height=200&width=300", ageGroup: "16+", level: "Advanced", }, ] return (

Online Academy

Discover courses that inspire creativity and build skills

{/* Search and Filters */}

{/* Course Grid */}

{courses.map((course) => (

{course.ageGroup} {course.level}

{course.title} {course.description}

by {course.tutor}

{course.rating}

{course.students.toLocaleString()}

{course.duration}

£{course.price_money} or

{course.price_coins} coins

))}

{/* Featured Categories */} Popular Categories Explore courses by subject area

) } [V0_FILE]typescriptreact:file="app/academy/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/communities/page.tsx" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Users, MessageCircle, Heart, Plus } from "lucide-react" import Link from "next/link" export default function CommunitiesPage() { const communities = [ { id: 1, name: "Young Creators", description: "A vibrant community for young creative minds to share ideas, collaborate, and inspire each other", members: 1247, ageRange: "13-18", category: "Creative Arts", isJoined: true, recentPosts: 23, avatar: "/placeholder.svg?height=60&width=60", }, { id: 2, name: "Adult Learners", description: "Professional development and lifelong learning community for adults seeking new skills", members: 856, ageRange: "18-65", category: "Professional", isJoined: false, recentPosts: 15, avatar: "/placeholder.svg?height=60&width=60", }, { id: 3, name: "Kids Zone", description: "Safe and fun space for children to learn, play, and make friends in a supervised environment", members: 642, ageRange: "5-12", category: "Education", isJoined: true, recentPosts: 31, avatar: "/placeholder.svg?height=60&width=60", }, { id: 4, name: "Tech Innovators", description: "Connect with fellow tech enthusiasts, share projects, and discuss the latest innovations", members: 423, ageRange: "16+", category: "Technology", isJoined: false, recentPosts: 18, avatar: "/placeholder.svg?height=60&width=60", }, ] const recentPosts = [ { id: 1, author: "Sarah M.", community: "Young Creators", content: "Just finished my first digital painting! Any feedback would be amazing 🎨", likes: 24, comments: 8, timeAgo: "2 hours ago", avatar: "/placeholder.svg?height=40&width=40", }, { id: 2, author: "Mike T.", community: "Tech Innovators", content: "Working on a new React project. Anyone interested in collaborating?", likes: 15, comments: 12, timeAgo: "4 hours ago", avatar: "/placeholder.svg?height=40&width=40", }, { id: 3, author: "Emma L.", community: "Adult Learners", content: "Completed my first coding bootcamp module today! The journey continues 💪", likes: 31, comments: 6, timeAgo: "6 hours ago", avatar: "/placeholder.svg?height=40&width=40", }, ] return (

Communities

Connect, share, and learn together

{/* Communities List */}

Available Communities Find your tribe and start connecting {communities.map((community) => (

{community.name.charAt(0)}

{community.name}

{community.category} {community.ageRange}

{community.description}

{community.members.toLocaleString()} members

{community.recentPosts} posts this week

{community.isJoined ? ( <> Joined ) : ( )}

))}

{/* Recent Activity */}

Recent Posts Latest from your communities {recentPosts.map((post) => (

{post.author.charAt(0)}

{post.author} in {post.community}

{post.content}

{post.timeAgo}

{post.likes}

{post.comments}

))} Community Guidelines

• Be respectful and kind to all members

• Share constructive feedback and support

• Keep content appropriate for age groups

• No spam or self-promotion without permission

• Report inappropriate content to moderators

) } [V0_FILE]typescriptreact:file="app/services/page.tsx" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Calendar, MapPin, Users, Clock, Coins, Filter } from "lucide-react" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import Link from "next/link" export default function ServicesPage() { const services = [ { id: 1, name: "Creative Arts Workshop", description: "Learn painting and drawing techniques with professional artists. All materials provided.", type: "workshop", schedule: "2024-01-15T14:00:00", venue: "Community Center A, Main Street", ageGroup: "8-16", capacity: 20, registered: 15, price_money: 15.0, price_coins: 50, image: "/placeholder.svg?height=200&width=300", }, { id: 2, name: "Summer Play Scheme", description: "Fun outdoor activities, games, and learning experiences for children during summer holidays.", type: "play_scheme", schedule: "2024-01-20T10:00:00", venue: "Local Park, Green Avenue", ageGroup: "5-12", capacity: 30, registered: 22, price_money: 10.0, price_coins: 30, image: "/placeholder.svg?height=200&width=300", }, { id: 3, name: "Tech Talk: AI Basics", description: "Introduction to artificial intelligence and its applications in everyday life.", type: "event", schedule: "2024-01-18T18:00:00", venue: "Tech Hub, Innovation District", ageGroup: "16+", capacity: 50, registered: 35, price_money: 0.0, price_coins: 0, image: "/placeholder.svg?height=200&width=300", }, { id: 4, name: "Youth Photography Walk", description: "Explore the city through your lens with guidance from professional photographers.", type: "event", schedule: "2024-01-22T09:00:00", venue: "City Center Meeting Point", ageGroup: "13-18", capacity: 15, registered: 8, price_money: 5.0, price_coins: 15, image: "/placeholder.svg?height=200&width=300", }, { id: 5, name: "Coding Bootcamp for Kids", description: "Introduction to programming with Scratch and basic web development concepts.", type: "workshop", schedule: "2024-01-25T13:00:00", venue: "Digital Learning Center", ageGroup: "10-14", capacity: 12, registered: 10, price_money: 25.0, price_coins: 75, image: "/placeholder.svg?height=200&width=300", }, { id: 6, name: "Music Jam Session", description: "Bring your instruments and join other young musicians for an informal jam session.", type: "event", schedule: "2024-01-28T16:00:00", venue: "Music Studio, Arts Quarter", ageGroup: "14+", capacity: 20, registered: 12, price_money: 8.0, price_coins: 25, image: "/placeholder.svg?height=200&width=300", }, ] const formatDate = (dateString: string) => { const date = new Date(dateString) return date.toLocaleDateString("en-GB", { weekday: "long", year: "numeric", month: "long", day: "numeric", hour: "2-digit", minute: "2-digit", }) } const getTypeColor = (type: string) => { switch (type) { case "workshop": return "bg-blue-100 text-blue-800" case "play_scheme": return "bg-green-100 text-green-800" case "event": return "bg-purple-100 text-purple-800" default: return "bg-gray-100 text-gray-800" } } const getTypeLabel = (type: string) => { switch (type) { case "play_scheme": return "Play Scheme" case "workshop": return "Workshop" case "event": return "Event" default: return type } } return (

Community Services

Discover local events, workshops, and activities

All Services Workshops Play Schemes Events

{services.map((service) => (

{getTypeLabel(service.type)} {service.ageGroup}

{service.name} {service.description}

{formatDate(service.schedule)}

{service.venue}

{service.registered}/{service.capacity} registered

{service.price_money > 0 ? ( <>

£{service.price_money} {service.price_coins > 0 && or}

{service.price_coins > 0 && (

{service.price_coins} coins

)} ) : ( Free )}

))}

{services .filter((s) => s.type === "workshop") .map((service) => ( {/* Same card structure as above */}

{getTypeLabel(service.type)}

{service.name} {service.description}

{formatDate(service.schedule)}

{service.venue}

))}

{services .filter((s) => s.type === "play_scheme") .map((service) => (

{getTypeLabel(service.type)}

{service.name} {service.description} ))}

{services .filter((s) => s.type === "event") .map((service) => (

{getTypeLabel(service.type)}

{service.name} {service.description} ))}

) } [V0_FILE]typescriptreact:file="app/wallet/page.tsx" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Coins, TrendingUp, Gift, ShoppingCart, BookOpen, Calendar } from "lucide-react" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" export default function WalletPage() { const transactions = [ { id: 1, type: "earned", amount: 25, description: 'Completed "Web Development Basics" quiz', date: "2024-01-15T10:30:00", category: "course", }, { id: 2, type: "earned", amount: 10, description: "Daily login bonus", date: "2024-01-15T09:00:00", category: "bonus", }, { id: 3, type: "spent", amount: -50, description: 'Purchased "Digital Art Mastery" course', date: "2024-01-14T16:45:00", category: "course", }, { id: 4, type: "earned", amount: 15, description: "Attended Creative Arts Workshop", date: "2024-01-14T14:00:00", category: "event", }, { id: 5, type: "earned", amount: 30, description: 'Completed course: "Photography Essentials"', date: "2024-01-13T20:15:00", category: "course", }, ] const earnOpportunities = [ { title: "Complete Course Videos", description: "Earn 5-15 coins per video watched", icon: BookOpen, coins: "5-15", }, { title: "Pass Course Quizzes", description: "Get 10-25 coins for each quiz passed", icon: TrendingUp, coins: "10-25", }, { title: "Daily Login Bonus", description: "Login daily to earn bonus coins", icon: Gift, coins: "5-10", }, { title: "Attend Events", description: "Participate in community events", icon: Calendar, coins: "10-20", }, ] const spendOptions = [ { title: "Course Access", description: "Use coins to enroll in premium courses", icon: BookOpen, coins: "50-200", }, { title: "Event Registration", description: "Register for workshops and activities", icon: Calendar, coins: "15-75", }, { title: "Avatar Upgrades", description: "Customize your profile avatar", icon: Gift, coins: "25-100", }, { title: "Premium Features", description: "Unlock additional platform features", icon: TrendingUp, coins: "100+", }, ] const formatDate = (dateString: string) => { const date = new Date(dateString) return date.toLocaleDateString("en-GB", { day: "numeric", month: "short", hour: "2-digit", minute: "2-digit", }) } const getTransactionIcon = (category: string) => { switch (category) { case "course": return BookOpen case "event": return Calendar case "bonus": return Gift default: return Coins } } return (

Lab Coin Wallet

Manage your digital currency and rewards

{/* Wallet Balance */}

Current Balance

250 Lab Coins

This Month

+85 coins earned

Transaction History How to Earn How to Spend Recent Transactions Your latest Lab Coin activity

{transactions.map((transaction) => { const Icon = getTransactionIcon(transaction.category) return (

{transaction.description}

{formatDate(transaction.date)}

{transaction.type === "earned" ? "+" : ""} {transaction.amount} coins

{transaction.category}

) })}

{earnOpportunities.map((opportunity, index) => (

{opportunity.title} {opportunity.description}

{opportunity.coins} coins

))}

{spendOptions.map((option, index) => (

{option.title} {option.description}

{option.coins} coins

))}

{/* Quick Actions */} Quick Actions Common ways to use your Lab Coins

) } [V0_FILE]sql:file="scripts/003-create-test-users.sql" -- Create test users with different roles -- Note: These users will need to be created through Supabase Auth first, then we update their profiles -- Insert test profiles (you'll need to replace the UUIDs with actual auth.users IDs after creating them) -- For now, we'll create sample profiles that you can reference -- Test Student User INSERT INTO profiles (id, email, full_name, role, age, lab_coins, bio) VALUES ( '11111111-1111-1111-1111-111111111111', 'student@creativelabz.com', 'Alex Student', 'student', 16, 250, 'Passionate about learning web development and digital arts. Love creating and sharing with the community!' ); -- Test Tutor User INSERT INTO profiles (id, email, full_name, role, age, lab_coins, bio) VALUES ( '22222222-2222-2222-2222-222222222222', 'tutor@creativelabz.com', 'Sarah Johnson', 'tutor', 28, 0, 'Professional web developer with 5+ years experience. Love teaching and helping others grow their skills.' ); -- Test Admin User INSERT INTO profiles (id, email, full_name, role, age, lab_coins, bio) VALUES ( '33333333-3333-3333-3333-333333333333', 'admin@creativelabz.com', 'Mike Administrator', 'admin', 35, 0, 'Platform administrator focused on creating the best learning experience for our community.' ); -- Test Employer User INSERT INTO profiles (id, email, full_name, role, age, lab_coins, bio) VALUES ( '44444444-4444-4444-4444-444444444444', 'employer@creativelabz.com', 'Emma Employer', 'employer', 32, 0, 'HR Manager at TechCorp looking for talented individuals to join our growing team.' ); -- Test Community Member User INSERT INTO profiles (id, email, full_name, role, age, lab_coins, bio) VALUES ( '55555555-5555-5555-5555-555555555555', 'community@creativelabz.com', 'David Community', 'community_member', 24, 75, 'Active community member who loves participating in local events and workshops.' ); -- Add some sample courses for the tutor INSERT INTO courses (id, title, description, tutor_id, price_money, price_coins, age_group, status) VALUES ( uuid_generate_v4(), 'Web Development Fundamentals', 'Learn HTML, CSS, and JavaScript from scratch with hands-on projects', '22222222-2222-2222-2222-222222222222', 49.99, 150, '16+', 'approved' ), ( uuid_generate_v4(), 'Advanced React Concepts', 'Master React hooks, context, and advanced patterns', '22222222-2222-2222-2222-222222222222', 79.99, 240, '18+', 'pending' ); -- Add some course enrollments for the student INSERT INTO course_enrollments (student_id, course_id, progress) SELECT '11111111-1111-1111-1111-111111111111', id, 65 FROM courses WHERE title = 'Web Development Fundamentals'; -- Add some Lab Coin transactions for the student INSERT INTO lab_coin_transactions (user_id, amount, type, description) VALUES ( '11111111-1111-1111-1111-111111111111', 25, 'earned', 'Completed "Web Development Basics" quiz' ), ( '11111111-1111-1111-1111-111111111111', 10, 'earned', 'Daily login bonus' ), ( '11111111-1111-1111-1111-111111111111', -50, 'spent', 'Purchased "Digital Art Mastery" course' ), ( '11111111-1111-1111-1111-111111111111', 30, 'earned', 'Completed course: "Photography Essentials"' ); -- Add community memberships INSERT INTO community_members (community_id, user_id) SELECT c.id, '11111111-1111-1111-1111-111111111111' FROM communities c WHERE c.name IN ('Young Creators', 'Kids Zone'); INSERT INTO community_members (community_id, user_id) SELECT c.id, '55555555-5555-5555-5555-555555555555' FROM communities c WHERE c.name = 'Adult Learners'; -- Add some community posts INSERT INTO community_posts (community_id, author_id, content, likes_count) SELECT c.id, '11111111-1111-1111-1111-111111111111', 'Just finished my first digital painting! Any feedback would be amazing 🎨', 24 FROM communities c WHERE c.name = 'Young Creators'; INSERT INTO community_posts (community_id, author_id, content, likes_count) SELECT c.id, '55555555-5555-5555-5555-555555555555', 'Completed my first coding bootcamp module today! The journey continues 💪', 31 FROM communities c WHERE c.name = 'Adult Learners'; -- Add some job listings from the employer INSERT INTO job_listings (employer_id, title, description, timeframe, manpower_needed, budget, status) VALUES ( '44444444-4444-4444-4444-444444444444', 'Junior Web Developer', 'Looking for a passionate junior developer to join our team. Experience with React and Node.js preferred.', '3 months', 2, 45000.00, 'approved' ), ( '44444444-4444-4444-4444-444444444444', 'Graphic Designer', 'Creative graphic designer needed for marketing materials and brand development.', '6 months', 1, 35000.00, 'pending' ); -- Add service registrations for users INSERT INTO service_registrations (service_id, user_id) SELECT cs.id, '11111111-1111-1111-1111-111111111111' FROM community_services cs WHERE cs.name = 'Creative Arts Workshop'; INSERT INTO service_registrations (service_id, user_id) SELECT cs.id, '55555555-5555-5555-5555-555555555555' FROM community_services cs WHERE cs.name = 'Tech Talk: AI Basics'; [V0_FILE]typescriptreact:file="components/auth/test-users-info.tsx" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Copy, User, Mail, Key } from "lucide-react" import { toast } from "@/hooks/use-toast" interface TestUser { role: string email: string password: string name: string description: string features: string[] } const testUsers: TestUser[] = [ { role: "Student", email: "student@creativelabz.com", password: "student123", name: "Alex Student", description: "Experience the learning journey with course progress, Lab Coins, and community participation", features: [ "Browse and purchase courses", "Track learning progress", "Earn and spend Lab Coins", "Join communities", "Register for events", ], }, { role: "Tutor", email: "tutor@creativelabz.com", password: "tutor123", name: "Sarah Johnson", description: "Manage courses, track student progress, and engage with the teaching community", features: [ "Create and manage courses", "View student analytics", "Track earnings", "Manage course content", "Engage with students", ], }, { role: "Admin", email: "admin@creativelabz.com", password: "admin123", name: "Mike Administrator", description: "Full platform oversight with approval workflows and user management capabilities", features: [ "Approve/reject courses", "Manage all users", "Moderate communities", "View platform analytics", "Manage job listings", ], }, { role: "Employer", email: "employer@creativelabz.com", password: "employer123", name: "Emma Employer", description: "Post job opportunities and manage recruitment through the platform", features: [ "Post job listings", "Review applications", "Manage job status", "Access talent pool", "Track hiring metrics", ], }, { role: "Community Member", email: "community@creativelabz.com", password: "community123", name: "David Community", description: "Focus on community engagement and local event participation", features: [ "Join communities", "Participate in discussions", "Register for events", "Earn Lab Coins", "Connect with locals", ], }, ] export function TestUsersInfo() { const copyCredentials = (email: string, password: string) => { navigator.clipboard.writeText(`Email: ${email}\nPassword: ${password}`) toast({ title: "Credentials copied!", description: "Login credentials have been copied to your clipboard.", }) } return (

Test User Accounts

Use these pre-configured accounts to test different user roles and features

{testUsers.map((user) => (

{user.name} {user.role}

{user.description}

{user.email}

{user.password}

Key Features:

• {feature}

))}

Setup Instructions

1. Run the SQL script to create test user profiles and sample data

2. Create corresponding auth users in Supabase Auth with these email/password combinations

3. Update the profile UUIDs in the database to match the Supabase Auth user IDs

4. Use the credentials above to login and test different user experiences

) } [V0_FILE]sql:file="scripts/004-auth-setup-guide.sql" -- IMPORTANT: Manual Setup Required -- -- Since Supabase Auth users must be created through the Supabase interface or API, -- you'll need to manually create these users first, then update the profile UUIDs. -- -- Step 1: Create Auth Users in Supabase Dashboard -- Go to Authentication > Users in your Supabase dashboard and create users with: -- -- 1. Email: student@creativelabz.com, Password: student123 -- 2. Email: tutor@creativelabz.com, Password: tutor123 -- 3. Email: admin@creativelabz.com, Password: admin123 -- 4. Email: employer@creativelabz.com, Password: employer123 -- 5. Email: community@creativelabz.com, Password: community123 -- -- Step 2: Get the User IDs -- After creating the auth users, note down their UUIDs from the auth.users table -- -- Step 3: Update Profile UUIDs -- Replace the placeholder UUIDs in the profiles table with the actual auth user IDs: -- Example update queries (replace NEW_UUID_HERE with actual UUIDs from auth.users): /* UPDATE profiles SET id = 'NEW_STUDENT_UUID_HERE' WHERE email = 'student@creativelabz.com'; UPDATE profiles SET id = 'NEW_TUTOR_UUID_HERE' WHERE email = 'tutor@creativelabz.com'; UPDATE profiles SET id = 'NEW_ADMIN_UUID_HERE' WHERE email = 'admin@creativelabz.com'; UPDATE profiles SET id = 'NEW_EMPLOYER_UUID_HERE' WHERE email = 'employer@creativelabz.com'; UPDATE profiles SET id = 'NEW_COMMUNITY_UUID_HERE' WHERE email = 'community@creativelabz.com'; -- Then update all related foreign key references: UPDATE lab_coin_transactions SET user_id = 'NEW_STUDENT_UUID_HERE' WHERE user_id = '11111111-1111-1111-1111-111111111111'; UPDATE course_enrollments SET student_id = 'NEW_STUDENT_UUID_HERE' WHERE student_id = '11111111-1111-1111-1111-111111111111'; UPDATE community_members SET user_id = 'NEW_STUDENT_UUID_HERE' WHERE user_id = '11111111-1111-1111-1111-111111111111'; UPDATE community_posts SET author_id = 'NEW_STUDENT_UUID_HERE' WHERE author_id = '11111111-1111-1111-1111-111111111111'; UPDATE community_members SET user_id = 'NEW_COMMUNITY_UUID_HERE' WHERE user_id = '55555555-5555-5555-5555-555555555555'; UPDATE community_posts SET author_id = 'NEW_COMMUNITY_UUID_HERE' WHERE author_id = '55555555-5555-5555-5555-555555555555'; UPDATE courses SET tutor_id = 'NEW_TUTOR_UUID_HERE' WHERE tutor_id = '22222222-2222-2222-2222-222222222222'; UPDATE job_listings SET employer_id = 'NEW_EMPLOYER_UUID_HERE' WHERE employer_id = '44444444-4444-4444-4444-444444444444'; UPDATE service_registrations SET user_id = 'NEW_STUDENT_UUID_HERE' WHERE user_id = '11111111-1111-1111-1111-111111111111'; UPDATE service_registrations SET user_id = 'NEW_COMMUNITY_UUID_HERE' WHERE user_id = '55555555-5555-5555-5555-555555555555'; */ -- Alternative: Use Supabase Auth API to create users programmatically -- You can also use the Supabase client to create users with specific UUIDs: /* const { data, error } = await supabase.auth.admin.createUser({ email: 'student@creativelabz.com', password: 'student123', user_metadata: { full_name: 'Alex Student', role: 'student' } }) */ [V0_FILE]sql:file="scripts/005-fix-sql-errors.sql" -- Fix SQL errors and create proper test data -- This script addresses common issues with the previous scripts -- First, let's ensure we have the UUID extension CREATE EXTENSION IF NOT EXISTS "uuid-ossp"; -- Drop and recreate any problematic constraints or data -- Clean up any existing test data that might cause conflicts DELETE FROM service_registrations WHERE user_id IN ( '11111111-1111-1111-1111-111111111111', '22222222-2222-2222-2222-222222222222', '33333333-3333-3333-3333-333333333333', '44444444-4444-4444-4444-444444444444', '55555555-5555-5555-5555-555555555555' ); DELETE FROM community_posts WHERE author_id IN ( '11111111-1111-1111-1111-111111111111', '22222222-2222-2222-2222-222222222222', '33333333-3333-3333-3333-333333333333', '44444444-4444-4444-4444-444444444444', '55555555-5555-5555-5555-555555555555' ); DELETE FROM community_members WHERE user_id IN ( '11111111-1111-1111-1111-111111111111', '22222222-2222-2222-2222-222222222222', '33333333-3333-3333-3333-333333333333', '44444444-4444-4444-4444-444444444444', '55555555-5555-5555-5555-555555555555' ); DELETE FROM lab_coin_transactions WHERE user_id IN ( '11111111-1111-1111-1111-111111111111', '22222222-2222-2222-2222-222222222222', '33333333-3333-3333-3333-333333333333', '44444444-4444-4444-4444-444444444444', '55555555-5555-5555-5555-555555555555' ); DELETE FROM course_enrollments WHERE student_id IN ( '11111111-1111-1111-1111-111111111111', '22222222-2222-2222-2222-222222222222', '33333333-3333-3333-3333-333333333333', '44444444-4444-4444-4444-444444444444', '55555555-5555-5555-5555-555555555555' ); DELETE FROM job_listings WHERE employer_id IN ( '11111111-1111-1111-1111-111111111111', '22222222-2222-2222-2222-222222222222', '33333333-3333-3333-3333-333333333333', '44444444-4444-4444-4444-444444444444', '55555555-5555-5555-5555-555555555555' ); DELETE FROM courses WHERE tutor_id IN ( '11111111-1111-1111-1111-111111111111', '22222222-2222-2222-2222-222222222222', '33333333-3333-3333-3333-333333333333', '44444444-4444-4444-4444-444444444444', '55555555-5555-5555-5555-555555555555' ); DELETE FROM profiles WHERE id IN ( '11111111-1111-1111-1111-111111111111', '22222222-2222-2222-2222-222222222222', '33333333-3333-3333-3333-333333333333', '44444444-4444-4444-4444-444444444444', '55555555-5555-5555-5555-555555555555' ); -- Now insert the test profiles with proper error handling -- Test Student User INSERT INTO profiles (id, email, full_name, role, age, lab_coins, bio) VALUES ( '11111111-1111-1111-1111-111111111111', 'student@creativelabz.com', 'Alex Student', 'student', 16, 250, 'Passionate about learning web development and digital arts. Love creating and sharing with the community!' ) ON CONFLICT (id) DO UPDATE SET email = EXCLUDED.email, full_name = EXCLUDED.full_name, role = EXCLUDED.role, age = EXCLUDED.age, lab_coins = EXCLUDED.lab_coins, bio = EXCLUDED.bio; -- Test Tutor User INSERT INTO profiles (id, email, full_name, role, age, lab_coins, bio) VALUES ( '22222222-2222-2222-2222-222222222222', 'tutor@creativelabz.com', 'Sarah Johnson', 'tutor', 28, 0, 'Professional web developer with 5+ years experience. Love teaching and helping others grow their skills.' ) ON CONFLICT (id) DO UPDATE SET email = EXCLUDED.email, full_name = EXCLUDED.full_name, role = EXCLUDED.role, age = EXCLUDED.age, lab_coins = EXCLUDED.lab_coins, bio = EXCLUDED.bio; -- Test Admin User INSERT INTO profiles (id, email, full_name, role, age, lab_coins, bio) VALUES ( '33333333-3333-3333-3333-333333333333', 'admin@creativelabz.com', 'Mike Administrator', 'admin', 35, 0, 'Platform administrator focused on creating the best learning experience for our community.' ) ON CONFLICT (id) DO UPDATE SET email = EXCLUDED.email, full_name = EXCLUDED.full_name, role = EXCLUDED.role, age = EXCLUDED.age, lab_coins = EXCLUDED.lab_coins, bio = EXCLUDED.bio; -- Test Employer User INSERT INTO profiles (id, email, full_name, role, age, lab_coins, bio) VALUES ( '44444444-4444-4444-4444-444444444444', 'employer@creativelabz.com', 'Emma Employer', 'employer', 32, 0, 'HR Manager at TechCorp looking for talented individuals to join our growing team.' ) ON CONFLICT (id) DO UPDATE SET email = EXCLUDED.email, full_name = EXCLUDED.full_name, role = EXCLUDED.role, age = EXCLUDED.age, lab_coins = EXCLUDED.lab_coins, bio = EXCLUDED.bio; -- Test Community Member User INSERT INTO profiles (id, email, full_name, role, age, lab_coins, bio) VALUES ( '55555555-5555-5555-5555-555555555555', 'community@creativelabz.com', 'David Community', 'community_member', 24, 75, 'Active community member who loves participating in local events and workshops.' ) ON CONFLICT (id) DO UPDATE SET email = EXCLUDED.email, full_name = EXCLUDED.full_name, role = EXCLUDED.role, age = EXCLUDED.age, lab_coins = EXCLUDED.lab_coins, bio = EXCLUDED.bio; -- Add sample courses for the tutor (with proper UUID generation) DO $$ DECLARE course_id_1 UUID := uuid_generate_v4(); course_id_2 UUID := uuid_generate_v4(); BEGIN -- Insert first course INSERT INTO courses (id, title, description, tutor_id, price_money, price_coins, age_group, status) VALUES ( course_id_1, 'Web Development Fundamentals', 'Learn HTML, CSS, and JavaScript from scratch with hands-on projects', '22222222-2222-2222-2222-222222222222', 49.99, 150, '16+', 'approved' ); -- Insert second course INSERT INTO courses (id, title, description, tutor_id, price_money, price_coins, age_group, status) VALUES ( course_id_2, 'Advanced React Concepts', 'Master React hooks, context, and advanced patterns', '22222222-2222-2222-2222-222222222222', 79.99, 240, '18+', 'pending' ); -- Add course enrollment for the student (for the first course) INSERT INTO course_enrollments (student_id, course_id, progress) VALUES ( '11111111-1111-1111-1111-111111111111', course_id_1, 65 ); END $$; -- Add Lab Coin transactions for the student INSERT INTO lab_coin_transactions (user_id, amount, type, description) VALUES ( '11111111-1111-1111-1111-111111111111', 25, 'earned', 'Completed "Web Development Basics" quiz' ), ( '11111111-1111-1111-1111-111111111111', 10, 'earned', 'Daily login bonus' ), ( '11111111-1111-1111-1111-111111111111', -50, 'spent', 'Purchased "Digital Art Mastery" course' ), ( '11111111-1111-1111-1111-111111111111', 30, 'earned', 'Completed course: "Photography Essentials"' ); -- Add community memberships (only if communities exist) INSERT INTO community_members (community_id, user_id) SELECT c.id, '11111111-1111-1111-1111-111111111111' FROM communities c WHERE c.name = 'Young Creators' ON CONFLICT (community_id, user_id) DO NOTHING; INSERT INTO community_members (community_id, user_id) SELECT c.id, '11111111-1111-1111-1111-111111111111' FROM communities c WHERE c.name = 'Kids Zone' ON CONFLICT (community_id, user_id) DO NOTHING; INSERT INTO community_members (community_id, user_id) SELECT c.id, '55555555-5555-5555-5555-555555555555' FROM communities c WHERE c.name = 'Adult Learners' ON CONFLICT (community_id, user_id) DO NOTHING; -- Add community posts (only if communities exist) INSERT INTO community_posts (community_id, author_id, content, likes_count) SELECT c.id, '11111111-1111-1111-1111-111111111111', 'Just finished my first digital painting! Any feedback would be amazing 🎨', 24 FROM communities c WHERE c.name = 'Young Creators'; INSERT INTO community_posts (community_id, author_id, content, likes_count) SELECT c.id, '55555555-5555-5555-5555-555555555555', 'Completed my first coding bootcamp module today! The journey continues 💪', 31 FROM communities c WHERE c.name = 'Adult Learners'; -- Add job listings from the employer INSERT INTO job_listings (employer_id, title, description, timeframe, manpower_needed, budget, status) VALUES ( '44444444-4444-4444-4444-444444444444', 'Junior Web Developer', 'Looking for a passionate junior developer to join our team. Experience with React and Node.js preferred.', '3 months', 2, 45000.00, 'approved' ), ( '44444444-4444-4444-4444-444444444444', 'Graphic Designer', 'Creative graphic designer needed for marketing materials and brand development.', '6 months', 1, 35000.00, 'pending' ); -- Add service registrations (only if services exist) INSERT INTO service_registrations (service_id, user_id) SELECT cs.id, '11111111-1111-1111-1111-111111111111' FROM community_services cs WHERE cs.name = 'Creative Arts Workshop' ON CONFLICT (service_id, user_id) DO NOTHING; INSERT INTO service_registrations (service_id, user_id) SELECT cs.id, '55555555-5555-5555-5555-555555555555' FROM community_services cs WHERE cs.name = 'Tech Talk: AI Basics' ON CONFLICT (service_id, user_id) DO NOTHING; [V0_FILE]sql:file="scripts/006-verify-data.sql" -- Verification queries to check if data was inserted correctly -- Check profiles SELECT id, email, full_name, role, age, lab_coins, created_at FROM profiles WHERE email LIKE '%creativelabz.com' ORDER BY role; -- Check courses SELECT c.id, c.title, c.status, p.full_name as tutor_name, c.price_money, c.price_coins FROM courses c JOIN profiles p ON c.tutor_id = p.id WHERE p.email LIKE '%creativelabz.com'; -- Check course enrollments SELECT ce.id, p.full_name as student_name, c.title as course_title, ce.progress FROM course_enrollments ce JOIN profiles p ON ce.student_id = p.id JOIN courses c ON ce.course_id = c.id WHERE p.email LIKE '%creativelabz.com'; -- Check lab coin transactions SELECT lct.id, p.full_name as user_name, lct.amount, lct.type, lct.description, lct.created_at FROM lab_coin_transactions lct JOIN profiles p ON lct.user_id = p.id WHERE p.email LIKE '%creativelabz.com' ORDER BY lct.created_at DESC; -- Check community memberships SELECT cm.id, p.full_name as member_name, c.name as community_name, cm.joined_at FROM community_members cm JOIN profiles p ON cm.user_id = p.id JOIN communities c ON cm.community_id = c.id WHERE p.email LIKE '%creativelabz.com'; -- Check job listings SELECT jl.id, jl.title, jl.status, p.full_name as employer_name, jl.budget, jl.created_at FROM job_listings jl JOIN profiles p ON jl.employer_id = p.id WHERE p.email LIKE '%creativelabz.com'; -- Check service registrations SELECT sr.id, p.full_name as user_name, cs.name as service_name, sr.registered_at FROM service_registrations sr JOIN profiles p ON sr.user_id = p.id JOIN community_services cs ON sr.service_id = cs.id WHERE p.email LIKE '%creativelabz.com'; -- Summary counts SELECT 'Profiles' as table_name, COUNT(*) as count FROM profiles WHERE email LIKE '%creativelabz.com' UNION ALL SELECT 'Courses' as table_name, COUNT(*) as count FROM courses c JOIN profiles p ON c.tutor_id = p.id WHERE p.email LIKE '%creativelabz.com' UNION ALL SELECT 'Lab Coin Transactions' as table_name, COUNT(*) as count FROM lab_coin_transactions lct JOIN profiles p ON lct.user_id = p.id WHERE p.email LIKE '%creativelabz.com' UNION ALL SELECT 'Course Enrollments' as table_name, COUNT(*) as count FROM course_enrollments ce JOIN profiles p ON ce.student_id = p.id WHERE p.email LIKE '%creativelabz.com' UNION ALL SELECT 'Job Listings' as table_name, COUNT(*) as count FROM job_listings jl JOIN profiles p ON jl.employer_id = p.id WHERE p.email LIKE '%creativelabz.com'; [V0_FILE]sql:file="scripts/007-troubleshooting-guide.sql" -- Common SQL errors and their solutions -- ERROR: relation "profiles" does not exist -- SOLUTION: Make sure you've run the initial schema script (001-initial-schema.sql) first -- ERROR: duplicate key value violates unique constraint -- SOLUTION: The fix script includes ON CONFLICT clauses to handle duplicates -- ERROR: insert or update on table violates foreign key constraint -- SOLUTION: Make sure parent records exist before inserting child records -- Check if all required tables exist SELECT schemaname, tablename FROM pg_tables WHERE schemaname = 'public' AND tablename IN ( 'profiles', 'courses', 'communities', 'community_services', 'lab_coin_transactions', 'course_enrollments', 'community_members', 'community_posts', 'job_listings', 'service_registrations' ) ORDER BY tablename; -- Check if enum types exist SELECT typname FROM pg_type WHERE typname IN ('user_role', 'course_status', 'job_status', 'transaction_type'); -- Check if UUID extension is installed SELECT extname FROM pg_extension WHERE extname = 'uuid-ossp'; -- If you get foreign key errors, check what communities and services exist: SELECT id, name FROM communities; SELECT id, name FROM community_services; -- If you need to reset everything and start fresh: /* DROP TABLE IF EXISTS service_registrations CASCADE; DROP TABLE IF EXISTS community_posts CASCADE; DROP TABLE IF EXISTS community_members CASCADE; DROP TABLE IF EXISTS communities CASCADE; DROP TABLE IF EXISTS community_services CASCADE; DROP TABLE IF EXISTS course_enrollments CASCADE; DROP TABLE IF EXISTS course_modules CASCADE; DROP TABLE IF EXISTS courses CASCADE; DROP TABLE IF EXISTS job_listings CASCADE; DROP TABLE IF EXISTS lab_coin_transactions CASCADE; DROP TABLE IF EXISTS profiles CASCADE; DROP TYPE IF EXISTS user_role CASCADE; DROP TYPE IF EXISTS course_status CASCADE; DROP TYPE IF EXISTS job_status CASCADE; DROP TYPE IF EXISTS transaction_type CASCADE; -- Then run the initial schema script again */ [V0_FILE]typescriptreact:file="components/auth/login-debug.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Alert, AlertDescription } from "@/components/ui/alert" import { Loader2, Bug } from "lucide-react" import { supabase } from "@/lib/supabase" export function LoginDebug() { const [email, setEmail] = useState("student@creativelabz.com") const [password, setPassword] = useState("student123") const [isDebugging, setIsDebugging] = useState(false) const [debugInfo, setDebugInfo] = useState(null) const handleDebugLogin = async () => { setIsDebugging(true) setDebugInfo(null) const debug: any = { steps: [], errors: [], success: false, } try { // Step 1: Check if user exists in auth.users debug.steps.push("Checking if user exists in auth...") const { data: authData, error: authError } = await supabase.auth.signInWithPassword({ email, password, }) if (authError) { debug.errors.push(`Auth Error: ${authError.message}`) debug.steps.push(`❌ Auth failed: ${authError.message}`) } else { debug.steps.push("✅ Auth successful") debug.authUser = authData.user // Step 2: Check if profile exists debug.steps.push("Checking profile in database...") const { data: profile, error: profileError } = await supabase .from("profiles") .select("*") .eq("id", authData.user.id) .single() if (profileError) { debug.errors.push(`Profile Error: ${profileError.message}`) debug.steps.push(`❌ Profile not found: ${profileError.message}`) // Try to create profile debug.steps.push("Attempting to create profile...") const { error: createError } = await supabase.from("profiles").insert({ id: authData.user.id, email: authData.user.email!, full_name: authData.user.user_metadata?.full_name || "Test User", role: authData.user.user_metadata?.role || "student", }) if (createError) { debug.errors.push(`Create Profile Error: ${createError.message}`) debug.steps.push(`❌ Failed to create profile: ${createError.message}`) } else { debug.steps.push("✅ Profile created successfully") debug.success = true } } else { debug.steps.push("✅ Profile found") debug.profile = profile debug.success = true } } // Step 3: Check current session const { data: session } = await supabase.auth.getSession() debug.session = session.session debug.steps.push(session.session ? "✅ Session active" : "❌ No active session") } catch (error: any) { debug.errors.push(`Unexpected Error: ${error.message}`) debug.steps.push(`❌ Unexpected error: ${error.message}`) } setDebugInfo(debug) setIsDebugging(false) } return ( Login Debug Tool Debug login issues and check user/profile status

Email setEmail(e.target.value)} />

Password setPassword(e.target.value)} />

{debugInfo && (

Result: {debugInfo.success ? "Login should work" : "Login will fail"}

Debug Steps:

{debugInfo.steps.map((step: string, index: number) => (

{step}

))}

{debugInfo.errors.length > 0 && (

Errors:

{debugInfo.errors.map((error: string, index: number) => ( {error} ))}

)} {debugInfo.authUser && (

Auth User Info:

ID: {debugInfo.authUser.id}

Email: {debugInfo.authUser.email}

Confirmed: {debugInfo.authUser.email_confirmed_at ? "Yes" : "No"}

)} {debugInfo.profile && (

Profile Info:

Name: {debugInfo.profile.full_name}

Role: {debugInfo.profile.role}

Lab Coins: {debugInfo.profile.lab_coins}

)}

)} ) } [V0_FILE]sql:file="scripts/008-fix-auth-issues.sql" -- Fix common authentication issues -- 1. Enable Row Level Security but allow initial setup ALTER TABLE profiles DISABLE ROW LEVEL SECURITY; -- 2. Create a function to handle new user registration CREATE OR REPLACE FUNCTION public.handle_new_user() RETURNS trigger AS $$ BEGIN INSERT INTO public.profiles (id, email, full_name, role, age) VALUES ( new.id, new.email, COALESCE(new.raw_user_meta_data->>'full_name', 'New User'), COALESCE(new.raw_user_meta_data->>'role', 'student')::user_role, COALESCE((new.raw_user_meta_data->>'age')::integer, 18) ); RETURN new; END; $$ language plpgsql security definer; -- 3. Create trigger to automatically create profile when user signs up DROP TRIGGER IF EXISTS on_auth_user_created ON auth.users; CREATE TRIGGER on_auth_user_created AFTER INSERT ON auth.users FOR EACH ROW EXECUTE PROCEDURE public.handle_new_user(); -- 4. Update existing profiles to ensure they have proper data UPDATE profiles SET lab_coins = CASE WHEN role = 'student' THEN COALESCE(lab_coins, 100) WHEN role = 'community_member' THEN COALESCE(lab_coins, 50) ELSE 0 END, age = COALESCE(age, 18), full_name = COALESCE(full_name, 'User'), updated_at = NOW() WHERE lab_coins IS NULL OR age IS NULL OR full_name IS NULL; -- 5. Ensure email confirmation is not required for test users -- (This would need to be done in Supabase dashboard under Authentication > Settings) -- 6. Check for any orphaned profiles (profiles without corresponding auth users) -- This query will show profiles that don't have matching auth users SELECT p.id, p.email, p.full_name FROM profiles p LEFT JOIN auth.users u ON p.id = u.id WHERE u.id IS NULL; -- 7. Clean up any duplicate profiles by email WITH duplicates AS ( SELECT email, MIN(created_at) as first_created FROM profiles GROUP BY email HAVING COUNT(*) > 1 ) DELETE FROM profiles p1 WHERE EXISTS ( SELECT 1 FROM profiles p2 WHERE p2.email = p1.email AND p2.created_at < p1.created_at ); [V0_FILE]typescriptreact:file="components/ui/alert.tsx" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const alertVariants = cva( "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", { variants: { variant: { default: "bg-background text-foreground", destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive", }, }, defaultVariants: { variant: "default", }, }, ) const Alert = React.forwardRef< HTMLDivElement, React.HTMLAttributes & VariantProps >(({ className, variant, ...props }, ref) => (

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

), ) AlertDescription.displayName = "AlertDescription" export { Alert, AlertDescription } [V0_FILE]typescriptreact:file="app/loading.tsx" export default function Loading() { return (

Creative Labz

) } [V0_FILE]typescriptreact:file="app/error.tsx" "use client" import { useEffect } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { AlertTriangle } from "lucide-react" export default function Error({ error, reset, }: { error: Error & { digest?: string } reset: () => void }) { useEffect(() => { console.error(error) }, [error]) return (

Something went wrong! An error occurred while loading Creative Labz. Please try again.

{error.message}

) } [V0_FILE]typescriptreact:file="app/not-found.tsx" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Home, Search } from "lucide-react" import Link from "next/link" export default function NotFound() { return (

Page Not Found The page you're looking for doesn't exist or has been moved.

404

) } [V0_FILE]typescript:file="lib/supabase-admin.ts" import { createClient } from "@supabase/supabase-js" const supabaseServiceRoleKey = process.env.SUPABASE_SERVICE_ROLE_KEY if (!supabaseServiceRoleKey) { throw new Error("SUPABASE_SERVICE_ROLE_KEY env var missing") } export const supabaseAdmin = createClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, supabaseServiceRoleKey, { auth: { autoRefreshToken: false, persistSession: false }, }) [V0_FILE]typescript:file="lib/create-test-users-server.ts" import { supabaseAdmin } from "./supabase-admin" export async function createTestUsersServer() { const users = [ { email: "student@creativelabz.com", password: "student123", meta: { full_name: "Alex Student", role: "student", age: 16, lab_coins: 250, bio: "Learner" }, }, { email: "tutor@creativelabz.com", password: "tutor123", meta: { full_name: "Sarah Johnson", role: "tutor", age: 28, lab_coins: 0, bio: "Tutor" }, }, { email: "admin@creativelabz.com", password: "admin123", meta: { full_name: "Mike Admin", role: "admin", age: 35, lab_coins: 0, bio: "Admin" }, }, { email: "employer@creativelabz.com", password: "employer123", meta: { full_name: "Emma Employer", role: "employer", age: 32, lab_coins: 0, bio: "Employer" }, }, { email: "community@creativelabz.com", password: "community123", meta: { full_name: "David Community", role: "community_member", age: 24, lab_coins: 75, bio: "Member" }, }, ] const results: { email: string; success: boolean; message?: string }[] = [] for (const u of users) { // 1. create or fetch auth.user const { data: existing } = await supabaseAdmin.auth.admin.listUsers({ email: u.email, perPage: 1, }) let userId: string | undefined = existing?.users?.[0]?.id if (!userId) { const { user, error } = await supabaseAdmin.auth.admin.createUser({ email: u.email, password: u.password, email_confirm: true, user_metadata: u.meta, }) if (error) { results.push({ email: u.email, success: false, message: error.message }) continue } userId = user?.id } // 2. upsert profile row const { error: profileErr } = await supabaseAdmin.from("profiles").upsert( { id: userId, email: u.email, full_name: u.meta.full_name, role: u.meta.role, age: u.meta.age, lab_coins: u.meta.lab_coins, bio: u.meta.bio, }, { onConflict: "id" }, ) if (profileErr) { results.push({ email: u.email, success: false, message: profileErr.message }) } else { results.push({ email: u.email, success: true }) } } return results } [V0_FILE]typescriptreact:file="lib/auth-helpers.ts" isQuickEdit="true" "use client" import { supabase } from "./supabase" // Helper function to create test users programmatically export async function createTestUsers() { const res = await fetch("/api/test-users", { method: "POST" }) if (!res.ok) throw new Error(`Server error: ${res.status}`) const { results } = await res.json() return results as Array<{ email: string; success: boolean; message?: string }> } // Helper to check if user exists and get their profile export async function checkUserProfile(email: string) { try { const { data: profile, error } = await supabase.from("profiles").select("*").eq("email", email).single() return { profile, error } } catch (error) { return { profile: null, error } } } [V0_FILE]typescriptreact:file="components/auth/setup-test-users.tsx" isQuickEdit="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 { Alert, AlertDescription } from "@/components/ui/alert" import { Loader2, CheckCircle, XCircle, Users } from "lucide-react" import { createTestUsers, checkUserProfile } from "@/lib/auth-helpers" export function SetupTestUsers() { const [isCreating, setIsCreating] = useState(false) const [results, setResults] = useState([]) const [isChecking, setIsChecking] = useState(false) const [profileChecks, setProfileChecks] = useState([]) const handleCreateUsers = async () => { setIsCreating(true) // setResults([]) // Removed this line try { const creationResults = await createTestUsers() setResults(creationResults) } catch (error) { console.error("Error creating test users:", error) } finally { setIsCreating(false) } } const handleCheckProfiles = async () => { setIsChecking(true) setProfileChecks([]) const testEmails = [ "student@creativelabz.com", "tutor@creativelabz.com", "admin@creativelabz.com", "employer@creativelabz.com", "community@creativelabz.com", ] const checks = [] for (const email of testEmails) { const { profile, error } = await checkUserProfile(email) checks.push({ email, exists: !!profile, profile, error: error?.message, }) } setProfileChecks(checks) setIsChecking(false) } return (

Test User Setup Create test users in Supabase Auth and link them to profiles This will create test users in Supabase Auth and automatically link them to database profiles. If users already exist, it will update their profiles.

{results.length > 0 && (

Creation Results:

{results.map((result, index) => (

{result.email}

{result.success ? ( <> Success ) : ( <> Failed {result.message} )}

))}

)} {profileChecks.length > 0 && (

Profile Status:

{profileChecks.map((check, index) => (

{check.email} {check.profile && (

{check.profile.full_name} ({check.profile.role})

)}

{check.exists ? ( <> Profile Exists ) : ( <> No Profile )}

))}

)}

) } [V0_FILE]sql:file="scripts/009-disable-rls-and-constraints.sql" -- Temporarily disable RLS and fix constraints to allow user creation ALTER TABLE profiles DISABLE ROW LEVEL SECURITY; -- Drop the foreign key constraint temporarily to allow profile creation without auth users ALTER TABLE profiles DROP CONSTRAINT IF EXISTS profiles_id_fkey; -- Make sure we can insert profiles without requiring auth users to exist first -- We'll create a simpler approach that doesn't depend on Supabase Auth admin functions [V0_FILE]typescriptreact:file="app/api/test-users/route.ts" import { NextResponse } from "next/server" import { supabase } from "@/lib/supabase" export async function POST() { try { const testUsers = [ { email: "student@creativelabz.com", password: "student123", profile: { email: "student@creativelabz.com", full_name: "Alex Student", role: "student", age: 16, lab_coins: 250, bio: "Passionate about learning web development and digital arts.", }, }, { email: "tutor@creativelabz.com", password: "tutor123", profile: { email: "tutor@creativelabz.com", full_name: "Sarah Johnson", role: "tutor", age: 28, lab_coins: 0, bio: "Professional web developer with 5+ years experience.", }, }, { email: "admin@creativelabz.com", password: "admin123", profile: { email: "admin@creativelabz.com", full_name: "Mike Administrator", role: "admin", age: 35, lab_coins: 0, bio: "Platform administrator focused on creating the best learning experience.", }, }, { email: "employer@creativelabz.com", password: "employer123", profile: { email: "employer@creativelabz.com", full_name: "Emma Employer", role: "employer", age: 32, lab_coins: 0, bio: "HR Manager at TechCorp looking for talented individuals.", }, }, { email: "community@creativelabz.com", password: "community123", profile: { email: "community@creativelabz.com", full_name: "David Community", role: "community_member", age: 24, lab_coins: 75, bio: "Active community member who loves participating in local events.", }, }, ] const results = [] for (const user of testUsers) { try { // Try to sign up the user const { data: authData, error: authError } = await supabase.auth.signUp({ email: user.email, password: user.password, options: { data: user.profile, }, }) if (authError) { // If user already exists, try to sign them in to get their ID if (authError.message.includes("already registered")) { const { data: signInData, error: signInError } = await supabase.auth.signInWithPassword({ email: user.email, password: user.password, }) if (signInError) { results.push({ email: user.email, success: false, message: `User exists but can't sign in: ${signInError.message}`, }) continue } // Update profile with the existing user ID if (signInData.user) { const { error: profileError } = await supabase .from("profiles") .upsert({ ...user.profile, id: signInData.user.id }) if (profileError) { results.push({ email: user.email, success: false, message: `Profile update failed: ${profileError.message}`, }) } else { results.push({ email: user.email, success: true, message: "User exists, profile updated", }) } } } else { results.push({ email: user.email, success: false, message: authError.message, }) } continue } // If signup was successful, create/update profile if (authData.user) { const { error: profileError } = await supabase .from("profiles") .upsert({ ...user.profile, id: authData.user.id }) if (profileError) { results.push({ email: user.email, success: false, message: `Profile creation failed: ${profileError.message}`, }) } else { results.push({ email: user.email, success: true, message: "User and profile created successfully", }) } } } catch (error: any) { results.push({ email: user.email, success: false, message: `Unexpected error: ${error.message}`, }) } } return NextResponse.json({ results }) } catch (error: any) { console.error("Test user creation error:", error) return NextResponse.json({ error: error.message }, { status: 500 }) } } [V0_FILE]typescriptreact:file="components/auth/manual-user-creation.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Alert, AlertDescription } from "@/components/ui/alert" import { Loader2, UserPlus } from "lucide-react" import { supabase } from "@/lib/supabase" import { toast } from "@/hooks/use-toast" export function ManualUserCreation() { const [isCreating, setIsCreating] = useState(false) const [formData, setFormData] = useState({ email: "", password: "", fullName: "", role: "", age: "", }) const handleInputChange = (field: string, value: string) => { setFormData((prev) => ({ ...prev, [field]: value })) } const handleCreateUser = async () => { if (!formData.email || !formData.password || !formData.fullName || !formData.role || !formData.age) { toast({ title: "Error", description: "Please fill in all fields", variant: "destructive", }) return } setIsCreating(true) try { // Step 1: Create auth user const { data: authData, error: authError } = await supabase.auth.signUp({ email: formData.email, password: formData.password, options: { data: { full_name: formData.fullName, role: formData.role, age: Number.parseInt(formData.age), }, }, }) if (authError) { if (authError.message.includes("already registered")) { toast({ title: "User already exists", description: "Try signing in with these credentials instead", variant: "destructive", }) } else { toast({ title: "Auth Error", description: authError.message, variant: "destructive", }) } return } // Step 2: Create profile if (authData.user) { const { error: profileError } = await supabase.from("profiles").insert({ id: authData.user.id, email: formData.email, full_name: formData.fullName, role: formData.role as any, age: Number.parseInt(formData.age), lab_coins: formData.role === "student" ? 100 : 0, }) if (profileError) { toast({ title: "Profile Error", description: profileError.message, variant: "destructive", }) } else { toast({ title: "Success!", description: `User ${formData.email} created successfully`, }) // Reset form setFormData({ email: "", password: "", fullName: "", role: "", age: "", }) } } } catch (error: any) { toast({ title: "Unexpected Error", description: error.message, variant: "destructive", }) } finally { setIsCreating(false) } } const createTestUser = (userType: string) => { const testUsers = { student: { email: "student@creativelabz.com", password: "student123", fullName: "Alex Student", role: "student", age: "16", }, tutor: { email: "tutor@creativelabz.com", password: "tutor123", fullName: "Sarah Johnson", role: "tutor", age: "28", }, admin: { email: "admin@creativelabz.com", password: "admin123", fullName: "Mike Administrator", role: "admin", age: "35", }, } const userData = testUsers[userType as keyof typeof testUsers] if (userData) { setFormData(userData) } } return ( Manual User Creation Create users one by one if the bulk creation fails Use this form to create test users manually. Click the quick-fill buttons below to populate with test data.

Email handleInputChange("email", e.target.value)} placeholder="user@creativelabz.com" />

Password handleInputChange("password", e.target.value)} placeholder="password123" />

Full Name handleInputChange("fullName", e.target.value)} placeholder="John Doe" />

Role

Age handleInputChange("age", e.target.value)} placeholder="25" min="5" max="100" />

) } [V0_FILE]sql:file="scripts/010-simple-profile-setup.sql" -- Simple approach: Create profiles that can exist independently -- Remove foreign key constraints that might be causing issues -- Drop existing foreign key constraints ALTER TABLE profiles DROP CONSTRAINT IF EXISTS profiles_id_fkey; -- Disable RLS temporarily ALTER TABLE profiles DISABLE ROW LEVEL SECURITY; -- Create a simple trigger that creates profiles when users sign up CREATE OR REPLACE FUNCTION public.handle_new_user() RETURNS trigger AS $$ BEGIN INSERT INTO public.profiles (id, email, full_name, role, age, lab_coins) VALUES ( new.id, new.email, COALESCE(new.raw_user_meta_data->>'full_name', 'New User'), COALESCE(new.raw_user_meta_data->>'role', 'student')::user_role, COALESCE((new.raw_user_meta_data->>'age')::integer, 18), CASE WHEN COALESCE(new.raw_user_meta_data->>'role', 'student') = 'student' THEN 100 ELSE 0 END ) ON CONFLICT (id) DO UPDATE SET email = EXCLUDED.email, full_name = EXCLUDED.full_name, role = EXCLUDED.role, age = EXCLUDED.age, updated_at = NOW(); RETURN new; END; $$ language plpgsql security definer; -- Recreate the trigger DROP TRIGGER IF EXISTS on_auth_user_created ON auth.users; CREATE TRIGGER on_auth_user_created AFTER INSERT ON auth.users FOR EACH ROW EXECUTE PROCEDURE public.handle_new_user(); -- Allow public access to profiles table for now GRANT ALL ON profiles TO anon; GRANT ALL ON profiles TO authenticated; [V0_FILE]typescriptreact:file="components/setup/database-connection-test.tsx" "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 { Alert, AlertDescription } from "@/components/ui/alert" import { Loader2, Database, CheckCircle, XCircle, AlertTriangle } from "lucide-react" import { supabase } from "@/lib/supabase" export function DatabaseConnectionTest() { const [isTestingConnection, setIsTestingConnection] = useState(false) const [connectionResults, setConnectionResults] = useState(null) const testDatabaseConnection = async () => { setIsTestingConnection(true) const results: any = { steps: [], errors: [], success: false, envVars: {}, tables: [], } try { // Step 1: Check environment variables results.steps.push("Checking environment variables...") results.envVars = { NEXT_PUBLIC_SUPABASE_URL: process.env.NEXT_PUBLIC_SUPABASE_URL ? "✅ Set" : "❌ Missing", NEXT_PUBLIC_SUPABASE_ANON_KEY: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY ? "✅ Set" : "❌ Missing", } if (!process.env.NEXT_PUBLIC_SUPABASE_URL || !process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY) { results.errors.push("Missing required environment variables") results.steps.push("❌ Environment variables not configured") setConnectionResults(results) return } results.steps.push("✅ Environment variables found") // Step 2: Test basic connection results.steps.push("Testing Supabase connection...") const { data: connectionTest, error: connectionError } = await supabase .from("profiles") .select("count", { count: "exact", head: true }) if (connectionError) { results.errors.push(`Connection Error: ${connectionError.message}`) results.steps.push(`❌ Connection failed: ${connectionError.message}`) } else { results.steps.push("✅ Successfully connected to Supabase") } // Step 3: Check if tables exist results.steps.push("Checking database schema...") const tablesToCheck = [ "profiles", "courses", "communities", "community_services", "lab_coin_transactions", "course_enrollments", "job_listings", ] for (const table of tablesToCheck) { try { const { error } = await supabase.from(table).select("*").limit(1) if (error) { results.tables.push({ name: table, exists: false, error: error.message }) } else { results.tables.push({ name: table, exists: true }) } } catch (err: any) { results.tables.push({ name: table, exists: false, error: err.message }) } } const existingTables = results.tables.filter((t: any) => t.exists).length results.steps.push(`✅ Found ${existingTables}/${tablesToCheck.length} tables`) // Step 4: Test authentication results.steps.push("Testing authentication...") const { data: { session }, error: authError, } = await supabase.auth.getSession() if (authError) { results.errors.push(`Auth Error: ${authError.message}`) results.steps.push(`❌ Auth test failed: ${authError.message}`) } else { results.steps.push("✅ Authentication system accessible") results.currentUser = session?.user || null } // Overall success check results.success = results.errors.length === 0 && existingTables > 0 } catch (error: any) { results.errors.push(`Unexpected Error: ${error.message}`) results.steps.push(`❌ Unexpected error: ${error.message}`) } setConnectionResults(results) setIsTestingConnection(false) } return ( Database Connection Test Test your Supabase connection and database setup {connectionResults && (

Status:{" "} {connectionResults.success ? "✅ Database Connected" : "❌ Connection Issues Found"} {/* Environment Variables */}

Environment Variables:

{Object.entries(connectionResults.envVars).map(([key, value]) => (

{key} {value as string}

))}

{/* Connection Steps */}

Connection Test Steps:

{connectionResults.steps.map((step: string, index: number) => (

{step}

))}

{/* Tables Status */} {connectionResults.tables.length > 0 && (

Database Tables:

{connectionResults.tables.map((table: any, index: number) => (

{table.name}

{table.exists ? ( <> Exists ) : ( <> Missing )}

))}

)} {/* Errors */} {connectionResults.errors.length > 0 && (

Errors Found:

{connectionResults.errors.map((error: string, index: number) => ( {error} ))}

)}

)} ) } [V0_FILE]typescriptreact:file="components/setup/supabase-setup-guide.tsx" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Alert, AlertDescription } from "@/components/ui/alert" import { ExternalLink, Copy, Database, Key, Settings } from "lucide-react" import { toast } from "@/hooks/use-toast" export function SupabaseSetupGuide() { const copyToClipboard = (text: string, label: string) => { navigator.clipboard.writeText(text) toast({ title: "Copied!", description: `${label} copied to clipboard`, }) } const envTemplate = `# Add these to your .env.local file NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key` return (

Supabase Setup Guide Follow these steps to connect your application to Supabase {/* Step 1 */}

Create a Supabase Project

If you haven't already, create a new project on Supabase

{/* Step 2 */}

Get Your Project Credentials

Go to Settings → API in your Supabase project and copy these values:

Project URL Required

Anon/Public Key Required

Service Role Key Optional

{/* Step 3 */}

Configure Environment Variables

Create a .env.local file in your project root and add:

                  {envTemplate}

{/* Step 4 */}

Run Database Setup Scripts

Go to the SQL Editor in your Supabase dashboard and run the setup scripts in order:

1 001-initial-schema.sql

2 002-seed-data.sql

3 010-simple-profile-setup.sql

{/* Step 5 */}

Configure Authentication Settings

In your Supabase dashboard, go to Authentication → Settings and:

Disable "Enable email confirmations" for testing

Set Site URL to your local development URL

Important: After setting up your environment variables, restart your development server for the changes to take effect.

) } [V0_FILE]typescriptreact:file="components/ui/skeleton.tsx" import type React from "react" import { cn } from "@/lib/utils" function Skeleton({ className, ...props }: React.HTMLAttributes) { return

} export { Skeleton } [V0_FILE]sql:file="scripts/011-reset-auth-setup.sql" -- Reset authentication setup and start fresh -- This script will clean up any auth-related issues and prepare for a fresh start -- 1. Drop existing auth triggers and functions DROP TRIGGER IF EXISTS on_auth_user_created ON auth.users; DROP FUNCTION IF EXISTS public.handle_new_user(); -- 2. Temporarily disable RLS on all tables to avoid permission issues ALTER TABLE profiles DISABLE ROW LEVEL SECURITY; ALTER TABLE lab_coin_transactions DISABLE ROW LEVEL SECURITY; ALTER TABLE courses DISABLE ROW LEVEL SECURITY; ALTER TABLE course_modules DISABLE ROW LEVEL SECURITY; ALTER TABLE course_enrollments DISABLE ROW LEVEL SECURITY; ALTER TABLE communities DISABLE ROW LEVEL SECURITY; ALTER TABLE community_members DISABLE ROW LEVEL SECURITY; ALTER TABLE community_posts DISABLE ROW LEVEL SECURITY; ALTER TABLE job_listings DISABLE ROW LEVEL SECURITY; ALTER TABLE community_services DISABLE ROW LEVEL SECURITY; ALTER TABLE service_registrations DISABLE ROW LEVEL SECURITY; -- 3. Grant necessary permissions GRANT ALL ON ALL TABLES IN SCHEMA public TO anon; GRANT ALL ON ALL TABLES IN SCHEMA public TO authenticated; GRANT ALL ON ALL SEQUENCES IN SCHEMA public TO anon; GRANT ALL ON ALL SEQUENCES IN SCHEMA public TO authenticated; -- 4. Clean up any orphaned profiles (profiles without auth users) -- We'll keep this commented out for now to preserve existing data -- DELETE FROM profiles WHERE id NOT IN (SELECT id FROM auth.users); -- 5. Create a simple, robust function to handle new user registration CREATE OR REPLACE FUNCTION public.handle_new_user() RETURNS trigger AS $$ BEGIN -- Insert new profile with safe defaults INSERT INTO public.profiles ( id, email, full_name, role, age, lab_coins, bio ) VALUES ( NEW.id, NEW.email, COALESCE(NEW.raw_user_meta_data->>'full_name', NEW.email), COALESCE(NEW.raw_user_meta_data->>'role', 'student')::user_role, COALESCE((NEW.raw_user_meta_data->>'age')::integer, 18), CASE WHEN COALESCE(NEW.raw_user_meta_data->>'role', 'student') IN ('student', 'community_member') THEN 100 ELSE 0 END, COALESCE(NEW.raw_user_meta_data->>'bio', 'New user on Creative Labz') ) ON CONFLICT (id) DO UPDATE SET email = EXCLUDED.email, full_name = COALESCE(EXCLUDED.full_name, profiles.full_name), role = COALESCE(EXCLUDED.role, profiles.role), age = COALESCE(EXCLUDED.age, profiles.age), updated_at = NOW(); RETURN NEW; EXCEPTION WHEN OTHERS THEN -- Log the error but don't fail the auth process RAISE WARNING 'Failed to create profile for user %: %', NEW.id, SQLERRM; RETURN NEW; END; $$ LANGUAGE plpgsql SECURITY DEFINER; -- 6. Create the trigger CREATE TRIGGER on_auth_user_created AFTER INSERT ON auth.users FOR EACH ROW EXECUTE FUNCTION public.handle_new_user(); -- 7. Create a function to manually sync auth users to profiles CREATE OR REPLACE FUNCTION public.sync_auth_users_to_profiles() RETURNS TABLE(user_id uuid, email text, status text) AS $$ BEGIN RETURN QUERY WITH user_sync AS ( INSERT INTO public.profiles ( id, email, full_name, role, age, lab_coins ) SELECT u.id, u.email, COALESCE(u.raw_user_meta_data->>'full_name', u.email), COALESCE(u.raw_user_meta_data->>'role', 'student')::user_role, COALESCE((u.raw_user_meta_data->>'age')::integer, 18), 100 FROM auth.users u LEFT JOIN public.profiles p ON u.id = p.id WHERE p.id IS NULL ON CONFLICT (id) DO UPDATE SET email = EXCLUDED.email, updated_at = NOW() RETURNING id, email, 'synced' as status ) SELECT us.id, us.email, us.status FROM user_sync us; END; $$ LANGUAGE plpgsql SECURITY DEFINER; [V0_FILE]typescriptreact:file="components/auth/simple-login.tsx" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Alert, AlertDescription } from "@/components/ui/alert" import { Loader2, LogIn } from "lucide-react" import { supabase } from "@/lib/supabase" import { useRouter } from "next/navigation" import { toast } from "@/hooks/use-toast" export function SimpleLogin() { const [isLoading, setIsLoading] = useState(false) const [credentials, setCredentials] = useState({ email: "", password: "", }) const router = useRouter() const handleLogin = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) try { const { data, error } = await supabase.auth.signInWithPassword({ email: credentials.email, password: credentials.password, }) if (error) { toast({ title: "Login Failed", description: error.message, variant: "destructive", }) return } if (data.user) { // Check if profile exists const { data: profile, error: profileError } = await supabase .from("profiles") .select("*") .eq("id", data.user.id) .single() if (profileError || !profile) { toast({ title: "Profile Missing", description: "Your profile wasn't found. Please contact support.", variant: "destructive", }) return } toast({ title: "Welcome back!", description: `Logged in as ${profile.full_name}`, }) router.push("/dashboard") } } catch (error: any) { toast({ title: "Unexpected Error", description: error.message, variant: "destructive", }) } finally { setIsLoading(false) } } const fillTestCredentials = (userType: string) => { const testUsers = { student: { email: "test@creativelabz.com", password: "test123456" }, existing: { email: "student@creativelabz.com", password: "student123" }, } const user = testUsers[userType as keyof typeof testUsers] if (user) { setCredentials(user) } } return ( Simple Login Sign in with your credentials Use the test credentials created in the Auth Restart tab, or try the pre-configured test users.

) } [V0_FILE]typescriptreact:file="lib/supabase.ts" import { createClient, type SupabaseClient } from "@supabase/supabase-js" /* ------------------------------------------------------------------ Safe Supabase client - falls back to a stub if env-vars are absent ------------------------------------------------------------------- */ const url = process.env.NEXT_PUBLIC_SUPABASE_URL ?? "" const anon = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY ?? "" /* ---------- stub for the preview sandbox ---------- */ function stub(): SupabaseClient { /* eslint-disable @typescript-eslint/no-explicit-any */ return new Proxy( {}, { get(_, prop) { if (prop !== "then") { throw new Error( `Supabase env vars are missing. Please add NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY before calling supabase.${String(prop)}().`, ) } }, }, ) as SupabaseClient } /* ---------- exported client ---------- */ export const supabase: SupabaseClient = url && anon ? createClient(url, anon) : stub() /* ---------- DB types (kept from earlier version) ---------- */ export type Database = { public: { Tables: { profiles: { Row: { id: string email: string full_name: string | null avatar_url: string | null role: "student" | "tutor" | "community_member" | "employer" | "admin" age: number | null bio: string | null lab_coins: number created_at: string updated_at: string } Insert: { id: string email: string full_name?: string | null avatar_url?: string | null role?: "student" | "tutor" | "community_member" | "employer" | "admin" age?: number | null bio?: string | null lab_coins?: number } Update: { full_name?: string | null avatar_url?: string | null role?: "student" | "tutor" | "community_member" | "employer" | "admin" age?: number | null bio?: string | null lab_coins?: number } } } } } [V0_FILE]sql:file="scripts/012-disable-email-confirmation.sql" -- This script helps with email confirmation issues -- Note: Some of these settings need to be changed in the Supabase Dashboard -- 1. Update existing users to be confirmed (if you have admin access) -- This would typically be done through the Supabase Dashboard or Admin API -- UPDATE auth.users SET email_confirmed_at = NOW() WHERE email_confirmed_at IS NULL; -- 2. Create a function to manually confirm users (for development) CREATE OR REPLACE FUNCTION public.confirm_user_email(user_email text) RETURNS json AS $$ DECLARE result json; BEGIN -- This is a development helper - in production, users should confirm via email UPDATE auth.users SET email_confirmed_at = NOW(), updated_at = NOW() WHERE email = user_email AND email_confirmed_at IS NULL; IF FOUND THEN result := json_build_object('success', true, 'message', 'User email confirmed'); ELSE result := json_build_object('success', false, 'message', 'User not found or already confirmed'); END IF; RETURN result; END; $$ LANGUAGE plpgsql SECURITY DEFINER; -- 3. Grant execute permission GRANT EXECUTE ON FUNCTION public.confirm_user_email(text) TO anon; GRANT EXECUTE ON FUNCTION public.confirm_user_email(text) TO authenticated; [V0_FILE]typescriptreact:file="components/auth/email-confirmation-helper.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Alert, AlertDescription } from "@/components/ui/alert" import { Badge } from "@/components/ui/badge" import { Loader2, Mail, CheckCircle, AlertTriangle, ExternalLink } from "lucide-react" import { supabase } from "@/lib/supabase" import { toast } from "@/hooks/use-toast" export function EmailConfirmationHelper() { const [isConfirming, setIsConfirming] = useState(false) const [email, setEmail] = useState("") const [result, setResult] = useState(null) const confirmUserEmail = async () => { if (!email) { toast({ title: "Error", description: "Please enter an email address", variant: "destructive", }) return } setIsConfirming(true) setResult(null) try { const { data, error } = await supabase.rpc("confirm_user_email", { user_email: email, }) if (error) { setResult({ success: false, message: `Database error: ${error.message}`, }) } else { setResult(data) if (data.success) { toast({ title: "Success!", description: "Email confirmed. You can now log in.", }) } } } catch (error: any) { setResult({ success: false, message: `Unexpected error: ${error.message}`, }) } finally { setIsConfirming(false) } } return (

Email Confirmation Helper Manually confirm user emails for development/testing Development Only: This bypasses email verification for testing. In production, users should verify their emails through the confirmation link.

Email to Confirm setEmail(e.target.value)} placeholder="user@example.com" />

{result && (

{result.success ? ( ) : ( )} {result.message}

)} Supabase Dashboard Settings Permanent fix - disable email confirmation in Supabase For a permanent solution, disable email confirmation in your Supabase project settings:

1 Go to your Supabase Dashboard

2 Navigate to Authentication → Settings

3 Find "Enable email confirmations"

4 Toggle it OFF for development

5 Save the settings

) } [V0_FILE]typescriptreact:file="components/auth/auth-restart.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Alert, AlertDescription } from "@/components/ui/alert" import { Badge } from "@/components/ui/badge" import { Loader2, RefreshCw, UserPlus, AlertTriangle, CheckCircle } from "lucide-react" import { supabase } from "@/lib/supabase" import { toast } from "@/hooks/use-toast" interface AuthResult { success: boolean message: string userId?: string profileCreated?: boolean needsConfirmation?: boolean } export function AuthRestart() { const [isCreating, setIsCreating] = useState(false) const [isTesting, setIsTesting] = useState(false) const [results, setResults] = useState([]) const [formData, setFormData] = useState({ email: "test@creativelabz.com", password: "test123456", fullName: "Test User", role: "student", age: "25", }) const testAuthConnection = async () => { setIsTesting(true) const testResults: AuthResult[] = [] try { // Test 1: Check if we can access auth const { data: session, error: sessionError } = await supabase.auth.getSession() if (sessionError) { testResults.push({ success: false, message: `Session check failed: ${sessionError.message}`, }) } else { testResults.push({ success: true, message: "Auth service accessible", }) } // Test 2: Check if we can access profiles table const { data: profiles, error: profileError } = await supabase.from("profiles").select("count").limit(1) if (profileError) { testResults.push({ success: false, message: `Profiles table access failed: ${profileError.message}`, }) } else { testResults.push({ success: true, message: "Profiles table accessible", }) } // Test 3: Try to call the sync function const { data: syncResult, error: syncError } = await supabase.rpc("sync_auth_users_to_profiles") if (syncError) { testResults.push({ success: false, message: `Sync function failed: ${syncError.message}`, }) } else { testResults.push({ success: true, message: `Sync function works. Found ${syncResult?.length || 0} users to sync`, }) } } catch (error: any) { testResults.push({ success: false, message: `Unexpected error: ${error.message}`, }) } setResults(testResults) setIsTesting(false) } const createTestUser = async () => { if (!formData.email || !formData.password || !formData.fullName) { toast({ title: "Error", description: "Please fill in all required fields", variant: "destructive", }) return } setIsCreating(true) const createResults: AuthResult[] = [] try { // Step 1: Try to sign up const { data: authData, error: authError } = await supabase.auth.signUp({ email: formData.email, password: formData.password, options: { data: { full_name: formData.fullName, role: formData.role, age: Number.parseInt(formData.age), }, }, }) if (authError) { if (authError.message.includes("already registered")) { createResults.push({ success: false, message: "User already exists. Try signing in instead or use the Email Confirmation Helper.", }) } else { createResults.push({ success: false, message: `Signup failed: ${authError.message}`, }) } } else if (authData.user) { // Check if user needs email confirmation if (!authData.user.email_confirmed_at && authData.session === null) { createResults.push({ success: true, message: "User created but needs email confirmation", userId: authData.user.id, needsConfirmation: true, }) // Try to auto-confirm for development try { const { data: confirmResult } = await supabase.rpc("confirm_user_email", { user_email: formData.email, }) if (confirmResult?.success) { createResults.push({ success: true, message: "Email automatically confirmed for development", }) } } catch (confirmError) { createResults.push({ success: false, message: "Could not auto-confirm email. Use the Email Confirmation Helper.", }) } } else { createResults.push({ success: true, message: "User created successfully in auth", userId: authData.user.id, }) } // Step 2: Check if profile was created automatically await new Promise((resolve) => setTimeout(resolve, 1000)) // Wait for trigger const { data: profile, error: profileError } = await supabase .from("profiles") .select("*") .eq("id", authData.user.id) .single() if (profileError || !profile) { // Step 3: Manually create profile if trigger failed const { error: manualProfileError } = await supabase.from("profiles").insert({ id: authData.user.id, email: formData.email, full_name: formData.fullName, role: formData.role as any, age: Number.parseInt(formData.age), lab_coins: formData.role === "student" ? 100 : 0, }) if (manualProfileError) { createResults.push({ success: false, message: `Profile creation failed: ${manualProfileError.message}`, profileCreated: false, }) } else { createResults.push({ success: true, message: "Profile created manually", profileCreated: true, }) } } else { createResults.push({ success: true, message: "Profile created automatically by trigger", profileCreated: true, }) } } } catch (error: any) { createResults.push({ success: false, message: `Unexpected error: ${error.message}`, }) } setResults(createResults) setIsCreating(false) // Show success toast if everything worked const allSuccessful = createResults.every((r) => r.success) if (allSuccessful) { toast({ title: "Success!", description: "User and profile created successfully", }) } } const quickFillTestUser = () => { const timestamp = Date.now() setFormData({ email: `test${timestamp}@creativelabz.com`, password: "test123456", fullName: `Test User ${timestamp}`, role: "student", age: "25", }) } return (

Authentication Restart Fresh start for authentication - test connection and create users with better error handling Make sure you've run the 011-reset-auth-setup.sql and{" "} 012-disable-email-confirmation.sql scripts first. {/* Test Connection */}

Step 1: Test Auth Connection

{/* Create User Form */}

Step 2: Create Test User

Email setFormData({ ...formData, email: e.target.value })} />

Password setFormData({ ...formData, password: e.target.value })} />

Full Name setFormData({ ...formData, fullName: e.target.value })} />

Role

Age setFormData({ ...formData, age: e.target.value })} />

{/* Results */} {results.length > 0 && (

Results:

{results.map((result, index) => (

{result.success ? ( ) : ( )}

{result.message}

{result.userId &&

User ID: {result.userId}

} {result.needsConfirmation && (

⚠️ Use the Email Confirmation Helper tab if login fails

)}

{result.success ? "Success" : "Failed"}

))}

)}

) } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { AuthForm } from "@/components/auth/auth-form" import { LoginDebug } from "@/components/auth/login-debug" import { ManualUserCreation } from "@/components/auth/manual-user-creation" import { AuthRestart } from "@/components/auth/auth-restart" import { SimpleLogin } from "@/components/auth/simple-login" import { EmailConfirmationHelper } from "@/components/auth/email-confirmation-helper" import { DatabaseConnectionTest } from "@/components/setup/database-connection-test" import { SupabaseSetupGuide } from "@/components/setup/supabase-setup-guide" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" export default function HomePage() { return (

{/* Header */}

Creative Labz

Interactive Learning Platform

Auth Restart Email Helper Login Manual Setup Debug Simple Login Setup Guide Test Connection

{/*

*/}

) } [V0_FILE]typescriptreact:file="lib/auth.ts" import { supabase } from "./supabase" export async function signUp(email: string, password: string, userData: any) { // Step 1: Create auth user const { data: authData, error: authError } = await supabase.auth.signUp({ email, password, options: { data: userData, }, }) if (authError) throw authError // Step 2: If auth user was created, create their profile if (authData.user) { const { error: profileError } = await supabase .from("profiles") .upsert( { id: authData.user.id, email: authData.user.email!, full_name: userData.full_name, role: userData.role, age: userData.age, lab_coins: userData.role === "student" || userData.role === "community_member" ? 100 : 0, bio: userData.bio || "New user on Creative Labz", }, { onConflict: "email" }, ) .select() .single() if (profileError) { console.error("Profile creation error:", profileError) // Don't throw here - auth user was created successfully } } return authData } export async function signIn(email: string, password: string) { const { data, error } = await supabase.auth.signInWithPassword({ email, password, }) if (error) throw error return data } export async function signOut() { const { error } = await supabase.auth.signOut() if (error) throw error } export async function getCurrentUser() { const { data: { user }, } = await supabase.auth.getUser() return user } /** * Fetch a user's profile row (if it exists). * Returns `null` when no matching profile is found instead of throwing, * preventing "JSON object requested, multiple (or no) rows returned" errors. */ export async function getUserProfile(userId: string) { // maybeSingle() ⇒ null when 0 rows, error when >1 row const { data, error } = await supabase.from("profiles").select("*").eq("id", userId).maybeSingle() if (error && error.details !== "The result contains 0 rows") { throw error } return data ?? null } /** * Get or create a user profile - ensures every authenticated user has a profile */ export async function getOrCreateUserProfile(userId: string, userEmail: string, userMetadata?: any) { // First try to get existing profile let profile = await getUserProfile(userId) if (!profile) { // Create profile if it doesn't exist const { data: newProfile, error: createError } = await supabase .from("profiles") .upsert( { id: userId, email: userEmail, full_name: userMetadata?.full_name || userEmail.split("@")[0] || "User", role: userMetadata?.role || "student", age: userMetadata?.age || 18, lab_coins: 100, bio: "New user on Creative Labz", }, { onConflict: "email" }, ) .select() .single() if (createError) { console.error("Error creating profile:", createError) return null } profile = newProfile } return profile } [V0_FILE]typescriptreact:file="components/auth/auth-form.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Textarea } from "@/components/ui/textarea" import { signUp, signIn } from "@/lib/auth" import { useRouter } from "next/navigation" import { toast } from "@/hooks/use-toast" import { TestUsersInfo } from "./test-users-info" export function AuthForm() { const [isLoading, setIsLoading] = useState(false) const router = useRouter() const handleSignUp = async (formData: FormData) => { setIsLoading(true) try { const email = formData.get("email") as string const password = formData.get("password") as string const fullName = formData.get("fullName") as string const role = formData.get("role") as string const age = Number.parseInt(formData.get("age") as string) const bio = formData.get("bio") as string const userData = { full_name: fullName, role, age, bio: bio || `${role.charAt(0).toUpperCase() + role.slice(1)} at Creative Labz`, } await signUp(email, password, userData) toast({ title: "Account created successfully!", description: "You can now sign in to access your dashboard.", }) // Switch to sign in tab const signInTab = document.querySelector('[data-value="signin"]') as HTMLElement signInTab?.click() // Pre-fill sign in form const emailInput = document.querySelector("#signin-email") as HTMLInputElement const passwordInput = document.querySelector("#signin-password") as HTMLInputElement if (emailInput) emailInput.value = email if (passwordInput) passwordInput.value = password } catch (error: any) { toast({ title: "Signup Error", description: error.message, variant: "destructive", }) } finally { setIsLoading(false) } } const handleSignIn = async (formData: FormData) => { setIsLoading(true) try { const email = formData.get("email") as string const password = formData.get("password") as string const { user } = await signIn(email, password) if (user) { toast({ title: "Welcome back!", description: "Redirecting to your dashboard...", }) router.push("/dashboard") } } catch (error: any) { toast({ title: "Sign In Error", description: error.message, variant: "destructive", }) } finally { setIsLoading(false) } } return (

Welcome to Creative Labz Join our learning community or sign in to continue Sign In Sign Up

Full Name

Password

Age

I want to join as a

Tell us about yourself (optional)

</div>
                <Button type="submit" className="w-full" disabled={isLoading}>
                  {isLoading ? "Creating account..." : "Create Account"}
                </Button>
              </form>
            </TabsContent>

</Tabs>
        </CardContent>
      </Card>

<TestUsersInfo />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/page.tsx"
"use client"

import { useEffect, useState } from "react"
import { getCurrentUser, getOrCreateUserProfile } from "@/lib/auth"
import { StudentDashboard } from "@/components/dashboard/student-dashboard"
import { TutorDashboard } from "@/components/dashboard/tutor-dashboard"
import { AdminDashboard } from "@/components/dashboard/admin-dashboard"
import { Card, CardContent } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"
import { useRouter } from "next/navigation"

interface UserProfile {
  id: string
  role: string
  full_name: string | null
  lab_coins: number
}

export default function DashboardPage() {
  const [profile, setProfile] = useState<UserProfile | null>(null)
  const [loading, setLoading] = useState(true)
  const router = useRouter()

useEffect(() => {
    async function loadProfile() {
      try {
        const user = await getCurrentUser()
        if (!user) {
          router.push("/")
          return
        }

// Use the new getOrCreateUserProfile function
        const userProfile = await getOrCreateUserProfile(user.id, user.email!, user.user_metadata)

if (userProfile) {
          setProfile(userProfile)
        } else {
          console.error("Failed to get or create user profile")
          router.push("/")
        }
      } catch (error) {
        console.error("Error loading profile:", error)
        router.push("/")
      } finally {
        setLoading(false)
      }
    }

loadProfile()
  }, [router])

if (loading) {
    return (
      <div className="space-y-6">
        <div className="space-y-2">
          <Skeleton className="h-8 w-64" />
          <Skeleton className="h-4 w-48" />
        </div>
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
          {Array.from({ length: 4 }).map((_, i) => (
            <Card key={i}>
              <CardContent className="p-4">
                <Skeleton className="h-16 w-full" />
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    )
  }

if (!profile) {
    return (
      <div className="flex items-center justify-center min-h-[400px]">
        <Card className="w-full max-w-md">
          <CardContent className="p-6 text-center">
            <h2 className="text-xl font-semibold mb-2">Profile Setup Required</h2>
            <p className="text-muted-foreground mb-4">
              We couldn't load your profile. Please try refreshing the page or contact support.
            </p>
            <button
              onClick={() => window.location.reload()}
              className="px-4 py-2 bg-primary text-primary-foreground rounded-md"
            >
              Refresh Page
            </button>
          </CardContent>
        </Card>
      </div>
    )
  }

const renderDashboard = () => {
    switch (profile.role) {
      case "student":
        return <StudentDashboard />
      case "tutor":
        return <TutorDashboard />
      case "admin":
        return <AdminDashboard />
      case "employer":
        return (
          <div className="text-center py-12">
            <h2 className="text-2xl font-semibold mb-4">Employer Dashboard</h2>
            <p className="text-muted-foreground">Coming soon! You'll be able to post jobs and find talent here.</p>
          </div>
        )
      case "community_member":
        return (
          <div className="text-center py-12">
            <h2 className="text-2xl font-semibold mb-4">Community Member Dashboard</h2>
            <p className="text-muted-foreground">Coming soon! Connect with your local community here.</p>
          </div>
        )
      default:
        return (
          <div className="text-center py-12">
            <h2 className="text-2xl font-semibold mb-4">Unknown Role</h2>
            <p className="text-muted-foreground">Please contact support to set up your account properly.</p>
          </div>
        )
    }
  }

return renderDashboard()
}
[V0_FILE]typescriptreact:file="components/layout/app-sidebar.tsx"
"use client"

import { BookOpen, Users, Briefcase, Calendar, Coins, Settings, Home, User } from "lucide-react"
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  useSidebar,
} from "@/components/ui/sidebar"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import Link from "next/link"
import { useEffect, useState } from "react"
import { getCurrentUser, getOrCreateUserProfile } from "@/lib/auth"

interface UserProfile {
  id: string
  full_name: string | null
  role: string
  lab_coins: number
  avatar_url: string | null
}

export function AppSidebar() {
  const [profile, setProfile] = useState<UserProfile | null>(null)

const defaultProfile = {
    id: "",
    full_name: "Guest",
    role: "student",
    lab_coins: 0,
    avatar_url: null,
  } as const

const { setOpen } = useSidebar()

useEffect(() => {
    async function loadProfile() {
      try {
        const user = await getCurrentUser()
        if (user) {
          const userProfile = await getOrCreateUserProfile(user.id, user.email!, user.user_metadata)

if (userProfile) setProfile(userProfile)
        }
      } catch (error) {
        console.error("Error loading profile:", error)
      }
    }
    loadProfile()
  }, [])

const getMenuItems = (role: string) => {
    const baseItems = [{ title: "Dashboard", url: "/dashboard", icon: Home }]

const roleSpecificItems = {
      student: [
        { title: "Academy", url: "/academy", icon: BookOpen },
        { title: "My Courses", url: "/my-courses", icon: BookOpen },
        { title: "Communities", url: "/communities", icon: Users },
        { title: "Services", url: "/services", icon: Calendar },
        { title: "Lab Coins", url: "/wallet", icon: Coins },
      ],
      tutor: [
        { title: "My Courses", url: "/tutor/courses", icon: BookOpen },
        { title: "Create Course", url: "/tutor/create", icon: BookOpen },
        { title: "Communities", url: "/communities", icon: Users },
        { title: "Services", url: "/services", icon: Calendar },
      ],
      employer: [
        { title: "Job Board", url: "/jobs", icon: Briefcase },
        { title: "Post Job", url: "/jobs/create", icon: Briefcase },
        { title: "My Jobs", url: "/jobs/my-jobs", icon: Briefcase },
        { title: "Communities", url: "/communities", icon: Users },
      ],
      admin: [
        { title: "Academy", url: "/admin/academy", icon: BookOpen },
        { title: "Communities", url: "/admin/communities", icon: Users },
        { title: "Job Board", url: "/admin/jobs", icon: Briefcase },
        { title: "Services", url: "/admin/services", icon: Calendar },
        { title: "Users", url: "/admin/users", icon: User },
        { title: "Analytics", url: "/admin/analytics", icon: Settings },
      ],
      community_member: [
        { title: "Communities", url: "/communities", icon: Users },
        { title: "Services", url: "/services", icon: Calendar },
      ],
    }

return [...baseItems, ...(roleSpecificItems[role as keyof typeof roleSpecificItems] || [])]
  }

const menuItems = profile ? getMenuItems(profile.role) : []

return (
    <Sidebar>
      <SidebarHeader className="border-b">
        <div className="flex items-center gap-3 p-4">
          <div className="w-8 h-8 bg-gradient-to-r from-purple-500 to-blue-500 rounded-lg flex items-center justify-center">
            <span className="text-white font-bold text-sm">CL</span>
          </div>
          <div>
            <h2 className="font-semibold text-lg">Creative Labz</h2>
            <p className="text-xs text-muted-foreground">Learning Platform</p>
          </div>
        </div>
      </SidebarHeader>

<SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Navigation</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              {menuItems.map((item) => (
                <SidebarMenuItem key={item.title}>
                  <SidebarMenuButton asChild>
                    <Link href={item.url} onClick={() => setOpen(false)}>
                      <item.icon className="w-4 h-4" />
                      <span>{item.title}</span>
                    </Link>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>

<SidebarFooter className="border-t">
        {profile && (
          <div className="p-4">
            <div className="flex items-center gap-3 mb-3">
              <Avatar className="w-8 h-8">
                <AvatarImage src={(profile ?? defaultProfile).avatar_url || undefined} />
                <AvatarFallback>{(profile ?? defaultProfile).full_name?.charAt(0) || "U"}</AvatarFallback>
              </Avatar>
              <div className="flex-1 min-w-0">
                <p className="text-sm font-medium truncate">{(profile ?? defaultProfile).full_name || "User"}</p>
                <p className="text-xs text-muted-foreground capitalize">
                  {(profile ?? defaultProfile).role.replace("_", " ")}
                </p>
              </div>
            </div>

{(profile.role === "student" || profile.role === "community_member") && (
              <div className="flex items-center gap-2 text-sm bg-yellow-50 p-2 rounded-lg">
                <Coins className="w-4 h-4 text-yellow-600" />
                <span className="font-medium text-yellow-800">{(profile ?? defaultProfile).lab_coins} Lab Coins</span>
              </div>
            )}
          </div>
        )}
      </SidebarFooter>
    </Sidebar>
  )
}
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx"
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 }</article></body></html>