[V0_FILE]plaintext:file=".gitignore" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="DEPLOYMENT-INSTRUCTIONS.md" # 🚀 Portfolio Management System - Automatic Deployment ## What This System Does - Manages your investment portfolio - Tracks income and expenses - Stores documents securely - Handles contact form messages - Manages email inbox - User management with roles ## 🎯 SIMPLE DEPLOYMENT STEPS (No Programming Required!) ### Step 1: Get Your Database 1. Go to [Neon.tech](https://neon.tech) (Free PostgreSQL database) 2. Sign up with your email 3. Create a new project 4. Copy the connection string (looks like: postgresql://username:password@host/database) ### Step 2: Deploy to Vercel 1. Go to [Vercel.com](https://vercel.com) 2. Sign up with GitHub 3. Click "Import Project" 4. Connect this repository 5. In "Environment Variables" section, add: - `DATABASE_URL` = your Neon database connection string - `NEXTAUTH_SECRET` = click "Generate" button - `NEXTAUTH_URL` = will be auto-filled ### Step 3: Deploy! 1. Click "Deploy" 2. Wait 2-3 minutes 3. Your app will be live at: https://your-app-name.vercel.app ## 🔐 Your Login Details After deployment, login with: - **Email:** email@chiranjivipoudel.com.np - **Password:** P00n@m2054 - **Role:** Super Admin (Full Access) ## 📱 What You Can Do ✅ View dashboard with financial overview ✅ Add/edit portfolio investments ✅ Track income and expenses ✅ Upload and manage documents ✅ View contact form messages ✅ Manage email inbox ✅ Create new users and assign roles ✅ Customize app colors and settings ## 🆘 Need Help? If something doesn't work: 1. Check Vercel deployment logs 2. Make sure DATABASE_URL is correct 3. Ensure all environment variables are set 4. Contact support if needed ## 🎉 That's It! Your portfolio management system is now live and ready to use! [V0_FILE]markdown:file="MYSQL-SETUP.md" # MySQL Setup Guide This guide will help you set up the Portfolio Management System with MySQL database and local file storage. ## Prerequisites - Node.js 18+ installed - MySQL 8.0+ installed and running - Git installed ## Quick Setup ### 1. Database Setup First, create a MySQL database: \`\`\`sql CREATE DATABASE portfolio_db; CREATE USER 'portfolio_user'@'localhost' IDENTIFIED BY 'your_password'; GRANT ALL PRIVILEGES ON portfolio_db.* TO 'portfolio_user'@'localhost'; FLUSH PRIVILEGES; \`\`\` ### 2. Environment Configuration Copy the example environment file: \`\`\`bash cp .env.example .env.local \`\`\` Update `.env.local` with your MySQL connection: \`\`\`env # Database - MySQL DATABASE_URL="mysql://portfolio_user:your_password@localhost:3306/portfolio_db" # NextAuth.js NEXTAUTH_URL="http://localhost:3000" NEXTAUTH_SECRET="your-secret-key-here-make-it-long-and-random" # Email Configuration (optional) EMAIL_HOST="smtp.gmail.com" EMAIL_USER="your-email@gmail.com" EMAIL_PASSWORD="your-app-password" # Database Provider DB_PROVIDER="mysql" \`\`\` ### 3. Install Dependencies \`\`\`bash npm install \`\`\` ### 4. Database Migration Generate Prisma client and push schema: \`\`\`bash npx prisma generate npx prisma db push \`\`\` ### 5. Seed Database Run the setup script to create initial data: \`\`\`bash npm run setup # or npx tsx scripts/setup-database.ts \`\`\` ### 6. Create Uploads Directory \`\`\`bash mkdir -p public/uploads \`\`\` ### 7. Start Development Server \`\`\`bash npm run dev \`\`\` ## Login Credentials After setup, you can login with: - **Email**: email@chiranjivipoudel.com.np - **Password**: P00n@m2054 - **Role**: SUPER_ADMIN ## File Storage Files are stored locally in the `public/uploads/` directory. Make sure this directory has proper write permissions. ## Production Deployment For production deployment: 1. Set up MySQL database on your server 2. Update environment variables 3. Ensure `public/uploads/` directory exists and is writable 4. Run database migrations 5. Seed the database ## Troubleshooting ### Database Connection Issues 1. Verify MySQL is running: `sudo systemctl status mysql` 2. Check database credentials 3. Ensure database exists 4. Test connection: `mysql -u portfolio_user -p portfolio_db` ### File Upload Issues 1. Check directory permissions: `chmod 755 public/uploads` 2. Ensure directory exists 3. Check disk space ### Common Errors - **"Table doesn't exist"**: Run `npx prisma db push` - **"Access denied"**: Check MySQL user permissions - **"File upload failed"**: Check directory permissions and disk space ## Features - ✅ MySQL database - ✅ Local file storage - ✅ User authentication - ✅ Portfolio management - ✅ Document upload/management - ✅ Transaction tracking - ✅ Email management - ✅ Contact form - ✅ Admin dashboard ## Support For issues or questions, please check the troubleshooting section above or create an issue in the repository. [V0_FILE]markdown:file="NEON-DEPLOYMENT.md" ## 🔧 **Complete Environment Variables Setup** **In Vercel Dashboard → Environment Variables, add all FOUR variables:** \`\`\`env DATABASE_URL=postgresql://your-username:your-password@ep-xxx.us-east-1.aws.neon.tech/your-db?sslmode=require NEXTAUTH_SECRET=your-generated-secret-here NEXTAUTH_URL=https://your-app-name.vercel.app BLOB_READ_WRITE_TOKEN=vercel_blob_rw_fRjwhLkfQqjnfr69_BoRzvVkOye7HMDJL8hvH9rI6yHzMDM \`\`\` [V0_FILE]markdown:file="PREVIEW-MODE.md" # Portfolio Management System - Preview Mode This version of the Portfolio Management System runs in **Preview Mode** with mock data for demonstration purposes. ## 🎯 What's Different in Preview Mode - **No Database Required** - Uses in-memory mock data - **No Prisma Setup** - Simplified for quick preview - **Sample Data Included** - Pre-populated with demo content - **Instant Setup** - No external dependencies ## 🚀 Quick Start \`\`\`bash # Install dependencies npm install # Start development server npm run dev # Visit http://localhost:3000 \`\`\` ## 📊 Mock Data Included ### Admin User - **Email**: email@chiranjivipoudel.com.np - **Password**: P00n@m2054 - **Role**: Super Admin ### Sample Portfolios - Tech Stocks ($45,000) - Real Estate ($120,000) ### Sample Services - Portfolio Management - Financial Planning ### Sample Transactions - Income: Salary ($5,000) - Expense: Food ($1,200) ## 🔄 Converting to Production To use with a real database: 1. **Add Prisma Client**: \`\`\`bash npm install @prisma/client prisma \`\`\` 2. **Configure Database**: - Set up your database (PostgreSQL, MySQL, etc.) - Update `DATABASE_URL` in environment variables 3. **Replace Mock Service**: - Update `lib/db.ts` to use Prisma client - Run database migrations 4. **Deploy**: - Follow deployment guides in the documentation ## 📱 Features Available in Preview ✅ **Dashboard** - View portfolio overview ✅ **Portfolio Management** - Browse sample portfolios ✅ **Transaction Tracking** - View sample transactions ✅ **Service Management** - Browse available services ✅ **Contact Form** - Submit contact messages ✅ **Admin Panel** - Access admin features ✅ **Responsive Design** - Mobile-friendly interface ## ⚠️ Limitations - Data is not persistent (resets on restart) - No real authentication (demo purposes only) - Limited to mock data scenarios - No file uploads or external integrations ## 🛠️ Development This preview mode is perfect for: - Testing the user interface - Demonstrating features to clients - Development without database setup - Quick prototyping and iteration --- **Ready to go live?** Check out our deployment guides for production setup with real databases! [V0_FILE]markdown:file="PRODUCTION-SETUP.md" # Production Database Setup Guide This guide will help you set up the Portfolio Management System with a real database for production use. ## 🎯 Database Options Choose one of the following database providers: ### Option 1: Supabase (Recommended) - ✅ Free tier available - ✅ Built-in authentication - ✅ Real-time features - ✅ Easy setup ### Option 2: Neon - ✅ Serverless PostgreSQL - ✅ Auto-scaling - ✅ Generous free tier ### Option 3: PlanetScale - ✅ MySQL-compatible - ✅ Branching workflow - ✅ Global edge network ### Option 4: Railway - ✅ Simple deployment - ✅ Multiple database types - ✅ Built-in monitoring ## 🚀 Quick Setup (Supabase) ### 1. Create Supabase Project 1. Go to [supabase.com](https://supabase.com) 2. Click "Start your project" 3. Create a new organization (if needed) 4. Create a new project 5. Wait for setup to complete ### 2. Get Database URL 1. Go to Settings → Database 2. Copy the connection string 3. Replace `[YOUR-PASSWORD]` with your actual password ### 3. Configure Environment Variables Create `.env.local` file: \`\`\`env # Supabase Database DATABASE_URL="postgresql://postgres:[YOUR-PASSWORD]@db.[PROJECT-REF].supabase.co:5432/postgres" # NextAuth NEXTAUTH_URL="http://localhost:3000" NEXTAUTH_SECRET="your-super-secret-key-min-32-chars" # Vercel Blob (optional) BLOB_READ_WRITE_TOKEN="your-blob-token" \`\`\` ### 4. Install Dependencies & Setup \`\`\`bash # Install dependencies npm install # Generate Prisma client npm run db:generate # Push database schema npm run db:push # Seed with sample data npm run setup:database # Start development server npm run dev \`\`\` ## 🔧 Alternative Database Setups ### Neon Setup 1. Create account at [neon.tech](https://neon.tech) 2. Create new project 3. Copy connection string 4. Update `DATABASE_URL` in `.env.local` ### PlanetScale Setup 1. Create account at [planetscale.com](https://planetscale.com) 2. Create new database 3. Create branch (main) 4. Get connection string 5. Update schema to use MySQL: \`\`\`prisma datasource db { provider = "mysql" url = env("DATABASE_URL") relationMode = "prisma" } \`\`\` ### Local PostgreSQL Setup 1. Install PostgreSQL locally 2. Create database: \`\`\`sql CREATE DATABASE portfolio_db; CREATE USER portfolio_user WITH PASSWORD 'your_password'; GRANT ALL PRIVILEGES ON DATABASE portfolio_db TO portfolio_user; \`\`\` 3. Update `.env.local`: \`\`\`env DATABASE_URL="postgresql://portfolio_user:your_password@localhost:5432/portfolio_db" \`\`\` ## 📦 Deployment ### Vercel Deployment 1. Push code to GitHub 2. Connect repository to Vercel 3. Add environment variables in Vercel dashboard 4. Deploy automatically ### Railway Deployment 1. Connect GitHub repository 2. Add environment variables 3. Deploy with one click ### Docker Deployment \`\`\`dockerfile FROM node:18-alpine WORKDIR /app COPY package*.json ./ RUN npm ci --only=production COPY . . RUN npm run build EXPOSE 3000 CMD ["npm", "start"] \`\`\` ## 🔐 Security Checklist - [ ] Use strong `NEXTAUTH_SECRET` (32+ characters) - [ ] Enable SSL for database connections - [ ] Set up proper CORS policies - [ ] Configure rate limiting - [ ] Enable database backups - [ ] Use environment variables for secrets - [ ] Set up monitoring and alerts ## 🧪 Testing Database Connection Run this command to test your database connection: \`\`\`bash npm run db:generate && npx prisma db push \`\`\` If successful, you should see: \`\`\` ✅ Generated Prisma Client 🚀 Your database is now in sync with your schema \`\`\` ## 📊 Database Management ### Prisma Studio \`\`\`bash npm run db:studio \`\`\` Opens a web interface to manage your data at `http://localhost:5555` ### Database Migrations \`\`\`bash # Create migration npm run db:migrate # Reset database npm run db:reset \`\`\` ## 🆘 Troubleshooting ### Common Issues **Connection Refused** - Check database URL format - Verify database is running - Check firewall settings **SSL Certificate Error** - Add `?sslmode=require` to connection string - For local development: `?sslmode=disable` **Migration Errors** - Reset database: `npm run db:reset` - Check schema syntax - Verify database permissions ### Getting Help - Check [Prisma Documentation](https://www.prisma.io/docs) - Visit [Supabase Docs](https://supabase.com/docs) - Open GitHub issue for project-specific problems --- 🎉 **Congratulations!** Your Portfolio Management System is now running with a production database! \`\`\` Create Supabase-specific setup: [V0_FILE]markdown:file="README.md" # Portfolio Management System A comprehensive portfolio management system built with Next.js, MySQL, and local file storage. ## Features - 🔐 **Authentication**: Secure login with NextAuth.js - 📊 **Portfolio Management**: Track and manage investment portfolios - 📄 **Document Management**: Upload and organize documents locally - 💰 **Transaction Tracking**: Monitor income and expenses - 📧 **Email Management**: Handle client communications - 📞 **Contact Management**: Manage client inquiries - 👥 **User Management**: Multi-role user system (Super Admin, Admin, User) - 🎨 **Customizable**: Configurable colors and branding ## Tech Stack - **Frontend**: Next.js 14, React, TypeScript, Tailwind CSS - **Backend**: Next.js API Routes, Prisma ORM - **Database**: MySQL - **Authentication**: NextAuth.js - **File Storage**: Local filesystem - **UI Components**: shadcn/ui ## Quick Start ### Prerequisites - Node.js 18+ - MySQL 8.0+ - Git ### Installation 1. **Clone the repository** \`\`\`bash git clone cd portfolio-management-system \`\`\` 2. **Install dependencies** \`\`\`bash npm install \`\`\` 3. **Set up MySQL database** \`\`\`sql CREATE DATABASE portfolio_db; CREATE USER 'portfolio_user'@'localhost' IDENTIFIED BY 'your_password'; GRANT ALL PRIVILEGES ON portfolio_db.* TO 'portfolio_user'@'localhost'; FLUSH PRIVILEGES; \`\`\` 4. **Configure environment** \`\`\`bash cp .env.example .env.local \`\`\` Update `.env.local` with your database credentials: \`\`\`env DATABASE_URL="mysql://portfolio_user:your_password@localhost:3306/portfolio_db" NEXTAUTH_URL="http://localhost:3000" NEXTAUTH_SECRET="your-secret-key-here" \`\`\` 5. **Set up database** \`\`\`bash npx prisma generate npx prisma db push npm run setup \`\`\` 6. **Create uploads directory** \`\`\`bash mkdir -p public/uploads \`\`\` 7. **Start development server** \`\`\`bash npm run dev \`\`\` 8. **Access the application** - URL: http://localhost:3000 - Email: email@chiranjivipoudel.com.np - Password: P00n@m2054 ## Project Structure \`\`\` ├── app/ # Next.js app directory │ ├── api/ # API routes │ ├── admin/ # Admin pages │ ├── dashboard/ # Dashboard pages │ └── ... ├── components/ # React components ├── lib/ # Utility libraries ├── prisma/ # Database schema ├── public/ # Static files │ └── uploads/ # Uploaded files ├── scripts/ # Setup and utility scripts └── styles/ # Global styles \`\`\` ## Database Schema The system uses the following main entities: - **Users**: Authentication and role management - **Portfolios**: Investment portfolio tracking - **Documents**: File management with local storage - **Transactions**: Financial transaction tracking - **Services**: Service offerings management - **Emails**: Email communication tracking - **ContactMessages**: Contact form submissions - **Settings**: System configuration ## File Storage Files are stored locally in the `public/uploads/` directory with the following structure: \`\`\` public/uploads/ ├── timestamp-filename.ext └── ... \`\`\` Files are accessible via `/uploads/filename` URLs. ## API Endpoints ### Authentication - `POST /api/auth/signin` - User login - `POST /api/auth/signout` - User logout ### Portfolio Management - `GET /api/portfolio` - Get portfolios - `POST /api/portfolio` - Create portfolio - `PUT /api/portfolio/[id]` - Update portfolio - `DELETE /api/portfolio/[id]` - Delete portfolio ### Document Management - `GET /api/documents` - Get documents - `POST /api/documents` - Create document record - `PUT /api/documents/[id]` - Update document - `DELETE /api/documents/[id]` - Delete document - `POST /api/upload` - Upload file ### Transaction Management - `GET /api/transactions` - Get transactions - `POST /api/transactions` - Create transaction - `PUT /api/transactions/[id]` - Update transaction - `DELETE /api/transactions/[id]` - Delete transaction ## User Roles - **SUPER_ADMIN**: Full system access - **ADMIN**: Administrative access (limited) - **USER**: Basic user access ## Development ### Available Scripts - `npm run dev` - Start development server - `npm run build` - Build for production - `npm run start` - Start production server - `npm run setup` - Set up database with sample data - `npx prisma studio` - Open Prisma database browser - `npx prisma db push` - Push schema changes to database ### Database Management \`\`\`bash # Generate Prisma client npx prisma generate # Push schema changes npx prisma db push # Reset database npx prisma db push --force-reset # View database npx prisma studio \`\`\` ## Deployment ### Production Setup 1. Set up MySQL database on your server 2. Configure environment variables 3. Build the application: `npm run build` 4. Start the server: `npm start` 5. Ensure `public/uploads/` directory exists and is writable ### Environment Variables Required environment variables for production: \`\`\`env DATABASE_URL="mysql://user:password@host:port/database" NEXTAUTH_URL="https://yourdomain.com" NEXTAUTH_SECRET="your-production-secret" EMAIL_HOST="smtp.yourdomain.com" EMAIL_USER="noreply@yourdomain.com" EMAIL_PASSWORD="your-email-password" \`\`\` ## Security Considerations - Change default admin credentials after first login - Use strong database passwords - Secure file upload directory permissions - Enable HTTPS in production - Regular database backups - Monitor file storage usage ## Contributing 1. Fork the repository 2. Create a feature branch 3. Make your changes 4. Test thoroughly 5. Submit a pull request ## License This project is licensed under the MIT License. ## Support For support and questions: 1. Check the [MySQL Setup Guide](MYSQL-SETUP.md) 2. Review the troubleshooting section 3. Create an issue in the repository --- Built with ❤️ by TechieGurkhas [V0_FILE]markdown:file="SUPABASE-SETUP.md" # 🚀 Supabase Setup Guide Follow this step-by-step guide to set up your Supabase database for the Portfolio Management System. ## Step 1: Create Supabase Account & Project ### 1.1 Sign Up for Supabase 1. Go to [supabase.com](https://supabase.com) 2. Click **"Start your project"** 3. Sign up with GitHub, Google, or email 4. Verify your email if required ### 1.2 Create New Project 1. Click **"New Project"** 2. Choose or create an organization 3. Fill in project details: - **Name**: `Portfolio Management System` - **Database Password**: Create a strong password (save this!) - **Region**: Choose closest to your users - **Pricing Plan**: Free tier is perfect for development 4. Click **"Create new project"** 5. Wait 2-3 minutes for setup to complete ## Step 2: Get Database Configuration ### 2.1 Get Database URL 1. In your Supabase dashboard, go to **Settings** → **Database** 2. Scroll down to **Connection string** 3. Copy the **URI** connection string 4. Replace `[YOUR-PASSWORD]` with your actual database password Example: \`\`\` postgresql://postgres:your_password@db.abcdefghijklmnop.supabase.co:5432/postgres \`\`\` ### 2.2 Get API Keys 1. Go to **Settings** → **API** 2. Copy these values: - **Project URL** (starts with `https://`) - **anon public** key - **service_role** key (keep this secret!) ## Step 3: Configure Environment Variables ### 3.1 Create Environment File Create `.env.local` in your project root: \`\`\` # After you create `.env.local`, add your Supabase public url & anon key # (they MUST start with NEXT_PUBLIC_ so the client can talk to Supabase): SUPABASE_NEXT_PUBLIC_SUPABASE_URL="" \`\`\` ### 3.2 Replace Placeholder Values Replace these placeholders with your actual values: - `your-project-ref` → Your Supabase project reference - `your-anon-key-here` → Your anon public key - `your-service-role-key-here` → Your service role key - `your_password` → Your database password - `your-super-secret-key...` → Generate a random 32+ character string ## Step 4: Install Dependencies & Setup Database ### 4.1 Install Required Packages \`\`\`bash npm install @supabase/supabase-js @prisma/client prisma bcryptjs npm install -D @types/bcryptjs \`\`\` ### 4.2 Generate Prisma Client \`\`\`bash npx prisma generate \`\`\` ### 4.3 Push Database Schema \`\`\`bash npx prisma db push \`\`\` ### 4.4 Seed Database with Sample Data \`\`\`bash npm run setup:supabase \`\`\` ## Step 5: Test Your Setup ### 5.1 Start Development Server \`\`\`bash npm run dev \`\`\` ### 5.2 Test Database Connection 1. Open http://localhost:3000 2. Try logging in with: - **Email**: `email@chiranjivipoudel.com.np` - **Password**: `P00n@m2054` ### 5.3 Verify Data in Supabase 1. Go to your Supabase dashboard 2. Click **Table Editor** 3. You should see tables like `User`, `Portfolio`, `Transaction`, etc. 4. Check that sample data has been created ## Step 6: Optional Configurations ### 6.1 Enable Row Level Security (RLS) 1. In Supabase dashboard, go to **Authentication** → **Policies** 2. Enable RLS for sensitive tables 3. Create policies as needed ### 6.2 Set up Realtime (Optional) 1. Go to **Database** → **Replication** 2. Enable realtime for tables you want to sync 3. Update your app to use Supabase realtime features ### 6.3 Configure Storage (Optional) 1. Go to **Storage** 2. Create buckets for file uploads 3. Set up policies for file access ## 🔧 Troubleshooting ### Common Issues **❌ "Invalid connection string"** - Check your DATABASE_URL format - Ensure password doesn't contain special characters that need encoding - Verify project reference is correct **❌ "Authentication failed"** - Double-check your database password - Make sure you're using the correct connection string - Try resetting your database password in Supabase settings **❌ "Cannot connect to database"** - Verify your internet connection - Check if Supabase is experiencing downtime - Ensure your IP isn't blocked (shouldn't be an issue with Supabase) **❌ "Prisma schema errors"** - Run `npx prisma generate` after any schema changes - Make sure your DATABASE_URL is set correctly - Try `npx prisma db push --force-reset` to reset the database ### Getting Help - 📚 [Supabase Documentation](https://supabase.com/docs) - 💬 [Supabase Discord Community](https://discord.supabase.com) - 🐛 [Report Issues on GitHub](https://github.com/supabase/supabase/issues) ## 🎉 Success! If everything is working correctly, you should see: - ✅ Database tables created in Supabase - ✅ Sample data populated - ✅ Admin login working - ✅ All features functional Your Portfolio Management System is now running with a production-ready Supabase database! ## Next Steps 1. **Deploy to Vercel**: Connect your GitHub repo and deploy 2. **Customize Data**: Modify the sample data to match your needs 3. **Add Features**: Extend the system with additional functionality 4. **Set up Monitoring**: Configure alerts and monitoring 5. **Backup Strategy**: Set up automated backups --- 🚀 **Happy building with Supabase!** [V0_FILE]markdown:file="VERCEL-DEPLOYMENT.md" # 🚀 Vercel Deployment Guide ## Required Environment Variables Add these in your Vercel dashboard under Settings → Environment Variables: ### 1. Database (Neon) \`\`\` DATABASE_URL=postgresql://username:password@host:5432/database?sslmode=require \`\`\` ### 2. Authentication \`\`\` NEXTAUTH_SECRET=your-generated-secret-here NEXTAUTH_URL=https://your-app.vercel.app \`\`\` ### 3. File Storage (Auto-provided by Vercel) \`\`\` BLOB_READ_WRITE_TOKEN=auto-generated-by-vercel \`\`\` ## Deployment Steps 1. **Connect Repository**: Import your GitHub repository to Vercel 2. **Add Environment Variables**: Add the variables above 3. **Deploy**: Click "Deploy" - everything else is automatic! ## After Deployment 1. Visit your app URL 2. The system will auto-setup on first visit 3. Login with: `email@chiranjivipoudel.com.np` / `P00n@m2054` ## Features Included ✅ Auto-setup on first deployment ✅ Live data updates every 5 seconds ✅ File upload to Vercel Blob ✅ PostgreSQL database with Neon ✅ Role-based authentication ✅ Portfolio management ✅ Income/expense tracking ✅ Document management ✅ Contact form and email inbox ## Support If you encounter issues: 1. Check Vercel deployment logs 2. Verify environment variables are set 3. Ensure database connection string is correct [V0_FILE]typescriptreact:file="app/admin/contact/page.tsx" "use client" import { useState } from "react" import { useSession } from "next-auth/react" import { useRouter } from "next/navigation" import { DashboardLayout } from "@/components/dashboard-layout" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { MessageSquare, Eye, Trash2, Mail } from "lucide-react" import useSWR, { mutate } from "swr" import { useToast } from "@/hooks/use-toast" const fetcher = (url: string) => fetch(url).then((res) => res.json()) export default function ContactInboxPage() { const { data: session } = useSession() const router = useRouter() const [selectedMessage, setSelectedMessage] = useState(null) const [isDialogOpen, setIsDialogOpen] = useState(false) const { data: messages } = useSWR("/api/contact", fetcher) const { toast } = useToast() // Redirect if not super admin if (session?.user?.role !== "SUPER_ADMIN") { router.push("/dashboard") return null } const handleMarkAsRead = async (id: string, isRead: boolean) => { try { const response = await fetch(`/api/contact/${id}`, { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ isRead: !isRead }), }) if (response.ok) { mutate("/api/contact") } } catch (error) { toast({ title: "Error", description: "Failed to update message status", variant: "destructive", }) } } const handleDelete = async (id: string) => { if (!confirm("Are you sure you want to delete this message?")) return try { const response = await fetch(`/api/contact/${id}`, { method: "DELETE", }) if (response.ok) { toast({ title: "Success", description: "Message deleted successfully", }) mutate("/api/contact") } } catch (error) { toast({ title: "Error", description: "Failed to delete message", variant: "destructive", }) } } const handleViewMessage = (message: any) => { setSelectedMessage(message) setIsDialogOpen(true) if (!message.isRead) { handleMarkAsRead(message.id, message.isRead) } } return (

Contact Inbox

Messages from your contact form

{messages?.map((message: any) => (

{message.name}

({message.email})

{!message.isRead && New}

{message.subject}

{message.message}

{new Date(message.createdAt).toLocaleString()}

))}

