[V0_FILE]typescriptreact:file="lib/prisma.ts" isMerged="true" import { PrismaClient } from "@prisma/client" const globalForPrisma = global as unknown as { prisma: PrismaClient } export const prisma = globalForPrisma.prisma || new PrismaClient({ log: process.env.NODE_ENV === "development" ? ["query", "error", "warn"] : ["error"], }) if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma [V0_FILE]typescriptreact:file="components/dashboard/settings-form.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Switch } from "@/components/ui/switch" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { useToast } from "@/hooks/use-toast" export function SettingsForm() { const { toast } = useToast() const [loading, setLoading] = useState(false) // Account settings const [defaultVisibility, setDefaultVisibility] = useState(true) const [enableDirectLinks, setEnableDirectLinks] = useState(true) const [enableImageOptimization, setEnableImageOptimization] = useState(true) // API settings const [apiKey, setApiKey] = useState("sk_test_••••••••••••••••••••••••••••••") // Custom domain settings const [customDomain, setCustomDomain] = useState("") const [useCDN, setUseCDN] = useState(false) // Save settings const saveSettings = async () => { setLoading(true) // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1000)) toast({ title: "Settings saved", description: "Your settings have been saved successfully.", }) setLoading(false) } // Generate new API key const generateApiKey = async () => { setLoading(true) // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1000)) // Generate a fake API key const newApiKey = `sk_test_${Array(24) .fill(0) .map(() => Math.random().toString(36).charAt(2)) .join("")}` setApiKey(newApiKey) toast({ title: "API key generated", description: "Your new API key has been generated. Keep it secure!", }) setLoading(false) } return ( Account API Custom Domain Billing Account Settings Manage your account settings and preferences.

Default image visibility

When enabled, all uploaded images will be public by default.

Enable direct links

Allow direct access to your images without going through our CDN.

Image optimization

Automatically optimize images for better performance.

API Settings Manage your API keys and access.

API Key

Your API key grants full access to your account. Keep it secure!

Custom Domain Set up a custom domain for your images.

Custom Domain setCustomDomain(e.target.value)} />

Enter a subdomain or domain you own to serve your images from.

Use CDN

Enable CDN for faster image delivery worldwide.

DNS Configuration

Add the following CNAME record to your DNS settings:

                CNAME images.yourdomain.com cdn.imagevault.com

Billing Manage your subscription and billing information.

Current Plan: Free

• 1GB Storage
• 10GB Bandwidth per month
• Basic image optimization
• 100 uploads per month

Pro Plan $9.99/month

• 10GB Storage
• 100GB Bandwidth per month
• Advanced image optimization
• Unlimited uploads
• Custom domain

Business Plan $29.99/month

• 100GB Storage
• 1TB Bandwidth per month
• Premium image optimization
• Unlimited uploads
• Multiple custom domains
• Priority support

) } [V0_FILE]typescriptreact:file="middleware/image-optimizer.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { auth } from "@clerk/nextjs/server" import { prisma } from "@/lib/prisma" // This middleware would handle image optimization requests // In a real implementation, you would use a library like Sharp // to resize, compress, and format images on-the-fly export async function middleware(request: NextRequest) { // Extract image parameters from the URL // Example URL: /images/[id]/optimize?width=800&height=600&format=webp&quality=80 const url = new URL(request.url) const pathParts = url.pathname.split("/") // Check if this is an image optimization request if (pathParts[1] === "images" && pathParts[3] === "optimize") { const imageId = pathParts[2] // Get optimization parameters const width = url.searchParams.get("width") const height = url.searchParams.get("height") const format = url.searchParams.get("format") const quality = url.searchParams.get("quality") try { // Get the image from the database const image = await prisma.image.findUnique({ where: { id: imageId }, }) if (!image) { return new NextResponse("Image not found", { status: 404 }) } // Check if the image is public or if the user is authorized if (!image.isPublic) { const { userId } = auth() if (!userId || userId !== image.userId) { return new NextResponse("Unauthorized", { status: 401 }) } } // In a real implementation, you would: // 1. Fetch the original image from R2 // 2. Apply the requested transformations using Sharp // 3. Return the optimized image // 4. Optionally cache the result // For now, we'll just redirect to the original image return NextResponse.redirect(image.publicUrl) } catch (error) { console.error("Error optimizing image:", error) return new NextResponse("Error optimizing image", { status: 500 }) } } // Continue to the next middleware or route handler return NextResponse.next() } export const config = { matcher: ["/images/:id/optimize"], } [V0_FILE]typescriptreact:file="app/dashboard/analytics/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/dashboard/analytics-dashboard.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Bar, BarChart, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts" // Mock data for views const viewsData = [ { date: "2023-04-01", views: 120, bandwidth: 240 }, { date: "2023-04-02", views: 150, bandwidth: 300 }, { date: "2023-04-03", views: 180, bandwidth: 360 }, { date: "2023-04-04", views: 220, bandwidth: 440 }, { date: "2023-04-05", views: 250, bandwidth: 500 }, { date: "2023-04-06", views: 280, bandwidth: 560 }, { date: "2023-04-07", views: 310, bandwidth: 620 }, { date: "2023-04-08", views: 290, bandwidth: 580 }, { date: "2023-04-09", views: 320, bandwidth: 640 }, { date: "2023-04-10", views: 350, bandwidth: 700 }, { date: "2023-04-11", views: 370, bandwidth: 740 }, { date: "2023-04-12", views: 390, bandwidth: 780 }, { date: "2023-04-13", views: 410, bandwidth: 820 }, { date: "2023-04-14", views: 430, bandwidth: 860 }, ] // Mock data for top images const topImagesData = [ { id: "1", filename: "mountain-landscape.jpg", views: 1245, bandwidth: 2.5, thumbnailUrl: "/rocky-mountain-vista.png", }, { id: "2", filename: "product-photo.png", views: 987, bandwidth: 1.8, thumbnailUrl: "/assorted-products-display.png", }, { id: "3", filename: "profile-picture.jpg", views: 876, bandwidth: 1.2, thumbnailUrl: "/thoughtful-gaze.png", }, { id: "4", filename: "banner-image.webp", views: 765, bandwidth: 1.0, thumbnailUrl: "/celebratory-banner.png", }, { id: "5", filename: "background.jpg", views: 654, bandwidth: 0.9, thumbnailUrl: "/majestic-peaks.png", }, ] // Mock data for referrers const referrersData = [ { source: "Direct", visits: 450 }, { source: "yourdomain.com", visits: 350 }, { source: "google.com", visits: 250 }, { source: "twitter.com", visits: 150 }, { source: "facebook.com", visits: 100 }, { source: "instagram.com", visits: 80 }, { source: "linkedin.com", visits: 50 }, ] export function AnalyticsDashboard() { const [timeRange, setTimeRange] = useState("7d") // Format date for display const formatDate = (dateString: string) => { const date = new Date(dateString) return date.toLocaleDateString("en-US", { month: "short", day: "numeric", }) } // Filter data based on time range const getFilteredData = () => { const now = new Date() let daysToSubtract = 7 switch (timeRange) { case "24h": daysToSubtract = 1 break case "7d": daysToSubtract = 7 break case "30d": daysToSubtract = 30 break case "90d": daysToSubtract = 90 break } const cutoffDate = new Date(now) cutoffDate.setDate(cutoffDate.getDate() - daysToSubtract) return viewsData.filter((item) => new Date(item.date) >= cutoffDate) } const filteredData = getFilteredData() // Calculate totals const totalViews = filteredData.reduce((sum, item) => sum + item.views, 0) const totalBandwidth = filteredData.reduce((sum, item) => sum + item.bandwidth, 0) return (

Image Analytics

Total Views

{totalViews.toLocaleString()}

+{Math.round(totalViews * 0.12)}% from previous period

Bandwidth Used

{totalBandwidth.toFixed(1)} GB

+{Math.round(totalBandwidth * 0.08)}% from previous period

Average Per Image

{Math.round(totalViews / 24)}

Based on 24 active images

Conversion Rate

3.2%

+0.5% from previous period

Views Bandwidth Top Images Referrers Views Over Time Number of image views during the selected period. `${value}`} /> [`${value} views`, "Views"]} labelFormatter={(label) => formatDate(label)} /> Bandwidth Usage Bandwidth consumption in MB during the selected period. `${value} MB`} /> [`${value} MB`, "Bandwidth"]} labelFormatter={(label) => formatDate(label)} /> Top Images Most viewed images during the selected period.

{topImagesData.map((image) => (

{image.filename}

{image.views.toLocaleString()} views • {image.bandwidth} GB

{Math.round((image.views / totalViews) * 100)}%

of total

))}

Top Referrers Sources driving traffic to your images. [`${value} visits`, "Visits"]} />

) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import type { Metadata } from "next" import { LandingNavbar } from "@/components/landing/navbar" import { LandingHero } from "@/components/landing/hero" import { LandingFeatures } from "@/components/landing/features" import { LandingTestimonials } from "@/components/landing/testimonials" import { LandingPricing } from "@/components/landing/pricing" import { LandingFaq } from "@/components/landing/faq" import { LandingCta } from "@/components/landing/cta" import { LandingFooter } from "@/components/landing/footer" export const metadata: Metadata = { title: "ImageVault - Fast, Secure Image Hosting", description: "Upload, store, and share your images with ImageVault. Fast, secure, and reliable image hosting with optimization and analytics.", } export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/landing/navbar.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { usePathname } from "next/navigation" import { UserButton, SignInButton, SignUpButton, useAuth } from "@clerk/nextjs" import { Button } from "@/components/ui/button" import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger, SheetClose } from "@/components/ui/sheet" import { Menu, ImageIcon } from "lucide-react" import { ModeToggle } from "@/components/mode-toggle" export function LandingNavbar() { const { isSignedIn } = useAuth() const pathname = usePathname() const [isScrolled, setIsScrolled] = useState(false) useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 10) } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) const navLinks = [ { href: "/features", label: "Features" }, { href: "/pricing", label: "Pricing" }, { href: "/tools", label: "Tools" }, { href: "/blog", label: "Blog" }, ] return (

ImageVault

{isSignedIn ? ( <> ) : ( <> )}

ImageVault

{navLinks.map((link) => ( {link.label} ))}

{isSignedIn ? ( <>

Your Account:

) : ( <> )}

) } [V0_FILE]typescriptreact:file="components/landing/hero.tsx" isMerged="true" import Link from "next/link" import Image from "next/image" import { Button } from "@/components/ui/button" import { ArrowRight, Upload, ImageIcon, BarChart } from "lucide-react" export function LandingHero() { return (

Fast, Secure{" "} Image Hosting {" "} for Everyone

Upload, optimize, and share your images with ease. Get powerful analytics and custom domains in one simple platform.

Unlimited uploads

Image optimization

Analytics

) } [V0_FILE]typescriptreact:file="components/landing/features.tsx" isMerged="true" import { Upload, ImageIcon, BarChart, Globe, Shield, Zap, Share2, Smartphone, Layers } from "lucide-react" export function LandingFeatures() { const features = [ { icon: , title: "Easy Uploads", description: "Drag and drop multiple images at once. Support for all major image formats including JPEG, PNG, WebP, and more.", }, { icon: , title: "Image Optimization", description: "Automatically optimize your images for the web. Resize, compress, and convert to modern formats like WebP.", }, { icon: , title: "Detailed Analytics", description: "Track views, downloads, and referrers. Understand how your images are being used across the web.", }, { icon: , title: "Custom Domains", description: "Use your own domain for image hosting. Create a seamless experience for your users and brand.", }, { icon: , title: "Privacy Controls", description: "Set images as public or private. Create expiring links for temporary access to your images.", }, { icon: , title: "Lightning Fast", description: "Global CDN ensures your images load quickly anywhere in the world. Optimized for speed and performance.", }, { icon: , title: "Easy Sharing", description: "One-click copy for direct links, HTML embeds, and markdown. Share to social media directly from the dashboard.", }, { icon: , title: "Mobile Friendly", description: "Upload and manage your images on the go. Fully responsive design works on all devices.", }, { icon: , title: "Organization Tools", description: "Create folders and collections to organize your images. Add tags and metadata for easy searching.", }, ] return (

Powerful Features for Your Images

Everything you need to upload, manage, optimize, and share your images in one place.

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

{feature.icon}

{feature.title}

{feature.description}

))}

) } [V0_FILE]typescriptreact:file="components/landing/testimonials.tsx" isMerged="true" import { Card, CardContent } from "@/components/ui/card" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Quote } from "lucide-react" export function LandingTestimonials() { const testimonials = [ { quote: "ImageVault has transformed how we manage product photos. The optimization tools alone have saved us countless hours and improved our site's performance.", author: "Sarah Johnson", role: "E-commerce Manager", avatar: "/avatars/sarah.jpg", initials: "SJ", }, { quote: "As a photographer, I needed a reliable platform to share my work with clients. ImageVault's private galleries and analytics help me understand which photos resonate most.", author: "Michael Chen", role: "Professional Photographer", avatar: "/avatars/michael.jpg", initials: "MC", }, { quote: "The custom domain feature is a game-changer for our brand. Our images now load from our own domain, creating a seamless experience for our users and reinforcing our brand identity.", author: "Alex Rivera", role: "Marketing Director", avatar: "/avatars/alex.jpg", initials: "AR", }, ] return (

Trusted by Thousands of Creators

See what our users have to say about their experience with ImageVault.

{testimonials.map((testimonial, index) => (

{testimonial.quote}

{testimonial.initials}

{testimonial.author}

{testimonial.role}

))}

) } [V0_FILE]typescriptreact:file="components/landing/pricing.tsx" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Check } from "lucide-react" export function LandingPricing() { const plans = [ { name: "Free", description: "For individuals and small projects", price: "$0", period: "forever", features: [ "1GB Storage", "10GB Bandwidth per month", "Basic image optimization", "100 uploads per month", "Public images only", "Community support", ], cta: "Get Started", href: "/dashboard", popular: false, }, { name: "Pro", description: "For professionals and growing businesses", price: "$9.99", period: "per month", features: [ "10GB Storage", "100GB Bandwidth per month", "Advanced image optimization", "Unlimited uploads", "Custom domain", "Private images", "Detailed analytics", "Priority support", ], cta: "Upgrade to Pro", href: "/pricing", popular: true, }, { name: "Business", description: "For teams and large organizations", price: "$29.99", period: "per month", features: [ "100GB Storage", "1TB Bandwidth per month", "Premium image optimization", "Unlimited uploads", "Multiple custom domains", "Team management", "Advanced analytics", "API access", "24/7 priority support", ], cta: "Contact Sales", href: "/contact", popular: false, }, ] return (

Simple, Transparent Pricing

Choose the plan that fits your needs. All plans include core features.

{plans.map((plan) => ( {plan.name} {plan.description}

{plan.price} {plan.period}

{feature}

))}

) } [V0_FILE]typescriptreact:file="components/landing/faq.tsx" isMerged="true" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" export function LandingFaq() { const faqs = [ { question: "What file formats are supported?", answer: "ImageVault supports all major image formats including JPEG, PNG, GIF, WebP, AVIF, SVG, and more. You can upload any image format and we'll help you optimize it for the web.", }, { question: "Is there a file size limit?", answer: "Free accounts can upload images up to 10MB per file. Pro and Business accounts can upload images up to 50MB per file. If you need to upload larger files, please contact our support team.", }, { question: "How does image optimization work?", answer: "Our image optimization automatically compresses your images without visible quality loss, converts them to modern formats like WebP when beneficial, and resizes them to fit your needs. You can also manually adjust optimization settings for each image.", }, { question: "Can I use my own domain?", answer: "Yes! Pro and Business plans include custom domain support. You can set up your own domain or subdomain to serve your images, creating a seamless experience for your users and reinforcing your brand.", }, { question: "How do private images work?", answer: "Private images are only accessible to you and people you explicitly share them with. You can generate temporary access links that expire after a set time, or require authentication to view the images.", }, { question: "What analytics are provided?", answer: "Our analytics track views, downloads, and referrers for each image. You can see which images are most popular, where your traffic is coming from, and how your images are being used across the web.", }, { question: "Is there an API available?", answer: "Yes, Business plans include full API access for programmatic uploading, management, and retrieval of your images. Our API is RESTful and well-documented, making it easy to integrate with your existing workflows.", }, { question: "How secure are my images?", answer: "Very secure! We use industry-standard encryption for all data in transit and at rest. Your private images are protected by multiple layers of security, and we regularly audit our systems to ensure your data remains safe.", }, ] return (

Frequently Asked Questions

Find answers to common questions about ImageVault.

{faqs.map((faq, index) => ( {faq.question} {faq.answer} ))}

) } [V0_FILE]typescriptreact:file="components/landing/cta.tsx" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { ArrowRight } from "lucide-react" export function LandingCta() { return (

Ready to Simplify Your Image Hosting?

Join thousands of creators, businesses, and developers who trust ImageVault for their image hosting needs.

) } [V0_FILE]typescriptreact:file="components/landing/footer.tsx" isMerged="true" import Link from "next/link" import { ImageIcon } from "lucide-react" export function LandingFooter() { const currentYear = new Date().getFullYear() const footerLinks = [ { title: "Product", links: [ { href: "/features", label: "Features" }, { href: "/pricing", label: "Pricing" }, { href: "/tools", label: "Tools" }, { href: "/changelog", label: "Changelog" }, ], }, { title: "Resources", links: [ { href: "/docs", label: "Documentation" }, { href: "/api", label: "API Reference" }, { href: "/guides", label: "Guides" }, { href: "/blog", label: "Blog" }, ], }, { title: "Company", links: [ { href: "/about", label: "About" }, { href: "/contact", label: "Contact" }, { href: "/careers", label: "Careers" }, { href: "/press", label: "Press" }, ], }, { title: "Legal", links: [ { href: "/terms", label: "Terms of Service" }, { href: "/privacy", label: "Privacy Policy" }, { href: "/cookies", label: "Cookie Policy" }, { href: "/compliance", label: "Compliance" }, ], }, ] return ( ) } [V0_FILE]typescriptreact:file="components/mode-toggle.tsx" isMerged="true" "use client" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { Moon, Sun } from "lucide-react" export function ModeToggle() { const { setTheme } = useTheme() return ( setTheme("light")}>Light setTheme("dark")}>Dark setTheme("system")}>System ) } [V0_FILE]typescriptreact:file="app/dashboard/upload/page.tsx" isMerged="true" import type { Metadata } from "next" import { auth } from "@clerk/nextjs/server" import { UploadForm } from "@/components/dashboard/upload-form" export const metadata: Metadata = { title: "Upload | ImageVault", description: "Upload new images to your ImageVault account.", } export default async function UploadPage() { const { userId } = auth() if (!userId) { return null } return (

Upload Images

) } [V0_FILE]typescriptreact:file="app/dashboard/analytics/page.tsx" isMerged="true" import type { Metadata } from "next" import { auth } from "@clerk/nextjs/server" import { AnalyticsDashboard } from "@/components/dashboard/analytics-dashboard" export const metadata: Metadata = { title: "Analytics | ImageVault", description: "View detailed analytics for your images. Track views, downloads, and referrers.", } export default async function AnalyticsPage() { const { userId } = auth() if (!userId) { return null } return (

Analytics

) } [V0_FILE]typescriptreact:file="app/dashboard/settings/page.tsx" isMerged="true" import type { Metadata } from "next" import { auth } from "@clerk/nextjs/server" import { SettingsForm } from "@/components/dashboard/settings-form" export const metadata: Metadata = { title: "Settings | ImageVault", description: "Configure your ImageVault account settings and preferences.", } export default async function SettingsPage() { const { userId } = auth() if (!userId) { return null } return (

Settings

) } [V0_FILE]typescriptreact:file="app/tools/resize/page.tsx" isMerged="true" import type { Metadata } from "next" import { ResizeTool } from "@/components/tools/resize-tool" import { LandingNavbar } from "@/components/landing/navbar" import { LandingFooter } from "@/components/landing/footer" export const metadata: Metadata = { title: "Image Resizer | ImageVault Tools", description: "Resize and crop your images to exact dimensions. Free online image resizing tool.", } export default function ResizePage() { return (

) } [V0_FILE]typescriptreact:file="components/tools/resize-tool.tsx" isMerged="true" "use client" import type React from "react" import { useState, useRef, useCallback } from "react" import { useDropzone } from "react-dropzone" import Image from "next/image" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Slider } from "@/components/ui/slider" import { Switch } from "@/components/ui/switch" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Card, CardContent } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Upload, Download, ImageIcon, Crop, Lock, Unlock, RefreshCw } from "lucide-react" import { useToast } from "@/hooks/use-toast" export function ResizeTool() { const { toast } = useToast() const [image, setImage] = useState(null) const [originalDimensions, setOriginalDimensions] = useState({ width: 0, height: 0 }) const [dimensions, setDimensions] = useState({ width: 0, height: 0 }) const [maintainAspectRatio, setMaintainAspectRatio] = useState(true) const [quality, setQuality] = useState(90) const [format, setFormat] = useState("jpeg") const [resizedImage, setResizedImage] = useState(null) const [isResizing, setIsResizing] = useState(false) const canvasRef = useRef(null) const imageRef = useRef(null) const onDrop = useCallback((acceptedFiles: File[]) => { const file = acceptedFiles[0] if (file && file.type.startsWith("image/")) { const reader = new FileReader() reader.onload = () => { const dataUrl = reader.result as string setImage(dataUrl) // Get original dimensions const img = new Image() img.onload = () => { setOriginalDimensions({ width: img.width, height: img.height }) setDimensions({ width: img.width, height: img.height }) imageRef.current = img } img.src = dataUrl } reader.readAsDataURL(file) setResizedImage(null) } }, []) const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop, accept: { "image/*": [".png", ".jpg", ".jpeg", ".gif", ".webp"], }, maxFiles: 1, maxSize: 10 * 1024 * 1024, // 10MB }) const handleWidthChange = (e: React.ChangeEvent) => { const newWidth = Number.parseInt(e.target.value) || 0 if (maintainAspectRatio && originalDimensions.width > 0) { const aspectRatio = originalDimensions.width / originalDimensions.height const newHeight = Math.round(newWidth / aspectRatio) setDimensions({ width: newWidth, height: newHeight }) } else { setDimensions({ ...dimensions, width: newWidth }) } } const handleHeightChange = (e: React.ChangeEvent) => { const newHeight = Number.parseInt(e.target.value) || 0 if (maintainAspectRatio && originalDimensions.height > 0) { const aspectRatio = originalDimensions.width / originalDimensions.height const newWidth = Math.round(newHeight * aspectRatio) setDimensions({ width: newWidth, height: newHeight }) } else { setDimensions({ ...dimensions, height: newHeight }) } } const resetDimensions = () => { setDimensions({ width: originalDimensions.width, height: originalDimensions.height }) } const resizeImage = () => { if (!image || !imageRef.current || !canvasRef.current) return setIsResizing(true) try { const canvas = canvasRef.current const ctx = canvas.getContext("2d") if (!ctx) { throw new Error("Could not get canvas context") } // Set canvas dimensions canvas.width = dimensions.width canvas.height = dimensions.height // Draw image on canvas with new dimensions ctx.drawImage(imageRef.current, 0, 0, dimensions.width, dimensions.height) // Convert to desired format let mimeType = "image/jpeg" const qualityValue = quality / 100 switch (format) { case "png": mimeType = "image/png" break case "webp": mimeType = "image/webp" break default: mimeType = "image/jpeg" } // Get resized image as data URL const resizedDataUrl = canvas.toDataURL(mimeType, qualityValue) setResizedImage(resizedDataUrl) toast({ title: "Image resized successfully", description: `New dimensions: ${dimensions.width}×${dimensions.height}`, }) } catch (error) { console.error("Error resizing image:", error) toast({ title: "Error resizing image", description: "An error occurred while resizing the image. Please try again.", variant: "destructive", }) } finally { setIsResizing(false) } } const downloadResizedImage = () => { if (!resizedImage) return const link = document.createElement("a") link.href = resizedImage link.download = `resized-image.${format}` document.body.appendChild(link) link.click() document.body.removeChild(link) } return (

Image Resizer

Resize and crop your images to exact dimensions. Free online tool, no account required.

{!image ? (

Drop an image here or click to upload

Supports JPG, PNG, GIF, WebP | Max size: 10MB

) : (

Original: {originalDimensions.width} × {originalDimensions.height}

)} {image && (

Resize Settings

Width (px)

Height (px)

{maintainAspectRatio ? ( <> Maintain aspect ratio ) : ( <> Free resize )}

Format Quality

Output Format

Quality: {quality}%

setQuality(value[0])} />

Higher quality means larger file size. JPEG and WebP only.

)}

{resizedImage ? (

Resized Image

New: {dimensions.width} × {dimensions.height} Format: {format.toUpperCase()}

) : (

No Resized Image Yet

Upload an image and adjust settings to see the resized version here.

)} {/* Hidden canvas for image processing */}

) } [V0_FILE]typescriptreact:file="app/tools/convert/page.tsx" isMerged="true" import type { Metadata } from "next" import { ConvertTool } from "@/components/tools/convert-tool" import { LandingNavbar } from "@/components/landing/navbar" import { LandingFooter } from "@/components/landing/footer" export const metadata: Metadata = { title: "Image Converter | ImageVault Tools", description: "Convert images between JPEG, PNG, WebP, and more. Free online image conversion tool.", } export default function ConvertPage() { return (

) } [V0_FILE]typescriptreact:file="components/tools/convert-tool.tsx" isMerged="true" "use client" import { useState, useRef, useCallback } from "react" import { useDropzone } from "react-dropzone" import Image from "next/image" import { Button } from "@/components/ui/button" import { Label } from "@/components/ui/label" import { Slider } from "@/components/ui/slider" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Card, CardContent } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Upload, Download, FileType, Info } from "lucide-react" import { useToast } from "@/hooks/use-toast" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" export function ConvertTool() { const { toast } = useToast() const [image, setImage] = useState(null) const [originalFormat, setOriginalFormat] = useState("") const [targetFormat, setTargetFormat] = useState("webp") const [quality, setQuality] = useState(90) const [convertedImage, setConvertedImage] = useState(null) const [isConverting, setIsConverting] = useState(false) const [fileName, setFileName] = useState("") const canvasRef = useRef(null) const imageRef = useRef(null) const onDrop = useCallback((acceptedFiles: File[]) => { const file = acceptedFiles[0] if (file && file.type.startsWith("image/")) { const reader = new FileReader() reader.onload = () => { const dataUrl = reader.result as string setImage(dataUrl) setFileName(file.name) // Get original format const format = file.type.split("/")[1] setOriginalFormat(format) // Load image for processing const img = new Image() img.onload = () => { imageRef.current = img } img.src = dataUrl } reader.readAsDataURL(file) setConvertedImage(null) } }, []) const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop, accept: { "image/*": [".png", ".jpg", ".jpeg", ".gif", ".webp", ".avif", ".tiff"], }, maxFiles: 1, maxSize: 10 * 1024 * 1024, // 10MB }) const convertImage = () => { if (!image || !imageRef.current || !canvasRef.current) return setIsConverting(true) try { const canvas = canvasRef.current const ctx = canvas.getContext("2d") if (!ctx) { throw new Error("Could not get canvas context") } // Set canvas dimensions canvas.width = imageRef.current.width canvas.height = imageRef.current.height // Draw image on canvas ctx.drawImage(imageRef.current, 0, 0) // Convert to desired format let mimeType = "image/webp" const qualityValue = quality / 100 switch (targetFormat) { case "png": mimeType = "image/png" break case "jpeg": mimeType = "image/jpeg" break case "webp": mimeType = "image/webp" break case "avif": mimeType = "image/avif" break default: mimeType = "image/webp" } // Get converted image as data URL const convertedDataUrl = canvas.toDataURL(mimeType, qualityValue) setConvertedImage(convertedDataUrl) toast({ title: "Image converted successfully", description: `Converted from ${originalFormat.toUpperCase()} to ${targetFormat.toUpperCase()}`, }) } catch (error) { console.error("Error converting image:", error) toast({ title: "Error converting image", description: "An error occurred while converting the image. Please try again.", variant: "destructive", }) } finally { setIsConverting(false) } } const downloadConvertedImage = () => { if (!convertedImage) return const link = document.createElement("a") link.href = convertedImage // Create new filename with new extension const baseName = fileName.substring(0, fileName.lastIndexOf(".")) || fileName link.download = `${baseName}.${targetFormat}` document.body.appendChild(link) link.click() document.body.removeChild(link) } const formatInfo = { webp: "WebP offers superior compression and quality characteristics compared to JPEG and PNG. Best for web use.", jpeg: "JPEG is widely supported and good for photographs. Uses lossy compression.", png: "PNG supports transparency and is lossless. Best for graphics, logos, and images with text.", avif: "AVIF offers better compression than WebP with high quality. Limited browser support.", } return (

Image Converter

Convert your images between different formats. Supports JPEG, PNG, WebP, and more.

{!image ? (

Drop an image here or click to upload

Supports JPG, PNG, GIF, WebP, AVIF | Max size: 10MB

) : (

Original format: {originalFormat.toUpperCase()}

)} {image && (

Conversion Settings

Target Format

Choose the format you want to convert your image to.

{formatInfo[targetFormat as keyof typeof formatInfo]}

Quality Settings

Quality: {quality}%

setQuality(value[0])} disabled={targetFormat === "png"} />

{targetFormat === "png" ? "PNG is a lossless format and does not use quality settings." : "Higher quality means larger file size."}

)}

{convertedImage ? (

Converted Image

New format: {targetFormat.toUpperCase()} Quality: {targetFormat === "png" ? "Lossless" : `${quality}%`}

) : (

No Converted Image Yet

Upload an image and select a target format to convert your image.

)} {/* Hidden canvas for image processing */}

) } [V0_FILE]typescriptreact:file="app/tools/compress/page.tsx" isMerged="true" import type { Metadata } from "next" import { CompressTool } from "@/components/tools/compress-tool" import { LandingNavbar } from "@/components/landing/navbar" import { LandingFooter } from "@/components/landing/footer" export const metadata: Metadata = { title: "Image Compressor | ImageVault Tools", description: "Compress images without losing quality. Reduce file size for faster loading times.", } export default function CompressPage() { return (

) } [V0_FILE]typescriptreact:file="components/tools/compress-tool.tsx" isMerged="true" "use client" import { useState, useRef, useCallback } from "react" import { useDropzone } from "react-dropzone" import Image from "next/image" import { Button } from "@/components/ui/button" import { Label } from "@/components/ui/label" import { Slider } from "@/components/ui/slider" import { Card, CardContent } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Switch } from "@/components/ui/switch" import { Upload, Download, FileArchiveIcon as Compress } from "lucide-react" import { useToast } from "@/hooks/use-toast" export function CompressTool() { const { toast } = useToast() const [image, setImage] = useState(null) const [fileName, setFileName] = useState("") const [originalSize, setOriginalSize] = useState(0) const [compressionLevel, setCompressionLevel] = useState(80) const [convertToWebP, setConvertToWebP] = useState(true) const [compressedImage, setCompressedImage] = useState(null) const [compressedSize, setCompressedSize] = useState(0) const [isCompressing, setIsCompressing] = useState(false) const canvasRef = useRef(null) const imageRef = useRef(null) const onDrop = useCallback((acceptedFiles: File[]) => { const file = acceptedFiles[0] if (file && file.type.startsWith("image/")) { const reader = new FileReader() reader.onload = () => { const dataUrl = reader.result as string setImage(dataUrl) setFileName(file.name) setOriginalSize(file.size) // Load image for processing const img = new Image() img.onload = () => { imageRef.current = img } img.src = dataUrl } reader.readAsDataURL(file) setCompressedImage(null) setCompressedSize(0) } }, []) const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop, accept: { "image/*": [".png", ".jpg", ".jpeg", ".webp"], }, maxFiles: 1, maxSize: 10 * 1024 * 1024, // 10MB }) const compressImage = () => { if (!image || !imageRef.current || !canvasRef.current) return setIsCompressing(true) try { const canvas = canvasRef.current const ctx = canvas.getContext("2d") if (!ctx) { throw new Error("Could not get canvas context") } // Set canvas dimensions canvas.width = imageRef.current.width canvas.height = imageRef.current.height // Draw image on canvas ctx.drawImage(imageRef.current, 0, 0) // Convert to desired format with compression const mimeType = convertToWebP ? "image/webp" : "image/jpeg" const qualityValue = compressionLevel / 100 // Get compressed image as data URL const compressedDataUrl = canvas.toDataURL(mimeType, qualityValue) setCompressedImage(compressedDataUrl) // Calculate compressed size // This is an approximation since data URLs have overhead const base64 = compressedDataUrl.split(",")[1] const approximateSize = Math.ceil((base64.length * 3) / 4) setCompressedSize(approximateSize) toast({ title: "Image compressed successfully", description: `Reduced from ${formatBytes(originalSize)} to ${formatBytes(approximateSize)}`, }) } catch (error) { console.error("Error compressing image:", error) toast({ title: "Error compressing image", description: "An error occurred while compressing the image. Please try again.", variant: "destructive", }) } finally { setIsCompressing(false) } } const downloadCompressedImage = () => { if (!compressedImage) return const link = document.createElement("a") link.href = compressedImage // Create new filename with new extension const baseName = fileName.substring(0, fileName.lastIndexOf(".")) || fileName const extension = convertToWebP ? "webp" : "jpg" link.download = `${baseName}-compressed.${extension}` document.body.appendChild(link) link.click() document.body.removeChild(link) } // Format bytes to human readable format const formatBytes = (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] } // Calculate compression percentage const compressionPercentage = compressedSize > 0 ? Math.round(((originalSize - compressedSize) / originalSize) * 100) : 0 return (

Image Compressor

Compress your images without losing quality. Reduce file size for faster loading times.

{!image ? (

Drop an image here or click to upload

Supports JPG, PNG, WebP | Max size: 10MB

) : (

Original size: {formatBytes(originalSize)}

)} {image && (

Compression Settings

Basic Advanced

Compression Level: {compressionLevel}%

setCompressionLevel(value[0])} />

Lower values = smaller file size, but may reduce quality.

Convert to WebP format

WebP offers better compression than JPEG and PNG with similar quality. Most modern browsers support WebP.

)}

{compressedImage ? (

Compressed Image

Original: {formatBytes(originalSize)} Compressed: {formatBytes(compressedSize)}

{compressionPercentage}% smaller ({formatBytes(originalSize - compressedSize)} saved)

) : (

No Compressed Image Yet

Upload an image and adjust compression settings to see the results here.

)} {/* Hidden canvas for image processing */}

) } [V0_FILE]typescriptreact:file="app/dashboard/folders/page.tsx" isMerged="true" import type { Metadata } from "next" import { auth } from "@clerk/nextjs/server" import { FolderManager } from "@/components/dashboard/folder-manager" import { sql } from "@/lib/db" export const metadata: Metadata = { title: "Folders | ImageVault", description: "Organize your images into folders for easy management.", } export default async function FoldersPage() { const { userId } = auth() if (!userId) { return null } // Get folders and their image counts const folders = await sql` SELECT folder, COUNT(*) as image_count, SUM(size) as total_size, MAX("createdAt") as last_updated FROM "Image" WHERE "userId" = ${userId} AND folder IS NOT NULL GROUP BY folder ORDER BY folder ASC ` return (

Folders

) } [V0_FILE]typescriptreact:file="components/dashboard/folder-manager.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { FolderIcon, FolderOpen, MoreVertical, Plus, Pencil, Trash2, ImageIcon } from "lucide-react" import { useToast } from "@/hooks/use-toast" interface FolderManagerProps { folders: { folder: string image_count: number total_size: number last_updated: string }[] } export function FolderManager({ folders }: FolderManagerProps) { const router = useRouter() const { toast } = useToast() const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false) const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false) const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false) const [newFolderName, setNewFolderName] = useState("") const [selectedFolder, setSelectedFolder] = useState(null) const [newName, setNewName] = useState("") const [isLoading, setIsLoading] = useState(false) // Format bytes to human readable format const formatBytes = (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] } // Format date const formatDate = (dateString: string) => { const date = new Date(dateString) return date.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric", }) } const handleCreateFolder = async () => { if (!newFolderName.trim()) { toast({ title: "Error", description: "Folder name cannot be empty", variant: "destructive", }) return } setIsLoading(true) try { // In a real implementation, you would create the folder in the database // For now, we'll just simulate success await new Promise((resolve) => setTimeout(resolve, 1000)) toast({ title: "Folder created", description: `Folder "${newFolderName}" has been created successfully.`, }) setIsCreateDialogOpen(false) setNewFolderName("") router.refresh() } catch (error) { toast({ title: "Error", description: "Failed to create folder. Please try again.", variant: "destructive", }) } finally { setIsLoading(false) } } const handleRenameFolder = async () => { if (!newName.trim() || !selectedFolder) { toast({ title: "Error", description: "Folder name cannot be empty", variant: "destructive", }) return } setIsLoading(true) try { // In a real implementation, you would rename the folder in the database // For now, we'll just simulate success await new Promise((resolve) => setTimeout(resolve, 1000)) toast({ title: "Folder renamed", description: `Folder has been renamed to "${newName}" successfully.`, }) setIsRenameDialogOpen(false) setSelectedFolder(null) setNewName("") router.refresh() } catch (error) { toast({ title: "Error", description: "Failed to rename folder. Please try again.", variant: "destructive", }) } finally { setIsLoading(false) } } const handleDeleteFolder = async () => { if (!selectedFolder) return setIsLoading(true) try { // In a real implementation, you would delete the folder in the database // For now, we'll just simulate success await new Promise((resolve) => setTimeout(resolve, 1000)) toast({ title: "Folder deleted", description: `Folder has been deleted successfully.`, }) setIsDeleteDialogOpen(false) setSelectedFolder(null) router.refresh() } catch (error) { toast({ title: "Error", description: "Failed to delete folder. Please try again.", variant: "destructive", }) } finally { setIsLoading(false) } } return (

Your Folders

Organize your images into folders for easy management.

{folders.length === 0 ? (

No folders yet

Create your first folder to organize your images

) : (

{folders.map((folder) => (

{folder.folder}

{ setSelectedFolder(folder.folder) setNewName(folder.folder) setIsRenameDialogOpen(true) }} > Rename { setSelectedFolder(folder.folder) setIsDeleteDialogOpen(true) }} className="text-red-600" > Delete

{folder.image_count} {folder.image_count === 1 ? "image" : "images"} •{" "} {formatBytes(folder.total_size)}

Last updated: {formatDate(folder.last_updated)}

))}

)} {/* Create Folder Dialog */} {/* Rename Folder Dialog */} {/* Delete Folder Dialog */}

) } [V0_FILE]typescriptreact:file="app/dashboard/sharing/page.tsx" isMerged="true" import type { Metadata } from "next" import { auth } from "@clerk/nextjs/server" import { SharingManager } from "@/components/dashboard/sharing-manager" export const metadata: Metadata = { title: "Sharing | ImageVault", description: "Manage shared images and create sharing links.", } export default async function SharingPage() { const { userId } = auth() if (!userId) { return null } return (

Sharing

) } [V0_FILE]typescriptreact:file="components/dashboard/sharing-manager.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Calendar } from "@/components/ui/calendar" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { format } from "date-fns" import { CalendarIcon, Copy, Link2, Lock, Globe, Clock, Plus } from "lucide-react" import { useToast } from "@/hooks/use-toast" export function SharingManager() { const { toast } = useToast() const [date, setDate] = useState(undefined) const [isCreatingLink, setIsCreatingLink] = useState(false) // Mock data for shared links const sharedLinks = [ { id: "1", name: "Portfolio Images", url: "https://imagevault.com/s/abc123", created: "2023-10-15T10:30:00Z", expires: "2023-12-15T10:30:00Z", views: 24, isPublic: true, }, { id: "2", name: "Client Project", url: "https://imagevault.com/s/xyz789", created: "2023-10-20T14:45:00Z", expires: null, views: 8, isPublic: false, }, ] const copyToClipboard = (text: string) => { navigator.clipboard.writeText(text) toast({ title: "Copied to clipboard", description: "Link has been copied to clipboard.", }) } const createShareLink = () => { setIsCreatingLink(true) // Simulate API call setTimeout(() => { toast({ title: "Share link created", description: "Your new share link has been created successfully.", }) setIsCreatingLink(false) }, 1500) } return (

Shared Links Create New Link {sharedLinks.length === 0 ? (

No shared links yet

Create your first share link to share your images

) : (

{sharedLinks.map((link) => (

{link.isPublic ? ( ) : ( )} {link.name}

Created on {new Date(link.created).toLocaleDateString()} {link.expires ? ` • Expires on ${new Date(link.expires).toLocaleDateString()}` : " • Never expires"}

{link.views} views

))}

)} Create Share Link Create a new link to share multiple images at once.

Link Name

Expiration Date (Optional)

Privacy Settings

Select Images

Click to select images to include in this share link

) } [V0_FILE]typescriptreact:file="app/not-found.tsx" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { LandingNavbar } from "@/components/landing/navbar" import { LandingFooter } from "@/components/landing/footer" export default function NotFound() { return (

404 - Page Not Found

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

) } [V0_FILE]typescriptreact:file="app/error.tsx" isMerged="true" "use client" import { useEffect } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { LandingNavbar } from "@/components/landing/navbar" import { LandingFooter } from "@/components/landing/footer" export default function Error({ error, reset, }: { error: Error & { digest?: string } reset: () => void }) { useEffect(() => { // Log the error to an error reporting service console.error(error) }, [error]) return (

Something went wrong!

We apologize for the inconvenience. Please try again or contact support if the problem persists.

) } [V0_FILE]typescriptreact:file="app/sitemap.ts" isMerged="true" import type { MetadataRoute } from "next" export default function sitemap(): MetadataRoute.Sitemap { const baseUrl = "https://imagevault.vercel.app" return [ { url: baseUrl, lastModified: new Date(), changeFrequency: "monthly", priority: 1, }, { url: `${baseUrl}/features`, lastModified: new Date(), changeFrequency: "monthly", priority: 0.8, }, { url: `${baseUrl}/pricing`, lastModified: new Date(), changeFrequency: "monthly", priority: 0.8, }, { url: `${baseUrl}/tools`, lastModified: new Date(), changeFrequency: "weekly", priority: 0.8, }, { url: `${baseUrl}/tools/resize`, lastModified: new Date(), changeFrequency: "monthly", priority: 0.7, }, { url: `${baseUrl}/tools/convert`, lastModified: new Date(), changeFrequency: "monthly", priority: 0.7, }, { url: `${baseUrl}/tools/compress`, lastModified: new Date(), changeFrequency: "monthly", priority: 0.7, }, { url: `${baseUrl}/blog`, lastModified: new Date(), changeFrequency: "weekly", priority: 0.6, }, { url: `${baseUrl}/contact`, lastModified: new Date(), changeFrequency: "yearly", priority: 0.5, }, { url: `${baseUrl}/terms`, lastModified: new Date(), changeFrequency: "yearly", priority: 0.3, }, { url: `${baseUrl}/privacy`, lastModified: new Date(), changeFrequency: "yearly", priority: 0.3, }, ] } [V0_FILE]typescriptreact:file="app/robots.ts" isMerged="true" import type { MetadataRoute } from "next" export default function robots(): MetadataRoute.Robots { return { rules: { userAgent: "*", allow: ["/", "/features", "/pricing", "/tools", "/blog", "/contact"], disallow: ["/dashboard", "/api", "/admin"], }, sitemap: "https://imagevault.vercel.app/sitemap.xml", } } [V0_FILE]typescriptreact:file="app/manifest.ts" isMerged="true" import type { MetadataRoute } from "next" export default function manifest(): MetadataRoute.Manifest { return { name: "ImageVault - Fast, Secure Image Hosting", short_name: "ImageVault", description: "Upload, store, and share your images with ImageVault. Fast, secure, and reliable image hosting.", start_url: "/", display: "standalone", background_color: "#ffffff", theme_color: "#0ea5e9", icons: [ { src: "/android-chrome-192x192.png", sizes: "192x192", type: "image/png", }, { src: "/android-chrome-512x512.png", sizes: "512x512", type: "image/png", }, { src: "/maskable-icon.png", sizes: "512x512", type: "image/png", purpose: "maskable", }, ], } } [V0_FILE]plaintext:file="public/favicon.ico" query="minimalist icon of a photo vault or image storage, blue color scheme" isMerged="true" [V0_FILE]plaintext:file="public/android-chrome-192x192.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/android-chrome-192x192-eJtZlQeeuxcevdPygOaqkJugr5sGeU.png" isMerged="true" [V0_FILE]plaintext:file="public/android-chrome-512x512.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/android-chrome-512x512-1CAFlFP2uB9uzzkIgPdlYjAqQooh6z.png" isMerged="true" [V0_FILE]plaintext:file="public/og-image.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/og-image-2araVEoyuBQoQ9RPWwvFdMEjXNvCl2.jpg" isMerged="true" [V0_FILE]plaintext:file="public/dashboard-preview.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/dashboard-preview-wl8yfBzMNTPMIIw7KsoZCiJLTeT4jW.jpg" isMerged="true" [V0_FILE]plaintext:file="public/avatars/sarah.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/avatars/sarah-QQgBc3oKJkoOtwN8h7K8u8sIUIkWVk.jpg" isMerged="true" [V0_FILE]plaintext:file="public/avatars/michael.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/avatars/michael-caHr3cprD0EUpTcLNzBIxRuio3XKeD.jpg" isMerged="true" [V0_FILE]plaintext:file="public/avatars/alex.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/avatars/alex-0gUTOt5u6RdR2Cpf3qTnOYQf95Tjb1.jpg" isMerged="true" [V0_FILE]typescriptreact:file="app/api/webhooks/clerk/route.ts" isMerged="true" import { Webhook } from "svix" import { headers } from "next/headers" import type { WebhookEvent } from "@clerk/nextjs/server" import { sql } from "@/lib/db" export async function POST(req: Request) { // You can find this in the Clerk Dashboard -> Webhooks -> choose the webhook const WEBHOOK_SECRET = process.env.CLERK_WEBHOOK_SECRET if (!WEBHOOK_SECRET) { throw new Error("Please add CLERK_WEBHOOK_SECRET from Clerk Dashboard to .env or .env.local") } // Get the headers const headerPayload = headers() const svix_id = headerPayload.get("svix-id") const svix_timestamp = headerPayload.get("svix-timestamp") const svix_signature = headerPayload.get("svix-signature") // If there are no headers, error out if (!svix_id || !svix_timestamp || !svix_signature) { return new Response("Error occurred -- no svix headers", { status: 400, }) } // Get the body const payload = await req.json() const body = JSON.stringify(payload) // Create a new Svix instance with your secret const wh = new Webhook(WEBHOOK_SECRET) let evt: WebhookEvent // Verify the payload with the headers try { evt = wh.verify(body, { "svix-id": svix_id, "svix-timestamp": svix_timestamp, "svix-signature": svix_signature, }) as WebhookEvent } catch (err) { console.error("Error verifying webhook:", err) return new Response("Error occurred", { status: 400, }) } // Handle the event const eventType = evt.type if (eventType === "user.created" || eventType === "user.updated") { const { id, email_addresses, first_name, last_name, public_metadata } = evt.data const email = email_addresses?.[0]?.email_address const name = [first_name, last_name].filter(Boolean).join(" ") // Extract role from public metadata if available const role = public_metadata?.role || "USER" if (!email) { return new Response("No email found", { status: 400 }) } // Check if user exists const existingUser = await sql` SELECT id FROM "User" WHERE id = ${id} ` if (existingUser.length > 0) { // Update existing user await sql` UPDATE "User" SET email = ${email}, name = ${name || null}, role = ${role}::UserRole, "updatedAt" = NOW() WHERE id = ${id} ` } else { // Create new user await sql` INSERT INTO "User" (id, email, name, role, "createdAt", "updatedAt") VALUES (${id}, ${email}, ${name || null}, ${role}::UserRole, NOW(), NOW()) ` } console.log(`User ${id} ${eventType}`) } else if (eventType === "user.deleted") { const { id } = evt.data // Delete user from database await sql` DELETE FROM "User" WHERE id = ${id} ` console.log(`User ${id} deleted`) } return new Response("", { status: 200 }) } [V0_FILE]typescriptreact:file="components/dashboard/user-management.tsx" isMerged="true" "use client" import { useState } from "react" import { useRouter } from "next/navigation" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { MoreHorizontal, Search, UserPlus } from "lucide-react" import { useToast } from "@/hooks/use-toast" type User = { id: string email: string name: string | null role: string createdAt: string } export function UserManagement({ users: initialUsers }: { users: User[] }) { const router = useRouter() const { toast } = useToast() const [users, setUsers] = useState(initialUsers) const [searchQuery, setSearchQuery] = useState("") const [isEditDialogOpen, setIsEditDialogOpen] = useState(false) const [isInviteDialogOpen, setIsInviteDialogOpen] = useState(false) const [currentUser, setCurrentUser] = useState(null) const [selectedRole, setSelectedRole] = useState("") const [inviteEmail, setInviteEmail] = useState("") const [inviteRole, setInviteRole] = useState("USER") const [isLoading, setIsLoading] = useState(false) const filteredUsers = users.filter( (user) => user.email.toLowerCase().includes(searchQuery.toLowerCase()) || (user.name && user.name.toLowerCase().includes(searchQuery.toLowerCase())), ) const handleEditUser = (user: User) => { setCurrentUser(user) setSelectedRole(user.role) setIsEditDialogOpen(true) } const saveUserRole = async () => { if (!currentUser) return setIsLoading(true) try { const response = await fetch(`/api/users/${currentUser.id}/role`, { method: "PATCH", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ role: selectedRole }), }) if (!response.ok) { throw new Error("Failed to update user role") } // Update local state setUsers(users.map((user) => (user.id === currentUser.id ? { ...user, role: selectedRole } : user))) toast({ title: "Role updated", description: `${currentUser.email}'s role has been updated to ${selectedRole}.`, }) setIsEditDialogOpen(false) } catch (error) { toast({ title: "Error", description: "Failed to update user role. Please try again.", variant: "destructive", }) } finally { setIsLoading(false) } } const inviteUser = async () => { setIsLoading(true) try { const response = await fetch("/api/users/invite", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ email: inviteEmail, role: inviteRole }), }) if (!response.ok) { throw new Error("Failed to invite user") } toast({ title: "Invitation sent", description: `An invitation has been sent to ${inviteEmail}.`, }) setInviteEmail("") setInviteRole("USER") setIsInviteDialogOpen(false) router.refresh() } catch (error) { toast({ title: "Error", description: "Failed to send invitation. Please try again.", variant: "destructive", }) } finally { setIsLoading(false) } } return (

setSearchQuery(e.target.value)} />

Name Email Role Joined {filteredUsers.length === 0 ? ( No users found ) : ( filteredUsers.map((user) => ( {user.name || "—"} {user.email} {user.role} {new Date(user.createdAt).toLocaleDateString()} Actions handleEditUser(user)}>Change role window.open(`/dashboard/admin/users/${user.id}`, "_blank")}> View details )) )}

{/* Edit User Dialog */} {/* Invite User Dialog */}

) } [V0_FILE]typescriptreact:file="app/api/users/invite/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { auth, clerkClient } from "@clerk/nextjs/server" import { getUserRole, UserRole } from "@/middleware/auth" export async function POST(request: NextRequest) { try { const { userId } = auth() if (!userId) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } // Check if user is admin const userRole = await getUserRole(userId) if (userRole !== UserRole.ADMIN) { return NextResponse.json({ error: "You don't have permission to perform this action" }, { status: 403 }) } const { email, role } = await request.json() if (!email) { return NextResponse.json({ error: "Email is required" }, { status: 400 }) } // Validate role const validRoles = ["USER", "EDITOR", "ADMIN"] if (!validRoles.includes(role)) { return NextResponse.json({ error: "Invalid role. Must be USER, EDITOR, or ADMIN" }, { status: 400 }) } // Create invitation const invitation = await clerkClient.invitations.createInvitation({ emailAddress: email, publicMetadata: { role }, redirectUrl: process.env.NEXT_PUBLIC_APP_URL + "/dashboard", }) return NextResponse.json({ success: true, invitation }) } catch (error) { console.error("Error inviting user:", error) return NextResponse.json({ error: "Failed to invite user" }, { status: 500 }) } } [V0_FILE]plaintext:file="prisma/schema.prisma" isMerged="true" // This is your Prisma schema file, // learn more about it in the docs: https://pris.ly/d/prisma-schema generator client { provider = "prisma-client-js" } datasource db { provider = "postgresql" url = env("DATABASE_URL") } enum UserRole { USER EDITOR ADMIN } model User { id String @id email String @unique name String? role UserRole @default(USER) images Image[] teams TeamMember[] createdAt DateTime @default(now()) updatedAt DateTime @updatedAt } model Image { id String @id @default(cuid()) userId String user User @relation(fields: [userId], references: [id], onDelete: Cascade) filename String key String @unique publicUrl String contentType String size Int width Int? height Int? isPublic Boolean @default(true) folder String? views Int @default(0) downloads Int @default(0) expiresAt DateTime? metadata Json? teamId String? team Team? @relation(fields: [teamId], references: [id]) createdAt DateTime @default(now()) updatedAt DateTime @updatedAt @@index([userId]) @@index([folder]) @@index([teamId]) } model Team { id String @id @default(cuid()) name String description String? images Image[] members TeamMember[] createdAt DateTime @default(now()) updatedAt DateTime @updatedAt } model TeamMember { id String @id @default(cuid()) teamId String team Team @relation(fields: [teamId], references: [id], onDelete: Cascade) userId String user User @relation(fields: [userId], references: [id], onDelete: Cascade) role TeamRole @default(MEMBER) createdAt DateTime @default(now()) updatedAt DateTime @updatedAt @@unique([teamId, userId]) @@index([teamId]) @@index([userId]) } enum TeamRole { OWNER ADMIN EDITOR MEMBER VIEWER } model Permission { id String @id @default(cuid()) roleId UserRole resource String action String createdAt DateTime @default(now()) updatedAt DateTime @updatedAt @@unique([roleId, resource, action]) @@index([roleId]) } [V0_FILE]typescriptreact:file="components/dashboard/user-role-badge.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { useAuth } from "@clerk/nextjs" import { Shield, ShieldAlert, ShieldCheck } from "lucide-react" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" export function UserRoleBadge() { const { userId } = useAuth() const [role, setRole] = useState(null) const [isLoading, setIsLoading] = useState(true) useEffect(() => { const fetchUserRole = async () => { if (!userId) return try { const response = await fetch(`/api/users/${userId}/role`) if (response.ok) { const data = await response.json() setRole(data.role) } } catch (error) { console.error("Error fetching user role:", error) } finally { setIsLoading(false) } } fetchUserRole() }, [userId]) if (isLoading || !role) { return null } const getRoleIcon = () => { switch (role) { case "ADMIN": return case "EDITOR": return default: return } } const getRoleDescription = () => { switch (role) { case "ADMIN": return "Administrator with full access to all features" case "EDITOR": return "Editor with enhanced permissions for content management" default: return "Standard user with basic permissions" } } return (

{getRoleIcon()} {role}

{getRoleDescription()}

) } [V0_FILE]typescriptreact:file="components/dashboard/header.tsx" isMerged="true" "use client" import Link from "next/link" import { UserButton } from "@clerk/nextjs" import { MobileNav } from "@/components/dashboard/mobile-nav" import { ModeToggle } from "@/components/mode-toggle" import { UserRoleBadge } from "@/components/dashboard/user-role-badge" export function DashboardHeader() { return (

ImageVault

) } [V0_FILE]typescriptreact:file="components/dashboard/permissions-manager.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Checkbox } from "@/components/ui/checkbox" import { Button } from "@/components/ui/button" import { useToast } from "@/hooks/use-toast" import { UserRole } from "@/lib/user-roles" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Badge } from "@/components/ui/badge" import { AlertCircle, Info } from "lucide-react" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" type Permission = { id: string roleId: string resource: string action: string createdAt: string updatedAt: string } type PermissionMatrix = { [resource: string]: { [action: string]: { [role: string]: boolean } } } // Define resources and their actions const resourceConfig = { images: { label: "Images", description: "Control access to image uploads, viewing, and management", actions: [ { id: "create", label: "Upload" }, { id: "read", label: "View" }, { id: "update", label: "Edit" }, { id: "delete", label: "Delete" }, { id: "share", label: "Share" }, ], }, folders: { label: "Folders", description: "Control access to folder creation and management", actions: [ { id: "create", label: "Create" }, { id: "read", label: "View" }, { id: "update", label: "Edit" }, { id: "delete", label: "Delete" }, ], }, teams: { label: "Teams", description: "Control access to team creation and management", actions: [ { id: "create", label: "Create" }, { id: "read", label: "View" }, { id: "update", label: "Edit" }, { id: "delete", label: "Delete" }, { id: "invite", label: "Invite Members" }, { id: "manage", label: "Manage Members" }, ], }, users: { label: "Users", description: "Control access to user management", actions: [ { id: "read", label: "View" }, { id: "update", label: "Edit" }, { id: "delete", label: "Delete" }, { id: "invite", label: "Invite" }, { id: "manage", label: "Manage Roles" }, ], }, settings: { label: "Settings", description: "Control access to application settings", actions: [ { id: "read", label: "View" }, { id: "update", label: "Edit" }, ], }, analytics: { label: "Analytics", description: "Control access to analytics and reporting", actions: [ { id: "read", label: "View" }, { id: "export", label: "Export" }, ], }, billing: { label: "Billing", description: "Control access to billing and subscription management", actions: [ { id: "read", label: "View" }, { id: "update", label: "Manage" }, ], }, } const roleLabels: Record = { [UserRole.ADMIN]: { label: "Admin", description: "Full access to all features and settings", color: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300", }, [UserRole.EDITOR]: { label: "Editor", description: "Can create and edit content, but cannot manage users or settings", color: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300", }, [UserRole.USER]: { label: "User", description: "Basic access to create and manage their own content", color: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300", }, } export function PermissionsManager({ initialPermissions, }: { initialPermissions: Permission[] }) { const { toast } = useToast() const [isLoading, setIsLoading] = useState(false) const [activeTab, setActiveTab] = useState("images") // Convert flat permissions to matrix const buildPermissionMatrix = (permissions: Permission[]): PermissionMatrix => { const matrix: PermissionMatrix = {} // Initialize matrix with all false Object.keys(resourceConfig).forEach((resource) => { matrix[resource] = {} resourceConfig[resource as keyof typeof resourceConfig].actions.forEach((action) => { matrix[resource][action.id] = {} Object.values(UserRole).forEach((role) => { matrix[resource][action.id][role] = false }) }) }) // Fill in permissions permissions.forEach((permission) => { if ( matrix[permission.resource] && matrix[permission.resource][permission.action] && Object.values(UserRole).includes(permission.roleId as UserRole) ) { matrix[permission.resource][permission.action][permission.roleId] = true } }) return matrix } const [permissionMatrix, setPermissionMatrix] = useState(buildPermissionMatrix(initialPermissions)) const handlePermissionChange = (resource: string, action: string, role: UserRole, checked: boolean) => { setPermissionMatrix((prev) => { const updated = { ...prev } if (!updated[resource]) updated[resource] = {} if (!updated[resource][action]) updated[resource][action] = {} updated[resource][action][role] = checked return updated }) } const savePermissions = async () => { setIsLoading(true) try { // Convert matrix back to flat permissions const permissions: { roleId: string; resource: string; action: string }[] = [] Object.entries(permissionMatrix).forEach(([resource, actions]) => { Object.entries(actions).forEach(([action, roles]) => { Object.entries(roles).forEach(([role, enabled]) => { if (enabled) { permissions.push({ roleId: role, resource, action, }) } }) }) }) const response = await fetch("/api/permissions", { method: "PUT", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ permissions }), }) if (!response.ok) { throw new Error("Failed to update permissions") } toast({ title: "Permissions updated", description: "The role-based permissions have been updated successfully.", }) } catch (error) { toast({ title: "Error", description: "Failed to update permissions. Please try again.", variant: "destructive", }) } finally { setIsLoading(false) } } return (

Important Changes to permissions will affect all users with the corresponding roles immediately. Admin users always have full permissions regardless of these settings. Role-Based Permissions Configure what each role can do in your organization. {Object.entries(resourceConfig).map(([key, { label }]) => ( {label} ))} {Object.entries(resourceConfig).map(([resource, config]) => (

{config.description}

Action {Object.values(UserRole).map((role) => (

{roleLabels[role].label} {role}

))} {config.actions.map((action) => (

{action.label} {action.id}

{Object.values(UserRole).map((role) => (

handlePermissionChange(resource, action.id, role, checked === true) } disabled={ // Admin role always has all permissions role === UserRole.ADMIN || // Certain permissions are always enabled/disabled (role === UserRole.USER && resource === "users" && action.id === "manage") } aria-label={`${action.label} permission for ${role} role`} />

))} ))}

))}

) } [V0_FILE]typescriptreact:file="app/api/permissions/route.ts" isQuickEdit="true" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { auth } from "@clerk/nextjs/server" import { sql } from "@/lib/db" import { getUserRole } from "@/lib/auth-utils" import { UserRole } from "@/lib/user-roles" export async function PUT(request: NextRequest) { try { const { userId } = auth() if (!userId) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } // Check if user is admin const userRole = await getUserRole(userId) if (userRole !== UserRole.ADMIN) { return NextResponse.json({ error: "You don't have permission to perform this action" }, { status: 403 }) } const { permissions } = await request.json() if (!Array.isArray(permissions)) { return NextResponse.json({ error: "Invalid permissions format" }, { status: 400 }) } // Validate permissions const validRoles = Object.values(UserRole) const validResources = ["images", "folders", "teams", "users", "settings", "analytics", "billing"] const validActions = ["create", "read", "update", "delete", "manage", "share", "invite", "export"] for (const permission of permissions) { if ( !validRoles.includes(permission.roleId as UserRole) || !validResources.includes(permission.resource) || !validActions.includes(permission.action) ) { return NextResponse.json({ error: "Invalid permission values" }, { status: 400 }) } } // Transaction to update permissions await sql.begin(async (sql) => { // Delete all existing permissions await sql`DELETE FROM "Permission"` // Insert new permissions if (permissions.length > 0) { const values = permissions.map((p) => ({ roleId: p.roleId, resource: p.resource, action: p.action, })) await sql` INSERT INTO "Permission" ("roleId", resource, action, "createdAt", "updatedAt") SELECT v."roleId"::UserRole, v.resource, v.action, NOW(), NOW() FROM jsonb_to_recordset(${JSON.stringify(values)}) AS v("roleId" text, resource text, action text) ` } }) return NextResponse.json({ success: true }) } catch (error) { console.error("Error updating permissions:", error) return NextResponse.json({ error: "Failed to update permissions" }, { status: 500 }) } } export async function GET(request: NextRequest) { try { const { userId } = auth() if (!userId) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } // Get all permissions const permissions = await sql` SELECT * FROM "Permission" ORDER BY "roleId", resource, action ` return NextResponse.json({ permissions }) } catch (error) { console.error("Error fetching permissions:", error) return NextResponse.json({ error: "Failed to fetch permissions" }, { status: 500 }) } } [V0_FILE]typescript:file="scripts/seed-permissions.ts" isMerged="true" import { PrismaClient, UserRole } from "@prisma/client" const prisma = new PrismaClient() // Define the resources and actions for permissions const resources = ["images", "folders", "analytics", "settings", "tools", "users", "permissions"] const actions = ["create", "read", "update", "delete", "manage"] // Define default permissions for each role const rolePermissions = { [UserRole.ADMIN]: resources.flatMap((resource) => actions.map((action) => ({ resource, action }))), [UserRole.USER]: [ { resource: "images", action: "create" }, { resource: "images", action: "read" }, { resource: "images", action: "update" }, { resource: "images", action: "delete" }, { resource: "folders", action: "create" }, { resource: "folders", action: "read" }, { resource: "folders", action: "update" }, { resource: "folders", action: "delete" }, { resource: "analytics", action: "read" }, { resource: "settings", action: "read" }, { resource: "settings", action: "update" }, { resource: "tools", action: "read" }, ], [UserRole.GUEST]: [ { resource: "images", action: "read" }, { resource: "folders", action: "read" }, { resource: "tools", action: "read" }, ], } export async function seedPermissions() { console.log("Starting permission seeding...") // Clear existing permissions await prisma.permission.deleteMany({}) console.log("Cleared existing permissions") // Create permissions for each role for (const [role, permissions] of Object.entries(rolePermissions)) { for (const { resource, action } of permissions) { await prisma.permission.create({ data: { roleId: role, resource, action, }, }) } console.log(`Created permissions for role: ${role}`) } const count = await prisma.permission.count() console.log(`Seeded ${count} permissions successfully`) return { count } } // Only run if called directly (not imported) if (require.main === module) { seedPermissions() .then(async () => { await prisma.$disconnect() }) .catch(async (e) => { console.error(e) await prisma.$disconnect() process.exit(1) }) } [V0_FILE]typescript:file="scripts/reset-db.ts" isMerged="true" import { PrismaClient } from "@prisma/client" import { seedAll } from "./seed-all" const prisma = new PrismaClient() async function resetDatabase() { console.log("🗑️ Resetting database...") try { // Delete all data from tables in reverse order of dependencies console.log("Deleting existing data...") // Add tables in the correct order based on foreign key constraints await prisma.permission.deleteMany({}) // Add other tables as needed // await prisma.imageAnalytics.deleteMany({}); // await prisma.image.deleteMany({}); // await prisma.folder.deleteMany({}); // await prisma.user.deleteMany({}); console.log("✅ Database reset completed") // Seed the database with fresh data console.log("🌱 Seeding fresh data...") await seedAll() console.log("✅ Database reset and seed completed successfully!") } catch (error) { console.error("❌ Error resetting database:", error) process.exit(1) } finally { await prisma.$disconnect() } } // Only run if called directly if (require.main === module) { resetDatabase().catch((e) => { console.error(e) process.exit(1) }) } [V0_FILE]typescript:file="scripts/seed-demo-content.ts" isMerged="true" import { PrismaClient } from "@prisma/client" import { UserRole } from "../lib/user-roles" import { randomUUID } from "crypto" const prisma = new PrismaClient() // Sample image formats const imageFormats = ["jpg", "png", "gif", "webp", "svg"] // Sample folder names const folderNames = [ "Vacation Photos", "Work Screenshots", "Profile Pictures", "Product Images", "Social Media", "Website Assets", "Designs", "Mockups", ] // Sample image names const imageNamePrefixes = [ "sunset", "profile", "screenshot", "product", "banner", "logo", "icon", "background", "photo", "image", ] // Sample image descriptions const imageDescriptions = [ "A beautiful sunset over the mountains", "Professional headshot for LinkedIn", "Screenshot of the new dashboard design", "Product image for the online store", "Banner image for the website header", "Company logo in high resolution", "Icon set for the mobile app", "Background image for the landing page", "Photo from the company retreat", "Image for the blog post", ] // Generate a random date within the last 90 days function randomRecentDate() { const now = new Date() const daysAgo = Math.floor(Math.random() * 90) now.setDate(now.getDate() - daysAgo) return now } // Generate random analytics data function generateAnalytics() { return { views: Math.floor(Math.random() * 1000), downloads: Math.floor(Math.random() * 100), shares: Math.floor(Math.random() * 50), } } // Generate a random image URL (placeholder) function generateImageUrl(format: string) { const width = 800 const height = 600 return `/placeholder.svg?height=${height}&width=${width}&query=sample+${format}+image` } // Generate a random file size between 100KB and 10MB function generateFileSize() { return Math.floor(Math.random() * 10000000) + 100000 } // Generate a random image name function generateImageName(format: string) { const prefix = imageNamePrefixes[Math.floor(Math.random() * imageNamePrefixes.length)] const randomNum = Math.floor(Math.random() * 1000) return `${prefix}-${randomNum}.${format}` } // Generate a random image description function generateImageDescription() { return imageDescriptions[Math.floor(Math.random() * imageDescriptions.length)] } // Seed demo users async function seedDemoUsers() { console.log("🧑‍💼 Seeding demo users...") // Create demo users with different roles const demoUsers = [ { id: randomUUID(), email: "admin@example.com", name: "Admin User", role: UserRole.ADMIN, clerkId: `demo_admin_${randomUUID()}`, }, { id: randomUUID(), email: "manager@example.com", name: "Manager User", role: UserRole.MANAGER, clerkId: `demo_manager_${randomUUID()}`, }, { id: randomUUID(), email: "user@example.com", name: "Regular User", role: UserRole.USER, clerkId: `demo_user_${randomUUID()}`, }, ] // Create users in the database for (const user of demoUsers) { await prisma.user.upsert({ where: { email: user.email }, update: user, create: user, }) } return demoUsers } // Seed demo folders async function seedDemoFolders(users: any[]) { console.log("📁 Seeding demo folders...") const folders = [] // Create 2-3 folders for each user for (const user of users) { const numFolders = Math.floor(Math.random() * 2) + 2 // 2-3 folders for (let i = 0; i < numFolders; i++) { const folderName = folderNames[Math.floor(Math.random() * folderNames.length)] const folder = await prisma.folder.create({ data: { name: `${folderName} ${i + 1}`, userId: user.id, createdAt: randomRecentDate(), updatedAt: new Date(), }, }) folders.push(folder) } } return folders } // Seed demo images async function seedDemoImages(users: any[], folders: any[]) { console.log("🖼️ Seeding demo images...") // Create 5-10 images for each user for (const user of users) { const numImages = Math.floor(Math.random() * 6) + 5 // 5-10 images for (let i = 0; i < numImages; i++) { // Randomly assign to a folder or leave without folder const userFolders = folders.filter((folder) => folder.userId === user.id) const folderId = Math.random() > 0.3 && userFolders.length > 0 ? userFolders[Math.floor(Math.random() * userFolders.length)].id : null // Pick a random format const format = imageFormats[Math.floor(Math.random() * imageFormats.length)] // Create the image const image = await prisma.image.create({ data: { name: generateImageName(format), description: generateImageDescription(), url: generateImageUrl(format), thumbnailUrl: generateImageUrl(format), format, size: generateFileSize(), width: 800, height: 600, userId: user.id, folderId, isPublic: Math.random() > 0.7, // 30% chance of being public createdAt: randomRecentDate(), updatedAt: new Date(), }, }) // Create analytics for the image const { views, downloads, shares } = generateAnalytics() await prisma.imageAnalytics.create({ data: { imageId: image.id, views, downloads, shares, lastViewed: randomRecentDate(), }, }) // Create some image shares (for non-public images) if (!image.isPublic && Math.random() > 0.5) { // Find another random user to share with const otherUsers = users.filter((u) => u.id !== user.id) if (otherUsers.length > 0) { const sharedWithUser = otherUsers[Math.floor(Math.random() * otherUsers.length)] await prisma.imageShare.create({ data: { imageId: image.id, userId: user.id, sharedWithEmail: sharedWithUser.email, sharedWithUserId: sharedWithUser.id, createdAt: randomRecentDate(), expiresAt: Math.random() > 0.5 ? new Date(Date.now() + 7 * 24 * 60 * 60 * 1000) // 7 days from now : null, // No expiration }, }) } } } } } // Main seeding function export async function seedDemoContent() { console.log("🎭 Starting demo content seeding...") try { // Seed in sequence to maintain referential integrity const users = await seedDemoUsers() const folders = await seedDemoFolders(users) await seedDemoImages(users, folders) console.log("✅ Demo content seeded successfully!") } catch (error) { console.error("❌ Error seeding demo content:", error) throw error } } // Only run if called directly (not imported) if (require.main === module) { seedDemoContent() .catch((e) => { console.error(e) process.exit(1) }) .finally(async () => { await prisma.$disconnect() }) } [V0_FILE]typescript:file="scripts/seed-all.ts" isMerged="true" import { PrismaClient } from "@prisma/client" import { seedPermissions } from "./seed-permissions" import { seedDemoContent } from "./seed-demo-content" const prisma = new PrismaClient() async function seedAll() { console.log("🌱 Starting database seeding...") try { // Seed permissions console.log("🔐 Seeding permissions...") await seedPermissions() // Seed demo content if in development environment if (process.env.NODE_ENV !== "production") { console.log("🎭 Seeding demo content...") await seedDemoContent() } // Add other seeding functions here as your application grows console.log("✅ Database seeding completed successfully!") } catch (error) { console.error("❌ Error seeding database:", error) process.exit(1) } finally { await prisma.$disconnect() } } // Only run if called directly (not imported) if (require.main === module) { seedAll().catch((e) => { console.error(e) process.exit(1) }) } export { seedAll } [V0_FILE]typescriptreact:file="components/dashboard/mobile-nav.tsx" isMerged="true" "use client" import Link from "next/link" import { usePathname } from "next/navigation" import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger, SheetClose } from "@/components/ui/sheet" import { Menu, ImageIcon } from "lucide-react" import { ModeToggle } from "@/components/mode-toggle" import { Button } from "@/components/ui/button" import { UserButton, useAuth } from "@clerk/nextjs" import { dashboardNavItems, adminNavItems } from "@/components/dashboard/nav" import { useEffect, useState } from "react" import { UserRole } from "@/lib/user-roles" export function MobileNav() { const pathname = usePathname() const { userId } = useAuth() const [userRole, setUserRole] = useState(null) const [isLoading, setIsLoading] = useState(true) useEffect(() => { const fetchUserRole = async () => { if (!userId) return try { const response = await fetch(`/api/users/me/role`) if (response.ok) { const data = await response.json() setUserRole(data.role) } } catch (error) { console.error("Error fetching user role:", error) } finally { setIsLoading(false) } } fetchUserRole() }, [userId]) const isAdmin = userRole === UserRole.ADMIN return (

ImageVault

{dashboardNavItems.map((item) => ( {item.label} ))} {isAdmin && !isLoading && ( <>

Admin

{adminNavItems.map((item) => ( {item.label} ))} )}

) } [V0_FILE]dockerfile:file="Dockerfile" isMerged="true" # Use Node.js LTS FROM node:18-alpine AS base # Install dependencies only when needed FROM base AS deps WORKDIR /app # Install dependencies based on the preferred package manager COPY package.json package-lock.json* ./ RUN npm ci # Rebuild the source code only when needed FROM base AS builder WORKDIR /app COPY --from=deps /app/node_modules ./node_modules COPY . . # Generate Prisma client RUN npx prisma generate # Build the Next.js application RUN npm run build # Production image, copy all the files and run next FROM base AS runner WORKDIR /app ENV NODE_ENV production # Create a non-root user RUN addgroup --system --gid 1001 nodejs RUN adduser --system --uid 1001 nextjs # Copy necessary files COPY --from=builder /app/public ./public COPY --from=builder /app/prisma ./prisma # Set the correct permission for prerender cache RUN mkdir .next RUN chown nextjs:nodejs .next # Automatically leverage output traces to reduce image size COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./ COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static USER nextjs EXPOSE 3000 ENV PORT 3000 ENV HOSTNAME "0.0.0.0" # Start the application CMD ["node", "server.js"] [V0_FILE]yaml:file="docker-compose.yml" isMerged="true" version: '3.8' services: app: build: context: . dockerfile: Dockerfile restart: always ports: - "3000:3000" environment: - NODE_ENV=production - DATABASE_URL=${DATABASE_URL} - NEXT_PUBLIC_APP_URL=${NEXT_PUBLIC_APP_URL} - CLERK_SECRET_KEY=${CLERK_SECRET_KEY} - CLERK_WEBHOOK_SECRET=${CLERK_WEBHOOK_SECRET} - CLOUDFLARE_R2_ACCESS_KEY_ID=${CLOUDFLARE_R2_ACCESS_KEY_ID} - CLOUDFLARE_R2_SECRET_ACCESS_KEY=${CLOUDFLARE_R2_SECRET_ACCESS_KEY} - CLOUDFLARE_R2_BUCKET_NAME=${CLOUDFLARE_R2_BUCKET_NAME} - CLOUDFLARE_R2_ENDPOINT=${CLOUDFLARE_R2_ENDPOINT} - CLOUDFLARE_PUBLIC_URL=${CLOUDFLARE_PUBLIC_URL} depends_on: - db networks: - app-network db: image: postgres:15-alpine restart: always environment: - POSTGRES_USER=${POSTGRES_USER} - POSTGRES_PASSWORD=${POSTGRES_PASSWORD} - POSTGRES_DB=${POSTGRES_DB} volumes: - postgres-data:/var/lib/postgresql/data networks: - app-network networks: app-network: driver: bridge volumes: postgres-data: [V0_FILE]plaintext:file=".env.example" isMerged="true" # App NODE_ENV=production NEXT_PUBLIC_APP_URL=https://your-domain.com # Authentication CLERK_SECRET_KEY=your_clerk_secret_key CLERK_WEBHOOK_SECRET=your_clerk_webhook_secret NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key # Database DATABASE_URL=postgresql://user:password@localhost:5432/imagevault POSTGRES_USER=postgres POSTGRES_PASSWORD=postgres POSTGRES_DB=imagevault # Storage CLOUDFLARE_R2_ACCESS_KEY_ID=your_cloudflare_r2_access_key_id CLOUDFLARE_R2_SECRET_ACCESS_KEY=your_cloudflare_r2_secret_access_key CLOUDFLARE_R2_BUCKET_NAME=your_cloudflare_r2_bucket_name CLOUDFLARE_R2_ENDPOINT=https://xxxxxxxxxxxxxxxx.r2.cloudflarestorage.com CLOUDFLARE_PUBLIC_URL=https://pub-xxxxxxxxxxxxxxxx.r2.dev [V0_FILE]plaintext:file=".gitignore" isMerged="true" # dependencies /node_modules /.pnp .pnp.js # testing /coverage # next.js /.next/ /out/ # production /build # misc .DS_Store *.pem # debug npm-debug.log* yarn-debug.log* yarn-error.log* # local env files .env .env.local .env.development.local .env.test.local .env.production.local # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts # prisma /prisma/migrations/ # uploads /uploads # logs /logs *.log [V0_FILE]typescriptreact:file="components/image-compressor.tsx" isMerged="true" "use client" import { useState, useCallback } from "react" import { useDropzone } from "react-dropzone" import { X, ImageIcon, FileDown } from "lucide-react" import { Button } from "@/components/ui/button" import { Slider } from "@/components/ui/slider" import { Progress } from "@/components/ui/progress" import imageCompression from "browser-image-compression" import { formatBytes } from "@/lib/utils" export function ImageCompressor() { const [files, setFiles] = useState([]) const [quality, setQuality] = useState(80) const [compressing, setCompressing] = useState(false) const [progress, setProgress] = useState(0) const [compressedFiles, setCompressedFiles] = useState< { name: string; url: string; originalSize: number; compressedSize: number }[] >([]) const onDrop = useCallback((acceptedFiles: File[]) => { const imageFiles = acceptedFiles.filter((file) => file.type.startsWith("image/")) setFiles((prev) => [...prev, ...imageFiles]) }, []) const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop, accept: { "image/*": [".png", ".jpg", ".jpeg", ".webp"], }, maxFiles: 10, maxSize: 10 * 1024 * 1024, // 10MB }) const removeFile = (index: number) => { setFiles(files.filter((_, i) => i !== index)) } const compressFiles = async () => { if (files.length === 0) return setCompressing(true) setProgress(0) const compressed: { name: string; url: string; originalSize: number; compressedSize: number }[] = [] try { // Process each file sequentially for (let i = 0; i < files.length; i++) { const file = files[i] const originalSize = file.size // Configure compression options const options = { maxSizeMB: 1, maxWidthOrHeight: 1920, useWebWorker: true, initialQuality: quality / 100, onProgress: (progress: number) => { // Calculate overall progress const fileProgress = progress / 100 const overallProgress = ((i + fileProgress) / files.length) * 100 setProgress(overallProgress) }, } // Compress the image const compressedFile = await imageCompression(file, options) const compressedSize = compressedFile.size // Create a URL for the compressed file const url = URL.createObjectURL(compressedFile) compressed.push({ name: file.name, url, originalSize, compressedSize, }) } setCompressedFiles(compressed) setProgress(100) } catch (error) { console.error("Compression failed:", error) alert("Failed to compress one or more images") } finally { setCompressing(false) } } return (

Drop image files here or click to select

Supported formats: JPG, PNG, WebP

{files.length > 0 && (

{files.map((file, index) => (

{file.name}

{formatBytes(file.size)}

))}

Quality: {quality}% Lower quality = smaller file size

setQuality(value[0])} />

{compressing && }

)} {compressedFiles.length > 0 && (

Compressed Images

{compressedFiles.map((file, index) => (

{file.name}

{formatBytes(file.originalSize)} → {formatBytes(file.compressedSize)} ( {Math.round((1 - file.compressedSize / file.originalSize) * 100)}% saved)

))}

)}

) } [V0_FILE]javascript:file="next.config.js" isFixed="true" isQuickEdit="true" isMerged="true" /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, swcMinify: true, images: { domains: ["pub-57c60c5a6d8c4960b0c6adf7fde360cd.r2.dev", "localhost"], formats: ["image/avif", "image/webp"], unoptimized: true, }, experimental: { serverComponentsExternalPackages: ["sharp"], }, eslint: { ignoreDuringBuilds: true, }, typescript: { ignoreBuildErrors: true, }, } module.exports = nextConfig [V0_FILE]typescript:file="middleware/auth.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { UserRole } from "@/lib/user-roles" export { UserRole } export async function getUserRole(userId: string): Promise { try { // This is a client-safe version that uses the API instead of direct DB access const response = await fetch(`/api/users/${userId}/role`) if (!response.ok) { console.error("Error fetching user role:", response.statusText) return UserRole.USER } const data = await response.json() return data.role as UserRole } catch (error) { console.error("Error fetching user role:", error) return UserRole.USER } } export function redirectToLogin(request: NextRequest) { const url = new URL("/sign-in", request.url) url.searchParams.set("redirect_url", request.nextUrl.pathname) return NextResponse.redirect(url) } export function unauthorizedResponse() { return NextResponse.json({ error: "You don't have permission to access this resource" }, { status: 403 }) } [V0_FILE]typescript:file="lib/env.ts" isMerged="true" // Environment variables configuration export const env = { // App NODE_ENV: process.env.NODE_ENV || "development", APP_URL: process.env.NEXT_PUBLIC_APP_URL || "http://localhost:3000", // Authentication CLERK_SECRET_KEY: process.env.CLERK_SECRET_KEY, CLERK_WEBHOOK_SECRET: process.env.CLERK_WEBHOOK_SECRET, // Database DATABASE_URL: process.env.DATABASE_URL, // Storage CLOUDFLARE_R2_ACCESS_KEY_ID: process.env.CLOUDFLARE_R2_ACCESS_KEY_ID || "", CLOUDFLARE_R2_SECRET_ACCESS_KEY: process.env.CLOUDFLARE_R2_SECRET_ACCESS_KEY || "", CLOUDFLARE_R2_BUCKET_NAME: process.env.CLOUDFLARE_R2_BUCKET_NAME || "", CLOUDFLARE_R2_ENDPOINT: process.env.CLOUDFLARE_R2_ENDPOINT || "", CLOUDFLARE_PUBLIC_URL: "https://pub-57c60c5a6d8c4960b0c6adf7fde360cd.r2.dev", } // Validate required environment variables in production if (env.NODE_ENV === "production") { const requiredEnvVars = [ "NEXT_PUBLIC_APP_URL", "CLERK_SECRET_KEY", "CLERK_WEBHOOK_SECRET", "DATABASE_URL", "CLOUDFLARE_R2_ACCESS_KEY_ID", "CLOUDFLARE_R2_SECRET_ACCESS_KEY", "CLOUDFLARE_R2_BUCKET_NAME", "CLOUDFLARE_R2_ENDPOINT", ] for (const envVar of requiredEnvVars) { if (!process.env[envVar]) { throw new Error(`Environment variable ${envVar} is required in production`) } } } [V0_FILE]typescriptreact:file="package.json" isQuickEdit="true" isMerged="true" { "name": "image-hosting", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint", "test": "jest", "prisma:generate": "prisma generate", "prisma:migrate:dev": "prisma migrate dev", "prisma:migrate:prod": "prisma migrate deploy", "db:seed": "ts-node scripts/seed-all.ts", "db:optimize": "ts-node scripts/optimize-db.js", "deploy": "bash scripts/deploy.sh" }, "dependencies": { "@aws-sdk/client-s3": "^3.427.0", "@aws-sdk/s3-request-presigner": "^3.427.0", "@clerk/nextjs": "^4.23.5", "@neondatabase/serverless": "^0.6.0", "@radix-ui/react-avatar": "^1.0.3", "@radix-ui/react-checkbox": "^1.0.4", "@radix-ui/react-collapsible": "^1.0.3", "@radix-ui/react-dialog": "^1.0.4", "@radix-ui/react-dropdown-menu": "^2.0.5", "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-select": "^1.2.2", "@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-switch": "^1.0.3", "@radix-ui/react-tabs": "^1.0.4", "@radix-ui/react-toast": "^1.1.4", "browser-image-compression": "^2.0.2", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", "date-fns": "^2.30.0", "exifr": "^7.1.3", "lucide-react": "^0.279.0", "next": "latest", "next-themes": "^0.2.1", "react": "latest", "react-dom": "latest", "sharp": "^0.32.6", "sonner": "^1.0.3", "tailwind-merge": "^1.14.0", "tailwindcss-animate": "^1.0.7", "ws": "^8.14.2" }, "devDependencies": { "@types/node": "latest", "@types/react": "latest", "@types/react-dom": "latest", "@types/ws": "^8.5.6", "autoprefixer": "latest", "eslint": "latest", "eslint-config-next": "latest", "postcss": "latest", "tailwindcss": "latest", "typescript": "latest" } } [V0_FILE]typescriptreact:file="components/dashboard/metadata-filter.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Camera, Calendar, MapPin, Filter, X } from "lucide-react" import { useRouter, useSearchParams } from "next/navigation" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Separator } from "@/components/ui/separator" import { Badge } from "@/components/ui/badge" // Common EXIF metadata fields for filtering const METADATA_FIELDS = [ { id: "make", label: "Camera Make", icon: Camera }, { id: "model", label: "Camera Model", icon: Camera }, { id: "dateTaken", label: "Date Taken", icon: Calendar, type: "date" }, { id: "location", label: "Location", icon: MapPin }, { id: "iso", label: "ISO", icon: Filter }, { id: "focalLength", label: "Focal Length", icon: Filter }, { id: "aperture", label: "Aperture", icon: Filter }, { id: "exposureTime", label: "Exposure Time", icon: Filter }, ] interface MetadataFilterProps { onFilterChange: (filters: Record) => void availableFilters?: { makes?: string[] models?: string[] locations?: string[] } } export function MetadataFilter({ onFilterChange, availableFilters }: MetadataFilterProps) { const router = useRouter() const searchParams = useSearchParams() const [activeFilters, setActiveFilters] = useState>({}) const [isOpen, setIsOpen] = useState(false) // Initialize filters from URL on component mount useEffect(() => { const filters: Record = {} METADATA_FIELDS.forEach((field) => { const value = searchParams.get(`metadata.${field.id}`) if (value) { filters[field.id] = value } }) setActiveFilters(filters) }, [searchParams]) const handleAddFilter = (field: string, value: string) => { if (!value.trim()) return const newFilters = { ...activeFilters, [field]: value } setActiveFilters(newFilters) onFilterChange(newFilters) setIsOpen(false) // Update URL with the new filters const params = new URLSearchParams(searchParams.toString()) params.set(`metadata.${field}`, value) router.push(`?${params.toString()}`) } const handleRemoveFilter = (field: string) => { const newFilters = { ...activeFilters } delete newFilters[field] setActiveFilters(newFilters) onFilterChange(newFilters) // Update URL by removing the filter const params = new URLSearchParams(searchParams.toString()) params.delete(`metadata.${field}`) router.push(`?${params.toString()}`) } const handleClearAllFilters = () => { setActiveFilters({}) onFilterChange({}) // Remove all metadata filters from URL const params = new URLSearchParams(searchParams.toString()) METADATA_FIELDS.forEach((field) => { params.delete(`metadata.${field.id}`) }) router.push(`?${params.toString()}`) } const getFieldOptions = (fieldId: string) => { switch (fieldId) { case "make": return availableFilters?.makes || [] case "model": return availableFilters?.models || [] case "location": return availableFilters?.locations || [] default: return [] } } return (

Metadata Filters

Filter images based on their EXIF metadata.

Field Value

Common Values

{Object.keys(availableFilters || {}).length === 0 ? (

No common values found in your images.

) : ( <> {availableFilters?.makes && availableFilters.makes.length > 0 && (

Camera Makes

{availableFilters.makes.slice(0, 5).map((make) => ( handleAddFilter("make", make)} > {make} ))}

)} {availableFilters?.models && availableFilters.models.length > 0 && (

Camera Models

{availableFilters.models.slice(0, 5).map((model) => ( handleAddFilter("model", model)} > {model} ))}

)} )}

{/* Active filters display */}

{Object.entries(activeFilters).map(([field, value]) => { const fieldInfo = METADATA_FIELDS.find((f) => f.id === field) return ( {fieldInfo?.icon && } {fieldInfo?.label || field}: {value} ) })} {Object.keys(activeFilters).length > 0 && ( )}

) } [V0_FILE]typescriptreact:file="app/api/images/route.ts" isQuickEdit="true" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { auth } from "@clerk/nextjs/server" import { sql } from "@/lib/db" import { hasPermission } from "@/lib/permissions" export async function GET(request: NextRequest) { try { const { userId } = auth() if (!userId) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } // Check if user has permission to read images const canReadImages = await hasPermission(userId, "images", "read") if (!canReadImages) { return NextResponse.json({ error: "You don't have permission to access images" }, { status: 403 }) } // Get query parameters const searchParams = request.nextUrl.searchParams const folder = searchParams.get("folder") const search = searchParams.get("search") const page = Number.parseInt(searchParams.get("page") || "1") const limit = Number.parseInt(searchParams.get("limit") || "20") const sortBy = searchParams.get("sortBy") || "createdAt" const sortOrder = searchParams.get("sortOrder") || "desc" // Handle metadata filters const metadataFilters: { path: string; value: string }[] = [] // Extract all metadata filters from query params for (const [key, value] of searchParams.entries()) { if (key.startsWith("metadata.") && value) { const path = key.replace("metadata.", "") metadataFilters.push({ path, value }) } } // Build the WHERE clause safely let whereClause = sql`"userId" = ${userId} AND "deletedAt" IS NULL` const params: any[] = [] if (folder) { whereClause = sql`${whereClause} AND folder = ${folder}` } if (search) { whereClause = sql`${whereClause} AND filename ILIKE ${`%${search}%`}` } // Build metadata filter conditions safely if (metadataFilters.length > 0) { const metadataConditions = metadataFilters.map((filter) => { return sql`metadata->>'${sql.raw(filter.path)}' ILIKE ${`%${filter.value}%`}` }) // Combine conditions with AND const combinedConditions = sql.join(metadataConditions, sql` AND `) whereClause = sql`${whereClause} AND (${combinedConditions})` } // Validate sort parameters to prevent SQL injection const validSortColumns = ["createdAt", "filename", "size", "views"] const validSortOrders = ["asc", "desc"] const safeSortBy = validSortColumns.includes(sortBy) ? sortBy : "createdAt" const safeSortOrder = validSortOrders.includes(sortOrder.toLowerCase()) ? sortOrder : "desc" // Get total count safely const countResult = await sql` SELECT COUNT(*) as total FROM "Image" WHERE ${whereClause} ` const totalCount = Number.parseInt(countResult[0].total) // Get images with pagination safely const images = await sql` SELECT * FROM "Image" WHERE ${whereClause} ORDER BY ${sql.raw(`"${safeSortBy}" ${safeSortOrder}`)} LIMIT ${limit} OFFSET ${(page - 1) * limit} ` // Get unique folders for filtering const foldersResult = await sql` SELECT DISTINCT folder FROM "Image" WHERE "userId" = ${userId} AND folder IS NOT NULL ` const folders = foldersResult.map((row) => row.folder).filter(Boolean) // Get common metadata values for filtering suggestions const metadataStats = await sql` SELECT jsonb_object_keys(metadata) as key, jsonb_agg(DISTINCT metadata->>jsonb_object_keys(metadata)) as values FROM "Image" WHERE "userId" = ${userId} AND metadata IS NOT NULL GROUP BY jsonb_object_keys(metadata) ` // Extract common metadata values const metadataValues: Record = {} metadataStats.forEach((row) => { try { const key = row.key const values = JSON.parse(row.values) metadataValues[key] = values.filter(Boolean).slice(0, 10) // Limit to 10 values per field } catch (e) { console.error("Error parsing metadata values:", e) } }) // Extract specific metadata fields for filtering UI const availableFilters = { makes: metadataValues.make || [], models: metadataValues.model || [], locations: metadataValues.location || [], } return NextResponse.json({ images, folders, availableFilters, pagination: { total: totalCount, page, limit, pages: Math.ceil(totalCount / limit), }, }) } catch (error) { console.error("Error fetching images:", error) return NextResponse.json({ error: "Failed to fetch images" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/dashboard/images/page.tsx" isMerged="true" import type { Metadata } from "next" import { auth } from "@clerk/nextjs/server" import { ImageGallery } from "@/components/dashboard/image-gallery" import { hasPermission } from "@/lib/permissions" export const metadata: Metadata = { title: "Images | ImageVault", description: "Manage your image library. Search, filter, and organize your images.", } export default async function ImagesPage({ searchParams, }: { searchParams: { [key: string]: string | string[] | undefined } }) { const { userId } = auth() if (!userId) { return null } // Check if user has permission to read images const canReadImages = await hasPermission(userId, "images", "read") if (!canReadImages) { return (

Images

Access Denied

You don't have permission to access images.

) } // Convert searchParams to query string for API call const queryString = new URLSearchParams() Object.entries(searchParams).forEach(([key, value]) => { if (typeof value === "string") { queryString.append(key, value) } else if (Array.isArray(value)) { value.forEach((v) => queryString.append(key, v)) } }) // Set default limit if not provided if (!queryString.has("limit")) { queryString.set("limit", "20") } // Fetch initial images data const response = await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/images?${queryString.toString()}`, { headers: { Cookie: `__clerk_db_auth_token=${userId}`, }, }) const data = await response.json() return (

Images

) } [V0_FILE]typescript:file="lib/exif-utils.ts" isMerged="true" import exifr from "exifr" export interface ExifData { // Basic information make?: string model?: string software?: string // Date information dateTaken?: string dateModified?: string // Camera settings iso?: number focalLength?: string aperture?: string exposureTime?: string exposureMode?: string exposureProgram?: string meteringMode?: string flash?: string // Image information width?: number height?: number orientation?: number // Location information latitude?: number longitude?: number altitude?: number location?: string // Copyright information artist?: string copyright?: string // Raw EXIF data for advanced users raw?: Record } /** * Extracts EXIF data from an image file */ export async function extractExifData(file: File): Promise { try { // Parse EXIF data using exifr const exif = await exifr.parse(file, { // Include these EXIF tags tiff: true, exif: true, gps: true, ifd0: true, ifd1: true, interop: true, // Skip these EXIF tags (thumbnails can be large) xmp: false, iptc: false, jfif: false, ihdr: false, thumbnail: false, }) if (!exif) return null // Format the EXIF data const formattedData: ExifData = { // Basic information make: exif.Make, model: exif.Model, software: exif.Software, // Date information dateTaken: exif.DateTimeOriginal ? new Date(exif.DateTimeOriginal).toISOString() : undefined, dateModified: exif.ModifyDate ? new Date(exif.ModifyDate).toISOString() : undefined, // Camera settings iso: exif.ISO, focalLength: exif.FocalLength ? `${exif.FocalLength}mm` : undefined, aperture: exif.FNumber ? `f/${exif.FNumber}` : undefined, exposureTime: exif.ExposureTime ? formatExposureTime(exif.ExposureTime) : undefined, exposureMode: formatExposureMode(exif.ExposureMode), exposureProgram: formatExposureProgram(exif.ExposureProgram), meteringMode: formatMeteringMode(exif.MeteringMode), flash: formatFlash(exif.Flash), // Image information width: exif.ExifImageWidth || exif.ImageWidth, height: exif.ExifImageHeight || exif.ImageHeight, orientation: exif.Orientation, // Location information latitude: exif.latitude, longitude: exif.longitude, altitude: exif.altitude, // Copyright information artist: exif.Artist, copyright: exif.Copyright, // Store raw EXIF data for advanced users raw: exif, } // Try to get location name if coordinates are available if (formattedData.latitude && formattedData.longitude) { formattedData.location = `${formattedData.latitude.toFixed(6)}, ${formattedData.longitude.toFixed(6)}` // Optionally, you could use a geocoding service here to get the actual location name // This would require an API call to a service like Google Maps, Mapbox, etc. } return formattedData } catch (error) { console.error("Error extracting EXIF data:", error) return null } } /** * Formats exposure time to a readable format (e.g. 1/125s) */ function formatExposureTime(exposureTime: number): string { if (!exposureTime) return "" if (exposureTime >= 1) { return `${exposureTime}s` } else { const denominator = Math.round(1 / exposureTime) return `1/${denominator}s` } } /** * Formats exposure mode to a readable format */ function formatExposureMode(mode: number | undefined): string | undefined { if (mode === undefined) return undefined const modes: Record = { 0: "Auto", 1: "Manual", 2: "Auto bracket", } return modes[mode] || `Unknown (${mode})` } /** * Formats exposure program to a readable format */ function formatExposureProgram(program: number | undefined): string | undefined { if (program === undefined) return undefined const programs: Record = { 0: "Not defined", 1: "Manual", 2: "Normal program", 3: "Aperture priority", 4: "Shutter priority", 5: "Creative program", 6: "Action program", 7: "Portrait mode", 8: "Landscape mode", } return programs[program] || `Unknown (${program})` } /** * Formats metering mode to a readable format */ function formatMeteringMode(mode: number | undefined): string | undefined { if (mode === undefined) return undefined const modes: Record = { 0: "Unknown", 1: "Average", 2: "Center weighted average", 3: "Spot", 4: "Multi spot", 5: "Pattern", 6: "Partial", 255: "Other", } return modes[mode] || `Unknown (${mode})` } /** * Formats flash status to a readable format */ function formatFlash(flash: number | undefined): string | undefined { if (flash === undefined) return undefined const flashModes: Record = { 0: "No Flash", 1: "Flash Fired", 5: "Flash Fired, Return not detected", 7: "Flash Fired, Return detected", 8: "On, Flash did not fire", 9: "On, Flash fired", 13: "On, Return not detected", 15: "On, Return detected", 16: "Off, Flash did not fire", 24: "Auto, Flash did not fire", 25: "Auto, Flash fired", 29: "Auto, Return not detected", 31: "Auto, Return detected", 32: "No flash function", 65: "Red-eye reduction, Flash fired", 69: "Red-eye reduction, Return not detected", 71: "Red-eye reduction, Return detected", 73: "Red-eye reduction, On, Flash fired", 77: "Red-eye reduction, On, Return not detected", 79: "Red-eye reduction, On, Return detected", 89: "Red-eye reduction, Auto, Flash fired", 93: "Red-eye reduction, Auto, Return not detected", 95: "Red-eye reduction, Auto, Return detected", } return flashModes[flash] || `Unknown (${flash})` } /** * Checks if EXIF data contains GPS information */ export function hasGpsData(exifData: ExifData | null): boolean { if (!exifData) return false return !!(exifData.latitude && exifData.longitude) } /** * Gets a summary of the most important EXIF data */ export function getExifSummary(exifData: ExifData | null): Record { if (!exifData) return {} const summary: Record = {} if (exifData.make && exifData.model) { summary.camera = `${exifData.make} ${exifData.model}` } else if (exifData.make) { summary.camera = exifData.make } else if (exifData.model) { summary.camera = exifData.model } if (exifData.dateTaken) { summary.dateTaken = new Date(exifData.dateTaken).toLocaleDateString() } if (exifData.iso) { summary.iso = `ISO ${exifData.iso}` } if (exifData.focalLength) { summary.focalLength = exifData.focalLength } if (exifData.aperture) { summary.aperture = exifData.aperture } if (exifData.exposureTime) { summary.exposureTime = exifData.exposureTime } if (exifData.location) { summary.location = exifData.location } return summary } [V0_FILE]typescriptreact:file="components/dashboard/exif-data-viewer.tsx" isMerged="true" "use client" import { useState } from "react" import { Camera, Calendar, MapPin, Aperture, Clock, Zap, Info, ChevronDown, ChevronUp, AlertTriangle, } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { hasGpsData, type ExifData } from "@/lib/exif-utils" interface ExifDataViewerProps { metadata: ExifData } export function ExifDataViewer({ metadata }: ExifDataViewerProps) { const [isOpen, setIsOpen] = useState(false) const hasGps = hasGpsData(metadata) // Group metadata into categories for better organization const cameraInfo = [ { label: "Camera", value: metadata.make && metadata.model ? `${metadata.make} ${metadata.model}` : metadata.make || metadata.model || "Unknown", icon: Camera, }, { label: "Date Taken", value: metadata.dateTaken ? new Date(metadata.dateTaken).toLocaleString() : "Unknown", icon: Calendar, }, ] const exposureInfo = [ { label: "Aperture", value: metadata.aperture || "Unknown", icon: Aperture }, { label: "Shutter Speed", value: metadata.exposureTime || "Unknown", icon: Clock }, { label: "ISO", value: metadata.iso ? `ISO ${metadata.iso}` : "Unknown", icon: Zap }, { label: "Focal Length", value: metadata.focalLength || "Unknown", icon: Info }, ] const locationInfo = hasGps ? [ { label: "Location", value: metadata.location || "Unknown", icon: MapPin }, { label: "Altitude", value: metadata.altitude ? `${metadata.altitude.toFixed(1)}m` : "Unknown", icon: Info }, ] : [] // Format raw metadata for advanced view const formatRawMetadata = () => { if (!metadata.raw) return {} // Filter out some technical properties that aren't useful to most users const excludeKeys = ["MakerNote", "buffer", "exifr", "chunked", "ifd", "xmp", "iptc", "icc"] const filteredData = Object.fromEntries(Object.entries(metadata.raw).filter(([key]) => !excludeKeys.includes(key))) return filteredData } return ( Image Metadata EXIF data extracted from this image {hasGps && ( Location Data Detected This image contains GPS coordinates. Be careful when sharing this image if the location is sensitive. )}

{/* Camera Information */}

Camera Information

{cameraInfo.map((item) => (

{item.label}

{item.value}

))}

{/* Exposure Information */}

Exposure Information

{exposureInfo.map((item) => (

{item.label}

{item.value}

))}

{/* Location Information (if available) */} {locationInfo.length > 0 && (

Location Information

{locationInfo.map((item) => (

{item.label}

{item.value}

))}

)}

{/* Advanced Metadata (Collapsible) */}

Advanced Metadata

{metadata.raw && Object.entries(formatRawMetadata()).map(([key, value]) => { // Skip null or undefined values if (value === null || value === undefined) return null // Format the value based on its type let formattedValue = value if (typeof value === "object") { formattedValue = JSON.stringify(value) } else if (typeof value === "number" && key.toLowerCase().includes("date")) { formattedValue = new Date(value).toLocaleString() } return (

{key}

{String(formattedValue)}

) })}

{metadata.exposureProgram && {metadata.exposureProgram}} {metadata.meteringMode && {metadata.meteringMode}} {metadata.flash && {metadata.flash}} {metadata.software && {metadata.software}}

) } [V0_FILE]typescriptreact:file="components/dashboard/upload-form.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useRef } from "react" import { useRouter } from "next/navigation" import { Upload, X, ImageIcon, Check } from "lucide-react" import { toast } from "sonner" import { Button } from "@/components/ui/button" import { Card, CardContent } 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 { formatBytes } from "@/lib/utils" import { extractExifData, type ExifData } from "@/lib/exif-utils" // Add imports for AI features import { generateImageDescription, generateImageTags, moderateImageContent } from "@/lib/ai-utils" export function UploadForm() { const router = useRouter() const [file, setFile] = useState(null) const [preview, setPreview] = useState(null) const [isUploading, setIsUploading] = useState(false) const [isPublic, setIsPublic] = useState(true) const [description, setDescription] = useState("") const [exifData, setExifData] = useState(null) const fileInputRef = useRef(null) // Inside the UploadForm component, add state for AI processing const [useAI, setUseAI] = useState(true) const [isProcessingAI, setIsProcessingAI] = useState(false) const handleFileChange = async (e: React.ChangeEvent) => { const selectedFile = e.target.files?.[0] if (!selectedFile) return // Check file type const validTypes = ["image/jpeg", "image/png", "image/gif", "image/webp", "image/svg+xml"] if (!validTypes.includes(selectedFile.type)) { toast.error("Invalid file type. Please upload an image.") return } // Check file size (10MB max) const maxSize = 10 * 1024 * 1024 // 10MB if (selectedFile.size > maxSize) { toast.error("File too large. Maximum size is 10MB.") return } setFile(selectedFile) // Create preview const reader = new FileReader() reader.onload = () => { setPreview(reader.result as string) } reader.readAsDataURL(selectedFile) // Extract EXIF data try { const extractedExif = await extractExifData(selectedFile) setExifData(extractedExif) console.log("Extracted EXIF data:", extractedExif) } catch (error) { console.error("Failed to extract EXIF data:", error) // Don't show an error to the user, just log it } } const handleDrop = async (e: React.DragEvent) => { e.preventDefault() const droppedFile = e.dataTransfer.files?.[0] if (!droppedFile) return // Check file type const validTypes = ["image/jpeg", "image/png", "image/gif", "image/webp", "image/svg+xml"] if (!validTypes.includes(droppedFile.type)) { toast.error("Invalid file type. Please upload an image.") return } // Check file size (10MB max) const maxSize = 10 * 1024 * 1024 // 10MB if (droppedFile.size > maxSize) { toast.error("File too large. Maximum size is 10MB.") return } setFile(droppedFile) // Create preview const reader = new FileReader() reader.onload = () => { setPreview(reader.result as string) } reader.readAsDataURL(droppedFile) // Extract EXIF data try { const extractedExif = await extractExifData(droppedFile) setExifData(extractedExif) console.log("Extracted EXIF data:", extractedExif) } catch (error) { console.error("Failed to extract EXIF data:", error) // Don't show an error to the user, just log it } } const handleDragOver = (e: React.DragEvent) => { e.preventDefault() } // Update the handleUpload function to include AI processing const handleUpload = async () => { if (!file) return setIsUploading(true) try { // Step 1: Get a presigned URL for upload const presignedResponse = await fetch("/api/upload", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ filename: file.name, contentType: file.type, size: file.size, }), }) if (!presignedResponse.ok) { throw new Error("Failed to get upload URL") } const { presignedUrl, publicUrl, key } = await presignedResponse.json() // Step 2: Upload the file directly to storage const uploadResponse = await fetch(presignedUrl, { method: "PUT", body: file, headers: { "Content-Type": file.type, }, }) if (!uploadResponse.ok) { throw new Error("Failed to upload file") } // Step 3: Process with AI if enabled let aiDescription = description let aiMetadata = exifData || {} if (useAI) { setIsProcessingAI(true) try { // Generate description if none provided if (!description) { aiDescription = await generateImageDescription(publicUrl) } // Generate tags const tags = await generateImageTags(publicUrl) // Check content moderation const moderationResult = await moderateImageContent(publicUrl) // Update metadata with AI results aiMetadata = { ...aiMetadata, aiTags: tags, moderation: { isSafe: moderationResult.isSafe, reasons: moderationResult.reasons, checkedAt: new Date().toISOString(), }, } // If content is not safe, make it private if (!moderationResult.isSafe) { setIsPublic(false) toast.warning("Potentially inappropriate content detected. Image set to private.") } } catch (error) { console.error("Error processing with AI:", error) // Continue with upload even if AI processing fails } finally { setIsProcessingAI(false) } } // Step 4: Confirm the upload and save metadata const confirmResponse = await fetch("/api/images/confirm-upload", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ filename: file.name, key, publicUrl, contentType: file.type, size: file.size, width: 0, // These will be updated by the server height: 0, isPublic, description: aiDescription, metadata: aiMetadata, }), }) if (!confirmResponse.ok) { throw new Error("Failed to confirm upload") } const { image } = await confirmResponse.json() toast.success("Image uploaded successfully!") router.push(`/dashboard/images/${image.id}`) router.refresh() } catch (error) { console.error("Upload error:", error) toast.error("Failed to upload image. Please try again.") } finally { setIsUploading(false) } } const handleRemoveFile = () => { setFile(null) setPreview(null) setExifData(null) if (fileInputRef.current) { fileInputRef.current.value = "" } } return (

{preview ? ( <>

{/* eslint-disable-next-line @next/next/no-img-element */} Preview

{file?.name} ({formatBytes(file?.size || 0)})

{/* Show EXIF data summary if available */} {exifData && Object.keys(exifData).length > 0 && (

Image Metadata (EXIF)

{exifData.Make && exifData.Model && (

Camera: {exifData.Make} {exifData.Model}

)} {exifData.DateTimeOriginal && (

Date:{" "} {new Date(exifData.DateTimeOriginal).toLocaleDateString()}

)} {exifData.FocalLength && (

Focal Length: {exifData.FocalLength}mm

)} {exifData.FNumber && (

Aperture: f/{exifData.FNumber}

)} {exifData.ISO && (

ISO: {exifData.ISO}

)} {exifData.latitude && exifData.longitude && (

Location: GPS data available

)}

)} ) : ( <>

Upload an image

Drag and drop an image, or click to browse

)}

{file && (

Description

setDescription(e.target.value)}
                />
              </div>
              <div className="flex items-center space-x-2">
                <Switch id="public" checked={isPublic} onCheckedChange={setIsPublic} />
                <Label htmlFor="public">Make this image public</Label>
              </div>
              {/* Add the AI processing option to the form */}
              {/* Inside the form, after the public/private switch */}
              <div className="flex items-center space-x-2">
                <Switch id="ai-processing" checked={useAI} onCheckedChange={setUseAI} />
                <Label htmlFor="ai-processing">Use AI to enhance this image</Label>
                <div className="ml-1 text-xs text-muted-foreground">
                  (Generates description, tags, and checks content)
                </div>
              </div>
              {/* Update the upload button to show AI processing state */}
              <Button className="w-full" onClick={handleUpload} disabled={isUploading || isProcessingAI}>
                {isUploading ? (
                  isProcessingAI ? (
                    "Processing with AI..."
                  ) : (
                    "Uploading..."
                  )
                ) : (
                  <>
                    <Check className="mr-2 h-4 w-4" />
                    Upload Image
                  </>
                )}
              </Button>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescript:file="lib/db-utils.ts" isMerged="true"
import { sql } from "@/lib/db"

// User-related functions
export async function getUserById(userId: string) {
  const result = await sql`
    SELECT * FROM "User" WHERE id = ${userId}
  `
  return result[0] || null
}

export async function updateUserStorageUsed(userId: string, sizeToAdd: number) {
  return sql`
    UPDATE "User"
    SET "storageUsed" = "storageUsed" + ${sizeToAdd}, "updatedAt" = NOW()
    WHERE id = ${userId}
    RETURNING "storageUsed", "storageLimit"
  `
}

// Folder-related functions
export async function getUserFolders(userId: string, teamId?: string) {
  if (teamId) {
    return sql`
      SELECT * FROM "Folder"
      WHERE ("userId" = ${userId} OR "teamId" = ${teamId})
      ORDER BY "name" ASC
    `
  }

return sql`
    SELECT * FROM "Folder"
    WHERE "userId" = ${userId} AND "teamId" IS NULL
    ORDER BY "name" ASC
  `
}

export async function createFolder(name: string, userId: string, parentId?: string, teamId?: string) {
  // Generate path based on parent folder
  let path = `/${name}`

if (parentId) {
    const parentResult = await sql`
      SELECT "path" FROM "Folder" WHERE id = ${parentId}
    `

if (parentResult.length > 0) {
      path = `${parentResult[0].path}/${name}`
    }
  }

return sql`
    INSERT INTO "Folder" ("name", "userId", "parentId", "teamId", "path")
    VALUES (${name}, ${userId}, ${parentId || null}, ${teamId || null}, ${path})
    RETURNING *
  `
}

// Image-related functions
export async function getImageById(imageId: string, userId: string) {
  return sql`
    SELECT * FROM "Image"
    WHERE id = ${imageId} AND "userId" = ${userId} AND "deletedAt" IS NULL
  `
}

export async function getUserImages(
  userId: string,
  options: {
    folderId?: string
    teamId?: string
    search?: string
    limit?: number
    offset?: number
    sortBy?: string
    sortOrder?: "asc" | "desc"
  } = {},
) {
  const { folderId, teamId, search, limit = 20, offset = 0, sortBy = "createdAt", sortOrder = "desc" } = options

// Build the WHERE clause
  let whereClause = `"userId" = ${userId} AND "deletedAt" IS NULL`

if (folderId) {
    whereClause += ` AND "folderId" = ${folderId}`
  }

if (teamId) {
    whereClause += ` AND "teamId" = ${teamId}`
  }

if (search) {
    whereClause += ` AND (
      "filename" ILIKE '%${search}%' OR
      "description" ILIKE '%${search}%' OR
      search_metadata("metadata", ${search})
    )`
  }

// Validate sort parameters to prevent SQL injection
  const validSortColumns = ["createdAt", "filename", "size", "views"]
  const validSortOrders = ["asc", "desc"]

const safeSortBy = validSortColumns.includes(sortBy) ? sortBy : "createdAt"
  const safeSortOrder = validSortOrders.includes(sortOrder) ? sortOrder : "desc"

// Get total count
  const countResult = await sql`
    SELECT COUNT(*) as total
    FROM "Image"
    WHERE ${sql.raw(whereClause)}
  `

// Get images with pagination
  const images = await sql`
    SELECT *
    FROM "Image"
    WHERE ${sql.raw(whereClause)}
    ORDER BY "${sql.raw(safeSortBy)}" ${sql.raw(safeSortOrder)}
    LIMIT ${limit}
    OFFSET ${offset}
  `

return {
    images,
    pagination: {
      total: Number(countResult[0].total),
      limit,
      offset,
      pages: Math.ceil(Number(countResult[0].total) / limit),
    },
  }
}

// Analytics-related functions
export async function recordImageView(imageId: string) {
  // Update image view count
  await sql`
    UPDATE "Image"
    SET views = views + 1, "updatedAt" = NOW()
    WHERE id = ${imageId}
  `

// Update or create analytics record
  const analytics = await sql`
    SELECT * FROM "ImageAnalytics" WHERE "imageId" = ${imageId}
  `

if (analytics.length > 0) {
    return sql`
      UPDATE "ImageAnalytics"
      SET views = views + 1, "lastViewed" = NOW(), "updatedAt" = NOW()
      WHERE "imageId" = ${imageId}
      RETURNING *
    `
  } else {
    return sql`
      INSERT INTO "ImageAnalytics" ("imageId", views, "lastViewed")
      VALUES (${imageId}, 1, NOW())
      RETURNING *
    `
  }
}

export async function recordImageDownload(imageId: string) {
  // Update image download count
  await sql`
    UPDATE "Image"
    SET downloads = downloads + 1, "updatedAt" = NOW()
    WHERE id = ${imageId}
  `

// Update analytics record
  const analytics = await sql`
    SELECT * FROM "ImageAnalytics" WHERE "imageId" = ${imageId}
  `

if (analytics.length > 0) {
    return sql`
      UPDATE "ImageAnalytics"
      SET downloads = downloads + 1, "updatedAt" = NOW()
      WHERE "imageId" = ${imageId}
      RETURNING *
    `
  } else {
    return sql`
      INSERT INTO "ImageAnalytics" ("imageId", downloads)
      VALUES (${imageId}, 1)
      RETURNING *
    `
  }
}

// Team-related functions
export async function getUserTeams(userId: string) {
  return sql`
    SELECT t.*, tm.role as "userRole"
    FROM "Team" t
    JOIN "TeamMember" tm ON t.id = tm."teamId"
    WHERE tm."userId" = ${userId}
    ORDER BY t.name ASC
  `
}

// Permission-related functions
export async function getUserPermissions(userId: string) {
  const userResult = await sql`
    SELECT role FROM "User" WHERE id = ${userId}
  `

if (userResult.length === 0) {
    return []
  }

const userRole = userResult[0].role

return sql`
    SELECT resource, action
    FROM "Permission"
    WHERE "roleId" = ${userRole}::UserRole
  `
}
[V0_FILE]typescript:file="app/api/images/confirm-upload/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { auth } from "@clerk/nextjs/server"
import { sql } from "@/lib/db"
import { updateUserStorageUsed } from "@/lib/db-utils"

export async function POST(request: Request) {
  try {
    const { userId } = auth()
    if (!userId) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const {
      filename,
      key,
      publicUrl,
      contentType,
      size,
      width,
      height,
      isPublic,
      description,
      folderId,
      teamId,
      metadata,
    } = await request.json()

// Validate required fields
    if (!filename || !key || !publicUrl || !contentType || !size) {
      return NextResponse.json({ error: "Missing required fields" }, { status: 400 })
    }

// Check if user has enough storage
    const userResult = await sql`
      SELECT "storageUsed", "storageLimit" FROM "User" WHERE id = ${userId}
    `

if (userResult.length === 0) {
      return NextResponse.json({ error: "User not found" }, { status: 404 })
    }

const user = userResult[0]
    if (user.storageUsed + size > user.storageLimit) {
      return NextResponse.json({ error: "Storage limit exceeded" }, { status: 400 })
    }

// Extract format from filename or contentType
    const format = filename.split(".").pop()?.toLowerCase() || contentType.split("/").pop()?.toLowerCase() || "unknown"

// Generate thumbnail URL (in a real app, you'd create this)
    const thumbnailUrl = publicUrl.replace(`.${format}`, `_thumb.${format}`)

// Insert the image record
    const result = await sql`
      INSERT INTO "Image" (
        "userId",
        "teamId",
        "folderId",
        "filename",
        "key",
        "publicUrl",
        "thumbnailUrl",
        "contentType",
        "size",
        "width",
        "height",
        "format",
        "isPublic",
        "description",
        "metadata"
      ) VALUES (
        ${userId},
        ${teamId || null},
        ${folderId || null},
        ${filename},
        ${key},
        ${publicUrl},
        ${thumbnailUrl},
        ${contentType},
        ${size},
        ${width || 0},
        ${height || 0},
        ${format},
        ${isPublic},
        ${description || null},
        ${metadata ? JSON.stringify(metadata) : null}
      )
      RETURNING *
    `

if (result.length === 0) {
      return NextResponse.json({ error: "Failed to create image record" }, { status: 500 })
    }

// Update user's storage usage
    await updateUserStorageUsed(userId, size)

return NextResponse.json({ success: true, image: result[0] })
  } catch (error) {
    console.error("Error confirming upload:", error)
    return NextResponse.json({ error: "Failed to confirm upload" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="components/dashboard/image-gallery.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import Link from "next/link"
import Image from "next/image"
import { useRouter, useSearchParams } from "next/navigation"
import { MoreHorizontal, Trash, Edit, ExternalLink, Copy, FolderPlus, Search } from "lucide-react"
import { formatDistanceToNow } from "date-fns"
import { toast } from "sonner"

import { Button } from "@/components/ui/button"
import { Card, CardFooter, CardTitle } from "@/components/ui/card"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Switch } from "@/components/ui/switch"
import { Skeleton } from "@/components/ui/skeleton"
import { MetadataFilter } from "./metadata-filter"
import { ErrorBoundary } from "@/components/error-boundary"

interface ImageGalleryProps {
  initialImages?: any[]
  initialFolders?: any[]
  initialAvailableFilters?: {
    makes?: string[]
    models?: string[]
    locations?: string[]
  }
}

export function ImageGallery({
  initialImages = [],
  initialFolders = [],
  initialAvailableFilters = {},
}: ImageGalleryProps) {
  const router = useRouter()
  const searchParams = useSearchParams()
  const [images, setImages] = useState<any[]>(initialImages)
  const [folders, setFolders] = useState<any[]>(initialFolders)
  const [availableFilters, setAvailableFilters] = useState(initialAvailableFilters)
  const [isLoading, setIsLoading] = useState(false)
  const [selectedImage, setSelectedImage] = useState<any>(null)
  const [isEditing, setIsEditing] = useState(false)
  const [isDeleting, setIsDeleting] = useState(false)
  const [isMoving, setIsMoving] = useState(false)
  const [searchTerm, setSearchTerm] = useState("")
  const [editedImage, setEditedImage] = useState({
    name: "",
    description: "",
    isPublic: false,
  })
  const [metadataFilters, setMetadataFilters] = useState<Record<string, string>>({})

// Fetch images when search params change
  useEffect(() => {
    const fetchImages = async () => {
      try {
        setIsLoading(true)
        const response = await fetch(`/api/images?${searchParams.toString()}`)

if (!response.ok) {
          throw new Error("Failed to fetch images")
        }

const data = await response.json()
        setImages(data.images || [])
        setFolders(data.folders || [])
        setAvailableFilters(data.availableFilters || {})
      } catch (error) {
        console.error("Error fetching images:", error)
        toast.error("Failed to fetch images")
      } finally {
        setIsLoading(false)
      }
    }

fetchImages()
  }, [searchParams])

// Initialize search term from URL
  useEffect(() => {
    const search = searchParams.get("search") || ""
    setSearchTerm(search)
  }, [searchParams])

const handleEditImage = (image: any) => {
    setSelectedImage(image)
    setEditedImage({
      name: image.name,
      description: image.description || "",
      isPublic: image.isPublic,
    })
    setIsEditing(true)
  }

const handleDeleteImage = (image: any) => {
    setSelectedImage(image)
    setIsDeleting(true)
  }

const handleMoveImage = (image: any) => {
    setSelectedImage(image)
    setIsMoving(true)
  }

const handleCopyLink = (url: string) => {
    navigator.clipboard.writeText(url)
    toast.success("Link copied to clipboard")
  }

const confirmDelete = async () => {
    try {
      const response = await fetch(`/api/images/${selectedImage.id}`, {
        method: "DELETE",
      })

if (!response.ok) {
        throw new Error("Failed to delete image")
      }

toast.success("Image deleted successfully")
      setIsDeleting(false)

// Remove the deleted image from the state
      setImages(images.filter((img) => img.id !== selectedImage.id))
    } catch (error) {
      toast.error("Failed to delete image")
      console.error(error)
    }
  }

const saveChanges = async () => {
    try {
      const response = await fetch(`/api/images/${selectedImage.id}`, {
        method: "PATCH",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(editedImage),
      })

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

toast.success("Image updated successfully")
      setIsEditing(false)

// Update the image in the state
      setImages(images.map((img) => (img.id === selectedImage.id ? { ...img, ...editedImage } : img)))
    } catch (error) {
      toast.error("Failed to update image")
      console.error(error)
    }
  }

const moveToFolder = async (folderId: string | null) => {
    try {
      const response = await fetch(`/api/images/${selectedImage.id}`, {
        method: "PATCH",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ folderId }),
      })

if (!response.ok) {
        throw new Error("Failed to move image")
      }

toast.success("Image moved successfully")
      setIsMoving(false)

// Update the image in the state
      setImages(images.map((img) => (img.id === selectedImage.id ? { ...img, folder: folderId } : img)))
    } catch (error) {
      toast.error("Failed to move image")
      console.error(error)
    }
  }

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

// Update URL with search term
    const params = new URLSearchParams(searchParams.toString())
    if (searchTerm) {
      params.set("search", searchTerm)
    } else {
      params.delete("search")
    }

router.push(`?${params.toString()}`)
  }

const handleMetadataFilterChange = (filters: Record<string, string>) => {
    setMetadataFilters(filters)
  }

return (
    <ErrorBoundary
      fallback={
        <div className="flex h-[450px] w-full flex-col items-center justify-center rounded-lg border border-dashed">
          <div className="flex flex-col items-center justify-center text-center">
            <h3 className="mt-4 text-lg font-semibold">Failed to load images</h3>
            <p className="mb-4 mt-2 text-sm text-muted-foreground">
              There was an error loading your images. Please refresh the page or try again later.
            </p>
            <Button onClick={() => window.location.reload()}>Refresh Page</Button>
          </div>
        </div>
      }
    >
      {isLoading && images.length === 0 ? (
        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
          {Array.from({ length: 8 }).map((_, i) => (
            <Card key={i} className="overflow-hidden">
              <div className="aspect-square w-full">
                <Skeleton className="h-full w-full" />
              </div>
              <CardFooter className="p-4">
                <Skeleton className="h-5 w-full" />
              </CardFooter>
            </Card>
          ))}
        </div>
      ) : images.length === 0 && !isLoading ? (
        <div className="space-y-4">
          <div className="flex items-center justify-between">
            <form onSubmit={handleSearch} className="flex w-full max-w-sm items-center space-x-2">
              <Input
                type="search"
                placeholder="Search images..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
              />
              <Button type="submit" size="icon">
                <Search className="h-4 w-4" />
                <span className="sr-only">Search</span>
              </Button>
            </form>

<div className="flex h-[450px] w-full flex-col items-center justify-center rounded-lg border border-dashed">
            <div className="flex flex-col items-center justify-center text-center">
              <h3 className="mt-4 text-lg font-semibold">No images found</h3>
              <p className="mb-4 mt-2 text-sm text-muted-foreground">
                {searchParams.toString()
                  ? "No images match your search criteria. Try adjusting your filters."
                  : "Upload your first image to get started."}
              </p>
              {searchParams.toString() ? (
                <Button variant="outline" onClick={() => router.push("/dashboard/images")}>
                  Clear all filters
                </Button>
              ) : (
                <Button asChild>
                  <Link href="/dashboard/upload">Upload Images</Link>
                </Button>
              )}
            </div>
          </div>
        </div>
      ) : (
        <>
          <div className="space-y-4">
            <div className="flex flex-col space-y-2 md:flex-row md:items-center md:justify-between md:space-y-0">
              <form onSubmit={handleSearch} className="flex w-full max-w-sm items-center space-x-2">
                <Input
                  type="search"
                  placeholder="Search images..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                />
                <Button type="submit" size="icon">
                  <Search className="h-4 w-4" />
                  <span className="sr-only">Search</span>
                </Button>
              </form>

<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
              {images.map((image) => (
                <Card key={image.id} className="overflow-hidden">
                  <Link href={`/dashboard/images/${image.id}`}>
                    <div className="aspect-square w-full overflow-hidden bg-muted">
                      <Image
                        src={image.thumbnailUrl || image.publicUrl}
                        alt={image.filename}
                        width={300}
                        height={300}
                        className="h-full w-full object-cover transition-all hover:scale-105"
                      />
                    </div>
                  </Link>
                  <CardFooter className="flex items-center justify-between p-4">
                    <div className="truncate">
                      <CardTitle className="truncate text-sm">{image.filename}</CardTitle>
                      <p className="text-xs text-muted-foreground">
                        {formatDistanceToNow(new Date(image.createdAt), { addSuffix: true })}
                      </p>
                    </div>
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="icon" className="ml-auto">
                          <MoreHorizontal className="h-4 w-4" />
                          <span className="sr-only">More options</span>
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuItem asChild>
                          <Link href={`/dashboard/images/${image.id}`}>
                            <ExternalLink className="mr-2 h-4 w-4" />
                            View details
                          </Link>
                        </DropdownMenuItem>
                        <DropdownMenuItem onClick={() => handleCopyLink(image.publicUrl)}>
                          <Copy className="mr-2 h-4 w-4" />
                          Copy link
                        </DropdownMenuItem>
                        <DropdownMenuItem onClick={() => handleMoveImage(image)}>
                          <FolderPlus className="mr-2 h-4 w-4" />
                          Move to folder
                        </DropdownMenuItem>
                        <DropdownMenuItem onClick={() => handleEditImage(image)}>
                          <Edit className="mr-2 h-4 w-4" />
                          Edit
                        </DropdownMenuItem>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem
                          className="text-destructive focus:text-destructive"
                          onClick={() => handleDeleteImage(image)}
                        >
                          <Trash className="mr-2 h-4 w-4" />
                          Delete
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </CardFooter>
                </Card>
              ))}
            </div>
          </div>

{/* Edit Dialog */}
          <Dialog open={isEditing} onOpenChange={setIsEditing}>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>Edit Image</DialogTitle>
              </DialogHeader>
              <div className="space-y-4 py-4">
                <div className="space-y-2">
                  <Label htmlFor="name">Name</Label>
                  <Input
                    id="name"
                    value={editedImage.name}
                    onChange={(e) => setEditedImage({ ...editedImage, name: e.target.value })}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="description">Description</Label>
                  <Textarea
                    id="description"
                    value={editedImage.description}
                    onChange={(e) => setEditedImage({ ...editedImage, description: e.target.value })}
                  />
                </div>
                <div className="flex items-center space-x-2">
                  <Switch
                    id="public"
                    checked={editedImage.isPublic}
                    onCheckedChange={(checked) => setEditedImage({ ...editedImage, isPublic: checked })}
                  />
                  <Label htmlFor="public">Public</Label>
                </div>
              </div>
              <DialogFooter>
                <Button variant="outline" onClick={() => setIsEditing(false)}>
                  Cancel
                </Button>
                <Button onClick={saveChanges}>Save changes</Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>

{/* Delete Dialog */}
          <Dialog open={isDeleting} onOpenChange={setIsDeleting}>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>Delete Image</DialogTitle>
                <DialogDescription>
                  Are you sure you want to delete this image? This action cannot be undone.
                </DialogDescription>
              </DialogHeader>
              <DialogFooter>
                <Button variant="outline" onClick={() => setIsDeleting(false)}>
                  Cancel
                </Button>
                <Button variant="destructive" onClick={confirmDelete}>
                  Delete
                </Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>

{/* Move Dialog */}
          <Dialog open={isMoving} onOpenChange={setIsMoving}>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>Move to Folder</DialogTitle>
              </DialogHeader>
              <div className="py-4">
                <div className="space-y-4">
                  <Button variant="outline" className="w-full justify-start" onClick={() => moveToFolder(null)}>
                    Root (No folder)
                  </Button>
                  {folders.map((folder) => (
                    <Button
                      key={folder.id}
                      variant="outline"
                      className="w-full justify-start"
                      onClick={() => moveToFolder(folder.id)}
                    >
                      {folder.name}
                    </Button>
                  ))}
                </div>
              </div>
              <DialogFooter>
                <Button variant="outline" onClick={() => setIsMoving(false)}>
                  Cancel
                </Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>
        </>
      )}
    </ErrorBoundary>
  )
}
[V0_FILE]typescript:file="app/api/users/[id]/role/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { sql } from "@/lib/db"
import { UserRole } from "@/lib/user-roles"
import { requireAuth } from "@/lib/auth-utils"

export async function GET(request: Request, { params }: { params: { id: string } }) {
  const authCheck = await requireAuth([UserRole.ADMIN])

if (!authCheck.success) {
    return NextResponse.json({ error: authCheck.error }, { status: authCheck.status })
  }

const userId = params.id

try {
    const result = await sql`
     SELECT role FROM "User" WHERE id = ${userId}
   `

if (result.length === 0) {
      return NextResponse.json({ role: UserRole.USER })
    }

return NextResponse.json({ role: result[0].role })
  } catch (error) {
    console.error("Error fetching user role:", error)
    return NextResponse.json({ error: "Failed to fetch user role" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/dashboard/admin/users/page.tsx" isQuickEdit="true" isMerged="true"
import type { Metadata } from "next"
import { UserManagement } from "@/components/dashboard/user-management"
import { sql } from "@/lib/db"
import { requireRole } from "@/lib/server-auth"
import { UserRole } from "@/lib/user-roles"

export const metadata: Metadata = {
  title: "User Management | ImageVault",
  description: "Manage users and their permissions.",
}

export default async function UsersPage() {
  // Require admin role, will redirect if not admin
  await requireRole(UserRole.ADMIN)

// Get all users
  const users = await sql`
    SELECT id, email, name, role, "createdAt"
    FROM "User"
    ORDER BY "createdAt" DESC
  `

return (
    <div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
      <div className="flex items-center justify-between">
        <h2 className="text-3xl font-bold tracking-tight">User Management</h2>
      </div>
      <UserManagement users={users} />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/admin/permissions/page.tsx" isQuickEdit="true" isMerged="true"
import type { Metadata } from "next"
import { PermissionsManager } from "@/components/dashboard/permissions-manager"
import { sql } from "@/lib/db"
import { requireRole } from "@/lib/server-auth"
import { UserRole } from "@/lib/user-roles"

export const metadata: Metadata = {
  title: "Permissions Management | ImageVault",
  description: "Manage role-based permissions for your organization.",
}

export default async function PermissionsPage() {
  // Require admin role, will redirect if not admin
  await requireRole(UserRole.ADMIN)

// Get all permissions
  const permissions = await sql`
    SELECT * FROM "Permission"
    ORDER BY "roleId", resource, action
  `

return (
    <div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
      <div className="flex items-center justify-between">
        <h2 className="text-3xl font-bold tracking-tight">Permissions Management</h2>
      </div>
      <PermissionsManager initialPermissions={permissions} />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/error-boundary.tsx" isMerged="true"
"use client"

import type React from "react"

import { useEffect, useState } from "react"
import { AlertCircle } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

interface ErrorBoundaryProps {
  children: React.ReactNode
  fallback?: React.ReactNode
}

export function ErrorBoundary({ children, fallback }: ErrorBoundaryProps) {
  const [error, setError] = useState<Error | null>(null)

useEffect(() => {
    const errorHandler = (error: ErrorEvent) => {
      console.error("Caught client-side error:", error)
      setError(error.error)
    }

window.addEventListener("error", errorHandler)
    return () => window.removeEventListener("error", errorHandler)
  }, [])

if (error) {
    if (fallback) {
      return <>{fallback}</>
    }

return (
      <Alert variant="destructive">
        <AlertCircle className="h-4 w-4" />
        <AlertTitle>Something went wrong</AlertTitle>
        <AlertDescription>
          <p className="mb-2">An error occurred while rendering this component.</p>
          <Button variant="outline" size="sm" onClick={() => setError(null)}>
            Try Again
          </Button>
        </AlertDescription>
      </Alert>
    )
  }

return <>{children}</>
}
[V0_FILE]typescript:file="lib/rate-limit.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { auth } from "@clerk/nextjs/server"

// Simple in-memory store for rate limiting
// In production, you would use Redis or a similar service
const rateLimit = new Map<string, { count: number; timestamp: number }>()

type RateLimitOptions = {
  limit: number // Maximum requests in the window
  windowMs: number // Time window in milliseconds
  identifier?: string // Custom identifier (optional)
}

/**
 * Rate limiting middleware for API routes
 */
export async function rateLimiter(req: NextRequest, options: RateLimitOptions = { limit: 100, windowMs: 60000 }) {
  // Get user ID from Clerk or use IP address as fallback
  const { userId } = auth()
  const ip = req.ip || req.headers.get("x-forwarded-for") || "unknown"
  const identifier = options.identifier || userId || ip

// Get current state for this identifier
  const now = Date.now()
  const state = rateLimit.get(identifier) || { count: 0, timestamp: now }

// Reset if window has passed
  if (now - state.timestamp > options.windowMs) {
    state.count = 0
    state.timestamp = now
  }

// Increment count
  state.count += 1
  rateLimit.set(identifier, state)

// Check if limit is exceeded
  const remainingRequests = Math.max(0, options.limit - state.count)
  const resetTime = state.timestamp + options.windowMs

// Set rate limit headers
  const headers = new Headers({
    "X-RateLimit-Limit": options.limit.toString(),
    "X-RateLimit-Remaining": remainingRequests.toString(),
    "X-RateLimit-Reset": resetTime.toString(),
  })

// Return 429 if limit exceeded
  if (state.count > options.limit) {
    return NextResponse.json(
      { error: "Too many requests", retryAfter: (resetTime - now) / 1000 },
      { status: 429, headers },
    )
  }

return { headers }
}

// Cleanup function to prevent memory leaks (run periodically)
export function cleanupRateLimiter() {
  const now = Date.now()
  for (const [identifier, state] of rateLimit.entries()) {
    if (now - state.timestamp > 24 * 60 * 60 * 1000) {
      // 24 hours
      rateLimit.delete(identifier)
    }
  }
}
[V0_FILE]sql:file="prisma/migrations/add_indexes.sql" type="code" isMerged="true"
-- Add indexes to improve query performance

-- Add index for image search by filename
CREATE INDEX IF NOT EXISTS "image_filename_idx" ON "Image" USING gin (to_tsvector('english', "filename"));

-- Add index for image search by description
CREATE INDEX IF NOT EXISTS "image_description_idx" ON "Image" USING gin (to_tsvector('english', "description"));

-- Add index for metadata search using GIN index
CREATE INDEX IF NOT EXISTS "image_metadata_idx" ON "Image" USING gin ("metadata");

-- Add index for folder search
CREATE INDEX IF NOT EXISTS "folder_name_idx" ON "Folder" ("name");

-- Add index for performance of team queries
CREATE INDEX IF NOT EXISTS "team_member_user_idx" ON "TeamMember" ("userId");

-- Add index for image views and analytics
CREATE INDEX IF NOT EXISTS "image_views_idx" ON "Image" ("views" DESC);

-- Add composite index for querying user images by folder
CREATE INDEX IF NOT EXISTS "user_folder_images_idx" ON "Image" ("userId", "folderId");

-- Add index for searching deleted/soft-deleted images
CREATE INDEX IF NOT EXISTS "image_deleted_idx" ON "Image" ("deletedAt") WHERE "deletedAt" IS NOT NULL;
[V0_FILE]typescript:file="lib/db-optimization.ts" isMerged="true"
import { sql } from "@/lib/db"

/**
 * Run database optimizations like creating indexes, analyzing tables, etc.
 * This function should be run during deployment or maintenance periods.
 */
export async function optimizeDatabase() {
  console.log("Running database optimizations...")

try {
    // Run ANALYZE to update query planner statistics
    await sql`ANALYZE "Image"`
    await sql`ANALYZE "User"`
    await sql`ANALYZE "Folder"`
    await sql`ANALYZE "Team"`
    await sql`ANALYZE "TeamMember"`
    await sql`ANALYZE "Permission"`

console.log("Database optimization completed successfully")
    return { success: true }
  } catch (error) {
    console.error("Error optimizing database:", error)
    return {
      success: false,
      error: error instanceof Error ? error.message : String(error),
    }
  }
}
[V0_FILE]typescript:file="lib/logger.ts" isMerged="true"
type LogLevel = "debug" | "info" | "warn" | "error"

interface LogContext {
  [key: string]: any
}

interface LogEntry {
  timestamp: string
  level: LogLevel
  message: string
  context?: LogContext
  error?: Error
}

/**
 * Application logger that can be expanded to use external services
 * like Sentry, LogRocket, etc. in production
 */
class Logger {
  private context: LogContext = {}

constructor(context: LogContext = {}) {
    this.context = context
  }

/**
   * Create a child logger with additional context
   */
  child(context: LogContext): Logger {
    return new Logger({
      ...this.context,
      ...context,
    })
  }

/**
   * Format a log entry into a string
   */
  private formatLogEntry(entry: LogEntry): string {
    const { timestamp, level, message, context, error } = entry

let logString = `[${timestamp}] ${level.toUpperCase()}: ${message}`

if (context && Object.keys(context).length > 0) {
      logString += ` ${JSON.stringify(context)}`
    }

if (error) {
      logString += `\n${error.stack || error.message}`
    }

return logString
  }

/**
   * Process a log entry (console in development, external service in production)
   */
  private processLogEntry(entry: LogEntry) {
    const formattedLog = this.formatLogEntry(entry)

// In production, you would send this to a logging service
    if (process.env.NODE_ENV === "production") {
      // Example: send to external logging service
      // sendToLoggingService(entry);

// For now, still log to console in production
      switch (entry.level) {
        case "debug":
          console.debug(formattedLog)
          break
        case "info":
          console.info(formattedLog)
          break
        case "warn":
          console.warn(formattedLog)
          break
        case "error":
          console.error(formattedLog)
          break
      }
    } else {
      // In development, just log to console
      switch (entry.level) {
        case "debug":
          console.debug(formattedLog)
          break
        case "info":
          console.info(formattedLog)
          break
        case "warn":
          console.warn(formattedLog)
          break
        case "error":
          console.error(formattedLog)
          break
      }
    }
  }

/**
   * Create a log entry
   */
  private log(level: LogLevel, message: string, contextOrError?: LogContext | Error, error?: Error) {
    const timestamp = new Date().toISOString()
    let context: LogContext | undefined
    let errorObj: Error | undefined

if (contextOrError instanceof Error) {
      errorObj = contextOrError
    } else if (contextOrError) {
      context = contextOrError
    }

if (error) {
      errorObj = error
    }

const entry: LogEntry = {
      timestamp,
      level,
      message,
      context: {
        ...this.context,
        ...context,
      },
      error: errorObj,
    }

this.processLogEntry(entry)
  }

/**
   * Debug level log
   */
  debug(message: string, context?: LogContext) {
    this.log("debug", message, context)
  }

/**
   * Info level log
   */
  info(message: string, context?: LogContext) {
    this.log("info", message, context)
  }

/**
   * Warning level log
   */
  warn(message: string, context?: LogContext) {
    this.log("warn", message, context)
  }

/**
   * Error level log
   */
  error(message: string, errorOrContext?: Error | LogContext, error?: Error) {
    this.log("error", message, errorOrContext, error)
  }
}

// Create and export a default logger instance
export const logger = new Logger({
  service: "image-vault",
  version: process.env.NEXT_PUBLIC_APP_VERSION || "1.0.0",
})

// Helper function to create a context logger for API routes
export function createRouteLogger(route: string, method: string) {
  return logger.child({
    route,
    method,
  })
}
[V0_FILE]typescript:file="app/api/health/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { sql } from "@/lib/db"
import { logger } from "@/lib/logger"

export async function GET() {
  const start = Date.now()
  const health = {
    status: "ok",
    uptime: process.uptime(),
    timestamp: new Date().toISOString(),
    services: {
      database: "unknown",
      storage: "unknown",
    },
    version: process.env.NEXT_PUBLIC_APP_VERSION || "1.0.0",
    environment: process.env.NODE_ENV,
  }

try {
    // Check database connection
    const dbResult = await sql`SELECT 1 as connected`
    health.services.database = dbResult[0]?.connected === 1 ? "ok" : "error"
  } catch (error) {
    health.services.database = "error"
    health.status = "degraded"
    logger.error("Health check database error", error instanceof Error ? error : new Error(String(error)))
  }

try {
    // Check storage connection (just validate env vars exist for now)
    const hasStorageConfig = !!(
      process.env.CLOUDFLARE_R2_ACCESS_KEY_ID &&
      process.env.CLOUDFLARE_R2_SECRET_ACCESS_KEY &&
      process.env.CLOUDFLARE_R2_BUCKET_NAME
    )
    health.services.storage = hasStorageConfig ? "ok" : "error"

if (!hasStorageConfig) {
      health.status = "degraded"
    }
  } catch (error) {
    health.services.storage = "error"
    health.status = "degraded"
    logger.error("Health check storage error", error instanceof Error ? error : new Error(String(error)))
  }

// Calculate response time
  const responseTime = Date.now() - start

return NextResponse.json(
    { ...health, responseTime: `${responseTime}ms` },
    {
      status: health.status === "ok" ? 200 : 503,
      headers: {
        "Cache-Control": "no-store, max-age=0",
      },
    },
  )
}
[V0_FILE]shellscript:file="scripts/deploy.sh" type="code" isMerged="true"
#!/bin/bash
set -e

# Production deployment script for Image Hosting Website

echo "🚀 Starting deployment process..."

# Pull latest changes
echo "📥 Pulling latest changes from main branch..."
git pull origin main

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

# Run database migrations
echo "🗄️ Running database migrations..."
npm run prisma:migrate:prod

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

# Run tests
echo "🧪 Running tests..."
npm test

# Optimize database
echo "🔍 Running database optimizations..."
node scripts/optimize-db.js

# Deploy the application
echo "🚀 Deploying the application..."
npm run start

echo "✅ Deployment complete!"
[V0_FILE]javascript:file="scripts/optimize-db.js" type="code" isMerged="true"
// Database optimization script
const { optimizeDatabase } = require("../lib/db-optimization")

async function main() {
  console.log("Running database optimizations...")

try {
    const result = await optimizeDatabase()

if (result.success) {
      console.log("✅ Database optimization completed successfully")
      process.exit(0)
    } else {
      console.error("❌ Database optimization failed:", result.error)
      process.exit(1)
    }
  } catch (error) {
    console.error("❌ Unexpected error during database optimization:", error)
    process.exit(1)
  }
}

main()
[V0_FILE]markdown:file="README.md" type="code" isMerged="true"
# ImageVault - Fast, Secure Image Hosting Platform

ImageVault is a modern image hosting platform built with Next.js, featuring AI-powered image management, powerful optimization tools, and comprehensive analytics.

## Features

- 🖼️ Fast, secure image hosting with optimized delivery
- 🔍 AI-powered image descriptions, tagging, and content moderation
- 📊 Comprehensive analytics dashboard
- 📁 Folder organization and team collaboration
- 🔒 Advanced permission controls
- 🛠️ Image optimization and conversion tools
- 🌐 Custom domain support
- 📱 Responsive design for all devices

## Tech Stack

- **Frontend**: Next.js 14 with App Router, React 18, TypeScript
- **Styling**: Tailwind CSS, shadcn/ui components
- **Authentication**: Clerk
- **Database**: PostgreSQL with Neon serverless
- **Storage**: Cloudflare R2
- **AI**: Groq AI API for image analysis
- **Deployment**: Vercel

## Development Setup

### Prerequisites

- Node.js 18+ and npm
- PostgreSQL database
- Clerk account
- Cloudflare R2 account
- Groq AI API key

### Environment Variables

Copy the `.env.example` file to `.env.local`:

\`\`\`bash
cp .env.example .env.local
\`\`\`

Fill in the required environment variables:

\`\`\`
# App
NODE_ENV=development
NEXT_PUBLIC_APP_URL=http://localhost:3000

# Authentication
CLERK_SECRET_KEY=your_clerk_secret_key
CLERK_WEBHOOK_SECRET=your_clerk_webhook_secret
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key

# Database
DATABASE_URL=postgresql://user:password@localhost:5432/imagevault

# Storage
CLOUDFLARE_R2_ACCESS_KEY_ID=your_cloudflare_r2_access_key_id
CLOUDFLARE_R2_SECRET_ACCESS_KEY=your_cloudflare_r2_secret_access_key
CLOUDFLARE_R2_BUCKET_NAME=your_cloudflare_r2_bucket_name
CLOUDFLARE_R2_ENDPOINT=https://xxxxxxxxxxxxxxxx.r2.cloudflarestorage.com
CLOUDFLARE_PUBLIC_URL=https://pub-xxxxxxxxxxxxxxxx.r2.dev

# AI
GROQ_API_KEY=your_groq_api_key
\`\`\`

### Installation and Setup

1. Install dependencies:

\`\`\`bash
npm install
\`\`\`

2. Generate Prisma client:

\`\`\`bash
npm run prisma:generate
\`\`\`

3. Run database migrations:

\`\`\`bash
npm run prisma:migrate:dev
\`\`\`

4. Seed the database:

\`\`\`bash
npm run db:seed
\`\`\`

5. Start the development server:

\`\`\`bash
npm run dev
\`\`\`

The application will be available at http://localhost:3000.

## Production Deployment

### With Vercel

1. Push your code to GitHub
2. Import the repository into Vercel
3. Set the required environment variables
4. Deploy

### Manual Deployment

\`\`\`bash
npm run deploy
\`\`\`

This script will:
- Pull the latest changes
- Install dependencies
- Run database migrations
- Build the application
- Run tests
- Optimize the database
- Start the production server

## Project Structure

\`\`\`
.
├── app/                  # Next.js App Router
│   ├── api/              # API routes
│   ├── dashboard/        # Dashboard pages
│   ├── tools/            # Image tools pages
│   └── ...
├── components/           # React components
│   ├── ai/               # AI-related components
│   ├── dashboard/        # Dashboard UI components
│   ├── landing/          # Landing page components
│   ├── ui/               # shadcn/ui components
│   └── ...
├── lib/                  # Utility functions and business logic
├── middleware/           # Next.js middleware
├── prisma/               # Prisma schema and migrations
├── public/               # Static assets
└── scripts/              # Database seeding and deployment scripts
\`\`\`

## Contributing

1. Fork the repository
2. Create your feature branch: `git checkout -b feature/amazing-feature`
3. Commit your changes: `git commit -m 'Add some amazing feature'`
4. Push to the branch: `git push origin feature/amazing-feature`
5. Open a pull request

## License

This project is licensed under the MIT License - see the LICENSE file for details.
[V0_FILE]typescriptreact:file="lib/ai-utils.ts" isQuickEdit="true" isMerged="true"
import { generateText } from "ai"
import { groq } from "@ai-sdk/groq"

// Define the models we'll use
const MODELS = {
  // Update to use models available in Groq
  mixtral: groq("mixtral-8x7b-32768"),
  llama: groq("llama-3.1-70b-instruct"),
}

/**
 * Generate a description for an image based on its URL
 */
export async function generateImageDescription(imageUrl: string): Promise<string> {
  try {
    const { text } = await generateText({
      model: MODELS.llama,
      prompt: `You are an AI assistant that generates concise, accurate descriptions of images.
      
Image URL: ${imageUrl}

Please describe this image in 2-3 sentences. Focus on the main subject, setting, colors, and mood.
Keep your description factual and objective. Do not include any disclaimers or notes about being an AI.
Just provide the description directly.`,
    })

return text.trim()
  } catch (error) {
    console.error("Error generating image description:", error)
    return "Failed to generate description"
  }
}

/**
 * Generate tags for an image based on its URL
 */
export async function generateImageTags(imageUrl: string): Promise<string[]> {
  try {
    const { text } = await generateText({
      model: MODELS.llama,
      prompt: `You are an AI assistant that generates relevant tags for images.
      
Image URL: ${imageUrl}

Please generate 5-10 relevant tags for this image. Each tag should be a single word or short phrase.
Return the tags as a comma-separated list without numbering or bullet points.
Focus on the subject, style, colors, mood, and potential use cases.`,
    })

// Parse the comma-separated list into an array and clean up each tag
    const tags = text
      .split(",")
      .map((tag) => tag.trim())
      .filter((tag) => tag.length > 0)

return tags
  } catch (error) {
    console.error("Error generating image tags:", error)
    return []
  }
}

/**
 * Check if an image contains inappropriate content
 */
export async function moderateImageContent(imageUrl: string): Promise<{
  isSafe: boolean
  reasons: string[]
}> {
  try {
    const { text } = await generateText({
      model: MODELS.llama,
      prompt: `You are an AI content moderation system. Analyze the following image and determine if it contains any inappropriate content.
      
Image URL: ${imageUrl}

Check for the following categories of potentially inappropriate content:
1. Adult/explicit content
2. Violence or gore
3. Hate symbols
4. Self-harm
5. Harassment or bullying content

If the image is safe, respond with: SAFE
If the image contains inappropriate content, respond with: UNSAFE: [comma-separated list of reasons]`,
    })

const response = text.trim()

if (response.startsWith("SAFE")) {
      return { isSafe: true, reasons: [] }
    } else {
      // Extract reasons after "UNSAFE:"
      const reasonsText = response.replace("UNSAFE:", "").trim()
      const reasons = reasonsText
        .split(",")
        .map((reason) => reason.trim())
        .filter((reason) => reason.length > 0)

return { isSafe: false, reasons }
    }
  } catch (error) {
    console.error("Error moderating image content:", error)
    // Default to safe if there's an error to avoid false positives
    return { isSafe: true, reasons: [] }
  }
}

/**
 * Search for images using natural language
 */
export async function prepareNaturalLanguageQuery(query: string): Promise<string[]> {
  try {
    const { text } = await generateText({
      model: MODELS.mixtral,
      prompt: `You are an AI assistant that helps convert natural language image search queries into relevant keywords.
      
User query: "${query}"

Extract 3-7 relevant keywords from this query that would be useful for searching images.
Return the keywords as a comma-separated list without numbering or bullet points.`,
    })

// Parse the comma-separated list into an array and clean up each keyword
    const keywords = text
      .split(",")
      .map((keyword) => keyword.trim())
      .filter((keyword) => keyword.length > 0)

return keywords
  } catch (error) {
    console.error("Error preparing natural language query:", error)
    // Return the original query split into words as a fallback
    return query.split(" ").filter((word) => word.length > 2)
  }
}
[V0_FILE]typescriptreact:file="lib/auth-utils.ts" isQuickEdit="true" isMerged="true"
import "server-only"
import { auth } from "@clerk/nextjs/server"
import { sql } from "@/lib/db"
import { UserRole } from "@/lib/user-roles"

export async function getUserRole(userId: string): Promise<UserRole> {
  try {
    const result = await sql`
      SELECT role FROM "User" WHERE id = ${userId}
    `

if (result.length === 0) {
      return UserRole.USER
    }

return result[0].role as UserRole
  } catch (error) {
    console.error("Error fetching user role:", error)
    return UserRole.USER
  }
}

export async function requireAuth(requiredRoles: UserRole[] = []) {
  const { userId } = auth()

if (!userId) {
    return { success: false, error: "Unauthorized", status: 401 }
  }

if (requiredRoles.length > 0) {
    const userRole = await getUserRole(userId)

if (!requiredRoles.includes(userRole)) {
      return {
        success: false,
        error: "You don't have permission to access this resource",
        status: 403,
      }
    }
  }

return { success: true, userId }
}

// Fix the permission check query to match the actual database schema
export async function checkPermission(userId: string, permission: string): Promise<boolean> {
  try {
    // First check if user is admin (admins have all permissions)
    const userRole = await getUserRole(userId)
    if (userRole === UserRole.ADMIN) {
      return true
    }

// Check if the user has the specific permission
    const result = await sql`
      SELECT p.resource, p.action 
      FROM "Permission" p
      JOIN "User" u ON u.role = p."roleId"
      WHERE u.id = ${userId} AND p.resource || ':' || p.action = ${permission}
    `

return result.length > 0
  } catch (error) {
    console.error("Error checking permission:", error)
    return false
  }
}
[V0_FILE]typescriptreact:file="lib/storage.ts" isQuickEdit="true" isMerged="true"
import { S3Client } from "@aws-sdk/client-s3"
import { Upload } from "@aws-sdk/lib-storage"
import { GetObjectCommand, DeleteObjectCommand } from "@aws-sdk/client-s3"
import { getSignedUrl } from "@aws-sdk/s3-request-presigner"
import crypto from "crypto"

// Initialize S3 client for Cloudflare R2
export const s3Client = new S3Client({
  region: "auto",
  endpoint: process.env.CLOUDFLARE_R2_ENDPOINT,
  credentials: {
    accessKeyId: process.env.CLOUDFLARE_R2_ACCESS_KEY_ID || "",
    secretAccessKey: process.env.CLOUDFLARE_R2_SECRET_ACCESS_KEY || "",
  },
})

// CDN URL
export const CDN_URL = process.env.CLOUDFLARE_PUBLIC_URL || "https://pub-57c60c5a6d8c4960b0c6adf7fde360cd.r2.dev"

// Generate a unique filename with original extension
export function generateUniqueFilename(originalFilename: string): string {
  const extension = originalFilename.split(".").pop() || ""
  const uniqueId = crypto.randomUUID()
  return `${uniqueId}.${extension}`
}

// Upload a file to storage
export async function uploadFile(
  file: File,
  folder = "images",
): Promise<{
  url: string
  key: string
}> {
  const uniqueFilename = generateUniqueFilename(file.name)
  const key = `${folder}/${uniqueFilename}`

const arrayBuffer = await file.arrayBuffer()
  const buffer = Buffer.from(arrayBuffer)

const upload = new Upload({
    client: s3Client,
    params: {
      Bucket: process.env.CLOUDFLARE_R2_BUCKET_NAME || "",
      Key: key,
      Body: buffer,
      ContentType: file.type,
      ACL: "public-read",
    },
  })

await upload.done()

return {
    url: `${CDN_URL}/${key}`,
    key,
  }
}

// Delete a file from storage
export async function deleteFile(key: string): Promise<void> {
  await s3Client.send(
    new DeleteObjectCommand({
      Bucket: process.env.CLOUDFLARE_R2_BUCKET_NAME || "",
      Key: key,
    }),
  )
}

// Generate a signed URL for temporary access to a private file
export async function getSignedFileUrl(key: string, expiresIn = 3600): Promise<string> {
  const command = new GetObjectCommand({
    Bucket: process.env.CLOUDFLARE_R2_BUCKET_NAME || "",
    Key: key,
  })

return getSignedUrl(s3Client, command, { expiresIn })
}
[V0_FILE]typescriptreact:file="app/pricing/page.tsx" isMerged="true"
import type { Metadata } from "next"
import { LandingNavbar } from "@/components/landing/navbar"
import { LandingPricing } from "@/components/landing/pricing"
import { LandingCta } from "@/components/landing/cta"
import { LandingFooter } from "@/components/landing/footer"

export const metadata: Metadata = {
  title: "Pricing | ImageVault",
  description:
    "Choose the perfect plan for your image hosting needs. Affordable plans for individuals, professionals, and businesses.",
}

export default function PricingPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <LandingNavbar />
      <main className="flex-1">
        <div className="container mx-auto py-16 px-4 md:px-6">
          <div className="text-center mb-16">
            <h1 className="text-4xl md:text-5xl font-bold mb-4">Simple, Transparent Pricing</h1>
            <p className="text-xl text-muted-foreground max-w-[800px] mx-auto">
              Choose the perfect plan for your image hosting needs. No hidden fees or surprise charges.
            </p>
          </div>
          <LandingPricing />
        </div>
        <LandingCta />
      </main>
      <LandingFooter />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/features/page.tsx" isMerged="true"
import type { Metadata } from "next"
import { LandingNavbar } from "@/components/landing/navbar"
import { LandingFeatures } from "@/components/landing/features"
import { LandingCta } from "@/components/landing/cta"
import { LandingFooter } from "@/components/landing/footer"

export const metadata: Metadata = {
  title: "Features | ImageVault",
  description:
    "Explore all the powerful features of ImageVault - fast, secure image hosting with advanced optimization and analytics.",
}

export default function FeaturesPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <LandingNavbar />
      <main className="flex-1">
        <div className="container mx-auto py-16 px-4 md:px-6">
          <div className="text-center mb-16">
            <h1 className="text-4xl md:text-5xl font-bold mb-4">Powerful Image Hosting Features</h1>
            <p className="text-xl text-muted-foreground max-w-[800px] mx-auto">
              Everything you need to upload, manage, optimize, and share your images in one place.
            </p>
          </div>
          <LandingFeatures />
        </div>
        <LandingCta />
      </main>
      <LandingFooter />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/blog/page.tsx" isMerged="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import type { Metadata } from "next"
import { LandingNavbar } from "@/components/landing/navbar"
import { LandingFooter } from "@/components/landing/footer"

export const metadata: Metadata = {
  title: "Blog | ImageVault",
  description: "Read the latest news, tips, and updates about image hosting and optimization.",
}

export default function BlogPage() {
  // This is a placeholder for the blog page
  const blogPosts = [
    {
      title: "How to optimize images for faster website loading",
      excerpt: "Learn the best practices for optimizing your images to improve website performance.",
      date: "June 15, 2023",
      slug: "optimize-images-faster-website",
    },
    {
      title: "The power of WebP: Why you should convert your images",
      excerpt:
        "WebP offers better compression and quality compared to traditional formats. Here's why you should make the switch.",
      date: "May 24, 2023",
      slug: "webp-image-format-benefits",
    },
    {
      title: "5 tools for better image management",
      excerpt: "Discover powerful tools that will help you organize and manage your growing image library.",
      date: "April 12, 2023",
      slug: "tools-better-image-management",
    },
  ]

return (
    <div className="flex min-h-screen flex-col">
      <LandingNavbar />
      <main className="flex-1">
        <div className="container mx-auto py-16 px-4 md:px-6">
          <div className="text-center mb-16">
            <h1 className="text-4xl md:text-5xl font-bold mb-4">Our Blog</h1>
            <p className="text-xl text-muted-foreground max-w-[800px] mx-auto">
              The latest news, tips, and updates about image hosting and optimization.
            </p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {blogPosts.map((post, index) => (
              <div
                key={index}
                className="border rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow"
              >
                <div className="h-48 bg-muted"></div>
                <div className="p-6">
                  <p className="text-sm text-muted-foreground mb-2">{post.date}</p>
                  <h2 className="text-xl font-bold mb-2">{post.title}</h2>
                  <p className="text-muted-foreground mb-4">{post.excerpt}</p>
                  <Button asChild variant="outline">
                    <Link href={`/blog/${post.slug}`}>Read More</Link>
                  </Button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </main>
      <LandingFooter />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/about/page.tsx" isMerged="true"
import type { Metadata } from "next"
import { LandingNavbar } from "@/components/landing/navbar"
import { LandingFooter } from "@/components/landing/footer"

export const metadata: Metadata = {
  title: "About | ImageVault",
  description: "Learn about ImageVault - our mission, team, and the story behind our image hosting platform.",
}

export default function AboutPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <LandingNavbar />
      <main className="flex-1">
        <div className="container mx-auto py-16 px-4 md:px-6">
          <div className="text-center mb-16">
            <h1 className="text-4xl md:text-5xl font-bold mb-4">About ImageVault</h1>
            <p className="text-xl text-muted-foreground max-w-[800px] mx-auto">
              Our mission is to provide the fastest, most reliable image hosting platform for creators and businesses.
            </p>
          </div>

<div className="grid md:grid-cols-2 gap-12 items-center mb-20">
            <div>
              <h2 className="text-3xl font-bold mb-4">Our Story</h2>
              <p className="text-lg mb-4">
                ImageVault was founded in 2023 by a team of designers and developers who were frustrated with the
                limitations of existing image hosting solutions.
              </p>
              <p className="text-lg mb-4">
                We built ImageVault to solve real problems: slow loading times, complex interfaces, and lack of useful
                analytics. Our platform combines cutting-edge technology with thoughtful design to create the best
                possible experience for managing and sharing images.
              </p>
              <p className="text-lg">
                Today, ImageVault serves thousands of customers around the world, from individual creators to large
                enterprises. We're constantly innovating and improving our platform based on user feedback.
              </p>
            </div>
            <div className="bg-muted aspect-video rounded-lg"></div>
          </div>

<div className="mb-20">
            <h2 className="text-3xl font-bold mb-8 text-center">Our Values</h2>
            <div className="grid md:grid-cols-3 gap-8">
              <div className="p-6 border rounded-lg">
                <h3 className="text-xl font-bold mb-2">Security First</h3>
                <p>
                  We prioritize the security and privacy of your data above all else, with robust measures to protect
                  your images.
                </p>
              </div>
              <div className="p-6 border rounded-lg">
                <h3 className="text-xl font-bold mb-2">Performance Obsessed</h3>
                <p>
                  We're relentlessly focused on speed and reliability, ensuring your images load quickly, every time.
                </p>
              </div>
              <div className="p-6 border rounded-lg">
                <h3 className="text-xl font-bold mb-2">User-Centered Design</h3>
                <p>
                  We build features based on real user needs, with intuitive interfaces that make image management
                  effortless.
                </p>
              </div>
            </div>
          </div>

<div>
            <h2 className="text-3xl font-bold mb-8 text-center">Meet the Team</h2>
            <div className="grid md:grid-cols-4 gap-8">
              {[1, 2, 3, 4].map((i) => (
                <div key={i} className="text-center">
                  <div className="aspect-square bg-muted rounded-full w-48 mx-auto mb-4"></div>
                  <h3 className="text-xl font-bold">Team Member {i}</h3>
                  <p className="text-muted-foreground">Co-Founder & CEO</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </main>
      <LandingFooter />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/contact/page.tsx" isMerged="true"
import type { Metadata } from "next"
import { LandingNavbar } from "@/components/landing/navbar"
import { LandingFooter } from "@/components/landing/footer"
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 { Mail, MessageSquare, MapPin, Phone } from "lucide-react"

export const metadata: Metadata = {
  title: "Contact Us | ImageVault",
  description: "Get in touch with the ImageVault team. We're here to help with any questions or feedback.",
}

export default function ContactPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <LandingNavbar />
      <main className="flex-1">
        <div className="container mx-auto py-16 px-4 md:px-6">
          <div className="text-center mb-16">
            <h1 className="text-4xl md:text-5xl font-bold mb-4">Contact Us</h1>
            <p className="text-xl text-muted-foreground max-w-[800px] mx-auto">
              Have questions or feedback? We'd love to hear from you.
            </p>
          </div>

<div className="grid md:grid-cols-5 gap-8 max-w-6xl mx-auto">
            <div className="md:col-span-2 space-y-8">
              <div>
                <h2 className="text-2xl font-bold mb-4">Get In Touch</h2>
                <p className="text-muted-foreground mb-8">
                  Our team is here to help with any questions or feedback you might have about ImageVault.
                </p>
              </div>

<div className="space-y-6">
                <div className="flex items-start gap-4">
                  <div className="bg-primary/10 p-3 rounded-full">
                    <Mail className="h-5 w-5 text-primary" />
                  </div>
                  <div>
                    <h3 className="font-medium">Email Us</h3>
                    <p className="text-muted-foreground">support@imagevault.com</p>
                  </div>
                </div>

<div className="flex items-start gap-4">
                  <div className="bg-primary/10 p-3 rounded-full">
                    <MessageSquare className="h-5 w-5 text-primary" />
                  </div>
                  <div>
                    <h3 className="font-medium">Live Chat</h3>
                    <p className="text-muted-foreground">Available Monday-Friday, 9am-5pm PT</p>
                  </div>
                </div>

<div className="flex items-start gap-4">
                  <div className="bg-primary/10 p-3 rounded-full">
                    <MapPin className="h-5 w-5 text-primary" />
                  </div>
                  <div>
                    <h3 className="font-medium">Office</h3>
                    <p className="text-muted-foreground">123 Market Street, San Francisco, CA 94103</p>
                  </div>
                </div>

<div className="flex items-start gap-4">
                  <div className="bg-primary/10 p-3 rounded-full">
                    <Phone className="h-5 w-5 text-primary" />
                  </div>
                  <div>
                    <h3 className="font-medium">Phone</h3>
                    <p className="text-muted-foreground">(123) 456-7890</p>
                  </div>
                </div>
              </div>
            </div>

<Card className="md:col-span-3">
              <CardHeader>
                <CardTitle>Send a Message</CardTitle>
                <CardDescription>
                  Fill out the form below and we'll get back to you as soon as possible.
                </CardDescription>
              </CardHeader>
              <CardContent>
                <form className="space-y-6">
                  <div className="grid md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="name">Name</Label>
                      <Input id="name" placeholder="Your name" />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="email">Email</Label>
                      <Input id="email" type="email" placeholder="Your email" />
                    </div>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="subject">Subject</Label>
                    <Input id="subject" placeholder="Subject of your message" />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="message">Message</Label>
                    <Textarea id="message" placeholder="Your message" rows={5} />
                  </div>

<Button type="submit" className="w-full">
                    Send Message
                  </Button>
                </form>
              </CardContent>
            </Card>
          </div>
        </div>
      </main>
      <LandingFooter />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/help/page.tsx" isMerged="true"
import type { Metadata } from "next"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { Book, HelpCircle, Lightbulb, Video } from "lucide-react"

export const metadata: Metadata = {
  title: "Help & Documentation | ImageVault",
  description: "Get help with using ImageVault. Find answers to common questions and learn how to use all features.",
}

export default function HelpPage() {
  const faqs = [
    {
      question: "How do I upload images?",
      answer:
        "To upload images, navigate to the Upload page from the dashboard sidebar. You can drag and drop files or click to browse your computer. Once selected, click the Upload button to start the process.",
    },
    {
      question: "What file formats are supported?",
      answer:
        "ImageVault supports all major image formats including JPEG, PNG, GIF, WebP, AVIF, and SVG. Each format has its own advantages, with WebP generally offering the best combination of quality and compression.",
    },
    {
      question: "How do I share an image?",
      answer:
        "Open any image from your gallery by clicking on it. In the image details page, you'll find sharing options under the 'Share' tab. You can copy the direct link, get HTML/Markdown embed code, or share directly to specific users via email.",
    },
    {
      question: "How do I organize my images into folders?",
      answer:
        "Navigate to the Folders section from the dashboard sidebar. Here you can create new folders, and then move images into them from the image gallery. Simply select an image, click the three-dot menu, and choose 'Move to folder'.",
    },
    {
      question: "Can I make my images private?",
      answer:
        "Yes! When uploading an image or editing an existing one, you can toggle the 'Public' switch to control visibility. Private images are only visible to you and people you explicitly share them with.",
    },
    {
      question: "What analytics are available?",
      answer:
        "ImageVault provides comprehensive analytics including views, downloads, and referrers for each image. You can see which images are most popular, where your traffic is coming from, and how your images are being used across the web.",
    },
  ]

return (
    <div className="flex-1 space-y-6 p-4 md:p-8 pt-6">
      <div className="flex items-center justify-between">
        <h2 className="text-3xl font-bold tracking-tight">Help & Documentation</h2>
      </div>

<div className="grid gap-6 md:grid-cols-3">
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="flex items-center gap-2">
              <Book className="h-5 w-5 text-primary" />
              Documentation
            </CardTitle>
            <CardDescription>Detailed guides on all features</CardDescription>
          </CardHeader>
          <CardContent>
            <p className="text-sm text-muted-foreground">
              Our comprehensive documentation covers everything from getting started to advanced features. Learn how to
              make the most of ImageVault.
            </p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="pb-3">
            <CardTitle className="flex items-center gap-2">
              <Video className="h-5 w-5 text-primary" />
              Video Tutorials
            </CardTitle>
            <CardDescription>Step-by-step video guides</CardDescription>
          </CardHeader>
          <CardContent>
            <p className="text-sm text-muted-foreground">
              Watch our tutorial videos to see ImageVault in action. Visual guides for all major features and common
              workflows.
            </p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="pb-3">
            <CardTitle className="flex items-center gap-2">
              <Lightbulb className="h-5 w-5 text-primary" />
              Tips & Tricks
            </CardTitle>
            <CardDescription>Get the most out of ImageVault</CardDescription>
          </CardHeader>
          <CardContent>
            <p className="text-sm text-muted-foreground">
              Discover power-user tips and shortcuts to streamline your workflow and get more done with less effort.
            </p>
          </CardContent>
        </Card>
      </div>

<div className="space-y-4">
        <h3 className="text-xl font-semibold flex items-center gap-2">
          <HelpCircle className="h-5 w-5" />
          Frequently Asked Questions
        </h3>

<Accordion type="single" collapsible className="w-full">
          {faqs.map((faq, index) => (
            <AccordionItem key={index} value={`faq-${index}`}>
              <AccordionTrigger className="text-left">{faq.question}</AccordionTrigger>
              <AccordionContent>{faq.answer}</AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Still need help?</CardTitle>
          <CardDescription>Our support team is ready to assist you</CardDescription>
        </CardHeader>
        <CardContent className="flex flex-col sm:flex-row gap-4">
          <div className="flex-1 rounded-md border p-4">
            <h4 className="font-medium mb-2">Email Support</h4>
            <p className="text-sm text-muted-foreground mb-4">
              Send us an email and we'll get back to you within 24 hours.
            </p>
            <p className="text-sm font-medium">support@imagevault.com</p>
          </div>
          <div className="flex-1 rounded-md border p-4">
            <h4 className="font-medium mb-2">Live Chat</h4>
            <p className="text-sm text-muted-foreground mb-4">Chat with our support team during business hours.</p>
            <p className="text-sm font-medium">Available 9am-5pm PT, Monday-Friday</p>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/terms/page.tsx" isMerged="true"
import type { Metadata } from "next"
import { LandingNavbar } from "@/components/landing/navbar"
import { LandingFooter } from "@/components/landing/footer"

export const metadata: Metadata = {
  title: "Terms of Service | ImageVault",
  description: "Read the terms of service for ImageVault. By using our service, you agree to these terms.",
}

export default function TermsPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <LandingNavbar />
      <main className="flex-1">
        <div className="container mx-auto py-16 px-4 md:px-6">
          <div className="text-center mb-16">
            <h1 className="text-4xl font-bold mb-4">Terms of Service</h1>
            <p className="text-lg text-muted-foreground max-w-[800px] mx-auto">Last Updated: April 20, 2023</p>
          </div>

<div className="prose dark:prose-invert max-w-3xl mx-auto">
            <p>
              Welcome to ImageVault. By using our services, you agree to be bound by the following terms and conditions.
            </p>

<h2>1. Acceptance of Terms</h2>
            <p>
              By accessing or using ImageVault, you agree to be bound by these Terms of Service. If you do not agree to
              all the terms and conditions, you may not access or use our services.
            </p>

<h2>2. Description of Service</h2>
            <p>
              ImageVault provides an image hosting and optimization platform that allows users to upload, store, manage,
              and share images.
            </p>

<h2>3. User Accounts</h2>
            <p>
              To use certain features of ImageVault, you must register for an account. You agree to provide accurate
              information and keep your account information updated. You are responsible for maintaining the
              confidentiality of your account credentials and for all activities that occur under your account.
            </p>

<h2>4. Acceptable Use</h2>
            <p>
              You agree not to use ImageVault for any unlawful purpose or in any way that violates these terms.
              Prohibited content includes but is not limited to:
            </p>
            <ul>
              <li>Illegal content or content that promotes illegal activities</li>
              <li>Content that infringes on intellectual property rights</li>
              <li>Pornographic or sexually explicit content</li>
              <li>Violent or hateful content</li>
              <li>Content that harasses, intimidates, or bullies others</li>
              <li>Malware, viruses, or other harmful code</li>
            </ul>

<h2>5. Content Ownership</h2>
            <p>
              You retain all ownership rights to the content you upload to ImageVault. By uploading content, you grant
              ImageVault a non-exclusive, worldwide, royalty-free license to use, store, and display your content for
              the purpose of providing and improving our services.
            </p>

<h2>6. Privacy</h2>
            <p>
              Your privacy is important to us. Please refer to our Privacy Policy for information about how we collect,
              use, and share your data.
            </p>

<h2>7. Service Modifications</h2>
            <p>
              ImageVault reserves the right to modify, suspend, or discontinue any aspect of the service at any time,
              with or without notice.
            </p>

<h2>8. Termination</h2>
            <p>
              ImageVault reserves the right to terminate your access to the service for any reason, including violations
              of these terms. Upon termination, your account and access to the service will be disabled.
            </p>

<h2>9. Limitation of Liability</h2>
            <p>
              To the maximum extent permitted by law, ImageVault shall not be liable for any indirect, incidental,
              special, consequential, or punitive damages resulting from your use of or inability to use the service.
            </p>

<h2>10. Changes to Terms</h2>
            <p>
              ImageVault may update these terms from time to time. We will notify you of any significant changes and
              give you the opportunity to review the revised terms before they take effect.
            </p>

<h2>11. Contact Us</h2>
            <p>If you have any questions about these Terms of Service, please contact us at legal@imagevault.com.</p>
          </div>
        </div>
      </main>
      <LandingFooter />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/privacy/page.tsx" isMerged="true"
import type { Metadata } from "next"
import { LandingNavbar } from "@/components/landing/navbar"
import { LandingFooter } from "@/components/landing/footer"

export const metadata: Metadata = {
  title: "Privacy Policy | ImageVault",
  description: "Learn how ImageVault collects, uses, and protects your personal information.",
}

export default function PrivacyPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <LandingNavbar />
      <main className="flex-1">
        <div className="container mx-auto py-16 px-4 md:px-6">
          <div className="text-center mb-16">
            <h1 className="text-4xl font-bold mb-4">Privacy Policy</h1>
            <p className="text-lg text-muted-foreground max-w-[800px] mx-auto">Last Updated: April 20, 2023</p>
          </div>

<div className="prose dark:prose-invert max-w-3xl mx-auto">
            <p>
              At ImageVault, we take your privacy seriously. This Privacy Policy explains how we collect, use, and
              protect your personal information.
            </p>

<h2>1. Information We Collect</h2>
            <p>We collect the following types of information:</p>
            <ul>
              <li>
                <strong>Account Information:</strong> When you create an account, we collect your name, email address,
                and password.
              </li>
              <li>
                <strong>Usage Information:</strong> We collect information about how you use our service, including the
                images you upload, your activity on the platform, and your interactions with other users.
              </li>
              <li>
                <strong>Device Information:</strong> We collect information about the device you use to access
                ImageVault, including IP address, browser type, and operating system.
              </li>
              <li>
                <strong>Cookies and Similar Technologies:</strong> We use cookies and similar technologies to improve
                your experience, understand how you use our service, and personalize content.
              </li>
            </ul>

<h2>2. How We Use Your Information</h2>
            <p>We use your information for the following purposes:</p>
            <ul>
              <li>To provide and maintain our service</li>
              <li>To process and complete transactions</li>
              <li>To send you technical notices, updates, and support messages</li>
              <li>To respond to your comments and questions</li>
              <li>To analyze usage patterns and improve our service</li>
              <li>To detect, prevent, and address technical issues and abuse</li>
            </ul>

<h2>3. Information Sharing</h2>
            <p>
              We do not sell your personal information. We may share your information in the following circumstances:
            </p>
            <ul>
              <li>
                <strong>Service Providers:</strong> We may share your information with third-party service providers who
                help us operate our service.
              </li>
              <li>
                <strong>Legal Requirements:</strong> We may disclose your information if required by law or in response
                to valid requests from public authorities.
              </li>
              <li>
                <strong>Business Transfers:</strong> If ImageVault is involved in a merger, acquisition, or sale of
                assets, your information may be transferred as part of that transaction.
              </li>
              <li>
                <strong>With Your Consent:</strong> We may share your information with third parties when you explicitly
                consent to the disclosure.
              </li>
            </ul>

<h2>4. Data Security</h2>
            <p>
              We implement appropriate technical and organizational measures to protect your personal information
              against unauthorized access, alteration, disclosure, or destruction.
            </p>

<h2>5. Your Rights</h2>
            <p>Depending on your location, you may have the following rights regarding your personal information:</p>
            <ul>
              <li>The right to access your personal information</li>
              <li>The right to correct inaccurate or incomplete information</li>
              <li>The right to delete your personal information</li>
              <li>The right to restrict or object to processing of your personal information</li>
              <li>The right to data portability</li>
              <li>The right to withdraw consent</li>
            </ul>

<h2>6. Children's Privacy</h2>
            <p>
              ImageVault is not intended for children under the age of 13. We do not knowingly collect personal
              information from children under 13.
            </p>

<h2>7. International Data Transfers</h2>
            <p>
              Your information may be transferred to and processed in countries other than the country in which you
              reside. These countries may have different data protection laws.
            </p>

<h2>8. Changes to This Privacy Policy</h2>
            <p>
              We may update this Privacy Policy from time to time. We will notify you of any changes by posting the new
              Privacy Policy on this page and updating the "Last Updated" date.
            </p>

<h2>9. Contact Us</h2>
            <p>If you have any questions about this Privacy Policy, please contact us at privacy@imagevault.com.</p>
          </div>
        </div>
      </main>
      <LandingFooter />
    </div>
  )
}
[V0_FILE]typescript:file="lib/db.ts" isFixed="true" isQuickEdit="true" isMerged="true"
import { neon, neonConfig } from "@neondatabase/serverless"
import ws from "ws"

neonConfig.webSocketConstructor = ws

// Initialize the SQL client with the database URL
// Add error handling to prevent crashes on connection issues
const connectionString = process.env.DATABASE_URL || ""

if (!connectionString) {
  console.error("DATABASE_URL environment variable is not set")
}

export const sql = neon(connectionString)

// Function to convert snake_case to camelCase
const toCamelCase = (str: string): string => {
  return str.replace(/([-_][a-z])/gi, ($1) => {
    return $1.toUpperCase().replace("-", "").replace("_", "")
  })
}

// Function to convert object keys from snake_case to camelCase
const convertKeysToCamelCase = <T extends Record<string, any>>(obj: T): Record<string, any> => {
  const newObj: Record<string, any> = {}
  Object.keys(obj).forEach((key) => {
    const camelKey = toCamelCase(key)
    newObj[camelKey] = obj[key]
  })
  return newObj
}

// Function to convert array of objects from snake_case to camelCase
const convertArrayToCamelCase = <T extends Record<string, any>>(arr: T[]): Record<string, any>[] => {
  return arr.map(convertKeysToCamelCase)
}

// Helper function to execute SQL queries with error handling
export async function executeQuery<T = any>(query: string, params: any[] = []): Promise<T[]> {
  try {
    const result = await sql(query, params)
    return result as T[]
  } catch (error) {
    console.error("Database query error:", error)
    // Return empty array instead of throwing to prevent page crashes
    return []
  }
}

// Helper function to execute SQL queries with camelCase conversion
const queryCamelCase = async <T = any>(query: string, params: any[] = []): Promise<Record<string, any>[]> => {
  const result = await executeQuery<T>(query, params)
  return convertArrayToCamelCase(result as any[])
}

// Helper function to get a single row with camelCase conversion
const queryOne = async <T = any>(query: string, params: any[] = []): Promise<Record<string, any> | null> => {
  const results = await queryCamelCase<T>(query, params)
  return results.length > 0 ? results[0] : null
}

export { toCamelCase, convertKeysToCamelCase, convertArrayToCamelCase, queryCamelCase, queryOne }
[V0_FILE]typescript:file="lib/user-roles.ts" isMerged="true"
export enum UserRole {
  USER = "USER",
  EDITOR = "EDITOR",
  ADMIN = "ADMIN",
}

// Export as both default and named export for maximum compatibility
export default UserRole
[V0_FILE]javascript:file="lib/auth-utils.server.js" isMerged="true"
// CommonJS module for server-side auth utilities
const { sql } = require("./db")

// Define UserRole directly to avoid import issues
const UserRole = {
  USER: "USER",
  EDITOR: "EDITOR",
  ADMIN: "ADMIN",
}

/**
 * Get user role from database with robust error handling
 */
async function getUserRole(userId) {
  if (!userId) {
    return UserRole.USER
  }

try {
    const result = await sql`
      SELECT role FROM "User" WHERE id = ${userId}
    `

if (!result || result.length === 0) {
      return UserRole.USER
    }

return result[0].role
  } catch (error) {
    console.error("Error fetching user role:", error)
    return UserRole.USER
  }
}

/**
 * Check if user has permission
 */
async function checkPermission(userId, resource, action) {
  if (!userId) return false

try {
    // First check if user is admin (admins have all permissions)
    const userRole = await getUserRole(userId)
    if (userRole === UserRole.ADMIN) {
      return true
    }

return result.length > 0
  } catch (error) {
    console.error("Error checking permission:", error)
    return false
  }
}

// Export all functions
module.exports = {
  getUserRole,
  checkPermission,
  UserRole,
}
[V0_FILE]typescript:file="lib/server-auth.ts" isMerged="true"
import "server-only"
import { auth } from "@clerk/nextjs/server"
import { redirect } from "next/navigation"

// Import from the CommonJS module
const authUtils = require("./auth-utils.server.js")
const { UserRole } = authUtils

// Get the current authenticated user ID, redirecting if not authenticated
export async function getCurrentUserId(): Promise<string> {
  const { userId } = auth()

if (!userId) {
    redirect("/sign-in")
  }

return userId
}

// Get the current user's role
export async function getCurrentUserRole(): Promise<string> {
  const userId = await getCurrentUserId()
  return authUtils.getUserRole(userId)
}

// Get a user's role by their ID
export async function getUserRole(userId: string): Promise<string> {
  return authUtils.getUserRole(userId)
}

// Require a specific role, redirecting if the user doesn't have it
export async function requireRole(role: string): Promise<string> {
  const userId = await getCurrentUserId()
  const userRole = await getUserRole(userId)

if (userRole !== role && userRole !== UserRole.ADMIN) {
    redirect("/dashboard")
  }

return userId
}

// Check if user has admin role
export async function isAdmin(): Promise<boolean> {
  const userRole = await getCurrentUserRole()
  return userRole === UserRole.ADMIN
}
[V0_FILE]typescript:file="app/api/users/me/role/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { auth } from "@clerk/nextjs/server"

// Import the getUserRole function from the CommonJS module
const { getUserRole } = require("@/lib/auth-utils.server.js")

export async function GET() {
  try {
    const { userId } = auth()

if (!userId) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const role = await getUserRole(userId)
    return NextResponse.json({ role })
  } catch (error) {
    console.error("Error fetching current user role:", error)
    // Return a default role instead of an error to prevent UI crashes
    return NextResponse.json({ role: "USER" })
  }
}
[V0_FILE]typescript:file="components/dashboard/overview.tsx" isMerged="true"
"use client"

import Link from "next/link"
import Image from "next/image"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { ArrowUpRight, ImageIcon, Upload, BarChart, Clock, Eye, Download } from "lucide-react"

interface OverviewProps {
  stats: {
    total_images: number
    total_size: number
    total_views: number
    total_downloads: number
  }
  recentImages: any[]
}

export function DashboardOverview({ stats, recentImages }: OverviewProps) {
  // Ensure stats has default values to prevent errors
  const safeStats = {
    total_images: stats?.total_images || 0,
    total_size: stats?.total_size || 0,
    total_views: stats?.total_views || 0,
    total_downloads: stats?.total_downloads || 0,
  }

// Ensure recentImages is an array
  const safeRecentImages = Array.isArray(recentImages) ? recentImages : []

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

// Format date
  const formatDate = (dateString: string) => {
    try {
      const date = new Date(dateString)
      return date.toLocaleDateString("en-US", {
        month: "short",
        day: "numeric",
        year: "numeric",
      })
    } catch (error) {
      return "Unknown date"
    }
  }

return (
    <div className="grid gap-4 md:gap-8">
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        <Card className="dashboard-card">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Images</CardTitle>
            <ImageIcon className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{safeStats.total_images.toLocaleString()}</div>
            <p className="text-xs text-muted-foreground">+{Math.floor(Math.random() * 10) + 1} in the last 24 hours</p>
          </CardContent>
        </Card>
        <Card className="dashboard-card">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Storage Used</CardTitle>
            <Upload className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{formatBytes(safeStats.total_size)}</div>
            <p className="text-xs text-muted-foreground">
              {((safeStats.total_size / (1024 * 1024 * 1024)) * 100).toFixed(1)}% of 1GB used
            </p>
          </CardContent>
        </Card>
        <Card className="dashboard-card">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Views</CardTitle>
            <Eye className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{safeStats.total_views.toLocaleString()}</div>
            <p className="text-xs text-muted-foreground">
              +{Math.floor(Math.random() * 100) + 10} in the last 24 hours
            </p>
          </CardContent>
        </Card>
        <Card className="dashboard-card">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Downloads</CardTitle>
            <Download className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{safeStats.total_downloads.toLocaleString()}</div>
            <p className="text-xs text-muted-foreground">+{Math.floor(Math.random() * 20) + 5} in the last 24 hours</p>
          </CardContent>
        </Card>
      </div>

<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
        <Card className="dashboard-card md:col-span-4">
          <CardHeader>
            <CardTitle>Recent Activity</CardTitle>
            <CardDescription>Your recent image uploads and views.</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="h-[300px] dashboard-gradient rounded-md flex items-center justify-center">
              <div className="text-center">
                <BarChart className="h-10 w-10 text-muted-foreground mx-auto mb-2" />
                <p className="text-sm text-muted-foreground">Activity chart will appear here</p>
                <p className="text-xs text-muted-foreground mt-1">Upload more images to see trends</p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card className="dashboard-card md:col-span-3">
          <CardHeader>
            <CardTitle>Quick Actions</CardTitle>
            <CardDescription>Common tasks and tools.</CardDescription>
          </CardHeader>
          <CardContent className="grid gap-4">
            <div className="grid grid-cols-2 gap-4">
              <Button asChild className="h-auto flex-col py-4 justify-start items-start">
                <Link href="/dashboard/upload">
                  <Upload className="h-5 w-5 mb-2" />
                  <div className="space-y-1 text-left">
                    <p className="font-medium">Upload Images</p>
                    <p className="text-xs text-muted-foreground">Add new images to your library</p>
                  </div>
                </Link>
              </Button>
              <Button asChild variant="outline" className="h-auto flex-col py-4 justify-start items-start">
                <Link href="/dashboard/images">
                  <ImageIcon className="h-5 w-5 mb-2" />
                  <div className="space-y-1 text-left">
                    <p className="font-medium">Manage Images</p>
                    <p className="text-xs text-muted-foreground">View and edit your images</p>
                  </div>
                </Link>
              </Button>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <Button asChild variant="outline" className="h-auto flex-col py-4 justify-start items-start">
                <Link href="/dashboard/analytics">
                  <BarChart className="h-5 w-5 mb-2" />
                  <div className="space-y-1 text-left">
                    <p className="font-medium">Analytics</p>
                    <p className="text-xs text-muted-foreground">View image performance</p>
                  </div>
                </Link>
              </Button>
              <Button asChild variant="outline" className="h-auto flex-col py-4 justify-start items-start">
                <Link href="/tools">
                  <ArrowUpRight className="h-5 w-5 mb-2" />
                  <div className="space-y-1 text-left">
                    <p className="font-medium">Image Tools</p>
                    <p className="text-xs text-muted-foreground">Optimize and convert</p>
                  </div>
                </Link>
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>

<Card className="dashboard-card">
        <CardHeader>
          <CardTitle>Recent Uploads</CardTitle>
          <CardDescription>Your most recently uploaded images.</CardDescription>
        </CardHeader>
        <CardContent>
          {safeRecentImages.length === 0 ? (
            <div className="flex h-[200px] flex-col items-center justify-center rounded-md border border-dashed p-8 text-center">
              <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
                <ImageIcon className="h-6 w-6 text-primary" />
              </div>
              <h3 className="mt-4 text-lg font-semibold">No images yet</h3>
              <p className="mt-2 text-sm text-muted-foreground">Upload your first image to get started</p>
              <Button asChild className="mt-4">
                <Link href="/dashboard/upload">Upload Images</Link>
              </Button>
            </div>
          ) : (
            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
              {safeRecentImages.map((image) => (
                <Link
                  key={image.id}
                  href={`/dashboard/images/${image.id}`}
                  className="group relative aspect-square rounded-md overflow-hidden border bg-muted/40 image-card"
                >
                  <div className="absolute inset-0 flex items-center justify-center">
                    <Image
                      src={image.publicUrl || "/placeholder.svg"}
                      alt={image.filename || "Image"}
                      fill
                      className="object-cover transition-all group-hover:scale-105"
                    />
                  </div>
                  <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-end p-2">
                    <p className="text-xs text-white truncate">{image.filename || "Untitled"}</p>
                    <div className="flex items-center gap-2 mt-1">
                      <div className="flex items-center gap-1 text-[10px] text-white/80">
                        <Clock className="h-3 w-3" />
                        <span>{formatDate(image.createdAt)}</span>
                      </div>
                      <div className="flex items-center gap-1 text-[10px] text-white/80">
                        <Eye className="h-3 w-3" />
                        <span>{image.views || 0}</span>
                      </div>
                    </div>
                  </div>
                </Link>
              ))}
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]sql:file="scripts/check-tables.sql" isMerged="true"
-- Check if User table exists
SELECT EXISTS (
  SELECT FROM information_schema.tables 
  WHERE table_schema = 'public' 
  AND table_name = 'User'
) as user_table_exists;

-- Check if Image table exists
SELECT EXISTS (
  SELECT FROM information_schema.tables 
  WHERE table_schema = 'public' 
  AND table_name = 'Image'
) as image_table_exists;

-- Check if Permission table exists
SELECT EXISTS (
  SELECT FROM information_schema.tables 
  WHERE table_schema = 'public' 
  AND table_name = 'Permission'
) as permission_table_exists;

-- Check User table columns
SELECT column_name, data_type 
FROM information_schema.columns 
WHERE table_schema = 'public' 
AND table_name = 'User';

-- Check Image table columns
SELECT column_name, data_type 
FROM information_schema.columns 
WHERE table_schema = 'public' 
AND table_name = 'Image';
[V0_FILE]typescript:file="scripts/init-db.ts" isMerged="true"
import { PrismaClient } from "@prisma/client"

const prisma = new PrismaClient()

async function main() {
  console.log("Starting database initialization...")

// Create User table if it doesn't exist
  try {
    await prisma.$executeRaw`
      CREATE TABLE IF NOT EXISTS "User" (
        id TEXT PRIMARY KEY,
        email TEXT UNIQUE NOT NULL,
        name TEXT,
        role TEXT NOT NULL DEFAULT 'USER',
        "createdAt" TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
        "updatedAt" TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
      )
    `
    console.log("User table created or already exists")
  } catch (error) {
    console.error("Error creating User table:", error)
  }

// Create Image table if it doesn't exist
  try {
    await prisma.$executeRaw`
      CREATE TABLE IF NOT EXISTS "Image" (
        id TEXT PRIMARY KEY,
        "userId" TEXT NOT NULL,
        filename TEXT NOT NULL,
        key TEXT UNIQUE NOT NULL,
        "publicUrl" TEXT NOT NULL,
        "contentType" TEXT NOT NULL,
        size INTEGER NOT NULL,
        width INTEGER,
        height INTEGER,
        "isPublic" BOOLEAN NOT NULL DEFAULT true,
        folder TEXT,
        views INTEGER NOT NULL DEFAULT 0,
        downloads INTEGER NOT NULL DEFAULT 0,
        "expiresAt" TIMESTAMP,
        metadata JSONB,
        "createdAt" TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
        "updatedAt" TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
        "deletedAt" TIMESTAMP,
        FOREIGN KEY ("userId") REFERENCES "User"(id) ON DELETE CASCADE
      )
    `
    console.log("Image table created or already exists")
  } catch (error) {
    console.error("Error creating Image table:", error)
  }

// Create Permission table if it doesn't exist
  try {
    await prisma.$executeRaw`
      CREATE TABLE IF NOT EXISTS "Permission" (
        id TEXT PRIMARY KEY,
        "roleId" TEXT NOT NULL,
        resource TEXT NOT NULL,
        action TEXT NOT NULL,
        "createdAt" TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
        "updatedAt" TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
        UNIQUE("roleId", resource, action)
      )
    `
    console.log("Permission table created or already exists")
  } catch (error) {
    console.error("Error creating Permission table:", error)
  }

// Seed basic permissions
  try {
    // Admin permissions (all access)
    const adminPermissions = [
      { roleId: "ADMIN", resource: "images", action: "create" },
      { roleId: "ADMIN", resource: "images", action: "read" },
      { roleId: "ADMIN", resource: "images", action: "update" },
      { roleId: "ADMIN", resource: "images", action: "delete" },
      { roleId: "ADMIN", resource: "users", action: "read" },
      { roleId: "ADMIN", resource: "users", action: "update" },
    ]

// User permissions (limited access)
    const userPermissions = [
      { roleId: "USER", resource: "images", action: "create" },
      { roleId: "USER", resource: "images", action: "read" },
      { roleId: "USER", resource: "images", action: "update" },
      { roleId: "USER", resource: "images", action: "delete" },
    ]

// Insert permissions
    for (const perm of [...adminPermissions, ...userPermissions]) {
      await prisma.permission.upsert({
        where: {
          roleId_resource_action: {
            roleId: perm.roleId,
            resource: perm.resource,
            action: perm.action,
          },
        },
        update: {},
        create: {
          id: `${perm.roleId}_${perm.resource}_${perm.action}`,
          roleId: perm.roleId,
          resource: perm.resource,
          action: perm.action,
        },
      })
    }

console.log("Basic permissions seeded")
  } catch (error) {
    console.error("Error seeding permissions:", error)
  }

console.log("Database initialization completed")
}

main()
  .catch((e) => {
    console.error(e)
    process.exit(1)
  })
  .finally(async () => {
    await prisma.$disconnect()
  })
[V0_FILE]typescript:file="lib/db-health.ts" isMerged="true"
import { sql } from "./db"

export async function checkDatabaseHealth() {
  try {
    // Check connection
    const connectionTest = await sql`SELECT 1 as connected`
    if (!connectionTest || !connectionTest[0] || connectionTest[0].connected !== 1) {
      return {
        status: "error",
        message: "Could not connect to database",
        details: null,
      }
    }

// Check if required tables exist
    const tableCheck = await sql`
      SELECT 
        (SELECT EXISTS (
          SELECT FROM information_schema.tables 
          WHERE table_schema = 'public' 
          AND table_name = 'User'
        )) as user_table_exists,
        (SELECT EXISTS (
          SELECT FROM information_schema.tables 
          WHERE table_schema = 'public' 
          AND table_name = 'Image'
        )) as image_table_exists,
        (SELECT EXISTS (
          SELECT FROM information_schema.tables 
          WHERE table_schema = 'public' 
          AND table_name = 'Permission'
        )) as permission_table_exists
    `

const tableStatus = tableCheck[0]

if (!tableStatus.user_table_exists || !tableStatus.image_table_exists || !tableStatus.permission_table_exists) {
      return {
        status: "warning",
        message: "Some required tables are missing",
        details: tableStatus,
      }
    }

// Check if we can query the User table
    const userTest = await sql`SELECT COUNT(*) as count FROM "User"`

return {
      status: "healthy",
      message: "Database connection and schema are valid",
      details: {
        tables: tableStatus,
        userCount: userTest[0].count,
      },
    }
  } catch (error) {
    return {
      status: "error",
      message: error instanceof Error ? error.message : "Unknown database error",
      details: error,
    }
  }
}
[V0_FILE]typescript:file="app/api/health/db/route.ts" isFixed="true" isQuickEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import { auth } from "@clerk/nextjs/server"
import { checkDatabaseHealth } from "@/lib/db-health"

export async function GET() {
  const { userId } = auth()

// Only allow authenticated users to check DB health
  if (!userId) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
  }

try {
    const healthStatus = await checkDatabaseHealth()

if (healthStatus.status === "error") {
      return NextResponse.json(healthStatus, { status: 500 })
    }

if (healthStatus.status === "healthy") {
      return NextResponse.json(healthStatus)
    }

if (healthStatus.status === "warning") {
      return NextResponse.json(healthStatus, { status: 200 })
    }

return NextResponse.json(healthStatus)
  } catch (error) {
    return NextResponse.json(
      {
        status: "error",
        message: "Failed to check database health",
        error: error instanceof Error ? error.message : "Unknown error",
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescript:file="lib/permissions.ts" isMerged="true"
import { sql } from "@/lib/db"
import { UserRole } from "@/lib/user-roles"

export async function hasPermission(userId: string, resource: string, action: string): Promise<boolean> {
  if (!userId) return false

try {
    // Get user role
    const userResult = await sql`
      SELECT role FROM "User" WHERE id = ${userId}
    `

if (userResult.length === 0) {
      return false
    }

const userRole = userResult[0].role as UserRole

// Admin always has all permissions
    if (userRole === UserRole.ADMIN) {
      return true
    }

// Check if the user's role has the required permission
    const permissionResult = await sql`
      SELECT 1 FROM "Permission"
      WHERE "roleId" = ${userRole}
      AND resource = ${resource}
      AND action = ${action}
    `

return permissionResult.length > 0
  } catch (error) {
    console.error("Error checking permission:", error)
    return false
  }
}
[V0_FILE]typescript:file="scripts/setup-database.ts" isMerged="true"
import { PrismaClient } from "@prisma/client"
import { UserRole } from "@/lib/user-roles"

const prisma = new PrismaClient()

async function main() {
  console.log("🚀 Starting database setup...")

try {
    // Create database schema using Prisma
    console.log("📊 Creating database schema...")

// This will apply migrations if you're using Prisma migrations
    // Otherwise, it will at least validate the schema
    await prisma.$connect()

console.log("✅ Database connection successful")

// Seed basic user roles and permissions
    console.log("🔑 Seeding permissions...")
    await seedPermissions()

console.log("✅ Database setup completed successfully!")
  } catch (error) {
    console.error("❌ Error during database setup:", error)
    process.exit(1)
  } finally {
    await prisma.$disconnect()
  }
}

async function seedPermissions() {
  // Define permissions for each role
  const permissions = [
    // Admin permissions (full access)
    { roleId: UserRole.ADMIN, resource: "images", action: "create" },
    { roleId: UserRole.ADMIN, resource: "images", action: "read" },
    { roleId: UserRole.ADMIN, resource: "images", action: "update" },
    { roleId: UserRole.ADMIN, resource: "images", action: "delete" },
    { roleId: UserRole.ADMIN, resource: "images", action: "share" },
    { roleId: UserRole.ADMIN, resource: "folders", action: "create" },
    { roleId: UserRole.ADMIN, resource: "folders", action: "read" },
    { roleId: UserRole.ADMIN, resource: "folders", action: "update" },
    { roleId: UserRole.ADMIN, resource: "folders", action: "delete" },
    { roleId: UserRole.ADMIN, resource: "users", action: "read" },
    { roleId: UserRole.ADMIN, resource: "users", action: "update" },
    { roleId: UserRole.ADMIN, resource: "users", action: "delete" },
    { roleId: UserRole.ADMIN, resource: "settings", action: "read" },
    { roleId: UserRole.ADMIN, resource: "settings", action: "update" },
    { roleId: UserRole.ADMIN, resource: "analytics", action: "read" },

// Editor permissions (can manage content but not users/settings)
    { roleId: UserRole.EDITOR, resource: "images", action: "create" },
    { roleId: UserRole.EDITOR, resource: "images", action: "read" },
    { roleId: UserRole.EDITOR, resource: "images", action: "update" },
    { roleId: UserRole.EDITOR, resource: "images", action: "delete" },
    { roleId: UserRole.EDITOR, resource: "images", action: "share" },
    { roleId: UserRole.EDITOR, resource: "folders", action: "create" },
    { roleId: UserRole.EDITOR, resource: "folders", action: "read" },
    { roleId: UserRole.EDITOR, resource: "folders", action: "update" },
    { roleId: UserRole.EDITOR, resource: "folders", action: "delete" },
    { roleId: UserRole.EDITOR, resource: "analytics", action: "read" },

// Regular user permissions (limited access)
    { roleId: UserRole.USER, resource: "images", action: "create" },
    { roleId: UserRole.USER, resource: "images", action: "read" },
    { roleId: UserRole.USER, resource: "images", action: "update" },
    { roleId: UserRole.USER, resource: "images", action: "delete" },
    { roleId: UserRole.USER, resource: "images", action: "share" },
    { roleId: UserRole.USER, resource: "folders", action: "create" },
    { roleId: UserRole.USER, resource: "folders", action: "read" },
    { roleId: UserRole.USER, resource: "folders", action: "update" },
    { roleId: UserRole.USER, resource: "folders", action: "delete" },
    { roleId: UserRole.USER, resource: "analytics", action: "read" },
  ]

// Clear existing permissions to avoid duplicates
  await prisma.permission.deleteMany({})
  console.log("🧹 Cleared existing permissions")

// Insert all permissions
  for (const permission of permissions) {
    await prisma.permission.create({
      data: {
        roleId: permission.roleId,
        resource: permission.resource,
        action: permission.action,
      },
    })
  }

console.log(`✅ Created ${permissions.length} permissions`)
}

// Run the main function
main().catch((e) => {
  console.error(e)
  process.exit(1)
})
[V0_FILE]sql:file="scripts/create-tables.sql" isMerged="true"
-- Create enum type for user roles if it doesn't exist
DO $$
BEGIN
    IF NOT EXISTS (SELECT 1 FROM pg_type WHERE typname = 'userrole') THEN
        CREATE TYPE "UserRole" AS ENUM ('USER', 'EDITOR', 'ADMIN');
    END IF;
END
$$;

-- Create User table if it doesn't exist
CREATE TABLE IF NOT EXISTS "User" (
  id TEXT PRIMARY KEY,
  email TEXT UNIQUE NOT NULL,
  name TEXT,
  role "UserRole" NOT NULL DEFAULT 'USER',
  "storageUsed" BIGINT NOT NULL DEFAULT 0,
  "storageLimit" BIGINT NOT NULL DEFAULT 1073741824, -- 1GB default
  "createdAt" TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT CURRENT_TIMESTAMP,
  "updatedAt" TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT CURRENT_TIMESTAMP
);

-- Create Folder table if it doesn't exist
CREATE TABLE IF NOT EXISTS "Folder" (
  id TEXT PRIMARY KEY,
  name TEXT NOT NULL,
  "userId" TEXT NOT NULL,
  "parentId" TEXT,
  "teamId" TEXT,
  path TEXT NOT NULL,
  "createdAt" TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT CURRENT_TIMESTAMP,
  "updatedAt" TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT CURRENT_TIMESTAMP,
  FOREIGN KEY ("userId") REFERENCES "User"(id) ON DELETE CASCADE,
  FOREIGN KEY ("parentId") REFERENCES "Folder"(id) ON DELETE CASCADE
);

-- Create Image table if it doesn't exist
CREATE TABLE IF NOT EXISTS "Image" (
  id TEXT PRIMARY KEY,
  "userId" TEXT NOT NULL,
  "teamId" TEXT,
  "folderId" TEXT,
  filename TEXT NOT NULL,
  key TEXT UNIQUE NOT NULL,
  "publicUrl" TEXT NOT NULL,
  "thumbnailUrl" TEXT,
  "contentType" TEXT NOT NULL,
  size BIGINT NOT NULL,
  width INTEGER,
  height INTEGER,
  format TEXT NOT NULL,
  "isPublic" BOOLEAN NOT NULL DEFAULT true,
  description TEXT,
  metadata JSONB,
  views INTEGER NOT NULL DEFAULT 0,
  downloads INTEGER NOT NULL DEFAULT 0,
  "expiresAt" TIMESTAMP WITH TIME ZONE,
  "createdAt" TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT CURRENT_TIMESTAMP,
  "updatedAt" TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT CURRENT_TIMESTAMP,
  "deletedAt" TIMESTAMP WITH TIME ZONE,
  FOREIGN KEY ("userId") REFERENCES "User"(id) ON DELETE CASCADE,
  FOREIGN KEY ("folderId") REFERENCES "Folder"(id) ON DELETE SET NULL
);

-- Create ImageAnalytics table if it doesn't exist
CREATE TABLE IF NOT EXISTS "ImageAnalytics" (
  id TEXT PRIMARY KEY,
  "imageId" TEXT NOT NULL,
  views INTEGER NOT NULL DEFAULT 0,
  downloads INTEGER NOT NULL DEFAULT 0,
  shares INTEGER NOT NULL DEFAULT 0,
  "lastViewed" TIMESTAMP WITH TIME ZONE,
  "createdAt" TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT CURRENT_TIMESTAMP,
  "updatedAt" TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT CURRENT_TIMESTAMP,
  FOREIGN KEY ("imageId") REFERENCES "Image"(id) ON DELETE CASCADE
);

-- Create Team table if it doesn't exist
CREATE TABLE IF NOT EXISTS "Team" (
  id TEXT PRIMARY KEY,
  name TEXT NOT NULL,
  description TEXT,
  "createdAt" TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT CURRENT_TIMESTAMP,
  "updatedAt" TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT CURRENT_TIMESTAMP
);

-- Create TeamMember table if it doesn't exist
CREATE TABLE IF NOT EXISTS "TeamMember" (
  id TEXT PRIMARY KEY,
  "teamId" TEXT NOT NULL,
  "userId" TEXT NOT NULL,
  role TEXT NOT NULL DEFAULT 'MEMBER',
  "createdAt" TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT CURRENT_TIMESTAMP,
  "updatedAt" TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT CURRENT_TIMESTAMP,
  UNIQUE("teamId", "userId"),
  FOREIGN KEY ("teamId") REFERENCES "Team"(id) ON DELETE CASCADE,
  FOREIGN KEY ("userId") REFERENCES "User"(id) ON DELETE CASCADE
);

-- Create Permission table if it doesn't exist
CREATE TABLE IF NOT EXISTS "Permission" (
  id TEXT PRIMARY KEY,
  "roleId" TEXT NOT NULL,
  resource TEXT NOT NULL,
  action TEXT NOT NULL,
  "createdAt" TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT CURRENT_TIMESTAMP,
  "updatedAt" TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT CURRENT_TIMESTAMP,
  UNIQUE("roleId", resource, action)
);

-- Create ImageShare table if it doesn't exist
CREATE TABLE IF NOT EXISTS "ImageShare" (
  id TEXT PRIMARY KEY,
  "imageId" TEXT NOT NULL,
  "userId" TEXT NOT NULL,
  "sharedWithEmail" TEXT NOT NULL,
  "sharedWithUserId" TEXT,
  "expiresAt" TIMESTAMP WITH TIME ZONE,
  "createdAt" TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT CURRENT_TIMESTAMP,
  FOREIGN KEY ("imageId") REFERENCES "Image"(id) ON DELETE CASCADE,
  FOREIGN KEY ("userId") REFERENCES "User"(id) ON DELETE CASCADE,
  FOREIGN KEY ("sharedWithUserId") REFERENCES "User"(id) ON DELETE SET NULL
);

-- Create indexes for performance
CREATE INDEX IF NOT EXISTS "image_user_id_idx" ON "Image" ("userId");
CREATE INDEX IF NOT EXISTS "image_folder_id_idx" ON "Image" ("folderId");
CREATE INDEX IF NOT EXISTS "image_team_id_idx" ON "Image" ("teamId");
CREATE INDEX IF NOT EXISTS "image_deleted_at_idx" ON "Image" ("deletedAt");
CREATE INDEX IF NOT EXISTS "folder_user_id_idx" ON "Folder" ("userId");
CREATE INDEX IF NOT EXISTS "folder_parent_id_idx" ON "Folder" ("parentId");
CREATE INDEX IF NOT EXISTS "team_member_user_id_idx" ON "TeamMember" ("userId");
CREATE INDEX IF NOT EXISTS "team_member_team_id_idx" ON "TeamMember" ("teamId");
CREATE INDEX IF NOT EXISTS "permission_role_id_idx" ON "Permission" ("roleId");
CREATE INDEX IF NOT EXISTS "image_share_image_id_idx" ON "ImageShare" ("imageId");
CREATE INDEX IF NOT EXISTS "image_share_user_id_idx" ON "ImageShare" ("userId");

-- Create text search index for image search
CREATE INDEX IF NOT EXISTS "image_search_idx" ON "Image" USING gin(to_tsvector('english', filename || ' ' || COALESCE(description, '')));

-- Create GIN index for JSON metadata search
CREATE INDEX IF NOT EXISTS "image_metadata_idx" ON "Image" USING gin(metadata);
[V0_FILE]typescript:file="scripts/execute-sql.ts" isMerged="true"
import { sql } from "@/lib/db"
import fs from "fs"
import path from "path"

async function executeSqlFile(filePath: string) {
  try {
    console.log(`📄 Reading SQL file: ${filePath}`)
    const sqlContent = fs.readFileSync(path.resolve(process.cwd(), filePath), "utf8")

// Split by semicolons to get individual statements, but keep statements with DO blocks intact
    const statements = sqlContent
      .split(";")
      .map((stmt) => stmt.trim())
      .filter((stmt) => stmt.length > 0)

console.log(`🔍 Found ${statements.length} SQL statements to execute`)

for (let i = 0; i < statements.length; i++) {
      const statement = statements[i]
      try {
        // Add semicolon back for execution
        await sql.raw(statement + ";")
        console.log(`✅ Executed statement ${i + 1}/${statements.length}`)
      } catch (error) {
        console.error(`❌ Error executing statement ${i + 1}:`, error)
        console.error("Statement:", statement)
      }
    }

console.log("✅ SQL file execution completed")
    return true
  } catch (error) {
    console.error("❌ Error executing SQL file:", error)
    return false
  }
}

async function main() {
  console.log("🚀 Starting SQL execution...")

const success = await executeSqlFile("scripts/create-tables.sql")

if (success) {
    console.log("✅ Database tables created successfully")
  } else {
    console.error("❌ Failed to create database tables")
    process.exit(1)
  }
}

main().catch((error) => {
  console.error("Unhandled error:", error)
  process.exit(1)
})
[V0_FILE]typescript:file="scripts/seed-data.ts" isMerged="true"
import { sql } from "@/lib/db"
import { UserRole } from "@/lib/user-roles"
import { randomUUID } from "crypto"

async function seedPermissions() {
  console.log("🔑 Seeding permissions...")

// Define permissions for each role
  const permissions = [
    // Admin permissions (full access)
    { roleId: UserRole.ADMIN, resource: "images", action: "create" },
    { roleId: UserRole.ADMIN, resource: "images", action: "read" },
    { roleId: UserRole.ADMIN, resource: "images", action: "update" },
    { roleId: UserRole.ADMIN, resource: "images", action: "delete" },
    { roleId: UserRole.ADMIN, resource: "images", action: "share" },
    { roleId: UserRole.ADMIN, resource: "folders", action: "create" },
    { roleId: UserRole.ADMIN, resource: "folders", action: "read" },
    { roleId: UserRole.ADMIN, resource: "folders", action: "update" },
    { roleId: UserRole.ADMIN, resource: "folders", action: "delete" },
    { roleId: UserRole.ADMIN, resource: "users", action: "read" },
    { roleId: UserRole.ADMIN, resource: "users", action: "update" },
    { roleId: UserRole.ADMIN, resource: "users", action: "delete" },
    { roleId: UserRole.ADMIN, resource: "settings", action: "read" },
    { roleId: UserRole.ADMIN, resource: "settings", action: "update" },
    { roleId: UserRole.ADMIN, resource: "analytics", action: "read" },

try {
    // Clear existing permissions to avoid duplicates
    await sql`DELETE FROM "Permission"`
    console.log("🧹 Cleared existing permissions")

// Insert all permissions
    for (const permission of permissions) {
      await sql`
        INSERT INTO "Permission" (id, "roleId", resource, action, "createdAt", "updatedAt")
        VALUES (${randomUUID()}, ${permission.roleId}, ${permission.resource}, ${permission.action}, NOW(), NOW())
      `
    }

console.log(`✅ Created ${permissions.length} permissions`)
    return true
  } catch (error) {
    console.error("❌ Error seeding permissions:", error)
    return false
  }
}

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

const permissionsSuccess = await seedPermissions()

if (permissionsSuccess) {
    console.log("✅ Data seeding completed successfully")
  } else {
    console.error("❌ Failed to seed data")
    process.exit(1)
  }
}

main().catch((error) => {
  console.error("Unhandled error:", error)
  process.exit(1)
})
[V0_FILE]typescript:file="scripts/setup-all.ts" isMerged="true"
import { spawn } from "child_process"
import path from "path"

async function runScript(scriptPath: string): Promise<boolean> {
  return new Promise((resolve) => {
    console.log(`🚀 Running script: ${scriptPath}`)

const process = spawn("npx", ["ts-node", scriptPath], {
      stdio: "inherit",
      shell: true,
    })

process.on("close", (code) => {
      if (code === 0) {
        console.log(`✅ Script ${scriptPath} completed successfully`)
        resolve(true)
      } else {
        console.error(`❌ Script ${scriptPath} failed with code ${code}`)
        resolve(false)
      }
    })
  })
}

async function main() {
  console.log("🚀 Starting complete database setup...")

// 1. Execute SQL to create tables
  const sqlSuccess = await runScript(path.join("scripts", "execute-sql.ts"))
  if (!sqlSuccess) {
    console.error("❌ Failed to create database tables. Aborting.")
    process.exit(1)
  }

// 2. Seed initial data
  const seedSuccess = await runScript(path.join("scripts", "seed-data.ts"))
  if (!seedSuccess) {
    console.error("❌ Failed to seed initial data. Aborting.")
    process.exit(1)
  }

console.log("✅ Database setup completed successfully!")
}

main().catch((error) => {
  console.error("Unhandled error:", error)
  process.exit(1)
})
[V0_FILE]typescript:file="scripts/check-db.ts" isMerged="true"
import { sql } from "@/lib/db"

async function checkDatabase() {
  console.log("🔍 Checking database setup...")

try {
    // Check connection
    await sql`SELECT 1 as connected`
    console.log("✅ Database connection successful")

// Check if tables exist
    const tables = ["User", "Folder", "Image", "ImageAnalytics", "Team", "TeamMember", "Permission", "ImageShare"]

for (const table of tables) {
      const result = await sql`
        SELECT EXISTS (
          SELECT FROM information_schema.tables 
          WHERE table_schema = 'public' 
          AND table_name = ${table}
        ) as exists
      `

if (result[0]?.exists) {
        console.log(`✅ Table "${table}" exists`)
      } else {
        console.log(`❌ Table "${table}" does not exist`)
      }
    }

// Check if permissions are seeded
    const permissionCount = await sql`SELECT COUNT(*) as count FROM "Permission"`
    console.log(`📊 Found ${permissionCount[0]?.count || 0} permissions in the database`)

return true
  } catch (error) {
    console.error("❌ Database check failed:", error)
    return false
  }
}

checkDatabase()
  .then((success) => {
    if (success) {
      console.log("✅ Database check completed")
    } else {
      console.error("❌ Database check failed")
      process.exit(1)
    }
  })
  .catch((error) => {
    console.error("Unhandled error:", error)
    process.exit(1)
  })
[V0_FILE]typescriptreact:file="app/auth-callback/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/api/users/create-user-record/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { auth } from "@clerk/nextjs/server"
import { sql } from "@/lib/db"

export async function POST() {
  try {
    const { userId, sessionId } = auth()

if (!userId || !sessionId) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

// Get user data from Clerk
    const clerkResponse = await fetch(`https://api.clerk.dev/v1/users/${userId}`, {
      headers: {
        Authorization: `Bearer ${process.env.CLERK_SECRET_KEY}`,
      },
    })

if (!clerkResponse.ok) {
      return NextResponse.json({ error: "Failed to fetch user data" }, { status: 500 })
    }

const userData = await clerkResponse.json()

// Extract email and name
    const email = userData.email_addresses?.[0]?.email_address
    const firstName = userData.first_name || ""
    const lastName = userData.last_name || ""
    const name = [firstName, lastName].filter(Boolean).join(" ")

if (!email) {
      return NextResponse.json({ error: "User email not found" }, { status: 400 })
    }

// Check if user already exists in our database
    const existingUser = await sql`
      SELECT id FROM "User" WHERE id = ${userId}
    `

if (existingUser.length > 0) {
      // User already exists, update their information
      await sql`
        UPDATE "User"
        SET 
          email = ${email},
          name = ${name || null},
          "updatedAt" = NOW()
        WHERE id = ${userId}
      `

return NextResponse.json({ success: true, message: "User record updated" })
    }

// Create new user record
    await sql`
      INSERT INTO "User" (id, email, name, role, "storageUsed", "storageLimit", "createdAt", "updatedAt")
      VALUES (
        ${userId}, 
        ${email}, 
        ${name || null}, 
        'USER', 
        0, 
        1073741824, 
        NOW(), 
        NOW()
      )
    `

return NextResponse.json({ success: true, message: "User record created" })
  } catch (error) {
    console.error("Error creating user record:", error)
    return NextResponse.json({ error: "Failed to create user record" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/sign-out/page.tsx" isMerged="true"
"use client"

import { useEffect } from "react"
import { useRouter } from "next/navigation"
import { useClerk } from "@clerk/nextjs"
import { Loader2 } from "lucide-react"

export default function SignOutPage() {
  const { signOut } = useClerk()
  const router = useRouter()

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

performSignOut()
  }, [signOut, router])

return (
    <div className="flex min-h-screen flex-col items-center justify-center">
      <div className="flex flex-col items-center gap-2">
        <Loader2 className="h-8 w-8 animate-spin text-brand-600" />
        <h2 className="text-xl font-semibold">Signing out...</h2>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/auth/user-onboarding.tsx" isMerged="true"
"use client"

import type React from "react"

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

export function UserOnboarding() {
  const router = useRouter()
  const { toast } = useToast()
  const [isLoading, setIsLoading] = useState(false)
  const [formData, setFormData] = useState({
    displayName: "",
  })

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    })
  }

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

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

if (!response.ok) {
        throw new Error("Failed to complete onboarding")
      }

toast({
        title: "Welcome to ImageVault!",
        description: "Your account has been set up successfully.",
      })

// Redirect to dashboard
      router.push("/dashboard")
    } catch (error) {
      toast({
        title: "Error",
        description: "Failed to complete onboarding. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-muted/40 p-4">
      <Card className="w-full max-w-md">
        <CardHeader>
          <CardTitle>Welcome to ImageVault</CardTitle>
          <CardDescription>Complete your profile to get started</CardDescription>
        </CardHeader>
        <form onSubmit={handleSubmit}>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="displayName">Display Name</Label>
              <Input
                id="displayName"
                name="displayName"
                placeholder="How should we call you?"
                value={formData.displayName}
                onChange={handleChange}
                required
              />
            </div>
          </CardContent>
          <CardFooter>
            <Button type="submit" className="w-full" disabled={isLoading}>
              {isLoading ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Setting up your account...
                </>
              ) : (
                "Complete Setup"
              )}
            </Button>
          </CardFooter>
        </form>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/api/users/complete-onboarding/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { auth } from "@clerk/nextjs/server"
import { sql } from "@/lib/db"

export async function POST(request: Request) {
  try {
    const { userId } = auth()

if (!userId) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const { displayName } = await request.json()

if (!displayName) {
      return NextResponse.json({ error: "Display name is required" }, { status: 400 })
    }

// Update user record with display name and mark onboarding as complete
    await sql`
      UPDATE "User"
      SET 
        name = ${displayName},
        "onboardingComplete" = true,
        "updatedAt" = NOW()
      WHERE id = ${userId}
    `

return NextResponse.json({ success: true })
  } catch (error) {
    console.error("Error completing onboarding:", error)
    return NextResponse.json({ error: "Failed to complete onboarding" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/onboarding/page.tsx" isMerged="true"
import type { Metadata } from "next"
import { redirect } from "next/navigation"
import { auth } from "@clerk/nextjs/server"
import { sql } from "@/lib/db"
import { UserOnboarding } from "@/components/auth/user-onboarding"

export const metadata: Metadata = {
  title: "Welcome to ImageVault",
  description: "Complete your profile to get started with ImageVault",
}

export default async function OnboardingPage() {
  const { userId } = auth()

if (!userId) {
    redirect("/sign-in")
  }

// Check if user has already completed onboarding
  const user = await sql`
    SELECT "onboardingComplete" FROM "User" WHERE id = ${userId}
  `

if (user.length > 0 && user[0].onboardingComplete) {
    // User has already completed onboarding, redirect to dashboard
    redirect("/dashboard")
  }

return <UserOnboarding />
}
[V0_FILE]typescript:file="scripts/update-db-schema.ts" isMerged="true"
import { sql } from "@/lib/db"
import fs from "fs"
import path from "path"

async function updateSchema() {
  try {
    console.log("🔄 Updating database schema...")

const sqlContent = fs.readFileSync(path.resolve(process.cwd(), "scripts/update-schema.sql"), "utf8")

await sql.raw(sqlContent)

console.log("✅ Database schema updated successfully")
    return true
  } catch (error) {
    console.error("❌ Error updating database schema:", error)
    return false
  }
}

updateSchema()
  .then((success) => {
    if (success) {
      console.log("✅ Schema update completed")
    } else {
      console.error("❌ Schema update failed")
      process.exit(1)
    }
  })
  .catch((error) => {
    console.error("Unhandled error:", error)
    process.exit(1)
  })
[V0_FILE]typescriptreact:file="app/sign-in/page.tsx" isMerged="true"
import type { Metadata } from "next"
import { SignIn } from "@clerk/nextjs"
import Image from "next/image"
import Link from "next/link"

export const metadata: Metadata = {
  title: "Sign In | ImageVault",
  description: "Sign in to your ImageVault account",
}

export default function SignInPage() {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-muted/40 p-4">
      <div className="mb-4 flex items-center gap-2">
        <Link href="/" className="flex items-center gap-2">
          <div className="rounded-lg bg-brand-600 p-1">
            <Image src="/logo.svg" alt="ImageVault Logo" width={24} height={24} />
          </div>
          <span className="text-xl font-bold">ImageVault</span>
        </Link>
      </div>
      <div className="w-full max-w-md rounded-lg border bg-background p-6 shadow-sm">
        <SignIn
          appearance={{
            elements: {
              formButtonPrimary: "bg-brand-600 hover:bg-brand-700 text-white",
              footerActionLink: "text-brand-600 hover:text-brand-700",
              socialButtonsBlockButton: "border border-gray-300 hover:bg-muted",
              socialButtonsBlockButtonText: "font-normal",
              dividerText: "text-xs text-muted-foreground",
            },
          }}
          path="/sign-in"
          routing="path"
          signUpUrl="/sign-up"
          redirectUrl="/auth-callback"
          socialAuth={{
            strategy: "maximize_completion",
            firstParty: true,
          }}
        />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/sign-up/page.tsx" isMerged="true"
import type { Metadata } from "next"
import { SignUp } from "@clerk/nextjs"
import Image from "next/image"
import Link from "next/link"

export const metadata: Metadata = {
  title: "Sign Up | ImageVault",
  description: "Create your ImageVault account",
}

export default function SignUpPage() {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-muted/40 p-4">
      <div className="mb-4 flex items-center gap-2">
        <Link href="/" className="flex items-center gap-2">
          <div className="rounded-lg bg-brand-600 p-1">
            <Image src="/logo.svg" alt="ImageVault Logo" width={24} height={24} />
          </div>
          <span className="text-xl font-bold">ImageVault</span>
        </Link>
      </div>
      <div className="w-full max-w-md rounded-lg border bg-background p-6 shadow-sm">
        <SignUp
          appearance={{
            elements: {
              formButtonPrimary: "bg-brand-600 hover:bg-brand-700 text-white",
              footerActionLink: "text-brand-600 hover:text-brand-700",
              socialButtonsBlockButton: "border border-gray-300 hover:bg-muted",
              socialButtonsBlockButtonText: "font-normal",
              dividerText: "text-xs text-muted-foreground",
            },
          }}
          path="/sign-up"
          routing="path"
          signInUrl="/sign-in"
          redirectUrl="/auth-callback"
          socialAuth={{
            strategy: "maximize_conversion",
            firstParty: true,
          }}
        />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/profile/page.tsx" isMerged="true"
import type { Metadata } from "next"
import { UserProfile } from "@/components/auth/user-profile"

export const metadata: Metadata = {
  title: "Profile | ImageVault",
  description: "Manage your ImageVault profile and account settings",
}

export default function ProfilePage() {
  return (
    <div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
      <div className="flex items-center justify-between">
        <h2 className="text-3xl font-bold tracking-tight">Your Profile</h2>
      </div>
      <div className="grid gap-4">
        <UserProfile />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/auth/user-profile.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { useUser } from "@clerk/nextjs"
import { useRouter } from "next/navigation"
import Image from "next/image"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Switch } from "@/components/ui/switch"
import { useToast } from "@/hooks/use-toast"
import { Loader2, User, Lock, Bell, Shield, AlertCircle } from "lucide-react"

export function UserProfile() {
  const { user, isLoaded } = useUser()
  const router = useRouter()
  const { toast } = useToast()
  const [isUpdating, setIsUpdating] = useState(false)
  const [displayName, setDisplayName] = useState("")

// Initialize form values when user data is loaded
  if (isLoaded && user && displayName === "") {
    setDisplayName(user.fullName || "")
  }

const updateProfile = async () => {
    if (!user) return

setIsUpdating(true)
    try {
      // Update user in Clerk
      await user.update({
        firstName: displayName.split(" ")[0] || "",
        lastName: displayName.split(" ").slice(1).join(" ") || "",
      })

// Update user in our database
      await fetch("/api/users/update-profile", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          name: displayName,
        }),
      })

toast({
        title: "Profile updated",
        description: "Your profile has been updated successfully.",
      })
    } catch (error) {
      console.error("Error updating profile:", error)
      toast({
        title: "Error",
        description: "Failed to update profile. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsUpdating(false)
    }
  }

if (!isLoaded) {
    return (
      <div className="flex items-center justify-center p-8">
        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
      </div>
    )
  }

if (!user) {
    return (
      <div className="flex items-center justify-center p-8">
        <Alert>
          <AlertCircle className="h-4 w-4" />
          <AlertDescription>Session expired. Please sign in again.</AlertDescription>
        </Alert>
      </div>
    )
  }

return (
    <Tabs defaultValue="general" className="space-y-4">
      <TabsList>
        <TabsTrigger value="general" className="flex items-center gap-2">
          <User className="h-4 w-4" />
          <span>General</span>
        </TabsTrigger>
        <TabsTrigger value="security" className="flex items-center gap-2">
          <Lock className="h-4 w-4" />
          <span>Security</span>
        </TabsTrigger>
        <TabsTrigger value="notifications" className="flex items-center gap-2">
          <Bell className="h-4 w-4" />
          <span>Notifications</span>
        </TabsTrigger>
        <TabsTrigger value="connected-accounts" className="flex items-center gap-2">
          <Shield className="h-4 w-4" />
          <span>Connected Accounts</span>
        </TabsTrigger>
      </TabsList>

<TabsContent value="general" className="space-y-4">
        <Card>
          <CardHeader>
            <CardTitle>Profile Information</CardTitle>
            <CardDescription>Update your profile information</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex flex-col items-center space-y-4 sm:flex-row sm:items-start sm:space-x-4 sm:space-y-0">
              <div className="relative h-24 w-24 rounded-full overflow-hidden border">
                {user.imageUrl ? (
                  <Image
                    src={user.imageUrl || "/placeholder.svg"}
                    alt={user.fullName || "User avatar"}
                    fill
                    className="object-cover"
                  />
                ) : (
                  <div className="flex h-full w-full items-center justify-center bg-muted text-2xl font-semibold uppercase text-muted-foreground">
                    {(user.firstName?.[0] || "") + (user.lastName?.[0] || "")}
                  </div>
                )}
              </div>
              <div className="space-y-4 flex-1">
                <div className="space-y-2">
                  <Label htmlFor="displayName">Display Name</Label>
                  <Input id="displayName" value={displayName} onChange={(e) => setDisplayName(e.target.value)} />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="email">Email</Label>
                  <Input id="email" value={user.primaryEmailAddress?.emailAddress || ""} disabled />
                  <p className="text-xs text-muted-foreground">To change your email, go to the Security tab.</p>
                </div>
              </div>
            </div>
          </CardContent>
          <CardFooter>
            <Button onClick={updateProfile} disabled={isUpdating}>
              {isUpdating ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Saving...
                </>
              ) : (
                "Save Changes"
              )}
            </Button>
          </CardFooter>
        </Card>
      </TabsContent>

<TabsContent value="security" className="space-y-4">
        <Card>
          <CardHeader>
            <CardTitle>Security Settings</CardTitle>
            <CardDescription>Manage your account security</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <div>
                  <h4 className="font-medium">Change Password</h4>
                  <p className="text-sm text-muted-foreground">Update your account password</p>
                </div>
                <Button
                  variant="outline"
                  onClick={() => user.createPasswordReset({ redirectUrl: window.location.href })}
                >
                  Reset Password
                </Button>
              </div>

<div className="flex items-center justify-between">
                <div>
                  <h4 className="font-medium">Two-Factor Authentication</h4>
                  <p className="text-sm text-muted-foreground">Add an extra layer of security</p>
                </div>
                <Button variant="outline" onClick={() => router.push("/account/security")}>
                  Configure
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>
      </TabsContent>

<TabsContent value="notifications" className="space-y-4">
        <Card>
          <CardHeader>
            <CardTitle>Notification Preferences</CardTitle>
            <CardDescription>Control how we contact you</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <div>
                  <h4 className="font-medium">Email Notifications</h4>
                  <p className="text-sm text-muted-foreground">Receive updates via email</p>
                </div>
                <Switch defaultChecked={true} />
              </div>

<div className="flex items-center justify-between">
                <div>
                  <h4 className="font-medium">Upload Notifications</h4>
                  <p className="text-sm text-muted-foreground">Get notified when uploads complete</p>
                </div>
                <Switch defaultChecked={true} />
              </div>

<div className="flex items-center justify-between">
                <div>
                  <h4 className="font-medium">Marketing Emails</h4>
                  <p className="text-sm text-muted-foreground">Receive product updates and offers</p>
                </div>
                <Switch defaultChecked={false} />
              </div>
            </div>
          </CardContent>
          <CardFooter>
            <Button>Save Preferences</Button>
          </CardFooter>
        </Card>
      </TabsContent>

<TabsContent value="connected-accounts" className="space-y-4">
        <Card>
          <CardHeader>
            <CardTitle>Connected Accounts</CardTitle>
            <CardDescription>Manage accounts linked to your ImageVault profile</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            {user.externalAccounts.length > 0 ? (
              <div className="space-y-4">
                {user.externalAccounts.map((account) => (
                  <div key={account.id} className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <div className="h-10 w-10 rounded-full bg-muted flex items-center justify-center">
                        <Image
                          src={`/providers/${account.provider.toLowerCase()}.svg`}
                          width={20}
                          height={20}
                          alt={account.provider}
                          onError={(e) => {
                            e.currentTarget.src = "/placeholder.svg"
                          }}
                        />
                      </div>
                      <div>
                        <h4 className="font-medium">{account.provider}</h4>
                        <p className="text-sm text-muted-foreground">Connected</p>
                      </div>
                    </div>
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => {
                        // In a real implementation, we would handle disconnecting the account
                        toast({
                          title: "Not implemented",
                          description: "This functionality is not implemented in the demo.",
                        })
                      }}
                    >
                      Disconnect
                    </Button>
                  </div>
                ))}
              </div>
            ) : (
              <div className="text-center py-4">
                <p className="text-muted-foreground">No connected accounts</p>
                <p className="text-sm text-muted-foreground mt-1">Connect social accounts for easier sign-in</p>
              </div>
            )}
          </CardContent>
          <CardFooter>
            <Button
              variant="outline"
              onClick={() => {
                // In a real implementation, we would redirect to the account connection flow
                toast({
                  title: "Not implemented",
                  description: "This functionality is not implemented in the demo.",
                })
              }}
            >
              Connect Account
            </Button>
          </CardFooter>
        </Card>
      </TabsContent>
    </Tabs>
  )
}
[V0_FILE]typescriptreact:file="app/api/users/update-profile/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { auth } from "@clerk/nextjs/server"
import { sql } from "@/lib/db"

export async function POST(request: Request) {
  try {
    const { userId } = auth()

if (!userId) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const { name } = await request.json()

if (!name) {
      return NextResponse.json({ error: "Name is required" }, { status: 400 })
    }

// Update user name in our database
    await sql`
      UPDATE "User"
      SET 
        name = ${name},
        "updatedAt" = NOW()
      WHERE id = ${userId}
    `

return NextResponse.json({ success: true })
  } catch (error) {
    console.error("Error updating profile:", error)
    return NextResponse.json({ error: "Failed to update profile" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="contexts/auth-context.tsx" isMerged="true"
"use client"

import type React from "react"

import { createContext, useContext, useEffect, useState } from "react"
import { useAuth, useUser } from "@clerk/nextjs"
import { useRouter } from "next/navigation"

interface AuthContextType {
  isLoading: boolean
  isAuthenticated: boolean
  user: any | null
  profile: {
    id: string
    name: string | null
    email: string
    role: string
    onboardingComplete: boolean
  } | null
  loadProfile: () => Promise<void>
}

const AuthContext = createContext<AuthContextType>({
  isLoading: true,
  isAuthenticated: false,
  user: null,
  profile: null,
  loadProfile: async () => {},
})

export function AuthProvider({ children }: { children: React.ReactNode }) {
  const { isLoaded, isSignedIn, userId } = useAuth()
  const { user } = useUser()
  const router = useRouter()
  const [isLoading, setIsLoading] = useState(true)
  const [profile, setProfile] = useState<AuthContextType["profile"]>(null)

const loadProfile = async () => {
    if (!userId) return

try {
      const response = await fetch("/api/users/profile")
      if (response.ok) {
        const data = await response.json()
        setProfile(data.profile)
      } else {
        // If we get a 404, the user doesn't exist in our database yet
        if (response.status === 404) {
          // Redirect to onboarding
          router.push("/onboarding")
        }
      }
    } catch (error) {
      console.error("Error loading profile:", error)
    } finally {
      setIsLoading(false)
    }
  }

useEffect(() => {
    if (isLoaded) {
      if (isSignedIn && userId) {
        loadProfile()
      } else {
        setIsLoading(false)
      }
    }
  }, [isLoaded, isSignedIn, userId])

return (
    <AuthContext.Provider
      value={{
        isLoading: !isLoaded || isLoading,
        isAuthenticated: isSignedIn || false,
        user,
        profile,
        loadProfile,
      }}
    >
      {children}
    </AuthContext.Provider>
  )
}

export function useUserAuth() {
  return useContext(AuthContext)
}
[V0_FILE]typescriptreact:file="app/api/users/profile/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { auth } from "@clerk/nextjs/server"
import { sql } from "@/lib/db"

export async function GET() {
  try {
    const { userId } = auth()

if (!userId) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

// Get user profile from database
    const users = await sql`
      SELECT id, name, email, role, "onboardingComplete"
      FROM "User"
      WHERE id = ${userId}
    `

if (users.length === 0) {
      return NextResponse.json({ error: "User not found" }, { status: 404 })
    }

return NextResponse.json({ profile: users[0] })
  } catch (error) {
    console.error("Error fetching user profile:", error)
    return NextResponse.json({ error: "Failed to fetch user profile" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/providers.tsx" isMerged="true"
"use client"

import type React from "react"

import { ThemeProvider } from "@/components/theme-provider"
import { AuthProvider } from "@/contexts/auth-context"

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider attribute="class" defaultTheme="light" enableSystem>
      <AuthProvider>{children}</AuthProvider>
    </ThemeProvider>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true"
import type React from "react"
import { ClerkProvider } from "@clerk/nextjs"
import { Inter } from "next/font/google"
import type { Metadata } from "next"
import { Toaster } from "@/components/ui/toaster"
import { Providers } from "@/app/providers"
import "./globals.css"

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

export const metadata: Metadata = {
  title: {
    default: "ImageVault - Fast, Secure Image Hosting",
    template: "%s | ImageVault",
  },
  description:
    "Upload, store, and share your images with ImageVault. Fast, secure, and reliable image hosting with optimization and analytics.",
  keywords: [
    "image hosting",
    "image storage",
    "image sharing",
    "image optimization",
    "image analytics",
    "cloud storage",
    "file hosting",
  ],
  authors: [
    {
      name: "ImageVault Team",
    },
  ],
  creator: "ImageVault",
  publisher: "ImageVault",
  openGraph: {
    type: "website",
    locale: "en_US",
    url: "https://imagevault.vercel.app",
    title: "ImageVault - Fast, Secure Image Hosting",
    description:
      "Upload, store, and share your images with ImageVault. Fast, secure, and reliable image hosting with optimization and analytics.",
    siteName: "ImageVault",
    images: [
      {
        url: "/og-image.jpg",
        width: 1200,
        height: 630,
        alt: "ImageVault - Fast, Secure Image Hosting",
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    title: "ImageVault - Fast, Secure Image Hosting",
    description:
      "Upload, store, and share your images with ImageVault. Fast, secure, and reliable image hosting with optimization and analytics.",
    images: ["/og-image.jpg"],
    creator: "@imagevault",
  },
  icons: {
    icon: "/favicon.ico",
    shortcut: "/favicon-16x16.png",
    apple: "/apple-touch-icon.png",
  },
  manifest: "/site.webmanifest",
}

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <ClerkProvider>
      <html lang="en" suppressHydrationWarning>
        <head />
        <body className={inter.className}>
          <Providers>
            {children}
            <Toaster />
          </Providers>
        </body>
      </html>
    </ClerkProvider>
  )
}
[V0_FILE]typescriptreact:file="app/account-deleted/page.tsx" isMerged="true"
import type { Metadata } from "next"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"

export const metadata: Metadata = {
  title: "Account Deleted | ImageVault",
  description: "Your ImageVault account has been deleted",
}

export default function AccountDeletedPage() {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-muted/40 p-4">
      <div className="w-full max-w-md">
        <Card>
          <CardHeader>
            <CardTitle>Account Deleted</CardTitle>
            <CardDescription>Your account has been successfully deleted.</CardDescription>
          </CardHeader>
          <CardContent>
            <p className="text-sm text-muted-foreground">
              We're sorry to see you go. All your data has been removed from our systems in accordance with our privacy
              policy.
            </p>
          </CardContent>
          <CardFooter>
            <Button asChild className="w-full">
              <Link href="/">Return to Home</Link>
            </Button>
          </CardFooter>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]xml:file="public/providers/github.svg" isMerged="true"
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-github"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path><path d="M9 18c-4.51 2-5-2-7-2"></path></svg>
[V0_FILE]xml:file="public/providers/google.svg" isMerged="true"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512"><path d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"/></svg>
[V0_FILE]xml:file="public/providers/facebook.svg" isMerged="true"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M80 299.3V512H196V299.3h86.5l18-97.8H196V166.9c0-51.7 20.3-71.5 72.7-71.5H304V9.9C287.5 6.5 252.8 3.3 218.3 3.3c-90.8 0-163.9 50.9-163.9 159.4v38.8H16v97.8H80z"/></svg>
[V0_FILE]xml:file="public/logo.svg" isFixed="true" isQuickEdit="true" isMerged="true"
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-image"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>
[V0_FILE]sql:file="scripts/update-schema.sql" isMerged="true"
-- Add onboardingComplete column to User table if it doesn't exist
DO $$
BEGIN
    IF NOT EXISTS (
        SELECT FROM information_schema.columns
        WHERE table_name = 'User' AND column_name = 'onboardingComplete'
    ) THEN
        ALTER TABLE "User" ADD COLUMN "onboardingComplete" BOOLEAN NOT NULL DEFAULT false;
    END IF;
END
$$;

-- Add emailVerified column to User table if it doesn't exist
DO $$
BEGIN
    IF NOT EXISTS (
        SELECT FROM information_schema.columns
        WHERE table_name = 'User' AND column_name = 'emailVerified'
    ) THEN
        ALTER TABLE "User" ADD COLUMN "emailVerified" BOOLEAN NOT NULL DEFAULT false;
    END IF;
END
$$;

-- Add lastLogin column to User table if it doesn't exist
DO $$
BEGIN
    IF NOT EXISTS (
        SELECT FROM information_schema.columns
        WHERE table_name = 'User' AND column_name = 'lastLogin'
    ) THEN
        ALTER TABLE "User" ADD COLUMN "lastLogin" TIMESTAMP WITH TIME ZONE;
    END IF;
END
$$;

-- Create index on User table for faster lookups
CREATE INDEX IF NOT EXISTS "user_email_idx" ON "User" ("email");
CREATE INDEX IF NOT EXISTS "user_onboarding_idx" ON "User" ("onboardingComplete");
[V0_FILE]typescriptreact:file="lib/email-templates.ts" isMerged="true"
export const welcomeEmailTemplate = (userName: string) => `
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Welcome to ImageVault</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      color: #333;
      margin: 0;
      padding: 0;
    }
    .container {
      max-width: 600px;
      margin: 0 auto;
      padding: 20px;
    }
    .header {
      background-color: #0284c7;
      padding: 20px;
      text-align: center;
      color: white;
      border-radius: 4px 4px 0 0;
    }
    .content {
      padding: 20px;
      background-color: #f9fafb;
      border-radius: 0 0 4px 4px;
    }
    .button {
      display: inline-block;
      background-color: #0284c7;
      color: white;
      text-decoration: none;
      padding: 10px 20px;
      border-radius: 4px;
      margin-top: 20px;
    }
    .footer {
      margin-top: 20px;
      text-align: center;
      font-size: 12px;
      color: #666;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>Welcome to ImageVault!</h1>
    </div>
    <div class="content">
      <p>Hello ${userName || "there"},</p>
      <p>Thank you for joining ImageVault! We're excited to have you on board.</p>
      <p>With ImageVault, you can:</p>
      <ul>
        <li>Upload and store your images securely</li>
        <li>Optimize images automatically</li>
        <li>Share images with customizable privacy settings</li>
        <li>Track analytics on your images</li>
      </ul>
      <p>To get started, head over to your dashboard:</p>
      <a href="https://imagevault.com/dashboard" class="button">Go to Dashboard</a>
      <p>If you have any questions or need assistance, feel free to reach out to our support team.</p>
      <p>Best regards,<br>The ImageVault Team</p>
    </div>
    <div class="footer">
      <p>© 2023 ImageVault. All rights reserved.</p>
      <p>You're receiving this email because you signed up for ImageVault.</p>
    </div>
  </div>
</body>
</html>
`
[V0_FILE]typescriptreact:file="app/reset-password/page.tsx" isMerged="true"
import type { Metadata } from "next"
import { ClerkProvider } from "@clerk/nextjs"
import Image from "next/image"
import Link from "next/link"

export const metadata: Metadata = {
  title: "Reset Password | ImageVault",
  description: "Reset your ImageVault account password",
}

export default function ResetPasswordPage() {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-muted/40 p-4">
      <div className="mb-4 flex items-center gap-2">
        <Link href="/" className="flex items-center gap-2">
          <div className="rounded-lg bg-brand-600 p-1">
            <Image src="/logo.svg" alt="ImageVault Logo" width={24} height={24} />
          </div>
          <span className="text-xl font-bold">ImageVault</span>
        </Link>
      </div>
      <div className="w-full max-w-md rounded-lg border bg-background p-6 shadow-sm">
        <ClerkProvider>
          {/* Clerk will handle the reset password UI */}
          <div className="text-center">
            <h2 className="text-2xl font-bold mb-4">Reset Your Password</h2>
            <p className="text-muted-foreground mb-6">
              Enter your email address and we'll send you a link to reset your password.
            </p>
            <div className="space-y-4">
              <Link href="/sign-in" className="text-brand-600 hover:text-brand-700">
                Return to sign in
              </Link>
            </div>
          </div>
        </ClerkProvider>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="middleware.ts" isMerged="true"
import { NextResponse } from "next/server"
import { authMiddleware } from "@clerk/nextjs"

// Add security headers to all responses
function addSecurityHeaders(response: NextResponse) {
  // Prevent clickjacking attacks
  response.headers.set("X-Frame-Options", "DENY")

// Help prevent XSS attacks
  response.headers.set("X-Content-Type-Options", "nosniff")

// Strict Content Security Policy for production
  if (process.env.NODE_ENV === "production") {
    response.headers.set(
      "Content-Security-Policy",
      "default-src 'self'; script-src 'self' 'unsafe-inline' https://clerk.imagevault.vercel.app; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://pub-57c60c5a6d8c4960b0c6adf7fde360cd.r2.dev; font-src 'self'; connect-src 'self' https://clerk.imagevault.vercel.app https://*.groq.com; frame-src 'none'; object-src 'none';",
    )
  }

// Strict Transport Security
  response.headers.set("Strict-Transport-Security", "max-age=31536000; includeSubDomains; preload")

// Referrer Policy
  response.headers.set("Referrer-Policy", "strict-origin-when-cross-origin")

// Permissions Policy
  response.headers.set("Permissions-Policy", "camera=(), microphone=(), geolocation=(self), interest-cohort=()")

return response
}

export default authMiddleware({
  publicRoutes: [
    "/",
    "/api/webhooks/clerk",
    "/api/health",
    "/pricing",
    "/about",
    "/features",
    "/tools",
    "/blog(.*)",
    "/contact",
    "/terms",
    "/privacy",
    "/api/images/public/(.*)",
  ],
  afterAuth(auth, req) {
    // Apply security headers to all responses
    const response = NextResponse.next()
    const securePath = addSecurityHeaders(response)

// If the user is signed in and trying to access auth pages, redirect to dashboard
    if (
      auth.userId &&
      ["/sign-in", "/sign-up", "/reset-password"].some((path) => req.nextUrl.pathname.startsWith(path))
    ) {
      return NextResponse.redirect(new URL("/dashboard", req.url))
    }

return securePath
  },
})

export const config = {
  matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
}
[V0_FILE]typescriptreact:file="app/verify-email/page.tsx" isMerged="true"
import type { Metadata } from "next"
import { Suspense } from "react"
import Image from "next/image"
import Link from "next/link"
import { VerifyEmailForm } from "@/components/auth/verify-email-form"

export const metadata: Metadata = {
  title: "Verify Email | ImageVault",
  description: "Verify your email address to activate your ImageVault account",
}

export default function VerifyEmailPage() {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-muted/40 p-4">
      <div className="mb-4 flex items-center gap-2">
        <Link href="/" className="flex items-center gap-2">
          <div className="rounded-lg bg-brand-600 p-1">
            <Image src="/logo.svg" alt="ImageVault Logo" width={24} height={24} />
          </div>
          <span className="text-xl font-bold">ImageVault</span>
        </Link>
      </div>
      <div className="w-full max-w-md rounded-lg border bg-background p-6 shadow-sm">
        <Suspense fallback={<div>Loading verification form...</div>}>
          <VerifyEmailForm />
        </Suspense>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/auth/verify-email-form.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter, useSearchParams } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { useToast } from "@/hooks/use-toast"
import { Loader2 } from "lucide-react"

export function VerifyEmailForm() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const { toast } = useToast()
  const [isVerifying, setIsVerifying] = useState(false)
  const [verificationCode, setVerificationCode] = useState("")

// Get token from URL if available
  const token = searchParams.get("token")

// If token exists in URL, auto-fill it
  useState(() => {
    if (token) {
      setVerificationCode(token)
    }
  })

const handleVerify = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsVerifying(true)

try {
      // In a real implementation, you would call your API to verify the email
      await new Promise((resolve) => setTimeout(resolve, 1500)) // Simulate API call

toast({
        title: "Email verified successfully",
        description: "Your email has been verified. You can now sign in.",
      })

// Redirect to sign-in page
      router.push("/sign-in")
    } catch (error) {
      toast({
        title: "Verification failed",
        description: "The verification code is invalid or has expired.",
        variant: "destructive",
      })
    } finally {
      setIsVerifying(false)
    }
  }

return (
    <div className="space-y-6">
      <div className="text-center">
        <h2 className="text-2xl font-bold">Verify Your Email</h2>
        <p className="text-muted-foreground mt-2">Enter the verification code sent to your email address.</p>
      </div>

<form onSubmit={handleVerify} className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="verification-code">Verification Code</Label>
          <Input
            id="verification-code"
            placeholder="Enter verification code"
            value={verificationCode}
            onChange={(e) => setVerificationCode(e.target.value)}
            required
          />
        </div>

<Button type="submit" className="w-full" disabled={isVerifying}>
          {isVerifying ? (
            <>
              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
              Verifying...
            </>
          ) : (
            "Verify Email"
          )}
        </Button>
      </form>

<div className="text-center text-sm">
        <p>
          Didn't receive a code?{" "}
          <button
            className="text-brand-600 hover:text-brand-700"
            onClick={() => {
              toast({
                title: "Verification code resent",
                description: "A new verification code has been sent to your email.",
              })
            }}
          >
            Resend code
          </button>
        </p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/auth-callback/page.tsx" isMerged="true"
"use client"

import { useEffect } from "react"
import { useRouter, useSearchParams } from "next/navigation"
import { useAuth } from "@clerk/nextjs"
import { Loader2 } from "lucide-react"

export default function AuthCallbackPage() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const { isLoaded, isSignedIn, userId } = useAuth()

useEffect(() => {
    if (!isLoaded) return

const createUserRecord = async () => {
      try {
        // Create user record in our database if it doesn't exist
        const response = await fetch("/api/users/create-user-record", {
          method: "POST",
        })

if (!response.ok) {
          console.error("Failed to create user record")
        }
      } catch (error) {
        console.error("Error creating user record:", error)
      }
    }

if (isSignedIn && userId) {
      // Create user record in our database
      createUserRecord()

// Redirect to the intended destination or dashboard
      const redirectTo = searchParams.get("redirect_url") || "/dashboard"
      router.push(redirectTo)
    } else if (isLoaded && !isSignedIn) {
      // If not signed in, redirect to sign-in page
      router.push("/sign-in")
    }
  }, [isLoaded, isSignedIn, userId, router, searchParams])

return (
    <div className="flex min-h-screen flex-col items-center justify-center">
      <div className="flex flex-col items-center gap-2">
        <Loader2 className="h-8 w-8 animate-spin text-brand-600" />
        <h2 className="text-xl font-semibold">Setting up your account...</h2>
        <p className="text-muted-foreground">You'll be redirected in a moment.</p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/auth/protected-route.tsx" isMerged="true"
"use client"

import type React from "react"

import { useEffect } from "react"
import { useRouter } from "next/navigation"
import { useAuth } from "@clerk/nextjs"
import { Loader2 } from "lucide-react"

interface ProtectedRouteProps {
  children: React.ReactNode
}

export function ProtectedRoute({ children }: ProtectedRouteProps) {
  const { isLoaded, isSignedIn } = useAuth()
  const router = useRouter()

useEffect(() => {
    if (isLoaded && !isSignedIn) {
      // Redirect to sign-in page with the current URL as the redirect URL
      const currentPath = window.location.pathname
      router.push(`/sign-in?redirect_url=${encodeURIComponent(currentPath)}`)
    }
  }, [isLoaded, isSignedIn, router])

// Show loading state while checking authentication
  if (!isLoaded || !isSignedIn) {
    return (
      <div className="flex min-h-screen flex-col items-center justify-center">
        <Loader2 className="h-8 w-8 animate-spin text-brand-600" />
      </div>
    )
  }

// Render children if authenticated
  return <>{children}</>
}
[V0_FILE]typescriptreact:file="app/dashboard/layout.tsx" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { DashboardNav } from "@/components/dashboard/nav"
import { DashboardHeader } from "@/components/dashboard/header"
import { ProtectedRoute } from "@/components/auth/protected-route"

export const metadata: Metadata = {
  title: "Dashboard | ImageVault",
  description: "Manage your images, view analytics, and configure settings.",
}

export default async function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <ProtectedRoute>
      <div className="flex min-h-screen flex-col">
        <DashboardHeader />
        <div className="flex flex-1">
          <DashboardNav />
          <main className="flex-1 overflow-y-auto">{children}</main>
        </div>
      </div>
    </ProtectedRoute>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
import type { Metadata } from "next"
import { auth } from "@clerk/nextjs/server"
import { DashboardOverview } from "@/components/dashboard/overview"
import { sql } from "@/lib/db"
import { Suspense } from "react"
import { Skeleton } from "@/components/ui/skeleton"

export const metadata: Metadata = {
  title: "Dashboard | ImageVault",
  description: "Manage your images, view analytics, and configure settings.",
}

export default async function DashboardPage() {
  const { userId } = auth()

if (!userId) {
    return null
  }

// Get user stats with robust error handling
  let stats = {
    total_images: 0,
    total_size: 0,
    total_views: 0,
    total_downloads: 0,
  }

let recentImages = []

try {
    // Check if the User table exists and has the expected schema
    const userCheck = await sql`
      SELECT EXISTS (
        SELECT FROM information_schema.tables 
        WHERE table_schema = 'public' 
        AND table_name = 'User'
      ) as exists
    `

const userTableExists = userCheck[0]?.exists

if (userTableExists) {
      // Check if the Image table exists
      const imageCheck = await sql`
        SELECT EXISTS (
          SELECT FROM information_schema.tables 
          WHERE table_schema = 'public' 
          AND table_name = 'Image'
        ) as exists
      `

const imageTableExists = imageCheck[0]?.exists

if (imageTableExists) {
        // Get stats only if Image table exists
        const statsResult = await sql`
          SELECT 
            COUNT(*) as total_images,
            COALESCE(SUM(size), 0) as total_size,
            COALESCE(SUM(views), 0) as total_views,
            COALESCE(SUM(downloads), 0) as total_downloads
          FROM "Image"
          WHERE "userId" = ${userId}
          AND "deletedAt" IS NULL
        `

if (statsResult && statsResult.length > 0) {
          stats = statsResult[0]
        }

// Get recent images
        recentImages = await sql`
          SELECT *
          FROM "Image"
          WHERE "userId" = ${userId}
          AND "deletedAt" IS NULL
          ORDER BY "createdAt" DESC
          LIMIT 6
        `
      }
    }
  } catch (error) {
    console.error("Error in dashboard page:", error)
    // Continue with default values
  }

return (
    <div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
      <div className="flex items-center justify-between">
        <h2 className="text-3xl font-bold tracking-tight">Dashboard</h2>
      </div>
      <div className="grid gap-4">
        <Suspense fallback={<DashboardSkeleton />}>
          <DashboardOverview stats={stats} recentImages={recentImages} />
        </Suspense>
      </div>
    </div>
  )
}

function DashboardSkeleton() {
  return (
    <div className="grid gap-4 md:gap-8">
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        {Array.from({ length: 4 }).map((_, i) => (
          <Skeleton key={i} className="h-32 w-full" />
        ))}
      </div>
      <Skeleton className="h-[400px] w-full" />
      <Skeleton className="h-[300px] w-full" />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/account/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
import type { Metadata } from "next"
import { auth } from "@clerk/nextjs/server"
import { AccountSettings } from "@/components/dashboard/account-settings"
import { redirect } from "next/navigation"

export const metadata: Metadata = {
  title: "Account Settings | ImageVault",
  description: "Manage your account settings, subscription, and preferences.",
}

export default async function AccountPage() {
  const { userId } = auth()

if (!userId) {
    redirect("/sign-in")
  }

return (
    <div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
      <div className="flex items-center justify-between">
        <h2 className="text-3xl font-bold tracking-tight">Account Settings</h2>
      </div>
      <div className="grid gap-4">
        <AccountSettings userId={userId} />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/account-settings.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { useUser } from "@clerk/nextjs"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Separator } from "@/components/ui/separator"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { useToast } from "@/hooks/use-toast"
import { Loader2, User, CreditCard, Bell, Shield, Key, LogOut, Trash2 } from "lucide-react"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { SubscriptionPlanCard } from "@/components/subscription/subscription-plan-card"
import { SubscriptionDetails } from "@/components/subscription/subscription-details"

interface AccountSettingsProps {
  userId: string
}

export function AccountSettings({ userId }: AccountSettingsProps) {
  const { user, isLoaded } = useUser()
  const router = useRouter()
  const { toast } = useToast()
  const [isUpdating, setIsUpdating] = useState(false)
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
  const [isConfirmingDelete, setIsConfirmingDelete] = useState(false)
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    notifications: {
      email: true,
      marketing: false,
      updates: true,
    },
  })
  const [subscription, setSubscription] = useState<any>(null)
  const [isLoadingSubscription, setIsLoadingSubscription] = useState(true)

// Initialize form values when user data is loaded
  useEffect(() => {
    if (isLoaded && user) {
      setFormData({
        ...formData,
        name: user.fullName || "",
        email: user.primaryEmailAddress?.emailAddress || "",
      })
    }
  }, [isLoaded, user])

// Fetch subscription data
  useEffect(() => {
    const fetchSubscription = async () => {
      try {
        const response = await fetch("/api/subscription")
        if (response.ok) {
          const data = await response.json()
          setSubscription(data.subscription)
        }
      } catch (error) {
        console.error("Error fetching subscription:", error)
      } finally {
        setIsLoadingSubscription(false)
      }
    }

fetchSubscription()
  }, [])

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target
    setFormData({
      ...formData,
      [name]: value,
    })
  }

const handleNotificationChange = (key: string, checked: boolean) => {
    setFormData({
      ...formData,
      notifications: {
        ...formData.notifications,
        [key]: checked,
      },
    })
  }

const updateProfile = async () => {
    if (!user) return

setIsUpdating(true)
    try {
      // Update user in Clerk
      await user.update({
        firstName: formData.name.split(" ")[0] || "",
        lastName: formData.name.split(" ").slice(1).join(" ") || "",
      })

const updateNotifications = async () => {
    setIsUpdating(true)
    try {
      // Update notification preferences in our database
      await fetch("/api/users/update-notifications", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          notifications: formData.notifications,
        }),
      })

toast({
        title: "Notification preferences updated",
        description: "Your notification preferences have been updated successfully.",
      })
    } catch (error) {
      console.error("Error updating notification preferences:", error)
      toast({
        title: "Error",
        description: "Failed to update notification preferences. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsUpdating(false)
    }
  }

const deleteAccount = async () => {
    setIsConfirmingDelete(true)
    try {
      // Delete user account
      await fetch("/api/users/delete-account", {
        method: "DELETE",
      })

// Sign out the user
      await user?.delete()

// Redirect to account deleted page
      router.push("/account-deleted")
    } catch (error) {
      console.error("Error deleting account:", error)
      toast({
        title: "Error",
        description: "Failed to delete account. Please try again.",
        variant: "destructive",
      })
      setIsConfirmingDelete(false)
      setIsDeleteDialogOpen(false)
    }
  }

if (!isLoaded) {
    return (
      <div className="flex items-center justify-center p-8">
        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
      </div>
    )
  }

return (
    <Tabs defaultValue="profile" className="space-y-4">
      <TabsList className="grid grid-cols-2 md:grid-cols-5 lg:w-[600px]">
        <TabsTrigger value="profile" className="flex items-center gap-2">
          <User className="h-4 w-4" />
          <span className="hidden sm:inline">Profile</span>
        </TabsTrigger>
        <TabsTrigger value="subscription" className="flex items-center gap-2">
          <CreditCard className="h-4 w-4" />
          <span className="hidden sm:inline">Subscription</span>
        </TabsTrigger>
        <TabsTrigger value="notifications" className="flex items-center gap-2">
          <Bell className="h-4 w-4" />
          <span className="hidden sm:inline">Notifications</span>
        </TabsTrigger>
        <TabsTrigger value="security" className="flex items-center gap-2">
          <Shield className="h-4 w-4" />
          <span className="hidden sm:inline">Security</span>
        </TabsTrigger>
        <TabsTrigger value="danger" className="flex items-center gap-2">
          <Trash2 className="h-4 w-4" />
          <span className="hidden sm:inline">Danger Zone</span>
        </TabsTrigger>
      </TabsList>

{/* Profile Tab */}
      <TabsContent value="profile" className="space-y-4">
        <Card>
          <CardHeader>
            <CardTitle>Profile Information</CardTitle>
            <CardDescription>Update your profile information and personal details</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex flex-col sm:flex-row gap-4 items-start">
              <Avatar className="h-24 w-24">
                <AvatarImage src={user?.imageUrl || "/placeholder.svg"} alt={user?.fullName || "User"} />
                <AvatarFallback>
                  {user?.firstName?.charAt(0) || ""}
                  {user?.lastName?.charAt(0) || ""}
                </AvatarFallback>
              </Avatar>
              <div className="space-y-1 flex-1">
                <Label htmlFor="avatar">Profile Picture</Label>
                <div className="flex items-center gap-2 mt-2">
                  <Button variant="outline" size="sm" onClick={() => user?.update({ imageUrl: "" })}>
                    Remove
                  </Button>
                  <Button variant="outline" size="sm" onClick={() => router.push("/user/manage-account?tab=avatar")}>
                    Change
                  </Button>
                </div>
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="email">Email Address</Label>
              <Input id="email" name="email" value={formData.email} disabled placeholder="Your email address" />
              <p className="text-sm text-muted-foreground">To change your email, go to the Security tab.</p>
            </div>
          </CardContent>
          <CardFooter>
            <Button onClick={updateProfile} disabled={isUpdating}>
              {isUpdating ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Saving...
                </>
              ) : (
                "Save Changes"
              )}
            </Button>
          </CardFooter>
        </Card>
      </TabsContent>

{/* Subscription Tab */}
      <TabsContent value="subscription" className="space-y-4">
        {isLoadingSubscription ? (
          <Card>
            <CardContent className="py-10">
              <div className="flex justify-center">
                <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
              </div>
            </CardContent>
          </Card>
        ) : subscription ? (
          <SubscriptionDetails subscription={subscription} />
        ) : (
          <div className="grid gap-4 md:grid-cols-3">
            <SubscriptionPlanCard
              name="Free"
              description="Basic image hosting for personal use"
              price="$0"
              features={[
                "1GB Storage",
                "10GB Bandwidth per month",
                "Basic image optimization",
                "100 uploads per month",
              ]}
              current={true}
            />
            <SubscriptionPlanCard
              name="Pro"
              description="Advanced features for professionals"
              price="$9.99"
              interval="month"
              features={[
                "10GB Storage",
                "100GB Bandwidth per month",
                "Advanced image optimization",
                "Unlimited uploads",
                "Custom domain",
                "Priority support",
              ]}
              buttonText="Upgrade to Pro"
              buttonAction={() => router.push("/dashboard/billing/checkout?plan=pro")}
            />
            <SubscriptionPlanCard
              name="Business"
              description="Enterprise-grade solution for teams"
              price="$29.99"
              interval="month"
              features={[
                "100GB Storage",
                "1TB Bandwidth per month",
                "Premium image optimization",
                "Unlimited uploads",
                "Multiple custom domains",
                "Team management",
                "Advanced analytics",
                "API access",
                "24/7 priority support",
              ]}
              buttonText="Upgrade to Business"
              buttonAction={() => router.push("/dashboard/billing/checkout?plan=business")}
            />
          </div>
        )}
      </TabsContent>

{/* Notifications Tab */}
      <TabsContent value="notifications" className="space-y-4">
        <Card>
          <CardHeader>
            <CardTitle>Notification Preferences</CardTitle>
            <CardDescription>Manage how you receive notifications and updates</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <div className="space-y-0.5">
                  <Label htmlFor="email-notifications">Email Notifications</Label>
                  <p className="text-sm text-muted-foreground">Receive notifications about your account via email</p>
                </div>
                <Switch
                  id="email-notifications"
                  checked={formData.notifications.email}
                  onCheckedChange={(checked) => handleNotificationChange("email", checked)}
                />
              </div>

<div className="flex items-center justify-between">
                <div className="space-y-0.5">
                  <Label htmlFor="marketing-emails">Marketing Emails</Label>
                  <p className="text-sm text-muted-foreground">
                    Receive emails about new features, promotions, and offers
                  </p>
                </div>
                <Switch
                  id="marketing-emails"
                  checked={formData.notifications.marketing}
                  onCheckedChange={(checked) => handleNotificationChange("marketing", checked)}
                />
              </div>

<div className="flex items-center justify-between">
                <div className="space-y-0.5">
                  <Label htmlFor="product-updates">Product Updates</Label>
                  <p className="text-sm text-muted-foreground">
                    Receive notifications about product updates and new features
                  </p>
                </div>
                <Switch
                  id="product-updates"
                  checked={formData.notifications.updates}
                  onCheckedChange={(checked) => handleNotificationChange("updates", checked)}
                />
              </div>
            </div>
          </CardContent>
          <CardFooter>
            <Button onClick={updateNotifications} disabled={isUpdating}>
              {isUpdating ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Saving...
                </>
              ) : (
                "Save Preferences"
              )}
            </Button>
          </CardFooter>
        </Card>
      </TabsContent>

{/* Security Tab */}
      <TabsContent value="security" className="space-y-4">
        <Card>
          <CardHeader>
            <CardTitle>Security Settings</CardTitle>
            <CardDescription>Manage your account security and authentication methods</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <div className="space-y-0.5">
                  <h3 className="font-medium">Password</h3>
                  <p className="text-sm text-muted-foreground">Change your password to keep your account secure</p>
                </div>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() =>
                    user?.createPasswordReset({ redirectUrl: `${window.location.origin}/dashboard/account` })
                  }
                >
                  <Key className="mr-2 h-4 w-4" />
                  Change Password
                </Button>
              </div>

<div className="flex items-center justify-between">
                <div className="space-y-0.5">
                  <h3 className="font-medium">Two-Factor Authentication</h3>
                  <p className="text-sm text-muted-foreground">Add an extra layer of security to your account</p>
                </div>
                <Button variant="outline" size="sm" onClick={() => router.push("/user/manage-account?tab=security")}>
                  <Shield className="mr-2 h-4 w-4" />
                  Setup 2FA
                </Button>
              </div>

<div className="flex items-center justify-between">
                <div className="space-y-0.5">
                  <h3 className="font-medium">Active Sessions</h3>
                  <p className="text-sm text-muted-foreground">
                    Manage your active sessions and sign out from other devices
                  </p>
                </div>
                <Button variant="outline" size="sm" onClick={() => router.push("/user/manage-account?tab=sessions")}>
                  <LogOut className="mr-2 h-4 w-4" />
                  Manage Sessions
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>
      </TabsContent>

{/* Danger Zone Tab */}
      <TabsContent value="danger" className="space-y-4">
        <Card className="border-destructive/50">
          <CardHeader>
            <CardTitle className="text-destructive">Danger Zone</CardTitle>
            <CardDescription>Irreversible and destructive actions for your account</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="rounded-md border border-destructive/50 p-4">
              <div className="flex flex-col gap-2">
                <h3 className="font-medium text-destructive">Delete Account</h3>
                <p className="text-sm text-muted-foreground">
                  Permanently delete your account and all associated data. This action cannot be undone.
                </p>
                <div className="mt-2">
                  <Button variant="destructive" onClick={() => setIsDeleteDialogOpen(true)}>
                    <Trash2 className="mr-2 h-4 w-4" />
                    Delete Account
                  </Button>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      </TabsContent>

{/* Delete Account Dialog */}
      <Dialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Delete Account</DialogTitle>
            <DialogDescription>
              Are you sure you want to delete your account? This action cannot be undone and all your data will be
              permanently deleted.
            </DialogDescription>
          </DialogHeader>
          <div className="py-4">
            <p className="text-sm text-muted-foreground">
              Please type <strong>delete my account</strong> to confirm.
            </p>
            <Input className="mt-2" placeholder="delete my account" id="confirm-delete" />
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setIsDeleteDialogOpen(false)} disabled={isConfirmingDelete}>
              Cancel
            </Button>
            <Button
              variant="destructive"
              onClick={deleteAccount}
              disabled={
                isConfirmingDelete ||
                (document.getElementById("confirm-delete") as HTMLInputElement)?.value !== "delete my account"
              }
            >
              {isConfirmingDelete ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Deleting...
                </>
              ) : (
                "Delete Account"
              )}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </Tabs>
  )
}
[V0_FILE]typescriptreact:file="components/subscription/subscription-plan-card.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Check } from "lucide-react"

interface SubscriptionPlanCardProps {
  name: string
  description: string
  price: string
  interval?: string
  features: string[]
  buttonText?: string
  buttonAction?: () => void
  current?: boolean
}

export function SubscriptionPlanCard({
  name,
  description,
  price,
  interval,
  features,
  buttonText = "Get Started",
  buttonAction,
  current = false,
}: SubscriptionPlanCardProps) {
  return (
    <Card className={`flex flex-col ${current ? "border-primary" : ""}`}>
      <CardHeader>
        <CardTitle>{name}</CardTitle>
        <CardDescription>{description}</CardDescription>
      </CardHeader>
      <CardContent className="flex-1">
        <div className="mb-4">
          <span className="text-3xl font-bold">{price}</span>
          {interval && <span className="text-muted-foreground">/{interval}</span>}
        </div>
        <ul className="space-y-2 mb-6">
          {features.map((feature, index) => (
            <li key={index} className="flex items-center gap-2">
              <Check className="h-4 w-4 text-primary" />
              <span className="text-sm">{feature}</span>
            </li>
          ))}
        </ul>
      </CardContent>
      <CardFooter>
        <Button
          className="w-full"
          variant={current ? "outline" : "default"}
          onClick={buttonAction}
          disabled={current && !buttonAction}
        >
          {current ? "Current Plan" : buttonText}
        </Button>
      </CardFooter>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/subscription/subscription-details.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Loader2, CreditCard, Calendar, AlertCircle } from "lucide-react"
import { formatDate } from "@/lib/utils"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { useToast } from "@/hooks/use-toast"

interface SubscriptionDetailsProps {
  subscription: {
    id: string
    status: string
    plan: {
      id: string
      name: string
      amount: number
      interval: string
    }
    currentPeriodEnd: string
    cancelAtPeriodEnd: boolean
    paymentMethod?: {
      brand: string
      last4: string
      expiryMonth: number
      expiryYear: number
    }
  }
}

export function SubscriptionDetails({ subscription }: SubscriptionDetailsProps) {
  const router = useRouter()
  const { toast } = useToast()
  const [isCancelDialogOpen, setIsCancelDialogOpen] = useState(false)
  const [isResumeDialogOpen, setIsResumeDialogOpen] = useState(false)
  const [isProcessing, setIsProcessing] = useState(false)

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

const handleCancelSubscription = async () => {
    setIsProcessing(true)
    try {
      const response = await fetch(`/api/subscription/cancel`, {
        method: "POST",
      })

if (!response.ok) {
        throw new Error("Failed to cancel subscription")
      }

toast({
        title: "Subscription cancelled",
        description: "Your subscription will end at the current billing period.",
      })

setIsCancelDialogOpen(false)
      router.refresh()
    } catch (error) {
      toast({
        title: "Error",
        description: "Failed to cancel subscription. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsProcessing(false)
    }
  }

const handleResumeSubscription = async () => {
    setIsProcessing(true)
    try {
      const response = await fetch(`/api/subscription/resume`, {
        method: "POST",
      })

if (!response.ok) {
        throw new Error("Failed to resume subscription")
      }

toast({
        title: "Subscription resumed",
        description: "Your subscription has been resumed successfully.",
      })

setIsResumeDialogOpen(false)
      router.refresh()
    } catch (error) {
      toast({
        title: "Error",
        description: "Failed to resume subscription. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsProcessing(false)
    }
  }

const handleUpdatePaymentMethod = () => {
    router.push("/dashboard/billing/update-payment")
  }

return (
    <>
      <Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <div>
              <CardTitle>Your Subscription</CardTitle>
              <CardDescription>Manage your subscription plan and billing details</CardDescription>
            </div>
            <Badge variant={subscription.status === "active" ? "default" : "destructive"} className="uppercase">
              {subscription.status}
            </Badge>
          </div>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="grid gap-4 md:grid-cols-2">
            <div className="space-y-2">
              <h3 className="text-sm font-medium text-muted-foreground">Plan</h3>
              <p className="text-lg font-semibold">{subscription.plan.name}</p>
              <p className="text-sm">
                {formatAmount(subscription.plan.amount)}/{subscription.plan.interval}
              </p>
            </div>

<div className="space-y-2">
              <h3 className="text-sm font-medium text-muted-foreground">Billing Period</h3>
              <p className="text-lg font-semibold">{subscription.cancelAtPeriodEnd ? "Cancels on" : "Renews on"}</p>
              <p className="text-sm">{formatDate(subscription.currentPeriodEnd)}</p>
            </div>
          </div>

{subscription.paymentMethod && (
            <div className="rounded-lg border p-4">
              <div className="flex items-start justify-between">
                <div>
                  <h3 className="font-medium flex items-center">
                    <CreditCard className="mr-2 h-4 w-4" />
                    Payment Method
                  </h3>
                  <p className="text-sm mt-1">
                    {subscription.paymentMethod.brand.toUpperCase()} •••• {subscription.paymentMethod.last4}
                  </p>
                  <p className="text-xs text-muted-foreground mt-1">
                    Expires {subscription.paymentMethod.expiryMonth}/{subscription.paymentMethod.expiryYear}
                  </p>
                </div>
                <Button variant="outline" size="sm" onClick={handleUpdatePaymentMethod}>
                  Update
                </Button>
              </div>
            </div>
          )}

{subscription.cancelAtPeriodEnd && (
            <Alert>
              <AlertCircle className="h-4 w-4" />
              <AlertTitle>Subscription Cancelled</AlertTitle>
              <AlertDescription>
                Your subscription has been cancelled and will end on {formatDate(subscription.currentPeriodEnd)}. You
                can resume your subscription anytime before this date.
              </AlertDescription>
            </Alert>
          )}
        </CardContent>
        <CardFooter className="flex justify-between">
          <Button variant="outline" onClick={() => router.push("/dashboard/billing/history")}>
            <Calendar className="mr-2 h-4 w-4" />
            Billing History
          </Button>

{subscription.status === "active" && !subscription.cancelAtPeriodEnd ? (
            <Button variant="destructive" onClick={() => setIsCancelDialogOpen(true)}>
              Cancel Subscription
            </Button>
          ) : subscription.cancelAtPeriodEnd ? (
            <Button onClick={() => setIsResumeDialogOpen(true)}>Resume Subscription</Button>
          ) : null}
        </CardFooter>
      </Card>

{/* Cancel Subscription Dialog */}
      <Dialog open={isCancelDialogOpen} onOpenChange={setIsCancelDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Cancel Subscription</DialogTitle>
            <DialogDescription>
              Are you sure you want to cancel your subscription? You'll still have access to your plan until the end of
              your current billing period.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setIsCancelDialogOpen(false)} disabled={isProcessing}>
              Keep Subscription
            </Button>
            <Button variant="destructive" onClick={handleCancelSubscription} disabled={isProcessing}>
              {isProcessing ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Cancelling...
                </>
              ) : (
                "Cancel Subscription"
              )}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Resume Subscription Dialog */}
      <Dialog open={isResumeDialogOpen} onOpenChange={setIsResumeDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Resume Subscription</DialogTitle>
            <DialogDescription>
              Would you like to resume your subscription? You'll continue to have access to your plan after the current
              billing period ends.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setIsResumeDialogOpen(false)} disabled={isProcessing}>
              Cancel
            </Button>
            <Button onClick={handleResumeSubscription} disabled={isProcessing}>
              {isProcessing ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Resuming...
                </>
              ) : (
                "Resume Subscription"
              )}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  )
}
[V0_FILE]typescriptreact:file="lib/stripe.ts" isMerged="true"
import Stripe from "stripe"

if (!process.env.STRIPE_SECRET_KEY) {
  throw new Error("STRIPE_SECRET_KEY is not set")
}

export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY, {
  apiVersion: "2023-10-16",
  typescript: true,
})

export const PLANS = {
  FREE: {
    name: "Free",
    id: "free",
    price: 0,
    features: ["1GB Storage", "10GB Bandwidth per month", "Basic image optimization", "100 uploads per month"],
  },
  PRO: {
    name: "Pro",
    id: "pro",
    price: 999, // $9.99
    priceId: process.env.STRIPE_PRO_PRICE_ID,
    features: [
      "10GB Storage",
      "100GB Bandwidth per month",
      "Advanced image optimization",
      "Unlimited uploads",
      "Custom domain",
      "Priority support",
    ],
  },
  BUSINESS: {
    name: "Business",
    id: "business",
    price: 2999, // $29.99
    priceId: process.env.STRIPE_BUSINESS_PRICE_ID,
    features: [
      "100GB Storage",
      "1TB Bandwidth per month",
      "Premium image optimization",
      "Unlimited uploads",
      "Multiple custom domains",
      "Team management",
      "Advanced analytics",
      "API access",
      "24/7 priority support",
    ],
  },
}

export type PlanType = keyof typeof PLANS
[V0_FILE]typescriptreact:file="app/api/subscription/route.ts" isFixed="true" isQuickEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import { auth } from "@clerk/nextjs/server"
import { sql } from "@/lib/db"
import { stripe } from "@/lib/stripe"
import type Stripe from "stripe"

export async function GET() {
  try {
    const { userId } = auth()

if (!userId) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

// Get user's subscription from our database
    const subscriptions = await sql`
      SELECT * FROM "Subscription"
      WHERE "userId" = ${userId}
      ORDER BY "createdAt" DESC
      LIMIT 1
    `

if (subscriptions.length === 0) {
      return NextResponse.json({ subscription: null })
    }

const subscription = subscriptions[0]

// If we have a Stripe subscription ID, get the latest data from Stripe
    if (subscription.stripeSubscriptionId) {
      const stripeSubscription = await stripe.subscriptions.retrieve(subscription.stripeSubscriptionId, {
        expand: ["default_payment_method"],
      })

// Format the subscription data
      const formattedSubscription = {
        id: subscription.id,
        status: stripeSubscription.status,
        plan: {
          id: subscription.planId,
          name: subscription.planName,
          amount: stripeSubscription.items.data[0].price.unit_amount,
          interval: stripeSubscription.items.data[0].price.recurring?.interval,
        },
        currentPeriodEnd: new Date(stripeSubscription.current_period_end * 1000).toISOString(),
        cancelAtPeriodEnd: stripeSubscription.cancel_at_period_end,
        paymentMethod: stripeSubscription.default_payment_method
          ? {
              brand: (stripeSubscription.default_payment_method as Stripe.PaymentMethod).card?.brand || "unknown",
              last4: (stripeSubscription.default_payment_method as Stripe.PaymentMethod).card?.last4 || "****",
              expiryMonth: (stripeSubscription.default_payment_method as Stripe.PaymentMethod).card?.exp_month || 0,
              expiryYear: (stripeSubscription.default_payment_method as Stripe.PaymentMethod).card?.exp_year || 0,
            }
          : undefined,
      }

return NextResponse.json({ subscription: formattedSubscription })
    }

// For free plan or if no Stripe subscription exists
    return NextResponse.json({
      subscription: {
        id: subscription.id,
        status: "active",
        plan: {
          id: subscription.planId,
          name: subscription.planName,
          amount: 0,
          interval: "month",
        },
        currentPeriodEnd: subscription.currentPeriodEnd,
        cancelAtPeriodEnd: false,
      },
    })
  } catch (error) {
    console.error("Error fetching subscription:", error)
    return NextResponse.json({ error: "Failed to fetch subscription" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/subscription/cancel/route.ts" isFixed="true" isQuickEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import { auth } from "@clerk/nextjs/server"
import { sql } from "@/lib/db"
import { stripe } from "@/lib/stripe"

export async function POST() {
  try {
    const { userId } = auth()

if (!userId) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

if (subscriptions.length === 0) {
      return NextResponse.json({ error: "No subscription found" }, { status: 404 })
    }

const subscription = subscriptions[0]

// If we have a Stripe subscription ID, cancel it at the end of the period
    if (subscription.stripeSubscriptionId) {
      await stripe.subscriptions.update(subscription.stripeSubscriptionId, {
        cancel_at_period_end: true,
      })

// Update our database
      await sql`
        UPDATE "Subscription"
        SET 
          "cancelAtPeriodEnd" = true,
          "updatedAt" = NOW()
        WHERE id = ${subscription.id}
      `
    }

return NextResponse.json({ success: true })
  } catch (error) {
    console.error("Error cancelling subscription:", error)
    return NextResponse.json({ error: "Failed to cancel subscription" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/subscription/resume/route.ts" isFixed="true" isQuickEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import { auth } from "@clerk/nextjs/server"
import { sql } from "@/lib/db"
import { stripe } from "@/lib/stripe"

export async function POST() {
  try {
    const { userId } = auth()

if (!userId) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

if (subscriptions.length === 0) {
      return NextResponse.json({ error: "No subscription found" }, { status: 404 })
    }

const subscription = subscriptions[0]

// If we have a Stripe subscription ID, resume it
    if (subscription.stripeSubscriptionId) {
      await stripe.subscriptions.update(subscription.stripeSubscriptionId, {
        cancel_at_period_end: false,
      })

// Update our database
      await sql`
        UPDATE "Subscription"
        SET 
          "cancelAtPeriodEnd" = false,
          "updatedAt" = NOW()
        WHERE id = ${subscription.id}
      `
    }

return NextResponse.json({ success: true })
  } catch (error) {
    console.error("Error resuming subscription:", error)
    return NextResponse.json({ error: "Failed to resume subscription" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/dashboard/billing/checkout/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
import type { Metadata } from "next"
import { redirect } from "next/navigation"
import { auth } from "@clerk/nextjs/server"
import { CheckoutForm } from "@/components/subscription/checkout-form"
import { PLANS } from "@/lib/stripe"

export const metadata: Metadata = {
  title: "Checkout | ImageVault",
  description: "Complete your subscription purchase",
}

export default async function CheckoutPage({
  searchParams,
}: {
  searchParams: { plan?: string }
}) {
  const { userId } = auth()

if (!userId) {
    redirect("/sign-in")
  }

const planId = searchParams.plan

// Validate plan
  if (!planId || !Object.keys(PLANS).some((key) => PLANS[key as keyof typeof PLANS].id === planId)) {
    redirect("/dashboard/account?tab=subscription")
  }

// Get plan details
  const plan = Object.values(PLANS).find((p) => p.id === planId)

if (!plan || plan.id === "free") {
    redirect("/dashboard/account?tab=subscription")
  }

return (
    <div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
      <div className="flex items-center justify-between">
        <h2 className="text-3xl font-bold tracking-tight">Checkout</h2>
      </div>
      <div className="grid gap-4">
        <CheckoutForm plan={plan} userId={userId} />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/subscription/checkout-form.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { loadStripe } from "@stripe/stripe-js"
import { Elements, PaymentElement, useStripe, useElements } from "@stripe/react-stripe-js"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Loader2, Check } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

// Initialize Stripe
const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!)

interface CheckoutFormProps {
  plan: {
    name: string
    id: string
    price: number
    features: string[]
    priceId?: string
  }
  userId: string
}

export function CheckoutForm({ plan, userId }: CheckoutFormProps) {
  const [clientSecret, setClientSecret] = useState<string | null>(null)
  const [isLoading, setIsLoading] = useState(false)

// Create payment intent when component mounts
  useState(() => {
    const createPaymentIntent = async () => {
      setIsLoading(true)
      try {
        const response = await fetch("/api/subscription/create-intent", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            planId: plan.id,
          }),
        })

if (!response.ok) {
          throw new Error("Failed to create payment intent")
        }

const data = await response.json()
        setClientSecret(data.clientSecret)
      } catch (error) {
        console.error("Error creating payment intent:", error)
      } finally {
        setIsLoading(false)
      }
    }

createPaymentIntent()
  }, [plan.id])

if (isLoading || !clientSecret) {
    return (
      <div className="flex items-center justify-center p-8">
        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
      </div>
    )
  }

const options = {
    clientSecret,
    appearance: {
      theme: "stripe",
    },
  }

return (
    <div className="grid gap-6 md:grid-cols-2">
      <Card>
        <CardHeader>
          <CardTitle>Payment Information</CardTitle>
          <CardDescription>Enter your payment details to complete your subscription</CardDescription>
        </CardHeader>
        <CardContent>
          <Elements stripe={stripePromise} options={options}>
            <CheckoutFormContent plan={plan} userId={userId} />
          </Elements>
        </CardContent>
      </Card>

<Card>
        <CardHeader>
          <CardTitle>Order Summary</CardTitle>
          <CardDescription>Review your subscription details</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex justify-between">
            <span className="font-medium">{plan.name} Plan</span>
            <span>${(plan.price / 100).toFixed(2)}/month</span>
          </div>

<div className="border-t pt-4">
            <h3 className="font-medium mb-2">Plan Features:</h3>
            <ul className="space-y-2">
              {plan.features.map((feature, index) => (
                <li key={index} className="flex items-center gap-2">
                  <Check className="h-4 w-4 text-primary" />
                  <span className="text-sm">{feature}</span>
                </li>
              ))}
            </ul>
          </div>
        </CardContent>
        <CardFooter className="border-t">
          <div className="w-full flex justify-between font-bold">
            <span>Total</span>
            <span>${(plan.price / 100).toFixed(2)}/month</span>
          </div>
        </CardFooter>
      </Card>
    </div>
  )
}

function CheckoutFormContent({ plan, userId }: CheckoutFormProps) {
  const stripe = useStripe()
  const elements = useElements()
  const router = useRouter()
  const { toast } = useToast()
  const [isProcessing, setIsProcessing] = useState(false)
  const [errorMessage, setErrorMessage] = useState<string | null>(null)

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

if (!stripe || !elements) {
      return
    }

setIsProcessing(true)
    setErrorMessage(null)

try {
      const { error, paymentIntent } = await stripe.confirmPayment({
        elements,
        confirmParams: {
          return_url: `${window.location.origin}/dashboard/billing/success?plan=${plan.id}`,
        },
        redirect: "if_required",
      })

if (error) {
        setErrorMessage(error.message || "An error occurred during payment")
        return
      }

if (paymentIntent && paymentIntent.status === "succeeded") {
        // Create subscription in our database
        const response = await fetch("/api/subscription/create", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            planId: plan.id,
            paymentIntentId: paymentIntent.id,
          }),
        })

if (!response.ok) {
          throw new Error("Failed to create subscription")
        }

toast({
          title: "Subscription successful",
          description: `You are now subscribed to the ${plan.name} plan.`,
        })

router.push("/dashboard/account?tab=subscription")
      }
    } catch (error) {
      console.error("Error processing payment:", error)
      setErrorMessage("An unexpected error occurred. Please try again.")
    } finally {
      setIsProcessing(false)
    }
  }

return (
    <form onSubmit={handleSubmit} className="space-y-6">
      <PaymentElement />

{errorMessage && <div className="text-sm text-destructive">{errorMessage}</div>}

<Button type="submit" className="w-full" disabled={!stripe || isProcessing}>
        {isProcessing ? (
          <>
            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
            Processing...
          </>
        ) : (
          `Subscribe for $${(plan.price / 100).toFixed(2)}/month`
        )}
      </Button>
    </form>
  )
}
[V0_FILE]typescriptreact:file="app/api/subscription/create-intent/route.ts" isFixed="true" isQuickEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import { auth } from "@clerk/nextjs/server"
import { stripe, PLANS } from "@/lib/stripe"

export async function POST(request: Request) {
  try {
    const { userId } = auth()

if (!userId) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const { planId } = await request.json()

// Validate plan
    const planKey = Object.keys(PLANS).find((key) => PLANS[key as keyof typeof PLANS].id === planId) as
      | keyof typeof PLANS
      | undefined

if (!planKey || planId === "free") {
      return NextResponse.json({ error: "Invalid plan" }, { status: 400 })
    }

const plan = PLANS[planKey]

if (!plan.priceId) {
      return NextResponse.json({ error: "Plan not available for purchase" }, { status: 400 })
    }

// Create a payment intent
    const paymentIntent = await stripe.paymentIntents.create({
      amount: plan.price,
      currency: "usd",
      metadata: {
        userId,
        planId,
      },
    })

return NextResponse.json({
      clientSecret: paymentIntent.client_secret,
    })
  } catch (error) {
    console.error("Error creating payment intent:", error)
    return NextResponse.json({ error: "Failed to create payment intent" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/subscription/create/route.ts" isFixed="true" isQuickEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import { auth } from "@clerk/nextjs/server"
import { sql } from "@/lib/db"
import { stripe, PLANS } from "@/lib/stripe"
import { randomUUID } from "crypto"

export async function POST(request: Request) {
  try {
    const { userId } = auth()

if (!userId) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const { planId, paymentIntentId } = await request.json()

// Validate plan
    const planKey = Object.keys(PLANS).find((key) => PLANS[key as keyof typeof PLANS].id === planId) as
      | keyof typeof PLANS
      | undefined

if (!planKey || planId === "free") {
      return NextResponse.json({ error: "Invalid plan" }, { status: 400 })
    }

const plan = PLANS[planKey]

if (!plan.priceId) {
      return NextResponse.json({ error: "Plan not available for purchase" }, { status: 400 })
    }

// Retrieve payment intent to verify it's successful
    const paymentIntent = await stripe.paymentIntents.retrieve(paymentIntentId)

if (paymentIntent.status !== "succeeded") {
      return NextResponse.json({ error: "Payment not successful" }, { status: 400 })
    }

// Create a customer in Stripe if one doesn't exist
    let customerId: string

// Check if user already has a Stripe customer ID
    const customers = await sql`
      SELECT "stripeCustomerId" FROM "User"
      WHERE id = ${userId}
    `

if (customers.length > 0 && customers[0].stripeCustomerId) {
      customerId = customers[0].stripeCustomerId
    } else {
      // Get user details from Clerk
      const userResponse = await fetch(`https://api.clerk.dev/v1/users/${userId}`, {
        headers: {
          Authorization: `Bearer ${process.env.CLERK_SECRET_KEY}`,
        },
      })

if (!userResponse.ok) {
        return NextResponse.json({ error: "Failed to fetch user data" }, { status: 500 })
      }

const userData = await userResponse.json()
      const email = userData.email_addresses?.[0]?.email_address
      const name = [userData.first_name, userData.last_name].filter(Boolean).join(" ")

// Create a new customer
      const customer = await stripe.customers.create({
        email,
        name,
        metadata: {
          userId,
        },
      })

customerId = customer.id

// Update user with Stripe customer ID
      await sql`
        UPDATE "User"
        SET "stripeCustomerId" = ${customerId}
        WHERE id = ${userId}
      `
    }

// Create a subscription
    const subscription = await stripe.subscriptions.create({
      customer: customerId,
      items: [
        {
          price: plan.priceId,
        },
      ],
      payment_behavior: "default_incomplete",
      payment_settings: {
        save_default_payment_method: "on_subscription",
      },
      expand: ["latest_invoice.payment_intent"],
    })

// Calculate the current period end
    const currentPeriodEnd = new Date(subscription.current_period_end * 1000).toISOString()

// Create subscription in our database
    await sql`
      INSERT INTO "Subscription" (
        id,
        "userId",
        "planId",
        "planName",
        "stripeSubscriptionId",
        "stripeCustomerId",
        "currentPeriodEnd",
        "cancelAtPeriodEnd",
        status,
        "createdAt",
        "updatedAt"
      ) VALUES (
        ${randomUUID()},
        ${userId},
        ${planId},
        ${plan.name},
        ${subscription.id},
        ${customerId},
        ${currentPeriodEnd},
        false,
        ${subscription.status},
        NOW(),
        NOW()
      )
    `

// Update user's storage limit based on plan
    let storageLimit: number
    switch (planId) {
      case "pro":
        storageLimit = 10 * 1024 * 1024 * 1024 // 10GB
        break
      case "business":
        storageLimit = 100 * 1024 * 1024 * 1024 // 100GB
        break
      default:
        storageLimit = 1 * 1024 * 1024 * 1024 // 1GB (free plan)
    }

await sql`
      UPDATE "User"
      SET "storageLimit" = ${storageLimit}
      WHERE id = ${userId}
    `

return NextResponse.json({ success: true })
  } catch (error) {
    console.error("Error creating subscription:", error)
    return NextResponse.json({ error: "Failed to create subscription" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/dashboard/billing/success/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
import type { Metadata } from "next"
import { redirect } from "next/navigation"
import Link from "next/link"
import { auth } from "@clerk/nextjs/server"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { CheckCircle } from "lucide-react"

export const metadata: Metadata = {
  title: "Subscription Success | ImageVault",
  description: "Your subscription has been successfully activated",
}

export default async function SuccessPage({
  searchParams,
}: {
  searchParams: { plan?: string }
}) {
  const { userId } = auth()

if (!userId) {
    redirect("/sign-in")
  }

const planId = searchParams.plan

// Get plan name
  let planName = "Pro"
  if (planId === "business") {
    planName = "Business"
  }

return (
    <div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
      <div className="flex items-center justify-between">
        <h2 className="text-3xl font-bold tracking-tight">Subscription Successful</h2>
      </div>
      <div className="grid gap-4 place-items-center">
        <Card className="max-w-md w-full">
          <CardHeader className="text-center">
            <div className="flex justify-center mb-4">
              <CheckCircle className="h-16 w-16 text-green-500" />
            </div>
            <CardTitle className="text-2xl">Thank You!</CardTitle>
            <CardDescription>Your {planName} subscription has been successfully activated.</CardDescription>
          </CardHeader>
          <CardContent className="text-center">
            <p className="mb-4">
              You now have access to all the {planName} plan features. Your subscription will automatically renew each
              month.
            </p>
            <p className="text-sm text-muted-foreground">
              You can manage your subscription at any time from your account settings.
            </p>
          </CardContent>
          <CardFooter className="flex justify-center gap-4">
            <Button asChild>
              <Link href="/dashboard">Go to Dashboard</Link>
            </Button>
            <Button variant="outline" asChild>
              <Link href="/dashboard/account?tab=subscription">Manage Subscription</Link>
            </Button>
          </CardFooter>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/billing/history/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
import type { Metadata } from "next"
import { redirect } from "next/navigation"
import { auth } from "@clerk/nextjs/server"
import { BillingHistory } from "@/components/subscription/billing-history"

export const metadata: Metadata = {
  title: "Billing History | ImageVault",
  description: "View your billing history and past invoices",
}

export default async function BillingHistoryPage() {
  const { userId } = auth()

if (!userId) {
    redirect("/sign-in")
  }

return (
    <div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
      <div className="flex items-center justify-between">
        <h2 className="text-3xl font-bold tracking-tight">Billing History</h2>
      </div>
      <div className="grid gap-4">
        <BillingHistory userId={userId} />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/subscription/billing-history.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Loader2, Download, Receipt } from "lucide-react"
import { formatDate } from "@/lib/utils"

interface BillingHistoryProps {
  userId: string
}

interface Invoice {
  id: string
  number: string
  amount: number
  status: string
  date: string
  pdfUrl: string
}

export function BillingHistory({ userId }: BillingHistoryProps) {
  const [invoices, setInvoices] = useState<Invoice[]>([])
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    const fetchInvoices = async () => {
      try {
        const response = await fetch("/api/subscription/invoices")
        if (response.ok) {
          const data = await response.json()
          setInvoices(data.invoices)
        }
      } catch (error) {
        console.error("Error fetching invoices:", error)
      } finally {
        setIsLoading(false)
      }
    }

fetchInvoices()
  }, [])

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

const getStatusBadge = (status: string) => {
    switch (status) {
      case "paid":
        return <Badge variant="default">Paid</Badge>
      case "open":
        return <Badge variant="outline">Pending</Badge>
      case "void":
        return <Badge variant="secondary">Void</Badge>
      case "uncollectible":
        return <Badge variant="destructive">Failed</Badge>
      default:
        return <Badge variant="outline">{status}</Badge>
    }
  }

if (isLoading) {
    return (
      <Card>
        <CardContent className="py-10">
          <div className="flex justify-center">
            <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
          </div>
        </CardContent>
      </Card>
    )
  }

if (invoices.length === 0) {
    return (
      <Card>
        <CardHeader>
          <CardTitle>Billing History</CardTitle>
          <CardDescription>View your past invoices and payment history</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex flex-col items-center justify-center py-10 text-center">
            <Receipt className="h-12 w-12 text-muted-foreground mb-4" />
            <h3 className="text-lg font-medium">No invoices yet</h3>
            <p className="text-sm text-muted-foreground mt-1">
              Your billing history will appear here once you have made a payment.
            </p>
          </div>
        </CardContent>
      </Card>
    )
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>Billing History</CardTitle>
        <CardDescription>View your past invoices and payment history</CardDescription>
      </CardHeader>
      <CardContent>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Invoice Number</TableHead>
              <TableHead>Date</TableHead>
              <TableHead>Amount</TableHead>
              <TableHead>Status</TableHead>
              <TableHead className="text-right">Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {invoices.map((invoice) => (
              <TableRow key={invoice.id}>
                <TableCell className="font-medium">{invoice.number}</TableCell>
                <TableCell>{formatDate(invoice.date)}</TableCell>
                <TableCell>{formatAmount(invoice.amount)}</TableCell>
                <TableCell>{getStatusBadge(invoice.status)}</TableCell>
                <TableCell className="text-right">
                  <Button variant="outline" size="sm" asChild>
                    <a href={invoice.pdfUrl} target="_blank" rel="noopener noreferrer">
                      <Download className="h-4 w-4 mr-2" />
                      Download
                    </a>
                  </Button>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/api/subscription/invoices/route.ts" isFixed="true" isQuickEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import { auth } from "@clerk/nextjs/server"
import { sql } from "@/lib/db"
import { stripe } from "@/lib/stripe"

export async function GET() {
  try {
    const { userId } = auth()

if (!userId) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

// Get user's Stripe customer ID
    const users = await sql`
      SELECT "stripeCustomerId" FROM "User"
      WHERE id = ${userId}
    `

if (users.length === 0 || !users[0].stripeCustomerId) {
      return NextResponse.json({ invoices: [] })
    }

const customerId = users[0].stripeCustomerId

// Fetch invoices from Stripe
    const invoices = await stripe.invoices.list({
      customer: customerId,
      limit: 50,
    })

// Format invoices
    const formattedInvoices = invoices.data.map((invoice) => ({
      id: invoice.id,
      number: invoice.number,
      amount: invoice.amount_paid,
      status: invoice.status,
      date: new Date(invoice.created * 1000).toISOString(),
      pdfUrl: invoice.invoice_pdf,
    }))

return NextResponse.json({ invoices: formattedInvoices })
  } catch (error) {
    console.error("Error fetching invoices:", error)
    return NextResponse.json({ error: "Failed to fetch invoices" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/dashboard/billing/update-payment/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
import type { Metadata } from "next"
import { redirect } from "next/navigation"
import { auth } from "@clerk/nextjs/server"
import { UpdatePaymentForm } from "@/components/subscription/update-payment-form"

export const metadata: Metadata = {
  title: "Update Payment Method | ImageVault",
  description: "Update your payment method for your subscription",
}

export default async function UpdatePaymentPage() {
  const { userId } = auth()

if (!userId) {
    redirect("/sign-in")
  }

return (
    <div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
      <div className="flex items-center justify-between">
        <h2 className="text-3xl font-bold tracking-tight">Update Payment Method</h2>
      </div>
      <div className="grid gap-4">
        <UpdatePaymentForm userId={userId} />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/subscription/update-payment-form.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { loadStripe } from "@stripe/stripe-js"
import { Elements, PaymentElement, useStripe, useElements } from "@stripe/react-stripe-js"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Loader2 } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

// Initialize Stripe
const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!)

interface UpdatePaymentFormProps {
  userId: string
}

export function UpdatePaymentForm({ userId }: UpdatePaymentFormProps) {
  const [setupIntent, setSetupIntent] = useState<string | null>(null)
  const [isLoading, setIsLoading] = useState(true)

// Create setup intent when component mounts
  useEffect(() => {
    const createSetupIntent = async () => {
      try {
        const response = await fetch("/api/subscription/setup-intent", {
          method: "POST",
        })

if (!response.ok) {
          throw new Error("Failed to create setup intent")
        }

const data = await response.json()
        setSetupIntent(data.clientSecret)
      } catch (error) {
        console.error("Error creating setup intent:", error)
      } finally {
        setIsLoading(false)
      }
    }

createSetupIntent()
  }, [])

if (isLoading || !setupIntent) {
    return (
      <Card>
        <CardContent className="py-10">
          <div className="flex justify-center">
            <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
          </div>
        </CardContent>
      </Card>
    )
  }

const options = {
    clientSecret: setupIntent,
    appearance: {
      theme: "stripe",
    },
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>Update Payment Method</CardTitle>
        <CardDescription>Update the payment method for your subscription</CardDescription>
      </CardHeader>
      <CardContent>
        <Elements stripe={stripePromise} options={options}>
          <UpdatePaymentFormContent />
        </Elements>
      </CardContent>
    </Card>
  )
}

function UpdatePaymentFormContent() {
  const stripe = useStripe()
  const elements = useElements()
  const router = useRouter()
  const { toast } = useToast()
  const [isProcessing, setIsProcessing] = useState(false)
  const [errorMessage, setErrorMessage] = useState<string | null>(null)

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

if (!stripe || !elements) {
      return
    }

setIsProcessing(true)
    setErrorMessage(null)

try {
      const { error } = await stripe.confirmSetup({
        elements,
        confirmParams: {
          return_url: `${window.location.origin}/dashboard/account?tab=subscription`,
        },
      })

if (error) {
        setErrorMessage(error.message || "An error occurred while updating payment method")
        return
      }

// If we get here without a redirect, it means the update was successful
      toast({
        title: "Payment method updated",
        description: "Your payment method has been updated successfully.",
      })

router.push("/dashboard/account?tab=subscription")
    } catch (error) {
      console.error("Error updating payment method:", error)
      setErrorMessage("An unexpected error occurred. Please try again.")
    } finally {
      setIsProcessing(false)
    }
  }

return (
    <form onSubmit={handleSubmit} className="space-y-6">
      <PaymentElement />

{errorMessage && <div className="text-sm text-destructive">{errorMessage}</div>}

<Button type="submit" className="w-full" disabled={!stripe || isProcessing}>
        {isProcessing ? (
          <>
            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
            Processing...
          </>
        ) : (
          "Update Payment Method"
        )}
      </Button>
    </form>
  )
}
[V0_FILE]typescriptreact:file="app/api/subscription/setup-intent/route.ts" isFixed="true" isQuickEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import { auth } from "@clerk/nextjs/server"
import { sql } from "@/lib/db"
import { stripe } from "@/lib/stripe"

export async function POST() {
  try {
    const { userId } = auth()

if (!userId) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

// Get user's Stripe customer ID
    const users = await sql`
      SELECT "stripeCustomerId" FROM "User"
      WHERE id = ${userId}
    `

if (users.length === 0 || !users[0].stripeCustomerId) {
      return NextResponse.json({ error: "No customer found" }, { status: 404 })
    }

const customerId = users[0].stripeCustomerId

// Create a setup intent
    const setupIntent = await stripe.setupIntents.create({
      customer: customerId,
      payment_method_types: ["card"],
    })

return NextResponse.json({
      clientSecret: setupIntent.client_secret,
    })
  } catch (error) {
    console.error("Error creating setup intent:", error)
    return NextResponse.json({ error: "Failed to create setup intent" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/webhooks/stripe/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { headers } from "next/headers"
import { sql } from "@/lib/db"
import { stripe } from "@/lib/stripe"
import type Stripe from "stripe"

export async function POST(request: Request) {
  const body = await request.text()
  const signature = headers().get("Stripe-Signature") as string

let event: Stripe.Event

try {
    event = stripe.webhooks.constructEvent(body, signature, process.env.STRIPE_WEBHOOK_SECRET!)
  } catch (error) {
    console.error("Error verifying webhook signature:", error)
    return NextResponse.json({ error: "Invalid signature" }, { status: 400 })
  }

try {
    switch (event.type) {
      case "customer.subscription.created":
      case "customer.subscription.updated":
        await handleSubscriptionUpdated(event.data.object as Stripe.Subscription)
        break
      case "customer.subscription.deleted":
        await handleSubscriptionDeleted(event.data.object as Stripe.Subscription)
        break
      case "invoice.payment_succeeded":
        await handleInvoicePaymentSucceeded(event.data.object as Stripe.Invoice)
        break
      case "invoice.payment_failed":
        await handleInvoicePaymentFailed(event.data.object as Stripe.Invoice)
        break
    }

return NextResponse.json({ received: true })
  } catch (error) {
    console.error("Error handling webhook event:", error)
    return NextResponse.json({ error: "Webhook handler failed" }, { status: 500 })
  }
}

async function handleSubscriptionUpdated(subscription: Stripe.Subscription) {
  // Get the customer ID
  const customerId = subscription.customer as string

// Find the user with this Stripe customer ID
  const users = await sql`
    SELECT id FROM "User"
    WHERE "stripeCustomerId" = ${customerId}
  `

if (users.length === 0) {
    console.error("No user found for Stripe customer:", customerId)
    return
  }

const userId = users[0].id

// Get the subscription from our database
  const subscriptions = await sql`
    SELECT id FROM "Subscription"
    WHERE "stripeSubscriptionId" = ${subscription.id}
  `

const currentPeriodEnd = new Date(subscription.current_period_end * 1000).toISOString()

if (subscriptions.length === 0) {
    // Create a new subscription record
    await sql`
      INSERT INTO "Subscription" (
        id,
        "userId",
        "planId",
        "planName",
        "stripeSubscriptionId",
        "stripeCustomerId",
        "currentPeriodEnd",
        "cancelAtPeriodEnd",
        status,
        "createdAt",
        "updatedAt"
      ) VALUES (
        ${crypto.randomUUID()},
        ${userId},
        ${subscription.items.data[0].price.metadata.planId || "unknown"},
        ${subscription.items.data[0].price.nickname || "Unknown Plan"},
        ${subscription.id},
        ${customerId},
        ${currentPeriodEnd},
        ${subscription.cancel_at_period_end},
        ${subscription.status},
        NOW(),
        NOW()
      )
    `
  } else {
    // Update existing subscription
    await sql`
      UPDATE "Subscription"
      SET 
        "currentPeriodEnd" = ${currentPeriodEnd},
        "cancelAtPeriodEnd" = ${subscription.cancel_at_period_end},
        status = ${subscription.status},
        "updatedAt" = NOW()
      WHERE "stripeSubscriptionId" = ${subscription.id}
    `
  }

// Update user's storage limit based on plan
  const planId = subscription.items.data[0].price.metadata.planId
  let storageLimit: number

switch (planId) {
    case "pro":
      storageLimit = 10 * 1024 * 1024 * 1024 // 10GB
      break
    case "business":
      storageLimit = 100 * 1024 * 1024 * 1024 // 100GB
      break
    default:
      storageLimit = 1 * 1024 * 1024 * 1024 // 1GB (free plan)
  }

await sql`
    UPDATE "User"
    SET "storageLimit" = ${storageLimit}
    WHERE id = ${userId}
  `
}

async function handleSubscriptionDeleted(subscription: Stripe.Subscription) {
  // Update subscription status in our database
  await sql`
    UPDATE "Subscription"
    SET 
      status = 'canceled',
      "cancelAtPeriodEnd" = true,
      "updatedAt" = NOW()
    WHERE "stripeSubscriptionId" = ${subscription.id}
  `

// Get the customer ID
  const customerId = subscription.customer as string

// Find the user with this Stripe customer ID
  const users = await sql`
    SELECT id FROM "User"
    WHERE "stripeCustomerId" = ${customerId}
  `

if (users.length === 0) {
    console.error("No user found for Stripe customer:", customerId)
    return
  }

const userId = users[0].id

// Reset user's storage limit to free plan
  const storageLimit = 1 * 1024 * 1024 * 1024 // 1GB (free plan)

await sql`
    UPDATE "User"
    SET "storageLimit" = ${storageLimit}
    WHERE id = ${userId}
  `
}

async function handleInvoicePaymentSucceeded(invoice: Stripe.Invoice) {
  // Update subscription status if this is for a subscription
  if (invoice.subscription) {
    await sql`
      UPDATE "Subscription"
      SET 
        status = 'active',
        "updatedAt" = NOW()
      WHERE "stripeSubscriptionId" = ${invoice.subscription as string}
    `
  }
}

async function handleInvoicePaymentFailed(invoice: Stripe.Invoice) {
  // Update subscription status if this is for a subscription
  if (invoice.subscription) {
    await sql`
      UPDATE "Subscription"
      SET 
        status = 'past_due',
        "updatedAt" = NOW()
      WHERE "stripeSubscriptionId" = ${invoice.subscription as string}
    `
  }
}
[V0_FILE]sql:file="scripts/update-schema-subscription.sql" isMerged="true"
-- Add subscription-related columns to User table
DO $$
BEGIN
   IF NOT EXISTS (
       SELECT FROM information_schema.columns
       WHERE table_name = 'User' AND column_name = 'stripeCustomerId'
   ) THEN
       ALTER TABLE "User" ADD COLUMN "stripeCustomerId" TEXT;
   END IF;
END
$$;

-- Create Subscription table if it doesn't exist
CREATE TABLE IF NOT EXISTS "Subscription" (
  id TEXT PRIMARY KEY,
  "userId" TEXT NOT NULL,
  "planId" TEXT NOT NULL,
  "planName" TEXT NOT NULL,
  "stripeSubscriptionId" TEXT,
  "stripeCustomerId" TEXT,
  "currentPeriodEnd" TIMESTAMP WITH TIME ZONE,
  "cancelAtPeriodEnd" BOOLEAN NOT NULL DEFAULT false,
  status TEXT NOT NULL,
  "createdAt" TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT CURRENT_TIMESTAMP,
  "updatedAt" TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT CURRENT_TIMESTAMP,
  FOREIGN KEY ("userId") REFERENCES "User"(id) ON DELETE CASCADE
);

-- Create index on Subscription table
CREATE INDEX IF NOT EXISTS "subscription_user_id_idx" ON "Subscription" ("userId");
CREATE INDEX IF NOT EXISTS "subscription_stripe_id_idx" ON "Subscription" ("stripeSubscriptionId");
[V0_FILE]typescriptreact:file="components/dashboard/nav.tsx" isMerged="true"
"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import {
  Home,
  ImageIcon,
  Upload,
  BarChart,
  Settings,
  FolderOpen,
  Share2,
  Trash2,
  HelpCircle,
  Users,
  Shield,
  Sparkles,
  CreditCard,
  User,
} from "lucide-react"
import { useAuth } from "@clerk/nextjs"
import { useEffect, useState } from "react"
import { UserRole } from "@/lib/user-roles"

export const dashboardNavItems = [
  {
    label: "Overview",
    href: "/dashboard",
    icon: Home,
  },
  {
    label: "Images",
    href: "/dashboard/images",
    icon: ImageIcon,
  },
  {
    label: "Upload",
    href: "/dashboard/upload",
    icon: Upload,
  },
  {
    label: "AI Search",
    href: "/dashboard/images/search",
    icon: Sparkles,
  },
  {
    label: "Analytics",
    href: "/dashboard/analytics",
    icon: BarChart,
  },
  {
    label: "Folders",
    href: "/dashboard/folders",
    icon: FolderOpen,
  },
  {
    label: "Sharing",
    href: "/dashboard/sharing",
    icon: Share2,
  },
  {
    label: "Trash",
    href: "/dashboard/trash",
    icon: Trash2,
  },
  {
    label: "Account",
    href: "/dashboard/account",
    icon: User,
  },
  {
    label: "Billing",
    href: "/dashboard/account?tab=subscription",
    icon: CreditCard,
  },
  {
    label: "Settings",
    href: "/dashboard/settings",
    icon: Settings,
  },
  {
    label: "Help",
    href: "/dashboard/help",
    icon: HelpCircle,
  },
]

export const adminNavItems = [
  {
    label: "User Management",
    href: "/dashboard/admin/users",
    icon: Users,
  },
  {
    label: "Permissions",
    href: "/dashboard/admin/permissions",
    icon: Shield,
  },
]

export function DashboardNav() {
  const pathname = usePathname()
  const { userId } = useAuth()
  const [userRole, setUserRole] = useState<string | null>(null)
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    const fetchUserRole = async () => {
      if (!userId) return

try {
        const response = await fetch(`/api/users/me/role`)
        if (response.ok) {
          const data = await response.json()
          setUserRole(data.role)
        }
      } catch (error) {
        console.error("Error fetching user role:", error)
      } finally {
        setIsLoading(false)
      }
    }

fetchUserRole()
  }, [userId])

const isAdmin = userRole === UserRole.ADMIN

return (
    <div className="hidden border-r bg-muted/40 md:block md:w-64 lg:w-72">
      <div className="flex h-full flex-col gap-2 p-4">
        <nav className="grid gap-1 text-sm">
          {dashboardNavItems.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className={`flex items-center gap-3 rounded-lg px-3 py-2 transition-colors ${
                pathname === item.href || (item.href.includes("?tab=") && pathname === item.href.split("?")[0])
                  ? "bg-muted text-foreground"
                  : "text-muted-foreground hover:bg-muted hover:text-foreground"
              }`}
            >
              <item.icon className="h-5 w-5" />
              {item.label}
            </Link>
          ))}

{isAdmin && !isLoading && (
            <>
              <div className="my-2 px-3 text-xs font-semibold text-muted-foreground">Admin</div>
              {adminNavItems.map((item) => (
                <Link
                  key={item.href}
                  href={item.href}
                  className={`flex items-center gap-3 rounded-lg px-3 py-2 transition-colors ${
                    pathname === item.href
                      ? "bg-muted text-foreground"
                      : "text-muted-foreground hover:bg-muted hover:text-foreground"
                  }`}
                >
                  <item.icon className="h-5 w-5" />
                  {item.label}
                </Link>
              ))}
            </>
          )}
        </nav>
        <div className="mt-auto">
          <div className="rounded-lg bg-muted p-4">
            <div className="flex items-center gap-4 mb-2">
              <div className="rounded-full bg-primary/10 p-2">
                <BarChart className="h-4 w-4 text-primary" />
              </div>
              <div>
                <p className="text-sm font-medium">Storage Used</p>
                <p className="text-xs text-muted-foreground">245MB of 1GB (24.5%)</p>
              </div>
            </div>
            <div className="h-2 rounded-full bg-muted-foreground/20">
              <div className="h-full rounded-full bg-primary" style={{ width: "24.5%" }} />
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="lib/utils.ts" isFixed="true" isQuickEdit="true" isMerged="true"
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

// Helper function to convert a File to a Blob URL
export function fileToDataUrl(file: File): Promise<string> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = () => resolve(reader.result as string)
    reader.onerror = reject
    reader.readAsDataURL(file)
  })
}

// Helper function to compress an image using canvas
export async function compressImage(file: File, { maxWidth = 1920, maxHeight = 1080, quality = 0.8 }): Promise<Blob> {
  return new Promise((resolve, reject) => {
    const img = new Image()
    img.onload = () => {
      // Calculate new dimensions while maintaining aspect ratio
      let width = img.width
      let height = img.height

if (width > maxWidth) {
        height = (height * maxWidth) / width
        width = maxWidth
      }

if (height > maxHeight) {
        width = (width * maxHeight) / height
        height = maxHeight
      }

// Create canvas and draw image
      const canvas = document.createElement("canvas")
      canvas.width = width
      canvas.height = height

const ctx = canvas.getContext("2d")
      if (!ctx) {
        reject(new Error("Could not get canvas context"))
        return
      }

ctx.drawImage(img, 0, 0, width, height)

// Convert to blob
      canvas.toBlob(
        (blob) => {
          if (blob) {
            resolve(blob)
          } else {
            reject(new Error("Could not create blob"))
          }
        },
        file.type,
        quality,
      )
    }

img.onerror = () => reject(new Error("Could not load image"))
    img.src = URL.createObjectURL(file)
  })
}

// Helper function to resize an image
export async function resizeImage(
  file: File,
  width: number,
  height: number,
  maintainAspectRatio = true,
): Promise<Blob> {
  return new Promise((resolve, reject) => {
    const img = new Image()
    img.onload = () => {
      let targetWidth = width
      let targetHeight = height

// Calculate dimensions if maintaining aspect ratio
      if (maintainAspectRatio) {
        const aspectRatio = img.width / img.height

if (width && !height) {
          targetHeight = width / aspectRatio
        } else if (height && !width) {
          targetWidth = height * aspectRatio
        } else {
          // Both dimensions provided, prioritize width
          targetHeight = width / aspectRatio
        }
      }

// Create canvas and draw image
      const canvas = document.createElement("canvas")
      canvas.width = targetWidth
      canvas.height = targetHeight

const ctx = canvas.getContext("2d")
      if (!ctx) {
        reject(new Error("Could not get canvas context"))
        return
      }

ctx.drawImage(img, 0, 0, targetWidth, targetHeight)

// Convert to blob
      canvas.toBlob(
        (blob) => {
          if (blob) {
            resolve(blob)
          } else {
            reject(new Error("Could not create blob"))
          }
        },
        file.type,
        0.9,
      )
    }

img.onerror = () => reject(new Error("Could not load image"))
    img.src = URL.createObjectURL(file)
  })
}

// Helper function to format bytes into human-readable format
export function formatBytes(bytes: number, decimals = 2): string {
  if (bytes === 0) return "0 Bytes"

const k = 1024
  const dm = decimals < 0 ? 0 : decimals
  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"]

const i = Math.floor(Math.log(bytes) / Math.log(k))

return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i]
}

// Format date to a readable string
export function formatDate(dateString: string): string {
  const date = new Date(dateString)
  return date.toLocaleDateString("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
  })
}

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

// Validate email format
export function isValidEmail(email: string): boolean {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  return emailRegex.test(email)
}

// Truncate text with ellipsis
export function truncateText(text: string, maxLength: number): string {
  if (text.length <= maxLength) return text
  return text.slice(0, maxLength) + "..."
}

// Delay execution (useful for animations, etc.)
export function delay(ms: number): Promise<void> {
  return new Promise((resolve) => setTimeout(resolve, ms))
}

// Get file extension from filename
export function getFileExtension(filename: string): string {
  return filename.slice(((filename.lastIndexOf(".") - 1) >>> 0) + 2)
}

// Check if a file is an image
export function isImageFile(file: File): boolean {
  return file.type.startsWith("image/")
}

// Convert hex color to RGB
export function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
  return result
    ? {
        r: Number.parseInt(result[1], 16),
        g: Number.parseInt(result[2], 16),
        b: Number.parseInt(result[3], 16),
      }
    : null
}
[V0_FILE]typescriptreact:file="lib/ai/image-analysis.ts" isMerged="true"
import { generateText } from "ai"
import { groq } from "@ai-sdk/groq"

export type ImageAnalysisResult = {
  tags: string[]
  description: string
  categories: string[]
  nsfw: boolean
  colors: string[]
}

/**
 * Analyzes an image using Groq's LLM capabilities
 * @param imageUrl URL of the image to analyze
 * @returns Analysis results including tags, description, and other metadata
 */
export async function analyzeImage(imageUrl: string): Promise<ImageAnalysisResult> {
  try {
    // Create a prompt that describes the image analysis task
    const prompt = `
      Analyze the image at this URL: ${imageUrl}
      
      Provide a detailed analysis in the following JSON format:
      {
        "tags": ["tag1", "tag2", "tag3", ...], // 5-10 relevant tags
        "description": "A concise description of the image content",
        "categories": ["category1", "category2"], // 1-3 broad categories
        "nsfw": false, // boolean indicating if content is not safe for work
        "colors": ["primary color1", "color2", "color3"] // dominant colors in the image
      }
      
      Only respond with valid JSON. No additional text.
    `

// Generate analysis using Groq
    const { text } = await generateText({
      model: groq("llama3-70b-8192"),
      prompt,
      temperature: 0.2, // Lower temperature for more consistent results
      maxTokens: 1000,
    })

// Parse the response
    try {
      const result = JSON.parse(text) as ImageAnalysisResult
      return result
    } catch (parseError) {
      console.error("Failed to parse Groq response:", parseError)
      return {
        tags: [],
        description: "Failed to analyze image",
        categories: [],
        nsfw: false,
        colors: [],
      }
    }
  } catch (error) {
    console.error("Image analysis failed:", error)
    throw new Error("Failed to analyze image")
  }
}
[V0_FILE]typescriptreact:file="lib/db/schema/image-tags.ts" isMerged="true"
import { neon } from "@neondatabase/serverless"

const dbClient = neon(process.env.DATABASE_URL)

export async function createImageTagsTable() {
  try {
    await dbClient`
      CREATE TABLE IF NOT EXISTS "ImageTag" (
        "id" TEXT NOT NULL,
        "imageId" TEXT NOT NULL,
        "tag" TEXT NOT NULL,
        "confidence" FLOAT,
        "source" TEXT NOT NULL,
        "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
        
        CONSTRAINT "ImageTag_pkey" PRIMARY KEY ("id"),
        CONSTRAINT "ImageTag_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "Image"("id") ON DELETE CASCADE ON UPDATE CASCADE
      );
      
      CREATE INDEX IF NOT EXISTS "ImageTag_imageId_idx" ON "ImageTag"("imageId");
      CREATE INDEX IF NOT EXISTS "ImageTag_tag_idx" ON "ImageTag"("tag");
    `

return { success: true }
  } catch (error) {
    console.error("Failed to create ImageTag table:", error)
    return { success: false, error }
  }
}

export async function addTagsToImage(imageId: string, tags: string[], source = "ai") {
  try {
    // Generate unique IDs for each tag
    const tagEntries = tags.map((tag) => ({
      id: `tag_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`,
      imageId,
      tag: tag.toLowerCase().trim(),
      confidence: 1.0,
      source,
    }))

// Insert tags in batch
    for (const tagEntry of tagEntries) {
      await dbClient`
        INSERT INTO "ImageTag" ("id", "imageId", "tag", "confidence", "source", "createdAt")
        VALUES (${tagEntry.id}, ${tagEntry.imageId}, ${tagEntry.tag}, ${tagEntry.confidence}, ${tagEntry.source}, NOW())
        ON CONFLICT DO NOTHING
      `
    }

return { success: true, count: tagEntries.length }
  } catch (error) {
    console.error("Failed to add tags to image:", error)
    return { success: false, error }
  }
}

export async function getImageTags(imageId: string) {
  try {
    const tags = await dbClient`
      SELECT * FROM "ImageTag"
      WHERE "imageId" = ${imageId}
      ORDER BY "confidence" DESC
    `

return { success: true, tags }
  } catch (error) {
    console.error("Failed to get image tags:", error)
    return { success: false, error, tags: [] }
  }
}

export async function searchImagesByTag(tag: string, userId: string) {
  try {
    const images = await dbClient`
      SELECT i.* FROM "Image" i
      JOIN "ImageTag" t ON i."id" = t."imageId"
      WHERE t."tag" = ${tag.toLowerCase().trim()}
      AND i."userId" = ${userId}
      AND i."deletedAt" IS NULL
      ORDER BY i."createdAt" DESC
    `

return { success: true, images }
  } catch (error) {
    console.error("Failed to search images by tag:", error)
    return { success: false, error, images: [] }
  }
}
[V0_FILE]typescriptreact:file="components/images/image-tags.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Tag, X, Plus, Loader2 } from "lucide-react"
import { useRouter } from "next/navigation"

interface ImageTag {
  id: string
  imageId: string
  tag: string
  confidence: number
  source: string
  createdAt: string
}

interface ImageTagsProps {
  imageId: string
  initialTags?: ImageTag[]
  editable?: boolean
  onTagClick?: (tag: string) => void
}

export function ImageTags({ imageId, initialTags = [], editable = false, onTagClick }: ImageTagsProps) {
  const [tags, setTags] = useState<ImageTag[]>(initialTags)
  const [newTag, setNewTag] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const [isAdding, setIsAdding] = useState(false)
  const router = useRouter()

useEffect(() => {
    if (!initialTags.length) {
      fetchTags()
    }
  }, [imageId])

const fetchTags = async () => {
    setIsLoading(true)
    try {
      const response = await fetch(`/api/images/${imageId}/tags`)
      if (response.ok) {
        const data = await response.json()
        setTags(data.tags || [])
      }
    } catch (error) {
      console.error("Failed to fetch tags:", error)
    } finally {
      setIsLoading(false)
    }
  }

const addTag = async () => {
    if (!newTag.trim()) return

setIsAdding(true)
    try {
      const response = await fetch(`/api/images/${imageId}/tags`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          tag: newTag.trim(),
          source: "manual",
        }),
      })

if (response.ok) {
        const data = await response.json()
        setTags([...tags, data.tag])
        setNewTag("")
        router.refresh()
      }
    } catch (error) {
      console.error("Failed to add tag:", error)
    } finally {
      setIsAdding(false)
    }
  }

const removeTag = async (tagId: string) => {
    try {
      const response = await fetch(`/api/images/${imageId}/tags/${tagId}`, {
        method: "DELETE",
      })

if (response.ok) {
        setTags(tags.filter((tag) => tag.id !== tagId))
        router.refresh()
      }
    } catch (error) {
      console.error("Failed to remove tag:", error)
    }
  }

const handleTagClick = (tag: string) => {
    if (onTagClick) {
      onTagClick(tag)
    }
  }

return (
    <div className="space-y-3">
      <div className="flex items-center gap-2">
        <Tag className="h-4 w-4" />
        <h3 className="text-sm font-medium">Tags</h3>
      </div>

{isLoading ? (
        <div className="flex items-center justify-center py-2">
          <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
        </div>
      ) : (
        <div className="flex flex-wrap gap-2">
          {tags.length === 0 ? (
            <p className="text-sm text-muted-foreground">No tags yet</p>
          ) : (
            tags.map((tag) => (
              <Badge
                key={tag.id}
                variant={tag.source === "groq" ? "secondary" : "default"}
                className="flex items-center gap-1 cursor-pointer"
                onClick={() => handleTagClick(tag.tag)}
              >
                {tag.tag}
                {editable && (
                  <button
                    onClick={(e) => {
                      e.stopPropagation()
                      removeTag(tag.id)
                    }}
                    className="ml-1 rounded-full hover:bg-muted p-0.5"
                  >
                    <X className="h-3 w-3" />
                    <span className="sr-only">Remove {tag.tag} tag</span>
                  </button>
                )}
              </Badge>
            ))
          )}
        </div>
      )}

{editable && (
        <div className="flex items-center gap-2 mt-2">
          <Input
            value={newTag}
            onChange={(e) => setNewTag(e.target.value)}
            placeholder="Add a tag..."
            className="h-8"
            onKeyDown={(e) => {
              if (e.key === "Enter") {
                e.preventDefault()
                addTag()
              }
            }}
          />
          <Button size="sm" variant="outline" onClick={addTag} disabled={isAdding || !newTag.trim()}>
            {isAdding ? <Loader2 className="h-3 w-3 animate-spin" /> : <Plus className="h-3 w-3" />}
            <span className="sr-only">Add tag</span>
          </Button>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/images/upload-button.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Upload, Loader2 } from "lucide-react"
import { useToast } from "@/components/ui/use-toast"
import { useRouter } from "next/navigation"
import { processUploadedImage } from "@/lib/actions/process-uploaded-image"

interface UploadButtonProps {
  folderId?: string
  teamId?: string
}

export function UploadButton({ folderId, teamId }: UploadButtonProps) {
  const [isUploading, setIsUploading] = useState(false)
  const { toast } = useToast()
  const router = useRouter()

const handleUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const files = event.target.files
    if (!files || files.length === 0) return

setIsUploading(true)

try {
      // Create FormData for upload
      const formData = new FormData()

if (folderId) {
        formData.append("folderId", folderId)
      }

if (teamId) {
        formData.append("teamId", teamId)
      }

// Append all files
      for (let i = 0; i < files.length; i++) {
        formData.append("files", files[i])
      }

// Upload the files
      const response = await fetch("/api/upload", {
        method: "POST",
        body: formData,
      })

if (!response.ok) {
        throw new Error("Upload failed")
      }

const data = await response.json()

// Process each uploaded image with AI
      for (const image of data.images) {
        await processUploadedImage(image.id)
      }

toast({
        title: "Upload successful",
        description: `${files.length} file(s) uploaded and processed with AI`,
      })

// Refresh the page to show new images
      router.refresh()
    } catch (error) {
      console.error("Upload error:", error)
      toast({
        title: "Upload failed",
        description: "There was an error uploading your files.",
        variant: "destructive",
      })
    } finally {
      setIsUploading(false)
      // Reset the input
      event.target.value = ""
    }
  }

return (
    <div>
      <input
        type="file"
        id="file-upload"
        multiple
        accept="image/*,application/pdf"
        className="sr-only"
        onChange={handleUpload}
        disabled={isUploading}
      />
      <label htmlFor="file-upload">
        <Button variant="default" className="cursor-pointer" disabled={isUploading} asChild>
          <span>
            {isUploading ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                Uploading...
              </>
            ) : (
              <>
                <Upload className="mr-2 h-4 w-4" />
                Upload
              </>
            )}
          </span>
        </Button>
      </label>
    </div>
  )
}
[V0_FILE]typescriptreact:file="lib/actions/search-images.ts" isFixed="true" isQuickEdit="true" isMerged="true"
"use server"

import { neon } from "@neondatabase/serverless"
import { auth } from "@clerk/nextjs/server"
import { generateText } from "ai"
import { groq } from "@ai-sdk/groq"

const dbClient = neon(process.env.DATABASE_URL)

export async function searchImages(query: string) {
  const { userId } = auth()

if (!userId) {
    throw new Error("Authentication required")
  }

try {
    // Use Groq to extract search terms from natural language query
    const { text } = await generateText({
      model: groq("llama3-70b-8192"),
      prompt: `
        Extract relevant search terms from this natural language query about images.
        Return only a comma-separated list of keywords, with no additional text.
        
        Query: "${query}"
        
        Keywords:
      `,
      temperature: 0.1,
      maxTokens: 100,
    })

// Parse keywords
    const keywords = text
      .split(",")
      .map((k) => k.trim().toLowerCase())
      .filter((k) => k.length > 0)

// Search for images with matching tags or description
    const images = await dbClient`
      WITH TaggedImages AS (
        SELECT DISTINCT i.*
        FROM "Image" i
        JOIN "ImageTag" t ON i."id" = t."imageId"
        WHERE i."userId" = ${userId}
        AND i."deletedAt" IS NULL
        AND (
          ${keywords.length > 0 ? dbClient`t."tag" IN ${dbClient(keywords)}` : dbClient`FALSE`}
        )
      ),
      DescriptionImages AS (
        SELECT i.*
        FROM "Image" i
        WHERE i."userId" = ${userId}
        AND i."deletedAt" IS NULL
        AND (
          ${keywords.map((k) => `i."description" ILIKE '%${k}%'`).join(" OR ")}
        )
      )
      SELECT * FROM TaggedImages
      UNION
      SELECT * FROM DescriptionImages
      ORDER BY "createdAt" DESC
    `

return {
      success: true,
      images,
      keywords,
    }
  } catch (error) {
    console.error("Error searching images:", error)
    return { success: false, error, images: [] }
  }
}
[V0_FILE]typescriptreact:file="app/dashboard/search/page.tsx" isMerged="true"
import { ImageSearch } from "@/components/search/image-search"
import { DashboardHeader } from "@/components/dashboard/dashboard-header"
import { DashboardShell } from "@/components/dashboard/dashboard-shell"

export const metadata = {
  title: "Search Images | ImageVault",
  description: "Search your images using natural language",
}

export default function SearchPage() {
  return (
    <DashboardShell>
      <DashboardHeader heading="Image Search" description="Search your images using natural language or keywords" />
      <div className="grid gap-8">
        <ImageSearch />
      </div>
    </DashboardShell>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/search/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="scripts/migrations/create-image-tags-table.ts" isMerged="true"
import { neon } from "@neondatabase/serverless"

const dbClient = neon(process.env.DATABASE_URL)

async function createImageTagsTable() {
  try {
    console.log("Creating ImageTag table...")

await dbClient`
      CREATE TABLE IF NOT EXISTS "ImageTag" (
        "id" TEXT NOT NULL,
        "imageId" TEXT NOT NULL,
        "tag" TEXT NOT NULL,
        "confidence" FLOAT,
        "source" TEXT NOT NULL,
        "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
        
        CONSTRAINT "ImageTag_pkey" PRIMARY KEY ("id"),
        CONSTRAINT "ImageTag_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "Image"("id") ON DELETE CASCADE ON UPDATE CASCADE
      );
      
      CREATE INDEX IF NOT EXISTS "ImageTag_imageId_idx" ON "ImageTag"("imageId");
      CREATE INDEX IF NOT EXISTS "ImageTag_tag_idx" ON "ImageTag"("tag");
    `

console.log("ImageTag table created successfully")

return { success: true }
  } catch (error) {
    console.error("Failed to create ImageTag table:", error)
    return { success: false, error }
  }
}

// Run the migration
createImageTagsTable()
  .then((result) => {
    if (result.success) {
      console.log("Migration completed successfully")
      process.exit(0)
    } else {
      console.error("Migration failed")
      process.exit(1)
    }
  })
  .catch((error) => {
    console.error("Migration error:", error)
    process.exit(1)
  })
[V0_FILE]typescriptreact:file="components/images/image-detail.tsx" isMerged="true"
import Image from "next/image"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Calendar, Download, Eye, FileIcon, ImageIcon, Share2, Trash2 } from "lucide-react"
import { formatBytes } from "@/lib/utils"
import { formatDistanceToNow } from "date-fns"

interface ImageDetailProps {
  image: any
  analytics?: any
}

export function ImageDetail({ image, analytics }: ImageDetailProps) {
  const isImage = image.contentType?.startsWith("image/")
  const formattedDate = image.createdAt
    ? formatDistanceToNow(new Date(image.createdAt), { addSuffix: true })
    : "Unknown date"

return (
    <div className="space-y-6">
      <Card>
        <div className="relative aspect-video bg-muted">
          {isImage && image.publicUrl ? (
            <Image
              src={image.publicUrl || "/placeholder.svg"}
              alt={image.description || image.filename}
              fill
              className="object-contain"
            />
          ) : (
            <div className="flex h-full items-center justify-center">
              {isImage ? (
                <ImageIcon className="h-24 w-24 text-muted-foreground" />
              ) : (
                <FileIcon className="h-24 w-24 text-muted-foreground" />
              )}
            </div>
          )}
        </div>
        <CardContent className="p-4">
          <div className="grid gap-4">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2">
                <Calendar className="h-4 w-4 text-muted-foreground" />
                <span className="text-sm text-muted-foreground">Uploaded {formattedDate}</span>
              </div>
              <Badge variant={image.isPublic ? "default" : "outline"}>{image.isPublic ? "Public" : "Private"}</Badge>
            </div>

<div className="grid grid-cols-2 gap-4 text-sm">
              <div>
                <p className="text-muted-foreground">Size</p>
                <p className="font-medium">{formatBytes(image.size)}</p>
              </div>
              {isImage && (
                <>
                  <div>
                    <p className="text-muted-foreground">Dimensions</p>
                    <p className="font-medium">
                      {image.width && image.height ? `${image.width} × ${image.height}` : "Unknown"}
                    </p>
                  </div>
                </>
              )}
              <div>
                <p className="text-muted-foreground">Type</p>
                <p className="font-medium">{image.contentType || "Unknown"}</p>
              </div>
              {image.folderName && (
                <div>
                  <p className="text-muted-foreground">Folder</p>
                  <p className="font-medium truncate">{image.folderName}</p>
                </div>
              )}
            </div>

{analytics && (
              <div className="grid grid-cols-3 gap-4 border-t pt-4">
                <div className="flex flex-col items-center justify-center">
                  <div className="flex items-center">
                    <Eye className="mr-1 h-4 w-4 text-muted-foreground" />
                    <span className="font-medium">{analytics.views}</span>
                  </div>
                  <p className="text-xs text-muted-foreground">Views</p>
                </div>
                <div className="flex flex-col items-center justify-center">
                  <div className="flex items-center">
                    <Download className="mr-1 h-4 w-4 text-muted-foreground" />
                    <span className="font-medium">{analytics.downloads}</span>
                  </div>
                  <p className="text-xs text-muted-foreground">Downloads</p>
                </div>
                <div className="flex flex-col items-center justify-center">
                  <div className="flex items-center">
                    <Share2 className="mr-1 h-4 w-4 text-muted-foreground" />
                    <span className="font-medium">{analytics.shares || 0}</span>
                  </div>
                  <p className="text-xs text-muted-foreground">Shares</p>
                </div>
              </div>
            )}

<div className="flex gap-2">
              <Button asChild className="flex-1">
                <a href={image.publicUrl} download={image.filename} target="_blank" rel="noreferrer">
                  <Download className="mr-2 h-4 w-4" />
                  Download
                </a>
              </Button>
              <Button variant="outline" size="icon">
                <Share2 className="h-4 w-4" />
                <span className="sr-only">Share</span>
              </Button>
              <Button variant="destructive" size="icon">
                <Trash2 className="h-4 w-4" />
                <span className="sr-only">Delete</span>
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/dashboard-nav.tsx" isMerged="true"
"use client"

import type React from "react"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"
import { FolderIcon, HomeIcon, ImageIcon, SearchIcon, Settings, Users } from "lucide-react"

interface DashboardNavProps extends React.HTMLAttributes<HTMLElement> {
  items?: {
    href: string
    title: string
    icon?: React.ReactNode
  }[]
}

export function DashboardNav({ className, items, ...props }: DashboardNavProps) {
  const pathname = usePathname()

const defaultItems = [
    {
      href: "/dashboard",
      title: "Overview",
      icon: <HomeIcon className="mr-2 h-4 w-4" />,
    },
    {
      href: "/dashboard/images",
      title: "Images",
      icon: <ImageIcon className="mr-2 h-4 w-4" />,
    },
    {
      href: "/dashboard/folders",
      title: "Folders",
      icon: <FolderIcon className="mr-2 h-4 w-4" />,
    },
    {
      href: "/dashboard/search",
      title: "Search",
      icon: <SearchIcon className="mr-2 h-4 w-4" />,
    },
    {
      href: "/dashboard/teams",
      title: "Teams",
      icon: <Users className="mr-2 h-4 w-4" />,
    },
    {
      href: "/dashboard/settings",
      title: "Settings",
      icon: <Settings className="mr-2 h-4 w-4" />,
    },
  ]

const navItems = items || defaultItems

return (
    <nav className={cn("flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1", className)} {...props}>
      {navItems.map((item) => (
        <Link
          key={item.href}
          href={item.href}
          className={cn(
            buttonVariants({ variant: "ghost" }),
            pathname === item.href ? "bg-muted hover:bg-muted" : "hover:bg-transparent hover:underline",
            "justify-start",
          )}
        >
          {item.icon}
          {item.title}
        </Link>
      ))}
    </nav>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/dashboard-header.tsx" isMerged="true"
import type { ReactNode } from "react"
import { cn } from "@/lib/utils"

interface DashboardHeaderProps {
  heading: string
  description?: string
  children?: ReactNode
  className?: string
}

export function DashboardHeader({ heading, description, children, className }: DashboardHeaderProps) {
  return (
    <div className={cn("flex items-center justify-between px-2", className)}>
      <div className="grid gap-1">
        <h1 className="text-2xl font-bold tracking-tight">{heading}</h1>
        {description && <p className="text-sm text-muted-foreground">{description}</p>}
      </div>
      {children && <div className="flex items-center gap-2">{children}</div>}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/dashboard-shell.tsx" isMerged="true"
import type { ReactNode } from "react"
import { cn } from "@/lib/utils"

interface DashboardShellProps {
  children: ReactNode
  className?: string
}

export function DashboardShell({ children, className }: DashboardShellProps) {
  return (
    <div className="flex min-h-screen flex-col">
      <main className="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8">
        <div className={cn("mx-auto w-full max-w-6xl space-y-6", className)}>{children}</div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/images/[imageId]/loading.tsx" isMerged="true"
import { DashboardHeader } from "@/components/dashboard/dashboard-header"
import { DashboardShell } from "@/components/dashboard/dashboard-shell"
import { Skeleton } from "@/components/ui/skeleton"

export default function Loading() {
  return (
    <DashboardShell>
      <DashboardHeader heading={<Skeleton className="h-8 w-48" />} description={<Skeleton className="h-4 w-64" />} />

<div className="space-y-6">
          <div className="space-y-2">
            <Skeleton className="h-4 w-24" />
            <div className="flex flex-wrap gap-2">
              <Skeleton className="h-6 w-16" />
              <Skeleton className="h-6 w-20" />
              <Skeleton className="h-6 w-12" />
            </div>
          </div>
        </div>
      </div>
    </DashboardShell>
  )
}
[V0_FILE]typescriptreact:file="app/api/images/tag/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { analyzeImage } from "@/lib/ai/image-analysis"
import { addTagsToImage } from "@/lib/db/schema/image-tags"
import { neon } from "@neondatabase/serverless"
import { auth } from "@clerk/nextjs/server"

const dbClient = neon(process.env.DATABASE_URL)

export async function POST(request: NextRequest) {
  try {
    const { userId } = auth()

if (!userId) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const { imageId, imageUrl } = await request.json()

if (!imageId || !imageUrl) {
      return NextResponse.json({ error: "Missing required fields: imageId and imageUrl" }, { status: 400 })
    }

// Verify the image belongs to the user
    const image = await dbClient`
      SELECT * FROM "Image" 
      WHERE "id" = ${imageId} 
      AND "userId" = ${userId}
      AND "deletedAt" IS NULL
    `

if (image.length === 0) {
      return NextResponse.json({ error: "Image not found or access denied" }, { status: 404 })
    }

// Analyze the image
    const analysis = await analyzeImage(imageUrl)

// Add tags to the database
    const tagResult = await addTagsToImage(imageId, analysis.tags, "groq")

// Update image description if it's empty
    if (analysis.description && (!image[0].description || image[0].description === "")) {
      await dbClient`
        UPDATE "Image"
        SET "description" = ${analysis.description},
            "metadata" = jsonb_set(
              COALESCE("metadata", '{}'::jsonb),
              '{aiAnalysis}',
              ${JSON.stringify({
                categories: analysis.categories,
                colors: analysis.colors,
                nsfw: analysis.nsfw,
              })}::jsonb
            )
        WHERE "id" = ${imageId}
      `
    }

return NextResponse.json({
      success: true,
      analysis,
      tagsAdded: tagResult.count,
    })
  } catch (error) {
    console.error("Error in image tagging API:", error)
    return NextResponse.json({ error: "Failed to process image tagging" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="lib/actions/process-uploaded-image.ts" isMerged="true"
"use server"

import { neon } from "@neondatabase/serverless"
import { auth } from "@clerk/nextjs/server"
import { revalidatePath } from "next/cache"

const dbClient = neon(process.env.DATABASE_URL)

export async function processUploadedImage(imageId: string) {
  const { userId } = auth()

if (!userId) {
    throw new Error("Authentication required")
  }

try {
    // Get the image details
    const images = await dbClient`
      SELECT * FROM "Image" 
      WHERE "id" = ${imageId} 
      AND "userId" = ${userId}
      AND "deletedAt" IS NULL
    `

if (images.length === 0) {
      throw new Error("Image not found")
    }

const image = images[0]

// Queue the image for AI analysis
    const response = await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/images/tag`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        imageId: image.id,
        imageUrl: image.publicUrl,
      }),
    })

if (!response.ok) {
      const error = await response.json()
      throw new Error(`Failed to queue image for analysis: ${error.message || "Unknown error"}`)
    }

// Revalidate the image page to show updated tags
    revalidatePath(`/dashboard/images/${imageId}`)
    revalidatePath("/dashboard/images")

return { success: true }
  } catch (error) {
    console.error("Error processing uploaded image:", error)
    return { success: false, error }
  }
}
[V0_FILE]typescriptreact:file="components/ai/ai-features-panel.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Wand2, Tag, Shield } from "lucide-react"
import { toast } from "sonner"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Textarea } from "@/components/ui/textarea"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Alert, AlertDescription } from "@/components/ui/alert"

interface AiFeaturesPanelProps {
  imageId: string
  imageUrl: string
  onDescriptionGenerated?: (description: string) => void
  onTagsGenerated?: (tags: string[]) => void
}

export function AiFeaturesPanel({ imageId, imageUrl, onDescriptionGenerated, onTagsGenerated }: AiFeaturesPanelProps) {
  const [isGeneratingDescription, setIsGeneratingDescription] = useState(false)
  const [isGeneratingTags, setIsGeneratingTags] = useState(false)
  const [isModerating, setIsModerating] = useState(false)
  const [description, setDescription] = useState("")
  const [tags, setTags] = useState<string[]>([])
  const [moderationResult, setModerationResult] = useState<{
    isSafe: boolean
    reasons: string[]
  } | null>(null)

const generateDescription = async () => {
    try {
      setIsGeneratingDescription(true)
      const response = await fetch(`/api/images/${imageId}/ai/describe`, {
        method: "POST",
      })

if (!response.ok) {
        throw new Error("Failed to generate description")
      }

const data = await response.json()
      setDescription(data.description)

if (onDescriptionGenerated) {
        onDescriptionGenerated(data.description)
      }

toast.success("Description generated successfully")
    } catch (error) {
      console.error("Error generating description:", error)
      toast.error("Failed to generate description")
    } finally {
      setIsGeneratingDescription(false)
    }
  }

const generateTags = async () => {
    try {
      setIsGeneratingTags(true)
      const response = await fetch(`/api/images/${imageId}/ai/tags`, {
        method: "POST",
      })

if (!response.ok) {
        throw new Error("Failed to generate tags")
      }

const data = await response.json()
      setTags(data.tags)

if (onTagsGenerated) {
        onTagsGenerated(data.tags)
      }

toast.success("Tags generated successfully")
    } catch (error) {
      console.error("Error generating tags:", error)
      toast.error("Failed to generate tags")
    } finally {
      setIsGeneratingTags(false)
    }
  }

const moderateContent = async () => {
    try {
      setIsModerating(true)
      const response = await fetch(`/api/images/${imageId}/ai/moderate`, {
        method: "POST",
      })

if (!response.ok) {
        throw new Error("Failed to moderate content")
      }

const data = await response.json()
      setModerationResult(data)

if (data.isSafe) {
        toast.success("Content is safe")
      } else {
        toast.error("Content may contain inappropriate material")
      }
    } catch (error) {
      console.error("Error moderating content:", error)
      toast.error("Failed to moderate content")
    } finally {
      setIsModerating(false)
    }
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>AI Features</CardTitle>
        <CardDescription>Use AI to enhance your image</CardDescription>
      </CardHeader>
      <CardContent>
        <Tabs defaultValue="description">
          <TabsList className="grid w-full grid-cols-3">
            <TabsTrigger value="description">Description</TabsTrigger>
            <TabsTrigger value="tags">Tags</TabsTrigger>
            <TabsTrigger value="moderation">Moderation</TabsTrigger>
          </TabsList>

<TabsContent value="description" className="space-y-4 mt-4">
            <div className="flex justify-between items-center">
              <p className="text-sm text-muted-foreground">Generate an AI description of your image</p>
              <Button variant="outline" size="sm" onClick={generateDescription} disabled={isGeneratingDescription}>
                <Wand2 className="h-4 w-4 mr-2" />
                {isGeneratingDescription ? "Generating..." : "Generate"}
              </Button>
            </div>

{description && (
              <Textarea
                value={description}
                onChange={(e) => setDescription(e.target.value)}
                className="min-h-[100px]"
              />
            )}
          </TabsContent>

<TabsContent value="tags" className="space-y-4 mt-4">
            <div className="flex justify-between items-center">
              <p className="text-sm text-muted-foreground">Generate relevant tags for your image</p>
              <Button variant="outline" size="sm" onClick={generateTags} disabled={isGeneratingTags}>
                <Tag className="h-4 w-4 mr-2" />
                {isGeneratingTags ? "Generating..." : "Generate Tags"}
              </Button>
            </div>

{tags.length > 0 && (
              <div className="flex flex-wrap gap-2">
                {tags.map((tag) => (
                  <Badge key={tag} variant="secondary">
                    {tag}
                  </Badge>
                ))}
              </div>
            )}
          </TabsContent>

<TabsContent value="moderation" className="space-y-4 mt-4">
            <div className="flex justify-between items-center">
              <p className="text-sm text-muted-foreground">Check if your image contains inappropriate content</p>
              <Button variant="outline" size="sm" onClick={moderateContent} disabled={isModerating}>
                <Shield className="h-4 w-4 mr-2" />
                {isModerating ? "Analyzing..." : "Check Content"}
              </Button>
            </div>

{moderationResult && (
              <Alert variant={moderationResult.isSafe ? "default" : "destructive"}>
                <AlertDescription>
                  {moderationResult.isSafe ? (
                    "This image appears to be safe."
                  ) : (
                    <div>
                      <p>This image may contain inappropriate content:</p>
                      <ul className="list-disc pl-5 mt-2">
                        {moderationResult.reasons.map((reason, index) => (
                          <li key={index}>{reason}</li>
                        ))}
                      </ul>
                    </div>
                  )}
                </AlertDescription>
              </Alert>
            )}
          </TabsContent>
        </Tabs>
      </CardContent>
      <CardFooter className="text-xs text-muted-foreground">Powered by AI models via Groq integration</CardFooter>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/api/images/[id]/ai/describe/route.ts" isEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import { auth } from "@clerk/nextjs/server"
import { generateImageDescription } from "@/lib/ai-utils"
import { sql } from "@/lib/db"

export async function POST(request: Request, { params }: { params: { id: string } }) {
  try {
    const { userId } = auth()

if (!userId) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const imageId = params.id

// Check if user has access to this image
    const images = await sql`
      SELECT * FROM "Image" 
      WHERE id = ${imageId} 
      AND "userId" = ${userId}
      AND "deletedAt" IS NULL
    `

if (images.length === 0) {
      return NextResponse.json({ error: "Image not found" }, { status: 404 })
    }

const image = images[0]

// Generate description using Groq AI
    const description = await generateImageDescription(image.publicUrl)

// Update image description in database
    await sql`
      UPDATE "Image"
      SET description = ${description}, "updatedAt" = NOW()
      WHERE id = ${imageId}
    `

return NextResponse.json({ description })
  } catch (error) {
    console.error("Error describing image:", error)
    return NextResponse.json({ error: "Failed to generate description" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/images/[id]/ai/tags/route.ts" isEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import { auth } from "@clerk/nextjs/server"
import { generateImageTags } from "@/lib/ai-utils"
import { sql } from "@/lib/db"

export async function POST(request: Request, { params }: { params: { id: string } }) {
  try {
    const { userId } = auth()

if (!userId) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const imageId = params.id

// Check if user has access to this image
    const images = await sql`
      SELECT * FROM "Image" 
      WHERE id = ${imageId} 
      AND "userId" = ${userId}
      AND "deletedAt" IS NULL
    `

if (images.length === 0) {
      return NextResponse.json({ error: "Image not found" }, { status: 404 })
    }

const image = images[0]

// Generate tags using Groq AI
    const tags = await generateImageTags(image.publicUrl)

// Store tags in the metadata
    let metadata = image.metadata || {}
    metadata = {
      ...metadata,
      tags,
    }

// Update image metadata in database
    await sql`
      UPDATE "Image"
      SET metadata = ${JSON.stringify(metadata)}::jsonb, "updatedAt" = NOW()
      WHERE id = ${imageId}
    `

return NextResponse.json({ tags })
  } catch (error) {
    console.error("Error generating tags:", error)
    return NextResponse.json({ error: "Failed to generate tags" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/images/[id]/ai/moderate/route.ts" isEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import { auth } from "@clerk/nextjs/server"
import { moderateImageContent } from "@/lib/ai-utils"
import { sql } from "@/lib/db"

export async function POST(request: Request, { params }: { params: { id: string } }) {
  try {
    const { userId } = auth()

if (!userId) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const imageId = params.id

// Check if user has access to this image
    const images = await sql`
      SELECT * FROM "Image" 
      WHERE id = ${imageId} 
      AND "userId" = ${userId}
      AND "deletedAt" IS NULL
    `

if (images.length === 0) {
      return NextResponse.json({ error: "Image not found" }, { status: 404 })
    }

const image = images[0]

// Moderate content using Groq AI
    const moderationResult = await moderateImageContent(image.publicUrl)

// Store moderation result in the metadata
    let metadata = image.metadata || {}
    metadata = {
      ...metadata,
      moderation: moderationResult,
    }

// Update image metadata in database
    await sql`
      UPDATE "Image"
      SET metadata = ${JSON.stringify(metadata)}::jsonb, "updatedAt" = NOW()
      WHERE id = ${imageId}
    `

return NextResponse.json(moderationResult)
  } catch (error) {
    console.error("Error moderating image:", error)
    return NextResponse.json({ error: "Failed to moderate image" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/images/search/route.ts" isEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import { auth } from "@clerk/nextjs/server"
import { prepareNaturalLanguageQuery } from "@/lib/ai-utils"
import { sql } from "@/lib/db"

export async function GET(request: Request) {
  try {
    const { userId } = auth()

if (!userId) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const url = new URL(request.url)
    const query = url.searchParams.get("q")

if (!query) {
      return NextResponse.json({ error: "Query is required" }, { status: 400 })
    }

// Process natural language query to extract keywords
    const keywords = await prepareNaturalLanguageQuery(query)

// Build search conditions
    const searchConditions = keywords.map((keyword) => {
      return sql`
        filename ILIKE ${`%${keyword}%`} OR
        description ILIKE ${`%${keyword}%`} OR
        metadata::text ILIKE ${`%${keyword}%`}
      `
    })

// Combine conditions with OR
    const whereConditions = sql.join(searchConditions, sql` OR `)

// Perform the search
    const images = await sql`
      SELECT * FROM "Image"
      WHERE "userId" = ${userId}
      AND "deletedAt" IS NULL
      AND (${whereConditions})
      ORDER BY "createdAt" DESC
      LIMIT 50
    `

return NextResponse.json({
      images,
      query,
      keywords,
    })
  } catch (error) {
    console.error("Error searching images:", error)
    return NextResponse.json({ error: "Failed to search images" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="components/ai/natural-language-search.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, type FormEvent } from "react"
import { useRouter } from "next/navigation"
import { Search, Sparkles } from "lucide-react"
import { toast } from "sonner"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

export function NaturalLanguageSearch() {
  const router = useRouter()
  const [query, setQuery] = useState("")
  const [isSearching, setIsSearching] = useState(false)

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

if (!query.trim()) {
      return
    }

try {
      setIsSearching(true)
      router.push(`/dashboard/images/search?q=${encodeURIComponent(query)}`)
    } catch (error) {
      console.error("Error during search:", error)
      toast.error("Failed to perform search")
    } finally {
      setIsSearching(false)
    }
  }

return (
    <form onSubmit={handleSearch} className="flex w-full max-w-md items-center space-x-2">
      <div className="relative flex-1">
        <Input
          type="text"
          placeholder="Search images in natural language..."
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          className="pr-10"
        />
        <Sparkles className="absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
      </div>
      <Button type="submit" disabled={isSearching}>
        <Search className="mr-2 h-4 w-4" />
        {isSearching ? "Searching..." : "Search"}
      </Button>
    </form>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/image-detail.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Image from "next/image"
import { useRouter } from "next/navigation"
import { Download, Share, Trash, Edit, Globe, Lock, Copy, Code, FileText, BarChart2 } from "lucide-react"
import { formatDistanceToNow } from "date-fns"
import { toast } from "sonner"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog"
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 { Skeleton } from "@/components/ui/skeleton"
import { formatBytes } from "@/lib/utils"
import { ExifDataViewer } from "./exif-data-viewer"
import type { ExifData } from "@/lib/exif-utils"
import { AiFeaturesPanel } from "./ai-features-panel"

interface ImageDetailProps {
  image: any
  analytics?: any
}

export function ImageDetail({ image, analytics }: ImageDetailProps) {
  const router = useRouter()
  const [isEditing, setIsEditing] = useState(false)
  const [isDeleting, setIsDeleting] = useState(false)
  const [isSharing, setIsSharing] = useState(false)
  const [editedImage, setEditedImage] = useState({
    name: image?.name || "",
    description: image?.description || "",
    isPublic: image?.isPublic || false,
  })

const handleCopyLink = (link: string) => {
    navigator.clipboard.writeText(link)
    toast.success("Link copied to clipboard")
  }

const handleSaveChanges = async () => {
    try {
      const response = await fetch(`/api/images/${image.id}`, {
        method: "PATCH",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(editedImage),
      })

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

toast.success("Image updated successfully")
      setIsEditing(false)
      router.refresh()
    } catch (error) {
      toast.error("Failed to update image")
      console.error(error)
    }
  }

const handleDeleteImage = async () => {
    try {
      const response = await fetch(`/api/images/${image.id}`, {
        method: "DELETE",
      })

if (!response.ok) {
        throw new Error("Failed to delete image")
      }

toast.success("Image deleted successfully")
      router.push("/dashboard/images")
    } catch (error) {
      toast.error("Failed to delete image")
      console.error(error)
    }
  }

const handleShareImage = async (email: string, expiresAt: string | null) => {
    try {
      const response = await fetch(`/api/images/${image.id}/share`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          email,
          expiresAt: expiresAt ? new Date(expiresAt).toISOString() : null,
        }),
      })

if (!response.ok) {
        throw new Error("Failed to share image")
      }

toast.success(`Image shared with ${email}`)
      setIsSharing(false)
      router.refresh()
    } catch (error) {
      toast.error("Failed to share image")
      console.error(error)
    }
  }

const handleDescriptionUpdate = (description: string) => {
    setEditedImage((prev) => ({ ...prev, description }))
    router.refresh()
  }

const handleTagsUpdate = (tags: string[]) => {
    // Tags will be automatically saved to metadata by the API
    router.refresh()
  }

if (!image) {
    return <ImageDetailSkeleton />
  }

const directLink = image.url
  const htmlEmbed = `<img src="${image.url}" alt="${image.name}" width="${image.width}" height="${image.height}" />`
  const markdownEmbed = `![${image.name}](${image.url})`

// Parse metadata if it exists
  const metadata: ExifData | null = image.metadata ? image.metadata : null

const confirmDelete = () => {
    handleDeleteImage()
    setIsDeleting(false)
  }

return (
    <div className="grid gap-6">
      <Card>
        <CardHeader className="pb-4">
          <div className="flex items-center justify-between">
            <CardTitle className="text-2xl font-bold">{image.name}</CardTitle>
            <div className="flex items-center gap-2">
              {image.isPublic ? (
                <div className="flex items-center text-sm text-green-500">
                  <Globe className="mr-1 h-4 w-4" />
                  Public
                </div>
              ) : (
                <div className="flex items-center text-sm text-amber-500">
                  <Lock className="mr-1 h-4 w-4" />
                  Private
                </div>
              )}
              <Button variant="outline" size="icon" onClick={() => setIsEditing(true)}>
                <Edit className="h-4 w-4" />
                <span className="sr-only">Edit</span>
              </Button>
              <Button variant="destructive" size="icon" onClick={() => setIsDeleting(true)}>
                <Trash className="h-4 w-4" />
                <span className="sr-only">Delete</span>
              </Button>
            </div>
          </div>
        </CardHeader>
        <CardContent className="pb-2">
          <div className="overflow-hidden rounded-lg border">
            <div className="relative aspect-video w-full overflow-hidden bg-muted">
              <Image
                src={image.url || "/placeholder.svg"}
                alt={image.name}
                fill
                className="object-contain"
                sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                priority
              />
            </div>
          </div>
          {image.description && <p className="mt-4 text-sm text-muted-foreground">{image.description}</p>}
        </CardContent>
        <CardFooter className="flex flex-col items-start gap-4 pt-0">
          <div className="grid w-full grid-cols-2 gap-4 sm:grid-cols-4">
            <div>
              <h4 className="text-sm font-medium">Format</h4>
              <p className="text-sm text-muted-foreground">{image.format.toUpperCase()}</p>
            </div>
            <div>
              <h4 className="text-sm font-medium">Size</h4>
              <p className="text-sm text-muted-foreground">{formatBytes(image.size)}</p>
            </div>
            <div>
              <h4 className="text-sm font-medium">Dimensions</h4>
              <p className="text-sm text-muted-foreground">
                {image.width} × {image.height}
              </p>
            </div>
            <div>
              <h4 className="text-sm font-medium">Uploaded</h4>
              <p className="text-sm text-muted-foreground">
                {formatDistanceToNow(new Date(image.createdAt), { addSuffix: true })}
              </p>
            </div>
          </div>
        </CardFooter>
      </Card>

{/* EXIF Data Card */}
      {metadata && <ExifDataViewer metadata={metadata} />}

{/* AI Features Card */}
      <AiFeaturesPanel
        imageId={image.id}
        imageUrl={image.url}
        onDescriptionGenerated={handleDescriptionUpdate}
        onTagsGenerated={handleTagsUpdate}
      />

<Tabs defaultValue="share">
        <TabsList className="grid w-full grid-cols-3">
          <TabsTrigger value="share">Share</TabsTrigger>
          <TabsTrigger value="embed">Embed</TabsTrigger>
          <TabsTrigger value="analytics">Analytics</TabsTrigger>
        </TabsList>
        <TabsContent value="share" className="mt-4">
          <Card>
            <CardHeader>
              <CardTitle>Share Image</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <Label htmlFor="direct-link">Direct Link</Label>
                <div className="mt-1 flex">
                  <Input id="direct-link" value={directLink} readOnly className="flex-1 rounded-r-none" />
                  <Button variant="secondary" className="rounded-l-none" onClick={() => handleCopyLink(directLink)}>
                    <Copy className="mr-2 h-4 w-4" />
                    Copy
                  </Button>
                </div>
              </div>
              <Button variant="outline" className="w-full" onClick={() => setIsSharing(true)}>
                <Share className="mr-2 h-4 w-4" />
                Share with others
              </Button>
              <Button variant="outline" className="w-full" onClick={() => window.open(image.url, "_blank")}>
                <Download className="mr-2 h-4 w-4" />
                Download
              </Button>
            </CardContent>
          </Card>
        </TabsContent>
        <TabsContent value="embed" className="mt-4">
          <Card>
            <CardHeader>
              <CardTitle>Embed Code</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <Label htmlFor="html-embed">HTML</Label>
                <div className="mt-1 flex">
                  <Input
                    id="html-embed"
                    value={htmlEmbed}
                    readOnly
                    className="flex-1 rounded-r-none font-mono text-xs"
                  />
                  <Button variant="secondary" className="rounded-l-none" onClick={() => handleCopyLink(htmlEmbed)}>
                    <Code className="mr-2 h-4 w-4" />
                    Copy
                  </Button>
                </div>
              </div>
              <div>
                <Label htmlFor="markdown-embed">Markdown</Label>
                <div className="mt-1 flex">
                  <Input
                    id="markdown-embed"
                    value={markdownEmbed}
                    readOnly
                    className="flex-1 rounded-r-none font-mono text-xs"
                  />
                  <Button variant="secondary" className="rounded-l-none" onClick={() => handleCopyLink(markdownEmbed)}>
                    <FileText className="mr-2 h-4 w-4" />
                    Copy
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
        <TabsContent value="analytics" className="mt-4">
          <Card>
            <CardHeader>
              <CardTitle>Image Analytics</CardTitle>
            </CardHeader>
            <CardContent>
              {analytics ? (
                <div className="grid grid-cols-3 gap-4">
                  <div className="flex flex-col items-center justify-center rounded-lg border p-4">
                    <div className="text-3xl font-bold">{analytics.views}</div>
                    <div className="text-sm text-muted-foreground">Views</div>
                  </div>
                  <div className="flex flex-col items-center justify-center rounded-lg border p-4">
                    <div className="text-3xl font-bold">{analytics.downloads}</div>
                    <div className="text-sm text-muted-foreground">Downloads</div>
                  </div>
                  <div className="flex flex-col items-center justify-center rounded-lg border p-4">
                    <div className="text-3xl font-bold">{analytics.shares}</div>
                    <div className="text-sm text-muted-foreground">Shares</div>
                  </div>
                </div>
              ) : (
                <div className="flex items-center justify-center p-6">
                  <div className="flex flex-col items-center text-center">
                    <BarChart2 className="mb-2 h-10 w-10 text-muted-foreground" />
                    <h3 className="text-lg font-medium">No analytics data available</h3>
                    <p className="text-sm text-muted-foreground">
                      Analytics data will appear here once your image gets views.
                    </p>
                  </div>
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>

{/* Edit Dialog */}
      <Dialog open={isEditing} onOpenChange={setIsEditing}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Edit Image</DialogTitle>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <Label htmlFor="name">Name</Label>
              <Input
                id="name"
                value={editedImage.name}
                onChange={(e) => setEditedImage({ ...editedImage, name: e.target.value })}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="description">Description</Label>
              <Textarea
                id="description"
                value={editedImage.description}
                onChange={(e) => setEditedImage({ ...editedImage, description: e.target.value })}
              />
            </div>
            <div className="flex items-center space-x-2">
              <Switch
                id="public"
                checked={editedImage.isPublic}
                onCheckedChange={(checked) => setEditedImage({ ...editedImage, isPublic: checked })}
              />
              <Label htmlFor="public">Public</Label>
            </div>
          </div>
          <div className="flex justify-end space-x-2">
            <Button variant="outline" onClick={() => setIsEditing(false)}>
              Cancel
            </Button>
            <Button onClick={handleSaveChanges}>Save Changes</Button>
          </div>
        </DialogContent>
      </Dialog>

{/* Delete Dialog */}
      <Dialog open={isDeleting} onOpenChange={setIsDeleting}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Delete Image</DialogTitle>
            <DialogDescription>
              Are you sure you want to delete this image? This action cannot be undone.
            </DialogDescription>
          </DialogHeader>
          <div className="py-4">
            <p>Are you sure you want to delete this image? This action cannot be undone.</p>
          </div>
          <div className="flex justify-end space-x-2">
            <Button variant="outline" onClick={() => setIsDeleting(false)}>
              Cancel
            </Button>
            <Button variant="destructive" onClick={confirmDelete}>
              Delete
            </Button>
          </div>
        </DialogContent>
      </Dialog>

{/* Share Dialog */}
      <Dialog open={isSharing} onOpenChange={setIsSharing}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Share Image</DialogTitle>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <Label htmlFor="share-email">Email</Label>
              <Input id="share-email" type="email" placeholder="Enter email address" />
            </div>
            <div className="space-y-2">
              <Label htmlFor="share-expiry">Expiry (Optional)</Label>
              <Input id="share-expiry" type="datetime-local" />
            </div>
          </div>
          <div className="flex justify-end space-x-2">
            <Button variant="outline" onClick={() => setIsSharing(false)}>
              Cancel
            </Button>
            <Button
              onClick={() => {
                const email = (document.getElementById("share-email") as HTMLInputElement).value
                const expiry = (document.getElementById("share-expiry") as HTMLInputElement).value
                handleShareImage(email, expiry)
              }}
            >
              Share
            </Button>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  )
}

function ImageDetailSkeleton() {
  return (
    <div className="grid gap-6">
      <Card>
        <CardHeader className="pb-4">
          <div className="flex items-center justify-between">
            <Skeleton className="h-8 w-1/3" />
            <div className="flex items-center gap-2">
              <Skeleton className="h-9 w-9" />
              <Skeleton className="h-9 w-9" />
            </div>
          </div>
        </CardHeader>
        <CardContent className="pb-2">
          <Skeleton className="aspect-video w-full" />
          <Skeleton className="mt-4 h-4 w-2/3" />
        </CardContent>
        <CardFooter className="flex flex-col items-start gap-4 pt-0">
          <div className="grid w-full grid-cols-2 gap-4 sm:grid-cols-4">
            {Array.from({ length: 4 }).map((_, i) => (
              <div key={i}>
                <Skeleton className="h-4 w-16 mb-2" />
                <Skeleton className="h-4 w-12" />
              </div>
            ))}
          </div>
        </CardFooter>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/images/search/loading.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"
import { Card, CardContent, CardHeader } from "@/components/ui/card"

export default function SearchLoading() {
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <Skeleton className="h-8 w-48" />
        <Skeleton className="h-10 w-24" />
      </div>

<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
        {Array.from({ length: 8 }).map((_, i) => (
          <Card key={i} className="overflow-hidden">
            <Skeleton className="aspect-square w-full" />
            <CardContent className="p-4">
              <Skeleton className="h-5 w-full" />
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="app/api/images/[id]/download/route.ts" isEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { auth } from "@clerk/nextjs/server"
import { sql } from "@/lib/db"

export async function POST(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    // For downloads, we don't require authentication to allow public downloads
    const image = await sql`
     SELECT id, "isPublic", "userId"
     FROM "Image"
     WHERE id = ${params.id}
   `

if (image.length === 0) {
      return NextResponse.json({ error: "Image not found" }, { status: 404 })
    }

// If the image is not public, check if the user is authorized
    if (!image[0].isPublic) {
      const { userId } = auth()
      if (!userId || userId !== image[0].userId) {
        return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
      }
    }

// Increment the download count
    await sql`
     UPDATE "Image"
     SET downloads = downloads + 1
     WHERE id = ${params.id}
   `

return NextResponse.json({ success: true })
  } catch (error) {
    console.error("Error recording download:", error)
    return NextResponse.json({ error: "Failed to record download" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/images/[id]/optimize/route.ts" isEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { auth } from "@clerk/nextjs/server"
import { sql } from "@/lib/db"
import { S3Client, GetObjectCommand } from "@aws-sdk/client-s3"
import type { Readable } from "stream"
import sharp from "sharp"

// Initialize S3 client with Cloudflare R2 credentials
const s3Client = new S3Client({
  region: "auto",
  endpoint: process.env.CLOUDFLARE_R2_ENDPOINT,
  credentials: {
    accessKeyId: process.env.CLOUDFLARE_R2_ACCESS_KEY_ID || "",
    secretAccessKey: process.env.CLOUDFLARE_R2_SECRET_ACCESS_KEY || "",
  },
})

// Helper function to convert a readable stream to a buffer
async function streamToBuffer(stream: Readable): Promise<Buffer> {
  return new Promise((resolve, reject) => {
    const chunks: Buffer[] = []
    stream.on("data", (chunk) => chunks.push(Buffer.from(chunk)))
    stream.on("error", reject)
    stream.on("end", () => resolve(Buffer.concat(chunks)))
  })
}

export async function GET(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    // Get image parameters from query
    const { searchParams } = new URL(request.url)
    const width = Number.parseInt(searchParams.get("width") || "0") || undefined
    const height = Number.parseInt(searchParams.get("height") || "0") || undefined
    const format = searchParams.get("format") || undefined
    const quality = Number.parseInt(searchParams.get("quality") || "80")

// Get the image from the database
    const images = await sql`
     SELECT *
     FROM "Image"
     WHERE id = ${params.id}
   `

if (images.length === 0) {
      return NextResponse.json({ error: "Image not found" }, { status: 404 })
    }

const image = images[0]

// Check if the image is public or if the user is authorized
    if (!image.isPublic) {
      const { userId } = auth()
      if (!userId || userId !== image.userId) {
        return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
      }
    }

// Get the image from R2
    const getCommand = new GetObjectCommand({
      Bucket: process.env.CLOUDFLARE_R2_BUCKET_NAME,
      Key: image.key,
    })

const response = await s3Client.send(getCommand)

if (!response.Body) {
      return NextResponse.json({ error: "Failed to retrieve image" }, { status: 500 })
    }

// Convert the readable stream to a buffer
    const buffer = await streamToBuffer(response.Body as Readable)

// Process the image with Sharp
    let sharpInstance = sharp(buffer)

// Resize if width or height is provided
    if (width || height) {
      sharpInstance = sharpInstance.resize({
        width,
        height,
        fit: "inside",
        withoutEnlargement: true,
      })
    }

// Convert to the requested format
    if (format) {
      switch (format.toLowerCase()) {
        case "jpeg":
        case "jpg":
          sharpInstance = sharpInstance.jpeg({ quality })
          break
        case "png":
          sharpInstance = sharpInstance.png({ quality: (quality / 100) * 9 })
          break
        case "webp":
          sharpInstance = sharpInstance.webp({ quality })
          break
        case "avif":
          sharpInstance = sharpInstance.avif({ quality })
          break
        default:
          // Use original format
          break
      }
    }

// Process the image
    const optimizedImageBuffer = await sharpInstance.toBuffer()

// Get the content type
    let contentType = image.contentType
    if (format) {
      switch (format.toLowerCase()) {
        case "jpeg":
        case "jpg":
          contentType = "image/jpeg"
          break
        case "png":
          contentType = "image/png"
          break
        case "webp":
          contentType = "image/webp"
          break
        case "avif":
          contentType = "image/avif"
          break
      }
    }

// Update analytics
    await sql`
     UPDATE "Image"
     SET views = views + 1
     WHERE id = ${params.id}
   `

// Return the optimized image
    return new NextResponse(optimizedImageBuffer, {
      headers: {
        "Content-Type": contentType,
        "Cache-Control": "public, max-age=31536000, immutable",
      },
    })
  } catch (error) {
    console.error("Error optimizing image:", error)
    return NextResponse.json({ error: "Failed to optimize image" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/images/[id]/analytics/route.ts" isEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { auth } from "@clerk/nextjs/server"
import { sql } from "@/lib/db"

// Record a view
export async function POST(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    // For analytics, we don't require authentication to allow public views
    const image = await sql`
     SELECT id, "isPublic", "userId"
     FROM "Image"
     WHERE id = ${params.id}
   `

if (image.length === 0) {
      return NextResponse.json({ error: "Image not found" }, { status: 404 })
    }

// Increment the view count
    await sql`
     UPDATE "Image"
     SET views = views + 1
     WHERE id = ${params.id}
   `

return NextResponse.json({ success: true })
  } catch (error) {
    console.error("Error recording view:", error)
    return NextResponse.json({ error: "Failed to record view" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/images/[id]/route.ts" isMoved="true" isMovedFrom="app/api/images/[imageId]/route.ts" isEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { auth } from "@clerk/nextjs/server"
import { neon } from "@neondatabase/serverless"

const dbClient = neon(process.env.DATABASE_URL)

export async function GET(request: NextRequest, { params }: { params: { imageId: string } }) {
  try {
    const { userId } = auth()

if (!userId) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const imageId = params.imageId

// Get image details
    const images = await dbClient`
      SELECT i.*, f.name as folderName, f.path as folderPath
      FROM "Image" i
      LEFT JOIN "Folder" f ON i."folderId" = f.id
      WHERE i.id = ${imageId}
      AND i."userId" = ${userId}
      AND i."deletedAt" IS NULL
    `

if (images.length === 0) {
      return NextResponse.json({ error: "Image not found" }, { status: 404 })
    }

// Get image analytics
    const analytics = await dbClient`
      SELECT * FROM "ImageAnalytics"
      WHERE "imageId" = ${imageId}
    `

const imageAnalytics = analytics.length > 0 ? analytics[0] : null

return NextResponse.json({
      image: images[0],
      analytics: imageAnalytics,
    })
  } catch (error) {
    console.error("Error in get image API:", error)
    return NextResponse.json({ error: "Failed to get image" }, { status: 500 })
  }
}

export async function DELETE(request: NextRequest, { params }: { params: { imageId: string } }) {
  try {
    const { userId } = auth()

if (!userId) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const imageId = params.imageId

// Verify the image belongs to the user
    const image = await dbClient`
      SELECT * FROM "Image" 
      WHERE "id" = ${imageId} 
      AND "userId" = ${userId}
    `

if (image.length === 0) {
      return NextResponse.json({ error: "Image not found or access denied" }, { status: 404 })
    }

// Soft delete the image
    await dbClient`
      UPDATE "Image"
      SET "deletedAt" = NOW()
      WHERE "id" = ${imageId}
    `

return NextResponse.json({
      success: true,
    })
  } catch (error) {
    console.error("Error in delete image API:", error)
    return NextResponse.json({ error: "Failed to delete image" }, { status: 500 })
  }
}

export async function PATCH(request: NextRequest, { params }: { params: { imageId: string } }) {
  try {
    const { userId } = auth()

if (!userId) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const imageId = params.imageId
    const updates = await request.json()

if (image.length === 0) {
      return NextResponse.json({ error: "Image not found or access denied" }, { status: 404 })
    }

// Validate updates
    const allowedFields = ["description", "isPublic", "folderId"]
    const updateFields = Object.keys(updates).filter((key) => allowedFields.includes(key))

if (updateFields.length === 0) {
      return NextResponse.json({ error: "No valid fields to update" }, { status: 400 })
    }

// Build the update query
    let updateQuery = 'UPDATE "Image" SET '
    const updateValues = []

updateFields.forEach((field, index) => {
      updateQuery += `"${field}" = $${index + 1}`
      updateValues.push(updates[field])

if (index < updateFields.length - 1) {
        updateQuery += ", "
      }
    })

updateQuery += `, "updatedAt" = NOW() WHERE "id" = $${updateFields.length + 1}`
    updateValues.push(imageId)

// Execute the update
    await dbClient.query(updateQuery, updateValues)

return NextResponse.json({
      success: true,
    })
  } catch (error) {
    console.error("Error in update image API:", error)
    return NextResponse.json({ error: "Failed to update image" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/images/[id]/tags/route.ts" isMoved="true" isMovedFrom="app/api/images/[imageId]/tags/route.ts" isEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { neon } from "@neondatabase/serverless"
import { auth } from "@clerk/nextjs/server"
import { addTagsToImage, getImageTags } from "@/lib/db/schema/image-tags"

const dbClient = neon(process.env.DATABASE_URL)

export async function GET(request: NextRequest, { params }: { params: { imageId: string } }) {
  try {
    const { userId } = auth()

if (!userId) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const imageId = params.imageId

if (image.length === 0) {
      return NextResponse.json({ error: "Image not found or access denied" }, { status: 404 })
    }

// Get tags for the image
    const { tags, success, error } = await getImageTags(imageId)

if (!success) {
      return NextResponse.json({ error: "Failed to get image tags" }, { status: 500 })
    }

return NextResponse.json({ tags })
  } catch (error) {
    console.error("Error in get image tags API:", error)
    return NextResponse.json({ error: "Failed to get image tags" }, { status: 500 })
  }
}

export async function POST(request: NextRequest, { params }: { params: { imageId: string } }) {
  try {
    const { userId } = auth()

if (!userId) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const imageId = params.imageId
    const { tag, source = "manual" } = await request.json()

if (!tag) {
      return NextResponse.json({ error: "Missing required field: tag" }, { status: 400 })
    }

if (image.length === 0) {
      return NextResponse.json({ error: "Image not found or access denied" }, { status: 404 })
    }

// Add tag to the image
    const result = await addTagsToImage(imageId, [tag], source)

if (!result.success) {
      return NextResponse.json({ error: "Failed to add tag to image" }, { status: 500 })
    }

// Get the newly added tag
    const { tags } = await getImageTags(imageId)
    const newTag = tags.find((t) => t.tag === tag.toLowerCase().trim())

return NextResponse.json({
      success: true,
      tag: newTag,
    })
  } catch (error) {
    console.error("Error in add image tag API:", error)
    return NextResponse.json({ error: "Failed to add image tag" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/dashboard/images/[id]/page.tsx" isMoved="true" isMovedFrom="app/dashboard/images/[imageId]/page.tsx" isEdit="true" isMerged="true"
import { notFound } from "next/navigation"
import { auth } from "@clerk/nextjs/server"
import { neon } from "@neondatabase/serverless"
import { DashboardHeader } from "@/components/dashboard/dashboard-header"
import { DashboardShell } from "@/components/dashboard/dashboard-shell"
import { ImageDetail } from "@/components/images/image-detail"
import { ImageTags } from "@/components/images/image-tags"
import { getImageTags } from "@/lib/db/schema/image-tags"
import { Button } from "@/components/ui/button"
import { processUploadedImage } from "@/lib/actions/process-uploaded-image"
import { Sparkles } from "lucide-react"

const dbClient = neon(process.env.DATABASE_URL)

interface ImagePageProps {
  params: {
    imageId: string
  }
}

export default async function ImagePage({ params }: ImagePageProps) {
  const { userId } = auth()

if (!userId) {
    return notFound()
  }

const imageId = params.imageId

// Get image details
  const images = await dbClient`
    SELECT i.*, f.name as folderName, f.path as folderPath
    FROM "Image" i
    LEFT JOIN "Folder" f ON i."folderId" = f.id
    WHERE i.id = ${imageId}
    AND i."userId" = ${userId}
    AND i."deletedAt" IS NULL
  `

if (images.length === 0) {
    return notFound()
  }

const image = images[0]

// Get image tags
  const { tags } = await getImageTags(imageId)

// Get image analytics
  const analytics = await dbClient`
    SELECT * FROM "ImageAnalytics"
    WHERE "imageId" = ${imageId}
  `

const imageAnalytics = analytics.length > 0 ? analytics[0] : null

return (
    <DashboardShell>
      <DashboardHeader heading={image.filename} description={image.description || "No description"}>
        <form
          action={async () => {
            "use server"
            await processUploadedImage(imageId)
          }}
        >
          <Button type="submit" size="sm">
            <Sparkles className="mr-2 h-4 w-4" />
            Analyze with AI
          </Button>
        </form>
      </DashboardHeader>

<div className="space-y-6">
          <ImageTags imageId={imageId} initialTags={tags} editable={true} />
        </div>
      </div>
    </DashboardShell>
  )
}
[V0_FILE]typescriptreact:file="app/api/images/[id]/tags/[tagId]/route.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { neon } from "@neondatabase/serverless"
import { auth } from "@clerk/nextjs/server"

const dbClient = neon(process.env.DATABASE_URL)

export async function DELETE(request: NextRequest, { params }: { params: { imageId: string; tagId: string } }) {
  try {
    const { userId } = auth()

if (!userId) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const { id, tagId } = params

// Verify the image belongs to the user
    const image = await dbClient`
    SELECT * FROM "Image" 
    WHERE "id" = ${id} 
    AND "userId" = ${userId}
    AND "deletedAt" IS NULL
  `

if (image.length === 0) {
      return NextResponse.json({ error: "Image not found or access denied" }, { status: 404 })
    }

// Delete the tag
    await dbClient`
    DELETE FROM "ImageTag"
    WHERE "id" = ${tagId}
    AND "imageId" = ${id}
  `

return NextResponse.json({
      success: true,
    })
  } catch (error) {
    console.error("Error in delete image tag API:", error)
    return NextResponse.json({ error: "Failed to delete image tag" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="components/images/image-gallery-server.tsx" isMerged="true"
import { auth } from "@clerk/nextjs/server"
import { sql } from "@/lib/db"
import { ImageGrid } from "@/components/images/image-grid"

interface ImageGalleryServerProps {
  query: string
}

export async function ImageGalleryServer({ query }: ImageGalleryServerProps) {
  const { userId } = auth()

if (!userId) {
    return <div>Unauthorized</div>
  }

// Process natural language query to extract keywords
  const keywords = await prepareNaturalLanguageQuery(query)

// Build search conditions
  const searchConditions = keywords.map((keyword) => {
    return sql`
     filename ILIKE ${`%${keyword}%`} OR
     description ILIKE ${`%${keyword}%`} OR
     metadata::text ILIKE ${`%${keyword}%`}
   `
  })

// Combine conditions with OR
  const whereConditions = sql.join(searchConditions, sql` OR `)

// Perform the search
  const images = await sql`
   SELECT * FROM "Image"
   WHERE "userId" = ${userId}
   AND "deletedAt" IS NULL
   AND (${whereConditions})
   ORDER BY "createdAt" DESC
   LIMIT 50
 `

return <ImageGrid images={images} />
}

async function prepareNaturalLanguageQuery(query: string): Promise<string[]> {
  // Mock implementation for demonstration purposes
  // Replace with your actual AI-powered query preparation logic
  return query.split(" ").filter((word) => word.length > 2)
}
[V0_FILE]typescriptreact:file="components/images/image-grid.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import Image from "next/image"
import Link from "next/link"
import { Card, CardContent } from "@/components/ui/card"
import { ImageTags } from "@/components/images/image-tags"
import { useRouter } from "next/navigation"
import { FileIcon, ImageIcon } from "lucide-react"

interface ImageGridProps {
  images: any[]
}

export function ImageGrid({ images }: ImageGridProps) {
  const router = useRouter()

const handleTagClick = (tag: string) => {
    router.push(`/dashboard/search?q=${encodeURIComponent(tag)}`)
  }

return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
      {images.map((image) => (
        <Card key={image.id} className="overflow-hidden">
          <Link href={`/dashboard/images/${image.id}`}>
            <div className="aspect-square relative bg-muted">
              {image.thumbnailUrl ? (
                <Image
                  src={image.thumbnailUrl || "/placeholder.svg"}
                  alt={image.description || image.filename}
                  fill
                  className="object-cover"
                />
              ) : (
                <div className="flex h-full items-center justify-center">
                  {image.contentType?.startsWith("image/") ? (
                    <ImageIcon className="h-12 w-12 text-muted-foreground" />
                  ) : (
                    <FileIcon className="h-12 w-12 text-muted-foreground" />
                  )}
                </div>
              )}
            </div>
          </Link>
          <CardContent className="p-3">
            <div className="mb-2 truncate font-medium">{image.filename}</div>
            <ImageTags imageId={image.id} onTagClick={handleTagClick} />
          </CardContent>
        </Card>
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/images/search/SearchPageClient.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"
import { DashboardHeader } from "@/components/dashboard/dashboard-header"
import { DashboardShell } from "@/components/dashboard/dashboard-shell"
import { auth } from "@clerk/nextjs/client"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { NaturalLanguageSearch } from "@/components/ai/natural-language-search"
import { prepareNaturalLanguageQuery } from "@/lib/ai-utils"
import { ImageGrid } from "@/components/images/image-grid"
import { Suspense } from "react"

interface SearchPageProps {
  searchParams: { q?: string }
}

async function KeywordDisplay({ query }: { query: string }) {
  const keywords = await prepareNaturalLanguageQuery(query)

return (
    <div className="flex flex-wrap gap-2 mt-2">
      <span className="text-sm">Keywords extracted:</span>
      {keywords.map((keyword) => (
        <Badge key={keyword} variant="secondary">
          {keyword}
        </Badge>
      ))}
    </div>
  )
}

async function ImageGalleryServer({ query }: { query: string }) {
  const { userId } = auth()

if (!userId) {
    return <div>Unauthorized</div>
  }

// Process natural language query to extract keywords
  const keywords = await prepareNaturalLanguageQuery(query)

// Mock implementation for demonstration purposes
  // Replace with your actual AI-powered query preparation logic
  const images = []

return <ImageGrid images={images} />
}

export default function SearchPageClient({ searchParams }: SearchPageProps) {
  const query = searchParams.q

return (
    <DashboardShell>
      <DashboardHeader heading="Image Search" description="Search your images using natural language or keywords" />
      <div className="grid gap-8">
        <Card className="mb-6">
          <CardHeader>
            <CardTitle>Search Results for: "{query}"</CardTitle>
            <CardDescription>
              <Suspense fallback={<div>Loading keywords...</div>}>
                <KeywordDisplay query={query} />
              </Suspense>
            </CardDescription>
          </CardHeader>
          <CardContent>
            <NaturalLanguageSearch />
          </CardContent>
        </Card>

<Suspense fallback={<div>Loading results...</div>}>
          <ImageGalleryServer query={query} />
        </Suspense>
      </div>
    </DashboardShell>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/images/search/page.tsx" isEdit="true" isMerged="true"
import { auth } from "@clerk/nextjs/server"
import { redirect } from "next/navigation"
import { ImageSearch } from "@/components/search/image-search"
import { DashboardHeader } from "@/components/dashboard/dashboard-header"
import { DashboardShell } from "@/components/dashboard/dashboard-shell"

export const metadata = {
  title: "Search Images | ImageVault",
  description: "Search your images using natural language",
}

export default async function SearchPage() {
  const { userId } = auth()

if (!userId) {
    redirect("/sign-in")
  }

return (
    <DashboardShell>
      <DashboardHeader heading="Image Search" description="Search your images using natural language or keywords" />
      <div className="grid gap-8">
        <ImageSearch />
      </div>
    </DashboardShell>
  )
}
[V0_FILE]typescriptreact:file="components/search/image-search.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, type FormEvent } from "react"
import { useRouter } from "next/navigation"
import { Search, Sparkles, Loader2 } from "lucide-react"
import { toast } from "sonner"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"

export function ImageSearch() {
  const router = useRouter()
  const [query, setQuery] = useState("")
  const [isSearching, setIsSearching] = useState(false)
  const [searchResults, setSearchResults] = useState<any[]>([])
  const [keywords, setKeywords] = useState<string[]>([])
  const [hasSearched, setHasSearched] = useState(false)

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

if (!query.trim()) {
      return
    }

setIsSearching(true)
    setHasSearched(true)

try {
      // Mock search results for demonstration purposes
      const mockResults = [
        { id: "1", filename: "image1.jpg", tags: ["nature", "sunset"] },
        { id: "2", filename: "image2.png", tags: ["city", "night"] },
      ]
      setSearchResults(mockResults)
      setKeywords(query.split(" ")) // Mock keywords
    } catch (error) {
      console.error("Search error:", error)
      toast.error("Failed to perform search")
      setSearchResults([])
      setKeywords([])
    } finally {
      setIsSearching(false)
    }
  }

return (
    <div className="space-y-6">
      <form onSubmit={handleSearch} className="flex w-full max-w-md items-center space-x-2">
        <div className="relative flex-1">
          <Input
            type="text"
            placeholder="Search images in natural language..."
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            className="pr-10"
          />
          <Sparkles className="absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
        </div>
        <Button type="submit" disabled={isSearching}>
          {isSearching ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Search className="mr-2 h-4 w-4" />}
          Search
        </Button>
      </form>

{keywords.length > 0 && (
        <div className="flex flex-wrap gap-2">
          <span className="text-sm text-muted-foreground">Searching for:</span>
          {keywords.map((keyword) => (
            <Badge key={keyword} variant="outline">
              {keyword}
            </Badge>
          ))}
        </div>
      )}

{hasSearched && (
        <div>
          {isSearching ? (
            <div className="flex items-center justify-center py-12">
              <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
            </div>
          ) : (
            <>
              <h2 className="text-lg font-medium mb-4">
                {searchResults.length === 0
                  ? "No images found"
                  : `Found ${searchResults.length} image${searchResults.length === 1 ? "" : "s"}`}
              </h2>

<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                {searchResults.map((image) => (
                  <div key={image.id} className="border rounded-md p-2">
                    <p>{image.filename}</p>
                    <p>Tags: {image.tags.join(", ")}</p>
                  </div>
                ))}
              </div>
            </>
          )}
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/tools/watermark-tool.tsx"
"use client"

import { useState, useRef, useCallback } from "react"
import { useDropzone } from "react-dropzone"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent } from "@/components/ui/card"
import { Upload, Download, Type } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

export function WatermarkTool() {
  const { toast } = useToast()
  const [image, setImage] = useState<string | null>(null)
  const [watermarkText, setWatermarkText] = useState("ImageVault")
  const [watermarkedImage, setWatermarkedImage] = useState<string | null>(null)
  const [isWatermarking, setIsWatermarking] = useState(false)
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const imageRef = useRef<HTMLImageElement | null>(null)

const onDrop = useCallback((acceptedFiles: File[]) => {
    const file = acceptedFiles[0]
    if (file && file.type.startsWith("image/")) {
      const reader = new FileReader()
      reader.onload = () => {
        const dataUrl = reader.result as string
        setImage(dataUrl)

// Load image for watermarking
        const img = new Image()
        img.onload = () => {
          imageRef.current = img
        }
        img.src = dataUrl
      }
      reader.readAsDataURL(file)
      setWatermarkedImage(null)
    }
  }, [])

const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    accept: {
      "image/*": [".png", ".jpg", ".jpeg", ".webp"],
    },
    maxFiles: 1,
    maxSize: 10 * 1024 * 1024, // 10MB
  })

const applyWatermark = () => {
    if (!image || !imageRef.current || !canvasRef.current) return

setIsWatermarking(true)

try {
      const canvas = canvasRef.current
      const ctx = canvas.getContext("2d")

if (!ctx) {
        throw new Error("Could not get canvas context")
      }

// Set canvas dimensions
      canvas.width = imageRef.current.width
      canvas.height = imageRef.current.height

// Draw image on canvas
      ctx.drawImage(imageRef.current, 0, 0)

// Apply watermark text
      ctx.font = "30px Arial"
      ctx.fillStyle = "rgba(255, 255, 255, 0.5)"
      ctx.textAlign = "center"
      ctx.fillText(watermarkText, canvas.width / 2, canvas.height - 50)

// Get watermarked image as data URL
      const watermarkedDataUrl = canvas.toDataURL("image/png")
      setWatermarkedImage(watermarkedDataUrl)

toast({
        title: "Watermark applied successfully",
        description: "Your image has been watermarked.",
      })
    } catch (error) {
      console.error("Error applying watermark:", error)
      toast({
        title: "Error applying watermark",
        description: "An error occurred while applying the watermark. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsWatermarking(false)
    }
  }

const downloadWatermarkedImage = () => {
    if (!watermarkedImage) return

const link = document.createElement("a")
    link.href = watermarkedImage
    link.download = "watermarked-image.png"
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }

return (
    <section className="py-12 md:py-16">
      <div className="container px-4 md:px-6">
        <div className="flex flex-col items-center text-center space-y-4 mb-8">
          <div className="rounded-full bg-primary/10 p-3 mb-2">
            <Type className="h-6 w-6 text-primary" />
          </div>
          <h1 className="text-3xl md:text-4xl font-bold tracking-tight">Watermark Adder</h1>
          <p className="text-xl text-muted-foreground max-w-[800px]">
            Add a custom watermark to your images. Protect your content with a text overlay.
          </p>
        </div>

<div className="grid gap-8 md:grid-cols-2">
          <div className="space-y-6">
            <Card>
              <CardContent className="p-6">
                {!image ? (
                  <div
                    {...getRootProps()}
                    className={`border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors ${
                      isDragActive ? "border-primary bg-primary/5" : "border-gray-300 hover:border-primary/50"
                    }`}
                  >
                    <input {...getInputProps()} />
                    <div className="flex flex-col items-center justify-center gap-2">
                      <div className="rounded-full bg-primary/10 p-3">
                        <Upload className="h-6 w-6 text-primary" />
                      </div>
                      <p className="font-medium">Drop an image here or click to upload</p>
                      <p className="text-sm text-gray-500">Supports JPG, PNG, WebP | Max size: 10MB</p>
                    </div>
                  </div>
                ) : (
                  <div className="space-y-4">
                    <div className="relative aspect-video rounded-lg overflow-hidden border bg-muted/40">
                      <Image src={image || "/placeholder.svg"} alt="Original image" fill className="object-contain" />
                    </div>
                    <div className="flex justify-between items-center text-sm text-muted-foreground">
                      <span>Original image</span>
                      <Button variant="ghost" size="sm" onClick={() => setImage(null)}>
                        Change Image
                      </Button>
                    </div>
                  </div>
                )}
              </CardContent>
            </Card>

{image && (
              <Card>
                <CardContent className="p-6 space-y-6">
                  <div className="space-y-4">
                    <h3 className="text-lg font-medium">Watermark Settings</h3>

<div className="space-y-2">
                      <Label htmlFor="watermark-text">Watermark Text</Label>
                      <Input
                        id="watermark-text"
                        type="text"
                        value={watermarkText}
                        onChange={(e) => setWatermarkText(e.target.value)}
                      />
                    </div>
                  </div>

<Button className="w-full" onClick={applyWatermark} disabled={isWatermarking}>
                    {isWatermarking ? "Applying Watermark..." : "Apply Watermark"}
                  </Button>
                </CardContent>
              </Card>
            )}
          </div>

<div className="space-y-6">
            {watermarkedImage ? (
              <Card>
                <CardContent className="p-6 space-y-4">
                  <h3 className="text-lg font-medium">Watermarked Image</h3>
                  <div className="relative aspect-video rounded-lg overflow-hidden border bg-muted/40">
                    <Image
                      src={watermarkedImage || "/placeholder.svg"}
                      alt="Watermarked image"
                      fill
                      className="object-contain"
                    />
                  </div>
                  <Button className="w-full" onClick={downloadWatermarkedImage}>
                    <Download className="h-4 w-4 mr-2" />
                    Download Watermarked Image
                  </Button>
                </CardContent>
              </Card>
            ) : (
              <div className="flex h-full items-center justify-center">
                <div className="text-center p-8">
                  <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-muted">
                    <Type className="h-6 w-6 text-muted-foreground" />
                  </div>
                  <h3 className="mt-4 text-lg font-semibold">No Watermarked Image Yet</h3>
                  <p className="mt-2 text-sm text-muted-foreground">
                    Upload an image and adjust settings to see the watermarked version here.
                  </p>
                </div>
              </div>
            )}

{/* Hidden canvas for image processing */}
            <canvas ref={canvasRef} style={{ display: "none" }} />
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="app/tools/watermark/page.tsx"
import type { Metadata } from "next"
import { WatermarkTool } from "@/components/tools/watermark-tool"
import { LandingNavbar } from "@/components/landing/navbar"
import { LandingFooter } from "@/components/landing/footer"

export const metadata: Metadata = {
  title: "Watermark Adder | ImageVault Tools",
  description: "Add a custom watermark to your images. Protect your content with a text overlay.",
}

export default function WatermarkPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <LandingNavbar />
      <main className="flex-1">
        <WatermarkTool />
      </main>
      <LandingFooter />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/tools/blur-tool.tsx"
"use client"

import { useState, useRef, useCallback } from "react"
import { useDropzone } from "react-dropzone"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Slider } from "@/components/ui/slider"
import { Card, CardContent } from "@/components/ui/card"
import { Upload, Download, CloudyIcon as Blur } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

export function BlurTool() {
  const { toast } = useToast()
  const [image, setImage] = useState<string | null>(null)
  const [blurRadius, setBlurRadius] = useState(5)
  const [blurredImage, setBlurredImage] = useState<string | null>(null)
  const [isBlurring, setIsBlurring] = useState(false)
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const imageRef = useRef<HTMLImageElement | null>(null)

// Load image for blurring
        const img = new Image()
        img.onload = () => {
          imageRef.current = img
        }
        img.src = dataUrl
      }
      reader.readAsDataURL(file)
      setBlurredImage(null)
    }
  }, [])

const applyBlur = () => {
    if (!image || !imageRef.current || !canvasRef.current) return

setIsBlurring(true)

try {
      const canvas = canvasRef.current
      const ctx = canvas.getContext("2d")

if (!ctx) {
        throw new Error("Could not get canvas context")
      }

// Set canvas dimensions
      canvas.width = imageRef.current.width
      canvas.height = imageRef.current.height

// Draw image on canvas
      ctx.drawImage(imageRef.current, 0, 0)

// Apply blur filter
      ctx.filter = `blur(${blurRadius}px)`
      ctx.drawImage(imageRef.current, 0, 0)
      ctx.filter = "none" // Reset filter

// Get blurred image as data URL
      const blurredDataUrl = canvas.toDataURL("image/png")
      setBlurredImage(blurredDataUrl)

toast({
        title: "Blur applied successfully",
        description: "Your image has been blurred.",
      })
    } catch (error) {
      console.error("Error applying blur:", error)
      toast({
        title: "Error applying blur",
        description: "An error occurred while applying the blur. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsBlurring(false)
    }
  }

const downloadBlurredImage = () => {
    if (!blurredImage) return

const link = document.createElement("a")
    link.href = blurredImage
    link.download = "blurred-image.png"
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }

return (
    <section className="py-12 md:py-16">
      <div className="container px-4 md:px-6">
        <div className="flex flex-col items-center text-center space-y-4 mb-8">
          <div className="rounded-full bg-primary/10 p-3 mb-2">
            <Blur className="h-6 w-6 text-primary" />
          </div>
          <h1 className="text-3xl md:text-4xl font-bold tracking-tight">Blur Tool</h1>
          <p className="text-xl text-muted-foreground max-w-[800px]">
            Apply a blur effect to your images. Enhance privacy or create artistic effects.
          </p>
        </div>

{image && (
              <Card>
                <CardContent className="p-6 space-y-6">
                  <div className="space-y-4">
                    <h3 className="text-lg font-medium">Blur Settings</h3>

<div className="space-y-2">
                      <Label htmlFor="blur-radius">Blur Radius</Label>
                      <Slider
                        id="blur-radius"
                        min={0}
                        max={50}
                        step={1}
                        value={[blurRadius]}
                        onValueChange={(value) => setBlurRadius(value[0])}
                      />
                    </div>
                  </div>

<Button className="w-full" onClick={applyBlur} disabled={isBlurring}>
                    {isBlurring ? "Applying Blur..." : "Apply Blur"}
                  </Button>
                </CardContent>
              </Card>
            )}
          </div>

<div className="space-y-6">
            {blurredImage ? (
              <Card>
                <CardContent className="p-6 space-y-4">
                  <h3 className="text-lg font-medium">Blurred Image</h3>
                  <div className="relative aspect-video rounded-lg overflow-hidden border bg-muted/40">
                    <Image
                      src={blurredImage || "/placeholder.svg"}
                      alt="Blurred image"
                      fill
                      className="object-contain"
                    />
                  </div>
                  <Button className="w-full" onClick={downloadBlurredImage}>
                    <Download className="h-4 w-4 mr-2" />
                    Download Blurred Image
                  </Button>
                </CardContent>
              </Card>
            ) : (
              <div className="flex h-full items-center justify-center">
                <div className="text-center p-8">
                  <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-muted">
                    <Blur className="h-6 w-6 text-muted-foreground" />
                  </div>
                  <h3 className="mt-4 text-lg font-semibold">No Blurred Image Yet</h3>
                  <p className="mt-2 text-sm text-muted-foreground">
                    Upload an image and adjust settings to see the blurred version here.
                  </p>
                </div>
              </div>
            )}

{/* Hidden canvas for image processing */}
            <canvas ref={canvasRef} style={{ display: "none" }} />
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="app/tools/blur/page.tsx"
import type { Metadata } from "next"
import { BlurTool } from "@/components/tools/blur-tool"
import { LandingNavbar } from "@/components/landing/navbar"
import { LandingFooter } from "@/components/landing/footer"

export const metadata: Metadata = {
  title: "Blur Tool | ImageVault Tools",
  description: "Apply a blur effect to your images. Enhance privacy or create artistic effects.",
}

export default function BlurPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <LandingNavbar />
      <main className="flex-1">
        <BlurTool />
      </main>
      <LandingFooter />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/tools/grayscale-tool.tsx"
"use client"

import { useState, useRef, useCallback } from "react"
import { useDropzone } from "react-dropzone"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Upload, Download, Contrast } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

export function GrayscaleTool() {
  const { toast } = useToast()
  const [image, setImage] = useState<string | null>(null)
  const [grayscaleImage, setGrayscaleImage] = useState<string | null>(null)
  const [isConverting, setIsConverting] = useState(false)
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const imageRef = useRef<HTMLImageElement | null>(null)

// Load image for grayscale conversion
        const img = new Image()
        img.onload = () => {
          imageRef.current = img
        }
        img.src = dataUrl
      }
      reader.readAsDataURL(file)
      setGrayscaleImage(null)
    }
  }, [])

const applyGrayscale = () => {
    if (!image || !imageRef.current || !canvasRef.current) return

setIsConverting(true)

try {
      const canvas = canvasRef.current
      const ctx = canvas.getContext("2d")

if (!ctx) {
        throw new Error("Could not get canvas context")
      }

// Set canvas dimensions
      canvas.width = imageRef.current.width
      canvas.height = imageRef.current.height

// Draw image on canvas
      ctx.drawImage(imageRef.current, 0, 0)

// Apply grayscale filter
      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
      const data = imageData.data

for (let i = 0; i < data.length; i += 4) {
        const avg = (data[i] + data[i + 1] + data[i + 2]) / 3
        data[i] = avg // red
        data[i + 1] = avg // green
        data[i + 2] = avg // blue
      }

ctx.putImageData(imageData, 0, 0)

// Get grayscale image as data URL
      const grayscaleDataUrl = canvas.toDataURL("image/png")
      setGrayscaleImage(grayscaleDataUrl)

toast({
        title: "Grayscale applied successfully",
        description: "Your image has been converted to grayscale.",
      })
    } catch (error) {
      console.error("Error applying grayscale:", error)
      toast({
        title: "Error applying grayscale",
        description: "An error occurred while applying grayscale. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsConverting(false)
    }
  }

const downloadGrayscaleImage = () => {
    if (!grayscaleImage) return

const link = document.createElement("a")
    link.href = grayscaleImage
    link.download = "grayscale-image.png"
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }

return (
    <section className="py-12 md:py-16">
      <div className="container px-4 md:px-6">
        <div className="flex flex-col items-center text-center space-y-4 mb-8">
          <div className="rounded-full bg-primary/10 p-3 mb-2">
            <Contrast className="h-6 w-6 text-primary" />
          </div>
          <h1 className="text-3xl md:text-4xl font-bold tracking-tight">Grayscale Converter</h1>
          <p className="text-xl text-muted-foreground max-w-[800px]">
            Convert your images to grayscale. Create classic black and white effects.
          </p>
        </div>

{image && (
              <Card>
                <CardContent className="p-6 space-y-6">
                  <div className="space-y-4">
                    <h3 className="text-lg font-medium">Grayscale Settings</h3>
                  </div>

<Button className="w-full" onClick={applyGrayscale} disabled={isConverting}>
                    {isConverting ? "Applying Grayscale..." : "Apply Grayscale"}
                  </Button>
                </CardContent>
              </Card>
            )}
          </div>

<div className="space-y-6">
            {grayscaleImage ? (
              <Card>
                <CardContent className="p-6 space-y-4">
                  <h3 className="text-lg font-medium">Grayscale Image</h3>
                  <div className="relative aspect-video rounded-lg overflow-hidden border bg-muted/40">
                    <Image
                      src={grayscaleImage || "/placeholder.svg"}
                      alt="Grayscale image"
                      fill
                      className="object-contain"
                    />
                  </div>
                  <Button className="w-full" onClick={downloadGrayscaleImage}>
                    <Download className="h-4 w-4 mr-2" />
                    Download Grayscale Image
                  </Button>
                </CardContent>
              </Card>
            ) : (
              <div className="flex h-full items-center justify-center">
                <div className="text-center p-8">
                  <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-muted">
                    <Contrast className="h-6 w-6 text-muted-foreground" />
                  </div>
                  <h3 className="mt-4 text-lg font-semibold">No Grayscale Image Yet</h3>
                  <p className="mt-2 text-sm text-muted-foreground">
                    Upload an image to see the grayscale version here.
                  </p>
                </div>
              </div>
            )}

{/* Hidden canvas for image processing */}
            <canvas ref={canvasRef} style={{ display: "none" }} />
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="app/tools/grayscale/page.tsx"
import type { Metadata } from "next"
import { GrayscaleTool } from "@/components/tools/grayscale-tool"
import { LandingNavbar } from "@/components/landing/navbar"
import { LandingFooter } from "@/components/landing/footer"

export const metadata: Metadata = {
  title: "Grayscale Converter | ImageVault Tools",
  description: "Convert your images to grayscale. Create classic black and white effects.",
}

export default function GrayscalePage() {
  return (
    <div className="flex min-h-screen flex-col">
      <LandingNavbar />
      <main className="flex-1">
        <GrayscaleTool />
      </main>
      <LandingFooter />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/globals.css" isEdit="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

--card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

--popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

--primary: 201 96% 32%;
    --primary-foreground: 210 40% 98%;

--secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

--muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

--accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

--destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

--border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;

--radius: 0.5rem;
  }

.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

--card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

--popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

--primary: 201 96% 32%;
    --primary-foreground: 210 40% 98%;

--secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

--muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

--accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

--destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

--border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }
}

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

.hero-gradient {
  background: linear-gradient(
    to bottom right,
    rgba(14, 165, 233, 0.2),
    rgba(56, 189, 248, 0.1),
    rgba(186, 230, 253, 0.05)
  );
}

.feature-gradient {
  background: linear-gradient(
    to bottom right,
    rgba(14, 165, 233, 0.1),
    rgba(56, 189, 248, 0.05),
    rgba(186, 230, 253, 0.025)
  );
}

.dashboard-gradient {
  background: linear-gradient(to bottom, rgba(14, 165, 233, 0.05), rgba(56, 189, 248, 0.025), transparent);
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

@media (max-width: 640px) {
  .image-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

.image-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.image-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.dashboard-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.pricing-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.pricing-highlight {
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
  background: linear-gradient(white, white) padding-box, linear-gradient(to right, #0ea5e9, #38bdf8) border-box;
}

.pricing-highlight::before {
  content: "POPULAR";
  position: absolute;
  top: 0;
  right: 0;
  background: linear-gradient(to right, #0ea5e9, #38bdf8);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 1rem;
  border-bottom-left-radius: 0.5rem;
}

.feature-icon {
  background: linear-gradient(to bottom right, #0ea5e9, #38bdf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tool-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tool-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.tool-icon {
  background: linear-gradient(to bottom right, #0ea5e9, #38bdf8);
  border-radius: 12px;
  padding: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.tool-icon svg {
  color: white;
}
[V0_FILE]typescriptreact:file="tailwind.config.ts" isEdit="true"
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,mdx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
        brand: {
          50: "#f0f9ff",
          100: "#e0f2fe",
          200: "#bae6fd",
          300: "#7dd3fc",
          400: "#38bdf8",
          500: "#0ea5e9",
          600: "#0284c7",
          700: "#0369a1",
          800: "#075985",
          900: "#0c4a6e",
          950: "#082f49",
        },
      },
      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" },
        },
        "fade-up": {
          "0%": {
            opacity: "0",
            transform: "translateY(10px)",
          },
          "80%": {
            opacity: "0.6",
          },
          "100%": {
            opacity: "1",
            transform: "translateY(0px)",
          },
        },
        "fade-down": {
          "0%": {
            opacity: "0",
            transform: "translateY(-10px)",
          },
          "80%": {
            opacity: "0.6",
          },
          "100%": {
            opacity: "1",
            transform: "translateY(0px)",
          },
        },
        "slide-up-fade": {
          "0%": { opacity: "0", transform: "translateY(6px)" },
          "100%": { opacity: "1", transform: "translateY(0)" },
        },
        "slide-down-fade": {
          "0%": { opacity: "0", transform: "translateY(-6px)" },
          "100%": { opacity: "1", transform: "translateY(0)" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
        "fade-up": "fade-up 0.3s ease-out",
        "fade-down": "fade-down 0.3s ease-out",
        "slide-up-fade": "slide-up-fade 0.3s cubic-bezier(0.16, 1, 0.3, 1)",
        "slide-down-fade": "slide-down-fade 0.3s cubic-bezier(0.16, 1, 0.3, 1)",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

export default config
[V0_FILE]typescriptreact:file="components/image-uploader.tsx" isEdit="true"
"use client"

import { useState, useCallback } from "react"
import { useDropzone } from "react-dropzone"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Progress } from "@/components/ui/progress"
import { Input } from "@/components/ui/input"
import { formatBytes } from "@/lib/utils"
import { Upload, X, ImageIcon } from "lucide-react"

export function ImageUploader() {
  const [files, setFiles] = useState<File[]>([])
  const [uploading, setUploading] = useState(false)
  const [progress, setProgress] = useState(0)
  const [uploadedUrls, setUploadedUrls] = useState<string[]>([])
  const [directUrl, setDirectUrl] = useState("")

const onDrop = useCallback((acceptedFiles: File[]) => {
    // Filter for images and check size limits
    const validFiles = acceptedFiles.filter((file) => file.type.startsWith("image/") && file.size <= 10 * 1024 * 1024)
    setFiles((prev) => [...prev, ...validFiles])
  }, [])

const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    accept: {
      "image/*": [".png", ".jpg", ".jpeg", ".webp"],
    },
    maxFiles: 10,
    maxSize: 10 * 1024 * 1024, // 10MB
  })

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

const uploadFiles = async () => {
    if (files.length === 0) return

setUploading(true)
    setProgress(0)
    const urls: string[] = []

try {
      // Process each file sequentially
      for (let i = 0; i < files.length; i++) {
        const file = files[i]

// Get a presigned URL from the server
        const response = await fetch("/api/upload", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            filename: file.name,
            contentType: file.type,
            size: file.size,
          }),
        })

if (!response.ok) {
          throw new Error("Failed to get upload URL")
        }

const { presignedUrl, publicUrl } = await response.json()

// Upload the file directly to R2
        await fetch(presignedUrl, {
          method: "PUT",
          body: file,
          headers: {
            "Content-Type": file.type,
          },
        })

urls.push(publicUrl)

// Update progress
        setProgress(((i + 1) / files.length) * 100)
      }

setUploadedUrls(urls)
      setFiles([])
    } catch (error) {
      console.error("Upload failed:", error)
      alert("Failed to upload one or more images")
    } finally {
      setUploading(false)
    }
  }

const addDirectUrl = () => {
    if (!directUrl) return

// Validate URL
    try {
      new URL(directUrl)
      setUploadedUrls((prev) => [...prev, directUrl])
      setDirectUrl("")
    } catch (e) {
      alert("Please enter a valid URL")
    }
  }

return (
    <div className="space-y-4">
      <Tabs defaultValue="local">
        <TabsList className="grid w-full grid-cols-2">
          <TabsTrigger value="local">Local Files</TabsTrigger>
          <TabsTrigger value="url">Direct Link</TabsTrigger>
        </TabsList>
        <TabsContent value="local" className="pt-4">
          <div
            {...getRootProps()}
            className={`border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors ${
              isDragActive ? "border-primary bg-primary/5" : "border-gray-300 hover:border-primary/50"
            }`}
          >
            <input {...getInputProps()} />
            <div className="flex flex-col items-center justify-center gap-2">
              <div className="rounded-full bg-primary/10 p-3">
                <Upload className="h-6 w-6 text-primary" />
              </div>
              <p className="font-medium">Drop or paste files here or click to upload</p>
              <p className="text-sm text-gray-500">Supports JPG, PNG, GIF, WebP | Max size: 10MB</p>
            </div>
          </div>
        </TabsContent>
        <TabsContent value="url" className="pt-4">
          <div className="flex gap-2">
            <Input
              type="text"
              placeholder="https://example.com/image.jpg"
              className="flex h-10 w-full"
              value={directUrl}
              onChange={(e) => setDirectUrl(e.target.value)}
            />
            <Button onClick={addDirectUrl}>Add</Button>
          </div>
        </TabsContent>
      </Tabs>

{files.length > 0 && (
        <div className="space-y-4">
          <div className="grid gap-2">
            {files.map((file, index) => (
              <div key={index} className="flex items-center justify-between p-2 border rounded-lg">
                <div className="flex items-center gap-2">
                  <div className="bg-gray-100 p-2 rounded-md">
                    <ImageIcon className="h-5 w-5 text-gray-500" />
                  </div>
                  <div>
                    <div className="text-sm truncate max-w-[200px] sm:max-w-[300px]">{file.name}</div>
                    <div className="text-xs text-gray-500">{formatBytes(file.size)}</div>
                  </div>
                </div>
                <Button variant="ghost" size="icon" onClick={() => removeFile(index)}>
                  <X className="h-4 w-4" />
                </Button>
              </div>
            ))}
          </div>

{uploading && <Progress value={progress} className="h-2 w-full" />}

<div className="flex justify-between">
            <Button variant="outline" onClick={() => setFiles([])}>
              Clear All
            </Button>
            <Button onClick={uploadFiles} disabled={uploading}>
              {uploading ? "Uploading..." : "Start Upload"}
            </Button>
          </div>
        </div>
      )}

{uploadedUrls.length > 0 && (
        <div className="mt-6 space-y-2">
          <h3 className="font-medium">Uploaded Images</h3>
          <div className="grid gap-2">
            {uploadedUrls.map((url, index) => (
              <div key={index} className="flex items-center justify-between p-2 border rounded-lg">
                <div className="flex items-center gap-2 overflow-hidden">
                  <div className="bg-green-100 p-2 rounded-md">
                    <ImageIcon className="h-5 w-5 text-green-500" />
                  </div>
                  <div className="text-sm truncate max-w-[200px] sm:max-w-[300px]">{url}</div>
                </div>
                <Button variant="ghost" size="sm" onClick={() => navigator.clipboard.writeText(url)}>
                  Copy
                </Button>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/api/upload/route.ts" isEdit="true"
import { NextResponse } from "next/server"
import { auth } from "@clerk/nextjs/server"
import { s3Client } from "@/lib/storage"
import { PutObjectCommand } from "@aws-sdk/client-s3"
import { getSignedUrl } from "@aws-sdk/s3-request-presigner"
import crypto from "crypto"
import { rateLimiter } from "@/lib/rate-limit"

export async function POST(request: Request) {
  const { userId } = auth()

if (!userId) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
  }

// Apply rate limiting (20 uploads per minute)
  const limitResult = await rateLimiter(request, {
    limit: 20,
    windowMs: 60 * 1000,
    identifier: `upload_${userId}`,
  })

if (limitResult instanceof NextResponse) {
    return limitResult
  }

try {
    const formData = await request.formData()
    const files: File[] = formData.getAll("files") as unknown as File[]

if (!files || files.length === 0) {
      return NextResponse.json({ error: "Missing required field: files" }, { status: 400 })
    }

const uploads = []

for (const file of files) {
      const filename = file.name
      const contentType = file.type
      const size = file.size

// Validate bucket configuration
      const bucketName = process.env.CLOUDFLARE_R2_BUCKET_NAME
      if (!bucketName) {
        console.error("Missing R2 bucket configuration")
        return NextResponse.json({ error: "Server configuration error" }, { status: 500 })
      }

// Generate a unique key
      const extension = filename.split(".").pop() || ""
      const uniqueId = crypto.randomUUID()
      const key = `uploads/${userId}/${uniqueId}.${extension}`

// Create a presigned URL for uploading
      const command = new PutObjectCommand({
        Bucket: bucketName,
        Key: key,
        ContentType: contentType,
        ACL: "public-read",
      })

const presignedUrl = await getSignedUrl(s3Client, command, { expiresIn: 3600 })
      const publicUrl = `${process.env.CLOUDFLARE_PUBLIC_URL}/${key}`

// Upload the file directly to R2
      await fetch(presignedUrl, {
        method: "PUT",
        body: file,
        headers: {
          "Content-Type": contentType,
        },
      })

uploads.push({ filename, key, publicUrl, contentType, size })
    }

// Add rate limit headers to response
    const response = NextResponse.json({ uploads })
    for (const [key, value] of limitResult.headers.entries()) {
      response.headers.set(key, value)
    }

return response
  } catch (error) {
    console.error("Error creating upload URL:", error)
    return NextResponse.json({ error: "Failed to create upload URL" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/tools/page.tsx" isEdit="true"
import type { Metadata } from "next"
import Link from "next/link"
import { Card, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { LandingNavbar } from "@/components/landing/navbar"
import { LandingFooter } from "@/components/landing/footer"
import {
  ImageIcon,
  Crop,
  FileType,
  Scissors,
  Palette,
  Layers,
  FileArchiveIcon as Compress,
  RotateCw,
  Wand2,
  Type,
  CloudyIcon as Blur,
  Contrast,
} from "lucide-react"

export const metadata: Metadata = {
  title: "Image Tools | ImageVault",
  description: "Free online tools to edit, optimize, and convert your images.",
}

export default function ToolsPage() {
  const tools = [
    {
      icon: <Crop />,
      title: "Image Resizer",
      description: "Resize and crop your images to exact dimensions.",
      href: "/tools/resize",
    },
    {
      icon: <FileType />,
      title: "Format Converter",
      description: "Convert images between JPEG, PNG, WebP, and more.",
      href: "/tools/convert",
    },
    {
      icon: <Compress />,
      title: "Image Compressor",
      description: "Compress images without losing quality.",
      href: "/tools/compress",
    },
    {
      icon: <Scissors />,
      title: "Background Remover",
      description: "Remove backgrounds from images automatically.",
      href: "/tools/background-remover",
    },
    {
      icon: <Palette />,
      title: "Color Picker",
      description: "Extract colors and create palettes from images.",
      href: "/tools/color-picker",
    },
    {
      icon: <Layers />,
      title: "Image Editor",
      description: "Edit images with filters, text, and overlays.",
      href: "/tools/editor",
    },
    {
      icon: <RotateCw />,
      title: "Image Rotator",
      description: "Rotate and flip your images.",
      href: "/tools/rotate",
    },
    {
      icon: <Wand2 />,
      title: "Image Enhancer",
      description: "Enhance image quality and fix common issues.",
      href: "/tools/enhance",
    },
    {
      icon: <Type />,
      title: "Watermark Adder",
      description: "Add a custom watermark to your images.",
      href: "/tools/watermark",
    },
    {
      icon: <Blur />,
      title: "Blur Tool",
      description: "Apply a blur effect to your images.",
      href: "/tools/blur",
    },
    {
      icon: <Contrast />,
      title: "Grayscale Converter",
      description: "Convert images to grayscale.",
      href: "/tools/grayscale",
    },
  ]

return (
    <div className="flex min-h-screen flex-col">
      <LandingNavbar />
      <main className="flex-1">
        <section className="py-12 md:py-16 lg:py-20 bg-muted/50 dark:bg-muted/10">
          <div className="container px-4 md:px-6">
            <div className="flex flex-col items-center text-center space-y-4 mb-12">
              <div className="rounded-full bg-primary/10 p-3 mb-2">
                <ImageIcon className="h-6 w-6 text-primary" />
              </div>
              <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight">Free Image Tools</h1>
              <p className="text-xl text-muted-foreground max-w-[800px]">
                Powerful online tools to edit, optimize, and convert your images. No account required.
              </p>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
              {tools.map((tool) => (
                <Card key={tool.title} className="tool-card">
                  <CardHeader>
                    <div className="tool-icon">{tool.icon}</div>
                    <CardTitle>{tool.title}</CardTitle>
                    <CardDescription>{tool.description}</CardDescription>
                  </CardHeader>
                  <CardFooter>
                    <Button asChild className="w-full">
                      <Link href={tool.href}>Use Tool</Link>
                    </Button>
                  </CardFooter>
                </Card>
              ))}
            </div>
          </div>
        </section>
      </main>
      <LandingFooter />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/tools/crop/page.tsx"
import type { Metadata } from "next"
import { CropTool } from "@/components/tools/crop-tool"
import { LandingNavbar } from "@/components/landing/navbar"
import { LandingFooter } from "@/components/landing/footer"

export const metadata: Metadata = {
  title: "Image Cropper | ImageVault Tools",
  description:
    "Crop your images to specific dimensions. Create custom sizes for your social media profiles or website.",
}

export default function CropPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <LandingNavbar />
      <main className="flex-1">
        <CropTool />
      </main>
      <LandingFooter />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/tools/crop-tool.tsx"
"use client"

import { useState, useRef, useCallback } from "react"
import { useDropzone } from "react-dropzone"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Card, CardContent } from "@/components/ui/card"
import { Upload, Download, Crop } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

export function CropTool() {
  const { toast } = useToast()
  const [image, setImage] = useState<string | null>(null)
  const [cropWidth, setCropWidth] = useState(200)
  const [cropHeight, setCropHeight] = useState(200)
  const [croppedImage, setCroppedImage] = useState<string | null>(null)
  const [isCropping, setIsCropping] = useState(false)
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const imageRef = useRef<HTMLImageElement | null>(null)

// Load image for cropping
        const img = new Image()
        img.onload = () => {
          imageRef.current = img
        }
        img.src = dataUrl
      }
      reader.readAsDataURL(file)
      setCroppedImage(null)
    }
  }, [])

const applyCrop = () => {
    if (!image || !imageRef.current || !canvasRef.current) return

setIsCropping(true)

try {
      const canvas = canvasRef.current
      const ctx = canvas.getContext("2d")

if (!ctx) {
        throw new Error("Could not get canvas context")
      }

// Set canvas dimensions
      canvas.width = cropWidth
      canvas.height = cropHeight

// Calculate crop position
      const sourceX = Math.max(0, (imageRef.current.width - cropWidth) / 2)
      const sourceY = Math.max(0, (imageRef.current.height - cropHeight) / 2)

// Draw cropped image on canvas
      ctx.drawImage(imageRef.current, sourceX, sourceY, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight)

// Get cropped image as data URL
      const croppedDataUrl = canvas.toDataURL("image/png")
      setCroppedImage(croppedDataUrl)

toast({
        title: "Image cropped successfully",
        description: "Your image has been cropped.",
      })
    } catch (error) {
      console.error("Error applying crop:", error)
      toast({
        title: "Error applying crop",
        description: "An error occurred while applying the crop. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsCropping(false)
    }
  }

const downloadCroppedImage = () => {
    if (!croppedImage) return

const link = document.createElement("a")
    link.href = croppedImage
    link.download = "cropped-image.png"
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }

return (
    <section className="py-12 md:py-16">
      <div className="container px-4 md:px-6">
        <div className="flex flex-col items-center text-center space-y-4 mb-8">
          <div className="rounded-full bg-primary/10 p-3 mb-2">
            <Crop className="h-6 w-6 text-primary" />
          </div>
          <h1 className="text-3xl md:text-4xl font-bold tracking-tight">Image Cropper</h1>
          <p className="text-xl text-muted-foreground max-w-[800px]">
            Crop your images to specific dimensions. Create custom sizes for your social media profiles or website.
          </p>
        </div>

{image && (
              <Card>
                <CardContent className="p-6 space-y-6">
                  <div className="space-y-4">
                    <h3 className="text-lg font-medium">Crop Settings</h3>

<div className="grid grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <Label htmlFor="crop-width">Width (px)</Label>
                        <Input
                          id="crop-width"
                          type="number"
                          min="1"
                          value={cropWidth}
                          onChange={(e) => setCropWidth(Number(e.target.value))}
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="crop-height">Height (px)</Label>
                        <Input
                          id="crop-height"
                          type="number"
                          min="1"
                          value={cropHeight}
                          onChange={(e) => setCropHeight(Number(e.target.value))}
                        />
                      </div>
                    </div>
                  </div>

<Button className="w-full" onClick={applyCrop} disabled={isCropping}>
                    {isCropping ? "Applying Crop..." : "Apply Crop"}
                  </Button>
                </CardContent>
              </Card>
            )}
          </div>

<div className="space-y-6">
            {croppedImage ? (
              <Card>
                <CardContent className="p-6 space-y-4">
                  <h3 className="text-lg font-medium">Cropped Image</h3>
                  <div className="relative aspect-video rounded-lg overflow-hidden border bg-muted/40">
                    <Image
                      src={croppedImage || "/placeholder.svg"}
                      alt="Cropped image"
                      fill
                      className="object-contain"
                    />
                  </div>
                  <Button className="w-full" onClick={downloadCroppedImage}>
                    <Download className="h-4 w-4 mr-2" />
                    Download Cropped Image
                  </Button>
                </CardContent>
              </Card>
            ) : (
              <div className="flex h-full items-center justify-center">
                <div className="text-center p-8">
                  <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-muted">
                    <Crop className="h-6 w-6 text-muted-foreground" />
                  </div>
                  <h3 className="mt-4 text-lg font-semibold">No Cropped Image Yet</h3>
                  <p className="mt-2 text-sm text-muted-foreground">
                    Upload an image and adjust settings to see the cropped version here.
                  </p>
                </div>
              </div>
            )}

{/* Hidden canvas for image processing */}
            <canvas ref={canvasRef} style={{ display: "none" }} />
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="app/tools/rotate/page.tsx"
import type { Metadata } from "next"
import { RotateTool } from "@/components/tools/rotate-tool"
import { LandingNavbar } from "@/components/landing/navbar"
import { LandingFooter } from "@/components/landing/footer"

export const metadata: Metadata = {
  title: "Image Rotator | ImageVault Tools",
  description: "Rotate and flip your images.",
}

export default function RotatePage() {
  return (
    <div className="flex min-h-screen flex-col">
      <LandingNavbar />
      <main className="flex-1">
        <RotateTool />
      </main>
      <LandingFooter />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/tools/rotate-tool.tsx"
"use client"

import { useState, useRef, useCallback } from "react"
import { useDropzone } from "react-dropzone"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Upload, Download, RotateCw } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

export function RotateTool() {
  const { toast } = useToast()
  const [image, setImage] = useState<string | null>(null)
  const [rotatedImage, setRotatedImage] = useState<string | null>(null)
  const [isRotating, setIsRotating] = useState(false)
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const imageRef = useRef<HTMLImageElement | null>(null)
  const [rotationAngle, setRotationAngle] = useState(90)

// Load image for rotation
        const img = new Image()
        img.onload = () => {
          imageRef.current = img
        }
        img.src = dataUrl
      }
      reader.readAsDataURL(file)
      setRotatedImage(null)
    }
  }, [])

const applyRotation = () => {
    if (!image || !imageRef.current || !canvasRef.current) return

setIsRotating(true)

try {
      const canvas = canvasRef.current
      const ctx = canvas.getContext("2d")

if (!ctx) {
        throw new Error("Could not get canvas context")
      }

// Set canvas dimensions
      canvas.width = imageRef.current.height
      canvas.height = imageRef.current.width

// Rotate the canvas
      ctx.translate(canvas.width / 2, canvas.height / 2)
      ctx.rotate((rotationAngle * Math.PI) / 180)
      ctx.translate(-canvas.height / 2, -canvas.width / 2)

// Draw rotated image on canvas
      ctx.drawImage(
        imageRef.current,
        0,
        0,
        imageRef.current.width,
        imageRef.current.height,
        0,
        0,
        canvas.height,
        canvas.width,
      )

// Get rotated image as data URL
      const rotatedDataUrl = canvas.toDataURL("image/png")
      setRotatedImage(rotatedDataUrl)

toast({
        title: "Image rotated successfully",
        description: "Your image has been rotated.",
      })
    } catch (error) {
      console.error("Error applying rotation:", error)
      toast({
        title: "Error applying rotation",
        description: "An error occurred while applying the rotation. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsRotating(false)
    }
  }

const downloadRotatedImage = () => {
    if (!rotatedImage) return

const link = document.createElement("a")
    link.href = rotatedImage
    link.download = "rotated-image.png"
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }

return (
    <section className="py-12 md:py-16">
      <div className="container px-4 md:px-6">
        <div className="flex flex-col items-center text-center space-y-4 mb-8">
          <div className="rounded-full bg-primary/10 p-3 mb-2">
            <RotateCw className="h-6 w-6 text-primary" />
          </div>
          <h1 className="text-3xl md:text-4xl font-bold tracking-tight">Image Rotator</h1>
          <p className="text-xl text-muted-foreground max-w-[800px]">Rotate your images.</p>
        </div>

{image && (
              <Card>
                <CardContent className="p-6 space-y-6">
                  <div className="space-y-4">
                    <h3 className="text-lg font-medium">Rotation Settings</h3>
                  </div>

<Button className="w-full" onClick={applyRotation} disabled={isRotating}>
                    {isRotating ? "Applying Rotation..." : "Apply Rotation"}
                  </Button>
                </CardContent>
              </Card>
            )}
          </div>

<div className="space-y-6">
            {rotatedImage ? (
              <Card>
                <CardContent className="p-6 space-y-4">
                  <h3 className="text-lg font-medium">Rotated Image</h3>
                  <div className="relative aspect-video rounded-lg overflow-hidden border bg-muted/40">
                    <Image
                      src={rotatedImage || "/placeholder.svg"}
                      alt="Rotated image"
                      fill
                      className="object-contain"
                    />
                  </div>
                  <Button className="w-full" onClick={downloadRotatedImage}>
                    <Download className="h-4 w-4 mr-2" />
                    Download Rotated Image
                  </Button>
                </CardContent>
              </Card>
            ) : (
              <div className="flex h-full items-center justify-center">
                <div className="text-center p-8">
                  <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-muted">
                    <RotateCw className="h-6 w-6 text-muted-foreground" />
                  </div>
                  <h3 className="mt-4 text-lg font-semibold">No Rotated Image Yet</h3>
                  <p className="mt-2 text-sm text-muted-foreground">Upload an image to see the rotated version here.</p>
                </div>
              </div>
            )}

{/* Hidden canvas for image processing */}
            <canvas ref={canvasRef} style={{ display: "none" }} />
          </div>
        </div>
      </div>
    </section>
  )
}</article></body></html>

About

Tags

Share

More from saikothasan

More Templates Like This

About

Tags

Share

About

Tags

Share

More from saikothasan

More Templates Like This