{messages?.length === 0 && (

No messages

No contact form submissions yet.

)} {/* Message Viewer Dialog */}

) } [V0_FILE]typescriptreact:file="app/admin/emails/page.tsx" "use client" import { useState } from "react" import { useSession } from "next-auth/react" import { useRouter } from "next/navigation" import { DashboardLayout } from "@/components/dashboard-layout" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Mail, MailOpen, Trash2, Eye, RefreshCw } from "lucide-react" import useSWR, { mutate } from "swr" import { useToast } from "@/hooks/use-toast" const fetcher = (url: string) => fetch(url).then((res) => res.json()) export default function EmailsPage() { const { data: session } = useSession() const router = useRouter() const [selectedEmail, setSelectedEmail] = useState(null) const [isDialogOpen, setIsDialogOpen] = useState(false) const { data: emails, isLoading } = useSWR("/api/emails", fetcher) const { toast } = useToast() // Redirect if not super admin if (session?.user?.role !== "SUPER_ADMIN") { router.push("/dashboard") return null } const handleMarkAsRead = async (id: string, isRead: boolean) => { try { const response = await fetch(`/api/emails/${id}`, { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ isRead: !isRead }), }) if (response.ok) { mutate("/api/emails") } } catch (error) { toast({ title: "Error", description: "Failed to update email status", variant: "destructive", }) } } const handleDelete = async (id: string) => { if (!confirm("Are you sure you want to delete this email?")) return try { const response = await fetch(`/api/emails/${id}`, { method: "DELETE", }) if (response.ok) { toast({ title: "Success", description: "Email deleted successfully", }) mutate("/api/emails") } } catch (error) { toast({ title: "Error", description: "Failed to delete email", variant: "destructive", }) } } const handleViewEmail = (email: any) => { setSelectedEmail(email) setIsDialogOpen(true) if (!email.isRead) { handleMarkAsRead(email.id, email.isRead) } } const refreshEmails = async () => { // This would trigger the email fetching process // In a real implementation, you'd have a background job or webhook mutate("/api/emails") toast({ title: "Refreshed", description: "Email list has been refreshed", }) } return (

Email Management

Manage incoming emails from your domain

{emails?.map((email: any) => (

{email.isRead ? ( ) : ( )}

{email.sender}

{!email.isRead && New}

{email.subject}

{new Date(email.receivedAt).toLocaleString()}

))}

{emails?.length === 0 && (

No emails

No emails have been received yet.

)} {/* Email Viewer Dialog */}

) } [V0_FILE]typescriptreact:file="app/admin/users/page.tsx" "use client" import type React from "react" import { useState } from "react" import { useSession } from "next-auth/react" import { useRouter } from "next/navigation" import { DashboardLayout } from "@/components/dashboard-layout" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Badge } from "@/components/ui/badge" import { Plus, Edit, Trash2, Users } from "lucide-react" import useSWR, { mutate } from "swr" import { useToast } from "@/hooks/use-toast" const fetcher = (url: string) => fetch(url).then((res) => res.json()) export default function UsersPage() { const { data: session } = useSession() const router = useRouter() const [isDialogOpen, setIsDialogOpen] = useState(false) const [editingUser, setEditingUser] = useState(null) const [formData, setFormData] = useState({ email: "", password: "", role: "USER", }) const { data: users } = useSWR("/api/users", fetcher) const { toast } = useToast() // Redirect if not super admin if (session?.user?.role !== "SUPER_ADMIN") { router.push("/dashboard") return null } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() try { const url = editingUser ? `/api/users/${editingUser.id}` : "/api/users" const method = editingUser ? "PUT" : "POST" const response = await fetch(url, { method, headers: { "Content-Type": "application/json" }, body: JSON.stringify(formData), }) if (response.ok) { toast({ title: "Success", description: `User ${editingUser ? "updated" : "created"} successfully`, }) setIsDialogOpen(false) setEditingUser(null) setFormData({ email: "", password: "", role: "USER" }) mutate("/api/users") } else { const error = await response.json() toast({ title: "Error", description: error.error || "Something went wrong", variant: "destructive", }) } } catch (error) { toast({ title: "Error", description: "Something went wrong", variant: "destructive", }) } } const handleEdit = (user: any) => { setEditingUser(user) setFormData({ email: user.email, password: "", role: user.role, }) setIsDialogOpen(true) } const handleDelete = async (id: string) => { if (!confirm("Are you sure you want to delete this user? This will also delete all their data.")) return try { const response = await fetch(`/api/users/${id}`, { method: "DELETE", }) if (response.ok) { toast({ title: "Success", description: "User deleted successfully", }) mutate("/api/users") } } catch (error) { toast({ title: "Error", description: "Failed to delete user", variant: "destructive", }) } } const getRoleBadgeColor = (role: string) => { switch (role) { case "SUPER_ADMIN": return "bg-red-100 text-red-800" case "ADMIN": return "bg-blue-100 text-blue-800" default: return "bg-gray-100 text-gray-800" } } return (

User Management

Manage users and their roles

{users?.map((user: any) => (

{user.email} {user.role.replace("_", " ")}

{user.email !== session?.user?.email && ( )}

Portfolio Items: {user._count.portfolios}

Documents: {user._count.documents}

Created: {new Date(user.createdAt).toLocaleDateString()}

))}

{users?.length === 0 && (

No users

Get started by creating your first user.

)}

) } [V0_FILE]typescript:file="app/api/auth/[...nextauth]/route.ts" import NextAuth from "next-auth" import { authOptions } from "@/lib/auth" const handler = NextAuth(authOptions) export { handler as GET, handler as POST } [V0_FILE]typescript:file="app/api/contact/[id]/route.ts" import { type NextRequest, NextResponse } from "next/server" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" import { db } from "@/lib/db" export async function PUT(request: NextRequest, { params }: { params: { id: string } }) { try { const session = await getServerSession(authOptions) if (!session || session.user.role !== "SUPER_ADMIN") { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const { isRead } = await request.json() const message = await db.contactMessage.update({ where: { id: params.id }, data: { isRead }, }) return NextResponse.json(message) } catch (error) { console.error("Contact message update error:", error) return NextResponse.json({ error: "Internal Server Error" }, { status: 500 }) } } export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) { try { const session = await getServerSession(authOptions) if (!session || session.user.role !== "SUPER_ADMIN") { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } await db.contactMessage.delete({ where: { id: params.id }, }) return NextResponse.json({ success: true }) } catch (error) { console.error("Contact message deletion error:", error) return NextResponse.json({ error: "Internal Server Error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/contact/route.ts" import { type NextRequest, NextResponse } from "next/server" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" import { db } from "@/lib/db" export async function GET() { try { const session = await getServerSession(authOptions) if (!session || session.user.role !== "SUPER_ADMIN") { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const messages = await db.contactMessage.findMany({ orderBy: { createdAt: "desc" }, }) return NextResponse.json(messages) } catch (error) { console.error("Contact messages fetch error:", error) return NextResponse.json({ error: "Internal Server Error" }, { status: 500 }) } } export async function POST(request: NextRequest) { try { const { name, email, subject, message } = await request.json() // Validate required fields if (!name || !email || !message) { return NextResponse.json({ error: "Missing required fields" }, { status: 400 }) } const contactMessage = await db.contactMessage.create({ data: { name, email, subject: subject || "Contact Form Submission", message, }, }) // Here you could add email forwarding logic // await sendEmailNotification(contactMessage) return NextResponse.json(contactMessage) } catch (error) { console.error("Contact message creation error:", error) return NextResponse.json({ error: "Internal Server Error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/documents/[id]/route.ts" import { type NextRequest, NextResponse } from "next/server" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" import { db } from "@/lib/db" import { unlink } from "fs/promises" import { join } from "path" export async function PUT(request: NextRequest, { params }: { params: { id: string } }) { try { const session = await getServerSession(authOptions) if (!session) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const { title } = await request.json() // Check if document exists and user has permission const existingDocument = await db.document.findUnique({ where: { id: params.id }, }) if (!existingDocument) { return NextResponse.json({ error: "Document not found" }, { status: 404 }) } // Permission check if ( existingDocument.userId !== session.user.id && session.user.role !== "SUPER_ADMIN" && session.user.role !== "ADMIN" ) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const document = await db.document.update({ where: { id: params.id }, data: { title }, include: { user: { select: { email: true }, }, }, }) return NextResponse.json(document) } catch (error) { console.error("Document update error:", error) return NextResponse.json({ error: "Internal Server Error" }, { status: 500 }) } } export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) { try { const session = await getServerSession(authOptions) if (!session) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } // Check if document exists and user has permission const existingDocument = await db.document.findUnique({ where: { id: params.id }, }) if (!existingDocument) { return NextResponse.json({ error: "Document not found" }, { status: 404 }) } // Permission check if ( existingDocument.userId !== session.user.id && session.user.role !== "SUPER_ADMIN" && session.user.role !== "ADMIN" ) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } // Delete file from filesystem try { const fullPath = join(process.cwd(), "public", existingDocument.filePath) await unlink(fullPath) } catch (fileError) { console.warn("Could not delete file:", fileError) } // Delete from database await db.document.delete({ where: { id: params.id }, }) return NextResponse.json({ success: true }) } catch (error) { console.error("Document deletion error:", error) return NextResponse.json({ error: "Internal Server Error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/documents/route.ts" import { type NextRequest, NextResponse } from "next/server" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" import { db } from "@/lib/db" export async function GET() { try { const session = await getServerSession(authOptions) if (!session) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } let documents if (session.user.role === "SUPER_ADMIN" || session.user.role === "ADMIN") { documents = await db.document.findMany({ include: { user: { select: { email: true } } }, orderBy: { uploadedAt: "desc" }, }) } else { documents = await db.document.findMany({ where: { userId: session.user.id }, orderBy: { uploadedAt: "desc" }, }) } return NextResponse.json(documents) } catch (error) { return NextResponse.json({ error: "Internal Server Error" }, { status: 500 }) } } export async function POST(request: NextRequest) { try { const session = await getServerSession(authOptions) if (!session) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const { title, filename, filePath, size, mimeType } = await request.json() const document = await db.document.create({ data: { title, fileName: filename, filePath, fileSize: size, mimeType, userId: session.user.id, }, }) return NextResponse.json(document) } catch (error) { return NextResponse.json({ error: "Internal Server Error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/emails/[id]/route.ts" import { type NextRequest, NextResponse } from "next/server" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" import { db } from "@/lib/db" export async function PUT(request: NextRequest, { params }: { params: { id: string } }) { try { const session = await getServerSession(authOptions) if (!session || session.user.role !== "SUPER_ADMIN") { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const { isRead } = await request.json() const email = await db.email.update({ where: { id: params.id }, data: { isRead }, }) return NextResponse.json(email) } catch (error) { console.error("Email update error:", error) return NextResponse.json({ error: "Internal Server Error" }, { status: 500 }) } } export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) { try { const session = await getServerSession(authOptions) if (!session || session.user.role !== "SUPER_ADMIN") { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } await db.email.delete({ where: { id: params.id }, }) return NextResponse.json({ success: true }) } catch (error) { console.error("Email deletion error:", error) return NextResponse.json({ error: "Internal Server Error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/emails/fetch/route.ts" import { NextResponse } from "next/server" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" import { triggerEmailFetch } from "@/lib/email-service" export async function POST() { try { const session = await getServerSession(authOptions) if (!session || session.user.role !== "SUPER_ADMIN") { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const result = await triggerEmailFetch() return NextResponse.json(result) } catch (error) { console.error("Email fetch trigger error:", error) return NextResponse.json({ error: "Internal Server Error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/emails/route.ts" import { type NextRequest, NextResponse } from "next/server" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" import { db } from "@/lib/db" export async function GET() { try { const session = await getServerSession(authOptions) if (!session || session.user.role !== "SUPER_ADMIN") { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const emails = await db.email.findMany({ orderBy: { receivedAt: "desc" }, take: 50, // Limit to last 50 emails }) return NextResponse.json(emails) } catch (error) { console.error("Email fetch error:", error) return NextResponse.json({ error: "Internal Server Error" }, { status: 500 }) } } export async function POST(request: NextRequest) { try { const session = await getServerSession(authOptions) if (!session || session.user.role !== "SUPER_ADMIN") { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const { sender, subject, body, receivedAt } = await request.json() const email = await db.email.create({ data: { sender, subject, body, receivedAt: new Date(receivedAt), }, }) return NextResponse.json(email) } catch (error) { console.error("Email creation error:", error) return NextResponse.json({ error: "Internal Server Error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/health/route.ts" import { NextResponse } from "next/server" import { db } from "@/lib/db" export async function GET() { try { // Test database connection await db.$queryRaw`SELECT 1` return NextResponse.json({ status: "healthy", timestamp: new Date().toISOString(), database: "connected", environment: process.env.NODE_ENV, }) } catch (error) { console.error("Health check failed:", error) return NextResponse.json( { status: "unhealthy", timestamp: new Date().toISOString(), database: "disconnected", error: "Database connection failed", }, { status: 503 }, ) } } [V0_FILE]typescript:file="app/api/portfolio/[id]/route.ts" import { type NextRequest, NextResponse } from "next/server" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" import { db } from "@/lib/db" export async function PUT(request: NextRequest, { params }: { params: { id: string } }) { try { const session = await getServerSession(authOptions) if (!session) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const { title, value, description } = await request.json() // Check if user owns this portfolio item or is admin const existingItem = await db.portfolio.findUnique({ where: { id: params.id }, }) if (!existingItem) { return NextResponse.json({ error: "Portfolio item not found" }, { status: 404 }) } if ( existingItem.userId !== session.user.id && session.user.role !== "SUPER_ADMIN" && session.user.role !== "ADMIN" ) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const portfolio = await db.portfolio.update({ where: { id: params.id }, data: { title, value, description }, }) return NextResponse.json(portfolio) } catch (error) { return NextResponse.json({ error: "Internal Server Error" }, { status: 500 }) } } export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) { try { const session = await getServerSession(authOptions) if (!session) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } // Check if user owns this portfolio item or is admin const existingItem = await db.portfolio.findUnique({ where: { id: params.id }, }) if (!existingItem) { return NextResponse.json({ error: "Portfolio item not found" }, { status: 404 }) } if ( existingItem.userId !== session.user.id && session.user.role !== "SUPER_ADMIN" && session.user.role !== "ADMIN" ) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } await db.portfolio.delete({ where: { id: params.id }, }) return NextResponse.json({ success: true }) } catch (error) { return NextResponse.json({ error: "Internal Server Error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/portfolio/route.ts" import { type NextRequest, NextResponse } from "next/server" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" import { db } from "@/lib/db" export async function GET() { try { const session = await getServerSession(authOptions) if (!session) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } let portfolios if (session.user.role === "SUPER_ADMIN" || session.user.role === "ADMIN") { portfolios = await db.portfolio.findMany({ include: { user: { select: { email: true } } }, orderBy: { updatedAt: "desc" }, }) } else { portfolios = await db.portfolio.findMany({ where: { userId: session.user.id }, orderBy: { updatedAt: "desc" }, }) } return NextResponse.json(portfolios) } catch (error) { return NextResponse.json({ error: "Internal Server Error" }, { status: 500 }) } } export async function POST(request: NextRequest) { try { const session = await getServerSession(authOptions) if (!session) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const { title, value, description } = await request.json() const portfolio = await db.portfolio.create({ data: { title, value, description, userId: session.user.id, }, }) return NextResponse.json(portfolio) } catch (error) { return NextResponse.json({ error: "Internal Server Error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/services/[id]/route.ts" import { type NextRequest, NextResponse } from "next/server" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" import { db } from "@/lib/db" export async function PUT(request: NextRequest, { params }: { params: { id: string } }) { try { const session = await getServerSession(authOptions) if (!session || session.user.role === "USER") { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const { title, description, url, visible } = await request.json() const service = await db.service.update({ where: { id: params.id }, data: { title, description, url, visible, }, }) return NextResponse.json(service) } catch (error) { console.error("Service update error:", error) return NextResponse.json({ error: "Internal Server Error" }, { status: 500 }) } } export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) { try { const session = await getServerSession(authOptions) if (!session || session.user.role === "USER") { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } await db.service.delete({ where: { id: params.id }, }) return NextResponse.json({ success: true }) } catch (error) { console.error("Service deletion error:", error) return NextResponse.json({ error: "Internal Server Error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/services/route.ts" import { type NextRequest, NextResponse } from "next/server" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" import { db } from "@/lib/db" export async function GET() { try { const session = await getServerSession(authOptions) if (!session) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const services = await db.service.findMany({ orderBy: { createdAt: "desc" }, }) return NextResponse.json(services) } catch (error) { return NextResponse.json({ error: "Internal Server Error" }, { status: 500 }) } } export async function POST(request: NextRequest) { try { const session = await getServerSession(authOptions) if (!session || session.user.role === "USER") { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const { title, description, url, visible } = await request.json() const service = await db.service.create({ data: { title, description, url, visible: visible ?? true, }, }) return NextResponse.json(service) } catch (error) { return NextResponse.json({ error: "Internal Server Error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/settings/route.ts" import { type NextRequest, NextResponse } from "next/server" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" import { db } from "@/lib/db" export async function GET() { try { const settings = await db.settings.findFirst({ where: { id: "default" }, }) if (!settings) { // Create default settings if they don't exist const defaultSettings = await db.settings.create({ data: { id: "default", primaryColor: "#3b82f6", accentColor: "#10b981", footerText: "Built by TechieGurkhas", }, }) return NextResponse.json(defaultSettings) } return NextResponse.json(settings) } catch (error) { return NextResponse.json({ error: "Internal Server Error" }, { status: 500 }) } } export async function PUT(request: NextRequest) { try { const session = await getServerSession(authOptions) if (!session || session.user.role === "USER") { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const { primaryColor, accentColor, footerText } = await request.json() const settings = await db.settings.upsert({ where: { id: "default" }, update: { primaryColor, accentColor, footerText, }, create: { id: "default", primaryColor, accentColor, footerText, }, }) return NextResponse.json(settings) } catch (error) { return NextResponse.json({ error: "Internal Server Error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/setup/route.ts" import { NextResponse } from "next/server" import { setupDatabase } from "@/scripts/setup-database" export async function POST() { try { const result = await setupDatabase() return NextResponse.json(result) } catch (error) { console.error("Setup error:", error) return NextResponse.json({ error: "Setup failed" }, { status: 500 }) } } export async function GET() { return NextResponse.json({ message: "Setup endpoint ready" }) } [V0_FILE]typescript:file="app/api/setup/status/route.ts" import { NextResponse } from "next/server" import { db } from "@/lib/db" export async function GET() { try { // Check if admin user exists const adminExists = await db.user.findFirst({ where: { role: "SUPER_ADMIN" }, }) // Check if settings exist const settingsExist = await db.settings.findFirst() const isSetup = !!(adminExists && settingsExist) return NextResponse.json({ isSetup, adminExists: !!adminExists, settingsExist: !!settingsExist, timestamp: new Date().toISOString(), }) } catch (error) { return NextResponse.json({ isSetup: false, error: "Database connection failed", }) } } [V0_FILE]typescript:file="app/api/test-blob/route.ts" import { type NextRequest, NextResponse } from "next/server" import { put } from "@vercel/blob" export async function POST(request: NextRequest) { try { // Test blob upload with a simple text file const testContent = "Portfolio Management System - Blob Test" const blob = await put("test-file.txt", testContent, { access: "public", }) return NextResponse.json({ success: true, url: blob.url, message: "Blob integration working correctly", }) } catch (error) { console.error("Blob test error:", error) return NextResponse.json( { success: false, error: error.message, }, { status: 500 }, ) } } [V0_FILE]typescript:file="app/api/transactions/[id]/route.ts" import { type NextRequest, NextResponse } from "next/server" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" import { db } from "@/lib/db" export async function PUT(request: NextRequest, { params }: { params: { id: string } }) { try { const session = await getServerSession(authOptions) if (!session) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const { type, amount, category, notes, date } = await request.json() // Check if transaction exists and user has permission const existingTransaction = await db.transaction.findUnique({ where: { id: params.id }, }) if (!existingTransaction) { return NextResponse.json({ error: "Transaction not found" }, { status: 404 }) } // Permission check if ( existingTransaction.userId !== session.user.id && session.user.role !== "SUPER_ADMIN" && session.user.role !== "ADMIN" ) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const transaction = await db.transaction.update({ where: { id: params.id }, data: { type, amount: Number.parseFloat(amount), category, notes, date: new Date(date), }, include: { user: { select: { email: true }, }, }, }) return NextResponse.json(transaction) } catch (error) { console.error("Transaction update error:", error) return NextResponse.json({ error: "Internal Server Error" }, { status: 500 }) } } export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) { try { const session = await getServerSession(authOptions) if (!session) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } // Check if transaction exists and user has permission const existingTransaction = await db.transaction.findUnique({ where: { id: params.id }, }) if (!existingTransaction) { return NextResponse.json({ error: "Transaction not found" }, { status: 404 }) } // Only SUPER_ADMIN can delete any transaction, others can only delete their own if (existingTransaction.userId !== session.user.id && session.user.role !== "SUPER_ADMIN") { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } await db.transaction.delete({ where: { id: params.id }, }) return NextResponse.json({ success: true }) } catch (error) { console.error("Transaction deletion error:", error) return NextResponse.json({ error: "Internal Server Error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/transactions/analytics/route.ts" import { type NextRequest, NextResponse } from "next/server" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" import { db } from "@/lib/db" export async function GET(request: NextRequest) { try { const session = await getServerSession(authOptions) if (!session) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const { searchParams } = new URL(request.url) const userId = searchParams.get("userId") const year = searchParams.get("year") || new Date().getFullYear().toString() const whereClause: any = { date: { gte: new Date(`${year}-01-01`), lte: new Date(`${year}-12-31`), }, } // Role-based access control if (session.user.role === "USER") { whereClause.userId = session.user.id } else if (userId && (session.user.role === "ADMIN" || session.user.role === "SUPER_ADMIN")) { whereClause.userId = userId } // Get transactions for analytics const transactions = await db.transaction.findMany({ where: whereClause, select: { type: true, amount: true, category: true, date: true, }, }) // Calculate totals by category const categoryTotals = transactions.reduce((acc: any, transaction) => { const key = `${transaction.type}_${transaction.category}` if (!acc[key]) { acc[key] = { type: transaction.type, category: transaction.category, total: 0, } } acc[key].total += Number(transaction.amount) return acc }, {}) // Calculate monthly totals const monthlyTotals = transactions.reduce((acc: any, transaction) => { const month = transaction.date.getMonth() const key = `${transaction.type}_${month}` if (!acc[key]) { acc[key] = { type: transaction.type, month: month + 1, total: 0, } } acc[key].total += Number(transaction.amount) return acc }, {}) // Calculate overall totals const totalIncome = transactions.filter((t) => t.type === "INCOME").reduce((sum, t) => sum + Number(t.amount), 0) const totalExpenses = transactions.filter((t) => t.type === "EXPENSE").reduce((sum, t) => sum + Number(t.amount), 0) return NextResponse.json({ categoryTotals: Object.values(categoryTotals), monthlyTotals: Object.values(monthlyTotals), summary: { totalIncome, totalExpenses, netIncome: totalIncome - totalExpenses, transactionCount: transactions.length, }, }) } catch (error) { console.error("Analytics error:", error) return NextResponse.json({ error: "Internal Server Error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/transactions/route.ts" import { type NextRequest, NextResponse } from "next/server" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" import { db } from "@/lib/db" export async function GET(request: NextRequest) { try { const session = await getServerSession(authOptions) if (!session) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const { searchParams } = new URL(request.url) const userId = searchParams.get("userId") const type = searchParams.get("type") const category = searchParams.get("category") const startDate = searchParams.get("startDate") const endDate = searchParams.get("endDate") const whereClause: any = {} // Role-based access control if (session.user.role === "USER") { whereClause.userId = session.user.id } else if (session.user.role === "ADMIN" && userId) { whereClause.userId = userId } else if (session.user.role === "SUPER_ADMIN" && userId) { whereClause.userId = userId } // Apply filters if (type && (type === "INCOME" || type === "EXPENSE")) { whereClause.type = type } if (category) { whereClause.category = category } if (startDate && endDate) { whereClause.date = { gte: new Date(startDate), lte: new Date(endDate), } } const transactions = await db.transaction.findMany({ where: whereClause, include: { user: { select: { email: true }, }, }, orderBy: { date: "desc" }, }) return NextResponse.json(transactions) } catch (error) { console.error("Transaction fetch error:", error) return NextResponse.json({ error: "Internal Server Error" }, { status: 500 }) } } export async function POST(request: NextRequest) { try { const session = await getServerSession(authOptions) if (!session) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const { type, amount, category, notes, date, userId } = await request.json() // Validate required fields if (!type || !amount || !category || !date) { return NextResponse.json({ error: "Missing required fields" }, { status: 400 }) } // Determine target user ID let targetUserId = session.user.id if (userId && (session.user.role === "ADMIN" || session.user.role === "SUPER_ADMIN")) { targetUserId = userId } const transaction = await db.transaction.create({ data: { type, amount: Number.parseFloat(amount), category, notes, date: new Date(date), userId: targetUserId, }, include: { user: { select: { email: true }, }, }, }) return NextResponse.json(transaction) } catch (error) { console.error("Transaction creation error:", error) return NextResponse.json({ error: "Internal Server Error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/upload/route.ts" import { type NextRequest, NextResponse } from "next/server" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" import { writeFile, mkdir } from "fs/promises" import { join } from "path" import { existsSync } from "fs" export async function POST(request: NextRequest) { try { const session = await getServerSession(authOptions) if (!session) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const formData = await request.formData() const file = formData.get("file") as File if (!file) { return NextResponse.json({ error: "No file provided" }, { status: 400 }) } // Validate file size (max 10MB) if (file.size > 10 * 1024 * 1024) { return NextResponse.json({ error: "File too large (max 10MB)" }, { status: 400 }) } // Validate file type const allowedTypes = [ "application/pdf", "image/jpeg", "image/png", "image/gif", "image/webp", "application/msword", "application/vnd.openxmlformats-officedocument.wordprocessingml.document", ] if (!allowedTypes.includes(file.type)) { return NextResponse.json({ error: "File type not allowed" }, { status: 400 }) } // Create uploads directory if it doesn't exist const uploadsDir = join(process.cwd(), "public", "uploads") if (!existsSync(uploadsDir)) { await mkdir(uploadsDir, { recursive: true }) } // Generate unique filename const timestamp = Date.now() const sanitizedName = file.name.replace(/[^a-zA-Z0-9.-]/g, "_") const filename = `${timestamp}-${sanitizedName}` const filePath = join(uploadsDir, filename) // Convert file to buffer and save const bytes = await file.arrayBuffer() const buffer = Buffer.from(bytes) await writeFile(filePath, buffer) // Return file info return NextResponse.json({ filename: filename, filePath: `/uploads/${filename}`, size: file.size, type: file.type, }) } catch (error) { console.error("Upload error:", error) return NextResponse.json({ error: "Upload failed" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/users/[id]/route.ts" import { type NextRequest, NextResponse } from "next/server" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" import { db } from "@/lib/db" import bcrypt from "bcryptjs" export async function PUT(request: NextRequest, { params }: { params: { id: string } }) { try { const session = await getServerSession(authOptions) if (!session || session.user.role !== "SUPER_ADMIN") { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const { email, password, role } = await request.json() const updateData: any = { email, role } if (password) { updateData.password = await bcrypt.hash(password, 12) } const user = await db.user.update({ where: { id: params.id }, data: updateData, select: { id: true, email: true, role: true, createdAt: true, updatedAt: true, }, }) return NextResponse.json(user) } catch (error) { console.error("User update error:", error) return NextResponse.json({ error: "Internal Server Error" }, { status: 500 }) } } export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) { try { const session = await getServerSession(authOptions) if (!session || session.user.role !== "SUPER_ADMIN") { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } // Prevent deleting own account if (params.id === session.user.id) { return NextResponse.json({ error: "Cannot delete your own account" }, { status: 400 }) } await db.user.delete({ where: { id: params.id }, }) return NextResponse.json({ success: true }) } catch (error) { console.error("User deletion error:", error) return NextResponse.json({ error: "Internal Server Error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/users/route.ts" import { type NextRequest, NextResponse } from "next/server" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" import { db } from "@/lib/db" import bcrypt from "bcryptjs" export async function GET() { try { const session = await getServerSession(authOptions) if (!session || session.user.role !== "SUPER_ADMIN") { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const users = await db.user.findMany({ select: { id: true, email: true, role: true, createdAt: true, updatedAt: true, _count: { select: { portfolios: true, documents: true, }, }, }, orderBy: { createdAt: "desc" }, }) return NextResponse.json(users) } catch (error) { return NextResponse.json({ error: "Internal Server Error" }, { status: 500 }) } } export async function POST(request: NextRequest) { try { const session = await getServerSession(authOptions) if (!session || session.user.role !== "SUPER_ADMIN") { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const { email, password, role } = await request.json() // Check if user already exists const existingUser = await db.user.findUnique({ where: { email }, }) if (existingUser) { return NextResponse.json({ error: "User already exists" }, { status: 400 }) } const hashedPassword = await bcrypt.hash(password, 12) const user = await db.user.create({ data: { email, password: hashedPassword, role, }, select: { id: true, email: true, role: true, createdAt: true, }, }) return NextResponse.json(user) } catch (error) { return NextResponse.json({ error: "Internal Server Error" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/contact/page.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 { Textarea } from "@/components/ui/textarea" import { useToast } from "@/hooks/use-toast" import { Send, Mail, Phone, MapPin } from "lucide-react" export default function ContactPage() { const [formData, setFormData] = useState({ name: "", email: "", subject: "", message: "", }) const [isSubmitting, setIsSubmitting] = useState(false) const { toast } = useToast() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) try { const response = await fetch("/api/contact", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(formData), }) if (response.ok) { toast({ title: "Message Sent!", description: "Thank you for your message. We'll get back to you soon.", }) setFormData({ name: "", email: "", subject: "", message: "" }) } else { throw new Error("Failed to send message") } } catch (error) { toast({ title: "Error", description: "Failed to send message. Please try again.", variant: "destructive", }) } finally { setIsSubmitting(false) } } return (

Get In Touch

We'd love to hear from you. Send us a message and we'll respond as soon as possible.

{/* Contact Information */}

Contact Information Reach out to us through any of these channels

email@chiranjivipoudel.com.np

Phone

+977 98XXXXXXXX

Location

Kathmandu, Nepal 🇳🇵

{/* Contact Form */}

Send us a Message Fill out the form below and we'll get back to you

Name setFormData({ ...formData, name: e.target.value })} required />

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

Subject setFormData({ ...formData, subject: e.target.value })} />

Message

setFormData({ ...formData, message: e.target.value })}
                      required
                    />
                  </div>
                  <Button type="submit" className="w-full" disabled={isSubmitting}>
                    {isSubmitting ? (
                      <>
                        <Send className="mr-2 h-4 w-4 animate-pulse" />
                        Sending...
                      </>
                    ) : (
                      <>
                        <Send className="mr-2 h-4 w-4" />
                        Send Message
                      </>
                    )}
                  </Button>
                </form>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/page.tsx"
"use client"

import { DashboardLayout } from "@/components/dashboard-layout"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Briefcase, FileText, Settings, TrendingUp } from "lucide-react"
import { useSession } from "next-auth/react"
import { usePortfolios, useTransactions, useDocuments, useServices, useAnalytics } from "@/hooks/use-realtime-data"

export default function DashboardPage() {
  const { data: session } = useSession()
  const { data: portfolios } = usePortfolios()
  const { data: services } = useServices()
  const { data: documents } = useDocuments()
  const { data: transactions } = useTransactions()
  const { data: analytics } = useAnalytics()

const stats = [
    {
      name: "Portfolio Value",
      value:
        portfolios?.reduce((sum: number, item: any) => sum + Number.parseFloat(item.value || 0), 0).toLocaleString() ||
        "0",
      icon: Briefcase,
      color: "text-blue-600",
      prefix: "$",
    },
    {
      name: "Net Income",
      value: analytics?.summary?.netIncome ? analytics.summary.netIncome.toLocaleString() : "0",
      icon: TrendingUp,
      color: analytics?.summary?.netIncome >= 0 ? "text-green-600" : "text-red-600",
      prefix: "$",
    },
    {
      name: "Documents",
      value: documents?.length || 0,
      icon: FileText,
      color: "text-purple-600",
    },
    {
      name: "Services",
      value: services?.filter((s: any) => s.visible).length || 0,
      icon: Settings,
      color: "text-orange-600",
    },
  ]

return (
    <DashboardLayout>
      <div className="space-y-6">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Dashboard</h1>
          <p className="text-gray-600">Welcome back, {session?.user?.email}</p>
        </div>

{/* Live Stats Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {stats.map((stat) => {
            const Icon = stat.icon
            return (
              <Card key={stat.name} className="hover:shadow-lg transition-shadow">
                <CardContent className="p-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm font-medium text-gray-600">{stat.name}</p>
                      <p className={`text-2xl font-bold ${stat.color}`}>
                        {stat.prefix}
                        {stat.value}
                      </p>
                    </div>
                    <Icon className={`h-8 w-8 ${stat.color}`} />
                  </div>
                </CardContent>
              </Card>
            )
          })}
        </div>

{/* Live Activity Grid */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <Card>
            <CardHeader>
              <CardTitle>Recent Portfolio Items</CardTitle>
              <CardDescription>Your latest investments</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {portfolios?.slice(0, 5).map((item: any) => (
                  <div key={item.id} className="flex justify-between items-center">
                    <div>
                      <p className="font-medium">{item.title}</p>
                      <p className="text-sm text-gray-500">{item.description}</p>
                    </div>
                    <span className="font-semibold text-green-600">
                      ${Number.parseFloat(item.value).toLocaleString()}
                    </span>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Recent Transactions</CardTitle>
              <CardDescription>Latest financial activity</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {transactions?.slice(0, 5).map((transaction: any) => (
                  <div key={transaction.id} className="flex justify-between items-center">
                    <div>
                      <p className="font-medium">{transaction.category}</p>
                      <p className="text-sm text-gray-500">{new Date(transaction.date).toLocaleDateString()}</p>
                    </div>
                    <span
                      className={`font-semibold ${transaction.type === "INCOME" ? "text-green-600" : "text-red-600"}`}
                    >
                      {transaction.type === "INCOME" ? "+" : "-"}${Number(transaction.amount).toLocaleString()}
                    </span>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </DashboardLayout>
  )
}
[V0_FILE]typescriptreact:file="app/documents/page.tsx"
"use client"

import type React from "react"

import { useState } from "react"
import { DashboardLayout } from "@/components/dashboard-layout"
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 {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Plus, FileText, Download, Trash2, Upload, Edit } from "lucide-react"
import useSWR, { mutate } from "swr"
import { useToast } from "@/hooks/use-toast"
import { useSession } from "next-auth/react"

const fetcher = (url: string) => fetch(url).then((res) => res.json())

export default function DocumentsPage() {
  const { data: session } = useSession()
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [isUploading, setIsUploading] = useState(false)
  const [formData, setFormData] = useState({
    title: "",
    file: null as File | null,
  })

const { data: documents } = useSWR("/api/documents", fetcher)
  const { toast } = useToast()

const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false)
  const [renamingDocument, setRenamingDocument] = useState<any>(null)
  const [renameTitle, setRenameTitle] = useState("")

const handleRename = (document: any) => {
    setRenamingDocument(document)
    setRenameTitle(document.title)
    setIsRenameDialogOpen(true)
  }

const handleRenameSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

try {
      const response = await fetch(`/api/documents/${renamingDocument.id}`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ title: renameTitle }),
      })

if (response.ok) {
        toast({
          title: "Success",
          description: "Document renamed successfully",
        })
        setIsRenameDialogOpen(false)
        setRenamingDocument(null)
        setRenameTitle("")
        mutate("/api/documents")
      }
    } catch (error) {
      toast({
        title: "Error",
        description: "Failed to rename document",
        variant: "destructive",
      })
    }
  }

const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (file) {
      setFormData({ ...formData, file })
    }
  }

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

if (!formData.file) {
      toast({
        title: "Error",
        description: "Please select a file",
        variant: "destructive",
      })
      return
    }

setIsUploading(true)

try {
      // Create a FormData object for file upload
      const uploadFormData = new FormData()
      uploadFormData.append("file", formData.file)

// Upload file to local storage
      const uploadResponse = await fetch("/api/upload", {
        method: "POST",
        body: uploadFormData,
      })

if (!uploadResponse.ok) {
        throw new Error("File upload failed")
      }

const { filename, filePath, size, type } = await uploadResponse.json()

// Save document record
      const response = await fetch("/api/documents", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          title: formData.title,
          filename,
          filePath,
          size,
          mimeType: type,
        }),
      })

if (response.ok) {
        toast({
          title: "Success",
          description: "Document uploaded successfully",
        })
        setIsDialogOpen(false)
        setFormData({ title: "", file: null })
        mutate("/api/documents")
      }
    } catch (error) {
      toast({
        title: "Error",
        description: "Failed to upload document",
        variant: "destructive",
      })
    } finally {
      setIsUploading(false)
    }
  }

const handleDelete = async (id: string) => {
    if (!confirm("Are you sure you want to delete this document?")) return

try {
      const response = await fetch(`/api/documents/${id}`, {
        method: "DELETE",
      })

if (response.ok) {
        toast({
          title: "Success",
          description: "Document deleted successfully",
        })
        mutate("/api/documents")
      }
    } catch (error) {
      toast({
        title: "Error",
        description: "Failed to delete document",
        variant: "destructive",
      })
    }
  }

const getFileIcon = (fileName: string) => {
    const extension = fileName.split(".").pop()?.toLowerCase()
    return <FileText className="h-8 w-8 text-blue-600" />
  }

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

return (
    <DashboardLayout>
      <div className="space-y-6">
        <div className="flex justify-between items-center">
          <div>
            <h1 className="text-2xl font-bold text-gray-900">Documents</h1>
            <p className="text-gray-600">Upload and manage your documents</p>
          </div>
          <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
            <DialogTrigger asChild>
              <Button onClick={() => setFormData({ title: "", file: null })}>
                <Plus className="mr-2 h-4 w-4" />
                Upload Document
              </Button>
            </DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>Upload Document</DialogTitle>
                <DialogDescription>Upload a new document (PDF, images, etc.)</DialogDescription>
              </DialogHeader>
              <form onSubmit={handleSubmit} className="space-y-4">
                <div>
                  <Label htmlFor="title">Title</Label>
                  <Input
                    id="title"
                    value={formData.title}
                    onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                    required
                  />
                </div>
                <div>
                  <Label htmlFor="file">File</Label>
                  <Input
                    id="file"
                    type="file"
                    onChange={handleFileChange}
                    accept=".pdf,.doc,.docx,.jpg,.jpeg,.png,.gif"
                    required
                  />
                  {formData.file && <p className="text-sm text-gray-500 mt-1">Selected: {formData.file.name}</p>}
                </div>
                <Button type="submit" className="w-full" disabled={isUploading}>
                  {isUploading ? (
                    <>
                      <Upload className="mr-2 h-4 w-4 animate-spin" />
                      Uploading...
                    </>
                  ) : (
                    <>
                      <Upload className="mr-2 h-4 w-4" />
                      Upload Document
                    </>
                  )}
                </Button>
              </form>
            </DialogContent>
          </Dialog>
          <Dialog open={isRenameDialogOpen} onOpenChange={setIsRenameDialogOpen}>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>Rename Document</DialogTitle>
                <DialogDescription>Enter a new name for your document</DialogDescription>
              </DialogHeader>
              <form onSubmit={handleRenameSubmit} className="space-y-4">
                <div>
                  <Label htmlFor="renameTitle">Document Title</Label>
                  <Input
                    id="renameTitle"
                    value={renameTitle}
                    onChange={(e) => setRenameTitle(e.target.value)}
                    required
                  />
                </div>
                <Button type="submit" className="w-full">
                  Rename Document
                </Button>
              </form>
            </DialogContent>
          </Dialog>
        </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {documents?.map((document: any) => (
            <Card key={document.id}>
              <CardHeader>
                <div className="flex justify-between items-start">
                  <div className="flex items-center space-x-3">
                    {getFileIcon(document.fileName)}
                    <div>
                      <CardTitle className="text-lg">{document.title}</CardTitle>
                      <CardDescription>
                        {new Date(document.uploadedAt).toLocaleDateString()} • {formatFileSize(document.fileSize)}
                      </CardDescription>
                    </div>
                  </div>
                  <div className="flex space-x-2">
                    <Button variant="ghost" size="sm" onClick={() => handleRename(document)}>
                      <Edit className="h-4 w-4" />
                    </Button>
                    <Button variant="ghost" size="sm" onClick={() => window.open(document.filePath, "_blank")}>
                      <Download className="h-4 w-4" />
                    </Button>
                    <Button variant="ghost" size="sm" onClick={() => handleDelete(document.id)}>
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                {document.user && <p className="text-xs text-gray-400">Owner: {document.user.email}</p>}
                <p className="text-xs text-gray-400">Type: {document.mimeType}</p>
              </CardContent>
            </Card>
          ))}
        </div>

{documents?.length === 0 && (
          <div className="text-center py-12">
            <FileText className="mx-auto h-12 w-12 text-gray-400" />
            <h3 className="mt-2 text-sm font-medium text-gray-900">No documents</h3>
            <p className="mt-1 text-sm text-gray-500">Get started by uploading your first document.</p>
          </div>
        )}
      </div>
    </DashboardLayout>
  )
}
[V0_FILE]typescriptreact:file="app/error.tsx"
"use client"

import { useEffect } from "react"
import { Button } from "@/components/ui/button"

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

return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50">
      <div className="max-w-md w-full bg-white shadow-lg rounded-lg p-6">
        <h2 className="text-xl font-semibold text-gray-900 mb-4">Something went wrong!</h2>
        <p className="text-gray-600 mb-6">An error occurred while loading this page. Please try again.</p>
        <Button onClick={reset} className="w-full">
          Try again
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]css:file="app/globals.css"
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --primary-color: #3b82f6;
  --accent-color: #10b981;
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Custom theme integration */
.theme-primary {
  background-color: var(--primary-color);
}

.theme-accent {
  background-color: var(--accent-color);
}

.theme-primary-text {
  color: var(--primary-color);
}

.theme-accent-text {
  color: var(--accent-color);
}

/* Animation classes */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out;
}

/* Responsive improvements */
@media (max-width: 768px) {
  .mobile-padding {
    @apply px-4;
  }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
[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 { AuthProvider } from "@/components/providers/session-provider"
import { Toaster } from "@/components/ui/toaster"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "Portfolio Management System",
  description: "A comprehensive portfolio management system",
  metadataBase: new URL(process.env.NEXTAUTH_URL || "http://localhost:3000"),
    generator: 'v0.dev'
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <AuthProvider>
          {children}
          <Toaster />
        </AuthProvider>
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/loading.tsx"
export default function Loading() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50">
      <div className="flex flex-col items-center">
        <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-blue-600"></div>
        <p className="mt-4 text-gray-600">Loading...</p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/login/page.tsx"
"use client"

import type React from "react"

import { useState } from "react"
import { signIn, getSession } from "next-auth/react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { useToast } from "@/hooks/use-toast"
import { Loader2 } from "lucide-react"

export default function LoginPage() {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const router = useRouter()
  const { toast } = useToast()

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

try {
      const result = await signIn("credentials", {
        email,
        password,
        redirect: false,
      })

if (result?.error) {
        toast({
          title: "Error",
          description: "Invalid credentials",
          variant: "destructive",
        })
      } else {
        const session = await getSession()
        if (session?.user?.role === "SUPER_ADMIN") {
          router.push("/admin/users")
        } else {
          router.push("/dashboard")
        }
      }
    } catch (error) {
      toast({
        title: "Error",
        description: "Something went wrong",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 p-4">
      <Card className="w-full max-w-md">
        <CardHeader className="space-y-1">
          <CardTitle className="text-2xl font-bold text-center">Welcome Back</CardTitle>
          <CardDescription className="text-center">Sign in to your portfolio management account</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input
                id="email"
                type="email"
                placeholder="Enter your email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="password">Password</Label>
              <Input
                id="password"
                type="password"
                placeholder="Enter your password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                required
              />
            </div>
            <Button type="submit" className="w-full" disabled={isLoading}>
              {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
              Sign In
            </Button>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx"
"use client"

import { useSession } from "next-auth/react"
import { useRouter } from "next/navigation"
import { useEffect, useState } from "react"
import { AutoSetup } from "@/components/auto-setup"

export default function HomePage() {
  const { data: session, status } = useSession()
  const router = useRouter()
  const [needsSetup, setNeedsSetup] = useState(false)
  const [checking, setChecking] = useState(true)

useEffect(() => {
    if (status === "loading") return

// Check if system needs setup
    fetch("/api/setup/status")
      .then((res) => res.json())
      .then((data) => {
        if (!data.isSetup) {
          setNeedsSetup(true)
        } else if (!session) {
          router.push("/login")
        } else if (session.user.role === "SUPER_ADMIN") {
          router.push("/admin/users")
        } else {
          router.push("/dashboard")
        }
      })
      .catch(() => {
        setNeedsSetup(true)
      })
      .finally(() => {
        setChecking(false)
      })
  }, [session, status, router])

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

if (needsSetup) {
    return <AutoSetup />
  }

return null
}
[V0_FILE]typescriptreact:file="app/portfolio/page.tsx"
"use client"

import type React from "react"

import { useState } from "react"
import { DashboardLayout } from "@/components/dashboard-layout"
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 { Textarea } from "@/components/ui/textarea"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Plus, Edit, Trash2, Briefcase } from "lucide-react"
import useSWR, { mutate } from "swr"
import { useToast } from "@/hooks/use-toast"

const fetcher = (url: string) => fetch(url).then((res) => res.json())

export default function PortfolioPage() {
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [editingItem, setEditingItem] = useState<any>(null)
  const [formData, setFormData] = useState({
    title: "",
    value: "",
    description: "",
  })

const { data: portfolios, error } = useSWR("/api/portfolio", fetcher)
  const { toast } = useToast()

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

try {
      const url = editingItem ? `/api/portfolio/${editingItem.id}` : "/api/portfolio"
      const method = editingItem ? "PUT" : "POST"

const response = await fetch(url, {
        method,
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(formData),
      })

if (response.ok) {
        toast({
          title: "Success",
          description: `Portfolio item ${editingItem ? "updated" : "created"} successfully`,
        })
        setIsDialogOpen(false)
        setEditingItem(null)
        setFormData({ title: "", value: "", description: "" })
        mutate("/api/portfolio")
      }
    } catch (error) {
      toast({
        title: "Error",
        description: "Something went wrong",
        variant: "destructive",
      })
    }
  }

const handleEdit = (item: any) => {
    setEditingItem(item)
    setFormData({
      title: item.title,
      value: item.value,
      description: item.description || "",
    })
    setIsDialogOpen(true)
  }

const handleDelete = async (id: string) => {
    if (!confirm("Are you sure you want to delete this item?")) return

try {
      const response = await fetch(`/api/portfolio/${id}`, {
        method: "DELETE",
      })

if (response.ok) {
        toast({
          title: "Success",
          description: "Portfolio item deleted successfully",
        })
        mutate("/api/portfolio")
      }
    } catch (error) {
      toast({
        title: "Error",
        description: "Failed to delete item",
        variant: "destructive",
      })
    }
  }

return (
    <DashboardLayout>
      <div className="space-y-6">
        <div className="flex justify-between items-center">
          <div>
            <h1 className="text-2xl font-bold text-gray-900">Portfolio</h1>
            <p className="text-gray-600">Manage your portfolio items</p>
          </div>
          <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
            <DialogTrigger asChild>
              <Button
                onClick={() => {
                  setEditingItem(null)
                  setFormData({ title: "", value: "", description: "" })
                }}
              >
                <Plus className="mr-2 h-4 w-4" />
                Add Item
              </Button>
            </DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>{editingItem ? "Edit" : "Add"} Portfolio Item</DialogTitle>
                <DialogDescription>{editingItem ? "Update" : "Create"} your portfolio item details</DialogDescription>
              </DialogHeader>
              <form onSubmit={handleSubmit} className="space-y-4">
                <div>
                  <Label htmlFor="title">Title</Label>
                  <Input
                    id="title"
                    value={formData.title}
                    onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                    required
                  />
                </div>
                <div>
                  <Label htmlFor="value">Value</Label>
                  <Input
                    id="value"
                    type="number"
                    step="0.01"
                    value={formData.value}
                    onChange={(e) => setFormData({ ...formData, value: e.target.value })}
                    required
                  />
                </div>
                <div>
                  <Label htmlFor="description">Description</Label>
                  <Textarea
                    id="description"
                    value={formData.description}
                    onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                  />
                </div>
                <Button type="submit" className="w-full">
                  {editingItem ? "Update" : "Create"} Item
                </Button>
              </form>
            </DialogContent>
          </Dialog>
        </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {portfolios?.map((item: any) => (
            <Card key={item.id}>
              <CardHeader>
                <div className="flex justify-between items-start">
                  <div>
                    <CardTitle className="text-lg">{item.title}</CardTitle>
                    <CardDescription className="text-2xl font-bold text-green-600">
                      ${Number.parseFloat(item.value).toLocaleString()}
                    </CardDescription>
                  </div>
                  <div className="flex space-x-2">
                    <Button variant="ghost" size="sm" onClick={() => handleEdit(item)}>
                      <Edit className="h-4 w-4" />
                    </Button>
                    <Button variant="ghost" size="sm" onClick={() => handleDelete(item.id)}>
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
              </CardHeader>
              {item.description && (
                <CardContent>
                  <p className="text-gray-600">{item.description}</p>
                  {item.user && <p className="text-xs text-gray-400 mt-2">Owner: {item.user.email}</p>}
                </CardContent>
              )}
            </Card>
          ))}
        </div>

{portfolios?.length === 0 && (
          <div className="text-center py-12">
            <Briefcase className="mx-auto h-12 w-12 text-gray-400" />
            <h3 className="mt-2 text-sm font-medium text-gray-900">No portfolio items</h3>
            <p className="mt-1 text-sm text-gray-500">Get started by creating your first portfolio item.</p>
          </div>
        )}
      </div>
    </DashboardLayout>
  )
}
[V0_FILE]typescriptreact:file="app/services/page.tsx"
"use client"

import type React from "react"

import { useState } from "react"
import { DashboardLayout } from "@/components/dashboard-layout"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Switch } from "@/components/ui/switch"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Plus, Edit, Trash2, ExternalLink, Eye, EyeOff, Settings } from "lucide-react"
import useSWR, { mutate } from "swr"
import { useToast } from "@/hooks/use-toast"
import { useSession } from "next-auth/react"

const fetcher = (url: string) => fetch(url).then((res) => res.json())

export default function ServicesPage() {
  const { data: session } = useSession()
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [editingService, setEditingService] = useState<any>(null)
  const [formData, setFormData] = useState({
    title: "",
    description: "",
    url: "",
    visible: true,
  })

const { data: services } = useSWR("/api/services", fetcher)
  const { toast } = useToast()

const canEdit = session?.user?.role === "SUPER_ADMIN" || session?.user?.role === "ADMIN"

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

try {
      const url = editingService ? `/api/services/${editingService.id}` : "/api/services"
      const method = editingService ? "PUT" : "POST"

const response = await fetch(url, {
        method,
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(formData),
      })

if (response.ok) {
        toast({
          title: "Success",
          description: `Service ${editingService ? "updated" : "created"} successfully`,
        })
        setIsDialogOpen(false)
        setEditingService(null)
        setFormData({ title: "", description: "", url: "", visible: true })
        mutate("/api/services")
      }
    } catch (error) {
      toast({
        title: "Error",
        description: "Something went wrong",
        variant: "destructive",
      })
    }
  }

const handleEdit = (service: any) => {
    setEditingService(service)
    setFormData({
      title: service.title,
      description: service.description,
      url: service.url || "",
      visible: service.visible,
    })
    setIsDialogOpen(true)
  }

const handleDelete = async (id: string) => {
    if (!confirm("Are you sure you want to delete this service?")) return

try {
      const response = await fetch(`/api/services/${id}`, {
        method: "DELETE",
      })

if (response.ok) {
        toast({
          title: "Success",
          description: "Service deleted successfully",
        })
        mutate("/api/services")
      }
    } catch (error) {
      toast({
        title: "Error",
        description: "Failed to delete service",
        variant: "destructive",
      })
    }
  }

const toggleVisibility = async (id: string, visible: boolean) => {
    try {
      const response = await fetch(`/api/services/${id}`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ visible: !visible }),
      })

if (response.ok) {
        mutate("/api/services")
      }
    } catch (error) {
      toast({
        title: "Error",
        description: "Failed to update service visibility",
        variant: "destructive",
      })
    }
  }

return (
    <DashboardLayout>
      <div className="space-y-6">
        <div className="flex justify-between items-center">
          <div>
            <h1 className="text-2xl font-bold text-gray-900">Services</h1>
            <p className="text-gray-600">Manage your services and offerings</p>
          </div>
          {canEdit && (
            <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
              <DialogTrigger asChild>
                <Button
                  onClick={() => {
                    setEditingService(null)
                    setFormData({ title: "", description: "", url: "", visible: true })
                  }}
                >
                  <Plus className="mr-2 h-4 w-4" />
                  Add Service
                </Button>
              </DialogTrigger>
              <DialogContent>
                <DialogHeader>
                  <DialogTitle>{editingService ? "Edit" : "Add"} Service</DialogTitle>
                  <DialogDescription>{editingService ? "Update" : "Create"} your service details</DialogDescription>
                </DialogHeader>
                <form onSubmit={handleSubmit} className="space-y-4">
                  <div>
                    <Label htmlFor="title">Title</Label>
                    <Input
                      id="title"
                      value={formData.title}
                      onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                      required
                    />
                  </div>
                  <div>
                    <Label htmlFor="description">Description</Label>
                    <Textarea
                      id="description"
                      value={formData.description}
                      onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                      required
                    />
                  </div>
                  <div>
                    <Label htmlFor="url">URL (Optional)</Label>
                    <Input
                      id="url"
                      type="url"
                      value={formData.url}
                      onChange={(e) => setFormData({ ...formData, url: e.target.value })}
                    />
                  </div>
                  <div className="flex items-center space-x-2">
                    <Switch
                      id="visible"
                      checked={formData.visible}
                      onCheckedChange={(checked) => setFormData({ ...formData, visible: checked })}
                    />
                    <Label htmlFor="visible">Visible</Label>
                  </div>
                  <Button type="submit" className="w-full">
                    {editingService ? "Update" : "Create"} Service
                  </Button>
                </form>
              </DialogContent>
            </Dialog>
          )}
        </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {services?.map((service: any) => (
            <Card key={service.id} className={!service.visible ? "opacity-60" : ""}>
              <CardHeader>
                <div className="flex justify-between items-start">
                  <div className="flex-1">
                    <CardTitle className="text-lg flex items-center gap-2">
                      {service.title}
                      {service.visible ? (
                        <Eye className="h-4 w-4 text-green-500" />
                      ) : (
                        <EyeOff className="h-4 w-4 text-gray-400" />
                      )}
                    </CardTitle>
                    {service.url && (
                      <a
                        href={service.url}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="text-blue-600 hover:text-blue-800 text-sm flex items-center gap-1"
                      >
                        Visit <ExternalLink className="h-3 w-3" />
                      </a>
                    )}
                  </div>
                  {canEdit && (
                    <div className="flex space-x-2">
                      <Button variant="ghost" size="sm" onClick={() => toggleVisibility(service.id, service.visible)}>
                        {service.visible ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                      </Button>
                      <Button variant="ghost" size="sm" onClick={() => handleEdit(service)}>
                        <Edit className="h-4 w-4" />
                      </Button>
                      <Button variant="ghost" size="sm" onClick={() => handleDelete(service.id)}>
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    </div>
                  )}
                </div>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600">{service.description}</p>
                <p className="text-xs text-gray-400 mt-2">
                  Created: {new Date(service.createdAt).toLocaleDateString()}
                </p>
              </CardContent>
            </Card>
          ))}
        </div>

{services?.length === 0 && (
          <div className="text-center py-12">
            <Settings className="mx-auto h-12 w-12 text-gray-400" />
            <h3 className="mt-2 text-sm font-medium text-gray-900">No services</h3>
            <p className="mt-1 text-sm text-gray-500">Get started by creating your first service.</p>
          </div>
        )}
      </div>
    </DashboardLayout>
  )
}
[V0_FILE]typescriptreact:file="app/settings/page.tsx"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { DashboardLayout } from "@/components/dashboard-layout"
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 { Textarea } from "@/components/ui/textarea"
import { Palette, Save } from "lucide-react"
import useSWR, { mutate } from "swr"
import { useToast } from "@/hooks/use-toast"
import { useSession } from "next-auth/react"

const fetcher = (url: string) => fetch(url).then((res) => res.json())

export default function SettingsPage() {
  const { data: session } = useSession()
  const [formData, setFormData] = useState({
    primaryColor: "#3b82f6",
    accentColor: "#10b981",
    footerText: "Built by TechieGurkhas",
  })

const { data: settings } = useSWR("/api/settings", fetcher)
  const { toast } = useToast()

const canEdit = session?.user?.role === "SUPER_ADMIN" || session?.user?.role === "ADMIN"

useEffect(() => {
    if (settings) {
      setFormData({
        primaryColor: settings.primaryColor,
        accentColor: settings.accentColor,
        footerText: settings.footerText,
      })
    }
  }, [settings])

useEffect(() => {
    // Apply theme colors to CSS variables
    if (settings) {
      document.documentElement.style.setProperty("--primary-color", settings.primaryColor)
      document.documentElement.style.setProperty("--accent-color", settings.accentColor)
    }
  }, [settings])

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

try {
      const response = await fetch("/api/settings", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(formData),
      })

if (response.ok) {
        toast({
          title: "Success",
          description: "Settings updated successfully",
        })
        mutate("/api/settings")
      }
    } catch (error) {
      toast({
        title: "Error",
        description: "Failed to update settings",
        variant: "destructive",
      })
    }
  }

return (
    <DashboardLayout>
      <div className="space-y-6">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Settings</h1>
          <p className="text-gray-600">Customize your application appearance</p>
        </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Palette className="h-5 w-5" />
                Theme Colors
              </CardTitle>
              <CardDescription>Customize the primary and accent colors for your application</CardDescription>
            </CardHeader>
            <CardContent>
              <form onSubmit={handleSubmit} className="space-y-4">
                <div>
                  <Label htmlFor="primaryColor">Primary Color</Label>
                  <div className="flex items-center space-x-2">
                    <Input
                      id="primaryColor"
                      type="color"
                      value={formData.primaryColor}
                      onChange={(e) => setFormData({ ...formData, primaryColor: e.target.value })}
                      className="w-16 h-10"
                      disabled={!canEdit}
                    />
                    <Input
                      type="text"
                      value={formData.primaryColor}
                      onChange={(e) => setFormData({ ...formData, primaryColor: e.target.value })}
                      className="flex-1"
                      disabled={!canEdit}
                    />
                  </div>
                </div>
                <div>
                  <Label htmlFor="accentColor">Accent Color</Label>
                  <div className="flex items-center space-x-2">
                    <Input
                      id="accentColor"
                      type="color"
                      value={formData.accentColor}
                      onChange={(e) => setFormData({ ...formData, accentColor: e.target.value })}
                      className="w-16 h-10"
                      disabled={!canEdit}
                    />
                    <Input
                      type="text"
                      value={formData.accentColor}
                      onChange={(e) => setFormData({ ...formData, accentColor: e.target.value })}
                      className="flex-1"
                      disabled={!canEdit}
                    />
                  </div>
                </div>
                <div>
                  <Label htmlFor="footerText">Footer Text</Label>
                  <Textarea
                    id="footerText"
                    value={formData.footerText}
                    onChange={(e) => setFormData({ ...formData, footerText: e.target.value })}
                    disabled={!canEdit}
                  />
                </div>
                {canEdit && (
                  <Button type="submit" className="w-full">
                    <Save className="mr-2 h-4 w-4" />
                    Save Settings
                  </Button>
                )}
              </form>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Preview</CardTitle>
              <CardDescription>See how your colors will look</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="p-4 rounded-lg text-white" style={{ backgroundColor: formData.primaryColor }}>
                  <h3 className="font-semibold">Primary Color</h3>
                  <p>This is how your primary color looks</p>
                </div>
                <div className="p-4 rounded-lg text-white" style={{ backgroundColor: formData.accentColor }}>
                  <h3 className="font-semibold">Accent Color</h3>
                  <p>This is how your accent color looks</p>
                </div>
                <div className="p-4 bg-gray-100 rounded-lg">
                  <p className="text-sm text-gray-600">{formData.footerText}</p>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </DashboardLayout>
  )
}
[V0_FILE]typescriptreact:file="app/transactions/page.tsx"
"use client"

import type React from "react"

import { useState } from "react"
import { DashboardLayout } from "@/components/dashboard-layout"
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 { Textarea } from "@/components/ui/textarea"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Badge } from "@/components/ui/badge"
import { Plus, Edit, Trash2, TrendingUp, TrendingDown, DollarSign, Calendar } from "lucide-react"
import useSWR, { mutate } from "swr"
import { useToast } from "@/hooks/use-toast"
import { useSession } from "next-auth/react"

const fetcher = (url: string) => fetch(url).then((res) => res.json())

const categories = [
  "Salary",
  "Freelance",
  "Investment",
  "Business",
  "Food",
  "Transportation",
  "Entertainment",
  "Healthcare",
  "Education",
  "Utilities",
  "Shopping",
  "Other",
]

export default function TransactionsPage() {
  const { data: session } = useSession()
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [editingTransaction, setEditingTransaction] = useState<any>(null)
  const [formData, setFormData] = useState({
    type: "EXPENSE",
    amount: "",
    category: "",
    notes: "",
    date: new Date().toISOString().split("T")[0],
  })

const { data: transactions } = useSWR("/api/transactions", fetcher)
  const { data: analytics } = useSWR("/api/transactions/analytics", fetcher)
  const { toast } = useToast()

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

try {
      const url = editingTransaction ? `/api/transactions/${editingTransaction.id}` : "/api/transactions"
      const method = editingTransaction ? "PUT" : "POST"

const response = await fetch(url, {
        method,
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(formData),
      })

if (response.ok) {
        toast({
          title: "Success",
          description: `Transaction ${editingTransaction ? "updated" : "created"} successfully`,
        })
        setIsDialogOpen(false)
        setEditingTransaction(null)
        setFormData({
          type: "EXPENSE",
          amount: "",
          category: "",
          notes: "",
          date: new Date().toISOString().split("T")[0],
        })
        mutate("/api/transactions")
        mutate("/api/transactions/analytics")
      }
    } catch (error) {
      toast({
        title: "Error",
        description: "Something went wrong",
        variant: "destructive",
      })
    }
  }

const handleEdit = (transaction: any) => {
    setEditingTransaction(transaction)
    setFormData({
      type: transaction.type,
      amount: transaction.amount.toString(),
      category: transaction.category,
      notes: transaction.notes || "",
      date: new Date(transaction.date).toISOString().split("T")[0],
    })
    setIsDialogOpen(true)
  }

const handleDelete = async (id: string) => {
    if (!confirm("Are you sure you want to delete this transaction?")) return

try {
      const response = await fetch(`/api/transactions/${id}`, {
        method: "DELETE",
      })

if (response.ok) {
        toast({
          title: "Success",
          description: "Transaction deleted successfully",
        })
        mutate("/api/transactions")
        mutate("/api/transactions/analytics")
      }
    } catch (error) {
      toast({
        title: "Error",
        description: "Failed to delete transaction",
        variant: "destructive",
      })
    }
  }

const formatCurrency = (amount: number) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
    }).format(amount)
  }

return (
    <DashboardLayout>
      <div className="space-y-6">
        <div className="flex justify-between items-center">
          <div>
            <h1 className="text-2xl font-bold text-gray-900">Transactions</h1>
            <p className="text-gray-600">Track your income and expenses</p>
          </div>
          <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
            <DialogTrigger asChild>
              <Button
                onClick={() => {
                  setEditingTransaction(null)
                  setFormData({
                    type: "EXPENSE",
                    amount: "",
                    category: "",
                    notes: "",
                    date: new Date().toISOString().split("T")[0],
                  })
                }}
              >
                <Plus className="mr-2 h-4 w-4" />
                Add Transaction
              </Button>
            </DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>{editingTransaction ? "Edit" : "Add"} Transaction</DialogTitle>
                <DialogDescription>
                  {editingTransaction ? "Update" : "Record"} your income or expense transaction
                </DialogDescription>
              </DialogHeader>
              <form onSubmit={handleSubmit} className="space-y-4">
                <div>
                  <Label htmlFor="type">Type</Label>
                  <Select value={formData.type} onValueChange={(value) => setFormData({ ...formData, type: value })}>
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="INCOME">Income</SelectItem>
                      <SelectItem value="EXPENSE">Expense</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div>
                  <Label htmlFor="amount">Amount</Label>
                  <Input
                    id="amount"
                    type="number"
                    step="0.01"
                    value={formData.amount}
                    onChange={(e) => setFormData({ ...formData, amount: e.target.value })}
                    required
                  />
                </div>
                <div>
                  <Label htmlFor="category">Category</Label>
                  <Select
                    value={formData.category}
                    onValueChange={(value) => setFormData({ ...formData, category: value })}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Select category" />
                    </SelectTrigger>
                    <SelectContent>
                      {categories.map((category) => (
                        <SelectItem key={category} value={category}>
                          {category}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
                <div>
                  <Label htmlFor="date">Date</Label>
                  <Input
                    id="date"
                    type="date"
                    value={formData.date}
                    onChange={(e) => setFormData({ ...formData, date: e.target.value })}
                    required
                  />
                </div>
                <div>
                  <Label htmlFor="notes">Notes (Optional)</Label>
                  <Textarea
                    id="notes"
                    value={formData.notes}
                    onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
                  />
                </div>
                <Button type="submit" className="w-full">
                  {editingTransaction ? "Update" : "Add"} Transaction
                </Button>
              </form>
            </DialogContent>
          </Dialog>
        </div>

{/* Analytics Cards */}
        {analytics && (
          <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
            <Card>
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm font-medium text-gray-600">Total Income</p>
                    <p className="text-2xl font-bold text-green-600">{formatCurrency(analytics.summary.totalIncome)}</p>
                  </div>
                  <TrendingUp className="h-8 w-8 text-green-600" />
                </div>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm font-medium text-gray-600">Total Expenses</p>
                    <p className="text-2xl font-bold text-red-600">{formatCurrency(analytics.summary.totalExpenses)}</p>
                  </div>
                  <TrendingDown className="h-8 w-8 text-red-600" />
                </div>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm font-medium text-gray-600">Net Income</p>
                    <p
                      className={`text-2xl font-bold ${
                        analytics.summary.netIncome >= 0 ? "text-green-600" : "text-red-600"
                      }`}
                    >
                      {formatCurrency(analytics.summary.netIncome)}
                    </p>
                  </div>
                  <DollarSign className="h-8 w-8 text-blue-600" />
                </div>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm font-medium text-gray-600">Transactions</p>
                    <p className="text-2xl font-bold text-gray-900">{analytics.summary.transactionCount}</p>
                  </div>
                  <Calendar className="h-8 w-8 text-purple-600" />
                </div>
              </CardContent>
            </Card>
          </div>
        )}

{/* Transactions List */}
        <Card>
          <CardHeader>
            <CardTitle>Recent Transactions</CardTitle>
            <CardDescription>Your latest financial transactions</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {transactions?.map((transaction: any) => (
                <div key={transaction.id} className="flex items-center justify-between p-4 border rounded-lg">
                  <div className="flex items-center space-x-4">
                    <div
                      className={`p-2 rounded-full ${transaction.type === "INCOME" ? "bg-green-100" : "bg-red-100"}`}
                    >
                      {transaction.type === "INCOME" ? (
                        <TrendingUp className="h-4 w-4 text-green-600" />
                      ) : (
                        <TrendingDown className="h-4 w-4 text-red-600" />
                      )}
                    </div>
                    <div>
                      <p className="font-medium">{transaction.category}</p>
                      <p className="text-sm text-gray-500">{new Date(transaction.date).toLocaleDateString()}</p>
                      {transaction.notes && <p className="text-xs text-gray-400">{transaction.notes}</p>}
                    </div>
                  </div>
                  <div className="flex items-center space-x-4">
                    <div className="text-right">
                      <p
                        className={`font-semibold ${transaction.type === "INCOME" ? "text-green-600" : "text-red-600"}`}
                      >
                        {transaction.type === "INCOME" ? "+" : "-"}
                        {formatCurrency(Number(transaction.amount))}
                      </p>
                      <Badge variant={transaction.type === "INCOME" ? "default" : "secondary"}>
                        {transaction.type}
                      </Badge>
                    </div>
                    <div className="flex space-x-2">
                      <Button variant="ghost" size="sm" onClick={() => handleEdit(transaction)}>
                        <Edit className="h-4 w-4" />
                      </Button>
                      {(session?.user?.role === "SUPER_ADMIN" || transaction.userId === session?.user?.id) && (
                        <Button variant="ghost" size="sm" onClick={() => handleDelete(transaction.id)}>
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      )}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>
    </DashboardLayout>
  )
}
[V0_FILE]json:file="components.json"
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}
[V0_FILE]typescriptreact:file="components/auto-setup.tsx"
"use client"

import { useEffect, useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Loader2, CheckCircle, AlertCircle } from "lucide-react"

export function AutoSetup() {
  const [setupStatus, setSetupStatus] = useState<"checking" | "needed" | "running" | "complete" | "error">("checking")
  const [message, setMessage] = useState("")

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

const checkSetupStatus = async () => {
    try {
      const response = await fetch("/api/setup/status")
      const data = await response.json()

if (data.isSetup) {
        setSetupStatus("complete")
        setMessage("System is ready!")
      } else {
        setSetupStatus("needed")
        setMessage("Initial setup required")
      }
    } catch (error) {
      setSetupStatus("error")
      setMessage("Failed to check setup status")
    }
  }

const runSetup = async () => {
    setSetupStatus("running")
    setMessage("Setting up your portfolio system...")

try {
      const response = await fetch("/api/setup", { method: "POST" })
      const data = await response.json()

if (data.success) {
        setSetupStatus("complete")
        setMessage("Setup complete! Redirecting to login...")
        setTimeout(() => {
          window.location.href = "/login"
        }, 2000)
      } else {
        setSetupStatus("error")
        setMessage("Setup failed. Please try again.")
      }
    } catch (error) {
      setSetupStatus("error")
      setMessage("Setup failed. Please check your database connection.")
    }
  }

if (setupStatus === "complete") {
    return null // Don't show if setup is complete
  }

return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 p-4">
      <Card className="w-full max-w-md">
        <CardHeader className="text-center">
          <CardTitle className="flex items-center justify-center gap-2">
            {setupStatus === "checking" && <Loader2 className="h-5 w-5 animate-spin" />}
            {setupStatus === "running" && <Loader2 className="h-5 w-5 animate-spin" />}
            {setupStatus === "complete" && <CheckCircle className="h-5 w-5 text-green-600" />}
            {setupStatus === "error" && <AlertCircle className="h-5 w-5 text-red-600" />}
            Portfolio Management System
          </CardTitle>
          <CardDescription>Automatic setup and configuration</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <p className="text-center text-gray-600">{message}</p>

{setupStatus === "needed" && (
            <Button onClick={runSetup} className="w-full">
              Initialize System
            </Button>
          )}

{setupStatus === "running" && (
            <div className="text-center">
              <Loader2 className="h-8 w-8 animate-spin mx-auto mb-2" />
              <p className="text-sm text-gray-500">Please wait...</p>
            </div>
          )}

{setupStatus === "error" && (
            <Button onClick={runSetup} variant="outline" className="w-full">
              Retry Setup
            </Button>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard-layout.tsx"
"use client"

import type React from "react"

import { useSession } from "next-auth/react"
import { useRouter } from "next/navigation"
import { useEffect } from "react"
import { Navigation } from "./navigation"
import { Footer } from "./footer"

export function DashboardLayout({ children }: { children: React.ReactNode }) {
  const { data: session, status } = useSession()
  const router = useRouter()

useEffect(() => {
    if (status === "loading") return
    if (!session) {
      router.push("/login")
    }
  }, [session, status, router])

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

if (!session) return null

return (
    <div className="min-h-screen bg-gray-50">
      <Navigation />
      <div className="md:pl-64 flex flex-col flex-1">
        <main className="flex-1 p-4 md:p-8">{children}</main>
        <Footer />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/footer.tsx"
"use client"

import { useState, useEffect } from "react"
import useSWR from "swr"

const fetcher = (url: string) => fetch(url).then((res) => res.json())

export function Footer() {
  const [nepaliDateTime, setNepaliDateTime] = useState("")
  const { data: settings } = useSWR("/api/settings", fetcher)

useEffect(() => {
    const updateNepaliTime = () => {
      const now = new Date()
      const nepaliTime = new Intl.DateTimeFormat("ne-NP", {
        timeZone: "Asia/Kathmandu",
        year: "numeric",
        month: "long",
        day: "numeric",
        hour: "2-digit",
        minute: "2-digit",
        second: "2-digit",
      }).format(now)
      setNepaliDateTime(nepaliTime)
    }

updateNepaliTime()
    const interval = setInterval(updateNepaliTime, 1000)

return () => clearInterval(interval)
  }, [])

return (
    <footer className="bg-white border-t border-gray-200 px-4 py-6 md:px-8">
      <div className="flex flex-col md:flex-row justify-between items-center space-y-2 md:space-y-0">
        <div className="flex items-center space-x-2">
          <span className="text-sm text-gray-600">{settings?.footerText || "Built by TechieGurkhas"}</span>
          <span className="text-lg">🇳🇵</span>
        </div>
        <div className="text-sm text-gray-500">Nepal Time: {nepaliDateTime}</div>
      </div>
    </footer>
  )
}
[V0_FILE]typescriptreact:file="components/navigation.tsx"
"use client"

import { useSession, signOut } from "next-auth/react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { Button } from "@/components/ui/button"
import {
  LayoutDashboard,
  Briefcase,
  Settings,
  FileText,
  Users,
  LogOut,
  Menu,
  DollarSign,
  Mail,
  MessageSquare,
} from "lucide-react"
import { cn } from "@/lib/utils"
import { useState } from "react"

const navigation = [
  { name: "Dashboard", href: "/dashboard", icon: LayoutDashboard },
  { name: "Portfolio", href: "/portfolio", icon: Briefcase },
  { name: "Services", href: "/services", icon: Settings },
  { name: "Documents", href: "/documents", icon: FileText },
  { name: "Transactions", href: "/transactions", icon: DollarSign },
]

const adminNavigation = [
  { name: "User Management", href: "/admin/users", icon: Users },
  { name: "Email Inbox", href: "/admin/emails", icon: Mail },
  { name: "Contact Inbox", href: "/admin/contact", icon: MessageSquare },
]

export function Navigation() {
  const { data: session } = useSession()
  const pathname = usePathname()
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)

if (!session) return null

const allNavigation = [
    ...navigation,
    ...(session.user.role === "SUPER_ADMIN" ? adminNavigation : []),
    { name: "Settings", href: "/settings", icon: Settings },
  ]

return (
    <>
      {/* Desktop Sidebar */}
      <div className="hidden md:flex md:w-64 md:flex-col md:fixed md:inset-y-0">
        <div className="flex-1 flex flex-col min-h-0 bg-gray-800">
          <div className="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
            <div className="flex items-center flex-shrink-0 px-4">
              <h1 className="text-white text-lg font-semibold">Portfolio System</h1>
            </div>
            <nav className="mt-5 flex-1 px-2 space-y-1">
              {allNavigation.map((item) => {
                const Icon = item.icon
                return (
                  <Link
                    key={item.name}
                    href={item.href}
                    className={cn(
                      pathname === item.href
                        ? "bg-gray-900 text-white"
                        : "text-gray-300 hover:bg-gray-700 hover:text-white",
                      "group flex items-center px-2 py-2 text-sm font-medium rounded-md",
                    )}
                  >
                    <Icon className="mr-3 h-5 w-5" />
                    {item.name}
                  </Link>
                )
              })}
            </nav>
          </div>
          <div className="flex-shrink-0 flex bg-gray-700 p-4">
            <div className="flex items-center w-full">
              <div className="flex-1">
                <p className="text-sm font-medium text-white">{session.user.email}</p>
                <p className="text-xs text-gray-300">{session.user.role}</p>
              </div>
              <Button variant="ghost" size="sm" onClick={() => signOut()} className="text-gray-300 hover:text-white">
                <LogOut className="h-4 w-4" />
              </Button>
            </div>
          </div>
        </div>
      </div>

{/* Mobile menu button */}
      <div className="md:hidden">
        <div className="flex items-center justify-between bg-gray-800 px-4 py-3">
          <h1 className="text-white text-lg font-semibold">Portfolio System</h1>
          <Button
            variant="ghost"
            size="sm"
            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
            className="text-white"
          >
            <Menu className="h-6 w-6" />
          </Button>
        </div>

{/* Mobile menu */}
        {isMobileMenuOpen && (
          <div className="bg-gray-800 px-2 pt-2 pb-3 space-y-1">
            {allNavigation.map((item) => {
              const Icon = item.icon
              return (
                <Link
                  key={item.name}
                  href={item.href}
                  className={cn(
                    pathname === item.href
                      ? "bg-gray-900 text-white"
                      : "text-gray-300 hover:bg-gray-700 hover:text-white",
                    "group flex items-center px-3 py-2 text-base font-medium rounded-md",
                  )}
                  onClick={() => setIsMobileMenuOpen(false)}
                >
                  <Icon className="mr-3 h-5 w-5" />
                  {item.name}
                </Link>
              )
            })}
            <Button
              variant="ghost"
              onClick={() => signOut()}
              className="w-full justify-start text-gray-300 hover:text-white hover:bg-gray-700"
            >
              <LogOut className="mr-3 h-5 w-5" />
              Sign Out
            </Button>
          </div>
        )}
      </div>
    </>
  )
}
[V0_FILE]typescriptreact:file="components/providers/session-provider.tsx"
"use client"

import type React from "react"

import { SessionProvider } from "next-auth/react"

export function AuthProvider({ children }: { children: React.ReactNode }) {
  return <SessionProvider>{children}</SessionProvider>
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx"
'use client'

import * as React from 'react'
import {
  ThemeProvider as NextThemesProvider,
  type ThemeProviderProps,
} from 'next-themes'

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
[V0_FILE]typescriptreact:file="components/ui/accordion.tsx"
"use client"

import * as React from "react"
import * as AccordionPrimitive from "@radix-ui/react-accordion"
import { ChevronDown } from "lucide-react"

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

const Accordion = AccordionPrimitive.Root

const AccordionItem = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
>(({ className, ...props }, ref) => (
  <AccordionPrimitive.Item
    ref={ref}
    className={cn("border-b", className)}
    {...props}
  />
))
AccordionItem.displayName = "AccordionItem"

const AccordionTrigger = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <AccordionPrimitive.Header className="flex">
    <AccordionPrimitive.Trigger
      ref={ref}
      className={cn(
        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
        className
      )}
      {...props}
    >
      {children}
      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
    </AccordionPrimitive.Trigger>
  </AccordionPrimitive.Header>
))
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName

const AccordionContent = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <AccordionPrimitive.Content
    ref={ref}
    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
    {...props}
  >
    <div className={cn("pb-4 pt-0", className)}>{children}</div>
  </AccordionPrimitive.Content>
))

AccordionContent.displayName = AccordionPrimitive.Content.displayName

export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
[V0_FILE]typescriptreact:file="components/ui/alert-dialog.tsx"
"use client"

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

import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"

const AlertDialog = AlertDialogPrimitive.Root

const AlertDialogTrigger = AlertDialogPrimitive.Trigger

const AlertDialogPortal = AlertDialogPrimitive.Portal

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

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

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

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

const AlertDialogTitle = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Title
    ref={ref}
    className={cn("text-lg font-semibold", className)}
    {...props}
  />
))
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName

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

const AlertDialogAction = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Action>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Action
    ref={ref}
    className={cn(buttonVariants(), className)}
    {...props}
  />
))
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName

const AlertDialogCancel = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Cancel
    ref={ref}
    className={cn(
      buttonVariants({ variant: "outline" }),
      "mt-2 sm:mt-0",
      className
    )}
    {...props}
  />
))
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName

export {
  AlertDialog,
  AlertDialogPortal,
  AlertDialogOverlay,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
}
[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<HTMLDivElement> & VariantProps<typeof alertVariants>
>(({ className, variant, ...props }, ref) => (
  <div
    ref={ref}
    role="alert"
    className={cn(alertVariants({ variant }), className)}
    {...props}
  />
))
Alert.displayName = "Alert"

const AlertTitle = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
  <h5
    ref={ref}
    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
    {...props}
  />
))
AlertTitle.displayName = "AlertTitle"

const AlertDescription = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("text-sm [&_p]:leading-relaxed", className)}
    {...props}
  />
))
AlertDescription.displayName = "AlertDescription"

export { Alert, AlertTitle, AlertDescription }
[V0_FILE]typescriptreact:file="components/ui/aspect-ratio.tsx"
"use client"

import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"

const AspectRatio = AspectRatioPrimitive.Root

export { AspectRatio }
[V0_FILE]typescriptreact:file="components/ui/avatar.tsx"
"use client"

import * as React from "react"
import * as AvatarPrimitive from "@radix-ui/react-avatar"

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

const Avatar = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Root
    ref={ref}
    className={cn(
      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
      className
    )}
    {...props}
  />
))
Avatar.displayName = AvatarPrimitive.Root.displayName

const AvatarImage = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Image>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Image
    ref={ref}
    className={cn("aspect-square h-full w-full", className)}
    {...props}
  />
))
AvatarImage.displayName = AvatarPrimitive.Image.displayName

const AvatarFallback = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Fallback>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Fallback
    ref={ref}
    className={cn(
      "flex h-full w-full items-center justify-center rounded-full bg-muted",
      className
    )}
    {...props}
  />
))
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName

export { Avatar, AvatarImage, AvatarFallback }
[V0_FILE]typescriptreact:file="components/ui/badge.tsx"
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

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

const badgeVariants = cva(
  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default:
          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
        secondary:
          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
        destructive:
          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
        outline: "text-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

export interface BadgeProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: BadgeProps) {
  return (
    <div className={cn(badgeVariants({ variant }), className)} {...props} />
  )
}

export { Badge, badgeVariants }
[V0_FILE]typescriptreact:file="components/ui/breadcrumb.tsx"
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { ChevronRight, MoreHorizontal } from "lucide-react"

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

const Breadcrumb = React.forwardRef<
  HTMLElement,
  React.ComponentPropsWithoutRef<"nav"> & {
    separator?: React.ReactNode
  }
>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
Breadcrumb.displayName = "Breadcrumb"

const BreadcrumbList = React.forwardRef<
  HTMLOListElement,
  React.ComponentPropsWithoutRef<"ol">
>(({ className, ...props }, ref) => (
  <ol
    ref={ref}
    className={cn(
      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
      className
    )}
    {...props}
  />
))
BreadcrumbList.displayName = "BreadcrumbList"

const BreadcrumbItem = React.forwardRef<
  HTMLLIElement,
  React.ComponentPropsWithoutRef<"li">
>(({ className, ...props }, ref) => (
  <li
    ref={ref}
    className={cn("inline-flex items-center gap-1.5", className)}
    {...props}
  />
))
BreadcrumbItem.displayName = "BreadcrumbItem"

const BreadcrumbLink = React.forwardRef<
  HTMLAnchorElement,
  React.ComponentPropsWithoutRef<"a"> & {
    asChild?: boolean
  }
>(({ asChild, className, ...props }, ref) => {
  const Comp = asChild ? Slot : "a"

return (
    <Comp
      ref={ref}
      className={cn("transition-colors hover:text-foreground", className)}
      {...props}
    />
  )
})
BreadcrumbLink.displayName = "BreadcrumbLink"

const BreadcrumbPage = React.forwardRef<
  HTMLSpanElement,
  React.ComponentPropsWithoutRef<"span">
>(({ className, ...props }, ref) => (
  <span
    ref={ref}
    role="link"
    aria-disabled="true"
    aria-current="page"
    className={cn("font-normal text-foreground", className)}
    {...props}
  />
))
BreadcrumbPage.displayName = "BreadcrumbPage"

const BreadcrumbSeparator = ({
  children,
  className,
  ...props
}: React.ComponentProps<"li">) => (
  <li
    role="presentation"
    aria-hidden="true"
    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
    {...props}
  >
    {children ?? <ChevronRight />}
  </li>
)
BreadcrumbSeparator.displayName = "BreadcrumbSeparator"

const BreadcrumbEllipsis = ({
  className,
  ...props
}: React.ComponentProps<"span">) => (
  <span
    role="presentation"
    aria-hidden="true"
    className={cn("flex h-9 w-9 items-center justify-center", className)}
    {...props}
  >
    <MoreHorizontal className="h-4 w-4" />
    <span className="sr-only">More</span>
  </span>
)
BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"

export {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
}
[V0_FILE]typescriptreact:file="components/ui/button.tsx"
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

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

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive:
          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline:
          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
        secondary:
          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button"
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    )
  }
)
Button.displayName = "Button"

export { Button, buttonVariants }
[V0_FILE]typescriptreact:file="components/ui/calendar.tsx"
"use client"

import * as React from "react"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { DayPicker } from "react-day-picker"

import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"

export type CalendarProps = React.ComponentProps<typeof DayPicker>

function Calendar({
  className,
  classNames,
  showOutsideDays = true,
  ...props
}: CalendarProps) {
  return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      className={cn("p-3", className)}
      classNames={{
        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
        month: "space-y-4",
        caption: "flex justify-center pt-1 relative items-center",
        caption_label: "text-sm font-medium",
        nav: "space-x-1 flex items-center",
        nav_button: cn(
          buttonVariants({ variant: "outline" }),
          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
        ),
        nav_button_previous: "absolute left-1",
        nav_button_next: "absolute right-1",
        table: "w-full border-collapse space-y-1",
        head_row: "flex",
        head_cell:
          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
        row: "flex w-full mt-2",
        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
        day: cn(
          buttonVariants({ variant: "ghost" }),
          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
        ),
        day_range_end: "day-range-end",
        day_selected:
          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
        day_today: "bg-accent text-accent-foreground",
        day_outside:
          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
        day_disabled: "text-muted-foreground opacity-50",
        day_range_middle:
          "aria-selected:bg-accent aria-selected:text-accent-foreground",
        day_hidden: "invisible",
        ...classNames,
      }}
      components={{
        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
      }}
      {...props}
    />
  )
}
Calendar.displayName = "Calendar"

export { Calendar }
[V0_FILE]typescriptreact:file="components/ui/card.tsx"
import * as React from "react"

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

const Card = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "rounded-lg border bg-card text-card-foreground shadow-sm",
      className
    )}
    {...props}
  />
))
Card.displayName = "Card"

const CardHeader = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("flex flex-col space-y-1.5 p-6", className)}
    {...props}
  />
))
CardHeader.displayName = "CardHeader"

const CardTitle = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "text-2xl font-semibold leading-none tracking-tight",
      className
    )}
    {...props}
  />
))
CardTitle.displayName = "CardTitle"

const CardDescription = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
))
CardDescription.displayName = "CardDescription"

const CardContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
))
CardContent.displayName = "CardContent"

const CardFooter = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("flex items-center p-6 pt-0", className)}
    {...props}
  />
))
CardFooter.displayName = "CardFooter"

export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
[V0_FILE]typescriptreact:file="components/ui/carousel.tsx"
"use client"

import * as React from "react"
import useEmblaCarousel, {
  type UseEmblaCarouselType,
} from "embla-carousel-react"
import { ArrowLeft, ArrowRight } from "lucide-react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"

type CarouselApi = UseEmblaCarouselType[1]
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
type CarouselOptions = UseCarouselParameters[0]
type CarouselPlugin = UseCarouselParameters[1]

type CarouselProps = {
  opts?: CarouselOptions
  plugins?: CarouselPlugin
  orientation?: "horizontal" | "vertical"
  setApi?: (api: CarouselApi) => void
}

type CarouselContextProps = {
  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
  api: ReturnType<typeof useEmblaCarousel>[1]
  scrollPrev: () => void
  scrollNext: () => void
  canScrollPrev: boolean
  canScrollNext: boolean
} & CarouselProps

const CarouselContext = React.createContext<CarouselContextProps | null>(null)

function useCarousel() {
  const context = React.useContext(CarouselContext)

if (!context) {
    throw new Error("useCarousel must be used within a <Carousel />")
  }

return context
}

const Carousel = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & CarouselProps
>(
  (
    {
      orientation = "horizontal",
      opts,
      setApi,
      plugins,
      className,
      children,
      ...props
    },
    ref
  ) => {
    const [carouselRef, api] = useEmblaCarousel(
      {
        ...opts,
        axis: orientation === "horizontal" ? "x" : "y",
      },
      plugins
    )
    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
    const [canScrollNext, setCanScrollNext] = React.useState(false)

const onSelect = React.useCallback((api: CarouselApi) => {
      if (!api) {
        return
      }

setCanScrollPrev(api.canScrollPrev())
      setCanScrollNext(api.canScrollNext())
    }, [])

const scrollPrev = React.useCallback(() => {
      api?.scrollPrev()
    }, [api])

const scrollNext = React.useCallback(() => {
      api?.scrollNext()
    }, [api])

const handleKeyDown = React.useCallback(
      (event: React.KeyboardEvent<HTMLDivElement>) => {
        if (event.key === "ArrowLeft") {
          event.preventDefault()
          scrollPrev()
        } else if (event.key === "ArrowRight") {
          event.preventDefault()
          scrollNext()
        }
      },
      [scrollPrev, scrollNext]
    )

React.useEffect(() => {
      if (!api || !setApi) {
        return
      }

setApi(api)
    }, [api, setApi])

React.useEffect(() => {
      if (!api) {
        return
      }

onSelect(api)
      api.on("reInit", onSelect)
      api.on("select", onSelect)

return () => {
        api?.off("select", onSelect)
      }
    }, [api, onSelect])

return (
      <CarouselContext.Provider
        value={{
          carouselRef,
          api: api,
          opts,
          orientation:
            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
          scrollPrev,
          scrollNext,
          canScrollPrev,
          canScrollNext,
        }}
      >
        <div
          ref={ref}
          onKeyDownCapture={handleKeyDown}
          className={cn("relative", className)}
          role="region"
          aria-roledescription="carousel"
          {...props}
        >
          {children}
        </div>
      </CarouselContext.Provider>
    )
  }
)
Carousel.displayName = "Carousel"

const CarouselContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const { carouselRef, orientation } = useCarousel()

return (
    <div ref={carouselRef} className="overflow-hidden">
      <div
        ref={ref}
        className={cn(
          "flex",
          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
          className
        )}
        {...props}
      />
    </div>
  )
})
CarouselContent.displayName = "CarouselContent"

const CarouselItem = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const { orientation } = useCarousel()

return (
    <div
      ref={ref}
      role="group"
      aria-roledescription="slide"
      className={cn(
        "min-w-0 shrink-0 grow-0 basis-full",
        orientation === "horizontal" ? "pl-4" : "pt-4",
        className
      )}
      {...props}
    />
  )
})
CarouselItem.displayName = "CarouselItem"

const CarouselPrevious = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<typeof Button>
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
  const { orientation, scrollPrev, canScrollPrev } = useCarousel()

return (
    <Button
      ref={ref}
      variant={variant}
      size={size}
      className={cn(
        "absolute  h-8 w-8 rounded-full",
        orientation === "horizontal"
          ? "-left-12 top-1/2 -translate-y-1/2"
          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
        className
      )}
      disabled={!canScrollPrev}
      onClick={scrollPrev}
      {...props}
    >
      <ArrowLeft className="h-4 w-4" />
      <span className="sr-only">Previous slide</span>
    </Button>
  )
})
CarouselPrevious.displayName = "CarouselPrevious"

const CarouselNext = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<typeof Button>
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
  const { orientation, scrollNext, canScrollNext } = useCarousel()

return (
    <Button
      ref={ref}
      variant={variant}
      size={size}
      className={cn(
        "absolute h-8 w-8 rounded-full",
        orientation === "horizontal"
          ? "-right-12 top-1/2 -translate-y-1/2"
          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
        className
      )}
      disabled={!canScrollNext}
      onClick={scrollNext}
      {...props}
    >
      <ArrowRight className="h-4 w-4" />
      <span className="sr-only">Next slide</span>
    </Button>
  )
})
CarouselNext.displayName = "CarouselNext"

export {
  type CarouselApi,
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselPrevious,
  CarouselNext,
}
[V0_FILE]typescriptreact:file="components/ui/chart.tsx"
"use client"

import * as React from "react"
import * as RechartsPrimitive from "recharts"

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

// Format: { THEME_NAME: CSS_SELECTOR }
const THEMES = { light: "", dark: ".dark" } as const

export type ChartConfig = {
  [k in string]: {
    label?: React.ReactNode
    icon?: React.ComponentType
  } & (
    | { color?: string; theme?: never }
    | { color?: never; theme: Record<keyof typeof THEMES, string> }
  )
}

type ChartContextProps = {
  config: ChartConfig
}

const ChartContext = React.createContext<ChartContextProps | null>(null)

function useChart() {
  const context = React.useContext(ChartContext)

if (!context) {
    throw new Error("useChart must be used within a <ChartContainer />")
  }

return context
}

const ChartContainer = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & {
    config: ChartConfig
    children: React.ComponentProps<
      typeof RechartsPrimitive.ResponsiveContainer
    >["children"]
  }
>(({ id, className, children, config, ...props }, ref) => {
  const uniqueId = React.useId()
  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`

return (
    <ChartContext.Provider value={{ config }}>
      <div
        data-chart={chartId}
        ref={ref}
        className={cn(
          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
          className
        )}
        {...props}
      >
        <ChartStyle id={chartId} config={config} />
        <RechartsPrimitive.ResponsiveContainer>
          {children}
        </RechartsPrimitive.ResponsiveContainer>
      </div>
    </ChartContext.Provider>
  )
})
ChartContainer.displayName = "Chart"

const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
  const colorConfig = Object.entries(config).filter(
    ([_, config]) => config.theme || config.color
  )

if (!colorConfig.length) {
    return null
  }

return (
    <style
      dangerouslySetInnerHTML={{
        __html: Object.entries(THEMES)
          .map(
            ([theme, prefix]) => `
${prefix} [data-chart=${id}] {
${colorConfig
  .map(([key, itemConfig]) => {
    const color =
      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
      itemConfig.color
    return color ? `  --color-${key}: ${color};` : null
  })
  .join("\n")}
}
`
          )
          .join("\n"),
      }}
    />
  )
}

const ChartTooltip = RechartsPrimitive.Tooltip

const ChartTooltipContent = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
    React.ComponentProps<"div"> & {
      hideLabel?: boolean
      hideIndicator?: boolean
      indicator?: "line" | "dot" | "dashed"
      nameKey?: string
      labelKey?: string
    }
>(
  (
    {
      active,
      payload,
      className,
      indicator = "dot",
      hideLabel = false,
      hideIndicator = false,
      label,
      labelFormatter,
      labelClassName,
      formatter,
      color,
      nameKey,
      labelKey,
    },
    ref
  ) => {
    const { config } = useChart()

const tooltipLabel = React.useMemo(() => {
      if (hideLabel || !payload?.length) {
        return null
      }

const [item] = payload
      const key = `${labelKey || item.dataKey || item.name || "value"}`
      const itemConfig = getPayloadConfigFromPayload(config, item, key)
      const value =
        !labelKey && typeof label === "string"
          ? config[label as keyof typeof config]?.label || label
          : itemConfig?.label

if (labelFormatter) {
        return (
          <div className={cn("font-medium", labelClassName)}>
            {labelFormatter(value, payload)}
          </div>
        )
      }

if (!value) {
        return null
      }

return <div className={cn("font-medium", labelClassName)}>{value}</div>
    }, [
      label,
      labelFormatter,
      payload,
      hideLabel,
      labelClassName,
      config,
      labelKey,
    ])

if (!active || !payload?.length) {
      return null
    }

const nestLabel = payload.length === 1 && indicator !== "dot"

return (
      <div
        ref={ref}
        className={cn(
          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
          className
        )}
      >
        {!nestLabel ? tooltipLabel : null}
        <div className="grid gap-1.5">
          {payload.map((item, index) => {
            const key = `${nameKey || item.name || item.dataKey || "value"}`
            const itemConfig = getPayloadConfigFromPayload(config, item, key)
            const indicatorColor = color || item.payload.fill || item.color

return (
              <div
                key={item.dataKey}
                className={cn(
                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
                  indicator === "dot" && "items-center"
                )}
              >
                {formatter && item?.value !== undefined && item.name ? (
                  formatter(item.value, item.name, item, index, item.payload)
                ) : (
                  <>
                    {itemConfig?.icon ? (
                      <itemConfig.icon />
                    ) : (
                      !hideIndicator && (
                        <div
                          className={cn(
                            "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
                            {
                              "h-2.5 w-2.5": indicator === "dot",
                              "w-1": indicator === "line",
                              "w-0 border-[1.5px] border-dashed bg-transparent":
                                indicator === "dashed",
                              "my-0.5": nestLabel && indicator === "dashed",
                            }
                          )}
                          style={
                            {
                              "--color-bg": indicatorColor,
                              "--color-border": indicatorColor,
                            } as React.CSSProperties
                          }
                        />
                      )
                    )}
                    <div
                      className={cn(
                        "flex flex-1 justify-between leading-none",
                        nestLabel ? "items-end" : "items-center"
                      )}
                    >
                      <div className="grid gap-1.5">
                        {nestLabel ? tooltipLabel : null}
                        <span className="text-muted-foreground">
                          {itemConfig?.label || item.name}
                        </span>
                      </div>
                      {item.value && (
                        <span className="font-mono font-medium tabular-nums text-foreground">
                          {item.value.toLocaleString()}
                        </span>
                      )}
                    </div>
                  </>
                )}
              </div>
            )
          })}
        </div>
      </div>
    )
  }
)
ChartTooltipContent.displayName = "ChartTooltip"

const ChartLegend = RechartsPrimitive.Legend

const ChartLegendContent = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> &
    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
      hideIcon?: boolean
      nameKey?: string
    }
>(
  (
    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
    ref
  ) => {
    const { config } = useChart()

if (!payload?.length) {
      return null
    }

return (
      <div
        ref={ref}
        className={cn(
          "flex items-center justify-center gap-4",
          verticalAlign === "top" ? "pb-3" : "pt-3",
          className
        )}
      >
        {payload.map((item) => {
          const key = `${nameKey || item.dataKey || "value"}`
          const itemConfig = getPayloadConfigFromPayload(config, item, key)

return (
            <div
              key={item.value}
              className={cn(
                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
              )}
            >
              {itemConfig?.icon && !hideIcon ? (
                <itemConfig.icon />
              ) : (
                <div
                  className="h-2 w-2 shrink-0 rounded-[2px]"
                  style={{
                    backgroundColor: item.color,
                  }}
                />
              )}
              {itemConfig?.label}
            </div>
          )
        })}
      </div>
    )
  }
)
ChartLegendContent.displayName = "ChartLegend"

// Helper to extract item config from a payload.
function getPayloadConfigFromPayload(
  config: ChartConfig,
  payload: unknown,
  key: string
) {
  if (typeof payload !== "object" || payload === null) {
    return undefined
  }

const payloadPayload =
    "payload" in payload &&
    typeof payload.payload === "object" &&
    payload.payload !== null
      ? payload.payload
      : undefined

let configLabelKey: string = key

if (
    key in payload &&
    typeof payload[key as keyof typeof payload] === "string"
  ) {
    configLabelKey = payload[key as keyof typeof payload] as string
  } else if (
    payloadPayload &&
    key in payloadPayload &&
    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
  ) {
    configLabelKey = payloadPayload[
      key as keyof typeof payloadPayload
    ] as string
  }

return configLabelKey in config
    ? config[configLabelKey]
    : config[key as keyof typeof config]
}

export {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
  ChartStyle,
}
[V0_FILE]typescriptreact:file="components/ui/checkbox.tsx"
"use client"

import * as React from "react"
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
import { Check } from "lucide-react"

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

const Checkbox = React.forwardRef<
  React.ElementRef<typeof CheckboxPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>(({ className, ...props }, ref) => (
  <CheckboxPrimitive.Root
    ref={ref}
    className={cn(
      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
      className
    )}
    {...props}
  >
    <CheckboxPrimitive.Indicator
      className={cn("flex items-center justify-center text-current")}
    >
      <Check className="h-4 w-4" />
    </CheckboxPrimitive.Indicator>
  </CheckboxPrimitive.Root>
))
Checkbox.displayName = CheckboxPrimitive.Root.displayName

export { Checkbox }
[V0_FILE]typescriptreact:file="components/ui/collapsible.tsx"
"use client"

import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"

const Collapsible = CollapsiblePrimitive.Root

const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger

const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent

export { Collapsible, CollapsibleTrigger, CollapsibleContent }
[V0_FILE]typescriptreact:file="components/ui/command.tsx"
"use client"

import * as React from "react"
import { type DialogProps } from "@radix-ui/react-dialog"
import { Command as CommandPrimitive } from "cmdk"
import { Search } from "lucide-react"

import { cn } from "@/lib/utils"
import { Dialog, DialogContent } from "@/components/ui/dialog"

const Command = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
>(({ className, ...props }, ref) => (
  <CommandPrimitive
    ref={ref}
    className={cn(
      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
      className
    )}
    {...props}
  />
))
Command.displayName = CommandPrimitive.displayName

const CommandDialog = ({ children, ...props }: DialogProps) => {
  return (
    <Dialog {...props}>
      <DialogContent className="overflow-hidden p-0 shadow-lg">
        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
          {children}
        </Command>
      </DialogContent>
    </Dialog>
  )
}

const CommandInput = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Input>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
>(({ className, ...props }, ref) => (
  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
    <CommandPrimitive.Input
      ref={ref}
      className={cn(
        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
        className
      )}
      {...props}
    />
  </div>
))

CommandInput.displayName = CommandPrimitive.Input.displayName

const CommandList = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.List
    ref={ref}
    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
    {...props}
  />
))

CommandList.displayName = CommandPrimitive.List.displayName

const CommandEmpty = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Empty>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
>((props, ref) => (
  <CommandPrimitive.Empty
    ref={ref}
    className="py-6 text-center text-sm"
    {...props}
  />
))

CommandEmpty.displayName = CommandPrimitive.Empty.displayName

const CommandGroup = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Group>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.Group
    ref={ref}
    className={cn(
      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
      className
    )}
    {...props}
  />
))

CommandGroup.displayName = CommandPrimitive.Group.displayName

const CommandSeparator = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.Separator
    ref={ref}
    className={cn("-mx-1 h-px bg-border", className)}
    {...props}
  />
))
CommandSeparator.displayName = CommandPrimitive.Separator.displayName

const CommandItem = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
      className
    )}
    {...props}
  />
))

CommandItem.displayName = CommandPrimitive.Item.displayName

const CommandShortcut = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
  return (
    <span
      className={cn(
        "ml-auto text-xs tracking-widest text-muted-foreground",
        className
      )}
      {...props}
    />
  )
}
CommandShortcut.displayName = "CommandShortcut"

export {
  Command,
  CommandDialog,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandShortcut,
  CommandSeparator,
}
[V0_FILE]typescriptreact:file="components/ui/context-menu.tsx"
"use client"

import * as React from "react"
import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
import { Check, ChevronRight, Circle } from "lucide-react"

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

const ContextMenu = ContextMenuPrimitive.Root

const ContextMenuTrigger = ContextMenuPrimitive.Trigger

const ContextMenuGroup = ContextMenuPrimitive.Group

const ContextMenuPortal = ContextMenuPrimitive.Portal

const ContextMenuSub = ContextMenuPrimitive.Sub

const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup

const ContextMenuSubTrigger = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
    inset?: boolean
  }
>(({ className, inset, children, ...props }, ref) => (
  <ContextMenuPrimitive.SubTrigger
    ref={ref}
    className={cn(
      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
      inset && "pl-8",
      className
    )}
    {...props}
  >
    {children}
    <ChevronRight className="ml-auto h-4 w-4" />
  </ContextMenuPrimitive.SubTrigger>
))
ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName

const ContextMenuSubContent = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
>(({ className, ...props }, ref) => (
  <ContextMenuPrimitive.SubContent
    ref={ref}
    className={cn(
      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
      className
    )}
    {...props}
  />
))
ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName

const ContextMenuContent = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
>(({ className, ...props }, ref) => (
  <ContextMenuPrimitive.Portal>
    <ContextMenuPrimitive.Content
      ref={ref}
      className={cn(
        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        className
      )}
      {...props}
    />
  </ContextMenuPrimitive.Portal>
))
ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName

const ContextMenuItem = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <ContextMenuPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      inset && "pl-8",
      className
    )}
    {...props}
  />
))
ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName

const ContextMenuCheckboxItem = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
  <ContextMenuPrimitive.CheckboxItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    checked={checked}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <ContextMenuPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </ContextMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </ContextMenuPrimitive.CheckboxItem>
))
ContextMenuCheckboxItem.displayName =
  ContextMenuPrimitive.CheckboxItem.displayName

const ContextMenuRadioItem = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
  <ContextMenuPrimitive.RadioItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <ContextMenuPrimitive.ItemIndicator>
        <Circle className="h-2 w-2 fill-current" />
      </ContextMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </ContextMenuPrimitive.RadioItem>
))
ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName

const ContextMenuLabel = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <ContextMenuPrimitive.Label
    ref={ref}
    className={cn(
      "px-2 py-1.5 text-sm font-semibold text-foreground",
      inset && "pl-8",
      className
    )}
    {...props}
  />
))
ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName

const ContextMenuSeparator = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <ContextMenuPrimitive.Separator
    ref={ref}
    className={cn("-mx-1 my-1 h-px bg-border", className)}
    {...props}
  />
))
ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName

const ContextMenuShortcut = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
  return (
    <span
      className={cn(
        "ml-auto text-xs tracking-widest text-muted-foreground",
        className
      )}
      {...props}
    />
  )
}
ContextMenuShortcut.displayName = "ContextMenuShortcut"

export {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuCheckboxItem,
  ContextMenuRadioItem,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuGroup,
  ContextMenuPortal,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuRadioGroup,
}
[V0_FILE]typescriptreact:file="components/ui/dialog.tsx"
"use client"

import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { X } from "lucide-react"

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

const Dialog = DialogPrimitive.Root

const DialogTrigger = DialogPrimitive.Trigger

const DialogPortal = DialogPrimitive.Portal

const DialogClose = DialogPrimitive.Close

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

const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DialogPortal>
    <DialogOverlay />
    <DialogPrimitive.Content
      ref={ref}
      className={cn(
        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
        className
      )}
      {...props}
    >
      {children}
      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </DialogPrimitive.Close>
    </DialogPrimitive.Content>
  </DialogPortal>
))
DialogContent.displayName = DialogPrimitive.Content.displayName

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

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

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

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

export {
  Dialog,
  DialogPortal,
  DialogOverlay,
  DialogClose,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
}
[V0_FILE]typescriptreact:file="components/ui/drawer.tsx"
"use client"

import * as React from "react"
import { Drawer as DrawerPrimitive } from "vaul"

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

const Drawer = ({
  shouldScaleBackground = true,
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
  <DrawerPrimitive.Root
    shouldScaleBackground={shouldScaleBackground}
    {...props}
  />
)
Drawer.displayName = "Drawer"

const DrawerTrigger = DrawerPrimitive.Trigger

const DrawerPortal = DrawerPrimitive.Portal

const DrawerClose = DrawerPrimitive.Close

const DrawerOverlay = React.forwardRef<
  React.ElementRef<typeof DrawerPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <DrawerPrimitive.Overlay
    ref={ref}
    className={cn("fixed inset-0 z-50 bg-black/80", className)}
    {...props}
  />
))
DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName

const DrawerContent = React.forwardRef<
  React.ElementRef<typeof DrawerPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DrawerPortal>
    <DrawerOverlay />
    <DrawerPrimitive.Content
      ref={ref}
      className={cn(
        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
        className
      )}
      {...props}
    >
      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
      {children}
    </DrawerPrimitive.Content>
  </DrawerPortal>
))
DrawerContent.displayName = "DrawerContent"

const DrawerHeader = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
    {...props}
  />
)
DrawerHeader.displayName = "DrawerHeader"

const DrawerFooter = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
    {...props}
  />
)
DrawerFooter.displayName = "DrawerFooter"

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

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

export {
  Drawer,
  DrawerPortal,
  DrawerOverlay,
  DrawerTrigger,
  DrawerClose,
  DrawerContent,
  DrawerHeader,
  DrawerFooter,
  DrawerTitle,
  DrawerDescription,
}
[V0_FILE]typescriptreact:file="components/ui/dropdown-menu.tsx"
"use client"

import * as React from "react"
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
import { Check, ChevronRight, Circle } from "lucide-react"

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

const DropdownMenu = DropdownMenuPrimitive.Root

const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger

const DropdownMenuGroup = DropdownMenuPrimitive.Group

const DropdownMenuPortal = DropdownMenuPrimitive.Portal

const DropdownMenuSub = DropdownMenuPrimitive.Sub

const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup

const DropdownMenuSubTrigger = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
    inset?: boolean
  }
>(({ className, inset, children, ...props }, ref) => (
  <DropdownMenuPrimitive.SubTrigger
    ref={ref}
    className={cn(
      "flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
      inset && "pl-8",
      className
    )}
    {...props}
  >
    {children}
    <ChevronRight className="ml-auto" />
  </DropdownMenuPrimitive.SubTrigger>
))
DropdownMenuSubTrigger.displayName =
  DropdownMenuPrimitive.SubTrigger.displayName

const DropdownMenuSubContent = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
>(({ className, ...props }, ref) => (
  <DropdownMenuPrimitive.SubContent
    ref={ref}
    className={cn(
      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
      className
    )}
    {...props}
  />
))
DropdownMenuSubContent.displayName =
  DropdownMenuPrimitive.SubContent.displayName

const DropdownMenuContent = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
  <DropdownMenuPrimitive.Portal>
    <DropdownMenuPrimitive.Content
      ref={ref}
      sideOffset={sideOffset}
      className={cn(
        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        className
      )}
      {...props}
    />
  </DropdownMenuPrimitive.Portal>
))
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName

const DropdownMenuItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <DropdownMenuPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
      inset && "pl-8",
      className
    )}
    {...props}
  />
))
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName

const DropdownMenuCheckboxItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
  <DropdownMenuPrimitive.CheckboxItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    checked={checked}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <DropdownMenuPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </DropdownMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </DropdownMenuPrimitive.CheckboxItem>
))
DropdownMenuCheckboxItem.displayName =
  DropdownMenuPrimitive.CheckboxItem.displayName

const DropdownMenuRadioItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
  <DropdownMenuPrimitive.RadioItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <DropdownMenuPrimitive.ItemIndicator>
        <Circle className="h-2 w-2 fill-current" />
      </DropdownMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </DropdownMenuPrimitive.RadioItem>
))
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName

const DropdownMenuLabel = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <DropdownMenuPrimitive.Label
    ref={ref}
    className={cn(
      "px-2 py-1.5 text-sm font-semibold",
      inset && "pl-8",
      className
    )}
    {...props}
  />
))
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName

const DropdownMenuSeparator = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <DropdownMenuPrimitive.Separator
    ref={ref}
    className={cn("-mx-1 my-1 h-px bg-muted", className)}
    {...props}
  />
))
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName

const DropdownMenuShortcut = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
  return (
    <span
      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
      {...props}
    />
  )
}
DropdownMenuShortcut.displayName = "DropdownMenuShortcut"

export {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuGroup,
  DropdownMenuPortal,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuRadioGroup,
}
[V0_FILE]typescriptreact:file="components/ui/form.tsx"
"use client"

import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { Slot } from "@radix-ui/react-slot"
import {
  Controller,
  ControllerProps,
  FieldPath,
  FieldValues,
  FormProvider,
  useFormContext,
} from "react-hook-form"

import { cn } from "@/lib/utils"
import { Label } from "@/components/ui/label"

const Form = FormProvider

type FormFieldContextValue<
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
> = {
  name: TName
}

const FormFieldContext = React.createContext<FormFieldContextValue>(
  {} as FormFieldContextValue
)

const FormField = <
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
>({
  ...props
}: ControllerProps<TFieldValues, TName>) => {
  return (
    <FormFieldContext.Provider value={{ name: props.name }}>
      <Controller {...props} />
    </FormFieldContext.Provider>
  )
}

const useFormField = () => {
  const fieldContext = React.useContext(FormFieldContext)
  const itemContext = React.useContext(FormItemContext)
  const { getFieldState, formState } = useFormContext()

const fieldState = getFieldState(fieldContext.name, formState)

if (!fieldContext) {
    throw new Error("useFormField should be used within <FormField>")
  }

const { id } = itemContext

return {
    id,
    name: fieldContext.name,
    formItemId: `${id}-form-item`,
    formDescriptionId: `${id}-form-item-description`,
    formMessageId: `${id}-form-item-message`,
    ...fieldState,
  }
}

type FormItemContextValue = {
  id: string
}

const FormItemContext = React.createContext<FormItemContextValue>(
  {} as FormItemContextValue
)

const FormItem = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const id = React.useId()

return (
    <FormItemContext.Provider value={{ id }}>
      <div ref={ref} className={cn("space-y-2", className)} {...props} />
    </FormItemContext.Provider>
  )
})
FormItem.displayName = "FormItem"

const FormLabel = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
>(({ className, ...props }, ref) => {
  const { error, formItemId } = useFormField()

return (
    <Label
      ref={ref}
      className={cn(error && "text-destructive", className)}
      htmlFor={formItemId}
      {...props}
    />
  )
})
FormLabel.displayName = "FormLabel"

const FormControl = React.forwardRef<
  React.ElementRef<typeof Slot>,
  React.ComponentPropsWithoutRef<typeof Slot>
>(({ ...props }, ref) => {
  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()

return (
    <Slot
      ref={ref}
      id={formItemId}
      aria-describedby={
        !error
          ? `${formDescriptionId}`
          : `${formDescriptionId} ${formMessageId}`
      }
      aria-invalid={!!error}
      {...props}
    />
  )
})
FormControl.displayName = "FormControl"

const FormDescription = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => {
  const { formDescriptionId } = useFormField()

return (
    <p
      ref={ref}
      id={formDescriptionId}
      className={cn("text-sm text-muted-foreground", className)}
      {...props}
    />
  )
})
FormDescription.displayName = "FormDescription"

const FormMessage = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, children, ...props }, ref) => {
  const { error, formMessageId } = useFormField()
  const body = error ? String(error?.message) : children

if (!body) {
    return null
  }

return (
    <p
      ref={ref}
      id={formMessageId}
      className={cn("text-sm font-medium text-destructive", className)}
      {...props}
    >
      {body}
    </p>
  )
})
FormMessage.displayName = "FormMessage"

export {
  useFormField,
  Form,
  FormItem,
  FormLabel,
  FormControl,
  FormDescription,
  FormMessage,
  FormField,
}
[V0_FILE]typescriptreact:file="components/ui/hover-card.tsx"
"use client"

import * as React from "react"
import * as HoverCardPrimitive from "@radix-ui/react-hover-card"

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

const HoverCard = HoverCardPrimitive.Root

const HoverCardTrigger = HoverCardPrimitive.Trigger

const HoverCardContent = React.forwardRef<
  React.ElementRef<typeof HoverCardPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
  <HoverCardPrimitive.Content
    ref={ref}
    align={align}
    sideOffset={sideOffset}
    className={cn(
      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
      className
    )}
    {...props}
  />
))
HoverCardContent.displayName = HoverCardPrimitive.Content.displayName

export { HoverCard, HoverCardTrigger, HoverCardContent }
[V0_FILE]typescriptreact:file="components/ui/input-otp.tsx"
"use client"

import * as React from "react"
import { OTPInput, OTPInputContext } from "input-otp"
import { Dot } from "lucide-react"

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

const InputOTP = React.forwardRef<
  React.ElementRef<typeof OTPInput>,
  React.ComponentPropsWithoutRef<typeof OTPInput>
>(({ className, containerClassName, ...props }, ref) => (
  <OTPInput
    ref={ref}
    containerClassName={cn(
      "flex items-center gap-2 has-[:disabled]:opacity-50",
      containerClassName
    )}
    className={cn("disabled:cursor-not-allowed", className)}
    {...props}
  />
))
InputOTP.displayName = "InputOTP"

const InputOTPGroup = React.forwardRef<
  React.ElementRef<"div">,
  React.ComponentPropsWithoutRef<"div">
>(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("flex items-center", className)} {...props} />
))
InputOTPGroup.displayName = "InputOTPGroup"

const InputOTPSlot = React.forwardRef<
  React.ElementRef<"div">,
  React.ComponentPropsWithoutRef<"div"> & { index: number }
>(({ index, className, ...props }, ref) => {
  const inputOTPContext = React.useContext(OTPInputContext)
  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]

return (
    <div
      ref={ref}
      className={cn(
        "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
        isActive && "z-10 ring-2 ring-ring ring-offset-background",
        className
      )}
      {...props}
    >
      {char}
      {hasFakeCaret && (
        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
        </div>
      )}
    </div>
  )
})
InputOTPSlot.displayName = "InputOTPSlot"

const InputOTPSeparator = React.forwardRef<
  React.ElementRef<"div">,
  React.ComponentPropsWithoutRef<"div">
>(({ ...props }, ref) => (
  <div ref={ref} role="separator" {...props}>
    <Dot />
  </div>
))
InputOTPSeparator.displayName = "InputOTPSeparator"

export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
[V0_FILE]typescriptreact:file="components/ui/input.tsx"
import * as React from "react"

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

const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
  ({ className, type, ...props }, ref) => {
    return (
      <input
        type={type}
        className={cn(
          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground 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 md:text-sm",
          className
        )}
        ref={ref}
        {...props}
      />
    )
  }
)
Input.displayName = "Input"

export { Input }
[V0_FILE]typescriptreact:file="components/ui/label.tsx"
"use client"

import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cva, type VariantProps } from "class-variance-authority"

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

const labelVariants = cva(
  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
)

const Label = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
    VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
  <LabelPrimitive.Root
    ref={ref}
    className={cn(labelVariants(), className)}
    {...props}
  />
))
Label.displayName = LabelPrimitive.Root.displayName

export { Label }
[V0_FILE]typescriptreact:file="components/ui/menubar.tsx"
"use client"

import * as React from "react"
import * as MenubarPrimitive from "@radix-ui/react-menubar"
import { Check, ChevronRight, Circle } from "lucide-react"

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

const MenubarMenu = MenubarPrimitive.Menu

const MenubarGroup = MenubarPrimitive.Group

const MenubarPortal = MenubarPrimitive.Portal

const MenubarSub = MenubarPrimitive.Sub

const MenubarRadioGroup = MenubarPrimitive.RadioGroup

const Menubar = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
>(({ className, ...props }, ref) => (
  <MenubarPrimitive.Root
    ref={ref}
    className={cn(
      "flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
      className
    )}
    {...props}
  />
))
Menubar.displayName = MenubarPrimitive.Root.displayName

const MenubarTrigger = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
>(({ className, ...props }, ref) => (
  <MenubarPrimitive.Trigger
    ref={ref}
    className={cn(
      "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
      className
    )}
    {...props}
  />
))
MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName

const MenubarSubTrigger = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
    inset?: boolean
  }
>(({ className, inset, children, ...props }, ref) => (
  <MenubarPrimitive.SubTrigger
    ref={ref}
    className={cn(
      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
      inset && "pl-8",
      className
    )}
    {...props}
  >
    {children}
    <ChevronRight className="ml-auto h-4 w-4" />
  </MenubarPrimitive.SubTrigger>
))
MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName

const MenubarSubContent = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.SubContent>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
>(({ className, ...props }, ref) => (
  <MenubarPrimitive.SubContent
    ref={ref}
    className={cn(
      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
      className
    )}
    {...props}
  />
))
MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName

const MenubarContent = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
>(
  (
    { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
    ref
  ) => (
    <MenubarPrimitive.Portal>
      <MenubarPrimitive.Content
        ref={ref}
        align={align}
        alignOffset={alignOffset}
        sideOffset={sideOffset}
        className={cn(
          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
          className
        )}
        {...props}
      />
    </MenubarPrimitive.Portal>
  )
)
MenubarContent.displayName = MenubarPrimitive.Content.displayName

const MenubarItem = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <MenubarPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      inset && "pl-8",
      className
    )}
    {...props}
  />
))
MenubarItem.displayName = MenubarPrimitive.Item.displayName

const MenubarCheckboxItem = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
  <MenubarPrimitive.CheckboxItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    checked={checked}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <MenubarPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </MenubarPrimitive.ItemIndicator>
    </span>
    {children}
  </MenubarPrimitive.CheckboxItem>
))
MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName

const MenubarRadioItem = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
  <MenubarPrimitive.RadioItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <MenubarPrimitive.ItemIndicator>
        <Circle className="h-2 w-2 fill-current" />
      </MenubarPrimitive.ItemIndicator>
    </span>
    {children}
  </MenubarPrimitive.RadioItem>
))
MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName

const MenubarLabel = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <MenubarPrimitive.Label
    ref={ref}
    className={cn(
      "px-2 py-1.5 text-sm font-semibold",
      inset && "pl-8",
      className
    )}
    {...props}
  />
))
MenubarLabel.displayName = MenubarPrimitive.Label.displayName

const MenubarSeparator = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <MenubarPrimitive.Separator
    ref={ref}
    className={cn("-mx-1 my-1 h-px bg-muted", className)}
    {...props}
  />
))
MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName

const MenubarShortcut = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
  return (
    <span
      className={cn(
        "ml-auto text-xs tracking-widest text-muted-foreground",
        className
      )}
      {...props}
    />
  )
}
MenubarShortcut.displayname = "MenubarShortcut"

export {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
  MenubarLabel,
  MenubarCheckboxItem,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarPortal,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarGroup,
  MenubarSub,
  MenubarShortcut,
}
[V0_FILE]typescriptreact:file="components/ui/navigation-menu.tsx"
import * as React from "react"
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
import { cva } from "class-variance-authority"
import { ChevronDown } from "lucide-react"

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

const NavigationMenu = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
>(({ className, children, ...props }, ref) => (
  <NavigationMenuPrimitive.Root
    ref={ref}
    className={cn(
      "relative z-10 flex max-w-max flex-1 items-center justify-center",
      className
    )}
    {...props}
  >
    {children}
    <NavigationMenuViewport />
  </NavigationMenuPrimitive.Root>
))
NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName

const NavigationMenuList = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.List
    ref={ref}
    className={cn(
      "group flex flex-1 list-none items-center justify-center space-x-1",
      className
    )}
    {...props}
  />
))
NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName

const NavigationMenuItem = NavigationMenuPrimitive.Item

const navigationMenuTriggerStyle = cva(
  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
)

const NavigationMenuTrigger = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <NavigationMenuPrimitive.Trigger
    ref={ref}
    className={cn(navigationMenuTriggerStyle(), "group", className)}
    {...props}
  >
    {children}{" "}
    <ChevronDown
      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
      aria-hidden="true"
    />
  </NavigationMenuPrimitive.Trigger>
))
NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName

const NavigationMenuContent = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.Content
    ref={ref}
    className={cn(
      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
      className
    )}
    {...props}
  />
))
NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName

const NavigationMenuLink = NavigationMenuPrimitive.Link

const NavigationMenuViewport = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
>(({ className, ...props }, ref) => (
  <div className={cn("absolute left-0 top-full flex justify-center")}>
    <NavigationMenuPrimitive.Viewport
      className={cn(
        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
        className
      )}
      ref={ref}
      {...props}
    />
  </div>
))
NavigationMenuViewport.displayName =
  NavigationMenuPrimitive.Viewport.displayName

const NavigationMenuIndicator = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.Indicator
    ref={ref}
    className={cn(
      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
      className
    )}
    {...props}
  >
    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
  </NavigationMenuPrimitive.Indicator>
))
NavigationMenuIndicator.displayName =
  NavigationMenuPrimitive.Indicator.displayName

export {
  navigationMenuTriggerStyle,
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuContent,
  NavigationMenuTrigger,
  NavigationMenuLink,
  NavigationMenuIndicator,
  NavigationMenuViewport,
}
[V0_FILE]typescriptreact:file="components/ui/pagination.tsx"
import * as React from "react"
import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"

import { cn } from "@/lib/utils"
import { ButtonProps, buttonVariants } from "@/components/ui/button"

const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
  <nav
    role="navigation"
    aria-label="pagination"
    className={cn("mx-auto flex w-full justify-center", className)}
    {...props}
  />
)
Pagination.displayName = "Pagination"

const PaginationContent = React.forwardRef<
  HTMLUListElement,
  React.ComponentProps<"ul">
>(({ className, ...props }, ref) => (
  <ul
    ref={ref}
    className={cn("flex flex-row items-center gap-1", className)}
    {...props}
  />
))
PaginationContent.displayName = "PaginationContent"

const PaginationItem = React.forwardRef<
  HTMLLIElement,
  React.ComponentProps<"li">
>(({ className, ...props }, ref) => (
  <li ref={ref} className={cn("", className)} {...props} />
))
PaginationItem.displayName = "PaginationItem"

type PaginationLinkProps = {
  isActive?: boolean
} & Pick<ButtonProps, "size"> &
  React.ComponentProps<"a">

const PaginationLink = ({
  className,
  isActive,
  size = "icon",
  ...props
}: PaginationLinkProps) => (
  <a
    aria-current={isActive ? "page" : undefined}
    className={cn(
      buttonVariants({
        variant: isActive ? "outline" : "ghost",
        size,
      }),
      className
    )}
    {...props}
  />
)
PaginationLink.displayName = "PaginationLink"

const PaginationPrevious = ({
  className,
  ...props
}: React.ComponentProps<typeof PaginationLink>) => (
  <PaginationLink
    aria-label="Go to previous page"
    size="default"
    className={cn("gap-1 pl-2.5", className)}
    {...props}
  >
    <ChevronLeft className="h-4 w-4" />
    <span>Previous</span>
  </PaginationLink>
)
PaginationPrevious.displayName = "PaginationPrevious"

const PaginationNext = ({
  className,
  ...props
}: React.ComponentProps<typeof PaginationLink>) => (
  <PaginationLink
    aria-label="Go to next page"
    size="default"
    className={cn("gap-1 pr-2.5", className)}
    {...props}
  >
    <span>Next</span>
    <ChevronRight className="h-4 w-4" />
  </PaginationLink>
)
PaginationNext.displayName = "PaginationNext"

const PaginationEllipsis = ({
  className,
  ...props
}: React.ComponentProps<"span">) => (
  <span
    aria-hidden
    className={cn("flex h-9 w-9 items-center justify-center", className)}
    {...props}
  >
    <MoreHorizontal className="h-4 w-4" />
    <span className="sr-only">More pages</span>
  </span>
)
PaginationEllipsis.displayName = "PaginationEllipsis"

export {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
}
[V0_FILE]typescriptreact:file="components/ui/popover.tsx"
"use client"

import * as React from "react"
import * as PopoverPrimitive from "@radix-ui/react-popover"

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

const Popover = PopoverPrimitive.Root

const PopoverTrigger = PopoverPrimitive.Trigger

const PopoverContent = React.forwardRef<
  React.ElementRef<typeof PopoverPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
  <PopoverPrimitive.Portal>
    <PopoverPrimitive.Content
      ref={ref}
      align={align}
      sideOffset={sideOffset}
      className={cn(
        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        className
      )}
      {...props}
    />
  </PopoverPrimitive.Portal>
))
PopoverContent.displayName = PopoverPrimitive.Content.displayName

export { Popover, PopoverTrigger, PopoverContent }
[V0_FILE]typescriptreact:file="components/ui/progress.tsx"
"use client"

import * as React from "react"
import * as ProgressPrimitive from "@radix-ui/react-progress"

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

const Progress = React.forwardRef<
  React.ElementRef<typeof ProgressPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
>(({ className, value, ...props }, ref) => (
  <ProgressPrimitive.Root
    ref={ref}
    className={cn(
      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
      className
    )}
    {...props}
  >
    <ProgressPrimitive.Indicator
      className="h-full w-full flex-1 bg-primary transition-all"
      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
    />
  </ProgressPrimitive.Root>
))
Progress.displayName = ProgressPrimitive.Root.displayName

export { Progress }
[V0_FILE]typescriptreact:file="components/ui/radio-group.tsx"
"use client"

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

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

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

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

export { RadioGroup, RadioGroupItem }
[V0_FILE]typescriptreact:file="components/ui/resizable.tsx"
"use client"

import { GripVertical } from "lucide-react"
import * as ResizablePrimitive from "react-resizable-panels"

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

const ResizablePanelGroup = ({
  className,
  ...props
}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
  <ResizablePrimitive.PanelGroup
    className={cn(
      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
      className
    )}
    {...props}
  />
)

const ResizablePanel = ResizablePrimitive.Panel

const ResizableHandle = ({
  withHandle,
  className,
  ...props
}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
  withHandle?: boolean
}) => (
  <ResizablePrimitive.PanelResizeHandle
    className={cn(
      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
      className
    )}
    {...props}
  >
    {withHandle && (
      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
        <GripVertical className="h-2.5 w-2.5" />
      </div>
    )}
  </ResizablePrimitive.PanelResizeHandle>
)

export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
[V0_FILE]typescriptreact:file="components/ui/scroll-area.tsx"
"use client"

import * as React from "react"
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"

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

const ScrollArea = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
>(({ className, children, ...props }, ref) => (
  <ScrollAreaPrimitive.Root
    ref={ref}
    className={cn("relative overflow-hidden", className)}
    {...props}
  >
    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
      {children}
    </ScrollAreaPrimitive.Viewport>
    <ScrollBar />
    <ScrollAreaPrimitive.Corner />
  </ScrollAreaPrimitive.Root>
))
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName

const ScrollBar = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
>(({ className, orientation = "vertical", ...props }, ref) => (
  <ScrollAreaPrimitive.ScrollAreaScrollbar
    ref={ref}
    orientation={orientation}
    className={cn(
      "flex touch-none select-none transition-colors",
      orientation === "vertical" &&
        "h-full w-2.5 border-l border-l-transparent p-[1px]",
      orientation === "horizontal" &&
        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
      className
    )}
    {...props}
  >
    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
  </ScrollAreaPrimitive.ScrollAreaScrollbar>
))
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName

export { ScrollArea, ScrollBar }
[V0_FILE]typescriptreact:file="components/ui/select.tsx"
"use client"

import * as React from "react"
import * as SelectPrimitive from "@radix-ui/react-select"
import { Check, ChevronDown, ChevronUp } from "lucide-react"

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

const Select = SelectPrimitive.Root

const SelectGroup = SelectPrimitive.Group

const SelectValue = SelectPrimitive.Value

const SelectTrigger = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Trigger
    ref={ref}
    className={cn(
      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
      className
    )}
    {...props}
  >
    {children}
    <SelectPrimitive.Icon asChild>
      <ChevronDown className="h-4 w-4 opacity-50" />
    </SelectPrimitive.Icon>
  </SelectPrimitive.Trigger>
))
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName

const SelectScrollUpButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollUpButton
    ref={ref}
    className={cn(
      "flex cursor-default items-center justify-center py-1",
      className
    )}
    {...props}
  >
    <ChevronUp className="h-4 w-4" />
  </SelectPrimitive.ScrollUpButton>
))
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName

const SelectScrollDownButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollDownButton
    ref={ref}
    className={cn(
      "flex cursor-default items-center justify-center py-1",
      className
    )}
    {...props}
  >
    <ChevronDown className="h-4 w-4" />
  </SelectPrimitive.ScrollDownButton>
))
SelectScrollDownButton.displayName =
  SelectPrimitive.ScrollDownButton.displayName

const SelectContent = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>(({ className, children, position = "popper", ...props }, ref) => (
  <SelectPrimitive.Portal>
    <SelectPrimitive.Content
      ref={ref}
      className={cn(
        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        position === "popper" &&
          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
        className
      )}
      position={position}
      {...props}
    >
      <SelectScrollUpButton />
      <SelectPrimitive.Viewport
        className={cn(
          "p-1",
          position === "popper" &&
            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
        )}
      >
        {children}
      </SelectPrimitive.Viewport>
      <SelectScrollDownButton />
    </SelectPrimitive.Content>
  </SelectPrimitive.Portal>
))
SelectContent.displayName = SelectPrimitive.Content.displayName

const SelectLabel = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Label
    ref={ref}
    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
    {...props}
  />
))
SelectLabel.displayName = SelectPrimitive.Label.displayName

const SelectItem = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <SelectPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </SelectPrimitive.ItemIndicator>
    </span>

<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
  </SelectPrimitive.Item>
))
SelectItem.displayName = SelectPrimitive.Item.displayName

const SelectSeparator = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Separator
    ref={ref}
    className={cn("-mx-1 my-1 h-px bg-muted", className)}
    {...props}
  />
))
SelectSeparator.displayName = SelectPrimitive.Separator.displayName

export {
  Select,
  SelectGroup,
  SelectValue,
  SelectTrigger,
  SelectContent,
  SelectLabel,
  SelectItem,
  SelectSeparator,
  SelectScrollUpButton,
  SelectScrollDownButton,
}
[V0_FILE]typescriptreact:file="components/ui/separator.tsx"
"use client"

import * as React from "react"
import * as SeparatorPrimitive from "@radix-ui/react-separator"

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

const Separator = React.forwardRef<
  React.ElementRef<typeof SeparatorPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
>(
  (
    { className, orientation = "horizontal", decorative = true, ...props },
    ref
  ) => (
    <SeparatorPrimitive.Root
      ref={ref}
      decorative={decorative}
      orientation={orientation}
      className={cn(
        "shrink-0 bg-border",
        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
        className
      )}
      {...props}
    />
  )
)
Separator.displayName = SeparatorPrimitive.Root.displayName

export { Separator }
[V0_FILE]typescriptreact:file="components/ui/sheet.tsx"
"use client"

import * as React from "react"
import * as SheetPrimitive from "@radix-ui/react-dialog"
import { cva, type VariantProps } from "class-variance-authority"
import { X } from "lucide-react"

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

const Sheet = SheetPrimitive.Root

const SheetTrigger = SheetPrimitive.Trigger

const SheetClose = SheetPrimitive.Close

const SheetPortal = SheetPrimitive.Portal

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

const sheetVariants = cva(
  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
  {
    variants: {
      side: {
        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
        bottom:
          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
        right:
          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
      },
    },
    defaultVariants: {
      side: "right",
    },
  }
)

interface SheetContentProps
  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
    VariantProps<typeof sheetVariants> {}

const SheetContent = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Content>,
  SheetContentProps
>(({ side = "right", className, children, ...props }, ref) => (
  <SheetPortal>
    <SheetOverlay />
    <SheetPrimitive.Content
      ref={ref}
      className={cn(sheetVariants({ side }), className)}
      {...props}
    >
      {children}
      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </SheetPrimitive.Close>
    </SheetPrimitive.Content>
  </SheetPortal>
))
SheetContent.displayName = SheetPrimitive.Content.displayName

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

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

const SheetTitle = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.Title
    ref={ref}
    className={cn("text-lg font-semibold text-foreground", className)}
    {...props}
  />
))
SheetTitle.displayName = SheetPrimitive.Title.displayName

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

export {
  Sheet,
  SheetPortal,
  SheetOverlay,
  SheetTrigger,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetFooter,
  SheetTitle,
  SheetDescription,
}
[V0_FILE]typescriptreact:file="components/ui/sidebar.tsx"
"use client"

import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { VariantProps, cva } from "class-variance-authority"
import { PanelLeft } from "lucide-react"

import { useIsMobile } from "@/hooks/use-mobile"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Separator } from "@/components/ui/separator"
import { Sheet, SheetContent } from "@/components/ui/sheet"
import { Skeleton } from "@/components/ui/skeleton"
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"

const SIDEBAR_COOKIE_NAME = "sidebar:state"
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
const SIDEBAR_WIDTH = "16rem"
const SIDEBAR_WIDTH_MOBILE = "18rem"
const SIDEBAR_WIDTH_ICON = "3rem"
const SIDEBAR_KEYBOARD_SHORTCUT = "b"

type SidebarContext = {
  state: "expanded" | "collapsed"
  open: boolean
  setOpen: (open: boolean) => void
  openMobile: boolean
  setOpenMobile: (open: boolean) => void
  isMobile: boolean
  toggleSidebar: () => void
}

const SidebarContext = React.createContext<SidebarContext | null>(null)

function useSidebar() {
  const context = React.useContext(SidebarContext)
  if (!context) {
    throw new Error("useSidebar must be used within a SidebarProvider.")
  }

return context
}

const SidebarProvider = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & {
    defaultOpen?: boolean
    open?: boolean
    onOpenChange?: (open: boolean) => void
  }
>(
  (
    {
      defaultOpen = true,
      open: openProp,
      onOpenChange: setOpenProp,
      className,
      style,
      children,
      ...props
    },
    ref
  ) => {
    const isMobile = useIsMobile()
    const [openMobile, setOpenMobile] = React.useState(false)

// This is the internal state of the sidebar.
    // We use openProp and setOpenProp for control from outside the component.
    const [_open, _setOpen] = React.useState(defaultOpen)
    const open = openProp ?? _open
    const setOpen = React.useCallback(
      (value: boolean | ((value: boolean) => boolean)) => {
        const openState = typeof value === "function" ? value(open) : value
        if (setOpenProp) {
          setOpenProp(openState)
        } else {
          _setOpen(openState)
        }

// This sets the cookie to keep the sidebar state.
        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
      },
      [setOpenProp, open]
    )

// Helper to toggle the sidebar.
    const toggleSidebar = React.useCallback(() => {
      return isMobile
        ? setOpenMobile((open) => !open)
        : setOpen((open) => !open)
    }, [isMobile, setOpen, setOpenMobile])

// Adds a keyboard shortcut to toggle the sidebar.
    React.useEffect(() => {
      const handleKeyDown = (event: KeyboardEvent) => {
        if (
          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
          (event.metaKey || event.ctrlKey)
        ) {
          event.preventDefault()
          toggleSidebar()
        }
      }

window.addEventListener("keydown", handleKeyDown)
      return () => window.removeEventListener("keydown", handleKeyDown)
    }, [toggleSidebar])

// We add a state so that we can do data-state="expanded" or "collapsed".
    // This makes it easier to style the sidebar with Tailwind classes.
    const state = open ? "expanded" : "collapsed"

const contextValue = React.useMemo<SidebarContext>(
      () => ({
        state,
        open,
        setOpen,
        isMobile,
        openMobile,
        setOpenMobile,
        toggleSidebar,
      }),
      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
    )

return (
      <SidebarContext.Provider value={contextValue}>
        <TooltipProvider delayDuration={0}>
          <div
            style={
              {
                "--sidebar-width": SIDEBAR_WIDTH,
                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
                ...style,
              } as React.CSSProperties
            }
            className={cn(
              "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
              className
            )}
            ref={ref}
            {...props}
          >
            {children}
          </div>
        </TooltipProvider>
      </SidebarContext.Provider>
    )
  }
)
SidebarProvider.displayName = "SidebarProvider"

const Sidebar = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & {
    side?: "left" | "right"
    variant?: "sidebar" | "floating" | "inset"
    collapsible?: "offcanvas" | "icon" | "none"
  }
>(
  (
    {
      side = "left",
      variant = "sidebar",
      collapsible = "offcanvas",
      className,
      children,
      ...props
    },
    ref
  ) => {
    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()

if (collapsible === "none") {
      return (
        <div
          className={cn(
            "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
            className
          )}
          ref={ref}
          {...props}
        >
          {children}
        </div>
      )
    }

if (isMobile) {
      return (
        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
          <SheetContent
            data-sidebar="sidebar"
            data-mobile="true"
            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
            style={
              {
                "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
              } as React.CSSProperties
            }
            side={side}
          >
            <div className="flex h-full w-full flex-col">{children}</div>
          </SheetContent>
        </Sheet>
      )
    }

return (
      <div
        ref={ref}
        className="group peer hidden md:block text-sidebar-foreground"
        data-state={state}
        data-collapsible={state === "collapsed" ? collapsible : ""}
        data-variant={variant}
        data-side={side}
      >
        {/* This is what handles the sidebar gap on desktop */}
        <div
          className={cn(
            "duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear",
            "group-data-[collapsible=offcanvas]:w-0",
            "group-data-[side=right]:rotate-180",
            variant === "floating" || variant === "inset"
              ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
          )}
        />
        <div
          className={cn(
            "duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
            side === "left"
              ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
              : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
            // Adjust the padding for floating and inset variants.
            variant === "floating" || variant === "inset"
              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
            className
          )}
          {...props}
        >
          <div
            data-sidebar="sidebar"
            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
          >
            {children}
          </div>
        </div>
      </div>
    )
  }
)
Sidebar.displayName = "Sidebar"

const SidebarTrigger = React.forwardRef<
  React.ElementRef<typeof Button>,
  React.ComponentProps<typeof Button>
>(({ className, onClick, ...props }, ref) => {
  const { toggleSidebar } = useSidebar()

return (
    <Button
      ref={ref}
      data-sidebar="trigger"
      variant="ghost"
      size="icon"
      className={cn("h-7 w-7", className)}
      onClick={(event) => {
        onClick?.(event)
        toggleSidebar()
      }}
      {...props}
    >
      <PanelLeft />
      <span className="sr-only">Toggle Sidebar</span>
    </Button>
  )
})
SidebarTrigger.displayName = "SidebarTrigger"

const SidebarRail = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<"button">
>(({ className, ...props }, ref) => {
  const { toggleSidebar } = useSidebar()

return (
    <button
      ref={ref}
      data-sidebar="rail"
      aria-label="Toggle Sidebar"
      tabIndex={-1}
      onClick={toggleSidebar}
      title="Toggle Sidebar"
      className={cn(
        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
        "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
        className
      )}
      {...props}
    />
  )
})
SidebarRail.displayName = "SidebarRail"

const SidebarInset = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"main">
>(({ className, ...props }, ref) => {
  return (
    <main
      ref={ref}
      className={cn(
        "relative flex min-h-svh flex-1 flex-col bg-background",
        "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
        className
      )}
      {...props}
    />
  )
})
SidebarInset.displayName = "SidebarInset"

const SidebarInput = React.forwardRef<
  React.ElementRef<typeof Input>,
  React.ComponentProps<typeof Input>
>(({ className, ...props }, ref) => {
  return (
    <Input
      ref={ref}
      data-sidebar="input"
      className={cn(
        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
        className
      )}
      {...props}
    />
  )
})
SidebarInput.displayName = "SidebarInput"

const SidebarHeader = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      data-sidebar="header"
      className={cn("flex flex-col gap-2 p-2", className)}
      {...props}
    />
  )
})
SidebarHeader.displayName = "SidebarHeader"

const SidebarFooter = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      data-sidebar="footer"
      className={cn("flex flex-col gap-2 p-2", className)}
      {...props}
    />
  )
})
SidebarFooter.displayName = "SidebarFooter"

const SidebarSeparator = React.forwardRef<
  React.ElementRef<typeof Separator>,
  React.ComponentProps<typeof Separator>
>(({ className, ...props }, ref) => {
  return (
    <Separator
      ref={ref}
      data-sidebar="separator"
      className={cn("mx-2 w-auto bg-sidebar-border", className)}
      {...props}
    />
  )
})
SidebarSeparator.displayName = "SidebarSeparator"

const SidebarContent = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      data-sidebar="content"
      className={cn(
        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
        className
      )}
      {...props}
    />
  )
})
SidebarContent.displayName = "SidebarContent"

const SidebarGroup = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      data-sidebar="group"
      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
      {...props}
    />
  )
})
SidebarGroup.displayName = "SidebarGroup"

const SidebarGroupLabel = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & { asChild?: boolean }
>(({ className, asChild = false, ...props }, ref) => {
  const Comp = asChild ? Slot : "div"

return (
    <Comp
      ref={ref}
      data-sidebar="group-label"
      className={cn(
        "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
        className
      )}
      {...props}
    />
  )
})
SidebarGroupLabel.displayName = "SidebarGroupLabel"

const SidebarGroupAction = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<"button"> & { asChild?: boolean }
>(({ className, asChild = false, ...props }, ref) => {
  const Comp = asChild ? Slot : "button"

return (
    <Comp
      ref={ref}
      data-sidebar="group-action"
      className={cn(
        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
        // Increases the hit area of the button on mobile.
        "after:absolute after:-inset-2 after:md:hidden",
        "group-data-[collapsible=icon]:hidden",
        className
      )}
      {...props}
    />
  )
})
SidebarGroupAction.displayName = "SidebarGroupAction"

const SidebarGroupContent = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    data-sidebar="group-content"
    className={cn("w-full text-sm", className)}
    {...props}
  />
))
SidebarGroupContent.displayName = "SidebarGroupContent"

const SidebarMenu = React.forwardRef<
  HTMLUListElement,
  React.ComponentProps<"ul">
>(({ className, ...props }, ref) => (
  <ul
    ref={ref}
    data-sidebar="menu"
    className={cn("flex w-full min-w-0 flex-col gap-1", className)}
    {...props}
  />
))
SidebarMenu.displayName = "SidebarMenu"

const SidebarMenuItem = React.forwardRef<
  HTMLLIElement,
  React.ComponentProps<"li">
>(({ className, ...props }, ref) => (
  <li
    ref={ref}
    data-sidebar="menu-item"
    className={cn("group/menu-item relative", className)}
    {...props}
  />
))
SidebarMenuItem.displayName = "SidebarMenuItem"

const sidebarMenuButtonVariants = cva(
  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
  {
    variants: {
      variant: {
        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
        outline:
          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
      },
      size: {
        default: "h-8 text-sm",
        sm: "h-7 text-xs",
        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

const SidebarMenuButton = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<"button"> & {
    asChild?: boolean
    isActive?: boolean
    tooltip?: string | React.ComponentProps<typeof TooltipContent>
  } & VariantProps<typeof sidebarMenuButtonVariants>
>(
  (
    {
      asChild = false,
      isActive = false,
      variant = "default",
      size = "default",
      tooltip,
      className,
      ...props
    },
    ref
  ) => {
    const Comp = asChild ? Slot : "button"
    const { isMobile, state } = useSidebar()

const button = (
      <Comp
        ref={ref}
        data-sidebar="menu-button"
        data-size={size}
        data-active={isActive}
        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
        {...props}
      />
    )

if (!tooltip) {
      return button
    }

if (typeof tooltip === "string") {
      tooltip = {
        children: tooltip,
      }
    }

return (
      <Tooltip>
        <TooltipTrigger asChild>{button}</TooltipTrigger>
        <TooltipContent
          side="right"
          align="center"
          hidden={state !== "collapsed" || isMobile}
          {...tooltip}
        />
      </Tooltip>
    )
  }
)
SidebarMenuButton.displayName = "SidebarMenuButton"

const SidebarMenuAction = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<"button"> & {
    asChild?: boolean
    showOnHover?: boolean
  }
>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
  const Comp = asChild ? Slot : "button"

return (
    <Comp
      ref={ref}
      data-sidebar="menu-action"
      className={cn(
        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
        // Increases the hit area of the button on mobile.
        "after:absolute after:-inset-2 after:md:hidden",
        "peer-data-[size=sm]/menu-button:top-1",
        "peer-data-[size=default]/menu-button:top-1.5",
        "peer-data-[size=lg]/menu-button:top-2.5",
        "group-data-[collapsible=icon]:hidden",
        showOnHover &&
          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
        className
      )}
      {...props}
    />
  )
})
SidebarMenuAction.displayName = "SidebarMenuAction"

const SidebarMenuBadge = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    data-sidebar="menu-badge"
    className={cn(
      "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none",
      "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
      "peer-data-[size=sm]/menu-button:top-1",
      "peer-data-[size=default]/menu-button:top-1.5",
      "peer-data-[size=lg]/menu-button:top-2.5",
      "group-data-[collapsible=icon]:hidden",
      className
    )}
    {...props}
  />
))
SidebarMenuBadge.displayName = "SidebarMenuBadge"

const SidebarMenuSkeleton = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & {
    showIcon?: boolean
  }
>(({ className, showIcon = false, ...props }, ref) => {
  // Random width between 50 to 90%.
  const width = React.useMemo(() => {
    return `${Math.floor(Math.random() * 40) + 50}%`
  }, [])

return (
    <div
      ref={ref}
      data-sidebar="menu-skeleton"
      className={cn("rounded-md h-8 flex gap-2 px-2 items-center", className)}
      {...props}
    >
      {showIcon && (
        <Skeleton
          className="size-4 rounded-md"
          data-sidebar="menu-skeleton-icon"
        />
      )}
      <Skeleton
        className="h-4 flex-1 max-w-[--skeleton-width]"
        data-sidebar="menu-skeleton-text"
        style={
          {
            "--skeleton-width": width,
          } as React.CSSProperties
        }
      />
    </div>
  )
})
SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton"

const SidebarMenuSub = React.forwardRef<
  HTMLUListElement,
  React.ComponentProps<"ul">
>(({ className, ...props }, ref) => (
  <ul
    ref={ref}
    data-sidebar="menu-sub"
    className={cn(
      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
      "group-data-[collapsible=icon]:hidden",
      className
    )}
    {...props}
  />
))
SidebarMenuSub.displayName = "SidebarMenuSub"

const SidebarMenuSubItem = React.forwardRef<
  HTMLLIElement,
  React.ComponentProps<"li">
>(({ ...props }, ref) => <li ref={ref} {...props} />)
SidebarMenuSubItem.displayName = "SidebarMenuSubItem"

const SidebarMenuSubButton = React.forwardRef<
  HTMLAnchorElement,
  React.ComponentProps<"a"> & {
    asChild?: boolean
    size?: "sm" | "md"
    isActive?: boolean
  }
>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
  const Comp = asChild ? Slot : "a"

return (
    <Comp
      ref={ref}
      data-sidebar="menu-sub-button"
      data-size={size}
      data-active={isActive}
      className={cn(
        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
        size === "sm" && "text-xs",
        size === "md" && "text-sm",
        "group-data-[collapsible=icon]:hidden",
        className
      )}
      {...props}
    />
  )
})
SidebarMenuSubButton.displayName = "SidebarMenuSubButton"

export {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupAction,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInput,
  SidebarInset,
  SidebarMenu,
  SidebarMenuAction,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSkeleton,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarProvider,
  SidebarRail,
  SidebarSeparator,
  SidebarTrigger,
  useSidebar,
}
[V0_FILE]typescriptreact:file="components/ui/skeleton.tsx"
import { cn } from "@/lib/utils"

function Skeleton({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={cn("animate-pulse rounded-md bg-muted", className)}
      {...props}
    />
  )
}

export { Skeleton }
[V0_FILE]typescriptreact:file="components/ui/slider.tsx"
"use client"

import * as React from "react"
import * as SliderPrimitive from "@radix-ui/react-slider"

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

const Slider = React.forwardRef<
  React.ElementRef<typeof SliderPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
>(({ className, ...props }, ref) => (
  <SliderPrimitive.Root
    ref={ref}
    className={cn(
      "relative flex w-full touch-none select-none items-center",
      className
    )}
    {...props}
  >
    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
      <SliderPrimitive.Range className="absolute h-full bg-primary" />
    </SliderPrimitive.Track>
    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
  </SliderPrimitive.Root>
))
Slider.displayName = SliderPrimitive.Root.displayName

export { Slider }
[V0_FILE]typescriptreact:file="components/ui/sonner.tsx"
"use client"

import { useTheme } from "next-themes"
import { Toaster as Sonner } from "sonner"

type ToasterProps = React.ComponentProps<typeof Sonner>

const Toaster = ({ ...props }: ToasterProps) => {
  const { theme = "system" } = useTheme()

return (
    <Sonner
      theme={theme as ToasterProps["theme"]}
      className="toaster group"
      toastOptions={{
        classNames: {
          toast:
            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
          description: "group-[.toast]:text-muted-foreground",
          actionButton:
            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
          cancelButton:
            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
        },
      }}
      {...props}
    />
  )
}

export { Toaster }
[V0_FILE]typescriptreact:file="components/ui/switch.tsx"
"use client"

import * as React from "react"
import * as SwitchPrimitives from "@radix-ui/react-switch"

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

const Switch = React.forwardRef<
  React.ElementRef<typeof SwitchPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
>(({ className, ...props }, ref) => (
  <SwitchPrimitives.Root
    className={cn(
      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
      className
    )}
    {...props}
    ref={ref}
  >
    <SwitchPrimitives.Thumb
      className={cn(
        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
      )}
    />
  </SwitchPrimitives.Root>
))
Switch.displayName = SwitchPrimitives.Root.displayName

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

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

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

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

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

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

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

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

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

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

export {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableHead,
  TableRow,
  TableCell,
  TableCaption,
}
[V0_FILE]typescriptreact:file="components/ui/tabs.tsx"
"use client"

import * as React from "react"
import * as TabsPrimitive from "@radix-ui/react-tabs"

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

const Tabs = TabsPrimitive.Root

const TabsList = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.List
    ref={ref}
    className={cn(
      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
      className
    )}
    {...props}
  />
))
TabsList.displayName = TabsPrimitive.List.displayName

const TabsTrigger = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Trigger
    ref={ref}
    className={cn(
      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
      className
    )}
    {...props}
  />
))
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName

const TabsContent = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Content
    ref={ref}
    className={cn(
      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
      className
    )}
    {...props}
  />
))
TabsContent.displayName = TabsPrimitive.Content.displayName

export { Tabs, TabsList, TabsTrigger, TabsContent }
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx"
import * as React from "react"

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

const Textarea = React.forwardRef<
  HTMLTextAreaElement,
  React.ComponentProps<"textarea">
>(({ 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-base 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 md:text-sm",
        className
      )}
      ref={ref}
      {...props}
    />
  )
})
Textarea.displayName = "Textarea"

export { Textarea }
[V0_FILE]typescriptreact:file="components/ui/toast.tsx"
"use client"

import * as React from "react"
import * as ToastPrimitives from "@radix-ui/react-toast"
import { cva, type VariantProps } from "class-variance-authority"
import { X } from "lucide-react"

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

const ToastProvider = ToastPrimitives.Provider

const ToastViewport = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Viewport>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Viewport
    ref={ref}
    className={cn(
      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
      className
    )}
    {...props}
  />
))
ToastViewport.displayName = ToastPrimitives.Viewport.displayName

const toastVariants = cva(
  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
  {
    variants: {
      variant: {
        default: "border bg-background text-foreground",
        destructive:
          "destructive group border-destructive bg-destructive text-destructive-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

const Toast = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
    VariantProps<typeof toastVariants>
>(({ className, variant, ...props }, ref) => {
  return (
    <ToastPrimitives.Root
      ref={ref}
      className={cn(toastVariants({ variant }), className)}
      {...props}
    />
  )
})
Toast.displayName = ToastPrimitives.Root.displayName

const ToastAction = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Action>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Action
    ref={ref}
    className={cn(
      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
      className
    )}
    {...props}
  />
))
ToastAction.displayName = ToastPrimitives.Action.displayName

const ToastClose = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Close>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Close
    ref={ref}
    className={cn(
      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
      className
    )}
    toast-close=""
    {...props}
  >
    <X className="h-4 w-4" />
  </ToastPrimitives.Close>
))
ToastClose.displayName = ToastPrimitives.Close.displayName

const ToastTitle = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Title>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Title
    ref={ref}
    className={cn("text-sm font-semibold", className)}
    {...props}
  />
))
ToastTitle.displayName = ToastPrimitives.Title.displayName

const ToastDescription = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Description>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Description
    ref={ref}
    className={cn("text-sm opacity-90", className)}
    {...props}
  />
))
ToastDescription.displayName = ToastPrimitives.Description.displayName

type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>

type ToastActionElement = React.ReactElement<typeof ToastAction>

export {
  type ToastProps,
  type ToastActionElement,
  ToastProvider,
  ToastViewport,
  Toast,
  ToastTitle,
  ToastDescription,
  ToastClose,
  ToastAction,
}
[V0_FILE]typescriptreact:file="components/ui/toaster.tsx"
"use client"

import { useToast } from "@/hooks/use-toast"
import {
  Toast,
  ToastClose,
  ToastDescription,
  ToastProvider,
  ToastTitle,
  ToastViewport,
} from "@/components/ui/toast"

export function Toaster() {
  const { toasts } = useToast()

return (
    <ToastProvider>
      {toasts.map(function ({ id, title, description, action, ...props }) {
        return (
          <Toast key={id} {...props}>
            <div className="grid gap-1">
              {title && <ToastTitle>{title}</ToastTitle>}
              {description && (
                <ToastDescription>{description}</ToastDescription>
              )}
            </div>
            {action}
            <ToastClose />
          </Toast>
        )
      })}
      <ToastViewport />
    </ToastProvider>
  )
}
[V0_FILE]typescriptreact:file="components/ui/toggle-group.tsx"
"use client"

import * as React from "react"
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
import { type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"
import { toggleVariants } from "@/components/ui/toggle"

const ToggleGroupContext = React.createContext<
  VariantProps<typeof toggleVariants>
>({
  size: "default",
  variant: "default",
})

const ToggleGroup = React.forwardRef<
  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
    VariantProps<typeof toggleVariants>
>(({ className, variant, size, children, ...props }, ref) => (
  <ToggleGroupPrimitive.Root
    ref={ref}
    className={cn("flex items-center justify-center gap-1", className)}
    {...props}
  >
    <ToggleGroupContext.Provider value={{ variant, size }}>
      {children}
    </ToggleGroupContext.Provider>
  </ToggleGroupPrimitive.Root>
))

ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName

const ToggleGroupItem = React.forwardRef<
  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
    VariantProps<typeof toggleVariants>
>(({ className, children, variant, size, ...props }, ref) => {
  const context = React.useContext(ToggleGroupContext)

return (
    <ToggleGroupPrimitive.Item
      ref={ref}
      className={cn(
        toggleVariants({
          variant: context.variant || variant,
          size: context.size || size,
        }),
        className
      )}
      {...props}
    >
      {children}
    </ToggleGroupPrimitive.Item>
  )
})

ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName

export { ToggleGroup, ToggleGroupItem }
[V0_FILE]typescriptreact:file="components/ui/toggle.tsx"
"use client"

import * as React from "react"
import * as TogglePrimitive from "@radix-ui/react-toggle"
import { cva, type VariantProps } from "class-variance-authority"

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

const toggleVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
  {
    variants: {
      variant: {
        default: "bg-transparent",
        outline:
          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
      },
      size: {
        default: "h-10 px-3 min-w-10",
        sm: "h-9 px-2.5 min-w-9",
        lg: "h-11 px-5 min-w-11",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

const Toggle = React.forwardRef<
  React.ElementRef<typeof TogglePrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
    VariantProps<typeof toggleVariants>
>(({ className, variant, size, ...props }, ref) => (
  <TogglePrimitive.Root
    ref={ref}
    className={cn(toggleVariants({ variant, size, className }))}
    {...props}
  />
))

Toggle.displayName = TogglePrimitive.Root.displayName

export { Toggle, toggleVariants }
[V0_FILE]typescriptreact:file="components/ui/tooltip.tsx"
"use client"

import * as React from "react"
import * as TooltipPrimitive from "@radix-ui/react-tooltip"

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

const TooltipProvider = TooltipPrimitive.Provider

const Tooltip = TooltipPrimitive.Root

const TooltipTrigger = TooltipPrimitive.Trigger

const TooltipContent = React.forwardRef<
  React.ElementRef<typeof TooltipPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
  <TooltipPrimitive.Content
    ref={ref}
    sideOffset={sideOffset}
    className={cn(
      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
      className
    )}
    {...props}
  />
))
TooltipContent.displayName = TooltipPrimitive.Content.displayName

export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
[V0_FILE]typescriptreact:file="components/ui/use-mobile.tsx"
import * as React from "react"

const MOBILE_BREAKPOINT = 768

export function useIsMobile() {
  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)

React.useEffect(() => {
    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
    const onChange = () => {
      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    }
    mql.addEventListener("change", onChange)
    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    return () => mql.removeEventListener("change", onChange)
  }, [])

return !!isMobile
}
[V0_FILE]typescript:file="components/ui/use-toast.ts"
"use client"

// Inspired by react-hot-toast library
import * as React from "react"

import type {
  ToastActionElement,
  ToastProps,
} from "@/components/ui/toast"

const TOAST_LIMIT = 1
const TOAST_REMOVE_DELAY = 1000000

type ToasterToast = ToastProps & {
  id: string
  title?: React.ReactNode
  description?: React.ReactNode
  action?: ToastActionElement
}

const actionTypes = {
  ADD_TOAST: "ADD_TOAST",
  UPDATE_TOAST: "UPDATE_TOAST",
  DISMISS_TOAST: "DISMISS_TOAST",
  REMOVE_TOAST: "REMOVE_TOAST",
} as const

let count = 0

function genId() {
  count = (count + 1) % Number.MAX_SAFE_INTEGER
  return count.toString()
}

type ActionType = typeof actionTypes

type Action =
  | {
      type: ActionType["ADD_TOAST"]
      toast: ToasterToast
    }
  | {
      type: ActionType["UPDATE_TOAST"]
      toast: Partial<ToasterToast>
    }
  | {
      type: ActionType["DISMISS_TOAST"]
      toastId?: ToasterToast["id"]
    }
  | {
      type: ActionType["REMOVE_TOAST"]
      toastId?: ToasterToast["id"]
    }

interface State {
  toasts: ToasterToast[]
}

const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()

const addToRemoveQueue = (toastId: string) => {
  if (toastTimeouts.has(toastId)) {
    return
  }

const timeout = setTimeout(() => {
    toastTimeouts.delete(toastId)
    dispatch({
      type: "REMOVE_TOAST",
      toastId: toastId,
    })
  }, TOAST_REMOVE_DELAY)

toastTimeouts.set(toastId, timeout)
}

export const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case "ADD_TOAST":
      return {
        ...state,
        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
      }

case "UPDATE_TOAST":
      return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === action.toast.id ? { ...t, ...action.toast } : t
        ),
      }

case "DISMISS_TOAST": {
      const { toastId } = action

// ! Side effects ! - This could be extracted into a dismissToast() action,
      // but I'll keep it here for simplicity
      if (toastId) {
        addToRemoveQueue(toastId)
      } else {
        state.toasts.forEach((toast) => {
          addToRemoveQueue(toast.id)
        })
      }

return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === toastId || toastId === undefined
            ? {
                ...t,
                open: false,
              }
            : t
        ),
      }
    }
    case "REMOVE_TOAST":
      if (action.toastId === undefined) {
        return {
          ...state,
          toasts: [],
        }
      }
      return {
        ...state,
        toasts: state.toasts.filter((t) => t.id !== action.toastId),
      }
  }
}

const listeners: Array<(state: State) => void> = []

let memoryState: State = { toasts: [] }

function dispatch(action: Action) {
  memoryState = reducer(memoryState, action)
  listeners.forEach((listener) => {
    listener(memoryState)
  })
}

type Toast = Omit<ToasterToast, "id">

function toast({ ...props }: Toast) {
  const id = genId()

const update = (props: ToasterToast) =>
    dispatch({
      type: "UPDATE_TOAST",
      toast: { ...props, id },
    })
  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })

dispatch({
    type: "ADD_TOAST",
    toast: {
      ...props,
      id,
      open: true,
      onOpenChange: (open) => {
        if (!open) dismiss()
      },
    },
  })

return {
    id: id,
    dismiss,
    update,
  }
}

function useToast() {
  const [state, setState] = React.useState<State>(memoryState)

React.useEffect(() => {
    listeners.push(setState)
    return () => {
      const index = listeners.indexOf(setState)
      if (index > -1) {
        listeners.splice(index, 1)
      }
    }
  }, [state])

return {
    ...state,
    toast,
    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
  }
}

export { useToast, toast }
[V0_FILE]typescriptreact:file="hooks/use-mobile.tsx"
import * as React from "react"

const MOBILE_BREAKPOINT = 768

export function useIsMobile() {
  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)

return !!isMobile
}
[V0_FILE]typescript:file="hooks/use-realtime-data.ts"
"use client"

import useSWR from "swr"
import { useEffect } from "react"

const fetcher = (url: string) => fetch(url).then((res) => res.json())

export function useRealtimeData<T>(endpoint: string, refreshInterval = 5000) {
  const { data, error, mutate, isLoading } = useSWR<T>(endpoint, fetcher, {
    refreshInterval,
    revalidateOnFocus: true,
    revalidateOnReconnect: true,
    dedupingInterval: 2000,
  })

// Force refresh on window focus
  useEffect(() => {
    const handleFocus = () => mutate()
    window.addEventListener("focus", handleFocus)
    return () => window.removeEventListener("focus", handleFocus)
  }, [mutate])

return {
    data,
    error,
    isLoading,
    refresh: mutate,
  }
}

// Specific hooks for different data types
export const usePortfolios = () => useRealtimeData("/api/portfolio")
export const useTransactions = () => useRealtimeData("/api/transactions")
export const useDocuments = () => useRealtimeData("/api/documents")
export const useServices = () => useRealtimeData("/api/services")
export const useAnalytics = () => useRealtimeData("/api/transactions/analytics")
[V0_FILE]typescript:file="hooks/use-toast.ts"
"use client"

// Inspired by react-hot-toast library
import * as React from "react"

import type {
  ToastActionElement,
  ToastProps,
} from "@/components/ui/toast"

const TOAST_LIMIT = 1
const TOAST_REMOVE_DELAY = 1000000

type ToasterToast = ToastProps & {
  id: string
  title?: React.ReactNode
  description?: React.ReactNode
  action?: ToastActionElement
}

const actionTypes = {
  ADD_TOAST: "ADD_TOAST",
  UPDATE_TOAST: "UPDATE_TOAST",
  DISMISS_TOAST: "DISMISS_TOAST",
  REMOVE_TOAST: "REMOVE_TOAST",
} as const

let count = 0

function genId() {
  count = (count + 1) % Number.MAX_SAFE_INTEGER
  return count.toString()
}

type ActionType = typeof actionTypes

interface State {
  toasts: ToasterToast[]
}

const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()

const addToRemoveQueue = (toastId: string) => {
  if (toastTimeouts.has(toastId)) {
    return
  }

const timeout = setTimeout(() => {
    toastTimeouts.delete(toastId)
    dispatch({
      type: "REMOVE_TOAST",
      toastId: toastId,
    })
  }, TOAST_REMOVE_DELAY)

toastTimeouts.set(toastId, timeout)
}

case "UPDATE_TOAST":
      return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === action.toast.id ? { ...t, ...action.toast } : t
        ),
      }

case "DISMISS_TOAST": {
      const { toastId } = action

const listeners: Array<(state: State) => void> = []

let memoryState: State = { toasts: [] }

function dispatch(action: Action) {
  memoryState = reducer(memoryState, action)
  listeners.forEach((listener) => {
    listener(memoryState)
  })
}

type Toast = Omit<ToasterToast, "id">

function toast({ ...props }: Toast) {
  const id = genId()

const update = (props: ToasterToast) =>
    dispatch({
      type: "UPDATE_TOAST",
      toast: { ...props, id },
    })
  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })

dispatch({
    type: "ADD_TOAST",
    toast: {
      ...props,
      id,
      open: true,
      onOpenChange: (open) => {
        if (!open) dismiss()
      },
    },
  })

return {
    id: id,
    dismiss,
    update,
  }
}

function useToast() {
  const [state, setState] = React.useState<State>(memoryState)

return {
    ...state,
    toast,
    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
  }
}

export { useToast, toast }
[V0_FILE]typescript:file="lib/auth.ts"
import type { NextAuthOptions } from "next-auth"
import CredentialsProvider from "next-auth/providers/credentials"
import bcrypt from "bcryptjs"
import { PrismaClient } from "@prisma/client"
import { generateEnvironmentVariables } from "./env-generator"

const prisma = new PrismaClient()
const envVars = generateEnvironmentVariables()

export const authOptions: NextAuthOptions = {
  providers: [
    CredentialsProvider({
      name: "credentials",
      credentials: {
        email: { label: "Email", type: "email" },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials) {
        if (!credentials?.email || !credentials?.password) {
          return null
        }

try {
          const user = await prisma.user.findUnique({
            where: { email: credentials.email },
          })

if (!user) {
            return null
          }

const isPasswordValid = await bcrypt.compare(credentials.password, user.password)

if (!isPasswordValid) {
            return null
          }

return {
            id: user.id,
            email: user.email,
            role: user.role,
          }
        } catch (error) {
          console.error("Auth error:", error)
          return null
        }
      },
    }),
  ],
  session: {
    strategy: "jwt",
    maxAge: 30 * 24 * 60 * 60,
  },
  callbacks: {
    async jwt({ token, user }) {
      if (user) {
        token.role = user.role
      }
      return token
    },
    async session({ session, token }) {
      if (token) {
        session.user.id = token.sub!
        session.user.role = token.role as string
      }
      return session
    },
  },
  pages: {
    signIn: "/login",
    error: "/login",
  },
  secret: process.env.NEXTAUTH_SECRET || envVars.NEXTAUTH_SECRET,
  debug: false,
}
[V0_FILE]typescript:file="lib/auto-env.ts"
// Auto-configure environment for Neon Serverless Postgres
export function getEnvironmentConfig() {
  const isProduction = process.env.NODE_ENV === "production"
  const isVercel = process.env.VERCEL === "1"

if (isVercel && isProduction) {
    return {
      NEXTAUTH_URL: process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : "https://your-app.vercel.app",
      NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET || "auto-generated-secret-for-vercel-deployment",
      DATABASE_URL: process.env.DATABASE_URL, // Neon connection string
      BLOB_READ_WRITE_TOKEN: process.env.BLOB_READ_WRITE_TOKEN,
    }
  }

// Local development with Neon
  return {
    NEXTAUTH_URL: "http://localhost:3000",
    NEXTAUTH_SECRET: "local-development-secret",
    DATABASE_URL: process.env.DATABASE_URL, // Neon connection string for local dev
    BLOB_READ_WRITE_TOKEN: process.env.BLOB_READ_WRITE_TOKEN,
  }
}
[V0_FILE]typescript:file="lib/db.ts"
import { PrismaClient } from "@prisma/client"

const globalForPrisma = globalThis as unknown as {
  prisma: PrismaClient | undefined
}

export const db =
  globalForPrisma.prisma ??
  new PrismaClient({
    datasources: {
      db: {
        url: process.env.DATABASE_URL,
      },
    },
    log: process.env.NODE_ENV === "development" ? ["query", "error", "warn"] : ["error"],
  })

if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = db
[V0_FILE]typescript:file="lib/email-service.ts"
import { db } from "@/lib/db"

// This is a simplified email service
// In production, you'd use a proper IMAP client like 'imap' or 'node-imap'
export class EmailService {
  private static instance: EmailService

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

async fetchEmails() {
    try {
      // This is where you'd implement IMAP connection
      // For now, we'll create a mock implementation

// Example of what the real implementation would look like:
      /*
      const imap = new Imap({
        user: process.env.EMAIL_USER,
        password: process.env.EMAIL_PASSWORD,
        host: process.env.EMAIL_HOST,
        port: 993,
        tls: true,
        tlsOptions: { rejectUnauthorized: false }
      })
      
      // Connect and fetch emails
      // Parse email content
      // Save to database
      */

console.log("Email fetching service called")
      return { success: true, message: "Email fetching completed" }
    } catch (error) {
      console.error("Email fetching error:", error)
      return { success: false, error: error.message }
    }
  }

async saveEmail(emailData: {
    sender: string
    subject: string
    body: string
    receivedAt: Date
  }) {
    try {
      const email = await db.email.create({
        data: emailData,
      })
      return email
    } catch (error) {
      console.error("Error saving email:", error)
      throw error
    }
  }
}

// API endpoint to trigger email fetching
export async function triggerEmailFetch() {
  const emailService = EmailService.getInstance()
  return await emailService.fetchEmails()
}
[V0_FILE]typescript:file="lib/env-generator.ts"
import crypto from "crypto"

export function generateEnvironmentVariables() {
  const nextAuthSecret = crypto.randomBytes(32).toString("base64")

const envVars = {
    // NextAuth Configuration
    NEXTAUTH_SECRET: nextAuthSecret,
    NEXTAUTH_URL: process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : "http://localhost:3000",

// Database (Neon)
    DATABASE_URL: process.env.DATABASE_URL || "",
    POSTGRES_URL: process.env.POSTGRES_URL || "",
    POSTGRES_PRISMA_URL: process.env.POSTGRES_PRISMA_URL || "",
    POSTGRES_URL_NON_POOLING: process.env.POSTGRES_URL_NON_POOLING || "",

// Vercel Blob Storage
    BLOB_READ_WRITE_TOKEN: process.env.BLOB_READ_WRITE_TOKEN || "",

// Optional Email Configuration
    EMAIL_USER: process.env.EMAIL_USER || "",
    EMAIL_PASSWORD: process.env.EMAIL_PASSWORD || "",
    EMAIL_HOST: process.env.EMAIL_HOST || "",

// Vercel System Variables (Auto-populated)
    VERCEL: process.env.VERCEL || "",
    VERCEL_ENV: process.env.VERCEL_ENV || "",
    VERCEL_URL: process.env.VERCEL_URL || "",
  }

return envVars
}

export function validateEnvironment() {
  const required = ["DATABASE_URL", "NEXTAUTH_SECRET"]
  const missing = required.filter((key) => !process.env[key])

if (missing.length > 0) {
    console.warn(`⚠️ Missing environment variables: ${missing.join(", ")}`)
    return false
  }

return true
}
[V0_FILE]typescript:file="lib/mock-db.ts"
// Mock database service for preview/demo purposes
// This replaces Prisma client functionality

export interface User {
  id: string
  email: string
  password: string
  role: "SUPER_ADMIN" | "ADMIN" | "USER"
  createdAt: Date
  updatedAt: Date
}

export interface Portfolio {
  id: string
  userId: string
  title: string
  value: string
  description?: string
  createdAt: Date
  updatedAt: Date
}

export interface Service {
  id: string
  title: string
  description: string
  url?: string
  visible: boolean
  createdAt: Date
  updatedAt: Date
}

export interface Document {
  id: string
  userId: string
  title: string
  fileUrl: string
  uploadedAt: Date
}

export interface Settings {
  id: string
  primaryColor: string
  accentColor: string
  footerText: string
}

export interface Transaction {
  id: string
  userId: string
  type: "INCOME" | "EXPENSE"
  amount: number
  category: string
  notes?: string
  date: Date
  createdAt: Date
  updatedAt: Date
}

export interface Email {
  id: string
  sender: string
  subject: string
  body: string
  receivedAt: Date
  isRead: boolean
  createdAt: Date
}

export interface ContactMessage {
  id: string
  name: string
  email: string
  subject?: string
  message: string
  isRead: boolean
  createdAt: Date
}

// Mock data store
class MockDatabase {
  private users: User[] = []
  private portfolios: Portfolio[] = []
  private services: Service[] = []
  private documents: Document[] = []
  private settings: Settings[] = []
  private transactions: Transaction[] = []
  private emails: Email[] = []
  private contactMessages: ContactMessage[] = []

constructor() {
    this.initializeMockData()
  }

private initializeMockData() {
    // Initialize with sample data
    const adminUser: User = {
      id: "admin-1",
      email: "email@chiranjivipoudel.com.np",
      password: "$2a$12$hashed_password", // Mock hashed password
      role: "SUPER_ADMIN",
      createdAt: new Date(),
      updatedAt: new Date(),
    }

this.users.push(adminUser)

// Sample portfolios
    this.portfolios.push(
      {
        id: "portfolio-1",
        userId: adminUser.id,
        title: "Tech Stocks",
        value: "45000",
        description: "Apple, Microsoft, Google",
        createdAt: new Date(),
        updatedAt: new Date(),
      },
      {
        id: "portfolio-2",
        userId: adminUser.id,
        title: "Real Estate",
        value: "120000",
        description: "Property investments",
        createdAt: new Date(),
        updatedAt: new Date(),
      },
    )

// Sample services
    this.services.push(
      {
        id: "service-1",
        title: "Portfolio Management",
        description: "Professional investment management",
        visible: true,
        createdAt: new Date(),
        updatedAt: new Date(),
      },
      {
        id: "service-2",
        title: "Financial Planning",
        description: "Comprehensive financial planning",
        visible: true,
        createdAt: new Date(),
        updatedAt: new Date(),
      },
    )

// Sample settings
    this.settings.push({
      id: "default",
      primaryColor: "#3b82f6",
      accentColor: "#10b981",
      footerText: "Built by TechieGurkhas",
    })

// Sample transactions
    this.transactions.push(
      {
        id: "trans-1",
        userId: adminUser.id,
        type: "INCOME",
        amount: 5000,
        category: "Salary",
        date: new Date("2024-01-15"),
        createdAt: new Date(),
        updatedAt: new Date(),
      },
      {
        id: "trans-2",
        userId: adminUser.id,
        type: "EXPENSE",
        amount: 1200,
        category: "Food",
        date: new Date("2024-01-08"),
        createdAt: new Date(),
        updatedAt: new Date(),
      },
    )

// Sample contact message
    this.contactMessages.push({
      id: "contact-1",
      name: "John Doe",
      email: "john@example.com",
      subject: "Portfolio Inquiry",
      message: "I'm interested in your portfolio management services.",
      isRead: false,
      createdAt: new Date(),
    })
  }

// User operations
  async findUserByEmail(email: string): Promise<User | null> {
    return this.users.find((user) => user.email === email) || null
  }

async findUserById(id: string): Promise<User | null> {
    return this.users.find((user) => user.id === id) || null
  }

async createUser(data: Omit<User, "id" | "createdAt" | "updatedAt">): Promise<User> {
    const user: User = {
      ...data,
      id: `user-${Date.now()}`,
      createdAt: new Date(),
      updatedAt: new Date(),
    }
    this.users.push(user)
    return user
  }

// Portfolio operations
  async findPortfoliosByUserId(userId: string): Promise<Portfolio[]> {
    return this.portfolios.filter((portfolio) => portfolio.userId === userId)
  }

async createPortfolio(data: Omit<Portfolio, "id" | "createdAt" | "updatedAt">): Promise<Portfolio> {
    const portfolio: Portfolio = {
      ...data,
      id: `portfolio-${Date.now()}`,
      createdAt: new Date(),
      updatedAt: new Date(),
    }
    this.portfolios.push(portfolio)
    return portfolio
  }

// Service operations
  async findAllServices(): Promise<Service[]> {
    return this.services.filter((service) => service.visible)
  }

// Transaction operations
  async findTransactionsByUserId(userId: string): Promise<Transaction[]> {
    return this.transactions.filter((transaction) => transaction.userId === userId)
  }

// Settings operations
  async findSettings(): Promise<Settings | null> {
    return this.settings.find((setting) => setting.id === "default") || null
  }

// Contact operations
  async findAllContactMessages(): Promise<ContactMessage[]> {
    return this.contactMessages
  }

async createContactMessage(data: Omit<ContactMessage, "id" | "createdAt" | "isRead">): Promise<ContactMessage> {
    const message: ContactMessage = {
      ...data,
      id: `contact-${Date.now()}`,
      isRead: false,
      createdAt: new Date(),
    }
    this.contactMessages.push(message)
    return message
  }

// Generic connection methods for compatibility
  async $connect(): Promise<void> {
    console.log("📱 Mock database connected")
  }

async $disconnect(): Promise<void> {
    console.log("📱 Mock database disconnected")
  }
}

// Export singleton instance
export const mockDb = new MockDatabase()

// Export for compatibility with existing code
export const db = mockDb
[V0_FILE]typescript:file="lib/supabase/client.ts"
import { createClient } from "@supabase/supabase-js"

const supabaseUrl = process.env.SUPABASE_NEXT_PUBLIC_SUPABASE_URL!
const supabaseAnonKey = proSUPABASE_NEXT_PUBLIC_SUPABASE_ANON_KEY_ANON_KEY!

export const supabase = createClient(supabaseUrl, supabaseAnonKey)
[V0_FILE]typescript:file="lib/supabase/server.ts"
import { createClient } from "@supabase/supabase-js"

const supabaseUrl = process.env.SUPABASE_NEXT_PUBLIC_SUPABASE_URL!
const supabaseServiceKey = process.env.SUPABASE_SERVICE_ROLE_KEY!

export const supabaseAdmin = createClient(supabaseUrl, supabaseServiceKey, {
  auth: {
    autoRefreshToken: false,
    persistSession: false,
  },
})
[V0_FILE]typescript:file="lib/utils.ts"
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
[V0_FILE]typescript:file="middleware.ts"
import { withAuth } from "next-auth/middleware"

export default withAuth(
  function middleware(req) {
    // Add any additional middleware logic here
  },
  {
    callbacks: {
      authorized: ({ token, req }) => {
        // Allow access to public routes
        if (req.nextUrl.pathname.startsWith("/contact")) {
          return true
        }

// Allow access to login page
        if (req.nextUrl.pathname.startsWith("/login")) {
          return true
        }

// Require authentication for all other routes
        return !!token
      },
    },
  },
)

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - api/auth (NextAuth.js routes)
     * - api/contact (public contact form)
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
     * - public folder
     */
    "/((?!api/auth|api/contact|_next/static|_next/image|favicon.ico|public).*)",
  ],
}
[V0_FILE]javascript:file="next.config.mjs"
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverComponentsExternalPackages: ["@prisma/client", "bcryptjs"],
  },
  images: {
    domains: ["blob.vercel-storage.com"],
    unoptimized: true,
  },
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  env: {
    NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
    NEXTAUTH_URL: process.env.NEXTAUTH_URL,
  },
}

export default nextConfig
[V0_FILE]json:file="package.json"
{
  "name": "portfolio-management-system",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "db:generate": "prisma generate",
    "db:migrate": "prisma migrate dev",
    "db:push": "prisma db push",
    "db:reset": "prisma migrate reset",
    "db:seed": "tsx scripts/seed.ts",
    "db:studio": "prisma studio",
    "dev": "next dev",
    "postinstall": "prisma generate",
    "lint": "next lint",
    "setup:database": "tsx scripts/setup-database.ts",
    "setup:mysql": "tsx scripts/setup-mysql.ts",
    "setup:supabase": "tsx scripts/setup-supabase.ts",
    "start": "next start"
  },
  "dependencies": {
    "@auth/core": "latest",
    "@prisma/client": "latest",
    "@radix-ui/react-accordion": "latest",
    "@radix-ui/react-alert-dialog": "latest",
    "@radix-ui/react-aspect-ratio": "latest",
    "@radix-ui/react-avatar": "latest",
    "@radix-ui/react-checkbox": "latest",
    "@radix-ui/react-collapsible": "latest",
    "@radix-ui/react-context-menu": "latest",
    "@radix-ui/react-dialog": "latest",
    "@radix-ui/react-dropdown-menu": "latest",
    "@radix-ui/react-hover-card": "latest",
    "@radix-ui/react-label": "latest",
    "@radix-ui/react-menubar": "latest",
    "@radix-ui/react-navigation-menu": "latest",
    "@radix-ui/react-popover": "latest",
    "@radix-ui/react-progress": "latest",
    "@radix-ui/react-radio-group": "latest",
    "@radix-ui/react-scroll-area": "latest",
    "@radix-ui/react-select": "latest",
    "@radix-ui/react-separator": "latest",
    "@radix-ui/react-sheet": "^1.0.4",
    "@radix-ui/react-slider": "latest",
    "@radix-ui/react-slot": "latest",
    "@radix-ui/react-switch": "latest",
    "@radix-ui/react-tabs": "latest",
    "@radix-ui/react-toast": "latest",
    "@radix-ui/react-toggle": "latest",
    "@radix-ui/react-toggle-group": "latest",
    "@radix-ui/react-tooltip": "latest",
    "@supabase/supabase-js": "latest",
    "@vercel/blob": "latest",
    "bcryptjs": "latest",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "latest",
    "crypto": "latest",
    "date-fns": "^2.30.0",
    "embla-carousel-react": "latest",
    "fs": "latest",
    "input-otp": "latest",
    "lucide-react": "^0.454.0",
    "next": "14.2.16",
    "next-auth": "latest",
    "next-themes": "latest",
    "nodemailer": "latest",
    "path": "latest",
    "react": "^18",
    "react-day-picker": "latest",
    "react-dom": "^18",
    "react-hook-form": "latest",
    "react-resizable-panels": "latest",
    "recharts": "latest",
    "sonner": "latest",
    "swr": "latest",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "latest"
  },
  "devDependencies": {
    "@types/bcryptjs": "^2.4.6",
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.0.4",
    "postcss": "^8.5",
    "prisma": "^5.7.1",
    "tailwindcss": "^3.3.0",
    "tsx": "^4.6.2",
    "typescript": "^5"
  }
}
[V0_FILE]javascript:file="postcss.config.mjs"
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    tailwindcss: {},
  },
};

export default config;
[V0_FILE]plaintext:file="prisma/schema.prisma"
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "mysql"
  url      = env("DATABASE_URL")
}

enum Role {
  SUPER_ADMIN
  ADMIN
  USER
}

model User {
  id        String   @id @default(cuid())
  email     String   @unique
  password  String
  role      Role     @default(USER)
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

portfolios   Portfolio[]
  documents    Document[]
  transactions Transaction[]

@@map("users")
}

model Portfolio {
  id          String   @id @default(cuid())
  userId      String
  title       String
  value       String
  description String?
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt

user User @relation(fields: [userId], references: [id], onDelete: Cascade)

@@map("portfolios")
}

model Service {
  id          String   @id @default(cuid())
  title       String
  description String
  url         String?
  visible     Boolean  @default(true)
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt

@@map("services")
}

model Document {
  id         String   @id @default(cuid())
  userId     String
  title      String
  fileName   String
  filePath   String
  fileSize   Int
  mimeType   String
  uploadedAt DateTime @default(now())

user User @relation(fields: [userId], references: [id], onDelete: Cascade)

@@map("documents")
}

model Settings {
  id           String @id @default(cuid())
  primaryColor String @default("#3b82f6")
  accentColor  String @default("#10b981")
  footerText   String @default("Built by TechieGurkhas")

@@map("settings")
}

model Transaction {
  id       String            @id @default(cuid())
  userId   String
  type     TransactionType
  amount   Decimal           @db.Decimal(10, 2)
  category String
  notes    String?
  date     DateTime
  createdAt DateTime         @default(now())
  updatedAt DateTime         @updatedAt

user User @relation(fields: [userId], references: [id], onDelete: Cascade)

@@map("transactions")
}

enum TransactionType {
  INCOME
  EXPENSE
}

model Email {
  id          String   @id @default(cuid())
  sender      String
  subject     String
  body         Text
  receivedAt  DateTime
  isRead      Boolean  @default(false)
  createdAt   DateTime @default(now())

@@map("emails")
}

model ContactMessage {
  id        String   @id @default(cuid())
  name      String
  email     String
  subject   String?
  message   Text
  isRead    Boolean  @default(false)
  createdAt DateTime @default(now())

@@map("contact_messages")
}
[V0_FILE]typescript:file="scripts/auto-setup.ts"
import { PrismaClient } from "@prisma/client"
import bcrypt from "bcryptjs"

const prisma = new PrismaClient()

async function autoSetup() {
  console.log("🚀 Starting automatic setup for Vercel deployment...")

try {
    // Step 1: Test database connection
    console.log("📡 Testing database connection...")
    await prisma.$connect()
    console.log("✅ Database connected successfully")

// Step 2: Create all tables
    console.log("🗄️ Setting up database tables...")
    await prisma.$executeRaw`CREATE EXTENSION IF NOT EXISTS "uuid-ossp"`
    console.log("✅ Database tables ready")

// Step 3: Create default settings
    console.log("⚙️ Creating default settings...")
    await prisma.settings.upsert({
      where: { id: "default" },
      update: {},
      create: {
        id: "default",
        primaryColor: "#3b82f6",
        accentColor: "#10b981",
        footerText: "Built by TechieGurkhas",
      },
    })

// Step 4: Create your admin account
    console.log("👤 Creating your admin account...")
    const hashedPassword = await bcrypt.hash("P00n@m2054", 12)

const admin = await prisma.user.upsert({
      where: { email: "email@chiranjivipoudel.com.np" },
      update: {},
      create: {
        email: "email@chiranjivipoudel.com.np",
        password: hashedPassword,
        role: "SUPER_ADMIN",
      },
    })

// Step 5: Create sample portfolio data
    console.log("💼 Creating sample portfolio...")
    const portfolioItems = [
      {
        title: "Technology Stocks",
        value: "45000",
        description: "Apple, Microsoft, Google investments",
      },
      {
        title: "Real Estate Fund",
        value: "120000",
        description: "REIT investments and property funds",
      },
      {
        title: "Cryptocurrency",
        value: "15000",
        description: "Bitcoin and Ethereum holdings",
      },
      {
        title: "Bonds & Fixed Income",
        value: "30000",
        description: "Government and corporate bonds",
      },
    ]

for (const item of portfolioItems) {
      await prisma.portfolio.create({
        data: {
          ...item,
          userId: admin.id,
        },
      })
    }

// Step 6: Create sample services
    console.log("🛠️ Creating sample services...")
    const services = [
      {
        title: "Portfolio Management",
        description: "Professional investment portfolio management and optimization",
        url: "https://example.com/portfolio",
        visible: true,
      },
      {
        title: "Financial Planning",
        description: "Comprehensive financial planning and wealth management",
        url: "https://example.com/planning",
        visible: true,
      },
      {
        title: "Investment Advisory",
        description: "Expert investment advice and market analysis",
        url: "https://example.com/advisory",
        visible: true,
      },
    ]

for (const service of services) {
      await prisma.service.create({
        data: service,
      })
    }

// Step 7: Create sample transactions
    console.log("💰 Creating sample transactions...")
    const transactions = [
      {
        type: "INCOME",
        amount: 8000,
        category: "Salary",
        notes: "Monthly salary",
        date: new Date("2024-01-15"),
      },
      {
        type: "INCOME",
        amount: 3500,
        category: "Investment",
        notes: "Dividend payments",
        date: new Date("2024-01-10"),
      },
      {
        type: "INCOME",
        amount: 2000,
        category: "Freelance",
        notes: "Consulting work",
        date: new Date("2024-01-05"),
      },
      {
        type: "EXPENSE",
        amount: 1500,
        category: "Food",
        notes: "Monthly groceries and dining",
        date: new Date("2024-01-08"),
      },
      {
        type: "EXPENSE",
        amount: 800,
        category: "Transportation",
        notes: "Car payment and fuel",
        date: new Date("2024-01-12"),
      },
      {
        type: "EXPENSE",
        amount: 600,
        category: "Utilities",
        notes: "Electricity, water, internet",
        date: new Date("2024-01-03"),
      },
    ]

for (const transaction of transactions) {
      await prisma.transaction.create({
        data: {
          ...transaction,
          userId: admin.id,
        },
      })
    }

// Step 8: Create sample contact message
    console.log("📧 Creating sample contact message...")
    await prisma.contactMessage.create({
      data: {
        name: "Sarah Johnson",
        email: "sarah.johnson@example.com",
        subject: "Investment Consultation Request",
        message:
          "Hi! I'm interested in your portfolio management services. I have $100,000 to invest and would like to discuss investment strategies. Please contact me at your earliest convenience.",
      },
    })

// Step 9: Create sample email
    console.log("📬 Creating sample email...")
    await prisma.email.create({
      data: {
        sender: "client@business.com",
        subject: "Portfolio Performance Review",
        body: "Dear Portfolio Manager, I would like to schedule a meeting to review my portfolio performance for this quarter. Please let me know your availability. Best regards, Michael Chen",
        receivedAt: new Date(),
      },
    })

console.log("\n🎉 SETUP COMPLETE! Your Portfolio Management System is ready!")
    console.log("\n📋 SUMMARY:")
    console.log("✅ Database tables created")
    console.log("✅ Admin account created")
    console.log("✅ 4 Portfolio items added")
    console.log("✅ 3 Services created")
    console.log("✅ 6 Sample transactions added")
    console.log("✅ Sample contact message added")
    console.log("✅ Sample email added")

console.log("\n🔐 YOUR LOGIN DETAILS:")
    console.log("🌐 Website: https://your-app.vercel.app")
    console.log("📧 Email: email@chiranjivipoudel.com.np")
    console.log("🔑 Password: P00n@m2054")
    console.log("👑 Role: SUPER_ADMIN (Full Access)")

console.log("\n📱 WHAT YOU CAN DO:")
    console.log("• Manage your investment portfolio")
    console.log("• Track income and expenses")
    console.log("• Upload and manage documents")
    console.log("• View contact form messages")
    console.log("• Manage email inbox")
    console.log("• Create and manage users")
    console.log("• Customize app settings and colors")
  } catch (error) {
    console.error("❌ Setup failed:", error)
    throw error
  } finally {
    await prisma.$disconnect()
  }
}

autoSetup().catch((e) => {
  console.error("Setup error:", e)
  process.exit(1)
})
[V0_FILE]shellscript:file="scripts/deploy.sh"
#!/bin/bash

# Portfolio Management System Deployment Script

echo "🚀 Starting deployment process..."

# Check if required environment variables are set
if [ -z "$NEXTAUTH_SECRET" ]; then
    echo "❌ Error: NEXTAUTH_SECRET is not set"
    exit 1
fi

if [ -z "$DATABASE_URL" ]; then
    echo "❌ Error: DATABASE_URL is not set"
    exit 1
fi

echo "✅ Environment variables validated"

# Install dependencies
echo "📦 Installing dependencies..."
npm ci

# Generate Prisma client
echo "🔧 Generating Prisma client..."
npx prisma generate

# Run database migrations
echo "🗄️ Running database migrations..."
npx prisma db push

# Build the application
echo "🏗️ Building application..."
npm run build

echo "✅ Deployment completed successfully!"
[V0_FILE]typescript:file="scripts/quick-supabase-setup.ts"
#!/usr/bin/env node
import { existsSync, writeFileSync } from "fs"
import { join } from "path"

const PUBLIC_URL_KEY = "SUPABASE_SUPABASE_NEXT_PUBLIC_SUPABASE_URL"
const PUBLIC_ANON_KEY = "SUPABASE_NEXT_PUBLIC_SUPABASE_ANON_KEY_ANON_KEY"

function quickSupabaseSetup() {
  console.log("🚀 Quick Supabase Setup for Portfolio Management System")
  console.log("=".repeat(60))

// Check if .env.local exists
  const envPath = join(process.cwd(), ".env.local")

if (!existsSync(envPath)) {
    console.log("📝 Creating .env.local template...")

const envTemplate = `# Supabase Configuration
# Replace these with your actual Supabase values
${PUBLIC_URL_KEY}=https://<your-project-ref>.supabase.co
${PUBLIC_ANON_KEY}=your-anon-key-here
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key-here

# Database URL (from Supabase Settings > Database)
DATABASE_URL=postgresql://postgres:[YOUR-PASSWORD]@db.your-project-ref.supabase.co:5432/postgres

# NextAuth Configuration
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=${generateRandomString(32)}

# Optional: Vercel Blob for file uploads
# BLOB_READ_WRITE_TOKEN=your-blob-token
`

writeFileSync(envPath, envTemplate)
    console.log("✅ Created .env.local template")
  }

console.log("\n📋 Next steps:")
  console.log("1. Create your Supabase project at https://supabase.com")
  console.log("2. Update .env.local with your Supabase credentials")
  console.log("3. Run: npm run setup:supabase")
  console.log("4. Run: npm run dev")

console.log("\n📚 For detailed instructions, see: SUPABASE-SETUP.md")
}

function generateRandomString(length: number): string {
  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"
  let result = ""
  for (let i = 0; i < length; i++) {
    result += chars.charAt(Math.floor(Math.random() * chars.length))
  }
  return result
}

// Auto-run if called directly
if (require.main === module) {
  quickSupabaseSetup()
}
[V0_FILE]typescript:file="scripts/seed.ts"
import { PrismaClient } from "@prisma/client"
import bcrypt from "bcryptjs"

const prisma = new PrismaClient()

async function main() {
  console.log("🌱 Starting MySQL database seeding...")

try {
    // Create default settings
    console.log("Creating default settings...")
    await prisma.settings.upsert({
      where: { id: "default" },
      update: {},
      create: {
        id: "default",
        primaryColor: "#3b82f6",
        accentColor: "#10b981",
        footerText: "Built by TechieGurkhas",
      },
    })

// Create super admin user
    console.log("Creating super admin user...")
    const hashedPassword = await bcrypt.hash("P00n@m2054", 12)

const superAdmin = await prisma.user.upsert({
      where: { email: "email@chiranjivipoudel.com.np" },
      update: {},
      create: {
        email: "email@chiranjivipoudel.com.np",
        password: hashedPassword,
        role: "SUPER_ADMIN",
      },
    })

console.log("Creating sample portfolio items...")
    // Create sample portfolio items
    const portfolioItems = [
      {
        title: "Stock Investment Portfolio",
        value: "25000",
        description: "Diversified stock portfolio with tech and healthcare focus",
      },
      {
        title: "Real Estate Investment",
        value: "150000",
        description: "Commercial property investment in Kathmandu",
      },
      {
        title: "Cryptocurrency Holdings",
        value: "8500",
        description: "Bitcoin and Ethereum long-term holdings",
      },
    ]

for (const item of portfolioItems) {
      await prisma.portfolio.upsert({
        where: { id: `sample-${item.title.toLowerCase().replace(/\s+/g, "-")}` },
        update: {},
        create: {
          ...item,
          userId: superAdmin.id,
        },
      })
    }

console.log("Creating sample services...")
    // Create sample services
    const services = [
      {
        title: "Portfolio Management Consulting",
        description: "Professional portfolio analysis and investment advice",
        url: "https://example.com/portfolio-consulting",
        visible: true,
      },
      {
        title: "Financial Planning Services",
        description: "Comprehensive financial planning for individuals and businesses",
        url: "https://example.com/financial-planning",
        visible: true,
      },
      {
        title: "Investment Research",
        description: "In-depth market research and investment recommendations",
        url: "https://example.com/research",
        visible: false,
      },
    ]

for (const service of services) {
      await prisma.service.upsert({
        where: { id: `sample-${service.title.toLowerCase().replace(/\s+/g, "-")}` },
        update: {},
        create: service,
      })
    }

console.log("Creating sample transactions...")
    // Create sample transactions
    const transactions = [
      {
        type: "INCOME",
        amount: 5000,
        category: "Salary",
        notes: "Monthly salary payment",
        date: new Date("2024-01-15"),
      },
      {
        type: "INCOME",
        amount: 2500,
        category: "Freelance",
        notes: "Web development project completion",
        date: new Date("2024-01-10"),
      },
      {
        type: "EXPENSE",
        amount: 1200,
        category: "Food",
        notes: "Monthly groceries and dining expenses",
        date: new Date("2024-01-08"),
      },
      {
        type: "EXPENSE",
        amount: 800,
        category: "Transportation",
        notes: "Fuel and vehicle maintenance",
        date: new Date("2024-01-05"),
      },
      {
        type: "EXPENSE",
        amount: 400,
        category: "Utilities",
        notes: "Electricity and internet bills",
        date: new Date("2024-01-03"),
      },
      {
        type: "INCOME",
        amount: 1800,
        category: "Investment",
        notes: "Dividend from stock portfolio",
        date: new Date("2024-01-20"),
      },
    ]

for (const transaction of transactions) {
      await prisma.transaction.create({
        data: {
          ...transaction,
          userId: superAdmin.id,
        },
      })
    }

console.log("Creating sample contact message...")
    // Create sample contact message
    await prisma.contactMessage.upsert({
      where: { id: "sample-contact-1" },
      update: {},
      create: {
        id: "sample-contact-1",
        name: "John Doe",
        email: "john.doe@example.com",
        subject: "Portfolio Management Inquiry",
        message:
          "Hi! I'm interested in your portfolio management services. Could you please provide more information about your investment strategies and fee structure? I have about $50,000 to invest and I'm looking for a balanced approach with moderate risk. Thank you!",
      },
    })

console.log("Creating sample email...")
    // Create sample email
    await prisma.email.upsert({
      where: { id: "sample-email-1" },
      update: {},
      create: {
        id: "sample-email-1",
        sender: "client@businesspartner.com",
        subject: "Quarterly Portfolio Review Meeting",
        body: `
          <div>
            <p>Dear Portfolio Manager,</p>
            <p>I hope this email finds you well. I would like to schedule our quarterly portfolio review meeting to discuss the performance of my investments and potential adjustments for the upcoming quarter.</p>
            <p>Please let me know your availability for the following dates:</p>
            <ul>
              <li>Monday, February 5th - 2:00 PM to 4:00 PM</li>
              <li>Wednesday, February 7th - 10:00 AM to 12:00 PM</li>
              <li>Friday, February 9th - 3:00 PM to 5:00 PM</li>
            </ul>
            <p>I'm particularly interested in discussing the tech sector allocation and whether we should consider increasing our exposure to renewable energy stocks.</p>
            <p>Best regards,<br>Sarah Johnson<br>Investment Client</p>
          </div>
        `,
        receivedAt: new Date(),
      },
    })

console.log("✅ MySQL database seeded successfully!")
    console.log("\n📊 Summary:")
    console.log("- Super Admin user created")
    console.log("- 3 Portfolio items created")
    console.log("- 3 Services created")
    console.log("- 6 Transactions created")
    console.log("- 1 Contact message created")
    console.log("- 1 Sample email created")
    console.log("- Default settings configured")

console.log("\n🔐 Login credentials:")
    console.log("Email: email@chiranjivipoudel.com.np")
    console.log("Password: P00n@m2054")
    console.log("Role: SUPER_ADMIN")
    console.log("\n📁 Files will be stored in: public/uploads/")
  } catch (error) {
    console.error("❌ Seeding failed:", error)
    throw error
  }
}

main()
  .catch((e) => {
    console.error(e)
    process.exit(1)
  })
  .finally(async () => {
    await prisma.$disconnect()
  })
[V0_FILE]typescript:file="scripts/setup-database.ts"
import { PrismaClient } from "@prisma/client"
import bcrypt from "bcryptjs"

const prisma = new PrismaClient()

export async function setupDatabase() {
  console.log("🚀 Setting up Portfolio Management System with MySQL...")

try {
    // Test database connection
    await prisma.$connect()
    console.log("✅ MySQL database connected successfully")

// Create default settings
    const settings = await prisma.settings.upsert({
      where: { id: "default" },
      update: {},
      create: {
        id: "default",
        primaryColor: "#3b82f6",
        accentColor: "#10b981",
        footerText: "Built by TechieGurkhas",
      },
    })
    console.log("✅ Settings configured")

// Create admin user
    const hashedPassword = await bcrypt.hash("P00n@m2054", 12)
    const admin = await prisma.user.upsert({
      where: { email: "email@chiranjivipoudel.com.np" },
      update: {},
      create: {
        email: "email@chiranjivipoudel.com.np",
        password: hashedPassword,
        role: "SUPER_ADMIN",
      },
    })
    console.log("✅ Admin user created")

// Create sample portfolios
    const portfolios = [
      { title: "Tech Stocks", value: "45000", description: "Apple, Microsoft, Google" },
      { title: "Real Estate", value: "120000", description: "Property investments" },
      { title: "Crypto Portfolio", value: "15000", description: "Bitcoin, Ethereum" },
      { title: "Bonds & Fixed Income", value: "80000", description: "Government and corporate bonds" },
    ]

for (const portfolio of portfolios) {
      await prisma.portfolio.upsert({
        where: { id: `sample-${portfolio.title.toLowerCase().replace(/\s+/g, "-")}` },
        update: {},
        create: { ...portfolio, userId: admin.id },
      })
    }
    console.log("✅ Portfolio data created")

// Create services
    const services = [
      { title: "Portfolio Management", description: "Professional investment management services", visible: true },
      { title: "Financial Planning", description: "Comprehensive financial planning and advisory", visible: true },
      { title: "Risk Assessment", description: "Investment risk analysis and mitigation", visible: true },
      { title: "Tax Optimization", description: "Tax-efficient investment strategies", visible: false },
    ]

// Create sample transactions
    const transactions = [
      {
        type: "INCOME" as const,
        amount: 5000,
        category: "Salary",
        date: new Date("2024-01-15"),
        notes: "Monthly salary",
      },
      {
        type: "INCOME" as const,
        amount: 2000,
        category: "Investment",
        date: new Date("2024-01-10"),
        notes: "Dividend income",
      },
      {
        type: "INCOME" as const,
        amount: 1500,
        category: "Freelance",
        date: new Date("2024-01-05"),
        notes: "Consulting work",
      },
      {
        type: "EXPENSE" as const,
        amount: 1200,
        category: "Food",
        date: new Date("2024-01-08"),
        notes: "Groceries and dining",
      },
      {
        type: "EXPENSE" as const,
        amount: 800,
        category: "Transportation",
        date: new Date("2024-01-05"),
        notes: "Gas and maintenance",
      },
      { type: "EXPENSE" as const, amount: 2000, category: "Rent", date: new Date("2024-01-01"), notes: "Monthly rent" },
    ]

for (const transaction of transactions) {
      await prisma.transaction.create({
        data: { ...transaction, userId: admin.id },
      })
    }
    console.log("✅ Transaction data created")

// Create sample contact messages
    const contactMessages = [
      {
        name: "John Doe",
        email: "john@example.com",
        subject: "Portfolio Inquiry",
        message: "I'm interested in your portfolio management services. Could you provide more information?",
      },
      {
        name: "Sarah Smith",
        email: "sarah@example.com",
        subject: "Investment Consultation",
        message: "I'd like to schedule a consultation to discuss my investment goals.",
      },
    ]

for (const contact of contactMessages) {
      await prisma.contactMessage.create({
        data: contact,
      })
    }
    console.log("✅ Contact messages created")

// Create sample emails
    const emails = [
      {
        sender: "market@updates.com",
        subject: "Weekly Market Update",
        body: "This week's market summary and key insights...",
        receivedAt: new Date("2024-01-15T09:00:00Z"),
      },
      {
        sender: "alerts@portfolio.com",
        subject: "Portfolio Performance Alert",
        body: "Your portfolio has reached a new milestone...",
        receivedAt: new Date("2024-01-14T14:30:00Z"),
      },
    ]

for (const email of emails) {
      await prisma.email.create({
        data: email,
      })
    }
    console.log("✅ Email data created")

console.log("\n🎉 MySQL database setup complete!")
    console.log("🔐 Admin Login: email@chiranjivipoudel.com.np")
    console.log("🔑 Password: P00n@m2054")
    console.log("🚀 Your portfolio management system is ready!")
    console.log("📁 Files will be stored in: public/uploads/")

return { success: true }
  } catch (error) {
    console.error("❌ Database setup failed:", error)
    throw error
  } finally {
    await prisma.$disconnect()
  }
}

// Auto-run if called directly
if (require.main === module) {
  setupDatabase().catch(console.error)
}
[V0_FILE]typescript:file="scripts/setup-supabase.ts"
import { PrismaClient } from "@prisma/client"
import bcrypt from "bcryptjs"

const prisma = new PrismaClient()

export async function setupSupabase() {
  console.log("🚀 Setting up Portfolio Management System with Supabase...")

try {
    // Test Supabase connection
    await prisma.$connect()
    console.log("✅ Supabase database connected")

// Push schema to Supabase (creates tables if they don't exist)
    console.log("📊 Setting up database schema...")

// Create settings
    const settings = await prisma.settings.upsert({
      where: { id: "default" },
      update: {},
      create: {
        id: "default",
        primaryColor: "#3b82f6",
        accentColor: "#10b981",
        footerText: "Built by TechieGurkhas",
      },
    })
    console.log("✅ Settings configured")

// Create sample data
    const portfolios = [
      { title: "Tech Stocks", value: "45000", description: "Apple, Microsoft, Google" },
      { title: "Real Estate", value: "120000", description: "Property investments" },
      { title: "Crypto", value: "15000", description: "Bitcoin, Ethereum" },
    ]

// Create services
    const services = [
      { title: "Portfolio Management", description: "Professional investment management", visible: true },
      { title: "Financial Planning", description: "Comprehensive financial planning", visible: true },
    ]

// Create sample transactions
    const transactions = [
      { type: "INCOME" as const, amount: 5000, category: "Salary", date: new Date("2024-01-15") },
      { type: "INCOME" as const, amount: 2000, category: "Investment", date: new Date("2024-01-10") },
      { type: "EXPENSE" as const, amount: 1200, category: "Food", date: new Date("2024-01-08") },
      { type: "EXPENSE" as const, amount: 800, category: "Transportation", date: new Date("2024-01-05") },
    ]

for (const transaction of transactions) {
      await prisma.transaction.create({
        data: { ...transaction, userId: admin.id },
      })
    }
    console.log("✅ Transaction data created")

// Create sample contact
    await prisma.contactMessage.upsert({
      where: { id: "sample-contact" },
      update: {},
      create: {
        id: "sample-contact",
        name: "John Doe",
        email: "john@example.com",
        subject: "Portfolio Inquiry",
        message: "I'm interested in your portfolio management services.",
      },
    })
    console.log("✅ Contact message created")

console.log("\n🎉 Supabase setup complete!")
    console.log("🔐 Login: email@chiranjivipoudel.com.np")
    console.log("🔑 Password: P00n@m2054")
    console.log("🚀 Your portfolio system is ready!")

return { success: true }
  } catch (error) {
    console.error("❌ Supabase setup failed:", error)
    throw error
  } finally {
    await prisma.$disconnect()
  }
}

// Auto-run if called directly
if (require.main === module) {
  setupSupabase().catch(console.error)
}
[V0_FILE]typescript:file="scripts/test-supabase.ts"
import { PrismaClient } from "@prisma/client"
import { supabase } from "../lib/supabase/client"

const prisma = new PrismaClient()

async function testSupabaseConnection() {
  console.log("🧪 Testing Supabase connection...")

try {
    // Test Prisma connection
    console.log("1. Testing Prisma database connection...")
    await prisma.$connect()
    console.log("✅ Prisma connected successfully")

// Test Supabase client
    console.log("2. Testing Supabase client connection...")
    const { data, error } = await supabase.from("User").select("count").limit(1)

if (error) {
      console.log("ℹ️  Supabase client test (expected if no data yet):", error.message)
    } else {
      console.log("✅ Supabase client connected successfully")
    }

// Test database schema
    console.log("3. Testing database schema...")
    const userCount = await prisma.user.count()
    console.log(`✅ Database schema working - Found ${userCount} users`)

console.log("\n🎉 All connections successful!")
    console.log("Your Supabase setup is working correctly!")
  } catch (error) {
    console.error("❌ Connection test failed:", error)
    console.log("\n🔧 Troubleshooting tips:")
    console.log("1. Check your DATABASE_URL in .env.local")
    console.log("2. Verify your Supabase project is active")
    console.log("3. Run 'npx prisma db push' to sync schema")
    console.log("4. Check the SUPABASE-SETUP.md guide")
  } finally {
    await prisma.$disconnect()
  }
}

// Auto-run if called directly
if (require.main === module) {
  testSupabaseConnection().catch(console.error)
}

export { testSupabaseConnection }
[V0_FILE]css:file="styles/globals.css"
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: Arial, Helvetica, sans-serif;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]typescript:file="tailwind.config.ts"
import type { Config } from "tailwindcss";

const config: Config = {
    darkMode: ["class"],
    content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "*.{js,ts,jsx,tsx,mdx}"
  ],
  theme: {
  	extend: {
  		colors: {
  			background: 'hsl(var(--background))',
  			foreground: 'hsl(var(--foreground))',
  			card: {
  				DEFAULT: 'hsl(var(--card))',
  				foreground: 'hsl(var(--card-foreground))'
  			},
  			popover: {
  				DEFAULT: 'hsl(var(--popover))',
  				foreground: 'hsl(var(--popover-foreground))'
  			},
  			primary: {
  				DEFAULT: 'hsl(var(--primary))',
  				foreground: 'hsl(var(--primary-foreground))'
  			},
  			secondary: {
  				DEFAULT: 'hsl(var(--secondary))',
  				foreground: 'hsl(var(--secondary-foreground))'
  			},
  			muted: {
  				DEFAULT: 'hsl(var(--muted))',
  				foreground: 'hsl(var(--muted-foreground))'
  			},
  			accent: {
  				DEFAULT: 'hsl(var(--accent))',
  				foreground: 'hsl(var(--accent-foreground))'
  			},
  			destructive: {
  				DEFAULT: 'hsl(var(--destructive))',
  				foreground: 'hsl(var(--destructive-foreground))'
  			},
  			border: 'hsl(var(--border))',
  			input: 'hsl(var(--input))',
  			ring: 'hsl(var(--ring))',
  			chart: {
  				'1': 'hsl(var(--chart-1))',
  				'2': 'hsl(var(--chart-2))',
  				'3': 'hsl(var(--chart-3))',
  				'4': 'hsl(var(--chart-4))',
  				'5': 'hsl(var(--chart-5))'
  			},
  			sidebar: {
  				DEFAULT: 'hsl(var(--sidebar-background))',
  				foreground: 'hsl(var(--sidebar-foreground))',
  				primary: 'hsl(var(--sidebar-primary))',
  				'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
  				accent: 'hsl(var(--sidebar-accent))',
  				'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
  				border: 'hsl(var(--sidebar-border))',
  				ring: 'hsl(var(--sidebar-ring))'
  			}
  		},
  		borderRadius: {
  			lg: 'var(--radius)',
  			md: 'calc(var(--radius) - 2px)',
  			sm: 'calc(var(--radius) - 4px)'
  		},
  		keyframes: {
  			'accordion-down': {
  				from: {
  					height: '0'
  				},
  				to: {
  					height: 'var(--radix-accordion-content-height)'
  				}
  			},
  			'accordion-up': {
  				from: {
  					height: 'var(--radix-accordion-content-height)'
  				},
  				to: {
  					height: '0'
  				}
  			}
  		},
  		animation: {
  			'accordion-down': 'accordion-down 0.2s ease-out',
  			'accordion-up': 'accordion-up 0.2s ease-out'
  		}
  	}
  },
  plugins: [require("tailwindcss-animate")],
};
export default config;
[V0_FILE]json:file="tsconfig.json"
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "es6"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
[V0_FILE]typescript:file="types/next-auth.d.ts"
declare module "next-auth" {
  interface Session {
    user: {
      id: string
      email: string
      role: string
    }
  }

interface User {
    id: string
    email: string
    role: string
  }
}

declare module "next-auth/jwt" {
  interface JWT {
    role: string
  }
}
[V0_FILE]json:file="vercel.json"
{
  "buildCommand": "npm run build",
  "devCommand": "npm run dev",
  "installCommand": "npm install",
  "framework": "nextjs",
  "functions": {
    "app/api/**/*.ts": {
      "maxDuration": 30
    }
  },
  "env": {
    "NEXTAUTH_SECRET": "@nextauth_secret",
    "NEXTAUTH_URL": "@nextauth_url",
    "DATABASE_URL": "@database_url",
    "BLOB_READ_WRITE_TOKEN": "@blob_read_write_token"
  },
  "build": {
    "env": {
      "NEXTAUTH_SECRET": "@nextauth_secret",
      "DATABASE_URL": "@database_url"
    }
  }
}
[V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O6nFUX98nCShYLwvA4OhEx4FnDPQ/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png"
[V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O6nFUX98nCShYLwvA4OhEx4FnDPQ/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg"
[V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O6nFUX98nCShYLwvA4OhEx4FnDPQ/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg"
[V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O6nFUX98nCShYLwvA4OhEx4FnDPQ/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg"
[V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_O6nFUX98nCShYLwvA4OhEx4FnDPQ/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg"</article></body></html>