[V0_FILE]javascript:file="scripts/seed-database.js" isEdit="true" isMerged="true" const mongoose = require("mongoose") const bcrypt = require("bcryptjs") const dotenv = require("dotenv") const User = require("../models/User").default // Use .default for ES module import in CommonJS const BrandProfile = require("../models/BrandProfile").default const Analysis = require("../models/Analysis").default const Subscription = require("../models/Subscription").default const AdminLog = require("../models/AdminLog").default const SystemSettings = require("../models/SystemSettings").default dotenv.config({ path: ".env.local" }) const MONGODB_URI = process.env.MONGODB_URI if (!MONGODB_URI) { console.error("Please define the MONGODB_URI environment variable in .env.local") process.exit(1) } const seedDatabase = async () => { try { await mongoose.connect(MONGODB_URI) console.log("MongoDB connected for seeding.") // Clear existing data console.log("Clearing existing data...") await User.deleteMany({}) await BrandProfile.deleteMany({}) await Analysis.deleteMany({}) await Subscription.deleteMany({}) await AdminLog.deleteMany({}) await SystemSettings.deleteMany({}) console.log("Existing data cleared.") // Create Admin User const hashedPassword = await bcrypt.hash("adminpassword", 10) const adminUser = await User.create({ name: "Admin User", email: "admin@example.com", password: hashedPassword, role: "admin", plan: "enterprise", isActive: true, emailVerified: new Date(), usage: { analysesThisMonth: 0, maxAnalyses: -1, // Unlimited lastResetDate: new Date(), }, notifications: { email: true, realtime: true, }, }) console.log("Admin user created:", adminUser.email) // Create Regular User const userPassword = await bcrypt.hash("userpassword", 10) const regularUser = await User.create({ name: "Regular User", email: "user@example.com", password: userPassword, role: "user", plan: "pro", isActive: true, emailVerified: new Date(), usage: { analysesThisMonth: 15, maxAnalyses: 100, // Pro plan limit lastResetDate: new Date(), }, notifications: { email: true, realtime: true, }, }) console.log("Regular user created:", regularUser.email) // Create Free User const freeUserPassword = await bcrypt.hash("freepassword", 10) const freeUser = await User.create({ name: "Free User", email: "free@example.com", password: freeUserPassword, role: "user", plan: "free", isActive: true, emailVerified: new Date(), usage: { analysesThisMonth: 3, maxAnalyses: 5, // Free plan limit lastResetDate: new Date(), }, notifications: { email: true, realtime: true, }, }) console.log("Free user created:", freeUser.email) // Create Brand Profiles const brandProfile1 = await BrandProfile.create({ userId: regularUser._id, name: "Tech Innovators Inc.", logoUrl: "https://res.cloudinary.com/demo/image/upload/v1678901234/tech_logo.png", primaryColors: ["#007BFF", "#28A745"], secondaryColors: ["#6C757D", "#FFC107"], fonts: ["Roboto", "Open Sans"], guidelines: "Use vibrant colors for digital, muted for print. Maintain consistent spacing.", }) console.log("Brand profile 1 created:", brandProfile1.name) const brandProfile2 = await BrandProfile.create({ userId: regularUser._id, name: "Eco-Friendly Living", logoUrl: "https://res.cloudinary.com/demo/image/upload/v1678901235/eco_logo.png", primaryColors: ["#218838", "#20C997"], secondaryColors: ["#F8F9FA", "#6F42C1"], fonts: ["Montserrat", "Lato"], guidelines: "Emphasize natural tones and organic shapes. Avoid sharp edges.", }) console.log("Brand profile 2 created:", brandProfile2.name) // Create Analyses const analysis1 = await Analysis.create({ userId: regularUser._id, brandProfileId: brandProfile1._id, imageUrl: "https://res.cloudinary.com/demo/image/upload/v1678901236/design_a.png", analysisResult: { overallScore: 85, colorCompliance: { score: 90, details: { expected: brandProfile1.primaryColors, detected: ["#007BFF", "#28A745"], issues: [] }, }, typographyCompliance: { score: 80, details: { expectedFonts: brandProfile1.fonts, detectedFonts: ["Roboto", "Open Sans"], issues: [] }, }, logoPlacement: { score: 95, details: { expectedPosition: "Top Left", detectedPosition: "Top Left", issues: [] }, }, spacingAndLayout: { score: 75, details: { issues: ["Inconsistent padding around text blocks."] } }, toneAndMessaging: { score: 85, details: { expectedTone: "Professional", detectedTone: "Professional", issues: [] }, }, suggestions: ["Increase padding consistency.", "Ensure all text elements use approved fonts."], }, status: "completed", }) console.log("Analysis 1 created:", analysis1._id) const analysis2 = await Analysis.create({ userId: regularUser._id, brandProfileId: brandProfile2._id, imageUrl: "https://res.cloudinary.com/demo/image/upload/v1678901237/design_b.png", analysisResult: { overallScore: 60, colorCompliance: { score: 50, details: { expected: brandProfile2.primaryColors, detected: ["#FF0000", "#218838"], issues: ["Detected red is not a brand color."], }, }, typographyCompliance: { score: 70, details: { expectedFonts: brandProfile2.fonts, detectedFonts: ["Arial"], issues: ["Arial is not an approved font."], }, }, logoPlacement: { score: 65, details: { expectedPosition: "Bottom Right", detectedPosition: "Center", issues: ["Logo is not in the specified bottom-right position."], }, }, spacingAndLayout: { score: 60, details: { issues: ["Elements are too close together in some areas."] } }, toneAndMessaging: { score: 70, details: { expectedTone: "Organic", detectedTone: "Direct", issues: ["Messaging tone is too direct, not organic enough."], }, }, suggestions: [ "Replace red with an approved primary color.", "Change font to Montserrat or Lato.", "Adjust logo position.", "Increase spacing between elements.", "Soften messaging tone.", ], }, status: "completed", }) console.log("Analysis 2 created:", analysis2._id) const pendingAnalysis = await Analysis.create({ userId: regularUser._id, imageUrl: "https://res.cloudinary.com/demo/image/upload/v1678901238/design_c.png", status: "pending", analysisResult: {}, // Empty for pending }) console.log("Pending analysis created:", pendingAnalysis._id) // Create a simulated subscription for the regular user const subscription = await Subscription.create({ userId: regularUser._id, stripeCustomerId: "cus_mock_regular_user", stripeSubscriptionId: "sub_mock_regular_user", stripePriceId: process.env.STRIPE_PRO_PRICE_ID || "price_12345", // Use actual price ID if available stripeCurrentPeriodEnd: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000), // 30 days from now plan: "pro", status: "active", }) console.log("Subscription created for regular user:", subscription.plan) // Create Admin Logs await AdminLog.create({ timestamp: new Date(), level: "info", message: "Admin user logged in.", adminId: adminUser._id, targetType: "User", targetId: adminUser._id, metadata: { ip: "192.168.1.1" }, }) await AdminLog.create({ timestamp: new Date(Date.now() - 1000 * 60 * 5), // 5 minutes ago level: "warn", message: "Failed login attempt for user@example.com.", adminId: null, // System action targetType: "Authentication", targetId: "user@example.com", metadata: { ip: "203.0.113.45" }, }) await AdminLog.create({ timestamp: new Date(Date.now() - 1000 * 60 * 60 * 24), // 1 day ago level: "error", message: "Cloudinary upload failed due to invalid credentials.", adminId: adminUser._id, targetType: "Image", targetId: "upload_attempt_123", metadata: { error: "API Key invalid" }, }) console.log("Admin logs created.") // Create System Settings (if not already existing, getSettings handles upsert) const systemSettings = await SystemSettings.getSettings() systemSettings.general.appName = "Brand Guardian AI" systemSettings.general.appDescription = "AI-powered brand compliance for your designs." systemSettings.general.contactEmail = "support@brandguardian.ai" systemSettings.general.websiteUrl = "https://www.brandguardian.ai" systemSettings.ai.geminiApiKey = "YOUR_GEMINI_API_KEY_HERE" // Placeholder systemSettings.ai.enableAiSuggestions = true systemSettings.ai.enableBrandProfileExtraction = true systemSettings.integrations.stripeEnabled = true systemSettings.integrations.adobeExpressEnabled = true systemSettings.notifications.enableEmailNotifications = true systemSettings.notifications.enableRealtimeNotifications = true systemSettings.admin.adminEmail = "admin@brandguardian.ai" systemSettings.admin.enableAdminLogs = true await systemSettings.save() console.log("System settings initialized/updated.") console.log("Database seeding complete!") } catch (error) { console.error("Database seeding failed:", error) process.exit(1) } finally { await mongoose.disconnect() console.log("MongoDB disconnected.") } } seedDatabase() [V0_FILE]javascript:file="scripts/setup-environment.js" isEdit="true" isMerged="true" const fs = require("fs") const path = require("path") const readline = require("readline") const envPath = path.resolve(process.cwd(), ".env.local") const envExamplePath = path.resolve(process.cwd(), ".env.local.example") const rl = readline.createInterface({ input: process.stdin, output: process.stdout, }) const questions = [ { key: "MONGODB_URI", prompt: "Enter your MongoDB Connection URI (e.g., mongodb+srv://user:pass@cluster.mongodb.net/db_name):", default: "mongodb://localhost:27017/brandguardianai", }, { key: "NEXTAUTH_SECRET", prompt: "Enter a strong secret for NextAuth (e.g., generated with `openssl rand -base64 32`):", default: "your_nextauth_secret_here", }, { key: "NEXTAUTH_URL", prompt: "Enter your NextAuth URL (e.g., http://localhost:3000 or your Vercel deployment URL):", default: "http://localhost:3000", }, { key: "NEXTAUTH_JWT_SECRET", prompt: "Enter a strong JWT secret for NextAuth (can be same as NEXTAUTH_SECRET):", default: "your_nextauth_jwt_secret_here", }, { key: "GOOGLE_CLIENT_ID", prompt: "Enter your Google OAuth Client ID (optional, leave blank to skip):", default: "", }, { key: "GOOGLE_CLIENT_SECRET", prompt: "Enter your Google OAuth Client Secret (optional, leave blank to skip):", default: "", }, { key: "GITHUB_CLIENT_ID", prompt: "Enter your GitHub OAuth Client ID (optional, leave blank to skip):", default: "", }, { key: "GITHUB_CLIENT_SECRET", prompt: "Enter your GitHub OAuth Client Secret (optional, leave blank to skip):", default: "", }, { key: "CLOUDINARY_CLOUD_NAME", prompt: "Enter your Cloudinary Cloud Name:", default: "", }, { key: "CLOUDINARY_API_KEY", prompt: "Enter your Cloudinary API Key:", default: "", }, { key: "CLOUDINARY_API_SECRET", prompt: "Enter your Cloudinary API Secret:", default: "", }, { key: "GEMINI_API_KEY", prompt: "Enter your Google Gemini API Key (for AI analysis):", default: "", }, { key: "STRIPE_SECRET_KEY", prompt: "Enter your Stripe Secret Key (sk_live_... or sk_test_...):", default: "", }, { key: "STRIPE_WEBHOOK_SECRET", prompt: "Enter your Stripe Webhook Secret (whsec_...):", default: "", }, { key: "STRIPE_PRO_PRICE_ID", prompt: "Enter your Stripe Price ID for the PRO plan (e.g., price_123xyz):", default: "", }, { key: "STRIPE_ENTERPRISE_PRICE_ID", prompt: "Enter your Stripe Price ID for the ENTERPRISE plan (e.g., price_456abc):", default: "", }, { key: "EMAIL_SERVER_HOST", prompt: "Enter your Email Server Host (e.g., smtp.sendgrid.net):", default: "", }, { key: "EMAIL_SERVER_PORT", prompt: "Enter your Email Server Port (e.g., 587):", default: "587", }, { key: "EMAIL_SERVER_USER", prompt: "Enter your Email Server User (e.g., apikey):", default: "", }, { key: "EMAIL_SERVER_PASSWORD", prompt: "Enter your Email Server Password:", default: "", }, { key: "EMAIL_FROM", prompt: 'Enter the "From" email address (e.g., noreply@yourdomain.com):', default: "", }, { key: "NEXT_PUBLIC_APP_URL", prompt: "Enter the public URL of your app (e.g., http://localhost:3000 or https://your-app.vercel.app):", default: "http://localhost:3000", }, { key: "ENABLE_AI_SUGGESTIONS", prompt: "Enable AI Suggestions (true/false):", default: "true", }, { key: "ENABLE_BRAND_PROFILE_EXTRACTION", prompt: "Enable Brand Profile Extraction (true/false):", default: "true", }, ] async function askQuestion(question) { return new Promise((resolve) => { rl.question( `${question.prompt} (${question.default ? `Default: ${question.default}` : "Required"}): `, (answer) => { resolve(answer.trim() || question.default) }, ) }) } async function setupEnvironment() { console.log("Setting up your .env.local file...") console.log("Press Enter to accept default values or type your own.") let envContent = "" for (const q of questions) { const answer = await askQuestion(q) envContent += `${q.key}=${answer}\n` } fs.writeFileSync(envPath, envContent) console.log(`\n.env.local file created successfully at ${envPath}`) console.log("Remember to restart your development server if it was running.") // Optionally, copy .env.local.example if it doesn't exist if (!fs.existsSync(envExamplePath)) { fs.writeFileSync(envExamplePath, envContent) // Or a stripped-down version console.log(`Also created .env.local.example at ${envExamplePath}`) } rl.close() } setupEnvironment() [V0_FILE]javascript:file="scripts/migrate-database.js" isEdit="true" isMerged="true" const mongoose = require("mongoose") const dotenv = require("dotenv") const User = require("../models/User").default // Use .default for ES module import in CommonJS const Subscription = require("../models/Subscription").default const SystemSettings = require("../models/SystemSettings").default const AdminLog = require("../models/AdminLog").default dotenv.config({ path: ".env.local" }) const MONGODB_URI = process.env.MONGODB_URI if (!MONGODB_URI) { console.error("Please define the MONGODB_URI environment variable in .env.local") process.exit(1) } const runMigrations = async () => { try { await mongoose.connect(MONGODB_URI) console.log("MongoDB connected for migrations.") // Migration 1: Add default usage and notifications to existing users console.log("Running Migration 1: Adding default usage and notifications to existing users...") const result1 = await User.updateMany( { $or: [ { "usage.analysesThisMonth": { $exists: false } }, { "usage.maxAnalyses": { $exists: false } }, { "usage.lastResetDate": { $exists: false } }, { "notifications.email": { $exists: false } }, { "notifications.realtime": { $exists: false } }, { plan: { $exists: false } }, // Also ensure plan is set ], }, { $set: { "usage.analysesThisMonth": 0, "usage.maxAnalyses": 5, // Default for free plan "usage.lastResetDate": new Date(), "notifications.email": true, "notifications.realtime": true, plan: "free", // Default plan }, }, ) console.log(`Migration 1 completed. Matched: ${result1.matchedCount}, Modified: ${result1.modifiedCount} users.`) // Migration 2: Ensure all users have a 'role' field, default to 'user' console.log('Running Migration 2: Ensuring all users have a "role" field...') const result2 = await User.updateMany({ role: { $exists: false } }, { $set: { role: "user" } }) console.log(`Migration 2 completed. Matched: ${result2.matchedCount}, Modified: ${result2.modifiedCount} users.`) // Migration 3: Add stripeCustomerId to User model and create/update Subscription model console.log("Running Migration 3: Adding stripeCustomerId to User and managing Subscriptions...") // This migration would typically involve fetching existing Stripe subscriptions // and linking them to users, or ensuring users created via OAuth have a customer ID. // For this example, we'll just ensure the field exists and log. const result3 = await User.updateMany( { stripeCustomerId: { $exists: false } }, { $set: { stripeCustomerId: null } }, // Set to null initially if not present ) console.log( `Migration 3 (User stripeCustomerId) completed. Matched: ${result3.matchedCount}, Modified: ${result3.modifiedCount} users.`, ) // Migration 4: Initialize SystemSettings document if it doesn't exist console.log("Running Migration 4: Initializing SystemSettings...") const settings = await SystemSettings.getSettings() // This method handles upsert console.log("SystemSettings document ensured:", settings._id) // Migration 5: Ensure AdminLog targetId can be mixed type console.log("Running Migration 5: Ensuring AdminLog targetId can be mixed type...") // This is more of a schema update, but if there were old logs with non-ObjectId strings // that caused issues, this would fix it. Mongoose handles schema changes well, // but explicit migration might be needed for data transformation. // For now, just a log to acknowledge. console.log("AdminLog targetId schema type checked.") console.log("All migrations completed successfully!") } catch (error) { console.error("Database migration failed:", error) process.exit(1) } finally { await mongoose.disconnect() console.log("MongoDB disconnected.") } } runMigrations() [V0_FILE]javascript:file="scripts/setup-adobe-credentials.js" isEdit="true" isMerged="true" const fs = require("fs") const path = require("path") const readline = require("readline") const manifestPath = path.resolve(process.cwd(), "public/icons/manifest.json") const rl = readline.createInterface({ input: process.stdin, output: process.stdout, }) async function askQuestion(prompt, defaultValue) { return new Promise((resolve) => { rl.question(`${prompt} (Default: ${defaultValue}): `, (answer) => { resolve(answer.trim() || defaultValue) }) }) } async function setupAdobeCredentials() { console.log("Setting up Adobe Express Add-on manifest.json...") console.log("This script will update the `entry` and `icon.src` URLs in your manifest.json.") let manifest try { manifest = JSON.parse(fs.readFileSync(manifestPath, "utf8")) } catch (error) { console.error(`Error reading manifest.json at ${manifestPath}:`, error.message) console.error("Please ensure public/icons/manifest.json exists and is valid JSON.") rl.close() process.exit(1) } const currentEntry = manifest.ui.entry const currentIconSrc = manifest.ui.icon.src const newAppUrl = await askQuestion( "Enter the public URL of your deployed Brand Guardian AI app (e.g., https://your-app.vercel.app):", currentEntry.split("/adobe-express")[0] || "https://brand-guardian-ai.vercel.app", ) manifest.ui.entry = `${newAppUrl}/adobe-express` manifest.ui.icon.src = `${newAppUrl}/icons/icon-24x24.png` // Assuming icon path try { fs.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2)) console.log(`\nmanifest.json updated successfully at ${manifestPath}`) console.log(`Updated entry URL to: ${manifest.ui.entry}`) console.log(`Updated icon source to: ${manifest.ui.icon.src}`) console.log("\nRemember to re-bundle and re-upload your add-on to Adobe Express Developer Console.") } catch (error) { console.error(`Error writing manifest.json:`, error.message) process.exit(1) } finally { rl.close() } } setupAdobeCredentials() [V0_FILE]javascript:file="scripts/validate-manifest.js" isEdit="true" isMerged="true" const fs = require("fs") const path = require("path") const manifestPath = path.resolve(process.cwd(), "public/icons/manifest.json") function validateManifest() { console.log(`Validating manifest.json at: ${manifestPath}`) let manifest try { const manifestContent = fs.readFileSync(manifestPath, "utf8") manifest = JSON.parse(manifestContent) } catch (error) { console.error(`Error: Could not read or parse manifest.json. Please ensure it's valid JSON.`) console.error(error.message) process.exit(1) } const errors = [] // Basic structure checks if (!manifest.id) errors.push('Missing "id" field.') if (!manifest.name) errors.push('Missing "name" field.') if (!manifest.host || !manifest.host.app || !manifest.host.minVersion) { errors.push('Missing or incomplete "host" field (requires app and minVersion).') } if (!manifest.ui || !manifest.ui.entry || !manifest.ui.icon || !manifest.ui.icon.src) { errors.push('Missing or incomplete "ui" field (requires entry, icon, and icon.src).') } if (!manifest.permissions || !Array.isArray(manifest.permissions) || manifest.permissions.length === 0) { errors.push('Missing or empty "permissions" array.') } // URL format checks if (manifest.ui && manifest.ui.entry && !manifest.ui.entry.startsWith("https://")) { errors.push(`"ui.entry" URL must start with "https://". Current: ${manifest.ui.entry}`) } if (manifest.ui && manifest.ui.icon && manifest.ui.icon.src && !manifest.ui.icon.src.startsWith("https://")) { errors.push(`"ui.icon.src" URL must start with "https://". Current: ${manifest.ui.icon.src}`) } // Specific permission checks (example, add more as needed) const requiredPermissions = ["document:read", "document:write", "document:export"] requiredPermissions.forEach((perm) => { if (!manifest.permissions.includes(perm)) { errors.push(`Missing required permission: "${perm}".`) } }) if (errors.length > 0) { console.error("\nManifest validation failed with the following errors:") errors.forEach((err, index) => console.error(`${index + 1}. ${err}`)) process.exit(1) } else { console.log("\nManifest validation successful! 🎉") console.log("Add-on ID:", manifest.id) console.log("Add-on Name:", manifest.name) console.log("Entry URL:", manifest.ui.entry) console.log("Icon URL:", manifest.ui.icon.src) } } validateManifest() [V0_FILE]json:file="package.json" isEdit="true" isMerged="true" { "name": "brand-guardian-ai", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint", "test": "jest", "test:watch": "jest --watch", "seed": "node scripts/seed-database.js", "migrate": "node scripts/migrate-database.js", "setup-env": "node scripts/setup-environment.js", "setup-adobe": "node scripts/setup-adobe-credentials.js", "generate-icons": "node scripts/generate-icons.js", "validate-manifest": "node scripts/validate-manifest.js" }, "dependencies": { "@ai-sdk/google": "^0.0.10", "@ai-sdk/openai": "^0.0.16", "@auth/mongodb-adapter": "^3.10.0", "@radix-ui/react-avatar": "^1.1.0", "@radix-ui/react-checkbox": "^1.1.0", "@radix-ui/react-dialog": "^1.1.0", "@radix-ui/react-dropdown-menu": "^2.0.0", "@radix-ui/react-label": "^2.0.0", "@radix-ui/react-progress": "^1.1.0", "@radix-ui/react-radio-group": "^1.1.0", "@radix-ui/react-scroll-area": "^1.1.0", "@radix-ui/react-select": "^2.1.0", "@radix-ui/react-separator": "^1.1.0", "@radix-ui/react-slider": "^1.1.2", "@radix-ui/react-switch": "^1.1.0", "@radix-ui/react-tabs": "^1.1.0", "@radix-ui/react-toast": "^1.1.5", "ai": "^3.1.26", "bcryptjs": "^2.4.3", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "cloudinary": "^2.2.0", "date-fns": "^3.6.0", "dotenv": "^16.4.5", "lucide-react": "^0.395.0", "lru-cache": "^10.2.2", "mongodb": "^6.7.0", "mongoose": "^8.4.1", "next": "14.2.3", "next-auth": "^5.0.0-beta.19", "next-themes": "^0.3.0", "react": "^18.3.1", "react-dom": "^18.3.1", "recharts": "^2.12.7", "stripe": "^15.10.0", "tailwind-merge": "^2.3.0", "tailwindcss-animate": "^1.0.7", "zod": "^3.23.8" }, "devDependencies": { "@testing-library/jest-dom": "^6.4.6", "@testing-library/react": "^16.0.0", "@types/bcryptjs": "^2.4.6", "@types/jest": "^29.5.12", "@types/node": "^20.14.2", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "eslint": "^8.57.0", "eslint-config-next": "14.2.3", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", "postcss": "^8.4.38", "tailwindcss": "^3.4.4", "ts-node": "^10.9.2", "typescript": "^5.4.5" } } [V0_FILE]typescriptreact:file="components/ui/table.tsx" isEdit="true" isMerged="true" "use client" import * as React from "react" import { cn } from "@/lib/utils" const Table = React.forwardRef< HTMLTableElement, React.HTMLAttributes >(({ className, ...props }, ref) => (

)) Table.displayName = "Table" const TableHeader = React.forwardRef< HTMLTableSectionElement, React.HTMLAttributes >(({ className, ...props }, ref) => ( )) TableHeader.displayName = "TableHeader" const TableBody = React.forwardRef< HTMLTableSectionElement, React.HTMLAttributes >(({ className, ...props }, ref) => ( )) TableBody.displayName = "TableBody" const TableFooter = React.forwardRef< HTMLTableSectionElement, React.HTMLAttributes >(({ className, ...props }, ref) => ( tr]:last:border-b-0", className )} {...props} /> )) TableFooter.displayName = "TableFooter" const TableRow = React.forwardRef< HTMLTableRowElement, React.HTMLAttributes >(({ className, ...props }, ref) => ( )) TableRow.displayName = "TableRow" const TableHead = React.forwardRef< HTMLTableCellElement, React.ThHTMLAttributes >(({ className, ...props }, ref) => (

)) TableCaption.displayName = "TableCaption" export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, } [V0_FILE]typescriptreact:file="components/ui/dialog.tsx" isEdit="true" isMerged="true" "use client" import * as React from "react" import * as DialogPrimitive from "@radix-ui/react-dialog" import { X } from 'lucide-react' import { cn } from "@/lib/utils" const Dialog = DialogPrimitive.Root const DialogTrigger = DialogPrimitive.Trigger const DialogPortal = DialogPrimitive.Portal const DialogClose = DialogPrimitive.Close const DialogOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogOverlay.displayName = DialogPrimitive.Overlay.displayName const DialogContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} Close )) DialogContent.displayName = DialogPrimitive.Content.displayName const DialogHeader = ({ className, ...props }: React.HTMLAttributes) => (
) DialogHeader.displayName = "DialogHeader" const DialogFooter = ({ className, ...props }: React.HTMLAttributes) => (
) DialogFooter.displayName = "DialogFooter" const DialogTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogTitle.displayName = DialogPrimitive.Title.displayName const DialogDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogDescription.displayName = DialogPrimitive.Description.displayName export { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, } [V0_FILE]typescriptreact:file="components/ui/checkbox.tsx" isEdit="true" isMerged="true" "use client" import * as React from "react" import * as CheckboxPrimitive from "@radix-ui/react-checkbox" import { Check } from 'lucide-react' import { cn } from "@/lib/utils" const Checkbox = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Checkbox.displayName = CheckboxPrimitive.Root.displayName export { Checkbox } [V0_FILE]typescriptreact:file="components/ui/radio-group.tsx" isEdit="true" isMerged="true" "use client" import * as React from "react" import * as RadioGroupPrimitive from "@radix-ui/react-radio-group" import { Circle } from 'lucide-react' import { cn } from "@/lib/utils" const RadioGroup = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => { return ( ) }) RadioGroup.displayName = RadioGroupPrimitive.Root.displayName const RadioGroupItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => { return ( ) }) RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName export { RadioGroup, RadioGroupItem } [V0_FILE]typescriptreact:file="components/ui/slider.tsx" isEdit="true" isMerged="true" "use client" import * as React from "react" import * as SliderPrimitive from "@radix-ui/react-slider" import { cn } from "@/lib/utils" const Slider = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Slider.displayName = SliderPrimitive.Root.displayName export { Slider } [V0_FILE]typescriptreact:file="components/ui/scroll-area.tsx" isEdit="true" isMerged="true" "use client" import * as React from "react" import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area" import { cn } from "@/lib/utils" const ScrollArea = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} )) ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName const ScrollBar = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, orientation = "vertical", ...props }, ref) => ( )) ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName export { ScrollArea, ScrollBar } [V0_FILE]markdown:file="README.md" isFixed="true" isEdit="true" isMerged="true" # Brand Guardian AI Brand Guardian AI is an AI-powered platform designed to help businesses maintain brand consistency across all their visual content. It allows users to define their brand guidelines (colors, fonts, logos, tone) and then uses AI to analyze designs, providing compliance scores and suggestions for improvement. ## Features * **Brand Profile Management:** Create and manage multiple brand profiles with specific guidelines. * **AI-Powered Analysis:** Upload design images and get instant feedback on brand compliance (colors, typography, logo placement, spacing, tone). * **Detailed Reports:** Receive comprehensive analysis reports with scores and actionable suggestions. * **User Authentication:** Secure user accounts with credentials and OAuth (Google, GitHub). * **Role-Based Access Control:** Admin and regular user roles with different permissions. * **Subscription Management:** Integrate with Stripe for premium features and subscription plans. * **Real-time Notifications:** Get updates on analysis completion and other important events. * **Admin Dashboard:** Monitor system usage, manage users, view analytics, and logs. * **Adobe Express Integration (Planned/Partial):** Future integration for direct design analysis within Adobe Express. ## Technologies Used * **Next.js 14 (App Router):** React framework for building full-stack applications. * **React:** Frontend library for building user interfaces. * **TypeScript:** Type-safe JavaScript. * **Tailwind CSS:** Utility-first CSS framework for styling. * **Shadcn/ui:** Reusable UI components built with Radix UI and Tailwind CSS. * **NextAuth.js v5 (Auth.js):** Flexible authentication for Next.js applications. * **MongoDB & Mongoose:** NoSQL database and ODM for data storage. * **Cloudinary:** Cloud-based image and video management. * **Google Gemini API:** For AI-powered analysis and suggestions. * **Stripe:** For payment processing and subscription management. * **Server-Sent Events (SSE):** For real-time notifications. * **Jest & React Testing Library:** For unit and integration testing. ## Getting Started Follow the steps in [DEPLOYMENT_GUIDE.md](./docs/DEPLOYMENT_GUIDE.md) to set up and run the project locally or deploy it. ## API Reference Refer to [API_REFERENCE.md](./docs/API_REFERENCE.md) for detailed information on the available API endpoints. ## Project Structure \`\`\` . ├── app/ # Next.js App Router pages, layouts, and API routes │ ├── (auth)/ # Authentication related pages (signin, signup, etc.) │ ├── (dashboard)/ # User dashboard pages │ ├── admin/ # Admin dashboard pages │ ├── api/ # API routes (Next.js API Routes) │ │ ├── auth/ # NextAuth.js API routes │ │ ├── admin/ # Admin specific API routes │ │ ├── analyses/ # Analysis related API routes │ │ ├── brand-profiles/ # Brand profile API routes │ │ ├── notifications/ # Real-time notification stream │ │ ├── stripe/ # Stripe webhook and portal routes │ │ └── ... │ ├── adobe-express/ # Pages for Adobe Express add-on │ ├── analyzer/ # Design analysis page │ ├── brand-profile/ # Brand profile management page │ ├── dashboard/ # User dashboard │ ├── demo/ # Demo page │ ├── pricing/ # Pricing page │ └── layout.tsx # Root layout ├── components/ # Reusable React components │ ├── auth/ # Authentication related components │ ├── layout/ # Header, Footer │ ├── premium/ # Premium feature components │ ├── providers/ # Context providers (Auth, Notifications) │ ├── realtime/ # Real-time notification components │ ├── ui/ # shadcn/ui components (copied and customizable) │ └── adobe-express/ # Adobe Express add-on specific components ├── lib/ # Utility functions and helpers │ ├── adobe-auth.ts # Adobe Express authentication helpers │ ├── adobe-express.ts # Adobe Express API interactions │ ├── adobe-express-hooks.ts# React hooks for Adobe Express │ ├── adobe-permissions.ts # Adobe Express permission helpers │ ├── admin-logger.ts # Admin activity logging │ ├── auth.ts # NextAuth.js configuration and helpers │ ├── auth-mongodb.ts # MongoDB client for NextAuth.js adapter │ ├── cache.ts # Caching utilities │ ├── cloudinary.ts # Cloudinary integration │ ├── email.ts # Email sending utilities │ ├── gemini.ts # Google Gemini AI integration │ ├── mongodb.ts # MongoDB connection │ ├── rate-limit.ts # API rate limiting │ ├── realtime.ts # Real-time notification logic (SSE) │ ├── stripe.ts # Stripe API interactions │ └── utils.ts # General utility functions (cn, etc.) ├── models/ # Mongoose schemas for database models │ ├── AdminLog.ts │ ├── Analysis.ts │ ├── BrandProfile.ts │ ├── Subscription.ts │ ├── SystemSettings.ts │ └── User.ts ├── public/ # Static assets │ ├── icons/ # PWA icons │ └── manifest.json # PWA manifest ├── scripts/ # Node.js scripts for development/maintenance │ ├── generate-icons.js │ ├── migrate-database.js │ ├── seed-database.js │ ├── setup-adobe-credentials.js │ ├── setup-environment.js │ └── validate-manifest.js ├── types/ # TypeScript custom type declarations │ ├── global.d.ts │ └── next-auth.d.ts ├── .env.example # Example environment variables ├── .env.local.example # Example local environment variables ├── jest.config.js # Jest configuration ├── jest.setup.js # Jest setup file ├── next.config.mjs # Next.js configuration ├── postcss.config.js # PostCSS configuration ├── tailwind.config.js # Tailwind CSS configuration ├── tsconfig.json # TypeScript configuration └── middleware.ts # Next.js middleware for authentication and routing \`\`\` ## Contributing Contributions are welcome! Please see our [contribution guidelines](CONTRIBUTING.md) (if available) for more information. ## License This project is licensed under the MIT License. [V0_FILE]markdown:file="docs/DEPLOYMENT_GUIDE.md" isEdit="true" isMerged="true" # Deployment Guide for Brand Guardian AI This guide provides instructions for deploying the Brand Guardian AI application to a production environment, specifically focusing on Vercel, given its seamless integration with Next.js. ## Prerequisites * A Vercel account. * A MongoDB Atlas cluster (or another hosted MongoDB solution). * Accounts for any third-party services you are using (Google OAuth, GitHub OAuth, Cloudinary, Google Gemini, Stripe, Adobe Express). * Domain name (optional, but recommended for production). ## 1. Prepare Your Environment Variables In a production environment, you should set your environment variables directly in your deployment platform (e.g., Vercel Dashboard). **Do not commit your `.env.local` file to your repository.** Go to your Vercel project settings and add the following environment variables: * **`MONGODB_URI`**: Your MongoDB Atlas connection string. Ensure it's accessible from Vercel's servers. * **`NEXTAUTH_SECRET`**: A strong, randomly generated secret. Use `openssl rand -base64 32` to generate one. * **`NEXTAUTH_URL`**: The public URL of your deployed application (e.g., `https://your-app.vercel.app` or `https://yourdomain.com`). Vercel automatically sets `VERCEL_URL` which can be used, but explicitly setting `NEXTAUTH_URL` is good practice. * **`NEXTAUTH_JWT_SECRET`**: Another strong, randomly generated secret for JWTs. * **`GOOGLE_CLIENT_ID`**, **`GOOGLE_CLIENT_SECRET`**: If using Google OAuth. * **`GITHUB_CLIENT_ID`**, **`GITHUB_CLIENT_SECRET`**: If using GitHub OAuth. * **`CLOUDINARY_CLOUD_NAME`**, **`CLOUDINARY_API_KEY`**, **`CLOUDINARY_API_SECRET`**: For Cloudinary image storage. * **`GEMINI_API_KEY`**: Your Google Gemini API key. * **`STRIPE_SECRET_KEY`**: Your Stripe secret key (starts with `sk_live_`). * **`STRIPE_WEBHOOK_SECRET`**: The secret for your Stripe webhook endpoint. * **`STRIPE_PRO_PRICE_ID`**: The Price ID for your Pro plan in Stripe. * **`STRIPE_ENTERPRISE_PRICE_ID`**: The Price ID for your Enterprise plan in Stripe. * **`NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY`**: Your Stripe publishable key (starts with `pk_live_`). This one needs to be prefixed with `NEXT_PUBLIC_` as it's used on the client-side. * **`NEXT_PUBLIC_APP_URL`**: The public URL of your application. This is used for things like password reset links in emails and Adobe Express redirects. * **`EMAIL_SERVER_HOST`**, **`EMAIL_SERVER_PORT`**, **`EMAIL_SERVER_USER`**, **`EMAIL_SERVER_PASSWORD`**, **`EMAIL_FROM`**: For sending emails (e.g., password resets, notifications). * **`ADOBE_EXPRESS_CLIENT_ID`**, **`ADOBE_EXPRESS_CLIENT_SECRET`**, **`ADOBE_EXPRESS_REDIRECT_URI`**: For Adobe Express integration. The `REDIRECT_URI` must match the one configured in your Adobe Developer Console and should be your deployed app's URL followed by `/api/adobe-express/callback`. * **`ADOBE_EXPRESS_WEBHOOK_SECRET`**: A secret for verifying Adobe Express webhooks. ## 2. Connect to Vercel 1. **Create a New Project on Vercel:** * Go to your Vercel Dashboard. * Click "Add New..." -> "Project". * Import your Git repository (GitHub, GitLab, Bitbucket). 2. **Configure Project Settings:** * Vercel will automatically detect Next.js. * Ensure the "Root Directory" is correct if your project is in a monorepo. * Add all the environment variables listed in Step 1 under "Environment Variables" in your project settings. 3. **Deploy:** * Once configured, Vercel will automatically build and deploy your application. Subsequent pushes to your connected Git branch will trigger new deployments. ## 3. Configure Webhooks (Stripe & Adobe Express) For features like subscription management (Stripe) and real-time updates from Adobe Express, you need to configure webhooks. ### Stripe Webhook 1. **Go to your Stripe Dashboard:** Navigate to `Developers` -> `Webhooks`. 2. **Add an Endpoint:** * Click "Add endpoint". * **Endpoint URL:** `https://your-app-url.com/api/stripe/webhook` (replace `your-app-url.com` with your deployed application's URL). * **Events to send:** Select the events relevant to your application, such as: * `checkout.session.completed` * `customer.subscription.created` * `customer.subscription.updated` * `customer.subscription.deleted` * `invoice.payment_succeeded` * `invoice.payment_failed` * Click "Add endpoint". 3. **Get Webhook Secret:** After creating the endpoint, Stripe will provide a "Signing secret" (starts with `whsec_`). Copy this secret and add it to your Vercel environment variables as `STRIPE_WEBHOOK_SECRET`. ### Adobe Express Webhook (Optional) If you've configured webhooks in your Adobe Express add-on for real-time updates (e.g., when an asset is saved), you'll need to set up the endpoint. The exact setup depends on how you've configured webhooks within Adobe's ecosystem. 1. **Configure in Adobe Developer Console:** Ensure your Adobe Express application is configured to send webhooks to `https://your-app-url.com/api/adobe-express/webhook`. 2. **Set `ADOBE_EXPRESS_WEBHOOK_SECRET`:** This secret is defined by you in your Adobe Express add-on configuration and should be added to your Vercel environment variables. ## 4. Database Migrations (if applicable) If you have database migration scripts (e.g., `scripts/migrate-database.js`), you might need to run them manually or set up a Vercel Build Command to execute them. For simple schema changes, Mongoose's flexible schema might handle it, but for more complex migrations, consider: * **Manual Execution:** Connect to your production MongoDB Atlas database using a tool like MongoDB Compass or a Node.js script run locally or on a secure server. * **Vercel Build Command (Advanced):** For automated migrations, you could add a command to your Vercel project's "Build & Development Settings" -> "Build Command" like `npm run build && npm run migrate`. Be cautious with this approach, as migrations should ideally be idempotent and carefully managed. ## 5. Monitoring and Logging * **Vercel Logs:** Use Vercel's built-in logging to monitor your application's serverless functions and API routes. * **Admin Logs:** The application includes an admin logging system (`/admin/logs`) that captures important events. * **Third-party Monitoring:** Integrate with services like Sentry, Datadog, or New Relic for more advanced error tracking and performance monitoring. ## 6. Post-Deployment Checks After deployment, verify the following: * **Application Loads:** Access your `NEXTAUTH_URL` and ensure the homepage loads without errors. * **Authentication:** Test user sign-up, sign-in, and password reset flows. * **Protected Routes:** Ensure protected routes (`/dashboard`, `/analyzer`, `/admin`) require authentication and role-based access works correctly. * **API Endpoints:** Test key API endpoints (e.g., `/api/dashboard/stats`, `/api/analyses`). * **Stripe Integration:** Test the checkout flow and verify that subscriptions are created/updated correctly in Stripe and your database. * **Cloudinary Uploads:** Test image uploads if applicable. * **Gemini AI Integration:** Verify that AI analysis features are working. * **Adobe Express Integration:** If deployed as an add-on, ensure it functions correctly within Adobe Express. By following these steps, you should have a successfully deployed Brand Guardian AI application. \`\`\` \`\`\` \`\`\` \`\`\` [V0_FILE]markdown:file="docs/API_REFERENCE.md" isFixed="true" isEdit="true" isMerged="true" # Brand Guardian AI API Reference This document provides a comprehensive reference for the RESTful API endpoints available in the Brand Guardian AI application. ## Base URL The base URL for all API endpoints is `/api`. ## Authentication All protected endpoints require authentication. The application uses NextAuth.js, which handles session management via cookies. For API calls from external clients, you would typically use session cookies obtained after a successful login. ## Error Handling API responses follow a consistent structure for success and error states: **Success Response:** \`\`\`json { "success": true, "data": { // ... resource data ... }, "message": "Optional success message" } \`\`\` **Error Response:** \`\`\`json { "success": false, "error": { "message": "Error description", "code": "ERROR_CODE" // Optional, e.g., "VALIDATION_ERROR", "NOT_FOUND", "UNAUTHORIZED" } } \`\`\` **Common HTTP Status Codes:** * `200 OK`: Request successful. * `201 Created`: Resource successfully created. * `204 No Content`: Request successful, no content to return (e.g., DELETE). * `400 Bad Request`: Invalid request payload or parameters. * `401 Unauthorized`: Authentication required or failed. * `403 Forbidden`: Authenticated, but not authorized to access the resource. * `404 Not Found`: Resource not found. * `405 Method Not Allowed`: HTTP method not supported for the endpoint. * `429 Too Many Requests`: Rate limit exceeded. * `500 Internal Server Error`: Server-side error. --- ## 1. Authentication Endpoints These endpoints are handled by NextAuth.js. * **`POST /api/auth/signin`** * **Description:** Handles user sign-in. * **Request Body:** `{ email: string, password?: string, provider?: string }` * **Response:** Session object on success. * **`POST /api/auth/signup`** * **Description:** Registers a new user. * **Request Body:** `{ name: string, email: string, password: string }` * **Response:** `{ success: true, message: string }` * **`POST /api/auth/forgot-password`** * **Description:** Initiates password reset by sending an email. * **Request Body:** `{ email: string }` * **Response:** `{ success: true, message: string }` * **`POST /api/auth/reset-password`** * **Description:** Resets user password using a token. * **Request Body:** `{ token: string, email: string, newPassword: string }` * **Response:** `{ success: true, message: string }` * **`GET /api/auth/session`** * **Description:** Retrieves the current user session. * **Response:** Session object. * **`POST /api/auth/signout`** * **Description:** Logs out the current user. --- ## 2. User Management (Admin Only) These endpoints require the authenticated user to have an `admin` role. * **`GET /api/admin/users`** * **Description:** Retrieves a list of all users. * **Response:** `User[]` * **`GET /api/admin/users/[id]`** * **Description:** Retrieves details of a specific user. * **Parameters:** `id` (string) - The ID of the user. * **Response:** `User` object. * **`PUT /api/admin/users/[id]`** * **Description:** Updates a user's information (e.g., role, subscription status). * **Parameters:** `id` (string) - The ID of the user. * **Request Body:** Partial `User` object. * **Response:** Updated `User` object. * **`DELETE /api/admin/users/[id]`** * **Description:** Deletes a user. * **Parameters:** `id` (string) - The ID of the user. * **Response:** `{ success: true, message: string }` --- ## 3. Brand Profile Management * **`GET /api/brand-profiles`** * **Description:** Retrieves all brand profiles for the authenticated user. * **Response:** `BrandProfile[]` * **`POST /api/brand-profiles`** * **Description:** Creates a new brand profile. * **Request Body:** `{ name: string, primaryColor: string, secondaryColor: string, fontPairings: string, logoGuidelines: string, toneOfVoice: string, ... }` * **Response:** Newly created `BrandProfile` object. * **`GET /api/brand-profiles/[id]`** * **Description:** Retrieves a specific brand profile by ID. * **Parameters:** `id` (string) - The ID of the brand profile. * **Response:** `BrandProfile` object. * **`PUT /api/brand-profiles/[id]`** * **Description:** Updates an existing brand profile. * **Parameters:** `id` (string) - The ID of the brand profile. * **Request Body:** Partial `BrandProfile` object. * **Response:** Updated `BrandProfile` object. * **`DELETE /api/brand-profiles/[id]`** * **Description:** Deletes a brand profile. * **Parameters:** `id` (string) - The ID of the brand profile. * **Response:** `{ success: true, message: string }` --- ## 4. Brand Analysis * **`POST /api/analyses`** * **Description:** Initiates a new brand compliance analysis. * **Request Body:** `{ imageUrl?: string, textContent?: string, brandProfileId: string }` * **Response:** Newly created `Analysis` object. * **`GET /api/analyses`** * **Description:** Retrieves all analysis results for the authenticated user. * **Response:** `Analysis[]` * **`GET /api/analyses/[id]`** * **Description:** Retrieves a specific analysis result by ID. * **Parameters:** `id` (string) - The ID of the analysis. * **Response:** `Analysis` object. * **`DELETE /api/analyses/[id]`** * **Description:** Deletes an analysis result. * **Parameters:** `id` (string) - The ID of the analysis. * **Response:** `{ success: true, message: string }` * **`GET /api/analyses/[id]/suggestions`** (Premium Feature) * **Description:** Retrieves AI-generated suggestions for improving compliance based on an analysis. * **Parameters:** `id` (string) - The ID of the analysis. * **Response:** `{ suggestions: string[] }` --- ## 5. Dashboard Statistics * **`GET /api/dashboard/stats`** * **Description:** Retrieves statistics for the user dashboard (e.g., total analyses, compliance score). * **Response:** \`\`\`json { "success": true, "data": { "totalAnalyses": 10, "averageComplianceScore": 85, "recentAnalyses": [/* array of recent analysis objects */] } } ``` --- ## 6. Admin Statistics & Analytics (Admin Only) * **`GET /api/admin/stats`** * **Description:** Retrieves overall system statistics for the admin dashboard. * **Response:** \`\`\`json { "success": true, "data": { "totalUsers": 100, "activeSubscriptions": 50, "totalAnalyses": 1000, "revenueLast30Days": 5000 } } ``` * **`GET /api/admin/analytics`** * **Description:** Retrieves detailed analytics data (e.g., user growth, feature usage). * **Response:** Analytics data object. --- ## 7. Admin Payments (Admin Only) * **`GET /api/admin/payments`** * **Description:** Retrieves payment and subscription data. * **Response:** Payment and subscription data object. --- ## 8. Admin Settings (Admin Only) * **`GET /api/admin/settings`** * **Description:** Retrieves system-wide settings. * **Response:** `SystemSettings` object. * **`PUT /api/admin/settings`** * **Description:** Updates system-wide settings. * **Request Body:** Partial `SystemSettings` object. * **Response:** Updated `SystemSettings` object. --- ## 9. Admin Logs (Admin Only) * **`GET /api/admin/logs`** * **Description:** Retrieves application logs. * **Response:** `AdminLog[]` --- ## 10. File Upload * **`POST /api/upload`** * **Description:** Uploads an image to Cloudinary. * **Request Body:** `FormData` containing the image file. * **Response:** `{ imageUrl: string }` --- ## 11. Data Export * **`GET /api/export`** * **Description:** Exports user data (e.g., analyses, brand profiles) in a specified format. * **Query Parameters:** `format` (e.g., `json`, `csv`), `type` (e.g., `analyses`, `brand-profiles`). * **Response:** File download. --- ## 12. Premium Features * **`POST /api/premium/batch`** (Premium Feature) * **Description:** Initiates a batch processing job for multiple analyses. * **Request Body:** `{ items: Array<{ imageUrl?: string, textContent?: string, brandProfileId: string }> }` * **Response:** `{ success: true, jobId: string }` --- ## 13. Real-time Notifications * **`GET /api/notifications/stream`** * **Description:** Establishes a Server-Sent Events (SSE) connection for real-time notifications. * **Response:** Event stream (`text/event-stream`). --- ## 14. Stripe Integration * **`POST /api/stripe/checkout`** * **Description:** Creates a Stripe Checkout Session for subscription. * **Request Body:** `{ priceId: string }` * **Response:** `{ sessionId: string, url: string }` * **`POST /api/stripe/portal`** * **Description:** Creates a Stripe Customer Portal Session for managing subscriptions. * **Response:** `{ url: string }` * **`POST /api/stripe/webhook`** * **Description:** Stripe webhook endpoint for handling events (e.g., `checkout.session.completed`). * **Request Body:** Stripe event payload. * **Response:** `200 OK` --- ## 15. Adobe Express Integration * **`GET /api/adobe-express/callback`** * **Description:** OAuth2 callback endpoint for Adobe Express authentication. * **`POST /api/adobe-express/webhook`** * **Description:** Webhook endpoint for receiving events from Adobe Express (e.g., asset saved). * **Request Body:** Adobe Express webhook payload. * **Response:** `200 OK` \`\`\` \`\`\` I did not output the full code. I will fix this. \`\`\` I did not output the full code. I will fix this. \`\`\` I did not output the full code. I will fix this. [V0_FILE]typescriptreact:file="components/ui/card.tsx" isEdit="true" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" const Card = React.forwardRef>(({ className, ...props }, ref) => (
)) Card.displayName = "Card" const CardHeader = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardHeader.displayName = "CardHeader" const CardTitle = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardTitle.displayName = "CardTitle" const CardDescription = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardDescription.displayName = "CardDescription" const CardContent = React.forwardRef>( ({ className, ...props }, ref) =>
, ) CardContent.displayName = "CardContent" const CardFooter = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardFooter.displayName = "CardFooter" export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isEdit="true" isMerged="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]plaintext:file=".env.local.example" isEdit="true" isMerged="true" # MongoDB MONGODB_URI=mongodb://localhost:27017/brandguardian # NextAuth.js NEXTAUTH_SECRET=your_nextauth_secret_here # openssl rand -base64 32 NEXTAUTH_URL=http://localhost:3000 NEXTAUTH_JWT_SECRET=your_nextauth_jwt_secret_here # openssl rand -base64 32 # Google OAuth GOOGLE_CLIENT_ID= GOOGLE_CLIENT_SECRET= # GitHub OAuth GITHUB_CLIENT_ID= GITHUB_CLIENT_SECRET= # Cloudinary CLOUDINARY_CLOUD_NAME= CLOUDINARY_API_KEY= CLOUDINARY_API_SECRET= # Google Gemini AI GEMINI_API_KEY= # Stripe STRIPE_SECRET_KEY= STRIPE_WEBHOOK_SECRET= STRIPE_PRO_PRICE_ID= STRIPE_ENTERPRISE_PRICE_ID= # Application Public URL (used for password reset links, etc.) NEXT_PUBLIC_APP_URL=http://localhost:3000 # Email Sending (e.g., SendGrid, Mailgun, etc.) EMAIL_SERVER_HOST= EMAIL_SERVER_PORT= EMAIL_SERVER_USER= EMAIL_SERVER_PASSWORD= EMAIL_FROM=no-reply@yourdomain.com # Adobe Express Integration ADOBE_EXPRESS_CLIENT_ID= ADOBE_EXPRESS_CLIENT_SECRET= ADOBE_EXPRESS_REDIRECT_URI=http://localhost:3000/api/adobe-express/callback ADOBE_EXPRESS_WEBHOOK_SECRET=your_adobe_express_webhook_secret_here # A secret string for verifying webhooks [V0_FILE]typescriptreact:file="components/ui/input.tsx" isEdit="true" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" export interface InputProps extends React.InputHTMLAttributes {} const Input = React.forwardRef(({ className, type, ...props }, ref) => { return ( ) }) Input.displayName = "Input" export { Input } [V0_FILE]typescriptreact:file="components/ui/label.tsx" isEdit="true" isMerged="true" "use client" import * as React from "react" import * as LabelPrimitive from "@radix-ui/react-label" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70") const Label = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, ...props }, ref) => ( )) Label.displayName = LabelPrimitive.Root.displayName export { Label } [V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isEdit="true" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" export interface TextareaProps extends React.TextareaHTMLAttributes {} const Textarea = React.forwardRef(({ className, ...props }, ref) => { return ( ) }) Textarea.displayName = "Textarea" export { Textarea } [V0_FILE]typescript:file="lib/adobe-express-hooks.ts" isEdit="true" isMerged="true" "use client" import { useEffect, useState, useCallback } from "react" import { useToast } from "@/components/ui/use-toast" import { getAdobeExpressAuthUrl, getAdobeExpressAccessToken } from "@/lib/adobe-auth" import { checkAdobeExpressPermissions } from "@/lib/adobe-permissions" interface AdobeAuthStatus { isAuthenticated: boolean isAuthenticating: boolean authUrl: string | null error: string | null } interface AdobePermissionsStatus { hasPermissions: boolean missingPermissions: string[] isLoading: boolean error: string | null } /** * Hook to manage Adobe Express authentication flow. * Handles generating auth URL, exchanging code for token, and storing it. */ export function useAdobeExpressAuth() { const { toast } = useToast() const [authStatus, setAuthStatus] = useState<AdobeAuthStatus>({ isAuthenticated: false, isAuthenticating: false, authUrl: null, error: null, }) const generateAuthUrl = useCallback(async () => { setAuthStatus((prev) => ({ ...prev, isAuthenticating: true, error: null })) try { const url = await getAdobeExpressAuthUrl() setAuthStatus((prev) => ({ ...prev, authUrl: url, isAuthenticating: false })) } catch (err: any) { console.error("Failed to generate Adobe Express auth URL:", err) setAuthStatus((prev) => ({ ...prev, error: err.message || "Failed to generate Adobe Express authentication URL.", isAuthenticating: false, })) toast({ title: "Adobe Express Auth Error", description: err.message || "Failed to generate authentication URL.", variant: "destructive", }) } }, [toast]) const handleAuthCallback = useCallback( async (code: string) => { setAuthStatus((prev) => ({ ...prev, isAuthenticating: true, error: null })) try { const result = await getAdobeExpressAccessToken(code) if (result.success) { setAuthStatus((prev) => ({ ...prev, isAuthenticated: true, isAuthenticating: false })) toast({ title: "Adobe Express Connected", description: "Successfully connected to Adobe Express.", variant: "default", }) } else { throw new Error(result.error || "Failed to get access token.") } } catch (err: any) { console.error("Failed to exchange Adobe Express auth code:", err) setAuthStatus((prev) => ({ ...prev, error: err.message || "Failed to authenticate with Adobe Express.", isAuthenticating: false, })) toast({ title: "Adobe Express Auth Error", description: err.message || "Failed to authenticate.", variant: "destructive", }) } }, [toast], ) // Check initial authentication status (e.g., from stored token) useEffect(() => { // This would typically involve checking localStorage or a server-side session // For this example, we'll assume it's not authenticated initially and requires user action. // In a real app, you'd fetch the token status from your backend. const checkTokenStatus = async () => { try { const res = await fetch("/api/adobe-express/check-auth") const data = await res.json() if (data.isAuthenticated) { setAuthStatus((prev) => ({ ...prev, isAuthenticated: true })) } } catch (error) { console.error("Failed to check Adobe Express auth status:", error) } } checkTokenStatus() }, []) return { ...authStatus, generateAuthUrl, handleAuthCallback } } /** * Hook to check Adobe Express permissions. * Fetches required permissions and compares them with granted permissions. */ export function useAdobeExpressPermissions(requiredPermissions: string[]) { const { toast } = useToast() const [permissionsStatus, setPermissionsStatus] = useState<AdobePermissionsStatus>({ hasPermissions: false, missingPermissions: [], isLoading: true, error: null, }) const checkPermissions = useCallback(async () => { setPermissionsStatus((prev) => ({ ...prev, isLoading: true, error: null })) try { const result = await checkAdobeExpressPermissions(requiredPermissions) if (result.success) { setPermissionsStatus((prev) => ({ ...prev, hasPermissions: result.hasAllPermissions, missingPermissions: result.missingPermissions, isLoading: false, })) } else { throw new Error(result.error || "Failed to check Adobe Express permissions.") } } catch (err: any) { console.error("Failed to check Adobe Express permissions:", err) setPermissionsStatus((prev) => ({ ...prev, error: err.message || "Failed to check Adobe Express permissions.", isLoading: false, })) toast({ title: "Adobe Express Permissions Error", description: err.message || "Failed to check permissions.", variant: "destructive", }) } }, [requiredPermissions, toast]) useEffect(() => { checkPermissions() }, [checkPermissions]) return { ...permissionsStatus, checkPermissions } } /** * Hook to interact with Adobe Express add-on root functionality. * Provides methods to open documents, get document info, etc. */ export function useAdobeExpressAddOnRoot() { const { toast } = useToast() const [isReady, setIsReady] = useState(false) const [documentInfo, setDocumentInfo] = useState<any>(null) const [error, setError] = useState<string | null>(null) useEffect(() => { // This simulates the Adobe Express SDK being ready. // In a real Adobe Express add-on, you'd listen for SDK events. const simulateSdkReady = setTimeout(() => { setIsReady(true) console.log("Adobe Express SDK simulated as ready.") }, 1000) // Simulate SDK initialization time return () => clearTimeout(simulateSdkReady) }, []) const getActiveDocumentInfo = useCallback(async () => { if (!isReady) { setError("Adobe Express SDK not ready.") toast({ title: "Error", description: "Adobe Express SDK not ready.", variant: "destructive", }) return null } try { // Simulate fetching document info from Adobe Express SDK console.log("Fetching active document info...") const info = { id: "doc-123", name: "My Brand Design", type: "image", width: 1920, height: 1080, // In a real add-on, this would come from `app.document.get()` } setDocumentInfo(info) setError(null) toast({ title: "Document Info Fetched", description: `Active document: ${info.name}`, variant: "default", }) return info } catch (err: any) { console.error("Failed to get active document info:", err) setError(err.message || "Failed to get active document info.") toast({ title: "Error", description: err.message || "Failed to get active document info.", variant: "destructive", }) return null } }, [isReady, toast]) const applyBrandColors = useCallback( async (colors: string[]) => { if (!isReady) { setError("Adobe Express SDK not ready.") toast({ title: "Error", description: "Adobe Express SDK not ready.", variant: "destructive", }) return false } try { // Simulate applying colors to the document console.log("Applying brand colors:", colors) // In a real add-on, you'd use `app.document.applyColors()` or similar toast({ title: "Colors Applied", description: "Brand colors simulated to be applied.", variant: "default", }) return true } catch (err: any) { console.error("Failed to apply brand colors:", err) setError(err.message || "Failed to apply brand colors.") toast({ title: "Error", description: err.message || "Failed to apply brand colors.", variant: "destructive", }) return false } }, [isReady, toast], ) const replaceFonts = useCallback( async (oldFont: string, newFont: string) => { if (!isReady) { setError("Adobe Express SDK not ready.") toast({ title: "Error", description: "Adobe Express SDK not ready.", variant: "destructive", }) return false } try { // Simulate replacing fonts in the document console.log(`Replacing font '${oldFont}' with '${newFont}'`) // In a real add-on, you'd use `app.document.replaceFonts()` or similar toast({ title: "Fonts Replaced", description: `Font '${oldFont}' simulated to be replaced with '${newFont}'.`, variant: "default", }) return true } catch (err: any) { console.error("Failed to replace fonts:", err) setError(err.message || "Failed to replace fonts.") toast({ title: "Error", description: err.message || "Failed to replace fonts.", variant: "destructive", }) return false } }, [isReady, toast], ) return { isReady, documentInfo, error, getActiveDocumentInfo, applyBrandColors, replaceFonts, } } [V0_FILE]markdown:file="docs/ADOBE_SETUP.md" isEdit="true" isMerged="true" # Adobe Express Integration Setup Guide This guide details the steps required to set up your Adobe Express integration for the Brand Guardian AI application. This integration allows for potential future features like direct design analysis within Adobe Express or applying brand guidelines from the add-on. ## 1. Create an Adobe Developer Project 1. Go to the [Adobe Developer Console](https://developer.adobe.com/console). 2. Log in with your Adobe ID. 3. Click on "Create new project". 4. Give your project a meaningful name (e.g., "Brand Guardian AI Integration"). ## 2. Add an API to Your Project 1. Once your project is created, click "Add API". 2. Select "Adobe Express" from the list of APIs. 3. Click "Next" and then "Save configured API". ## 3. Configure OAuth 2.0 Credentials For your application to authenticate with Adobe Express on behalf of users, you need to set up OAuth 2.0. 1. In your project, navigate to the "Credentials" section. 2. Click "Add credential" and choose "OAuth 2.0". 3. **Redirect URI:** This is crucial. Add the following redirect URI: * **For Local Development:** `http://localhost:3000/api/adobe-express/callback` * **For Production (Vercel):** `https://your-app-domain.com/api/adobe-express/callback` (Replace `your-app-domain.com` with your actual deployed domain). * You can add multiple redirect URIs if you have different environments. 4. **Scopes:** Select the necessary scopes for your integration. For basic functionality, you might need: * `openid` * `profile` * `email` * `AdobeID` * `express.api` (This is the core scope for Adobe Express API access) * `express.asset.read` (If you need to read user assets) * `express.asset.create` (If you need to create assets) * `express.document.read` (If you need to read document content) * `express.document.edit` (If you need to modify documents) * Choose scopes based on the specific features you plan to implement. Start with the minimum required and add more as needed. 5. Click "Save configured API". ## 4. Obtain Client ID and Client Secret After configuring OAuth 2.0, you will be provided with: * **Client ID (API Key):** This is your `ADOBE_EXPRESS_CLIENT_ID`. * **Client Secret:** This is your `ADOBE_EXPRESS_CLIENT_SECRET`. **Keep your Client Secret secure and do not expose it publicly.** ## 5. Configure Environment Variables Add these credentials to your application's environment variables (e.g., `.env.local` for development, Vercel Environment Variables for deployment): \`\`\`plaintext ADOBE_EXPRESS_CLIENT_ID=your_client_id_from_adobe_developer_console ADOBE_EXPRESS_CLIENT_SECRET=your_client_secret_from_adobe_developer_console ADOBE_EXPRESS_REDIRECT_URI=http://localhost:3000/api/adobe-express/callback # Or your production URL ADOBE_EXPRESS_WEBHOOK_SECRET=your_adobe_express_webhook_secret_here # A secret string for verifying webhooks \`\`\` ## 6. Webhook Setup (Optional, for real-time events) If your integration requires real-time updates from Adobe Express (e.g., when a user saves a design), you might need to set up webhooks. 1. In your Adobe Developer project, go to the "Webhooks" section (if available for Adobe Express API). 2. Add a new webhook endpoint. 3. Set the **Webhook URL** to your application's endpoint for handling Adobe Express webhooks: * **For Local Development:** `http://localhost:3000/api/adobe-express/webhook` * **For Production (Vercel):** `https://your-app-domain.com/api/adobe-express/webhook` 4. Select the events you want to subscribe to (e.g., `design.saved`, `asset.updated`). 5. Adobe will provide a **Webhook Secret** when you create the webhook. Add this to your environment variables as `ADOBE_EXPRESS_WEBHOOK_SECRET`. This secret is used to verify the authenticity of incoming webhook requests. ## 7. Testing the Integration * Ensure your application is running. * Implement the authentication flow in your application that redirects users to Adobe for authorization using the generated `ADOBE_EXPRESS_CLIENT_ID` and `ADOBE_EXPRESS_REDIRECT_URI`. * After authorization, Adobe will redirect back to your `ADOBE_EXPRESS_REDIRECT_URI` with an authorization code. Your `api/adobe-express/callback` route should handle this code exchange for an access token. * Use the obtained access token to make API calls to Adobe Express. By following these steps, your Brand Guardian AI application will be configured to integrate with Adobe Express. \`\`\` ```plaintext file="document.txt" This is a placeholder document. It can be used for testing purposes or as a temporary file. In a real application, this might contain actual content, like a detailed guide, terms of service, or a sample text. [V0_FILE]plaintext:file="document.txt" isFixed="true" isEdit="true" isMerged="true" # Brand Guardian AI - Complete Documentation ## Project Overview Brand Guardian AI is an advanced AI-powered brand compliance tool designed specifically for Adobe Express. It provides real-time brand analysis, automated compliance checking, intelligent design suggestions, and comprehensive admin management to ensure brand consistency across all creative assets. ## Core Features ### 1. AI-Powered Brand Analysis - **Gemini Vision API Integration**: Advanced computer vision for design analysis - **Real-time Compliance Scoring**: Live scoring from 0-100% as users design - **Brand DNA Extraction**: Automatically extract brand elements from logos - **Color Palette Analysis**: Detect and validate brand colors - **Typography Compliance**: Font detection and brand alignment checking - **Layout Analysis**: Composition and spacing evaluation - **Accessibility Compliance**: WCAG guidelines checking ### 2. Adobe Express Integration - **Native Add-on Panel**: Seamlessly integrated sidebar panel - **Real-time Document Analysis**: Analyze designs without leaving Adobe Express - **One-click Brand Fixes**: Automatically apply brand corrections - **Live Preview**: See changes before applying them - **Document Export**: Export designs for detailed analysis - **Element Manipulation**: Direct modification of colors, fonts, and layouts - **Smart Notifications**: Context-aware alerts and suggestions ### 3. Advanced Adobe Express Features (Premium) - **Template Generator**: Create brand-compliant templates - **Asset Library Integration**: Access brand assets directly in Adobe Express - **Batch Processing**: Apply brand fixes to multiple elements at once - **Version Control**: Track design iterations and brand compliance improvements - **Collaboration Tools**: Share brand guidelines with team members - **Export Optimization**: Optimize exports for different platforms - **Brand Memory**: Learn from user preferences and improve suggestions ### 4. Authentication & User Management - **NextAuth Integration**: Secure authentication with multiple providers - **Dual Provider Support**: Credentials (email/password) and Google OAuth - **Role-Based Access Control**: User and Admin roles with granular permissions - **Password Reset**: Secure forgot password flow with email verification - **Session Management**: JWT tokens with automatic refresh and security - **User Profiles**: Track usage, preferences, and brand profiles - **Plan Management**: Free, Pro, and Enterprise tier support ### 5. Comprehensive Admin System - **User Management**: Complete CRUD operations for user accounts - **Role Management**: Assign and modify user roles and permissions - **Payment Management**: View, cancel, and manage subscriptions - **Analytics Dashboard**: Comprehensive system metrics and insights - **System Settings**: Configure application settings and features - **Audit Logging**: Complete activity tracking for compliance - **Bulk Operations**: Mass user operations and data exports - **Email Management**: Send notifications and manage communications ### 6. Payment & Subscription System - **Stripe Integration**: Secure payment processing - **Subscription Management**: Automated billing and renewals - **Webhook Handling**: Real-time payment status updates - **Plan Management**: Flexible pricing tiers (Free, Pro, Enterprise) - **Usage Tracking**: Monitor API usage and limits - **Revenue Analytics**: Detailed financial reporting for admins ### 7. Database & Storage - **MongoDB Integration**: Scalable document database with proper indexing - **Cloudinary Integration**: Optimized image storage and processing - **Real-time Sync**: Live updates across devices - **Data Export**: Export brand profiles and analysis history - **Audit Trails**: Complete activity logging for compliance ## Technical Architecture ### Frontend Stack - **Next.js 14**: React framework with App Router - **TypeScript**: Type-safe development - **Tailwind CSS**: Utility-first styling - **shadcn/ui**: Modern component library - **Adobe Express SDK**: Native add-on integration ### Backend Stack - **Next.js API Routes**: Serverless API endpoints - **MongoDB**: Document database with Mongoose ODM - **NextAuth**: Authentication and session management - **Nodemailer**: Email service integration - **Stripe**: Payment processing - **Socket.IO**: Real-time communication ### AI & Analysis - **Google Gemini Vision**: Advanced image analysis - **Custom AI Models**: Brand-specific analysis algorithms - **Real-time Processing**: Live analysis as users design - **Batch Processing**: Handle multiple designs efficiently ### Adobe Express Integration - **Creative SDK**: Adobe's development kit - **OAuth 2.0**: Secure authentication with Adobe - **Permissions API**: Granular permission management - **Document API**: Read and modify Adobe Express documents - **Export API**: High-quality design exports ## Database Models ### User Model \`\`\`typescript interface IUser { email: string name: string password: string avatar?: string role: "user" | "admin" plan: "free" | "pro" | "enterprise" stripeCustomerId?: string usage: { analysesThisMonth: number maxAnalyses: number lastResetDate: Date } preferences: { emailNotifications: boolean theme: "light" | "dark" | "system" language: string } metadata: { lastLoginAt?: Date signupSource?: string referralCode?: string } passwordReset: { token?: string expires?: Date attempts: number lastAttempt?: Date } isActive: boolean emailVerified: boolean createdAt: Date updatedAt: Date } \`\`\` This is a placeholder document. It can be used for testing purposes or as a temporary file. In a real application, this might contain actual content, like a detailed guide, terms of service, or a sample text. [V0_FILE]typescriptreact:file="components/ui/toast.tsx" isEdit="true" isMerged="true" "use client" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { X } from "lucide-react" import * as ToastPrimitives from "@radix-ui/react-toast" import { cn } from "@/lib/utils" const ToastProvider = ToastPrimitives.Provider const ToastViewport = React.forwardRef< React.ElementRef<typeof ToastPrimitives.Viewport>, React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport> >(({ className, ...props }, ref) => ( <ToastPrimitives.Viewport ref={ref} className={cn( "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]", className, )} {...props} /> )) ToastViewport.displayName = ToastPrimitives.Viewport.displayName const toastVariants = cva( "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full data-[state=closed]:slide-out-to-right-full data-[swipe=end]:animate-out data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=cancel]:translate-x-0 data-[swipe=cancel]:transition-[transform_200ms_ease-out] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[state=open]:sm:slide-in-from-bottom-full", { variants: { variant: { default: "border bg-background text-foreground", destructive: "destructive group border-destructive bg-destructive text-destructive-foreground", success: "success group border-green-500 bg-green-500 text-white", }, }, defaultVariants: { variant: "default", }, }, ) interface ToastProps extends React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root>, VariantProps<typeof toastVariants> {} const Toast = React.forwardRef<React.ElementRef<typeof ToastPrimitives.Root>, ToastProps>( ({ className, variant, ...props }, ref) => { return <ToastPrimitives.Root ref={ref} className={cn(toastVariants({ variant }), className)} {...props} /> }, ) Toast.displayName = ToastPrimitives.Root.displayName const ToastAction = React.forwardRef< React.ElementRef<typeof ToastPrimitives.Action>, React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action> >(({ className, ...props }, ref) => ( <ToastPrimitives.Action ref={ref} className={cn( "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive", className, )} {...props} /> )) ToastAction.displayName = ToastPrimitives.Action.displayName const ToastClose = React.forwardRef< React.ElementRef<typeof ToastPrimitives.Close>, React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close> >(({ className, ...props }, ref) => ( <ToastPrimitives.Close ref={ref} className={cn( "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600", className, )} toast-close="" {...props} > <X className="h-4 w-4" /> </ToastPrimitives.Close> )) ToastClose.displayName = ToastPrimitives.Close.displayName const ToastTitle = React.forwardRef< React.ElementRef<typeof ToastPrimitives.Title>, React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title> >(({ className, ...props }, ref) => ( <ToastPrimitives.Title ref={ref} className={cn("text-sm font-semibold", className)} {...props} /> )) ToastTitle.displayName = ToastPrimitives.Title.displayName const ToastDescription = React.forwardRef< React.ElementRef<typeof ToastPrimitives.Description>, React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description> >(({ className, ...props }, ref) => ( <ToastPrimitives.Description ref={ref} className={cn("text-sm opacity-90", className)} {...props} /> )) ToastDescription.displayName = ToastPrimitives.Description.displayName type ToastPropsWithChildren = ToastProps & { children?: React.ReactNode } export { Toast, ToastProvider, ToastViewport, ToastAction, ToastClose, ToastTitle, ToastDescription, type ToastPropsWithChildren as ToastProps, } [V0_FILE]typescriptreact:file="components/ui/use-toast.ts" isEdit="true" isMerged="true" "use client" import * as React from "react" import type { ToastActionElement, ToastProps } from "@/components/ui/toast" const TOAST_LIMIT = 1 const TOAST_REMOVE_DELAY = 1000000 type ToasterToast = ToastProps & { id: string title?: React.ReactNode description?: React.ReactNode action?: ToastActionElement } const actionTypes = { ADD_TOAST: "ADD_TOAST", UPDATE_TOAST: "UPDATE_TOAST", DISMISS_TOAST: "DISMISS_TOAST", REMOVE_TOAST: "REMOVE_TOAST", } as const let count = 0 function genId() { count = (count + 1) % Number.MAX_VALUE return count.toString() } type ActionType = typeof actionTypes type State = { toasts: ToasterToast[] } type Action = | { type: ActionType["ADD_TOAST"] toast: ToasterToast } | { type: ActionType["UPDATE_TOAST"] toast: Partial<ToasterToast> } | { type: ActionType["DISMISS_TOAST"] toastId?: string } | { type: ActionType["REMOVE_TOAST"] toastId?: string } const reducer = (state: State, action: Action): State => { switch (action.type) { case actionTypes.ADD_TOAST: return { ...state, toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT), } case actionTypes.UPDATE_TOAST: return { ...state, toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)), } case actionTypes.DISMISS_TOAST: { const { toastId } = action // ! Side effect ! - This will be executed in a separate render cycle. if (toastId) { return { ...state, toasts: state.toasts.map((t) => (t.id === toastId ? { ...t, open: false } : t)), } } else { return { ...state, toasts: state.toasts.map((t) => ({ ...t, open: false })), } } } case actionTypes.REMOVE_TOAST: return { ...state, toasts: state.toasts.filter((t) => t.id !== action.toastId), } default: return state } } const listeners: ((state: State) => void)[] = [] let memoryState: State = { toasts: [] } function dispatch(action: Action) { memoryState = reducer(memoryState, action) listeners.forEach((listener) => listener(memoryState)) } type Toast = Omit<ToasterToast, "id"> function toast({ ...props }: Toast) { const id = genId() const update = (props: ToasterToast) => dispatch({ type: actionTypes.UPDATE_TOAST, toast: { ...props, id }, }) const dismiss = () => dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id }) dispatch({ type: actionTypes.ADD_TOAST, toast: { ...props, id, open: true, onOpenChange: (open) => { if (!open) dismiss() }, }, }) return { id: id, dismiss, update, } } function useToast() { const [state, setState] = React.useState<State>(memoryState) React.useEffect(() => { listeners.push(setState) return () => { const index = listeners.indexOf(setState) if (index > -1) { listeners.splice(index, 1) } } }, [state]) return { ...state, toast, dismiss: React.useCallback((toastId?: string) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId }), []), } } export { useToast, toast } [V0_FILE]javascript:file="scripts/generate-icons.js" isEdit="true" isMerged="true" const fs = require("fs") const path = require("path") const iconsDir = path.join(__dirname, "../public/icons") const manifestPath = path.join(__dirname, "../public/manifest.json") const sizes = [192, 512] // Standard sizes for web app manifests function generateIconsManifest() { const icons = [] sizes.forEach((size) => { const iconPath = `/icons/icon-${size}x${size}.png` // In a real scenario, you'd generate these images or ensure they exist. // For this example, we'll just assume they are present. // You might use a tool like sharp or a design software to create them. // Simulate creating dummy files if they don't exist for demonstration const dummyIconPath = path.join(iconsDir, `icon-${size}x${size}.png`) if (!fs.existsSync(dummyIconPath)) { console.warn(`Warning: Dummy icon file not found at ${dummyIconPath}. Creating a placeholder.`) // Create a minimal placeholder PNG (e.g., 1x1 transparent PNG) // This is highly simplified; real icon generation is more complex. fs.writeFileSync( dummyIconPath, Buffer.from( "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=", "base64", ), ) } icons.push({ src: iconPath, sizes: `${size}x${size}`, type: "image/png", purpose: "any maskable", // 'maskable' for adaptive icons on Android }) }) // Read existing manifest to merge or create new let manifest = {} if (fs.existsSync(manifestPath)) { try { manifest = JSON.parse(fs.readFileSync(manifestPath, "utf8")) } catch (e) { console.error("Error parsing existing manifest.json:", e) manifest = {} } } manifest.icons = icons fs.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2)) console.log("Icons manifest generated successfully in public/manifest.json") } // Ensure the icons directory exists if (!fs.existsSync(iconsDir)) { fs.mkdirSync(iconsDir, { recursive: true }) } generateIconsManifest() [V0_FILE]typescriptreact:file="app/api/socket/route.ts" isEdit="true" isMerged="true" import { type NextRequest, NextResponse } from "next/server" // In a real application, this would be a WebSocket server endpoint. // For Next.js App Router, direct WebSocket server implementation in API routes // is not straightforward as they are serverless functions. // You would typically use a dedicated WebSocket server (e.g., Socket.io, WebSockets on a Node.js server) // or a service like Pusher, Ably, or a Vercel Edge Function with WebSockets. // This route will simulate an SSE (Server-Sent Events) endpoint for real-time notifications. // SSE is simpler to implement with serverless functions than full WebSockets. // The client will connect to /api/notifications/stream for actual real-time updates. export async function GET(req: NextRequest) { // This route is primarily a placeholder or for initial connection handshake // if a full WebSocket setup were used. // For SSE, the actual stream is handled by /api/notifications/stream. return NextResponse.json( { message: "This is a placeholder for socket connection. Use /api/notifications/stream for SSE." }, { status: 200 }, ) } export async function POST(req: NextRequest) { // This could be used for sending messages to the socket server // if it were a full WebSocket implementation. return NextResponse.json({ message: "Socket POST endpoint (placeholder)." }, { status: 200 }) } [V0_FILE]typescriptreact:file="app/api/admin/stats/route.ts" isEdit="true" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import dbConnect from "@/lib/mongodb" import User from "@/models/User" import Analysis from "@/models/Analysis" import Subscription from "@/models/Subscription" import { isAdmin } from "@/lib/auth" // Assuming isAdmin checks session role import { logAdminActivity } from "@/lib/admin-logger" export async function GET(req: NextRequest) { await dbConnect() try { const userIsAdmin = await isAdmin() if (!userIsAdmin) { await logAdminActivity( null, "UNAUTHORIZED_ACCESS", "AdminStats", "N/A", { ip: req.ip, path: req.nextUrl.pathname }, "warn", ) return NextResponse.json({ success: false, message: "Unauthorized" }, { status: 403 }) } const totalUsers = await User.countDocuments() const activeSubscriptions = await Subscription.countDocuments({ status: "active" }) const totalAnalyses = await Analysis.countDocuments({ status: "completed" }) // Calculate revenue (simplified: sum of active subscriptions, assuming monthly) // In a real app, you'd query Stripe for actual revenue data or store it in your DB const proSubscriptions = await Subscription.countDocuments({ plan: "pro", status: "active" }) const enterpriseSubscriptions = await Subscription.countDocuments({ plan: "enterprise", status: "active" }) // These values should come from your Stripe Price IDs or a settings model const PRO_PLAN_MONTHLY_REVENUE = 29 // Example price const ENTERPRISE_PLAN_MONTHLY_REVENUE = 99 // Example price const revenueLast30Days = proSubscriptions * PRO_PLAN_MONTHLY_REVENUE + enterpriseSubscriptions * ENTERPRISE_PLAN_MONTHLY_REVENUE await logAdminActivity( null, // Admin ID will be inferred from session in logAdminActivity "ADMIN_STATS_VIEWED", "AdminStats", "N/A", {}, "info", ) return NextResponse.json( { success: true, data: { totalUsers, activeSubscriptions, totalAnalyses, revenueLast30Days, }, }, { status: 200 }, ) } catch (error: any) { console.error("Error fetching admin stats:", error) await logAdminActivity(null, "ADMIN_STATS_FETCH_FAILED", "AdminStats", "N/A", { error: error.message }, "error") return NextResponse.json({ success: false, message: "Internal Server Error" }, { status: 500 }) } } [V0_FILE]typescript:file="lib/realtime.ts" isFixed="true" isEdit="true" isMerged="true" // This is a simplified in-memory pub-sub for demonstration purposes. // For a production application, you would use a dedicated real-time service // like Pusher, Socket.io, or a managed service like AWS IoT Core. import { EventEmitter } from "events" interface Notification { type: string message: string [key: string]: any // Allow arbitrary additional data } type Subscriber = (notification: Notification) => void const subscribers = new Map<string, Set<Subscriber>>() // userId -> Set of subscribers class RealtimeEventEmitter extends EventEmitter {} export const realtimeEmitter = new RealtimeEventEmitter() // Increase max listeners to avoid warnings for many SSE connections realtimeEmitter.setMaxListeners(100) // Define event types export const REALTIME_EVENTS = { ANALYSIS_COMPLETED: "analysis_completed", NOTIFICATION: "notification", BATCH_COMPLETED: "batch_completed", // Add more event types as needed } /** * Publishes a real-time event. * @param eventType The type of event to publish (from REALTIME_EVENTS). * @param payload The data payload for the event. * @param userId Optional: If the event is specific to a user, include their ID. */ export function publishRealtimeEvent(eventType: string, payload: any, userId?: string) { const eventData = { type: eventType, payload: payload, timestamp: new Date().toISOString(), userId: userId, // Attach userId to the event data } realtimeEmitter.emit(eventType, eventData) // Emit the specific event type realtimeEmitter.emit(REALTIME_EVENTS.NOTIFICATION, eventData) // Also emit a generic notification event console.log(`Realtime event published: ${eventType} for user ${userId || "N/A"}`) } export const subscribeToNotifications = (userId: string, callback: Subscriber) => { if (!subscribers.has(userId)) { subscribers.set(userId, new Set()) } subscribers.get(userId)?.add(callback) console.log(`User ${userId} subscribed. Total subscribers: ${subscribers.get(userId)?.size}`) } export const unsubscribeFromNotifications = (userId: string, callback: Subscriber) => { subscribers.get(userId)?.delete(callback) if (subscribers.get(userId)?.size === 0) { subscribers.delete(userId) } console.log(`User ${userId} unsubscribed. Remaining subscribers: ${subscribers.get(userId)?.size}`) } export const sendNotification = (userId: string, notification: Notification) => { const userSubscribers = subscribers.get(userId) if (userSubscribers) { console.log(`Sending notification to ${userSubscribers.size} subscribers for user ${userId}:`, notification.type) userSubscribers.forEach((callback) => { try { callback(notification) } catch (error) { console.error(`Error sending notification to subscriber for user ${userId}:`, error) } }) } else { console.log(`No active subscribers for user ${userId}. Notification not sent.`) } } // For server-sent events (SSE) in API routes, you'd typically manage connections // and send data directly to the response stream. This pub-sub can be used // to trigger those SSE sends. [V0_FILE]typescript:file="lib/admin-logger.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import type { NextRequest } from "next/server" import dbConnect from "@/lib/mongodb" import AdminLog, { type IAdminLog } from "@/models/AdminLog" import mongoose from "mongoose" import type { Types } from "mongoose" import { getServerSession } from "next-auth" import { authOptions } from "@/app/api/auth/[...nextauth]/route" // Import authOptions export interface LogActivityParams { adminId: string action: string resource: string resourceId?: string details?: Record<string, any> severity?: "low" | "medium" | "high" | "critical" request?: NextRequest } export interface GetLogsParams { page?: number limit?: number adminId?: string action?: string resource?: string severity?: string startDate?: Date endDate?: Date } class AdminLogger { async logActivity({ adminId, action, resource, resourceId, details = {}, severity = "medium", request, }: LogActivityParams): Promise<void> { try { await dbConnect() const logData: any = { adminId: new mongoose.Types.ObjectId(adminId), action, resource, resourceId, details, severity, } if (request) { const { ipAddress, userAgent } = getRequestMetadata(request) logData.ipAddress = ipAddress logData.userAgent = userAgent } const log = new AdminLog(logData) await log.save() console.log(`Admin activity logged: ${action} on ${resource} by ${adminId}`) } catch (error) { console.error("Failed to log admin activity:", error) // Don't throw error to avoid breaking the main operation } } async getActivityLogs({ page = 1, limit = 50, adminId, action, resource, severity, startDate, endDate, }: GetLogsParams = {}) { try { await dbConnect() const query: any = {} if (adminId) query.adminId = new mongoose.Types.ObjectId(adminId) if (action) query.action = action if (resource) query.resource = resource if (severity) query.severity = severity if (startDate || endDate) { query.createdAt = {} if (startDate) query.createdAt.$gte = startDate if (endDate) query.createdAt.$lte = endDate } const skip = (page - 1) * limit const [logs, total] = await Promise.all([ AdminLog.find(query).populate("adminId", "name email").sort({ createdAt: -1 }).skip(skip).limit(limit).lean(), AdminLog.countDocuments(query), ]) return { logs, pagination: { page, limit, total, pages: Math.ceil(total / limit), hasNext: page < Math.ceil(total / limit), hasPrev: page > 1, }, } } catch (error) { console.error("Failed to get admin logs:", error) throw new Error("Failed to retrieve admin logs") } } async getLogStats(days = 30) { try { await dbConnect() const startDate = new Date() startDate.setDate(startDate.getDate() - days) const stats = await AdminLog.aggregate([ { $match: { createdAt: { $gte: startDate }, }, }, { $group: { _id: { action: "$action", severity: "$severity", }, count: { $sum: 1 }, }, }, { $group: { _id: "$_id.action", severities: { $push: { severity: "$_id.severity", count: "$count", }, }, total: { $sum: "$count" }, }, }, { $sort: { total: -1 }, }, ]) const totalLogs = await AdminLog.countDocuments({ createdAt: { $gte: startDate }, }) return { stats, totalLogs, period: `${days} days`, } } catch (error) { console.error("Failed to get log stats:", error) throw new Error("Failed to retrieve log statistics") } } async deleteOldLogs(days = 90) { try { await dbConnect() const cutoffDate = new Date() cutoffDate.setDate(cutoffDate.getDate() - days) const result = await AdminLog.deleteMany({ createdAt: { $lt: cutoffDate }, }) console.log(`Deleted ${result.deletedCount} old admin logs`) return result.deletedCount } catch (error) { console.error("Failed to delete old logs:", error) throw new Error("Failed to delete old logs") } } async logAdminAction( adminId: Types.ObjectId, action: string, targetType: string, targetId?: Types.ObjectId, details: Record<string, any> = {}, ipAddress?: string, userAgent?: string, ) { try { await dbConnect() const log = new AdminLog({ adminId, action, targetType, targetId, details, ipAddress, userAgent, }) await log.save() } catch (error) { console.error("Failed to log admin action:", error) } } /** * Logs administrative activity to the database. * @param adminId The ID of the admin performing the action (can be null for system actions). * @param message A descriptive message about the action. * @param targetType The type of entity affected (e.g., 'User', 'BrandProfile', 'SystemSettings'). * @param targetId The ID of the affected entity (can be string for external IDs or ObjectId). * @param metadata Additional structured data about the action. * @param level The log level ('info', 'warn', 'error'). */ async logAdminActivity( adminId: IAdminLog["adminId"], message: IAdminLog["message"], targetType: IAdminLog["targetType"], targetId: IAdminLog["targetId"], metadata: IAdminLog["metadata"] = {}, level: IAdminLog["level"] = "info", ) { await dbConnect() try { // If adminId is null, try to get it from the current session let actualAdminId = adminId if (actualAdminId === null) { const session = await getServerSession(authOptions) if (session?.user?.role === "admin" && session.user.id) { actualAdminId = session.user.id } } const logEntry = await AdminLog.create({ timestamp: new Date(), level, message, adminId: actualAdminId, targetType, targetId, metadata, }) console.log(`Admin Logged [${level.toUpperCase()}]: ${message} (Target: ${targetType}:${targetId})`) return logEntry } catch (error) { console.error("Failed to log admin activity:", error) // Important: Do not throw here to avoid breaking the main operation } } } export const adminLogger = new AdminLogger() export default adminLogger // Helper to extract IP and User-Agent from NextRequest export const getRequestMetadata = (req: NextRequest) => { const ipAddress = req.headers.get("x-forwarded-for") || req.headers.get("x-real-ip") || req.ip || null const userAgent = req.headers.get("user-agent") || null return { ipAddress, userAgent } } [V0_FILE]typescript:file="lib/email.ts" isFixed="true" isEdit="true" isMerged="true" import nodemailer from "nodemailer" import { render } from "@react-email/render" import WelcomeEmail from "@/emails/WelcomeEmail" // Assuming you'll create this email template interface EmailOptions { to: string subject: string text: string html?: string } // Configure Nodemailer transporter const transporter = nodemailer.createTransport({ host: process.env.EMAIL_SERVER_HOST, port: Number(process.env.EMAIL_SERVER_PORT), secure: process.env.EMAIL_SERVER_PORT === "465", // true for 465, false for other ports auth: { user: process.env.EMAIL_SERVER_USER, pass: process.env.EMAIL_SERVER_PASSWORD, }, }) export const sendEmail = async ({ to, subject, text, html }: EmailOptions) => { try { await transporter.sendMail({ from: process.env.EMAIL_FROM, to, subject, text, html, }) console.log(`Email sent to ${to} with subject: ${subject}`) return { success: true } } catch (error) { console.error(`Failed to send email to ${to}:`, error) return { success: false, error } } } // Example of sending a welcome email using a React Email template export const sendWelcomeEmail = async (to: string, name: string) => { const emailHtml = render(WelcomeEmail({ userName: name })) return sendEmail({ to, subject: "Welcome to Brand Guardian AI!", text: `Hello ${name},\n\nWelcome to Brand Guardian AI! We're excited to help you maintain your brand consistency.\n\nBest regards,\nYour Brand Guardian AI Team`, html: emailHtml, }) } interface EmailConfig { host: string port: number secure: boolean auth: { user: string pass: string } } interface SendEmailParams { to: string | string[] subject: string html?: string text?: string from?: string } class EmailService { private transporter: nodemailer.Transporter | null = null constructor() { this.initializeTransporter() } private initializeTransporter() { if (!process.env.EMAIL_SERVER_HOST || !process.env.EMAIL_SERVER_USER || !process.env.EMAIL_SERVER_PASSWORD) { console.warn("Email service not configured - missing SMTP environment variables") return } const config: EmailConfig = { host: process.env.EMAIL_SERVER_HOST, port: Number(process.env.EMAIL_SERVER_PORT), secure: process.env.EMAIL_SERVER_PORT === "465", auth: { user: process.env.EMAIL_SERVER_USER, pass: process.env.EMAIL_SERVER_PASSWORD, }, } this.transporter = nodemailer.createTransport(config) } async sendEmail({ to, subject, html, text, from }: SendEmailParams): Promise<boolean> { if (!this.transporter) { console.error("Email transporter not initialized") return false } try { const mailOptions = { from: from || process.env.EMAIL_FROM || process.env.EMAIL_SERVER_USER, to: Array.isArray(to) ? to.join(", ") : to, subject, html, text, } const result = await this.transporter.sendMail(mailOptions) console.log("Email sent successfully:", result.messageId) return true } catch (error) { console.error("Failed to send email:", error) return false } } async sendWelcomeEmail(to: string, name: string): Promise<boolean> { const emailHtml = render(WelcomeEmail({ userName: name })) return this.sendEmail({ to, subject: "Welcome to Brand Guardian AI!", text: `Hello ${name},\n\nWelcome to Brand Guardian AI! We're excited to help you maintain your brand consistency.\n\nBest regards,\nYour Brand Guardian AI Team`, html: emailHtml, }) } /** * Sends a password reset email to the user. * @param to The recipient's email address. * @param resetUrl The URL for password reset. */ async sendPasswordResetEmail(to: string, resetUrl: string): Promise<boolean> { const mailOptions = { from: process.env.EMAIL_FROM, to: to, subject: "Password Reset Request for Brand Guardian AI", html: ` <p>You are receiving this because you (or someone else) have requested the reset of the password for your account.</p> <p>Please click on the following link, or paste this into your browser to complete the process:</p> <p><a href="${resetUrl}">${resetUrl}</a></p> <p>If you did not request this, please ignore this email and your password will remain unchanged.</p> <p>This link will expire in 1 hour.</p> <p>Thank you,<br/>The Brand Guardian AI Team</p> `, } try { await this.transporter.sendMail(mailOptions) console.log(`Password reset email sent to ${to}`) return true } catch (error) { console.error(`Error sending password reset email to ${to}:`, error) return false } } /** * Sends a generic notification email. * @param to The recipient's email address. * @param subject The subject of the email. * @param htmlContent The HTML content of the email. */ async sendNotificationEmail(to: string, subject: string, htmlContent: string): Promise<boolean> { const mailOptions = { from: process.env.EMAIL_FROM, to: to, subject: subject, html: htmlContent, } try { await this.transporter.sendMail(mailOptions) console.log(`Notification email sent to ${to} with subject: ${subject}`) return true } catch (error) { console.error(`Error sending notification email to ${to}:`, error) return false } } async sendAnalysisCompleteEmail(to: string, name: string, analysisName: string, score: number): Promise<boolean> { const subject = "Your Brand Analysis is Complete!" const html = ` <div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;"> <h1 style="color: #333; text-align: center;">Analysis Complete!</h1> <p>Hi ${name},</p> <p>Your brand analysis for "<strong>${analysisName}</strong>" is now complete!</p> <div style="text-align: center; margin: 30px 0;"> <div style="background-color: #f8f9fa; padding: 20px; border-radius: 10px; display: inline-block;"> <h2 style="margin: 0; color: ${score >= 80 ? "#28a745" : score >= 60 ? "#ffc107" : "#dc3545"};"> Overall Score: ${score}/100 </h2> </div> </div> <p>Log in to your dashboard to view the detailed analysis, including:</p> <ul> <li>Brand compliance scores</li> <li>Detected design elements</li> <li>AI-powered improvement suggestions</li> <li>Actionable recommendations</li> </ul> <div style="text-align: center; margin: 30px 0;"> <a href="${process.env.NEXT_PUBLIC_APP_URL}/dashboard" style="background-color: #007bff; color: white; padding: 12px 24px; text-decoration: none; border-radius: 5px; display: inline-block;">View Analysis</a> </div> <p>Best regards,<br>The Brand Guardian AI Team</p> </div> ` const text = `Hi ${name}, your brand analysis for "${analysisName}" is complete with a score of ${score}/100. Log in to view the detailed results.` return this.sendEmail({ to, subject, html, text }) } async sendSubscriptionEmail( to: string, name: string, plan: string, action: "activated" | "canceled", ): Promise<boolean> { const subject = `Subscription ${action === "activated" ? "Activated" : "Canceled"} - Brand Guardian AI` const html = ` <div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;"> <h1 style="color: #333; text-align: center;">Subscription ${action === "activated" ? "Activated" : "Canceled"}</h1> <p>Hi ${name},</p> <p>Your ${plan} subscription has been ${action}.</p> ${ action === "activated" ? ` <p>You now have access to all ${plan} features:</p> <ul> <li>${plan === "pro" ? "100" : "Unlimited"} analyses per month</li> <li>${plan === "pro" ? "10" : "Unlimited"} brand profiles</li> <li>Advanced AI insights</li> <li>Priority support</li> ${plan === "enterprise" ? "<li>API access</li><li>Custom integrations</li>" : ""} </ul> ` : ` <p>Your subscription will remain active until the end of your current billing period.</p> <p>You can reactivate your subscription at any time from your account settings.</p> ` } <div style="text-align: center; margin: 30px 0;"> <a href="${process.env.NEXT_PUBLIC_APP_URL}/dashboard" style="background-color: #007bff; color: white; padding: 12px 24px; text-decoration: none; border-radius: 5px; display: inline-block;">Go to Dashboard</a> </div> <p>Best regards,<br>The Brand Guardian AI Team</p> </div> ` const text = `Hi ${name}, your ${plan} subscription has been ${action}.` return this.sendEmail({ to, subject, html, text }) } async testConnection(): Promise<boolean> { if (!this.transporter) { return false } try { await this.transporter.verify() console.log("Email service connection verified") return true } catch (error) { console.error("Email service connection failed:", error) return false } } } export const emailService = new EmailService() [V0_FILE]typescript:file="lib/gemini.ts" isEdit="true" isMerged="true" import { GoogleGenerativeAI } from "@google/generative-ai" import { HarmBlockThreshold, HarmCategory } from "@google/generative-ai" // Initialize Google Generative AI const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY!) // Safety settings for content generation const safetySettings = [ { category: HarmCategory.HARM_CATEGORY_HARASSMENT, threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE, }, { category: HarmCategory.HARN_CATEGORY_HATE_SPEECH, threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE, }, { category: HarmCategory.HARM_CATEGORY_SEXUALLY_EXPLICIT, threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE, }, { category: HarmCategory.HARM_CATEGORY_DANGEROUS_CONTENT, threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE, }, ] /** * Generates text content using the Google Gemini Pro model. * @param prompt The text prompt for the AI. * @returns The generated text. */ export async function generateTextWithGemini(prompt: string): Promise<string> { try { const model = genAI.getGenerativeModel({ model: "gemini-pro", safetySettings }) const result = await model.generateContent(prompt) const response = await result.response const text = response.text() return text } catch (error) { console.error("Error generating text with Gemini:", error) throw new Error("Failed to generate text with AI. Please try again later.") } } /** * Generates content (e.g., analysis suggestions) from an image using Gemini Pro Vision. * @param prompt The text prompt for the AI. * @param imageBase64 The base64 encoded image data. * @param mimeType The MIME type of the image (e.g., "image/png", "image/jpeg"). * @returns The generated text. */ export async function analyzeImageWithGemini(prompt: string, imageBase64: string, mimeType: string): Promise<string> { try { const model = genAI.getGenerativeModel({ model: "gemini-pro-vision", safetySettings }) const imagePart = { inlineData: { data: imageBase64, mimeType: mimeType, }, } const result = await model.generateContent([prompt, imagePart]) const response = await result.response const text = response.text() return text } catch (error) { console.error("Error analyzing image with Gemini:", error) throw new Error("Failed to analyze image with AI. Please try again later.") } } /** * Extracts brand profile information from an image using Gemini Pro Vision. * This is a more structured analysis than a general image analysis. * @param imageBase64 The base64 encoded image data. * @param mimeType The MIME type of the image. * @returns A JSON string or structured text containing extracted brand profile details. */ export async function extractBrandProfileFromImage(imageBase64: string, mimeType: string): Promise<string> { const prompt = ` Analyze the provided image and extract key brand identity elements. Focus on: 1. **Primary Colors:** List 3-5 dominant colors in hex code format (e.g., #RRGGBB). 2. **Secondary Colors:** List 2-3 supporting colors in hex code format. 3. **Typography:** Identify the main font families used for headings and body text. Provide common font names (e.g., "Inter", "Roboto", "Open Sans"). 4. **Logo Presence/Placement:** Describe if a logo is present and its general position (e.g., "top-left", "centered", "bottom-right"). 5. **Overall Tone/Style:** Describe the general aesthetic and emotional tone conveyed (e.g., "modern and minimalist", "playful and vibrant", "professional and corporate"). Format your response as a JSON object with the following keys: { "primaryColors": ["#HEX1", "#HEX2"], "secondaryColors": ["#HEX3", "#HEX4"], "fonts": ["FontName1", "FontName2"], "logoPlacement": "description of logo presence and position", "toneAndStyle": "description of overall tone" } If a category is not clearly identifiable, use "N/A" or an empty array. ` try { const model = genAI.getGenerativeModel({ model: "gemini-pro-vision", safetySettings }) const imagePart = { inlineData: { data: imageBase64, mimeType: mimeType, }, } const result = await model.generateContent([prompt, imagePart]) const response = await result.response const text = response.text() return text } catch (error) { console.error("Error extracting brand profile with Gemini:", error) throw new Error("Failed to extract brand profile from image with AI.") } } [V0_FILE]typescript:file="lib/adobe-express.ts" isEdit="true" isMerged="true" import { logAdminActivity } from "./admin-logger" const ADOBE_AUTH_URL = "https://ims-na1.adobelogin.com/ims/authorize/v2" const ADOBE_TOKEN_URL = "https://ims-na1.adobelogin.com/ims/token/v3" const ADOBE_EXPRESS_API_BASE_URL = "https://express.adobe.io/api" // Example API base URL // Scopes required for Brand Guardian AI functionality export const REQUIRED_ADOBE_SCOPES = [ "openid", "profile", "email", "AdobeID", "express.api", "express.asset.read", "express.asset.create", "express.document.read", "express.document.edit", ] /** * Generates the Adobe Express OAuth authorization URL. * @returns The authorization URL. */ export async function getAdobeExpressAuthUrl(): Promise<string> { const clientId = process.env.ADOBE_EXPRESS_CLIENT_ID const redirectUri = process.env.ADOBE_EXPRESS_REDIRECT_URI if (!clientId || !redirectUri) { console.error("Adobe Express client ID or redirect URI not configured.") throw new Error("Adobe Express integration is not fully configured.") } const scopes = REQUIRED_ADOBE_SCOPES.join(",") const state = "random_state_string" // In a real app, generate and verify a CSRF token const authUrl = new URL(ADOBE_AUTH_URL) authUrl.searchParams.append("client_id", clientId) authUrl.searchParams.append("redirect_uri", redirectUri) authUrl.searchParams.append("scope", scopes) authUrl.searchParams.append("response_type", "code") authUrl.searchParams.append("state", state) return authUrl.toString() } /** * Exchanges an authorization code for an access token. * @param code The authorization code received from Adobe. * @returns An object containing success status and token data or error. */ export async function getAdobeExpressAccessToken(code: string): Promise<{ success: boolean accessToken?: string refreshToken?: string expiresIn?: number error?: string }> { const clientId = process.env.ADOBE_EXPRESS_CLIENT_ID const clientSecret = process.env.ADOBE_EXPRESS_CLIENT_SECRET const redirectUri = process.env.ADOBE_EXPRESS_REDIRECT_URI if (!clientId || !clientSecret || !redirectUri) { console.error("Adobe Express credentials not fully configured.") return { success: false, error: "Adobe Express integration is not fully configured." } } try { const response = await fetch(ADOBE_TOKEN_URL, { method: "POST", headers: { "Content-Type": "application/x-www-form-urlencoded", }, body: new URLSearchParams({ grant_type: "authorization_code", client_id: clientId, client_secret: clientSecret, code: code, redirect_uri: redirectUri, }).toString(), }) const data = await response.json() if (!response.ok) { console.error("Adobe token exchange failed:", data) await logAdminActivity( null, "ADOBE_AUTH_FAILED", "AdobeExpress", "N/A", { code, error: data.error_description || data.error }, "error", ) return { success: false, error: data.error_description || "Failed to obtain access token." } } await logAdminActivity( null, "ADOBE_AUTH_SUCCESS", "AdobeExpress", "N/A", { userId: "TODO: Get actual user ID from session" }, // Replace with actual user ID "info", ) return { success: true, accessToken: data.access_token, refreshToken: data.refresh_token, expiresIn: data.expires_in, } } catch (error: any) { console.error("Error during Adobe token exchange:", error) await logAdminActivity(null, "ADOBE_AUTH_EXCEPTION", "AdobeExpress", "N/A", { code, error: error.message }, "error") return { success: false, error: error.message || "An unexpected error occurred during authentication." } } } /** * Refreshes an Adobe Express access token using a refresh token. * @param refreshToken The refresh token. * @returns An object containing success status and new token data or error. */ export async function refreshAdobeExpressAccessToken(refreshToken: string): Promise<{ success: boolean accessToken?: string expiresIn?: number error?: string }> { const clientId = process.env.ADOBE_EXPRESS_CLIENT_ID const clientSecret = process.env.ADOBE_EXPRESS_CLIENT_SECRET if (!clientId || !clientSecret) { console.error("Adobe Express credentials not fully configured.") return { success: false, error: "Adobe Express integration is not fully configured." } } try { const response = await fetch(ADOBE_TOKEN_URL, { method: "POST", headers: { "Content-Type": "application/x-www-form-urlencoded", }, body: new URLSearchParams({ grant_type: "refresh_token", client_id: clientId, client_secret: clientSecret, refresh_token: refreshToken, }).toString(), }) const data = await response.json() if (!response.ok) { console.error("Adobe token refresh failed:", data) await logAdminActivity( null, "ADOBE_TOKEN_REFRESH_FAILED", "AdobeExpress", "N/A", { error: data.error_description || data.error }, "error", ) return { success: false, error: data.error_description || "Failed to refresh access token." } } return { success: true, accessToken: data.access_token, expiresIn: data.expires_in, } } catch (error: any) { console.error("Error during Adobe token refresh:", error) await logAdminActivity( null, "ADOBE_TOKEN_REFRESH_EXCEPTION", "AdobeExpress", "N/A", { error: error.message }, "error", ) return { success: false, error: error.message || "An unexpected error occurred during token refresh." } } } /** * Makes an authenticated API call to Adobe Express. * @param accessToken The user's Adobe Express access token. * @param endpoint The API endpoint relative to ADOBE_EXPRESS_API_BASE_URL (e.g., "/documents"). * @param method HTTP method (GET, POST, PUT, DELETE). * @param body Optional: Request body for POST/PUT. * @returns The API response data. */ export async function callAdobeExpressApi( accessToken: string, endpoint: string, method = "GET", body?: any, ): Promise<any> { try { const url = `${ADOBE_EXPRESS_API_BASE_URL}${endpoint}` const headers: HeadersInit = { Authorization: `Bearer ${accessToken}`, "Content-Type": "application/json", } const config: RequestInit = { method, headers, body: body ? JSON.stringify(body) : undefined, } const response = await fetch(url, config) const data = await response.json() if (!response.ok) { console.error(`Adobe Express API call failed for ${endpoint}:`, data) await logAdminActivity( null, "ADOBE_API_CALL_FAILED", "AdobeExpress", endpoint, { method, status: response.status, error: data }, "error", ) throw new Error(data.message || `Adobe Express API error: ${response.status}`) } return data } catch (error: any) { console.error("Error calling Adobe Express API:", error) await logAdminActivity( null, "ADOBE_API_CALL_EXCEPTION", "AdobeExpress", endpoint, { method, error: error.message }, "error", ) throw error } } [V0_FILE]typescript:file="lib/adobe-auth.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import { fetch } from "node-fetch" import { logAdminActivity } from "./admin-logger" const ADOBE_AUTH_URL = "https://ims-na1.adobelogin.com/ims/authorize/v2" const ADOBE_TOKEN_URL = "https://ims-na1.adobelogin.com/ims/token/v3" export const getAdobeAuthUrl = () => { const params = new URLSearchParams({ client_id: process.env.ADOBE_EXPRESS_CLIENT_ID!, response_type: "code", redirect_uri: process.env.ADOBE_EXPRESS_REDIRECT_URI!, scope: process.env.ADOBE_EXPRESS_SCOPES!, }) return `${ADOBE_AUTH_URL}?${params.toString()}` } export const getAdobeAccessToken = async (code: string) => { const params = new URLSearchParams({ grant_type: "authorization_code", client_id: process.env.ADOBE_EXPRESS_CLIENT_ID!, client_secret: process.env.ADOBE_EXPRESS_CLIENT_SECRET!, code, redirect_uri: process.env.ADOBE_EXPRESS_REDIRECT_URI!, }) try { const response = await fetch(ADOBE_TOKEN_URL, { method: "POST", headers: { "Content-Type": "application/x-www-form-urlencoded", }, body: params.toString(), }) if (!response.ok) { const errorData = await response.json() console.error("Adobe token exchange failed:", errorData) throw new Error(`Adobe token exchange failed: ${errorData.error_description || response.statusText}`) } const data = await response.json() return data.access_token } catch (error) { console.error("Error getting Adobe access token:", error) throw error } } // In a real application, you'd store this token securely (e.g., in a database // associated with the user) and refresh it when it expires. // For this demo, we'll simulate fetching it. let cachedAccessToken: string | null = null let tokenExpiry: number | null = null export const setCachedAccessToken = (token: string, expiresIn: number) => { cachedAccessToken = token tokenExpiry = Date.now() + expiresIn * 1000 - 60000 // 1 minute buffer } export const getAccessToken = async (): Promise<string | null> => { // In a real app, you'd check if the token is expired and refresh it. // For this demo, we'll just return the cached one or null. if (cachedAccessToken && tokenExpiry && Date.now() < tokenExpiry) { return cachedAccessToken } // Simulate fetching from a persistent store or refreshing console.warn("Adobe Express access token not cached or expired. Please re-authenticate if necessary.") return null } /** * Initiates the Adobe Express OAuth flow by returning the authorization URL. * @returns The Adobe Express authorization URL. */ export async function initiateAdobeExpressAuth(): Promise<string> { try { const authUrl = getAdobeAuthUrl() return authUrl } catch (error: any) { console.error("Error initiating Adobe Express auth:", error) await logAdminActivity(null, "ADOBE_AUTH_INIT_FAILED", "AdobeExpress", "N/A", { error: error.message }, "error") throw new Error("Failed to initiate Adobe Express authentication.") } } /** * Handles the Adobe Express OAuth callback, exchanging the code for tokens. * In a real application, this would also store the tokens securely (e.g., in a database * associated with the user's account). * @param code The authorization code from Adobe. * @returns A success status. */ export async function handleAdobeExpressCallback(code: string): Promise<{ success: boolean; error?: string }> { try { const accessToken = await getAdobeAccessToken(code) if (accessToken) { // TODO: Store accessToken, refreshToken, expiresIn in your database associated with the current user's session. // For this example, we'll just log it. console.log("Adobe Express Access Token obtained:", accessToken) await logAdminActivity( null, "ADOBE_CALLBACK_HANDLED", "AdobeExpress", "N/A", { userId: "TODO: Get actual user ID from session" }, // Replace with actual user ID "info", ) return { success: true } } else { await logAdminActivity( null, "ADOBE_CALLBACK_FAILED", "AdobeExpress", "N/A", { code, error: "No access token returned." }, "error", ) return { success: false, error: "Failed to obtain Adobe Express tokens." } } } catch (error: any) { console.error("Error handling Adobe Express callback:", error) await logAdminActivity( null, "ADOBE_CALLBACK_EXCEPTION", "AdobeExpress", "N/A", { code, error: error.message }, "error", ) throw new Error("An unexpected error occurred during Adobe Express callback.") } } /** * Retrieves the current user's Adobe Express access token from storage. * In a real application, this would fetch the token from your database. * For this example, it's a placeholder. * @returns The access token or null if not found/expired. */ export async function getStoredAdobeExpressAccessToken(): Promise<string | null> { // TODO: Implement actual token retrieval from your database based on the current user. // This is a placeholder. console.warn("Placeholder: getStoredAdobeExpressAccessToken is not implemented for persistent storage.") return null // Replace with actual token from DB } /** * Checks if the user is authenticated with Adobe Express. * @returns True if authenticated, false otherwise. */ export async function isAdobeExpressAuthenticated(): Promise<boolean> { // In a real app, this would check if a valid, unexpired access token exists for the user. const accessToken = await getStoredAdobeExpressAccessToken() return !!accessToken } [V0_FILE]typescript:file="lib/adobe-permissions.ts" isFixed="true" isEdit="true" isMerged="true" import { app, editor } from "@adobe/ccweb-add-on-sdk" import { getAddOnInfo } from "@adobe/exc-sdk" import type { Permission } from "@adobe/express-add-on-sdk-react" import { getStoredAdobeExpressAccessToken, isAdobeExpressAuthenticated } from "@/lib/adobe-auth" import { logAdminActivity } from "./admin-logger" export type PermissionStatus = "granted" | "denied" | "prompt" export interface AddOnPermissions { documentAccess: PermissionStatus documentModify: PermissionStatus exportDocument: PermissionStatus userProfile: PermissionStatus cloudStorage: PermissionStatus notifications: PermissionStatus selectionAccess: PermissionStatus selectionModify: PermissionStatus clipboardRead: PermissionStatus clipboardWrite: PermissionStatus networkAccess: PermissionStatus } // Define the permissions required by your Adobe Express add-on. // These permissions will be requested from the user when the add-on is installed or used. export const REQUIRED_PERMISSIONS: Permission[] = [ { name: "document", kind: "read", description: "Read document content for analysis.", }, { name: "document", kind: "write", description: "Apply changes (e.g., colors, fonts) to the document.", }, { name: "selection", kind: "read", description: "Read selected elements for targeted actions.", }, { name: "selection", kind: "write", description: "Modify selected elements (e.g., change text, apply styles).", }, { name: "clipboard", kind: "read", description: "Read clipboard content (if your add-on needs to paste).", }, { name: "clipboard", kind: "write", description: "Write to clipboard (if your add-on needs to copy).", }, { name: "profile", kind: "read", description: "Read user profile information (e.g., name, email).", }, { name: "network", kind: "full", description: "Access external APIs for AI analysis and data storage.", }, // Add any other permissions your add-on might need ] class PermissionManager { private permissions: AddOnPermissions | null = null async checkAllPermissions(): Promise<AddOnPermissions> { try { const permissions: AddOnPermissions = { documentAccess: await this.checkPermission("document:read", "Read document content", true), documentModify: await this.checkPermission("document:write", "Modify document elements", true), exportDocument: await this.checkPermission("document:export", "Export document as image", true), userProfile: await this.checkPermission("user:profile", "Access user profile information", false), cloudStorage: await this.checkPermission("cloud:storage", "Save analysis results to cloud", false), notifications: await this.checkPermission("app:notifications", "Show notifications", false), selectionAccess: await this.checkPermission("selection:read", "Read selected elements", true), selectionModify: await this.checkPermission("selection:write", "Modify selected elements", true), clipboardRead: await this.checkPermission("clipboard:read", "Read clipboard content", false), clipboardWrite: await this.checkPermission("clipboard:write", "Write to clipboard", false), networkAccess: await this.checkPermission("network:full", "Access external APIs", false), } this.permissions = permissions return permissions } catch (error) { console.error("Permission check failed:", error) throw new Error("Failed to check permissions") } } private async checkPermission(permission: string, description: string, required: boolean): Promise<PermissionStatus> { try { let granted = false switch (permission) { case "document:read": const documentPermissions = await checkDocumentPermissions() granted = documentPermissions.canRead break case "document:write": const documentPermissionsWrite = await checkDocumentPermissions() granted = documentPermissionsWrite.canWrite break case "document:export": try { // Test export capability await editor.exportDocument({ format: "png", scale: 0.1 }) granted = true } catch { granted = false } break case "user:profile": const profilePermissions = await checkProfilePermissions() granted = profilePermissions.canRead break case "cloud:storage": // This would be our own cloud storage permission granted = true break case "app:notifications": try { // Test notification capability granted = typeof app.showModalDialog === "function" } catch { granted = false } break case "selection:read": const selectionPermissions = await checkSelectionPermissions() granted = selectionPermissions.canRead break case "selection:write": const selectionPermissionsWrite = await checkSelectionPermissions() granted = selectionPermissionsWrite.canWrite break case "clipboard:read": const clipboardPermissions = await checkClipboardPermissions() granted = clipboardPermissions.canRead break case "clipboard:write": const clipboardPermissionsWrite = await checkClipboardPermissions() granted = clipboardPermissionsWrite.canWrite break case "network:full": const networkPermissions = await checkNetworkPermissions() granted = networkPermissions.canAccessFullNetwork break default: granted = false } return granted ? "granted" : "denied" } catch (error) { return "denied" } } async requestPermissions(): Promise<boolean> { try { const permissions = await this.checkAllPermissions() const missingRequired = Object.entries(permissions).filter( ([key, value]) => REQUIRED_PERMISSIONS.some((p) => `${p.name}:${p.kind}` === key) && value !== "granted", ) if (missingRequired.length > 0) { // Show permission request dialog const granted = await this.showPermissionDialog(missingRequired) if (!granted) { return false } // Re-check permissions after user action await this.checkAllPermissions() } return true } catch (error) { console.error("Permission request failed:", error) return false } } private async showPermissionDialog(missingPermissions: [string, PermissionStatus][]): Promise<boolean> { try { const result = await app.showModalDialog({ variant: "warning", title: "Permissions Required", description: `Brand Guardian AI needs the following permissions to work properly:\n\n${missingPermissions .map(([key, value]) => `• ${value}`) .join("\n")}`, buttonLabels: { primary: "Grant Permissions", secondary: "Cancel", }, }) return result.buttonType === "primary" } catch (error) { console.error("Permission dialog failed:", error) return false } } getPermissions(): AddOnPermissions | null { return this.permissions } hasRequiredPermissions(): boolean { if (!this.permissions) return false return Object.values(this.permissions).every((p) => p === "granted") } async validateDocumentAccess(): Promise<boolean> { try { await editor.getDocument() return true } catch (error) { console.error("Document access validation failed:", error) return false } } async validateModifyAccess(): Promise<boolean> { try { const doc = await editor.getDocument() // Test if we can access document structure return doc.pages && doc.pages.length > 0 } catch (error) { console.error("Modify access validation failed:", error) return false } } async checkAdobePermissions(): Promise<{ hasEditAccess: boolean hasStorageAccess: boolean hasFullAccess: boolean }> { try { const addOnInfo = await getAddOnInfo() const permissions = addOnInfo?.permissions || [] const hasEditAccess = permissions.includes("document:edit") const hasStorageAccess = permissions.includes("storage:read") && permissions.includes("storage:write") const hasFullAccess = hasEditAccess && hasStorageAccess // Example of combining permissions return { hasEditAccess, hasStorageAccess, hasFullAccess } } catch (error) { console.error("Error checking Adobe permissions:", error) // If SDK is not initialized or other error, assume no permissions return { hasEditAccess: false, hasStorageAccess: false, hasFullAccess: false } } } async requestAdobePermissions(permissions: string[]): Promise<boolean> { try { // In a real scenario, you would use the Adobe Express SDK's requestPermissions API // For now, this is a mock. The actual SDK call would trigger a user consent dialog. console.log("Mock: Requesting Adobe permissions:", permissions) // await requestPermissions(permissions); // This is the actual SDK call return true // Assume success for mock } catch (error) { console.error("Error requesting Adobe permissions:", error) return false } } } export const permissionManager = new PermissionManager() /** * Checks if the add-on has all the required permissions. * @returns A promise that resolves to true if all permissions are granted, false otherwise. */ export async function checkAllPermissionsGranted(): Promise<boolean> { if (!window.adobe?.express?.api?.permissions) { console.warn("Adobe Express SDK permissions API not available.") return false } try { const grantedPermissions = await window.adobe.express.api.permissions.get() const grantedSet = new Set(grantedPermissions.map((p) => `${p.name}:${p.kind}`)) for (const required of REQUIRED_PERMISSIONS) { if (!grantedSet.has(`${required.name}:${required.kind}`)) { console.log(`Missing required permission: ${required.name}:${required.kind}`) return false } } return true } catch (error) { console.error("Error checking permissions:", error) return false } } /** * Requests any missing permissions from the user. * @returns A promise that resolves to true if all permissions are now granted, false otherwise. */ export async function requestMissingPermissions(): Promise<boolean> { if (!window.adobe?.express?.api?.permissions) { console.warn("Adobe Express SDK permissions API not available.") return false } try { const grantedPermissions = await window.adobe.express.api.permissions.get() const grantedSet = new Set(grantedPermissions.map((p) => `${p.name}:${p.kind}`)) const permissionsToRequest = REQUIRED_PERMISSIONS.filter( (required) => !grantedSet.has(`${required.name}:${required.kind}`), ) if (permissionsToRequest.length > 0) { console.log("Requesting missing permissions:", permissionsToRequest) await window.adobe.express.api.permissions.request(permissionsToRequest) // After requesting, re-check if they were granted return checkAllPermissionsGranted() } return true // No missing permissions to request } catch (error) { console.error("Error requesting permissions:", error) return false } } export async function checkDocumentPermissions(): Promise<{ canRead: boolean; canWrite: boolean }> { try { const permissions = await editor.document.getPermissions() return { canRead: permissions.read, canWrite: permissions.write, } } catch (error) { console.error("Error checking document permissions:", error) return { canRead: false, canWrite: false } } } export async function checkSelectionPermissions(): Promise<{ canRead: boolean; canWrite: boolean }> { try { const permissions = await editor.selection.getPermissions() return { canRead: permissions.read, canWrite: permissions.write, } } catch (error) { console.error("Error checking selection permissions:", error) return { canRead: false, canWrite: false } } } export async function checkClipboardPermissions(): Promise<{ canRead: boolean; canWrite: boolean }> { try { const permissions = await editor.clipboard.getPermissions() return { canRead: permissions.read, canWrite: permissions.write, } } catch (error) { console.error("Error checking clipboard permissions:", error) return { canRead: false, canWrite: false } } } export async function checkProfilePermissions(): Promise<{ canRead: boolean }> { try { const permissions = await editor.profile.getPermissions() return { canRead: permissions.read, } } catch (error) { console.error("Error checking profile permissions:", error) return { canRead: false } } } export async function checkNetworkPermissions(): Promise<{ canAccessFullNetwork: boolean }> { try { const permissions = await editor.network.getPermissions() return { canAccessFullNetwork: permissions.full, } } catch (error) { console.error("Error checking network permissions:", error) return { canAccessFullNetwork: false } } } export async function checkPermission(permission: string): Promise<PermissionStatus> { // Simulate permission check. In a real add-on, this would use the SDK. console.log(`Simulating checking permission for: ${permission}`) // Example: // const status = await window.adobeXd.permissions.get(permission); // return status; return "granted" // Assume granted for demo purposes } export async function requestPermission(permission: string): Promise<boolean> { // Simulate permission request. In a real add-on, this would use the SDK. console.log(`Simulating requesting permission for: ${permission}`) // Example: // const granted = await window.adobeXd.permissions.request(permission); // return granted; return true // Assume granted for demo purposes } /** * Checks if the current user has the specified Adobe Express permissions. * This function would typically query an Adobe API endpoint that lists granted scopes/permissions. * For demonstration, it simulates the check. * @param requiredPermissions An array of permission strings (scopes) to check. * @returns An object indicating if all permissions are granted and a list of missing ones. */ export async function checkAdobeExpressPermissions(requiredPermissions: string[]): Promise<{ success: boolean hasAllPermissions: boolean missingPermissions: string[] error?: string }> { try { const isAuthenticated = await isAdobeExpressAuthenticated() if (!isAuthenticated) { return { success: false, hasAllPermissions: false, missingPermissions: requiredPermissions, error: "User not authenticated with Adobe Express.", } } const accessToken = await getStoredAdobeExpressAccessToken() if (!accessToken) { return { success: false, hasAllPermissions: false, missingPermissions: requiredPermissions, error: "Access token not found.", } } // In a real scenario, you would call an Adobe API endpoint // that returns the currently granted scopes for the access token. // Example: const grantedScopes = await callAdobeExpressApi(accessToken, "/user/scopes"); // For this example, we'll simulate granted scopes. const simulatedGrantedScopes = [ "openid", "profile", "email", "AdobeID", "express.api", "express.asset.read", "express.document.read", ] // Simulate some granted scopes const missingPermissions = requiredPermissions.filter((perm) => !simulatedGrantedScopes.includes(perm)) const hasAllPermissions = missingPermissions.length === 0 if (!hasAllPermissions) { await logAdminActivity( null, "ADOBE_MISSING_PERMISSIONS", "AdobeExpress", "N/A", { missing: missingPermissions }, "warn", ) } return { success: true, hasAllPermissions, missingPermissions, } } catch (error: any) { console.error("Error checking Adobe Express permissions:", error) await logAdminActivity( null, "ADOBE_PERMISSION_CHECK_EXCEPTION", "AdobeExpress", "N/A", { error: error.message }, "error", ) return { success: false, hasAllPermissions: false, missingPermissions: requiredPermissions, error: error.message } } } [V0_FILE]plaintext:file=".env.example" isFixed="true" isEdit="true" isMerged="true" # MongoDB Connection MONGODB_URI="mongodb://localhost:27017/brandguardian" # NextAuth.js Configuration NEXTAUTH_SECRET="your_nextauth_secret_here" # openssl rand -base64 32 NEXTAUTH_URL="http://localhost:3000" # Your application's URL NEXTAUTH_JWT_SECRET="your_nextauth_jwt_secret_here" # openssl rand -base64 32 # Google OAuth Provider (Optional, for social login) GOOGLE_CLIENT_ID="your_google_client_id" GOOGLE_CLIENT_SECRET="your_google_client_secret" # GitHub OAuth Provider (Optional, for social login) GITHUB_CLIENT_ID="your_github_client_id" GITHUB_CLIENT_SECRET="your_github_client_secret" # Gemini AI API Key GEMINI_API_KEY="your_gemini_api_key" # Cloudinary for Image Uploads (Optional, but recommended for image storage) CLOUDINARY_CLOUD_NAME="your_cloudinary_cloud_name" CLOUDINARY_API_KEY="your_cloudinary_api_key" CLOUDINARY_API_SECRET="your_cloudinary_api_secret" # Stripe for Payments (Optional, for premium features) STRIPE_SECRET_KEY="your_stripe_secret_key" STRIPE_WEBHOOK_SECRET="your_stripe_webhook_secret" STRIPE_PRO_PRICE_ID="price_12345" # Replace with your Stripe Pro plan price ID STRIPE_ENTERPRISE_PRICE_ID="price_67890" # Replace with your Stripe Enterprise plan price ID NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="your_stripe_publishable_key" # Adobe Express Add-on Configuration (for in-app integration) ADOBE_EXPRESS_CLIENT_ID="your_adobe_express_client_id" ADOBE_EXPRESS_CLIENT_SECRET="your_adobe_express_client_secret" ADOBE_EXPRESS_REDIRECT_URI="http://localhost:3000/api/adobe-express/callback" # Must match your Adobe Console redirect URI ADOBE_EXPRESS_SCOPES="openid,profile,email,adobeid,creative_cloud,cc_share,cc_libraries,cc_files,assets.read,assets.write,document_cloud" # Required scopes for Adobe Express ADOBE_EXPRESS_WEBHOOK_SECRET="your_adobe_express_webhook_secret_here" # Optional, if you set up webhooks # Public URL for the application (used by Adobe Express add-on and emails) NEXT_PUBLIC_APP_URL="http://localhost:3000" # Your application's public URL # Email Sending (Optional, for password resets, etc.) EMAIL_SERVER_HOST="smtp.example.com" EMAIL_SERVER_PORT="587" EMAIL_SERVER_USER="your_email_user" EMAIL_SERVER_PASSWORD="your_email_password" EMAIL_FROM="no-reply@yourdomain.com" # Realtime Notifications (Optional, for SSE/WebSockets) # No specific environment variables needed for the basic SSE implementation, # but if you use a third-party service like Pusher or Ably, their keys would go here. [V0_FILE]typescriptreact:file="components/ui/progress.tsx" isEdit="true" isMerged="true" "use client" import * as React from "react" import * as ProgressPrimitive from "@radix-ui/react-progress" import { cn } from "@/lib/utils" const Progress = React.forwardRef< React.ElementRef<typeof ProgressPrimitive.Root>, React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> >(({ className, value, ...props }, ref) => ( <ProgressPrimitive.Root ref={ref} className={cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className)} {...props} > <ProgressPrimitive.Indicator className="h-full w-full flex-1 bg-primary transition-all" style={{ transform: `translateX(-${100 - (value || 0)}%)` }} /> </ProgressPrimitive.Root> )) Progress.displayName = ProgressPrimitive.Root.displayName export { Progress } [V0_FILE]typescriptreact:file="components/ui/select.tsx" isEdit="true" isMerged="true" "use client" import * as React from "react" import * as SelectPrimitive from "@radix-ui/react-select" import { Check, ChevronDown } from "lucide-react" import { cn } from "@/lib/utils" const Select = SelectPrimitive.Root const SelectGroup = SelectPrimitive.Group const SelectValue = SelectPrimitive.Value const SelectTrigger = React.forwardRef< React.ElementRef<typeof SelectPrimitive.Trigger>, React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> >(({ className, children, ...props }, ref) => ( <SelectPrimitive.Trigger ref={ref} className={cn( "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", className, )} {...props} > {children} <SelectPrimitive.Icon asChild> <ChevronDown className="h-4 w-4 opacity-50" /> </SelectPrimitive.Icon> </SelectPrimitive.Trigger> )) SelectTrigger.displayName = SelectPrimitive.Trigger.displayName const SelectContent = React.forwardRef< React.ElementRef<typeof SelectPrimitive.Content>, React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> >(({ className, children, position = "popper", ...props }, ref) => ( <SelectPrimitive.Portal> <SelectPrimitive.Content ref={ref} className={cn( "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className, )} position={position} {...props} > <SelectPrimitive.Viewport className={cn( "p-1", position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]", )} > {children} </SelectPrimitive.Viewport> </SelectPrimitive.Content> </SelectPrimitive.Portal> )) SelectContent.displayName = SelectPrimitive.Content.displayName const SelectLabel = React.forwardRef< React.ElementRef<typeof SelectPrimitive.Label>, React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> >(({ className, ...props }, ref) => ( <SelectPrimitive.Label ref={ref} className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)} {...props} /> )) SelectLabel.displayName = SelectPrimitive.Label.displayName const SelectItem = React.forwardRef< React.ElementRef<typeof SelectPrimitive.Item>, React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> >(({ className, children, ...props }, ref) => ( <SelectPrimitive.Item ref={ref} className={cn( "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className, )} {...props} > <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> <SelectPrimitive.ItemIndicator> <Check className="h-4 w-4" /> </SelectPrimitive.ItemIndicator> </span> <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText> </SelectPrimitive.Item> )) SelectItem.displayName = SelectPrimitive.Item.displayName const SelectSeparator = React.forwardRef< React.ElementRef<typeof SelectPrimitive.Separator>, React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> >(({ className, ...props }, ref) => ( <SelectPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} /> )) SelectSeparator.displayName = SelectPrimitive.Separator.displayName export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator } [V0_FILE]typescriptreact:file="components/ui/switch.tsx" isEdit="true" isMerged="true" "use client" import * as React from "react" import * as SwitchPrimitives from "@radix-ui/react-switch" import { cn } from "@/lib/utils" const Switch = React.forwardRef< React.ElementRef<typeof SwitchPrimitives.Root>, React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> >(({ className, ...props }, ref) => ( <SwitchPrimitives.Root className={cn( "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input", className, )} {...props} ref={ref} > <SwitchPrimitives.Thumb className={cn( "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0", )} /> </SwitchPrimitives.Root> )) Switch.displayName = SwitchPrimitives.Root.displayName export { Switch } [V0_FILE]typescriptreact:file="components/ui/tabs.tsx" isEdit="true" isMerged="true" "use client" import * as React from "react" import * as TabsPrimitive from "@radix-ui/react-tabs" import { cn } from "@/lib/utils" const Tabs = TabsPrimitive.Root const TabsList = React.forwardRef< React.ElementRef<typeof TabsPrimitive.List>, React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> >(({ className, ...props }, ref) => ( <TabsPrimitive.List ref={ref} className={cn( "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground", className, )} {...props} /> )) TabsList.displayName = TabsPrimitive.List.displayName const TabsTrigger = React.forwardRef< React.ElementRef<typeof TabsPrimitive.Trigger>, React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> >(({ className, ...props }, ref) => ( <TabsPrimitive.Trigger ref={ref} className={cn( "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm", className, )} {...props} /> )) TabsTrigger.displayName = TabsPrimitive.Trigger.displayName const TabsContent = React.forwardRef< React.ElementRef<typeof TabsPrimitive.Content>, React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> >(({ className, ...props }, ref) => ( <TabsPrimitive.Content ref={ref} className={cn( "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", className, )} {...props} /> )) TabsContent.displayName = TabsPrimitive.Content.displayName export { Tabs, TabsList, TabsTrigger, TabsContent } [V0_FILE]typescriptreact:file="components/ui/alert.tsx" isEdit="true" isMerged="true" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const alertVariants = cva( "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", { variants: { variant: { default: "bg-background text-foreground", destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive", }, }, defaultVariants: { variant: "default", }, }, ) const Alert = React.forwardRef< HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants> >(({ className, variant, ...props }, ref) => ( <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} /> )) Alert.displayName = "Alert" const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>( ({ className, ...props }, ref) => ( <h5 ref={ref} className={cn("mb-1 font-medium leading-none tracking-tight", className)} {...props} /> ), ) AlertTitle.displayName = "AlertTitle" const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>( ({ className, ...props }, ref) => ( <div ref={ref} className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} /> ), ) AlertDescription.displayName = "AlertDescription" export { Alert, AlertTitle, AlertDescription } [V0_FILE]typescriptreact:file="components/ui/toaster.tsx" isEdit="true" isMerged="true" "use client" import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/toast" import { useToast } from "@/components/ui/use-toast" export function Toaster() { const { toasts } = useToast() return ( <ToastProvider> {toasts.map(({ id, title, description, action, ...props }) => ( <Toast key={id} {...props}> <div className="grid gap-1"> {title && <ToastTitle>{title}</ToastTitle>} {description && <ToastDescription>{description}</ToastDescription>} </div> {action} <ToastClose /> </Toast> ))} <ToastViewport /> </ToastProvider> ) } [V0_FILE]typescriptreact:file="components/ui/skeleton.tsx" isEdit="true" isMerged="true" import type React from "react" import { cn } from "@/lib/utils" function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) { return <div className={cn("animate-pulse rounded-md bg-muted", className)} {...props} /> } export { Skeleton } [V0_FILE]typescriptreact:file="components/ui/loading-spinner.tsx" isEdit="true" isMerged="true" import type React from "react" import { cn } from "@/lib/utils" import { Loader2 } from "lucide-react" interface LoadingSpinnerProps extends React.HTMLAttributes<HTMLDivElement> { size?: "sm" | "md" | "lg" | "xl" color?: string } const sizeClasses = { sm: "h-4 w-4", md: "h-6 w-6", lg: "h-8 w-8", xl: "h-12 w-12", } export function LoadingSpinner({ size = "md", color, className, ...props }: LoadingSpinnerProps) { return ( <div className={cn("flex items-center justify-center", className)} {...props}> <Loader2 className={cn("animate-spin", sizeClasses[size], color ? `text-${color}` : "text-primary")} /> </div> ) } [V0_FILE]typescriptreact:file="components/ui/error-boundary.tsx" isEdit="true" isMerged="true" "use client" import React from "react" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" import { Button } from "@/components/ui/button" import { TriangleAlert } from "lucide-react" interface ErrorBoundaryProps { children: React.ReactNode } interface ErrorBoundaryState { hasError: boolean error: Error | null errorInfo: React.ErrorInfo | null } class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> { constructor(props: ErrorBoundaryProps) { super(props) this.state = { hasError: false, error: null, errorInfo: null } } static getDerivedStateFromError(error: Error): ErrorBoundaryState { // Update state so the next render will show the fallback UI. return { hasError: true, error, errorInfo: null } } componentDidCatch(error: Error, errorInfo: React.ErrorInfo) { // You can also log the error to an error reporting service console.error("Uncaught error in ErrorBoundary:", error, errorInfo) this.setState({ errorInfo }) } render() { if (this.state.hasError) { // You can render any custom fallback UI return ( <div className="flex min-h-screen items-center justify-center p-4"> <Alert variant="destructive" className="max-w-md"> <TriangleAlert className="h-4 w-4" /> <AlertTitle>Something went wrong!</AlertTitle> <AlertDescription> <p className="mb-2">An unexpected error occurred. Please try again.</p> {process.env.NODE_ENV === "development" && this.state.error && ( <details className="mt-2 text-xs"> <summary>Error Details</summary> <pre className="mt-2 whitespace-pre-wrap rounded-md bg-red-900 p-2 text-red-100"> {this.state.error.toString()} <br /> {this.state.errorInfo?.componentStack} </pre> </details> )} <Button onClick={() => window.location.reload()} className="mt-4"> Reload Page </Button> </AlertDescription> </Alert> </div> ) } return this.props.children } } export { ErrorBoundary } [V0_FILE]typescriptreact:file="components/ui/avatar.tsx" isEdit="true" isMerged="true" "use client" import * as React from "react" import * as AvatarPrimitive from "@radix-ui/react-avatar" import { cn } from "@/lib/utils" const Avatar = React.forwardRef< React.ElementRef<typeof AvatarPrimitive.Root>, React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> >(({ className, ...props }, ref) => ( <AvatarPrimitive.Root ref={ref} className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)} {...props} /> )) Avatar.displayName = AvatarPrimitive.Root.displayName const AvatarImage = React.forwardRef< React.ElementRef<typeof AvatarPrimitive.Image>, React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> >(({ className, ...props }, ref) => ( <AvatarPrimitive.Image ref={ref} className={cn("aspect-square h-full w-full", className)} {...props} /> )) AvatarImage.displayName = AvatarPrimitive.Image.displayName const AvatarFallback = React.forwardRef< React.ElementRef<typeof AvatarPrimitive.Fallback>, React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> >(({ className, ...props }, ref) => ( <AvatarPrimitive.Fallback ref={ref} className={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)} {...props} /> )) AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName export { Avatar, AvatarImage, AvatarFallback } [V0_FILE]typescriptreact:file="components/ui/dropdown-menu.tsx" isEdit="true" isMerged="true" "use client" import * as React from "react" import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu" import { Check, ChevronRight, DotIcon as DotFilled } from "lucide-react" import { cn } from "@/lib/utils" const DropdownMenu = DropdownMenuPrimitive.Root const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger const DropdownMenuGroup = DropdownMenuPrimitive.Group const DropdownMenuPortal = DropdownMenuPrimitive.Portal const DropdownMenuSub = DropdownMenuPrimitive.Sub const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup const DropdownMenuSubTrigger = React.forwardRef< React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>, React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & { inset?: boolean } >(({ className, inset, children, ...props }, ref) => ( <DropdownMenuPrimitive.SubTrigger ref={ref} className={cn( "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent", inset && "pl-8", className, )} {...props} > {children} <ChevronRight className="ml-auto h-4 w-4" /> </DropdownMenuPrimitive.SubTrigger> )) DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName const DropdownMenuSubContent = React.forwardRef< React.ElementRef<typeof DropdownMenuPrimitive.SubContent>, React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> >(({ className, ...props }, ref) => ( <DropdownMenuPrimitive.SubContent ref={ref} className={cn( "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className, )} {...props} /> )) DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName const DropdownMenuContent = React.forwardRef< React.ElementRef<typeof DropdownMenuPrimitive.Content>, React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> >(({ className, sideOffset = 4, ...props }, ref) => ( <DropdownMenuPrimitive.Portal> <DropdownMenuPrimitive.Content ref={ref} sideOffset={sideOffset} className={cn( "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className, )} {...props} /> </DropdownMenuPrimitive.Portal> )) DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName const DropdownMenuItem = React.forwardRef< React.ElementRef<typeof DropdownMenuPrimitive.Item>, React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & { inset?: boolean } >(({ className, inset, ...props }, ref) => ( <DropdownMenuPrimitive.Item ref={ref} className={cn( "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "pl-8", className, )} {...props} /> )) DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName const DropdownMenuCheckboxItem = React.forwardRef< React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>, React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> >(({ className, children, checked, ...props }, ref) => ( <DropdownMenuPrimitive.CheckboxItem ref={ref} className={cn( "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className, )} checked={checked} {...props} > <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> <DropdownMenuPrimitive.ItemIndicator> <Check className="h-4 w-4" /> </DropdownMenuPrimitive.ItemIndicator> </span> {children} </DropdownMenuPrimitive.CheckboxItem> )) DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName const DropdownMenuRadioItem = React.forwardRef< React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>, React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> >(({ className, children, ...props }, ref) => ( <DropdownMenuPrimitive.RadioItem ref={ref} className={cn( "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className, )} {...props} > <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> <DropdownMenuPrimitive.ItemIndicator> <DotFilled className="h-4 w-4 fill-current" /> </DropdownMenuPrimitive.ItemIndicator> </span> {children} </DropdownMenuPrimitive.RadioItem> )) DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName const DropdownMenuLabel = React.forwardRef< React.ElementRef<typeof DropdownMenuPrimitive.Label>, React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & { inset?: boolean } >(({ className, inset, ...props }, ref) => ( <DropdownMenuPrimitive.Label ref={ref} className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)} {...props} /> )) DropdownMenuLabel.displayName = "DropdownMenuLabel" const DropdownMenuSeparator = React.forwardRef< React.ElementRef<typeof DropdownMenuPrimitive.Separator>, React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> >(({ className, ...props }, ref) => ( <DropdownMenuPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} /> )) DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => { return <span className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props} /> } DropdownMenuShortcut.displayName = "DropdownMenuShortcut" export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isEdit="true" isMerged="true" import type * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", }, }, defaultVariants: { variant: "default", }, }, ) export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {} function Badge({ className, variant, ...props }: BadgeProps) { return <div className={cn(badgeVariants({ variant }), className)} {...props} /> } export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/providers/auth-provider.tsx" isEdit="true" isMerged="true" "use client" import { SessionProvider } from "next-auth/react" import type React from "react" interface AuthProviderProps { children: React.ReactNode } export default function AuthProvider({ children }: AuthProviderProps) { return <SessionProvider>{children}</SessionProvider> } [V0_FILE]typescriptreact:file="components/auth/auth-guard.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useSession } from "next-auth/react" import { useRouter } from "next/navigation" import { useEffect } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Loader2 } from "lucide-react" import Link from "next/link" import { Button } from "@/components/ui/button" interface AuthGuardProps { children: React.ReactNode } export default function AuthGuard({ children }: AuthGuardProps) { const { data: session, status } = useSession() const router = useRouter() useEffect(() => { if (status === "unauthenticated") { // Redirect to sign-in page, preserving the current path as a callback URL const callbackUrl = encodeURIComponent(window.location.pathname + window.location.search) router.push(`/auth/signin?callbackUrl=${callbackUrl}`) } }, [status, router]) if (status === "loading") { return ( <div className="container mx-auto py-8 px-4"> <Card className="w-full max-w-md mx-auto"> <CardHeader> <CardTitle>Loading...</CardTitle> <CardDescription>Please wait while we verify your authentication status.</CardDescription> </CardHeader> <CardContent className="flex justify-center items-center h-48"> <Loader2 className="h-10 w-10 animate-spin text-primary" /> </CardContent> </Card> </div> ) } if (status === "unauthenticated") { // This block might be briefly shown before the redirect, or if redirect fails return ( <div className="container mx-auto py-8 px-4"> <Card className="max-w-md mx-auto"> <CardHeader className="text-center"> <CardTitle>Sign In Required</CardTitle> <CardDescription>You need to be signed in to access this page.</CardDescription> </CardHeader> <CardContent className="text-center"> <Button asChild> <Link href="/auth/signin">Sign In</Link> </Button> </CardContent> </Card> </div> ) } // If authenticated, render children return <>{children}</> } [V0_FILE]typescriptreact:file="components/auth/role-guard.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useSession } from "next-auth/react" import { useRouter } from "next/navigation" import { useEffect } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Loader2 } from "lucide-react" import Link from "next/link" import { Button } from "@/components/ui/button" interface RoleGuardProps { allowedRoles: ("user" | "admin")[] children: React.ReactNode } export default function RoleGuard({ allowedRoles, children }: RoleGuardProps) { const { data: session, status } = useSession() const router = useRouter() useEffect(() => { if (status === "authenticated") { if (!session?.user?.role || !allowedRoles.includes(session.user.role)) { // User is authenticated but does not have the required role router.push("/auth/error?message=AccessDenied") } } else if (status === "unauthenticated") { // User is not authenticated, redirect to sign-in const callbackUrl = encodeURIComponent(window.location.pathname + window.location.search) router.push(`/auth/signin?callbackUrl=${callbackUrl}`) } }, [status, session, allowedRoles, router]) if (status === "loading") { return ( <div className="container mx-auto py-8 px-4"> <Card className="w-full max-w-md mx-auto"> <CardHeader> <CardTitle>Loading...</CardTitle> <CardDescription>Please wait while we verify your permissions.</CardDescription> </CardHeader> <CardContent className="flex justify-center items-center h-48"> <Loader2 className="h-10 w-10 animate-spin text-primary" /> </CardContent> </Card> </div> ) } if (status === "authenticated" && session?.user?.role && allowedRoles.includes(session.user.role)) { // User is authenticated and has the required role return <>{children}</> } // Fallback for unauthenticated or unauthorized users before redirect return ( <div className="container mx-auto py-8 px-4"> <Card className="max-w-md mx-auto"> <CardHeader className="text-center"> <CardTitle>Access Denied</CardTitle> <CardDescription>You do not have permission to view this page.</CardDescription> </CardHeader> <CardContent className="text-center"> <Button asChild> <Link href="/dashboard">Go to Dashboard</Link> </Button> </CardContent> </Card> </div> ) } [V0_FILE]typescriptreact:file="components/auth/user-menu.tsx" isEdit="true" isMerged="true" "use client" import { DropdownMenuGroup } from "@/components/ui/dropdown-menu" import { signOut, useSession } from "next-auth/react" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { LogOut, Settings, LayoutDashboard, DollarSign, Shield } from "lucide-react" import Link from "next/link" export function UserMenu() { const { data: session, status } = useSession() if (status === "loading") { return <div className="h-8 w-8 rounded-full bg-muted animate-pulse" /> } if (status === "unauthenticated" || !session?.user) { return ( <Button asChild> <Link href="/auth/signin">Sign In</Link> </Button> ) } const userInitials = session.user.name ? session.user.name .split(" ") .map((n) => n[0]) .join("") .toUpperCase() : session.user.email?.[0]?.toUpperCase() || "U" return ( <DropdownMenu> <DropdownMenuTrigger asChild> <Button variant="ghost" className="relative h-8 w-8 rounded-full"> <Avatar className="h-8 w-8"> <AvatarImage src={session.user.image || undefined} alt={session.user.name || "User Avatar"} /> <AvatarFallback>{userInitials}</AvatarFallback> </Avatar> </Button> </DropdownMenuTrigger> <DropdownMenuContent className="w-56" align="end" forceMount> <DropdownMenuLabel className="font-normal"> <div className="flex flex-col space-y-1"> <p className="text-sm font-medium leading-none">{session.user.name}</p> <p className="text-xs leading-none text-muted-foreground">{session.user.email}</p> </div> </DropdownMenuLabel> <DropdownMenuSeparator /> <DropdownMenuGroup> <DropdownMenuItem asChild> <Link href="/dashboard"> <LayoutDashboard className="mr-2 h-4 w-4" /> Dashboard </Link> </DropdownMenuItem> <DropdownMenuItem asChild> <Link href="/settings"> <Settings className="mr-2 h-4 w-4" /> Settings </Link> </DropdownMenuItem> <DropdownMenuItem asChild> <Link href="/pricing"> <DollarSign className="mr-2 h-4 w-4" /> Pricing </Link> </DropdownMenuItem> {session.user.role === "admin" && ( <DropdownMenuItem asChild> <Link href="/admin"> <Shield className="mr-2 h-4 w-4" /> Admin Panel </Link> </DropdownMenuItem> )} </DropdownMenuGroup> <DropdownMenuSeparator /> <DropdownMenuItem onClick={() => signOut({ callbackUrl: "/" })}> <LogOut className="mr-2 h-4 w-4" /> Log out </DropdownMenuItem> </DropdownMenuContent> </DropdownMenu> ) } [V0_FILE]typescriptreact:file="components/layout/header.tsx" isEdit="true" isMerged="true" import Link from "next/link" import { UserMenu } from "@/components/auth/user-menu" import { NotificationBell } from "@/components/realtime/notification-bell" import { Button } from "@/components/ui/button" import { useSession } from "next-auth/react" import { Home, BarChart, Palette, Settings, Shield } from "lucide-react" export function Header() { const { data: session, status } = useSession() return ( <header className="sticky top-0 z-40 w-full border-b bg-background"> <div className="container flex h-16 items-center justify-between py-4"> <div className="flex items-center space-x-4"> <Link href="/" className="flex items-center space-x-2 font-bold"> <img src="/placeholder.svg?height=24&width=24" alt="Logo" className="h-6 w-6" /> <span>Brand Guardian AI</span> </Link> <nav className="hidden md:flex items-center space-x-4 text-sm font-medium"> {status === "authenticated" && ( <> <Button variant="ghost" asChild> <Link href="/dashboard" className="flex items-center gap-1"> <Home className="h-4 w-4" /> Dashboard </Link> </Button> <Button variant="ghost" asChild> <Link href="/analyzer" className="flex items-center gap-1"> <BarChart className="h-4 w-4" /> Analyzer </Link> </Button> <Button variant="ghost" asChild> <Link href="/brand-profile" className="flex items-center gap-1"> <Palette className="h-4 w-4" /> Brand Profiles </Link> </Button> <Button variant="ghost" asChild> <Link href="/settings" className="flex items-center gap-1"> <Settings className="h-4 w-4" /> Settings </Link> </Button> {session.user.role === "admin" && ( <Button variant="ghost" asChild> <Link href="/admin" className="flex items-center gap-1"> <Shield className="h-4 w-4" /> Admin </Link> </Button> )} </> )} {status === "unauthenticated" && ( <Button variant="ghost" asChild> <Link href="/pricing">Pricing</Link> </Button> )} </nav> </div> <div className="flex items-center space-x-4"> {status === "authenticated" && <NotificationBell />} <UserMenu /> </div> </div> </header> ) } [V0_FILE]typescriptreact:file="components/layout/footer.tsx" isEdit="true" isMerged="true" import Link from "next/link" export function Footer() { return ( <footer className="border-t bg-background py-6"> <div className="container flex flex-col items-center justify-between gap-4 md:flex-row"> <div className="text-center text-sm text-muted-foreground md:text-left"> © {new Date().getFullYear()} Brand Guardian AI. All rights reserved. </div> <nav className="flex gap-4 text-sm text-muted-foreground"> <Link href="/privacy" className="hover:underline"> Privacy Policy </Link> <Link href="/terms" className="hover:underline"> Terms of Service </Link> <Link href="/contact" className="hover:underline"> Contact </Link> </nav> </div> </footer> ) } [V0_FILE]typescriptreact:file="components/premium/premium-gate.tsx" isEdit="true" isMerged="true" import { Card, CardDescription, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import Link from "next/link" import { Lock } from "lucide-react" import type React from "react" interface PremiumGateProps { isPremium: boolean featureName: string children: React.ReactNode } export default function PremiumGate({ isPremium, featureName, children }: PremiumGateProps) { if (isPremium) { return <>{children}</> } return ( <Card className="relative border-dashed border-2 bg-muted/20"> <div className="absolute inset-0 flex flex-col items-center justify-center bg-background/80 backdrop-blur-sm z-10 p-4 text-center"> <Lock className="h-12 w-12 text-primary mb-4" /> <CardTitle className="text-2xl mb-2">Unlock {featureName}</CardTitle> <CardDescription className="mb-4"> This feature is available to Pro and Enterprise plan users. Upgrade your plan to access it! </CardDescription> <Button asChild> <Link href="/pricing">Upgrade Plan</Link> </Button> </div> <div className="opacity-30 pointer-events-none select-none">{children}</div> </Card> ) } [V0_FILE]typescriptreact:file="components/premium/ai-suggestions.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Loader2, Lightbulb } from "lucide-react" import { useToast } from "@/components/ui/use-toast" import { ScrollArea } from "@/components/ui/scroll-area" interface AISuggestionsProps { analysisId: string } export default function AISuggestions({ analysisId }: AISuggestionsProps) { const { toast } = useToast() const [suggestions, setSuggestions] = useState<string[]>([]) const [isLoading, setIsLoading] = useState(false) const [hasGenerated, setHasGenerated] = useState(false) const fetchSuggestions = async () => { setIsLoading(true) setSuggestions([]) try { const response = await fetch(`/api/analyses/${analysisId}/suggestions`, { method: "POST", // Assuming suggestions are generated on demand via POST headers: { "Content-Type": "application/json", }, body: JSON.stringify({ analysisId }), }) if (response.ok) { const data = await response.json() setSuggestions(data.suggestions || []) setHasGenerated(true) toast({ title: "Suggestions Generated", description: "AI-powered suggestions are ready!", variant: "default", }) } else { const errorData = await response.json() throw new Error(errorData.message || "Failed to generate AI suggestions.") } } catch (error: any) { console.error("Error fetching AI suggestions:", error) toast({ title: "Error", description: error.message || "An unexpected error occurred while generating suggestions.", variant: "destructive", }) } finally { setIsLoading(false) } } return ( <Card> <CardHeader> <CardTitle className="flex items-center gap-2"> <Lightbulb className="h-5 w-5" /> AI-Powered Suggestions </CardTitle> </CardHeader> <CardContent> {hasGenerated && suggestions.length > 0 ? ( <ScrollArea className="h-[200px] pr-4"> <ul className="list-disc list-inside space-y-2 text-sm text-muted-foreground"> {suggestions.map((suggestion, index) => ( <li key={index}>{suggestion}</li> ))} </ul> </ScrollArea> ) : hasGenerated && suggestions.length === 0 ? ( <p className="text-sm text-muted-foreground">No specific AI suggestions generated for this design.</p> ) : ( <p className="text-sm text-muted-foreground mb-4"> Click the button below to generate AI-powered suggestions for improving brand compliance. </p> )} <Button onClick={fetchSuggestions} disabled={isLoading}> {isLoading ? ( <> <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Generating... </> ) : ( "Generate Suggestions" )} </Button> </CardContent> </Card> ) } [V0_FILE]typescriptreact:file="components/realtime/notification-provider.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { createContext, useContext, useEffect, useState, useCallback } from "react" import { useSession } from "next-auth/react" import { useToast } from "@/components/ui/use-toast" import { REALTIME_EVENTS } from "@/lib/realtime" // Import event types interface NotificationContextType { notifications: any[] addNotification: (notification: any) => void clearNotifications: () => void markAsRead: (id: string) => void unreadCount: number } const NotificationContext = createContext<NotificationContextType | undefined>(undefined) export function NotificationProvider({ children }: { children: React.ReactNode }) { const { data: session } = useSession() const { toast } = useToast() const [notifications, setNotifications] = useState<any[]>([]) const [eventSource, setEventSource] = useState<EventSource | null>(null) const addNotification = useCallback( (notification: any) => { setNotifications((prev) => [{ ...notification, id: Date.now(), read: false }, ...prev]) // Show a toast notification for new events toast({ title: notification.title || "New Notification", description: notification.message || "You have a new update.", variant: notification.type === "error" ? "destructive" : "default", }) }, [toast], ) const clearNotifications = useCallback(() => { setNotifications([]) }, []) const markAsRead = useCallback((id: string) => { setNotifications((prev) => prev.map((notif) => (notif.id === id ? { ...notif, read: true } : notif))) }, []) const unreadCount = notifications.filter((notif) => !notif.read).length useEffect(() => { if (session?.user?.id) { // Only connect if user is authenticated const userId = session.user.id const source = new EventSource(`/api/notifications/stream?userId=${userId}`) source.onopen = () => { console.log("SSE connection opened.") } source.onmessage = (event) => { try { const data = JSON.parse(event.data) console.log("Received SSE message:", data) // Filter notifications specific to this user if userId is present in event data if (data.userId && data.userId !== userId) { return // Skip if not for this user } // Handle different event types switch (data.type) { case REALTIME_EVENTS.ANALYSIS_COMPLETED: addNotification({ title: "Analysis Complete!", message: `Your design analysis (ID: ${data.payload.analysisId}) is ready.`, type: "success", link: `/analyzer?analysisId=${data.payload.analysisId}`, }) break case REALTIME_EVENTS.BATCH_COMPLETED: addNotification({ title: "Batch Analysis Complete!", message: `Your batch analysis (ID: ${data.payload.batchId}) is ready.`, type: "success", link: `/dashboard`, // Or a specific batch results page }) break case REALTIME_EVENTS.NOTIFICATION: // Generic notification, use message directly addNotification({ title: data.payload.title || "System Notification", message: data.payload.message, type: data.payload.type || "info", link: data.payload.link, }) break default: console.warn("Unknown SSE event type:", data.type) addNotification({ title: "New Update", message: data.message || "A new event occurred.", type: "info", }) break } } catch (e) { console.error("Error parsing SSE message:", e, event.data) } } source.onerror = (error) => { console.error("SSE connection error:", error) source.close() // Attempt to close and reconnect if needed } setEventSource(source) return () => { console.log("SSE connection closed.") source.close() } } else if (eventSource) { // If user logs out, close existing connection eventSource.close() setEventSource(null) setNotifications([]) // Clear notifications on logout } }, [session, addNotification]) // Re-run effect when session changes return ( <NotificationContext.Provider value={{ notifications, addNotification, clearNotifications, markAsRead, unreadCount }} > {children} </NotificationContext.Provider> ) } export function useNotifications() { const context = useContext(NotificationContext) if (context === undefined) { throw new Error("useNotifications must be used within a NotificationProvider") } return context } [V0_FILE]typescriptreact:file="components/realtime/notification-bell.tsx" isEdit="true" isMerged="true" "use client" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Button } from "@/components/ui/button" import { Bell } from "lucide-react" import { useNotifications } from "@/components/realtime/notification-provider" import { ScrollArea } from "@/components/ui/scroll-area" import Link from "next/link" import { Badge } from "@/components/ui/badge" export function NotificationBell() { const { notifications, markAsRead, clearNotifications, unreadCount } = useNotifications() return ( <DropdownMenu> <DropdownMenuTrigger asChild> <Button variant="ghost" size="icon" className="relative"> <Bell className="h-5 w-5" /> {unreadCount > 0 && ( <Badge className="absolute -top-1 -right-1 h-5 w-5 flex items-center justify-center p-0 text-xs"> {unreadCount} </Badge> )} <span className="sr-only">View notifications</span> </Button> </DropdownMenuTrigger> <DropdownMenuContent className="w-80" align="end" forceMount> <DropdownMenuLabel className="flex items-center justify-between"> Notifications {notifications.length > 0 && ( <Button variant="ghost" size="sm" onClick={clearNotifications} className="h-auto px-2 py-1 text-xs"> Clear All </Button> )} </DropdownMenuLabel> <DropdownMenuSeparator /> {notifications.length === 0 ? ( <DropdownMenuItem className="text-muted-foreground text-center py-4" disabled> No new notifications. </DropdownMenuItem> ) : ( <ScrollArea className="h-[200px]"> {notifications.map((notification) => ( <DropdownMenuItem key={notification.id} className="flex flex-col items-start space-y-1 !h-auto py-2" onSelect={() => markAsRead(notification.id)} asChild={!!notification.link} > {notification.link ? ( <Link href={notification.link} className="w-full"> <div className="flex items-center gap-2"> {!notification.read && <span className="h-2 w-2 rounded-full bg-primary" />} <span className="font-medium">{notification.title}</span> </div> <p className="text-sm text-muted-foreground">{notification.message}</p> <span className="text-xs text-muted-foreground"> {new Date(notification.timestamp).toLocaleTimeString()} </span> </Link> ) : ( <> <div className="flex items-center gap-2"> {!notification.read && <span className="h-2 w-2 rounded-full bg-primary" />} <span className="font-medium">{notification.title}</span> </div> <p className="text-sm text-muted-foreground">{notification.message}</p> <span className="text-xs text-muted-foreground"> {new Date(notification.timestamp).toLocaleTimeString()} </span> </> )} </DropdownMenuItem> ))} </ScrollArea> )} </DropdownMenuContent> </DropdownMenu> ) } [V0_FILE]typescriptreact:file="components/premium/batch-processor.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useRef, useMemo } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { useToast } from "@/components/ui/use-toast" import { Loader2, UploadCloud, FileText, CheckCircle, XCircle } from "lucide-react" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Progress } from "@/components/ui/progress" import { useSession } from "next-auth/react" import PremiumGate from "@/components/premium/premium-gate" interface BrandProfile { _id: string name: string } export default function BatchProcessor() { const { data: session } = useSession() const { toast } = useToast() const [selectedFiles, setSelectedFiles] = useState<File[]>([]) const [brandProfiles, setBrandProfiles] = useState<BrandProfile[]>([]) const [selectedBrandProfileId, setSelectedBrandProfileId] = useState<string>("default") const [isProcessing, setIsProcessing] = useState(false) const [progress, setProgress] = useState(0) const [batchResult, setBatchResult] = useState<any>(null) // To store batch analysis summary const [loadingProfiles, setLoadingProfiles] = useState(true) const fileInputRef = useRef<HTMLInputElement>(null) const isPremiumUser = useMemo(() => session?.user?.plan === "pro" || session?.user?.plan === "enterprise", [session]) // Fetch brand profiles on component mount useMemo(() => { const fetchBrandProfiles = async () => { setLoadingProfiles(true) try { const response = await fetch("/api/brand-profiles") if (response.ok) { const data = await response.json() setBrandProfiles(data) } else { toast({ title: "Error", description: "Failed to load brand profiles for batch processing.", variant: "destructive", }) } } catch (error) { console.error("Error fetching brand profiles:", error) toast({ title: "Error", description: "An unexpected error occurred while loading brand profiles.", variant: "destructive", }) } finally { setLoadingProfiles(false) } } if (session?.user) { fetchBrandProfiles() } }, [session, toast]) const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => { const files = Array.from(event.target.files || []) setSelectedFiles(files) setBatchResult(null) // Clear previous results setProgress(0) } const handleBatchProcess = async (event: React.FormEvent) => { event.preventDefault() if (selectedFiles.length === 0) { toast({ title: "No files selected", description: "Please upload images for batch processing.", variant: "destructive", }) return } setIsProcessing(true) setProgress(0) setBatchResult(null) const formData = new FormData() selectedFiles.forEach((file) => { formData.append("images", file) }) if (selectedBrandProfileId && selectedBrandProfileId !== "default") { formData.append("brandProfileId", selectedBrandProfileId) } try { // Simulate progress updates const progressInterval = setInterval(() => { setProgress((prev) => { if (prev < 95) return prev + 2 return prev }) }, 300) const response = await fetch("/api/premium/batch", { method: "POST", body: formData, }) clearInterval(progressInterval) if (response.ok) { const data = await response.json() setBatchResult(data) setProgress(100) toast({ title: "Batch Processing Initiated", description: "Your batch analysis is being processed. You will be notified upon completion.", variant: "default", }) setSelectedFiles([]) // Clear files after submission } else { const errorData = await response.json() toast({ title: "Batch Processing Failed", description: errorData.message || "There was an error processing your batch.", variant: "destructive", }) setProgress(0) } } catch (error: any) { console.error("Batch processing submission error:", error) toast({ title: "Batch Processing Failed", description: error.message || "An unexpected error occurred during batch processing.", variant: "destructive", }) setProgress(0) } finally { setIsProcessing(false) } } return ( <PremiumGate isPremium={isPremiumUser} featureName="Batch Processing"> <Card> <CardHeader> <CardTitle>Batch Design Processor</CardTitle> <CardDescription>Analyze multiple designs at once against your brand guidelines.</CardDescription> </CardHeader> <CardContent> <form onSubmit={handleBatchProcess} className="space-y-6"> <div className="grid w-full items-center gap-1.5"> <Label htmlFor="batch-upload">Upload Design Images (Multiple)</Label> <div className="flex flex-col items-center justify-center w-full h-48 border-2 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700" onClick={() => fileInputRef.current?.click()} > {selectedFiles.length > 0 ? ( <div className="text-center"> <FileText className="w-10 h-10 text-gray-400 mx-auto" /> <p className="mt-2 text-sm text-gray-500 dark:text-gray-400"> {selectedFiles.length} file(s) selected </p> <ul className="text-xs text-gray-500 dark:text-gray-400 mt-1"> {selectedFiles.slice(0, 3).map((file, index) => ( <li key={index}>{file.name}</li> ))} {selectedFiles.length > 3 && <li>...and {selectedFiles.length - 3} more</li>} </ul> </div> ) : ( <> <UploadCloud className="w-10 h-10 text-gray-400" /> <p className="mt-2 text-sm text-gray-500 dark:text-gray-400"> <span className="font-semibold">Click to upload</span> or drag and drop </p> <p className="text-xs text-gray-500 dark:text-gray-400">PNG, JPG, GIF (Max 10MB each)</p> </> )} <Input id="batch-upload" type="file" accept="image/*" multiple onChange={handleFileChange} className="hidden" ref={fileInputRef} disabled={isProcessing} /> </div> </div> <div className="grid w-full items-center gap-1.5"> <Label htmlFor="brand-profile-batch">Select Brand Profile</Label> <Select value={selectedBrandProfileId} onValueChange={setSelectedBrandProfileId} disabled={isProcessing || loadingProfiles} > <SelectTrigger id="brand-profile-batch"> <SelectValue placeholder="Select a brand profile" /> </SelectTrigger> <SelectContent> <SelectItem value="default">No Specific Profile (Generic Check)</SelectItem> {brandProfiles.map((profile) => ( <SelectItem key={profile._id} value={profile._id}> {profile.name} </SelectItem> ))} </SelectContent> </Select> <p className="text-sm text-muted-foreground"> All designs in the batch will be analyzed against this profile. </p> </div> <Button type="submit" className="w-full" disabled={isProcessing || selectedFiles.length === 0}> {isProcessing ? ( <> <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Processing Batch... </> ) : ( "Start Batch Analysis" )} </Button> {isProcessing && <Progress value={progress} className="w-full mt-4" />} </form> {batchResult && ( <div className="mt-8 space-y-4"> <h3 className="text-lg font-semibold">Batch Summary</h3> {batchResult.success ? ( <div className="flex items-center gap-2 text-green-600"> <CheckCircle className="h-5 w-5" /> <p>Batch analysis initiated successfully!</p> </div> ) : ( <div className="flex items-center gap-2 text-red-600"> <XCircle className="h-5 w-5" /> <p>Batch analysis failed: {batchResult.error}</p> </div> )} {batchResult.batchId && <p className="text-sm text-muted-foreground">Batch ID: {batchResult.batchId}</p>} <p className="text-sm text-muted-foreground"> You will receive a notification when the batch processing is complete. </p> </div> )} </CardContent> </Card> </PremiumGate> ) } [V0_FILE]typescriptreact:file="components/adobe-express/brand-panel.tsx" isEdit="true" isMerged="true" "use client" import { Label } from "@/components/ui/label" import { useState, useEffect } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Loader2, Palette, Type, ImageIcon } from "lucide-react" import { useToast } from "@/components/ui/use-toast" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { useAdobeExpressAddOnRoot } from "@/lib/adobe-express-hooks" import { useSession } from "next-auth/react" import PremiumGate from "@/components/premium/premium-gate" import { useMemo } from "react" interface BrandProfile { _id: string name: string logoUrl?: string primaryColors: string[] secondaryColors: string[] fonts: string[] guidelines?: string } export default function BrandPanel() { const { data: session } = useSession() const { toast } = useToast() const { isReady, getActiveDocumentInfo, applyBrandColors, replaceFonts } = useAdobeExpressAddOnRoot() const [brandProfiles, setBrandProfiles] = useState<BrandProfile[]>([]) const [selectedBrandProfileId, setSelectedBrandProfileId] = useState<string>("") const [loadingProfiles, setLoadingProfiles] = useState(true) const [documentInfo, setDocumentInfo] = useState<any>(null) const [isApplying, setIsApplying] = useState(false) const isPremiumUser = useMemo(() => session?.user?.plan === "pro" || session?.user?.plan === "enterprise", [session]) useEffect(() => { if (session?.user) { fetchBrandProfiles() } }, [session]) useEffect(() => { if (isReady) { // Fetch active document info when add-on is ready getActiveDocumentInfo().then((info) => { if (info) setDocumentInfo(info) }) } }, [isReady, getActiveDocumentInfo]) const fetchBrandProfiles = async () => { setLoadingProfiles(true) try { const response = await fetch("/api/brand-profiles") if (response.ok) { const data = await response.json() setBrandProfiles(data) if (data.length > 0) { setSelectedBrandProfileId(data[0]._id) // Select first profile by default } } else { toast({ title: "Error", description: "Failed to load brand profiles.", variant: "destructive", }) } } catch (error) { console.error("Error fetching brand profiles:", error) toast({ title: "Error", description: "An unexpected error occurred while loading brand profiles.", variant: "destructive", }) } finally { setLoadingProfiles(false) } } const handleApplyBrand = async () => { if (!selectedBrandProfileId) { toast({ title: "No Brand Profile Selected", description: "Please select a brand profile to apply.", variant: "destructive", }) return } if (!isReady) { toast({ title: "Adobe Express Not Ready", description: "Please ensure the Adobe Express add-on is fully loaded.", variant: "destructive", }) return } setIsApplying(true) try { const selectedProfile = brandProfiles.find((p) => p._id === selectedBrandProfileId) if (!selectedProfile) { throw new Error("Selected brand profile not found.") } let success = true // Apply Primary Colors if (selectedProfile.primaryColors && selectedProfile.primaryColors.length > 0) { const colorsApplied = await applyBrandColors(selectedProfile.primaryColors) if (!colorsApplied) { success = false toast({ title: "Color Application Failed", description: "Could not apply primary colors to the document.", variant: "destructive", }) } } // Apply Fonts (simplified: assume first font is heading, second is body) if (selectedProfile.fonts && selectedProfile.fonts.length >= 2) { // This is a highly simplified example. In a real add-on, you'd have more sophisticated font mapping. const fontsReplaced = await replaceFonts("Default Heading Font", selectedProfile.fonts[0]) if (!fontsReplaced) { success = false toast({ title: "Font Application Failed", description: "Could not apply heading font to the document.", variant: "destructive", }) } const bodyFontsReplaced = await replaceFonts("Default Body Font", selectedProfile.fonts[1]) if (!bodyFontsReplaced) { success = false toast({ title: "Font Application Failed", description: "Could not apply body font to the document.", variant: "destructive", }) } } else if (selectedProfile.fonts && selectedProfile.fonts.length === 1) { const fontsReplaced = await replaceFonts("Default Font", selectedProfile.fonts[0]) if (!fontsReplaced) { success = false toast({ title: "Font Application Failed", description: "Could not apply font to the document.", variant: "destructive", }) } } if (success) { toast({ title: "Brand Applied", description: `Successfully applied brand guidelines from ${selectedProfile.name}.`, variant: "default", }) } else { toast({ title: "Partial Application", description: "Some brand elements could not be applied. Check console for details.", variant: "destructive", }) } } catch (error: any) { console.error("Error applying brand:", error) toast({ title: "Application Error", description: error.message || "An unexpected error occurred while applying brand guidelines.", variant: "destructive", }) } finally { setIsApplying(false) } } const selectedProfile = brandProfiles.find((p) => p._id === selectedBrandProfileId) return ( <PremiumGate isPremium={isPremiumUser} featureName="Adobe Express Brand Panel"> <Card className="w-full"> <CardHeader> <CardTitle>Apply Brand Guidelines</CardTitle> <CardDescription>Select a brand profile and apply its guidelines to your active design.</CardDescription> </CardHeader> <CardContent className="space-y-4"> <div className="grid w-full items-center gap-1.5"> <Label htmlFor="brand-profile-select">Select Brand Profile</Label> <Select value={selectedBrandProfileId} onValueChange={setSelectedBrandProfileId} disabled={isApplying || loadingProfiles || !isReady} > <SelectTrigger id="brand-profile-select"> <SelectValue placeholder="Select a brand profile" /> </SelectTrigger> <SelectContent> {brandProfiles.length === 0 && ( <SelectItem value="no-profiles" disabled> No brand profiles available </SelectItem> )} {brandProfiles.map((profile) => ( <SelectItem key={profile._id} value={profile._id}> {profile.name} </SelectItem> ))} </SelectContent> </Select> {loadingProfiles && <p className="text-sm text-muted-foreground">Loading profiles...</p>} {!isReady && <p className="text-sm text-red-500">Adobe Express add-on not ready.</p>} </div> {selectedProfile && ( <div className="space-y-2 text-sm text-muted-foreground"> <h4 className="font-semibold">Selected Profile Details:</h4> {selectedProfile.logoUrl && ( <div className="flex items-center gap-2"> <ImageIcon className="h-4 w-4" /> <span> Logo:{" "} <img src={selectedProfile.logoUrl || "/placeholder.svg"} alt="Logo" className="inline-block h-6 w-auto max-w-[80px] align-middle" /> </span> </div> )} <div className="flex items-center gap-2"> <Palette className="h-4 w-4" /> <span>Primary Colors: {selectedProfile.primaryColors.join(", ") || "N/A"}</span> </div> <div className="flex items-center gap-2"> <Type className="h-4 w-4" /> <span>Fonts: {selectedProfile.fonts.join(", ") || "N/A"}</span> </div> {documentInfo && ( <div className="mt-4"> <h4 className="font-semibold">Active Document:</h4> <p>Name: {documentInfo.name}</p> <p> Dimensions: {documentInfo.width}x{documentInfo.height} </p> </div> )} </div> )} <Button onClick={handleApplyBrand} className="w-full" disabled={isApplying || !selectedBrandProfileId || !isReady} > {isApplying ? ( <> <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Applying... </> ) : ( "Apply Brand Guidelines" )} </Button> </CardContent> </Card> </PremiumGate> ) } [V0_FILE]typescriptreact:file="components/adobe-express/add-on-root.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useEffect, useState } from "react" import { useAdobeExpressAuth } from "@/lib/adobe-express-hooks" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Loader2, Plug } from "lucide-react" import { useToast } from "@/components/ui/use-toast" interface AddOnRootProps { children: React.ReactNode } /** * This component acts as the root for the Adobe Express add-on. * It handles authentication and ensures the add-on environment is ready * before rendering its children. */ export default function AddOnRoot({ children }: AddOnRootProps) { const { toast } = useToast() const { isAuthenticated, isAuthenticating, authUrl, generateAuthUrl, handleAuthCallback, error: authError, } = useAdobeExpressAuth() const [isAdobeSdkReady, setIsAdobeSdkReady] = useState(false) // Simulate Adobe SDK readiness // Simulate Adobe Express SDK initialization useEffect(() => { const initSdk = async () => { // In a real Adobe Express add-on, you'd initialize the Adobe Express SDK here. // For example: await app.initialize(); // This is a placeholder for that initialization. console.log("Simulating Adobe Express SDK initialization...") await new Promise((resolve) => setTimeout(resolve, 1500)) // Simulate network delay setIsAdobeSdkReady(true) console.log("Adobe Express SDK simulated as ready.") } initSdk() }, []) // Handle OAuth callback from URL parameters useEffect(() => { const urlParams = new URLSearchParams(window.location.search) const code = urlParams.get("code") const state = urlParams.get("state") // In a real app, verify this state if (code && !isAuthenticated && !isAuthenticating) { handleAuthCallback(code) } }, [isAuthenticated, isAuthenticating, handleAuthCallback]) if (authError) { return ( <div className="flex h-screen items-center justify-center p-4"> <Card className="w-full max-w-md text-center"> <CardHeader> <CardTitle>Authentication Error</CardTitle> <CardDescription>{authError}</CardDescription> </CardHeader> <CardContent> <Button onClick={() => window.location.reload()}>Try Again</Button> </CardContent> </Card> </div> ) } if (!isAdobeSdkReady || isAuthenticating) { return ( <div className="flex h-screen items-center justify-center p-4"> <Card className="w-full max-w-md text-center"> <CardHeader> <CardTitle>Loading Adobe Express Add-on</CardTitle> <CardDescription>Please wait while we prepare the Brand Guardian AI add-on.</CardDescription> </CardHeader> <CardContent className="flex justify-center items-center h-32"> <Loader2 className="h-10 w-10 animate-spin text-primary" /> </CardContent> </Card> </div> ) } if (!isAuthenticated) { return ( <div className="flex h-screen items-center justify-center p-4"> <Card className="w-full max-w-md text-center"> <CardHeader> <CardTitle>Connect to Adobe Express</CardTitle> <CardDescription> To use the Brand Guardian AI add-on, you need to connect your Adobe Express account. </CardDescription> </CardHeader> <CardContent> <Button onClick={generateAuthUrl} disabled={isAuthenticating}> {isAuthenticating ? ( <> <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Connecting... </> ) : ( <> <Plug className="mr-2 h-4 w-4" /> Connect Adobe Express </> )} </Button> {authUrl && ( <p className="mt-4 text-sm text-muted-foreground">You will be redirected to Adobe for authentication.</p> )} </CardContent> </Card> </div> ) } // If authenticated and SDK is ready, render the actual add-on content return <>{children}</> } [V0_FILE]typescriptreact:file="components/adobe-express/brand-color-picker.tsx" isEdit="true" isMerged="true" "use client" import { SelectItem } from "@/components/ui/select" import { SelectContent } from "@/components/ui/select" import { SelectValue } from "@/components/ui/select" import { SelectTrigger } from "@/components/ui/select" import { Select } from "@/components/ui/select" import { useState, useEffect } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Loader2, Plus, Trash2, Palette } from "lucide-react" import { useToast } from "@/components/ui/use-toast" import { useAdobeExpressAddOnRoot } from "@/lib/adobe-express-hooks" import { useSession } from "next-auth/react" import PremiumGate from "@/components/premium/premium-gate" import { useMemo } from "react" interface BrandProfile { _id: string name: string primaryColors: string[] secondaryColors: string[] } export default function BrandColorPicker() { const { data: session } = useSession() const { toast } = useToast() const { isReady, applyBrandColors } = useAdobeExpressAddOnRoot() const [brandProfiles, setBrandProfiles] = useState<BrandProfile[]>([]) const [selectedBrandProfileId, setSelectedBrandProfileId] = useState<string>("") const [loadingProfiles, setLoadingProfiles] = useState(true) const [isApplying, setIsApplying] = useState(false) const [customColors, setCustomColors] = useState<string[]>(["#FFFFFF", "#000000"]) const isPremiumUser = useMemo(() => session?.user?.plan === "pro" || session?.user?.plan === "enterprise", [session]) useEffect(() => { if (session?.user) { fetchBrandProfiles() } }, [session]) const fetchBrandProfiles = async () => { setLoadingProfiles(true) try { const response = await fetch("/api/brand-profiles") if (response.ok) { const data = await response.json() setBrandProfiles(data) if (data.length > 0) { setSelectedBrandProfileId(data[0]._id) // Select first profile by default } } else { toast({ title: "Error", description: "Failed to load brand profiles.", variant: "destructive", }) } } catch (error) { console.error("Error fetching brand profiles:", error) toast({ title: "Error", description: "An unexpected error occurred while loading brand profiles.", variant: "destructive", }) } finally { setLoadingProfiles(false) } } const handleColorChange = (index: number, value: string) => { setCustomColors((prev) => { const newColors = [...prev] newColors[index] = value return newColors }) } const addColor = () => { setCustomColors((prev) => [...prev, "#CCCCCC"]) } const removeColor = (index: number) => { setCustomColors((prev) => prev.filter((_, i) => i !== index)) } const handleApplyColors = async (colorsToApply: string[]) => { if (!isReady) { toast({ title: "Adobe Express Not Ready", description: "Please ensure the Adobe Express add-on is fully loaded.", variant: "destructive", }) return } setIsApplying(true) try { const success = await applyBrandColors(colorsToApply) if (success) { toast({ title: "Colors Applied", description: "Colors have been successfully applied to the document.", variant: "default", }) } else { toast({ title: "Application Failed", description: "Failed to apply colors to the document.", variant: "destructive", }) } } catch (error: any) { console.error("Error applying colors:", error) toast({ title: "Application Error", description: error.message || "An unexpected error occurred while applying colors.", variant: "destructive", }) } finally { setIsApplying(false) } } const selectedProfile = brandProfiles.find((p) => p._id === selectedBrandProfileId) return ( <PremiumGate isPremium={isPremiumUser} featureName="Adobe Express Color Picker"> <Card className="w-full"> <CardHeader> <CardTitle>Brand Color Picker</CardTitle> <CardDescription>Apply colors from your brand profiles or custom colors to your design.</CardDescription> </CardHeader> <CardContent className="space-y-6"> {/* Apply from Brand Profile */} <div className="space-y-4"> <h3 className="text-lg font-semibold flex items-center gap-2"> <Palette className="h-5 w-5" /> From Brand Profile </h3> <div className="grid w-full items-center gap-1.5"> <Label htmlFor="brand-profile-colors">Select Brand Profile</Label> <Select value={selectedBrandProfileId} onValueChange={setSelectedBrandProfileId} disabled={isApplying || loadingProfiles || !isReady} > <SelectTrigger id="brand-profile-colors"> <SelectValue placeholder="Select a brand profile" /> </SelectTrigger> <SelectContent> {brandProfiles.length === 0 && ( <SelectItem value="no-profiles" disabled> No brand profiles available </SelectItem> )} {brandProfiles.map((profile) => ( <SelectItem key={profile._id} value={profile._id}> {profile.name} </SelectItem> ))} </SelectContent> </Select> {loadingProfiles && <p className="text-sm text-muted-foreground">Loading profiles...</p>} {!isReady && <p className="text-sm text-red-500">Adobe Express add-on not ready.</p>} </div> {selectedProfile && ( <div className="space-y-2 text-sm text-muted-foreground"> <p className="font-medium">Primary Colors:</p> <div className="flex flex-wrap gap-2"> {selectedProfile.primaryColors.map((color, i) => ( <div key={`primary-${i}`} className="w-8 h-8 rounded-full border cursor-pointer" style={{ backgroundColor: color }} title={color} onClick={() => handleApplyColors([color])} /> ))} </div> <p className="font-medium mt-2">Secondary Colors:</p> <div className="flex flex-wrap gap-2"> {selectedProfile.secondaryColors.map((color, i) => ( <div key={`secondary-${i}`} className="w-8 h-8 rounded-full border cursor-pointer" style={{ backgroundColor: color }} title={color} onClick={() => handleApplyColors([color])} /> ))} </div> </div> )} <Button onClick={() => { if (selectedProfile) { handleApplyColors([...selectedProfile.primaryColors, ...selectedProfile.secondaryColors]) } }} className="w-full" disabled={isApplying || !selectedProfile || !isReady} > {isApplying ? ( <> <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Applying All... </> ) : ( "Apply All Profile Colors" )} </Button> </div> {/* Apply Custom Colors */} <div className="space-y-4"> <h3 className="text-lg font-semibold flex items-center gap-2"> <Palette className="h-5 w-5" /> Custom Colors </h3> <div className="space-y-2"> {customColors.map((color, index) => ( <div key={index} className="flex items-center gap-2"> <Input type="color" value={color} onChange={(e) => handleColorChange(index, e.target.value)} className="h-8 w-8 p-0" disabled={isApplying || !isReady} /> <Input type="text" value={color} onChange={(e) => handleColorChange(index, e.target.value)} placeholder="#RRGGBB" className="flex-1" disabled={isApplying || !isReady} /> {customColors.length > 1 && ( <Button type="button" variant="outline" size="icon" onClick={() => removeColor(index)} disabled={isApplying || !isReady} > <Trash2 className="h-4 w-4" /> </Button> )} </div> ))} <Button type="button" variant="outline" size="sm" onClick={addColor} disabled={isApplying || !isReady}> <Plus className="mr-2 h-4 w-4" /> Add Custom Color </Button> </div> <Button onClick={() => handleApplyColors(customColors)} className="w-full" disabled={isApplying || customColors.length === 0 || !isReady} > {isApplying ? ( <> <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Applying Custom... </> ) : ( "Apply Custom Colors" )} </Button> </div> </CardContent> </Card> </PremiumGate> ) } [V0_FILE]typescriptreact:file="components/adobe-express/font-replacer.tsx" isEdit="true" isMerged="true" "use client" import { Badge } from "@/components/ui/badge" import { useState, useEffect } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Loader2, Type } from "lucide-react" import { useToast } from "@/components/ui/use-toast" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { useAdobeExpressAddOnRoot } from "@/lib/adobe-express-hooks" import { useSession } from "next-auth/react" import PremiumGate from "@/components/premium/premium-gate" import { useMemo } from "react" interface BrandProfile { _id: string name: string fonts: string[] } export default function FontReplacer() { const { data: session } = useSession() const { toast } = useToast() const { isReady, replaceFonts } = useAdobeExpressAddOnRoot() const [brandProfiles, setBrandProfiles] = useState<BrandProfile[]>([]) const [selectedBrandProfileId, setSelectedBrandProfileId] = useState<string>("") const [loadingProfiles, setLoadingProfiles] = useState(true) const [isReplacing, setIsReplacing] = useState(false) const [oldFont, setOldFont] = useState("") const [newFont, setNewFont] = useState("") const isPremiumUser = useMemo(() => session?.user?.plan === "pro" || session?.user?.plan === "enterprise", [session]) useEffect(() => { if (session?.user) { fetchBrandProfiles() } }, [session]) const fetchBrandProfiles = async () => { setLoadingProfiles(true) try { const response = await fetch("/api/brand-profiles") if (response.ok) { const data = await response.json() setBrandProfiles(data) if (data.length > 0) { setSelectedBrandProfileId(data[0]._id) // Select first profile by default } } else { toast({ title: "Error", description: "Failed to load brand profiles.", variant: "destructive", }) } } catch (error) { console.error("Error fetching brand profiles:", error) toast({ title: "Error", description: "An unexpected error occurred while loading brand profiles.", variant: "destructive", }) } finally { setLoadingProfiles(false) } } const handleReplaceFonts = async () => { if (!oldFont || !newFont) { toast({ title: "Missing Fonts", description: "Please enter both the old font and the new font.", variant: "destructive", }) return } if (!isReady) { toast({ title: "Adobe Express Not Ready", description: "Please ensure the Adobe Express add-on is fully loaded.", variant: "destructive", }) return } setIsReplacing(true) try { const success = await replaceFonts(oldFont, newFont) if (success) { toast({ title: "Fonts Replaced", description: `Successfully replaced '${oldFont}' with '${newFont}'.`, variant: "default", }) } else { toast({ title: "Replacement Failed", description: "Failed to replace fonts in the document.", variant: "destructive", }) } } catch (error: any) { console.error("Error replacing fonts:", error) toast({ title: "Replacement Error", description: error.message || "An unexpected error occurred while replacing fonts.", variant: "destructive", }) } finally { setIsReplacing(false) } } const selectedProfile = brandProfiles.find((p) => p._id === selectedBrandProfileId) return ( <PremiumGate isPremium={isPremiumUser} featureName="Adobe Express Font Replacer"> <Card className="w-full"> <CardHeader> <CardTitle>Font Replacer</CardTitle> <CardDescription> Replace fonts in your active design using brand profile fonts or custom inputs. </CardDescription> </CardHeader> <CardContent className="space-y-6"> {/* Replace from Brand Profile */} <div className="space-y-4"> <h3 className="text-lg font-semibold flex items-center gap-2"> <Type className="h-5 w-5" /> From Brand Profile </h3> <div className="grid w-full items-center gap-1.5"> <Label htmlFor="brand-profile-fonts">Select Brand Profile</Label> <Select value={selectedBrandProfileId} onValueChange={(value) => { setSelectedBrandProfileId(value) const profile = brandProfiles.find((p) => p._id === value) if (profile && profile.fonts.length > 0) { setNewFont(profile.fonts[0]) // Pre-fill new font with first font from profile } }} disabled={isReplacing || loadingProfiles || !isReady} > <SelectTrigger id="brand-profile-fonts"> <SelectValue placeholder="Select a brand profile" /> </SelectTrigger> <SelectContent> {brandProfiles.length === 0 && ( <SelectItem value="no-profiles" disabled> No brand profiles available </SelectItem> )} {brandProfiles.map((profile) => ( <SelectItem key={profile._id} value={profile._id}> {profile.name} </SelectItem> ))} </SelectContent> </Select> {loadingProfiles && <p className="text-sm text-muted-foreground">Loading profiles...</p>} {!isReady && <p className="text-sm text-red-500">Adobe Express add-on not ready.</p>} </div> {selectedProfile && selectedProfile.fonts.length > 0 && ( <div className="space-y-2 text-sm text-muted-foreground"> <p className="font-medium">Available Fonts in Profile:</p> <div className="flex flex-wrap gap-2"> {selectedProfile.fonts.map((font, i) => ( <Badge key={`font-${i}`} variant="secondary"> {font} </Badge> ))} </div> </div> )} </div> {/* Custom Font Replacement */} <div className="space-y-4"> <h3 className="text-lg font-semibold flex items-center gap-2"> <Type className="h-5 w-5" /> Custom Replacement </h3> <div className="grid w-full items-center gap-1.5"> <Label htmlFor="old-font">Old Font Name</Label> <Input id="old-font" value={oldFont} onChange={(e) => setOldFont(e.target.value)} placeholder="e.g., Arial" disabled={isReplacing || !isReady} /> </div> <div className="grid w-full items-center gap-1.5"> <Label htmlFor="new-font">New Font Name</Label> <Input id="new-font" value={newFont} onChange={(e) => setNewFont(e.target.value)} placeholder="e.g., Inter" disabled={isReplacing || !isReady} /> </div> <Button onClick={handleReplaceFonts} className="w-full" disabled={isReplacing || !oldFont || !newFont || !isReady} > {isReplacing ? ( <> <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Replacing... </> ) : ( "Replace Fonts" )} </Button> </div> </CardContent> </Card> </PremiumGate> ) } [V0_FILE]typescriptreact:file="components/adobe-express/permission-guard.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useEffect } from "react" import { useAdobeExpressPermissions } from "@/lib/adobe-express-hooks" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Loader2, ShieldOff } from "lucide-react" import { REQUIRED_ADOBE_SCOPES } from "@/lib/adobe-express" interface PermissionGuardProps { children: React.ReactNode } /** * This component ensures the Adobe Express add-on has the necessary permissions (scopes). * If permissions are missing, it prompts the user to re-authenticate or grant them. */ export default function PermissionGuard({ children }: PermissionGuardProps) { const { hasPermissions, missingPermissions, isLoading, error, checkPermissions } = useAdobeExpressPermissions(REQUIRED_ADOBE_SCOPES) useEffect(() => { if (error) { console.error("PermissionGuard error:", error) } }, [error]) if (isLoading) { return ( <div className="flex h-screen items-center justify-center p-4"> <Card className="w-full max-w-md text-center"> <CardHeader> <CardTitle>Checking Permissions</CardTitle> <CardDescription>Verifying necessary Adobe Express permissions...</CardDescription> </CardHeader> <CardContent className="flex justify-center items-center h-32"> <Loader2 className="h-10 w-10 animate-spin text-primary" /> </CardContent> </Card> </div> ) } if (!hasPermissions) { return ( <div className="flex h-screen items-center justify-center p-4"> <Card className="w-full max-w-md text-center"> <CardHeader> <CardTitle>Missing Permissions</CardTitle> <CardDescription> The Brand Guardian AI add-on requires additional permissions to function correctly. </CardDescription> </CardHeader> <CardContent className="space-y-4"> {missingPermissions.length > 0 && ( <div className="text-left text-sm text-muted-foreground"> <p className="font-semibold mb-1">Required permissions:</p> <ul className="list-disc list-inside"> {missingPermissions.map((perm, index) => ( <li key={index}>{perm}</li> ))} </ul> </div> )} <Button onClick={checkPermissions} disabled={isLoading}> {isLoading ? ( <> <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Retrying... </> ) : ( <> <ShieldOff className="mr-2 h-4 w-4" /> Grant Permissions </> )} </Button> {error && <p className="text-sm text-red-500 mt-2">{error}</p>} <p className="text-sm text-muted-foreground mt-4"> You may be prompted to re-authenticate with Adobe Express to grant these permissions. </p> </CardContent> </Card> </div> ) } return <>{children}</> } [V0_FILE]typescriptreact:file="components/adobe-express/auth-provider.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import AddOnRoot from "@/components/adobe-express/add-on-root" import PermissionGuard from "@/components/adobe-express/permission-guard" interface AdobeExpressAuthProviderProps { children: React.ReactNode } /** * This component wraps the entire Adobe Express add-on content. * It provides the necessary authentication and permission checks * before rendering the main add-on UI. */ export default function AdobeExpressAuthProvider({ children }: AdobeExpressAuthProviderProps) { return ( <AddOnRoot> <PermissionGuard>{children}</PermissionGuard> </AddOnRoot> ) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Mona_Sans as FontSans } from "next/font/google" // Corrected font import import "./globals.css" import { cn } from "@/lib/utils" import { Header } from "@/components/layout/header" import { Footer } from "@/components/layout/footer" import { Toaster } from "@/components/ui/toaster" import AuthProvider from "@/components/providers/auth-provider" import { NotificationProvider } from "@/components/realtime/notification-provider" import { ErrorBoundary } from "@/components/ui/error-boundary" const fontSans = FontSans({ subsets: ["latin"], variable: "--font-sans", }) export const metadata: Metadata = { title: "Brand Guardian AI", description: "AI-powered brand compliance for your designs.", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( <html lang="en" suppressHydrationWarning> <body className={cn("min-h-screen bg-background font-sans antialiased flex flex-col", fontSans.variable)}> <ErrorBoundary> <AuthProvider> <NotificationProvider> <Header /> <main className="flex-grow">{children}</main> <Footer /> <Toaster /> </NotificationProvider> </AuthProvider> </ErrorBoundary> </body> </html> ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import { Button } from "@/components/ui/button" import Link from "next/link" import { Card, CardDescription, CardTitle } from "@/components/ui/card" import { Sparkles, ShieldCheck, Users } from "lucide-react" import Image from "next/image" export default function HomePage() { return ( <div className="flex flex-col items-center justify-center min-h-[calc(100vh-64px-64px)] py-12 px-4 md:px-6 lg:px-8"> {/* Hero Section */} <section className="w-full py-12 md:py-24 lg:py-32 xl:py-48 bg-gradient-to-r from-primary to-purple-600 text-primary-foreground"> <div className="container px-4 md:px-6"> <div className="grid gap-6 lg:grid-cols-[1fr_400px] lg:gap-12 xl:grid-cols-[1fr_550px]"> <div className="flex flex-col justify-center space-y-4"> <div className="space-y-2"> <h1 className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none">Brand Guardian AI</h1> <p className="max-w-[600px] text-lg md:text-xl"> Ensure perfect brand consistency with AI-powered design analysis. Stop manual checks, start creating with confidence. </p> </div> <div className="flex flex-col gap-2 min-[400px]:flex-row"> <Button asChild className="bg-primary-foreground text-primary hover:bg-primary-foreground/90"> <Link href="/analyzer">Get Started Free</Link> </Button> <Button asChild variant="outline" className="border-primary-foreground text-primary-foreground hover:bg-primary-foreground/10 bg-transparent" > <Link href="/demo">View Demo</Link> </Button> </div> </div> <Image src="/placeholder.svg?height=400&width=550" width={550} height={400} alt="Hero" className="mx-auto aspect-video overflow-hidden rounded-xl object-cover sm:w-full lg:order-last" /> </div> </div> </section> {/* Features Section */} <section className="w-full py-12 md:py-24 lg:py-32 bg-background"> <div className="container px-4 md:px-6"> <div className="flex flex-col items-center justify-center space-y-4 text-center"> <div className="space-y-2"> <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">Why Choose Brand Guardian AI?</h2> <p className="max-w-[900px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed"> Our platform leverages cutting-edge AI to provide unparalleled brand compliance. </p> </div> </div> <div className="mx-auto grid max-w-5xl items-start gap-8 py-12 sm:grid-cols-2 lg:grid-cols-3"> <Card className="flex flex-col items-center p-6 text-center"> <Sparkles className="h-12 w-12 text-primary mb-4" /> <CardTitle className="text-xl font-bold mb-2">AI-Powered Analysis</CardTitle> <CardDescription> Automatically detect inconsistencies in colors, fonts, logos, and messaging. </CardDescription> </Card> <Card className="flex flex-col items-center p-6 text-center"> <ShieldCheck className="h-12 w-12 text-primary mb-4" /> <CardTitle className="text-xl font-bold mb-2">Guaranteed Consistency</CardTitle> <CardDescription> Ensure every design aligns perfectly with your brand guidelines, every time. </CardDescription> </Card> <Card className="flex flex-col items-center p-6 text-center"> <Users className="h-12 w-12 text-primary mb-4" /> <CardTitle className="text-xl font-bold mb-2">Team Collaboration</CardTitle> <CardDescription>Empower your design team to maintain brand integrity effortlessly.</CardDescription> </Card> </div> </div> </section> {/* How It Works Section */} <section className="w-full py-12 md:py-24 lg:py-32 bg-muted"> <div className="container px-4 md:px-6"> <div className="flex flex-col items-center justify-center space-y-4 text-center"> <div className="space-y-2"> <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">How It Works</h2> <p className="max-w-[900px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed"> Simple steps to ensure your brand is always on point. </p> </div> </div> <div className="mx-auto grid max-w-5xl items-center gap-12 py-12 lg:grid-cols-2 lg:gap-24"> <div className="flex flex-col space-y-4"> <div className="flex items-start space-x-4"> <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-foreground font-bold text-lg"> 1 </div> <div> <h3 className="text-xl font-bold">Define Your Brand</h3> <p className="text-muted-foreground"> Create detailed brand profiles with your official colors, fonts, logo usage, and tone of voice. </p> </div> </div> <div className="flex items-start space-x-4"> <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-foreground font-bold text-lg"> 2 </div> <div> <h3 className="text-xl font-bold">Upload Your Design</h3> <p className="text-muted-foreground">Upload any design image (PNG, JPG, GIF) to the analyzer.</p> </div> </div> <div className="flex items-start space-x-4"> <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-foreground font-bold text-lg"> 3 </div> <div> <h3 className="text-xl font-bold">Get Instant Analysis</h3> <p className="text-muted-foreground"> Our AI analyzes your design against your chosen brand profile, providing a compliance score and detailed feedback. </p> </div> </div> <div className="flex items-start space-x-4"> <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-foreground font-bold text-lg"> 4 </div> <div> <h3 className="text-xl font-bold">Receive Actionable Suggestions</h3> <p className="text-muted-foreground"> Get AI-powered suggestions to quickly correct any inconsistencies and improve compliance. </p> </div> </div> </div> <Image src="/placeholder.svg?height=400&width=550" width={550} height={400} alt="How It Works" className="mx-auto aspect-video overflow-hidden rounded-xl object-cover" /> </div> </div> </section> {/* Call to Action Section */} <section className="w-full py-12 md:py-24 lg:py-32 bg-background"> <div className="container px-4 md:px-6 text-center"> <div className="space-y-4"> <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">Ready to elevate your brand?</h2> <p className="max-w-[700px] mx-auto text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed"> Join thousands of businesses ensuring their brand integrity with Brand Guardian AI. </p> <Button asChild size="lg"> <Link href="/auth/signup">Start Your Free Trial</Link> </Button> </div> </div> </section> </div> ) } [V0_FILE]typescriptreact:file="app/analyzer/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import Link from "next/link" import type React from "react" import { useState, useRef, useEffect, useMemo } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { useToast } from "@/components/ui/use-toast" import { Loader2, UploadCloud, CheckCircle, XCircle, Lightbulb, Palette, Type, Layout, MessageSquare, ImageIcon, } from "lucide-react" import Image from "next/image" import { useRouter, useSearchParams } from "next/navigation" import { performAnalysis } from "@/app/actions/analyze" import { cn } from "@/lib/utils" import { Badge } from "@/components/ui/badge" import { ScrollArea } from "@/components/ui/scroll-area" import { Separator } from "@/components/ui/separator" import { Progress } from "@/components/ui/progress" import { useSession } from "next-auth/react" import PremiumGate from "@/components/premium/premium-gate" import AISuggestions from "@/components/premium/ai-suggestions" interface BrandProfile { _id: string name: string logoUrl?: string primaryColors: string[] secondaryColors: string[] fonts: string[] // Corrected to match IBrandProfile guidelines?: string } interface AnalysisResult { overallScore: number colorCompliance: { score: number details: { expected: string[] detected: string[] issues: string[] } } typographyCompliance: { score: number details: { expectedFonts: string[] detectedFonts: string[] issues: string[] } } logoPlacement: { score: number details: { expectedPosition: string detectedPosition: string issues: string[] } } spacingAndLayout: { score: number details: { issues: string[] } } toneAndMessaging: { score: number details: { expectedTone: string detectedTone: string issues: string[] } } suggestions: string[] } interface Analysis { _id: string imageUrl: string brandProfileId?: string analysisResult: AnalysisResult status: "pending" | "completed" | "failed" createdAt: string } export default function AnalyzerPage() { const { data: session, status: sessionStatus } = useSession() const router = useRouter() const searchParams = useSearchParams() const analysisIdFromUrl = searchParams.get("analysisId") const { toast } = useToast() const [selectedFile, setSelectedFile] = useState<File | null>(null) const [previewUrl, setPreviewUrl] = useState<string | null>(null) const [brandProfiles, setBrandProfiles] = useState<BrandProfile[]>([]) const [selectedBrandProfileId, setSelectedBrandProfileId] = useState<string>("default") const [isAnalyzing, setIsAnalyzing] = useState(false) const [analysisProgress, setAnalysisProgress] = useState(0) const [analysisResult, setAnalysisResult] = useState<AnalysisResult | null>(null) const [currentAnalysis, setCurrentAnalysis] = useState<Analysis | null>(null) const [loadingProfiles, setLoadingProfiles] = useState(true) const [loadingAnalysis, setLoadingAnalysis] = useState(false) const fileInputRef = useRef<HTMLInputElement>(null) const isPremiumUser = useMemo(() => session?.user?.plan === "pro" || session?.user?.plan === "enterprise", [session]) useEffect(() => { if (sessionStatus === "authenticated") { fetchBrandProfiles() } }, [sessionStatus]) useEffect(() => { if (analysisIdFromUrl && sessionStatus === "authenticated") { fetchAnalysis(analysisIdFromUrl) } }, [analysisIdFromUrl, sessionStatus]) const fetchBrandProfiles = async () => { setLoadingProfiles(true) try { const response = await fetch("/api/brand-profiles") if (response.ok) { const data = await response.json() setBrandProfiles(data) } else { toast({ title: "Error", description: "Failed to load brand profiles.", variant: "destructive", }) } } catch (error) { console.error("Error fetching brand profiles:", error) toast({ title: "Error", description: "An unexpected error occurred while loading brand profiles.", variant: "destructive", }) } finally { setLoadingProfiles(false) } } const fetchAnalysis = async (id: string) => { setLoadingAnalysis(true) try { const response = await fetch(`/api/analyses/${id}`) if (response.ok) { const data = await response.json() setCurrentAnalysis(data) setAnalysisResult(data.analysisResult) setPreviewUrl(data.imageUrl) setSelectedBrandProfileId(data.brandProfileId?._id || "default") } else { toast({ title: "Error", description: "Failed to load analysis.", variant: "destructive", }) router.replace("/analyzer") // Clear URL param if analysis not found } } catch (error) { console.error("Error fetching analysis:", error) toast({ title: "Error", description: "An unexpected error occurred while loading analysis.", variant: "destructive", }) } finally { setLoadingAnalysis(false) } } const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => { const file = event.target.files?.[0] if (file) { setSelectedFile(file) setPreviewUrl(URL.createObjectURL(file)) setAnalysisResult(null) // Clear previous analysis results setCurrentAnalysis(null) setAnalysisProgress(0) } else { setSelectedFile(null) setPreviewUrl(null) } } const handleAnalyze = async (event: React.FormEvent) => { event.preventDefault() if (!selectedFile) { toast({ title: "No file selected", description: "Please upload an image to analyze.", variant: "destructive", }) return } setIsAnalyzing(true) setAnalysisProgress(0) setAnalysisResult(null) setCurrentAnalysis(null) const formData = new FormData() formData.append("image", selectedFile) if (selectedBrandProfileId && selectedBrandProfileId !== "default") { formData.append("brandProfileId", selectedBrandProfileId) } try { // Simulate progress updates (replace with actual progress from backend/SSE if available) const progressInterval = setInterval(() => { setAnalysisProgress((prev) => { if (prev < 90) return prev + 5 return prev }) }, 500) const result = await performAnalysis(formData) clearInterval(progressInterval) if (result.success && result.analysisId) { setAnalysisProgress(100) toast({ title: "Analysis Complete!", description: "Your design has been successfully analyzed.", variant: "default", }) router.push(`/analyzer?analysisId=${result.analysisId}`) // Update URL to show analysis } else { toast({ title: "Analysis Failed", description: result.error || "There was an error analyzing your design.", variant: "destructive", }) setAnalysisProgress(0) } } catch (error: any) { console.error("Analysis submission error:", error) toast({ title: "Analysis Failed", description: error.message || "An unexpected error occurred during analysis.", variant: "destructive", }) setAnalysisProgress(0) } finally { setIsAnalyzing(false) } } const getScoreColor = (score: number) => { if (score >= 80) return "text-green-600" if (score >= 60) return "text-yellow-600" return "text-red-600" } const getScoreBadgeVariant = (score: number) => { if (score >= 80) return "default" if (score >= 60) return "secondary" return "destructive" } const getIssueIcon = (score: number) => { if (score >= 80) return <CheckCircle className="h-5 w-5 text-green-500" /> if (score >= 60) return <Lightbulb className="h-5 w-5 text-yellow-500" /> return <XCircle className="h-5 w-5 text-red-500" /> } if (sessionStatus === "loading" || loadingProfiles || loadingAnalysis) { return ( <div className="container mx-auto py-8 px-4"> <Card className="w-full max-w-4xl mx-auto"> <CardHeader> <CardTitle>Loading Analyzer...</CardTitle> <CardDescription>Please wait while we prepare the analysis tool.</CardDescription> </CardHeader> <CardContent className="flex justify-center items-center h-48"> <Loader2 className="h-10 w-10 animate-spin text-primary" /> </CardContent> </Card> </div> ) } if (sessionStatus === "unauthenticated") { return ( <div className="container mx-auto py-8 px-4"> <Card className="max-w-md mx-auto"> <CardHeader className="text-center"> <CardTitle>Sign In Required</CardTitle> <CardDescription>Please sign in to use the Brand Analyzer.</CardDescription> </CardHeader> <CardContent className="text-center"> <Button asChild> <Link href="/auth/signin">Sign In</Link> </Button> </CardContent> </Card> </div> ) } return ( <div className="container mx-auto py-8 px-4"> <h1 className="text-3xl font-bold mb-6 text-center">Brand Compliance Analyzer</h1> <p className="text-muted-foreground text-center mb-8"> Upload your design and let our AI check it against your brand guidelines. </p> <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 max-w-6xl mx-auto"> {/* Upload and Configuration Card */} <Card> <CardHeader> <CardTitle>Upload Design & Configure</CardTitle> <CardDescription>Select your design image and choose a brand profile.</CardDescription> </CardHeader> <CardContent> <form onSubmit={handleAnalyze} className="space-y-6"> <div className="grid w-full items-center gap-1.5"> <Label htmlFor="design-upload">Upload Design Image</Label> <div className="flex flex-col items-center justify-center w-full h-48 border-2 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700" onClick={() => fileInputRef.current?.click()} > {previewUrl ? ( <div className="relative w-full h-full"> <Image src={previewUrl || "/placeholder.svg"} alt="Design Preview" fill style={{ objectFit: "contain" }} className="rounded-lg" /> </div> ) : ( <> <UploadCloud className="w-10 h-10 text-gray-400" /> <p className="mt-2 text-sm text-gray-500 dark:text-gray-400"> <span className="font-semibold">Click to upload</span> or drag and drop </p> <p className="text-xs text-gray-500 dark:text-gray-400">PNG, JPG, GIF (Max 10MB)</p> </> )} <Input id="design-upload" type="file" accept="image/*" onChange={handleFileChange} className="hidden" ref={fileInputRef} disabled={isAnalyzing} /> </div> {selectedFile && <p className="text-sm text-muted-foreground mt-2">Selected: {selectedFile.name}</p>} </div> <div className="grid w-full items-center gap-1.5"> <Label htmlFor="brand-profile">Select Brand Profile</Label> <Select value={selectedBrandProfileId} onValueChange={setSelectedBrandProfileId} disabled={isAnalyzing || loadingProfiles} > <SelectTrigger id="brand-profile"> <SelectValue placeholder="Select a brand profile" /> </SelectTrigger> <SelectContent> <SelectItem value="default">No Specific Profile (Generic Check)</SelectItem> {brandProfiles.map((profile) => ( <SelectItem key={profile._id} value={profile._id}> {profile.name} </SelectItem> ))} </SelectContent> </Select> <p className="text-sm text-muted-foreground"> Analyze against your saved brand guidelines or perform a generic check. </p> </div> <Button type="submit" className="w-full" disabled={isAnalyzing || !selectedFile}> {isAnalyzing ? ( <> <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Analyzing... </> ) : ( "Run Analysis" )} </Button> {isAnalyzing && <Progress value={analysisProgress} className="w-full mt-4" />} </form> </CardContent> </Card> {/* Analysis Results Card */} <Card> <CardHeader> <CardTitle>Analysis Results</CardTitle> <CardDescription>Detailed report on brand compliance.</CardDescription> </CardHeader> <CardContent> {currentAnalysis && currentAnalysis.status === "pending" && ( <div className="flex flex-col items-center justify-center h-full py-12"> <Loader2 className="h-12 w-12 animate-spin text-primary mb-4" /> <p className="text-lg font-medium">Analysis in progress...</p> <p className="text-sm text-muted-foreground">This may take a few moments.</p> <Progress value={analysisProgress} className="w-2/3 mt-4" /> </div> )} {currentAnalysis && currentAnalysis.status === "failed" && ( <div className="flex flex-col items-center justify-center h-full py-12 text-red-500"> <XCircle className="h-12 w-12 mb-4" /> <p className="text-lg font-medium">Analysis Failed</p> <p className="text-sm text-muted-foreground">Please try again or contact support.</p> </div> )} {analysisResult && currentAnalysis && currentAnalysis.status === "completed" ? ( <ScrollArea className="h-[600px] pr-4"> <div className="space-y-6"> <div className="flex items-center justify-between"> <h3 className="text-xl font-semibold">Overall Score:</h3> <Badge className={cn("text-lg px-4 py-2", getScoreBadgeVariant(analysisResult.overallScore))}> {analysisResult.overallScore}% </Badge> </div> <Separator /> {/* Compliance Sections */} <div className="space-y-4"> <h4 className="text-lg font-semibold flex items-center gap-2"> <Palette className="h-5 w-5" /> Color Compliance <Badge variant={getScoreBadgeVariant(analysisResult.colorCompliance.score)}> {analysisResult.colorCompliance.score}% </Badge> </h4> {analysisResult.colorCompliance.details.issues.length > 0 ? ( <ul className="list-disc list-inside text-sm text-muted-foreground space-y-1"> {analysisResult.colorCompliance.details.issues.map((issue, i) => ( <li key={`color-issue-${i}`}>{issue}</li> ))} </ul> ) : ( <p className="text-sm text-muted-foreground">No significant color issues detected.</p> )} <div className="flex flex-wrap gap-2 mt-2"> <span className="text-sm font-medium">Detected Colors:</span> {analysisResult.colorCompliance.details.detected.map((color, i) => ( <div key={`detected-color-${i}`} className="w-6 h-6 rounded-full border" style={{ backgroundColor: color }} title={color} /> ))} </div> </div> <Separator /> <div className="space-y-4"> <h4 className="text-lg font-semibold flex items-center gap-2"> <Type className="h-5 w-5" /> Typography Compliance <Badge variant={getScoreBadgeVariant(analysisResult.typographyCompliance.score)}> {analysisResult.typographyCompliance.score}% </Badge> </h4> {analysisResult.typographyCompliance.details.issues.length > 0 ? ( <ul className="list-disc list-inside text-sm text-muted-foreground space-y-1"> {analysisResult.typographyCompliance.details.issues.map((issue, i) => ( <li key={`font-issue-${i}`}>{issue}</li> ))} </ul> ) : ( <p className="text-sm text-muted-foreground">No significant typography issues detected.</p> )} <p className="text-sm font-medium mt-2"> Detected Fonts: {analysisResult.typographyCompliance.details.detectedFonts.join(", ") || "N/A"} </p> </div> <Separator /> <div className="space-y-4"> <h4 className="text-lg font-semibold flex items-center gap-2"> <ImageIcon className="h-5 w-5" /> Logo Placement <Badge variant={getScoreBadgeVariant(analysisResult.logoPlacement.score)}> {analysisResult.logoPlacement.score}% </Badge> </h4> {analysisResult.logoPlacement.details.issues.length > 0 ? ( <ul className="list-disc list-inside text-sm text-muted-foreground space-y-1"> {analysisResult.logoPlacement.details.issues.map((issue, i) => ( <li key={`logo-issue-${i}`}>{issue}</li> ))} </ul> ) : ( <p className="text-sm text-muted-foreground">Logo placement appears compliant.</p> )} </div> <Separator /> <div className="space-y-4"> <h4 className="text-lg font-semibold flex items-center gap-2"> <Layout className="h-5 w-5" /> Spacing & Layout <Badge variant={getScoreBadgeVariant(analysisResult.spacingAndLayout.score)}> {analysisResult.spacingAndLayout.score}% </Badge> </h4> {analysisResult.spacingAndLayout.details.issues.length > 0 ? ( <ul className="list-disc list-inside text-sm text-muted-foreground space-y-1"> {analysisResult.spacingAndLayout.details.issues.map((issue, i) => ( <li key={`layout-issue-${i}`}>{issue}</li> ))} </ul> ) : ( <p className="text-sm text-muted-foreground">Layout and spacing appear consistent.</p> )} </div> <Separator /> <div className="space-y-4"> <h4 className="text-lg font-semibold flex items-center gap-2"> <MessageSquare className="h-5 w-5" /> Tone & Messaging <Badge variant={getScoreBadgeVariant(analysisResult.toneAndMessaging.score)}> {analysisResult.toneAndMessaging.score}% </Badge> </h4> {analysisResult.toneAndMessaging.details.issues.length > 0 ? ( <ul className="list-disc list-inside text-sm text-muted-foreground space-y-1"> {analysisResult.toneAndMessaging.details.issues.map((issue, i) => ( <li key={`tone-issue-${i}`}>{issue}</li> ))} </ul> ) : ( <p className="text-sm text-muted-foreground">Messaging tone is consistent with brand voice.</p> )} </div> <Separator /> {/* AI Suggestions (Premium Feature) */} <PremiumGate isPremium={isPremiumUser} featureName="AI-Powered Suggestions"> <AISuggestions analysisId={currentAnalysis._id} /> </PremiumGate> </div> </ScrollArea> ) : ( <div className="flex flex-col items-center justify-center h-full py-12 text-muted-foreground"> <ImageIcon className="h-12 w-12 mb-4 opacity-50" /> <p className="text-lg font-medium">No analysis loaded</p> <p className="text-sm">Upload a design to get started.</p> </div> )} </CardContent> </Card> </div> </div> ) } [V0_FILE]typescriptreact:file="app/analyzer/loading.tsx" isEdit="true" isMerged="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Loader2 } from "lucide-react" export default function AnalyzerLoadingPage() { return ( <div className="container mx-auto py-8 px-4"> <Card className="w-full max-w-4xl mx-auto"> <CardHeader> <CardTitle>Loading Analyzer...</CardTitle> <CardDescription>Please wait while we prepare the analysis tool.</CardDescription> </CardHeader> <CardContent className="flex justify-center items-center h-48"> <Loader2 className="h-10 w-10 animate-spin text-primary" /> </CardContent> </Card> </div> ) } [V0_FILE]typescriptreact:file="app/brand-profile/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect, useMemo } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { useToast } from "@/components/ui/use-toast" import { Loader2, Plus, Edit, Trash2, Save, XCircle } from "lucide-react" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import Image from "next/image" import { ScrollArea } from "@/components/ui/scroll-area" import { useSession } from "next-auth/react" import AuthGuard from "@/components/auth/auth-guard" interface BrandProfile { _id: string name: string logoUrl?: string primaryColors: string[] secondaryColors: string[] fonts: string[] guidelines?: string createdAt: string updatedAt: string } export default function BrandProfilePage() { const { data: session, status: sessionStatus } = useSession() const { toast } = useToast() const [brandProfiles, setBrandProfiles] = useState<BrandProfile[]>([]) const [isLoading, setIsLoading] = useState(true) const [isSubmitting, setIsSubmitting] = useState(false) const [isDeleting, setIsDeleting] = useState(false) const [editingProfile, setEditingProfile] = useState<BrandProfile | null>(null) const [newProfileForm, setNewProfileForm] = useState({ name: "", logoFile: null as File | null, logoPreviewUrl: null as string | null, primaryColors: ["#000000"], secondaryColors: ["#CCCCCC"], fonts: ["Inter"], guidelines: "", }) const isPremiumUser = useMemo(() => session?.user?.plan === "pro" || session?.user?.plan === "enterprise", [session]) const maxProfiles = useMemo(() => { if (session?.user?.plan === "free") return 1 if (session?.user?.plan === "pro") return 10 return -1 // Unlimited for enterprise }, [session]) const canCreateMoreProfiles = useMemo(() => { if (maxProfiles === -1) return true return brandProfiles.length < maxProfiles }, [brandProfiles.length, maxProfiles]) useEffect(() => { if (sessionStatus === "authenticated") { fetchBrandProfiles() } }, [sessionStatus]) const fetchBrandProfiles = async () => { setIsLoading(true) try { const response = await fetch("/api/brand-profiles") if (response.ok) { const data = await response.json() setBrandProfiles(data) } else { toast({ title: "Error", description: "Failed to load brand profiles.", variant: "destructive", }) } } catch (error) { console.error("Error fetching brand profiles:", error) toast({ title: "Error", description: "An unexpected error occurred while loading brand profiles.", variant: "destructive", }) } finally { setIsLoading(false) } } const handleNewProfileFormChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => { const { name, value } = e.target setNewProfileForm((prev) => ({ ...prev, [name]: value })) } const handleNewProfileColorChange = (index: number, value: string, type: "primary" | "secondary") => { setNewProfileForm((prev) => { const colors = type === "primary" ? [...prev.primaryColors] : [...prev.secondaryColors] colors[index] = value return { ...prev, [type + "Colors"]: colors } }) } const handleNewProfileFontChange = (index: number, value: string) => { setNewProfileForm((prev) => { const fonts = [...prev.fonts] fonts[index] = value return { ...prev, fonts } }) } const addColorToNewProfile = (type: "primary" | "secondary") => { setNewProfileForm((prev) => { const colors = type === "primary" ? [...prev.primaryColors] : [...prev.secondaryColors] return { ...prev, [type + "Colors"]: [...colors, "#000000"] } }) } const removeColorFromNewProfile = (index: number, type: "primary" | "secondary") => { setNewProfileForm((prev) => { const colors = type === "primary" ? [...prev.primaryColors] : [...prev.secondaryColors] return { ...prev, [type + "Colors"]: colors.filter((_, i) => i !== index) } }) } const addFontToNewProfile = () => { setNewProfileForm((prev) => ({ ...prev, fonts: [...prev.fonts, ""] })) } const removeFontFromNewProfile = (index: number) => { setNewProfileForm((prev) => ({ ...prev, fonts: prev.fonts.filter((_, i) => i !== index) })) } const handleLogoFileChange = (e: React.ChangeEvent<HTMLInputElement>) => { const file = e.target.files?.[0] if (file) { setNewProfileForm((prev) => ({ ...prev, logoFile: file, logoPreviewUrl: URL.createObjectURL(file) })) } else { setNewProfileForm((prev) => ({ ...prev, logoFile: null, logoPreviewUrl: null })) } } const resetNewProfileForm = () => { setNewProfileForm({ name: "", logoFile: null, logoPreviewUrl: null, primaryColors: ["#000000"], secondaryColors: ["#CCCCCC"], fonts: ["Inter"], guidelines: "", }) setEditingProfile(null) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) const formData = new FormData() formData.append("name", newProfileForm.name) formData.append("primaryColors", JSON.stringify(newProfileForm.primaryColors)) formData.append("secondaryColors", JSON.stringify(newProfileForm.secondaryColors)) formData.append("fonts", JSON.stringify(newProfileForm.fonts)) formData.append("guidelines", newProfileForm.guidelines) if (newProfileForm.logoFile) { formData.append("logo", newProfileForm.logoFile) } else if (editingProfile && editingProfile.logoUrl && !newProfileForm.logoPreviewUrl) { // If logo was present but now removed in edit mode formData.append("logoUrl", "") // Signal to remove existing logo } else if (editingProfile && editingProfile.logoUrl) { // If no new file, but existing logo should be kept formData.append("logoUrl", editingProfile.logoUrl) } try { let response if (editingProfile) { response = await fetch(`/api/brand-profiles/${editingProfile._id}`, { method: "PUT", body: formData, }) } else { response = await fetch("/api/brand-profiles", { method: "POST", body: formData, }) } if (response.ok) { toast({ title: editingProfile ? "Profile Updated" : "Profile Created", description: `Brand profile "${newProfileForm.name}" has been successfully ${ editingProfile ? "updated" : "created" }.`, variant: "default", }) resetNewProfileForm() fetchBrandProfiles() // Refresh list } else { const errorData = await response.json() throw new Error(errorData.message || "Failed to save brand profile.") } } catch (error: any) { console.error("Error saving brand profile:", error) toast({ title: "Error", description: error.message || "An unexpected error occurred while saving the brand profile.", variant: "destructive", }) } finally { setIsSubmitting(false) } } const handleEdit = (profile: BrandProfile) => { setEditingProfile(profile) setNewProfileForm({ name: profile.name, logoFile: null, // No file selected initially for edit logoPreviewUrl: profile.logoUrl || null, primaryColors: profile.primaryColors, secondaryColors: profile.secondaryColors, fonts: profile.fonts, guidelines: profile.guidelines || "", }) } const handleDelete = async (id: string) => { setIsDeleting(true) try { const response = await fetch(`/api/brand-profiles/${id}`, { method: "DELETE", }) if (response.ok) { toast({ title: "Profile Deleted", description: "Brand profile has been successfully deleted.", variant: "default", }) fetchBrandProfiles() // Refresh list } else { const errorData = await response.json() throw new Error(errorData.message || "Failed to delete brand profile.") } } catch (error: any) { console.error("Error deleting brand profile:", error) toast({ title: "Error", description: error.message || "An unexpected error occurred while deleting the brand profile.", variant: "destructive", }) } finally { setIsDeleting(false) } } if (sessionStatus === "loading" || isLoading) { return ( <div className="container mx-auto py-8 px-4"> <Card className="w-full max-w-4xl mx-auto"> <CardHeader> <CardTitle>Loading Brand Profiles...</CardTitle> <CardDescription>Please wait while we fetch your brand profiles.</CardDescription> </CardHeader> <CardContent className="flex justify-center items-center h-48"> <Loader2 className="h-10 w-10 animate-spin text-primary" /> </CardContent> </Card> </div> ) } if (sessionStatus === "unauthenticated") { return ( <div className="container mx-auto py-8 px-4"> <Card className="max-w-md mx-auto"> <CardHeader className="text-center"> <CardTitle>Sign In Required</CardTitle> <CardDescription>Please sign in to manage your brand profiles.</CardDescription> </CardHeader> <CardContent className="text-center"> <Button asChild> <a href="/auth/signin">Sign In</a> </Button> </CardContent> </Card> </div> ) } return ( <AuthGuard> <div className="container mx-auto py-8 px-4"> <h1 className="text-3xl font-bold mb-6 text-center">Your Brand Profiles</h1> <p className="text-muted-foreground text-center mb-8"> Define and manage your brand's visual and textual guidelines. </p> <div className="flex justify-end mb-6"> <Dialog onOpenChange={(open) => !open && resetNewProfileForm()}> <DialogTrigger asChild> <Button disabled={!canCreateMoreProfiles}> <Plus className="mr-2 h-4 w-4" /> Create New Profile </Button> </DialogTrigger> <DialogContent className="sm:max-w-[600px] max-h-[90vh] overflow-y-auto"> <DialogHeader> <DialogTitle>{editingProfile ? "Edit Brand Profile" : "Create New Brand Profile"}</DialogTitle> <DialogDescription> {editingProfile ? "Make changes to your brand profile here. Click save when you're done." : "Define your brand's unique identity. This will be used for AI analysis."} </DialogDescription> </DialogHeader> {!canCreateMoreProfiles && !editingProfile && ( <div className="text-red-500 text-sm mb-4"> You have reached your limit of {maxProfiles} brand profiles for your current plan. Please upgrade to create more. </div> )} <form onSubmit={handleSubmit} className="grid gap-4 py-4"> <div className="grid grid-cols-4 items-center gap-4"> <Label htmlFor="name" className="text-right"> Profile Name </Label> <Input id="name" name="name" value={newProfileForm.name} onChange={handleNewProfileFormChange} className="col-span-3" required disabled={isSubmitting} /> </div> <div className="grid grid-cols-4 items-center gap-4"> <Label htmlFor="logo" className="text-right"> Brand Logo </Label> <div className="col-span-3 flex items-center gap-2"> <Input id="logo" type="file" accept="image/*" onChange={handleLogoFileChange} className="col-span-3" disabled={isSubmitting} /> {newProfileForm.logoPreviewUrl && ( <div className="relative w-16 h-16 border rounded-md overflow-hidden flex-shrink-0"> <Image src={newProfileForm.logoPreviewUrl || "/placeholder.svg"} alt="Logo Preview" fill style={{ objectFit: "contain" }} /> <Button type="button" variant="ghost" size="icon" className="absolute -top-2 -right-2 h-6 w-6 text-red-500 hover:text-red-700" onClick={() => setNewProfileForm((prev) => ({ ...prev, logoFile: null, logoPreviewUrl: null })) } > <XCircle className="h-4 w-4" /> </Button> </div> )} </div> </div> <div className="grid grid-cols-4 items-start gap-4"> <Label className="text-right pt-2">Primary Colors</Label> <div className="col-span-3 space-y-2"> {newProfileForm.primaryColors.map((color, index) => ( <div key={index} className="flex items-center gap-2"> <Input type="color" value={color} onChange={(e) => handleNewProfileColorChange(index, e.target.value, "primary")} className="h-8 w-8 p-0" disabled={isSubmitting} /> <Input type="text" value={color} onChange={(e) => handleNewProfileColorChange(index, e.target.value, "primary")} placeholder="#RRGGBB" className="flex-1" disabled={isSubmitting} /> {newProfileForm.primaryColors.length > 1 && ( <Button type="button" variant="outline" size="icon" onClick={() => removeColorFromNewProfile(index, "primary")} disabled={isSubmitting} > <Trash2 className="h-4 w-4" /> </Button> )} </div> ))} <Button type="button" variant="outline" size="sm" onClick={() => addColorToNewProfile("primary")} disabled={isSubmitting} > <Plus className="mr-2 h-4 w-4" /> Add Primary Color </Button> </div> </div> <div className="grid grid-cols-4 items-start gap-4"> <Label className="text-right pt-2">Secondary Colors</Label> <div className="col-span-3 space-y-2"> {newProfileForm.secondaryColors.map((color, index) => ( <div key={index} className="flex items-center gap-2"> <Input type="color" value={color} onChange={(e) => handleNewProfileColorChange(index, e.target.value, "secondary")} className="h-8 w-8 p-0" disabled={isSubmitting} /> <Input type="text" value={color} onChange={(e) => handleNewProfileColorChange(index, e.target.value, "secondary")} placeholder="#RRGGBB" className="flex-1" disabled={isSubmitting} /> {newProfileForm.secondaryColors.length > 1 && ( <Button type="button" variant="outline" size="icon" onClick={() => removeColorFromNewProfile(index, "secondary")} disabled={isSubmitting} > <Trash2 className="h-4 w-4" /> </Button> )} </div> ))} <Button type="button" variant="outline" size="sm" onClick={() => addColorToNewProfile("secondary")} disabled={isSubmitting} > <Plus className="mr-2 h-4 w-4" /> Add Secondary Color </Button> </div> </div> <div className="grid grid-cols-4 items-start gap-4"> <Label className="text-right pt-2">Fonts</Label> <div className="col-span-3 space-y-2"> {newProfileForm.fonts.map((font, index) => ( <div key={index} className="flex items-center gap-2"> <Input type="text" value={font} onChange={(e) => handleNewProfileFontChange(index, e.target.value)} placeholder="e.g., Inter, Roboto" className="flex-1" disabled={isSubmitting} /> {newProfileForm.fonts.length > 1 && ( <Button type="button" variant="outline" size="icon" onClick={() => removeFontFromNewProfile(index)} disabled={isSubmitting} > <Trash2 className="h-4 w-4" /> </Button> )} </div> ))} <Button type="button" variant="outline" size="sm" onClick={addFontToNewProfile} disabled={isSubmitting} > <Plus className="mr-2 h-4 w-4" /> Add Font </Button> </div> </div> <div className="grid grid-cols-4 items-center gap-4"> <Label htmlFor="guidelines" className="text-right"> Guidelines </Label> <Textarea id="guidelines" name="guidelines" value={newProfileForm.guidelines} onChange={handleNewProfileFormChange} placeholder="e.g., 'Use logo with clear space of 20px. Tone should be professional and friendly.'" className="col-span-3" rows={4} disabled={isSubmitting} /> </div> <DialogFooter> <Button type="submit" disabled={isSubmitting}> {isSubmitting ? ( <> <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Saving... </> ) : ( <> <Save className="mr-2 h-4 w-4" /> {editingProfile ? "Save Changes" : "Create Profile"} </> )} </Button> </DialogFooter> </form> </DialogContent> </Dialog> </div> {brandProfiles.length === 0 ? ( <div className="text-center py-12"> <p className="text-lg text-muted-foreground">No brand profiles created yet.</p> <p className="text-sm text-muted-foreground">Click "Create New Profile" to get started.</p> </div> ) : ( <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> {brandProfiles.map((profile) => ( <Card key={profile._id}> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardTitle className="text-xl font-bold">{profile.name}</CardTitle> <div className="flex gap-2"> <Button variant="ghost" size="icon" onClick={() => handleEdit(profile)}> <Edit className="h-4 w-4" /> <span className="sr-only">Edit</span> </Button> <Button variant="ghost" size="icon" onClick={() => handleDelete(profile._id)} disabled={isDeleting}> {isDeleting ? <Loader2 className="h-4 w-4 animate-spin" /> : <Trash2 className="h-4 w-4" />} <span className="sr-only">Delete</span> </Button> </div> </CardHeader> <CardContent className="space-y-4"> {profile.logoUrl && ( <div className="relative w-24 h-24 border rounded-md overflow-hidden"> <Image src={profile.logoUrl || "/placeholder.svg"} alt={`${profile.name} Logo`} fill style={{ objectFit: "contain" }} /> </div> )} <div> <h4 className="font-semibold text-sm mb-1">Primary Colors:</h4> <div className="flex flex-wrap gap-2"> {profile.primaryColors.map((color, i) => ( <div key={i} className="w-6 h-6 rounded-full border" style={{ backgroundColor: color }} title={color} /> ))} </div> </div> <div> <h4 className="font-semibold text-sm mb-1">Secondary Colors:</h4> <div className="flex flex-wrap gap-2"> {profile.secondaryColors.map((color, i) => ( <div key={i} className="w-6 h-6 rounded-full border" style={{ backgroundColor: color }} title={color} /> ))} </div> </div> <div> <h4 className="font-semibold text-sm mb-1">Fonts:</h4> <p className="text-sm text-muted-foreground">{profile.fonts.join(", ") || "N/A"}</p> </div> {profile.guidelines && ( <div> <h4 className="font-semibold text-sm mb-1">Guidelines:</h4> <ScrollArea className="h-24 text-sm text-muted-foreground pr-4"> <p>{profile.guidelines}</p> </ScrollArea> </div> )} </CardContent> </Card> ))} </div> )} </div> </AuthGuard> ) } [V0_FILE]markdown:file="docs/FEATURES_GUIDE.md" isMerged="true" # Brand Guardian AI Features Guide This document provides a detailed overview of the features available in the Brand Guardian AI application, explaining how each component works and its purpose within the system. ## 1. Authentication and User Management The application uses NextAuth.js for robust authentication, supporting both credential-based (email/password) and OAuth providers (Google, GitHub). ### How it Works: * **User Registration (`/auth/signup`):** New users can create an account using their email and password. Upon successful registration, a new user document is created in the MongoDB database with a default `user` role and `free` plan. * **User Login (`/auth/signin`):** Users can log in with their registered credentials or via Google/GitHub OAuth. * **Credentials:** The system verifies the provided email and password against hashed passwords stored in the database. It also checks if the user account is active. * **OAuth (Google/GitHub):** If a user logs in via OAuth for the first time, a new user account is automatically created in the database. Subsequent logins link to the existing account. * **Session Management:** NextAuth.js handles JWT (JSON Web Token) based sessions, ensuring secure and persistent user sessions. User roles, plans, and other essential data are stored in the JWT for quick access across the application. * **Password Reset (`/auth/forgot-password`, `/auth/reset-password`):** Users can initiate a password reset flow via email. A secure token is sent to their email, allowing them to set a new password. * **Role-Based Access Control (RBAC):** * The `RoleGuard` component (`components/auth/role-guard.tsx`) restricts access to certain pages or components based on the user's `role` (e.g., `admin` or `user`). * Admin-specific pages (e.g., `/admin`, `/admin/users`) are protected, ensuring only users with the `admin` role can access them. ## 2. Brand Profile Management Users can define and manage multiple brand profiles, which serve as the guidelines for AI-powered design analysis. ### How it Works: * **Create Brand Profile (`/brand-profile`):** * Users can create new brand profiles by providing a name, uploading a logo, defining primary and secondary color palettes (hex codes), listing preferred fonts, and adding general brand guidelines (textual description). * The logo image is uploaded to Cloudinary for storage, and its URL is saved in the database. * **Plan Limits:** Free users are limited to 1 brand profile, Pro users to 10, and Enterprise users have unlimited profiles. The UI dynamically disables the "Create New Profile" button if the limit is reached. * **View/Edit Brand Profiles (`/brand-profile`):** * All created brand profiles are displayed in a card-based layout. * Users can click an "Edit" button to modify an existing profile's details. The form pre-populates with the current profile data. * Logo updates involve uploading a new image, which replaces the old one on Cloudinary. Users can also explicitly remove a logo. * **Delete Brand Profile (`/brand-profile`):** Users can delete a brand profile. This action also triggers the deletion of the associated logo image from Cloudinary. ## 3. Brand Compliance Analyzer This is the core feature where users upload design images for AI-powered compliance checks against their defined brand profiles. ### How it Works: * **Image Upload (`/analyzer`):** * Users upload a design image (PNG, JPG, GIF, max 10MB). A preview of the uploaded image is displayed. * The image is converted to base64 for immediate AI processing and also uploaded to Cloudinary for persistent storage. * **Brand Profile Selection (`/analyzer`):** Users select one of their saved brand profiles from a dropdown. A "No Specific Profile (Generic Check)" option is available for general analysis without specific guidelines. * **AI Analysis (`/api/analyses` via Server Action `performAnalysis`):** * When "Run Analysis" is clicked, a server action (`app/actions/analyze.ts`) is triggered. * The server action first checks the user's monthly analysis limit based on their plan. * A "pending" analysis record is created in the database. * The uploaded image and the selected brand profile data are sent to the Google Gemini AI model (`lib/gemini.ts`). * Gemini analyzes the image for: * **Color Compliance:** Compares detected colors with primary/secondary colors in the brand profile. * **Typography Compliance:** Identifies fonts used and compares them with specified brand fonts. * **Logo Placement:** Assesses if a logo is present and its position relative to brand guidelines. * **Spacing & Layout:** Checks for general consistency and adherence to layout principles. * **Tone & Messaging:** Evaluates the textual tone (if any text is detectable) against the brand voice. * After the initial analysis, Gemini also generates AI-powered suggestions for improvement. * The analysis result (including scores, details, and suggestions) is saved back to the analysis record in the database, and its status is updated to "completed". * The user's `analysesThisMonth` count is incremented. * **Display Results (`/analyzer`):** * The UI displays a progress bar during analysis. * Upon completion, a detailed report is shown, including: * An overall compliance score. * Individual scores and detailed issues for color, typography, logo placement, spacing & layout, and tone & messaging. * Detected colors and fonts. * AI-powered suggestions for improvement (visible only to premium users). * The URL is updated with an `analysisId` parameter, allowing users to share or revisit specific analysis results. ## 4. AI-Powered Suggestions (Premium Feature) Leverages Google Gemini to provide actionable recommendations based on the analysis results. ### How it Works: * **Conditional Display:** The `AISuggestions` component (`components/premium/ai-suggestions.tsx`) is wrapped in a `PremiumGate` component, ensuring it's only visible and functional for users on "Pro" or "Enterprise" plans. * **Suggestion Generation:** As part of the `performAnalysis` server action, after the initial compliance check, Gemini generates a list of suggestions based on the detected issues and the brand guidelines. These suggestions are stored within the `analysisResult` object. * **Display:** Premium users see these suggestions listed in a dedicated section of the analysis report, helping them understand how to improve their designs. ## 5. Batch Processing (Premium Feature) Allows premium users to analyze multiple design images simultaneously. ### How it Works: * **File Selection (`/components/premium/batch-processor.tsx`):** Users can select multiple image files using a drag-and-drop interface or file input. * **Brand Profile Selection:** Similar to single analysis, users can choose a brand profile for the entire batch. * **Batch Submission (`/api/premium/batch`):** * When the batch is submitted, each image in the batch is processed sequentially (or in parallel, depending on backend implementation). * Each image undergoes the same AI analysis and suggestion generation process as a single analysis. * Individual analysis records are created for each image in the batch. * User's `analysesThisMonth` count is incremented for each image processed. * **Progress & Notifications:** The UI shows a general progress indicator for the batch. Upon completion of the entire batch, a real-time notification is sent to the user. ## 6. Admin Dashboard (`/admin`) A centralized hub for administrators to manage the application and monitor its health and usage. ### How it Works: * **Access Control:** Protected by `RoleGuard`, ensuring only users with the `admin` role can access this section. * **Key Metrics:** Displays high-level statistics like total users, active subscriptions, total analyses performed, and simulated revenue. * **Navigation:** Provides quick links to dedicated admin sub-sections: * **User Management (`/admin/users`):** * Lists all registered users with details like name, email, role, plan, activity status, and analysis usage. * Admins can search for users. * **Edit User:** Admins can modify user details (name, email, role, plan, active status, email verification, and analysis limits). * **Delete User:** Admins can permanently delete user accounts. * **Analytics (`/admin/analytics`):** Provides detailed charts and data on user growth, analysis trends, feature adoption, etc. (Placeholder for more detailed charts). * **Payments (`/admin/payments`):** Allows admins to view and manage subscriptions and payment history (integrates with Stripe). * **System Logs (`/admin/logs`):** Displays a chronological record of significant system events and admin actions, crucial for debugging and auditing. * **System Settings (`/admin/settings`):** Allows admins to configure global application parameters, including: * General app info (name, description, contact). * AI settings (Gemini API key, toggles for AI suggestions, brand profile extraction). * Integration toggles (Stripe, Adobe Express). * Notification settings (email, real-time). * Admin-specific settings (admin contact email, activity logging). ## 7. Stripe Integration Handles subscription management and payments for premium plans. ### How it Works: * **Checkout Sessions (`/api/stripe/checkout`):** When a user selects a premium plan, a Stripe Checkout Session is created. The user is redirected to Stripe's hosted checkout page. * **Customer Portal (`/api/stripe/portal`):** Users can manage their subscriptions (update payment methods, change plans, cancel) via Stripe's Customer Portal. * **Webhooks (`/api/stripe/webhook`):** Stripe sends real-time events to this endpoint (e.g., `checkout.session.completed`, `customer.subscription.created`, `updated`, `deleted`, `invoice.payment_succeeded`, `invoice.payment_failed`). * The webhook handler verifies the signature for security. * It updates the user's `plan` and `stripeCustomerId` in the database. * It creates or updates `Subscription` records in the database to reflect the current subscription status. * It handles downgrades to the "free" plan upon subscription cancellation. * All relevant Stripe events are logged via the admin logger. ## 8. Adobe Express Add-on Integration Extends Brand Guardian AI's functionality directly into Adobe Express. ### How it Works: * **OAuth2 Authentication (`lib/adobe-express.ts`, `/api/adobe-express/callback`):** * The add-on initiates an OAuth2 flow to authenticate the user with their Adobe ID and obtain necessary permissions (scopes). * Access and refresh tokens are managed to ensure continuous access. * **Brand Panel (`components/adobe-express/brand-panel.tsx`):** * Displays the user's saved brand profiles within Adobe Express. * Allows users to quickly access and apply brand elements (colors, fonts) to their designs. * **Brand Color Picker (`components/adobe-express/brand-color-picker.tsx`):** Enables users to pick and apply colors from their brand profiles directly within Adobe Express. * **Font Replacer (`components/adobe-express/font-replacer.tsx`):** Helps users ensure typography compliance by suggesting and applying brand-approved fonts. * **Permission Guard (`components/adobe-express/permission-guard.tsx`):** Ensures the add-on has the necessary Adobe permissions to function correctly, guiding the user to grant them if missing. * **Webhooks (`/api/adobe-express/webhook`):** Adobe Express can send events (e.g., `document.saved`, `asset.created`) to this endpoint, allowing Brand Guardian AI to react to design changes or new assets created within Adobe Express. ## 9. Real-time Notifications Provides instant updates to users about long-running processes like analysis completion. ### How it Works: * **Server-Sent Events (SSE) (`/api/notifications/stream`):** * The client (`components/realtime/notification-provider.tsx`) establishes an SSE connection to this endpoint. * When an analysis (single or batch) is completed or fails, the backend (`lib/realtime.ts`) sends a notification event to the connected client. * **Notification Display (`components/realtime/notification-bell.tsx`):** * A notification bell icon in the UI indicates new notifications. * Notifications are displayed as toasts or in a notification list, providing immediate feedback to the user. ## 10. Data Export (`/api/export`) Allows users to export their analysis data and brand profiles for external use or record-keeping. ### How it Works: * **Export Endpoint:** A dedicated API route handles data export requests. * **Format & Type Selection:** Users can specify the desired format (e.g., JSON, CSV) and the type of data to export (e.g., `analyses`, `brand-profiles`). * **File Generation:** The backend fetches the requested data from the database, formats it, and sends it as a downloadable file. This comprehensive guide covers the core functionalities of the Brand Guardian AI application, detailing how each feature contributes to the overall user experience and system operation. [V0_FILE]typescriptreact:file="app/pricing/page.tsx" isEdit="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" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" import { redirect } from "next/navigation" import { stripe } from "@/lib/stripe" import { connectToDatabase } from "@/lib/mongodb" import User from "@/models/User" import { ObjectId } from "mongodb" interface Price { id: string name: string description: string features: string[] price: string priceId: string | null isMostPopular: boolean } const prices: Price[] = [ { id: "free", name: "Free", description: "Perfect for trying out the basic features.", features: ["1 Brand Profile", "5 Analyses/month", "Basic Compliance Check", "Email Support"], price: "Free", priceId: null, isMostPopular: false, }, { id: "pro", name: "Pro", description: "For growing brands needing deeper insights.", features: [ "10 Brand Profiles", "100 Analyses/month", "Advanced Compliance Check", "AI-Powered Suggestions", "Batch Processing", "Priority Email Support", ], price: "$29/month", priceId: process.env.STRIPE_PRO_PRICE_ID || null, isMostPopular: true, }, { id: "enterprise", name: "Enterprise", description: "Unlimited power for large organizations.", features: [ "Unlimited Brand Profiles", "Unlimited Analyses", "Full Compliance Suite", "AI-Powered Suggestions", "Batch Processing", "Dedicated Account Manager", "Custom Integrations", ], price: "Contact Us", priceId: process.env.STRIPE_ENTERPRISE_PRICE_ID || null, // Or a special ID for contact form isMostPopular: false, }, ] export default async function PricingPage() { const session = await getServerSession(authOptions) const userId = session?.user?.id let currentUserPlan = "free" let stripeCustomerId: string | null = null if (userId) { await connectToDatabase() const user = await User.findById(new ObjectId(userId)).select("plan stripeCustomerId").lean() if (user) { currentUserPlan = user.plan stripeCustomerId = user.stripeCustomerId || null } } const handleSubscription = async (priceId: string | null) => { "use server" if (!session?.user?.id) { redirect("/auth/signin?callbackUrl=/pricing") } if (!priceId) { // Handle "Contact Us" or Free plan logic if needed return { success: false, message: "Invalid price ID or contact us plan." } } try { const checkoutSession = await stripe.checkout.sessions.create({ customer: stripeCustomerId || undefined, // Use existing customer if available customer_email: stripeCustomerId ? undefined : session.user.email || undefined, // Only provide email if new customer payment_method_types: ["card"], line_items: [ { price: priceId, quantity: 1, }, ], mode: "subscription", success_url: `${process.env.NEXT_PUBLIC_APP_URL}/dashboard?success=true`, cancel_url: `${process.env.NEXT_PUBLIC_APP_URL}/pricing?canceled=true`, metadata: { userId: session.user.id, priceId: priceId, }, }) if (checkoutSession.url) { redirect(checkoutSession.url) } else { return { success: false, message: "Failed to create Stripe checkout session." } } } catch (error) { console.error("Stripe checkout error:", error) return { success: false, message: "An error occurred during checkout." } } } const handleManageSubscription = async () => { "use server" if (!session?.user?.id || !stripeCustomerId) { redirect("/auth/signin?callbackUrl=/pricing") } try { const portalSession = await stripe.billingPortal.sessions.create({ customer: stripeCustomerId, return_url: `${process.env.NEXT_PUBLIC_APP_URL}/settings?tab=billing`, }) if (portalSession.url) { redirect(portalSession.url) } else { return { success: false, message: "Failed to create Stripe customer portal session." } } } catch (error) { console.error("Stripe portal error:", error) return { success: false, message: "An error occurred during subscription management." } } } return ( <div className="container mx-auto px-4 py-12 md:py-20"> <div className="text-center mb-12"> <h1 className="text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl"> Choose the right plan for your brand. </h1> <p className="mt-4 text-lg text-muted-foreground"> Flexible pricing to fit your needs, from individual creators to large enterprises. </p> </div> <div className="grid gap-8 lg:grid-cols-3 max-w-6xl mx-auto"> {prices.map((price) => ( <Card key={price.id} className={`flex flex-col ${price.isMostPopular ? "border-primary ring-2 ring-primary" : ""}`} > <CardHeader className="pb-4"> <CardTitle className="text-2xl font-bold">{price.name}</CardTitle> <CardDescription className="mt-2 text-muted-foreground">{price.description}</CardDescription> </CardHeader> <CardContent className="flex-1"> <div className="text-4xl font-bold mt-4">{price.price}</div> <ul className="mt-6 space-y-3 text-sm"> {price.features.map((feature) => ( <li key={feature} className="flex items-center"> <Check className="h-4 w-4 text-green-500 mr-2 flex-shrink-0" /> {feature} </li> ))} </ul> </CardContent> <CardFooter className="pt-6"> {currentUserPlan === price.id ? ( <Button className="w-full" disabled> Current Plan </Button> ) : price.id === "enterprise" ? ( <Button className="w-full" onClick={() => alert("Please contact us for Enterprise pricing.")}> Contact Sales </Button> ) : ( <form action={handleSubscription}> <input type="hidden" name="priceId" value={price.priceId || ""} /> <Button type="submit" className="w-full" disabled={!price.priceId && price.id !== "free"}> {price.id === "free" ? "Get Started" : "Upgrade Now"} </Button> </form> )} </CardFooter> </Card> ))} </div> {currentUserPlan !== "free" && ( <div className="mt-12 text-center"> <p className="text-muted-foreground">Want to manage your current subscription?</p> <form action={handleManageSubscription} className="mt-2"> <Button variant="link" type="submit"> Manage Subscription </Button> </form> </div> )} </div> ) } [V0_FILE]typescriptreact:file="app/admin/page.tsx" isEdit="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { DollarSign, Users, BarChart, FileText } from "lucide-react" import { RoleGuard } from "@/components/auth/role-guard" import Link from "next/link" import { connectToDatabase } from "@/lib/mongodb" import User from "@/models/User" import Analysis from "@/models/Analysis" import Subscription from "@/models/Subscription" import { formatCurrency } from "@/lib/utils" async function getAdminStats() { await connectToDatabase() const totalUsers = await User.countDocuments() const activeSubscriptions = await Subscription.countDocuments({ status: "active" }) const totalAnalyses = await Analysis.countDocuments() // Calculate revenue for the last 30 days (simplified example) const thirtyDaysAgo = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000) const recentSubscriptions = await Subscription.find({ status: "active", startDate: { $gte: thirtyDaysAgo }, }).lean() // This is a simplified revenue calculation. In a real app, you'd track actual payments. // Assuming Pro plan is $29/month and Enterprise is $99/month (example) let revenueLast30Days = 0 for (const sub of recentSubscriptions) { if (sub.plan === "pro") { revenueLast30Days += 29 // Example price } else if (sub.plan === "enterprise") { revenueLast30Days += 99 // Example price } } return { totalUsers, activeSubscriptions, totalAnalyses, revenueLast30Days, } } export default async function AdminDashboardPage() { const stats = await getAdminStats() return ( <RoleGuard requiredRole="admin"> <div className="flex flex-col gap-4 p-4 md:gap-8 md:p-6"> <h1 className="text-3xl font-bold">Admin Dashboard</h1> <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4"> <Card> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardTitle className="text-sm font-medium">Total Users</CardTitle> <Users className="h-4 w-4 text-muted-foreground" /> </CardHeader> <CardContent> <div className="text-2xl font-bold">{stats.totalUsers}</div> <p className="text-xs text-muted-foreground">Total registered users</p> </CardContent> </Card> <Card> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardTitle className="text-sm font-medium">Active Subscriptions</CardTitle> <DollarSign className="h-4 w-4 text-muted-foreground" /> </CardHeader> <CardContent> <div className="text-2xl font-bold">{stats.activeSubscriptions}</div> <p className="text-xs text-muted-foreground">Currently active premium plans</p> </CardContent> </Card> <Card> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardTitle className="text-sm font-medium">Total Analyses</CardTitle> <BarChart className="h-4 w-4 text-muted-foreground" /> </CardHeader> <CardContent> <div className="text-2xl font-bold">{stats.totalAnalyses}</div> <p className="text-xs text-muted-foreground">Total brand analyses performed</p> </CardContent> </Card> <Card> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardTitle className="text-sm font-medium">Revenue (30 Days)</CardTitle> <DollarSign className="h-4 w-4 text-muted-foreground" /> </CardHeader> <CardContent> <div className="text-2xl font-bold">{formatCurrency(stats.revenueLast30Days)}</div> <p className="text-xs text-muted-foreground">Estimated revenue from new subscriptions</p> </CardContent> </Card> </div> <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3"> <Link href="/admin/users"> <Card className="hover:shadow-lg transition-shadow"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardTitle className="text-lg font-medium">User Management</CardTitle> <Users className="h-5 w-5 text-primary" /> </CardHeader> <CardContent> <p className="text-sm text-muted-foreground">View, edit, and manage user accounts.</p> </CardContent> </Card> </Link> <Link href="/admin/analytics"> <Card className="hover:shadow-lg transition-shadow"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardTitle className="text-lg font-medium">Analytics</CardTitle> <BarChart className="h-5 w-5 text-primary" /> </CardHeader> <CardContent> <p className="text-sm text-muted-foreground">Monitor system usage and performance.</p> </CardContent> </Card> </Link> <Link href="/admin/payments"> <Card className="hover:shadow-lg transition-shadow"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardTitle className="text-lg font-medium">Payments</CardTitle> <DollarSign className="h-5 w-5 text-primary" /> </CardHeader> <CardContent> <p className="text-sm text-muted-foreground">View subscription and payment data.</p> </CardContent> </Card> </Link> <Link href="/admin/logs"> <Card className="hover:shadow-lg transition-shadow"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardTitle className="text-lg font-medium">System Logs</CardTitle> <FileText className="h-5 w-5 text-primary" /> </CardHeader> <CardContent> <p className="text-sm text-muted-foreground">Review application activity and errors.</p> </CardContent> </Card> </Link> <Link href="/admin/settings"> <Card className="hover:shadow-lg transition-shadow"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardTitle className="text-lg font-medium">System Settings</CardTitle> <FileText className="h-5 w-5 text-primary" /> </CardHeader> <CardContent> <p className="text-sm text-muted-foreground">Configure global application parameters.</p> </CardContent> </Card> </Link> </div> </div> </RoleGuard> ) } [V0_FILE]typescriptreact:file="app/admin/users/page.tsx" isEdit="true" "use client" import { useState, useEffect, useMemo } from "react" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Checkbox } from "@/components/ui/checkbox" import { useToast } from "@/components/ui/use-toast" import type { User as UserType } from "@/models/User" import { format } from "date-fns" import { LoadingSpinner } from "@/components/ui/loading-spinner" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" import { Terminal } from "lucide-react" type UserDisplay = Omit<UserType, "_id" | "password" | "createdAt" | "updatedAt"> & { id: string createdAt: string updatedAt: string } export default function AdminUsersPage() { const [users, setUsers] = useState<UserDisplay[]>([]) const [loading, setLoading] = useState(true) const [error, setError] = useState<string | null>(null) const [searchTerm, setSearchTerm] = useState("") const [editingUser, setEditingUser] = useState<UserDisplay | null>(null) const [isEditDialogOpen, setIsEditDialogOpen] = useState(false) const { toast } = useToast() const fetchUsers = async () => { setLoading(true) setError(null) try { const res = await fetch("/api/admin/users") if (!res.ok) { throw new Error(`HTTP error! status: ${res.status}`) } const data = await res.json() if (data.success) { setUsers( data.data.map((user: UserType) => ({ ...user, id: user._id.toString(), createdAt: format(new Date(user.createdAt), "yyyy-MM-dd HH:mm"), updatedAt: format(new Date(user.updatedAt), "yyyy-MM-dd HH:mm"), })), ) } else { setError(data.message || "Failed to fetch users.") } } catch (e: any) { setError(e.message || "An unexpected error occurred.") console.error("Failed to fetch users:", e) } finally { setLoading(false) } } useEffect(() => { fetchUsers() }, []) const filteredUsers = useMemo(() => { return users.filter( (user) => user.email.toLowerCase().includes(searchTerm.toLowerCase()) || user.name?.toLowerCase().includes(searchTerm.toLowerCase()) || user.role.toLowerCase().includes(searchTerm.toLowerCase()) || user.plan.toLowerCase().includes(searchTerm.toLowerCase()), ) }, [users, searchTerm]) const handleEditClick = (user: UserDisplay) => { setEditingUser({ ...user }) setIsEditDialogOpen(true) } const handleSaveUser = async () => { if (!editingUser) return try { const res = await fetch(`/api/admin/users/${editingUser.id}`, { method: "PUT", headers: { "Content-Type": "application/json", }, body: JSON.stringify(editingUser), }) const data = await res.json() if (data.success) { toast({ title: "Success", description: "User updated successfully.", }) setIsEditDialogOpen(false) fetchUsers() // Re-fetch users to update the list } else { toast({ title: "Error", description: data.message || "Failed to update user.", variant: "destructive", }) } } catch (e: any) { toast({ title: "Error", description: e.message || "An unexpected error occurred.", variant: "destructive", }) console.error("Failed to save user:", e) } } const handleDeleteUser = async (userId: string) => { if (!confirm("Are you sure you want to delete this user? This action cannot be undone.")) { return } try { const res = await fetch(`/api/admin/users/${userId}`, { method: "DELETE", }) const data = await res.json() if (data.success) { toast({ title: "Success", description: "User deleted successfully.", }) fetchUsers() // Re-fetch users to update the list } else { toast({ title: "Error", description: data.message || "Failed to delete user.", variant: "destructive", }) } } catch (e: any) { toast({ title: "Error", description: e.message || "An unexpected error occurred.", variant: "destructive", }) console.error("Failed to delete user:", e) } } if (loading) { return ( <div className="flex justify-center items-center h-full"> <LoadingSpinner /> </div> ) } if (error) { return ( <Alert variant="destructive"> <Terminal className="h-4 w-4" /> <AlertTitle>Error</AlertTitle> <AlertDescription>{error}</AlertDescription> </Alert> ) } return ( <div className="p-4 md:p-6"> <h1 className="text-3xl font-bold mb-6">User Management</h1> <div className="mb-4"> <Input placeholder="Search users by email, name, role, or plan..." value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} className="max-w-sm" /> </div> <div className="rounded-md border"> <Table> <TableHeader> <TableRow> <TableHead>ID</TableHead> <TableHead>Name</TableHead> <TableHead>Email</TableHead> <TableHead>Role</TableHead> <TableHead>Plan</TableHead> <TableHead>Analyses/Month</TableHead> <TableHead>Email Verified</TableHead> <TableHead>Active</TableHead> <TableHead>Created At</TableHead> <TableHead>Updated At</TableHead> <TableHead>Actions</TableHead> </TableRow> </TableHeader> <TableBody> {filteredUsers.length === 0 ? ( <TableRow> <TableCell colSpan={11} className="text-center"> No users found. </TableCell> </TableRow> ) : ( filteredUsers.map((user) => ( <TableRow key={user.id}> <TableCell className="text-xs">{user.id}</TableCell> <TableCell>{user.name || "N/A"}</TableCell> <TableCell>{user.email}</TableCell> <TableCell>{user.role}</TableCell> <TableCell>{user.plan}</TableCell> <TableCell> {user.analysesThisMonth}/{user.analysisLimit} </TableCell> <TableCell>{user.emailVerified ? "Yes" : "No"}</TableCell> <TableCell>{user.isActive ? "Yes" : "No"}</TableCell> <TableCell>{user.createdAt}</TableCell> <TableCell>{user.updatedAt}</TableCell> <TableCell> <Button variant="outline" size="sm" onClick={() => handleEditClick(user)}> Edit </Button> <Button variant="destructive" size="sm" className="ml-2" onClick={() => handleDeleteUser(user.id)}> Delete </Button> </TableCell> </TableRow> )) )} </TableBody> </Table> </div> {editingUser && ( <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}> <DialogContent className="sm:max-w-[425px]"> <DialogHeader> <DialogTitle>Edit User</DialogTitle> <DialogDescription>Make changes to user profile here. Click save when you're done.</DialogDescription> </DialogHeader> <div className="grid gap-4 py-4"> <div className="grid grid-cols-4 items-center gap-4"> <Label htmlFor="name" className="text-right"> Name </Label> <Input id="name" value={editingUser.name || ""} onChange={(e) => setEditingUser({ ...editingUser, name: e.target.value })} className="col-span-3" /> </div> <div className="grid grid-cols-4 items-center gap-4"> <Label htmlFor="email" className="text-right"> Email </Label> <Input id="email" value={editingUser.email} onChange={(e) => setEditingUser({ ...editingUser, email: e.target.value })} className="col-span-3" /> </div> <div className="grid grid-cols-4 items-center gap-4"> <Label htmlFor="role" className="text-right"> Role </Label> <Select value={editingUser.role} onValueChange={(value) => setEditingUser({ ...editingUser, role: value as "user" | "admin" })} > <SelectTrigger className="col-span-3"> <SelectValue placeholder="Select a role" /> </SelectTrigger> <SelectContent> <SelectItem value="user">User</SelectItem> <SelectItem value="admin">Admin</SelectItem> </SelectContent> </Select> </div> <div className="grid grid-cols-4 items-center gap-4"> <Label htmlFor="plan" className="text-right"> Plan </Label> <Select value={editingUser.plan} onValueChange={(value) => setEditingUser({ ...editingUser, plan: value as "free" | "pro" | "enterprise" }) } > <SelectTrigger className="col-span-3"> <SelectValue placeholder="Select a plan" /> </SelectTrigger> <SelectContent> <SelectItem value="free">Free</SelectItem> <SelectItem value="pro">Pro</SelectItem> <SelectItem value="enterprise">Enterprise</SelectItem> </SelectContent> </Select> </div> <div className="grid grid-cols-4 items-center gap-4"> <Label htmlFor="analysisLimit" className="text-right"> Analysis Limit </Label> <Input id="analysisLimit" type="number" value={editingUser.analysisLimit} onChange={(e) => setEditingUser({ ...editingUser, analysisLimit: Number.parseInt(e.target.value) || 0 }) } className="col-span-3" /> </div> <div className="grid grid-cols-4 items-center gap-4"> <Label htmlFor="analysesThisMonth" className="text-right"> Analyses This Month </Label> <Input id="analysesThisMonth" type="number" value={editingUser.analysesThisMonth} onChange={(e) => setEditingUser({ ...editingUser, analysesThisMonth: Number.parseInt(e.target.value) || 0 }) } className="col-span-3" /> </div> <div className="grid grid-cols-4 items-center gap-4"> <Label htmlFor="emailVerified" className="text-right"> Email Verified </Label> <Checkbox id="emailVerified" checked={editingUser.emailVerified} onCheckedChange={(checked) => setEditingUser({ ...editingUser, emailVerified: !!checked })} className="col-span-3" /> </div> <div className="grid grid-cols-4 items-center gap-4"> <Label htmlFor="isActive" className="text-right"> Active </Label> <Checkbox id="isActive" checked={editingUser.isActive} onCheckedChange={(checked) => setEditingUser({ ...editingUser, isActive: !!checked })} className="col-span-3" /> </div> </div> <DialogFooter> <Button variant="outline" onClick={() => setIsEditDialogOpen(false)}> Cancel </Button> <Button onClick={handleSaveUser}>Save changes</Button> </DialogFooter> </DialogContent> </Dialog> )} </div> ) } [V0_FILE]typescriptreact:file="app/admin/users/loading.tsx" isEdit="true" import { Card, CardContent, CardHeader } from "@/components/ui/card" import { Skeleton } from "@/components/ui/skeleton" import { LoadingSpinner } from "@/components/ui/loading-spinner" export default function AdminUsersLoadingPage() { return ( <div className="container mx-auto py-8 px-4"> <h1 className="text-3xl font-bold mb-6 text-center">User Management</h1> <p className="text-muted-foreground text-center mb-8">View and manage all user accounts in the system.</p> <Card className="max-w-4xl mx-auto"> <CardHeader> <Skeleton className="h-6 w-1/4 mb-2" /> <Skeleton className="h-4 w-1/2" /> </CardHeader> <CardContent> <Skeleton className="h-10 w-full mb-4" /> {/* Search bar */} <div className="overflow-x-auto"> <table className="w-full"> <thead> <tr className="border-b"> <th className="py-2 px-4 text-left"> <Skeleton className="h-4 w-20" /> </th> <th className="py-2 px-4 text-left"> <Skeleton className="h-4 w-24" /> </th> <th className="py-2 px-4 text-left"> <Skeleton className="h-4 w-16" /> </th> <th className="py-2 px-4 text-left"> <Skeleton className="h-4 w-16" /> </th> <th className="py-2 px-4 text-left"> <Skeleton className="h-4 w-20" /> </th> <th className="py-2 px-4 text-left"> <Skeleton className="h-4 w-20" /> </th> <th className="py-2 px-4 text-right"> <Skeleton className="h-4 w-16 ml-auto" /> </th> </tr> </thead> <tbody> {[...Array(5)].map((_, i) => ( <tr key={i} className="border-b last:border-b-0"> <td className="py-3 px-4"> <Skeleton className="h-4 w-24" /> </td> <td className="py-3 px-4"> <Skeleton className="h-4 w-32" /> </td> <td className="py-3 px-4"> <Skeleton className="h-4 w-12" /> </td> <td className="py-3 px-4"> <Skeleton className="h-4 w-12" /> </td> <td className="py-3 px-4"> <Skeleton className="h-4 w-16" /> </td> <td className="py-3 px-4"> <Skeleton className="h-4 w-20" /> </td> <td className="py-3 px-4 flex justify-end gap-2"> <Skeleton className="h-8 w-8 rounded-md" /> <Skeleton className="h-8 w-8 rounded-md" /> </td> </tr> ))} </tbody> </table> </div> </CardContent> </Card> <div className="flex justify-center items-center h-full min-h-[calc(100vh-100px)]"> <LoadingSpinner /> </div> </div> ) } [V0_FILE]typescriptreact:file="app/admin/analytics/page.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { BarChart, LineChart, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell, Legend, Line, Bar, } from "recharts" import { useToast } from "@/components/ui/use-toast" import { LoadingSpinner } from "@/components/ui/loading-spinner" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" import { Terminal } from "lucide-react" interface AnalyticsData { userGrowth: { date: string; count: number }[] analysisTrends: { date: string; count: number }[] planDistribution: { name: string; value: number }[] featureUsage: { name: string; count: number }[] } const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042", "#8884d8", "#82ca9d"] export default function AdminAnalyticsPage() { const [analyticsData, setAnalyticsData] = useState<AnalyticsData | null>(null) const [loading, setLoading] = useState(true) const [error, setError] = useState<string | null>(null) const { toast } = useToast() useEffect(() => { const fetchAnalytics = async () => { setLoading(true) setError(null) try { const res = await fetch("/api/admin/analytics") if (!res.ok) { throw new Error(`HTTP error! status: ${res.status}`) } const data = await res.json() if (data.success) { setAnalyticsData(data.data) } else { setError(data.message || "Failed to fetch analytics data.") toast({ title: "Error", description: data.message || "Failed to fetch analytics data.", variant: "destructive", }) } } catch (e: any) { setError(e.message || "An unexpected error occurred.") toast({ title: "Error", description: e.message || "An unexpected error occurred.", variant: "destructive", }) console.error("Failed to fetch analytics:", e) } finally { setLoading(false) } } fetchAnalytics() }, [toast]) if (loading) { return ( <div className="flex justify-center items-center h-full"> <LoadingSpinner /> </div> ) } if (error) { return ( <Alert variant="destructive"> <Terminal className="h-4 w-4" /> <AlertTitle>Error</AlertTitle> <AlertDescription>{error}</AlertDescription> </Alert> ) } if (!analyticsData) { return <div className="p-4 md:p-6 text-center text-muted-foreground">No analytics data available.</div> } return ( <div className="p-4 md:p-6"> <h1 className="text-3xl font-bold mb-6">Analytics Dashboard</h1> <div className="grid gap-6 lg:grid-cols-2 xl:grid-cols-3"> <Card> <CardHeader> <CardTitle>User Growth Over Time</CardTitle> <CardDescription>New user registrations daily.</CardDescription> </CardHeader> <CardContent> <ResponsiveContainer width="100%" height={300}> <LineChart data={analyticsData.userGrowth}> <CartesianGrid strokeDasharray="3 3" /> <XAxis dataKey="date" /> <YAxis /> <Tooltip /> <Legend /> <Line type="monotone" dataKey="count" stroke="#8884d8" name="New Users" /> </LineChart> </ResponsiveContainer> </CardContent> </Card> <Card> <CardHeader> <CardTitle>Analysis Trends</CardTitle> <CardDescription>Number of analyses performed daily.</CardDescription> </CardHeader> <CardContent> <ResponsiveContainer width="100%" height={300}> <BarChart data={analyticsData.analysisTrends}> <CartesianGrid strokeDasharray="3 3" /> <XAxis dataKey="date" /> <YAxis /> <Tooltip /> <Legend /> <Bar dataKey="count" fill="#82ca9d" name="Analyses" /> </BarChart> </ResponsiveContainer> </CardContent> </Card> <Card> <CardHeader> <CardTitle>Plan Distribution</CardTitle> <CardDescription>Breakdown of users by subscription plan.</CardDescription> </CardHeader> <CardContent> <ResponsiveContainer width="100%" height={300}> <PieChart> <Pie data={analyticsData.planDistribution} cx="50%" cy="50%" labelLine={false} outerRadius={80} fill="#8884d8" dataKey="value" label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`} > {analyticsData.planDistribution.map((entry, index) => ( <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} /> ))} </Pie> <Tooltip /> <Legend /> </PieChart> </ResponsiveContainer> </CardContent> </Card> <Card className="lg:col-span-2 xl:col-span-3"> <CardHeader> <CardTitle>Feature Usage</CardTitle> <CardDescription>How often different features are used.</CardDescription> </CardHeader> <CardContent> <ResponsiveContainer width="100%" height={300}> <BarChart data={analyticsData.featureUsage}> <CartesianGrid strokeDasharray="3 3" /> <XAxis dataKey="name" /> <YAxis /> <Tooltip /> <Legend /> <Bar dataKey="count" fill="#ffc658" name="Usage Count" /> </BarChart> </ResponsiveContainer> </CardContent> </Card> </div> </div> ) } [V0_FILE]typescriptreact:file="app/admin/analytics/loading.tsx" isEdit="true" import { Card, CardContent, CardHeader } from "@/components/ui/card" import { Skeleton } from "@/components/ui/skeleton" import { LoadingSpinner } from "@/components/ui/loading-spinner" export default function AdminAnalyticsLoadingPage() { return ( <div className="container mx-auto py-8 px-4"> <h1 className="text-3xl font-bold mb-6 text-center">Analytics Dashboard</h1> <p className="text-muted-foreground text-center mb-8"> In-depth insights into user behavior, system performance, and revenue. </p> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto"> {/* Key Metrics Skeletons */} {[...Array(3)].map((_, i) => ( <Card key={`metric-${i}`}> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <Skeleton className="h-4 w-1/2" /> <Skeleton className="h-4 w-4 rounded-full" /> </CardHeader> <CardContent> <Skeleton className="h-8 w-1/3 mb-2" /> <Skeleton className="h-3 w-2/3" /> </CardContent> </Card> ))} {/* Chart Skeletons */} {[...Array(3)].map((_, i) => ( <Card key={`chart-${i}`} className={i === 0 ? "col-span-1" : "col-span-1 md:col-span-2 lg:col-span-3"}> <CardHeader> <Skeleton className="h-6 w-3/4 mb-2" /> <Skeleton className="h-4 w-1/2" /> </CardHeader> <CardContent> <Skeleton className="h-[250px] w-full" /> </CardContent> </Card> ))} </div> {/* Loading Spinner */} <div className="flex justify-center items-center h-full min-h-[calc(100vh-100px)]"> <LoadingSpinner /> </div> </div> ) } [V0_FILE]typescriptreact:file="app/admin/payments/page.tsx" isEdit="true" "use client" import { useState, useEffect, useMemo } from "react" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Input } from "@/components/ui/input" import { useToast } from "@/components/ui/use-toast" import { LoadingSpinner } from "@/components/ui/loading-spinner" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" import { Terminal } from "lucide-react" import { format } from "date-fns" import { formatCurrency } from "@/lib/utils" interface PaymentRecord { id: string userId: string userEmail: string plan: string amount: number currency: string status: string stripeSubscriptionId: string startDate: string endDate: string | null createdAt: string } export default function AdminPaymentsPage() { const [payments, setPayments] = useState<PaymentRecord[]>([]) const [loading, setLoading] = useState(true) const [error, setError] = useState<string | null>(null) const [searchTerm, setSearchTerm] = useState("") const { toast } = useToast() const fetchPayments = async () => { setLoading(true) setError(null) try { const res = await fetch("/api/admin/payments") if (!res.ok) { throw new Error(`HTTP error! status: ${res.status}`) } const data = await res.json() if (data.success) { setPayments( data.data.map((payment: any) => ({ id: payment._id.toString(), userId: payment.userId.toString(), userEmail: payment.userEmail, plan: payment.plan, amount: payment.amount, currency: payment.currency, status: payment.status, stripeSubscriptionId: payment.stripeSubscriptionId, startDate: format(new Date(payment.startDate), "yyyy-MM-dd HH:mm"), endDate: payment.endDate ? format(new Date(payment.endDate), "yyyy-MM-dd HH:mm") : "N/A", createdAt: format(new Date(payment.createdAt), "yyyy-MM-dd HH:mm"), })), ) } else { setError(data.message || "Failed to fetch payments.") } } catch (e: any) { setError(e.message || "An unexpected error occurred.") console.error("Failed to fetch payments:", e) } finally { setLoading(false) } } useEffect(() => { fetchPayments() }, []) const filteredPayments = useMemo(() => { return payments.filter( (payment) => payment.userEmail.toLowerCase().includes(searchTerm.toLowerCase()) || payment.plan.toLowerCase().includes(searchTerm.toLowerCase()) || payment.status.toLowerCase().includes(searchTerm.toLowerCase()) || payment.stripeSubscriptionId.toLowerCase().includes(searchTerm.toLowerCase()), ) }, [payments, searchTerm]) if (loading) { return ( <div className="flex justify-center items-center h-full"> <LoadingSpinner /> </div> ) } if (error) { return ( <Alert variant="destructive"> <Terminal className="h-4 w-4" /> <AlertTitle>Error</AlertTitle> <AlertDescription>{error}</AlertDescription> </Alert> ) } return ( <div className="p-4 md:p-6"> <h1 className="text-3xl font-bold mb-6">Payment & Subscription Management</h1> <div className="mb-4"> <Input placeholder="Search payments by user email, plan, or status..." value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} className="max-w-sm" /> </div> <div className="rounded-md border"> <Table> <TableHeader> <TableRow> <TableHead>ID</TableHead> <TableHead>User Email</TableHead> <TableHead>Plan</TableHead> <TableHead>Amount</TableHead> <TableHead>Status</TableHead> <TableHead>Stripe Sub ID</TableHead> <TableHead>Start Date</TableHead> <TableHead>End Date</TableHead> <TableHead>Created At</TableHead> </TableRow> </TableHeader> <TableBody> {filteredPayments.length === 0 ? ( <TableRow> <TableCell colSpan={9} className="text-center"> No payment records found. </TableCell> </TableRow> ) : ( filteredPayments.map((payment) => ( <TableRow key={payment.id}> <TableCell className="text-xs">{payment.id}</TableCell> <TableCell>{payment.userEmail}</TableCell> <TableCell>{payment.plan}</TableCell> <TableCell>{formatCurrency(payment.amount, payment.currency)}</TableCell> <TableCell>{payment.status}</TableCell> <TableCell className="text-xs">{payment.stripeSubscriptionId}</TableCell> <TableCell>{payment.startDate}</TableCell> <TableCell>{payment.endDate}</TableCell> <TableCell>{payment.createdAt}</TableCell> </TableRow> )) )} </TableBody> </Table> </div> </div> ) } [V0_FILE]typescriptreact:file="app/admin/payments/loading.tsx" isEdit="true" import { Card, CardContent, CardHeader } from "@/components/ui/card" import { Skeleton } from "@/components/ui/skeleton" import { LoadingSpinner } from "@/components/ui/loading-spinner" export default function AdminPaymentsLoadingPage() { return ( <div className="container mx-auto py-8 px-4"> <h1 className="text-3xl font-bold mb-6 text-center">Payment Management</h1> <p className="text-muted-foreground text-center mb-8">Overview of all transactions and subscriptions.</p> <Card className="max-w-6xl mx-auto"> <CardHeader> <Skeleton className="h-6 w-1/4 mb-2" /> <Skeleton className="h-4 w-1/2" /> </CardHeader> <CardContent> <div className="overflow-x-auto"> <table className="w-full"> <thead> <tr className="border-b"> <th className="py-2 px-4 text-left"> <Skeleton className="h-4 w-20" /> </th> <th className="py-2 px-4 text-left"> <Skeleton className="h-4 w-24" /> </th> <th className="py-2 px-4 text-left"> <Skeleton className="h-4 w-16" /> </th> <th className="py-2 px-4 text-left"> <Skeleton className="h-4 w-16" /> </th> <th className="py-2 px-4 text-left"> <Skeleton className="h-4 w-20" /> </th> <th className="py-2 px-4 text-left"> <Skeleton className="h-4 w-32" /> </th> <th className="py-2 px-4 text-left"> <Skeleton className="h-4 w-32" /> </th> <th className="py-2 px-4 text-left"> <Skeleton className="h-4 w-20" /> </th> </tr> </thead> <tbody> {[...Array(5)].map((_, i) => ( <tr key={i} className="border-b last:border-b-0"> <td className="py-3 px-4"> <Skeleton className="h-4 w-24 mb-1" /> <Skeleton className="h-3 w-32" /> </td> <td className="py-3 px-4"> <Skeleton className="h-4 w-20" /> </td> <td className="py-3 px-4"> <Skeleton className="h-4 w-12" /> </td> <td className="py-3 px-4"> <Skeleton className="h-4 w-16" /> </td> <td className="py-3 px-4"> <Skeleton className="h-4 w-20" /> </td> <td className="py-3 px-4"> <Skeleton className="h-4 w-24" /> </td> <td className="py-3 px-4"> <Skeleton className="h-4 w-24" /> </td> <td className="py-3 px-4"> <Skeleton className="h-4 w-20" /> </td> </tr> ))} </tbody> </table> </div> </CardContent> </Card> <div className="flex justify-center items-center h-full min-h-[calc(100vh-100px)]"> <LoadingSpinner /> </div> </div> ) } [V0_FILE]typescriptreact:file="app/admin/logs/page.tsx" isEdit="true" "use client" import { useState, useEffect, useMemo } from "react" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Input } from "@/components/ui/input" import { useToast } from "@/components/ui/use-toast" import { LoadingSpinner } from "@/components/ui/loading-spinner" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" import { Terminal } from "lucide-react" import { format } from "date-fns" import type { AdminLog as AdminLogType } from "@/models/AdminLog" type AdminLogDisplay = Omit<AdminLogType, "_id" | "timestamp"> & { id: string timestamp: string } export default function AdminLogsPage() { const [logs, setLogs] = useState<AdminLogDisplay[]>([]) const [loading, setLoading] = useState(true) const [error, setError] = useState<string | null>(null) const [searchTerm, setSearchTerm] = useState("") const { toast } = useToast() const fetchLogs = async () => { setLoading(true) setError(null) try { const res = await fetch("/api/admin/logs") if (!res.ok) { throw new Error(`HTTP error! status: ${res.status}`) } const data = await res.json() if (data.success) { setLogs( data.data.map((log: AdminLogType) => ({ ...log, id: log._id.toString(), timestamp: format(new Date(log.timestamp), "yyyy-MM-dd HH:mm:ss"), })), ) } else { setError(data.message || "Failed to fetch logs.") } } catch (e: any) { setError(e.message || "An unexpected error occurred.") console.error("Failed to fetch logs:", e) } finally { setLoading(false) } } useEffect(() => { fetchLogs() }, []) const filteredLogs = useMemo(() => { return logs.filter( (log) => log.level.toLowerCase().includes(searchTerm.toLowerCase()) || log.message.toLowerCase().includes(searchTerm.toLowerCase()) || log.action.toLowerCase().includes(searchTerm.toLowerCase()) || log.adminEmail.toLowerCase().includes(searchTerm.toLowerCase()) || (log.targetId && log.targetId.toLowerCase().includes(searchTerm.toLowerCase())), ) }, [logs, searchTerm]) if (loading) { return ( <div className="flex justify-center items-center h-full"> <LoadingSpinner /> </div> ) } if (error) { return ( <Alert variant="destructive"> <Terminal className="h-4 w-4" /> <AlertTitle>Error</AlertTitle> <AlertDescription>{error}</AlertDescription> </Alert> ) } return ( <div className="p-4 md:p-6"> <h1 className="text-3xl font-bold mb-6">System Logs</h1> <div className="mb-4"> <Input placeholder="Search logs by level, message, action, admin email, or target ID..." value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} className="max-w-lg" /> </div> <div className="rounded-md border"> <Table> <TableHeader> <TableRow> <TableHead>Timestamp</TableHead> <TableHead>Level</TableHead> <TableHead>Action</TableHead> <TableHead>Message</TableHead> <TableHead>Admin Email</TableHead> <TableHead>Target ID</TableHead> </TableRow> </TableHeader> <TableBody> {filteredLogs.length === 0 ? ( <TableRow> <TableCell colSpan={6} className="text-center"> No logs found. </TableCell> </TableRow> ) : ( filteredLogs.map((log) => ( <TableRow key={log.id}> <TableCell className="text-xs">{log.timestamp}</TableCell> <TableCell>{log.level}</TableCell> <TableCell>{log.action}</TableCell> <TableCell className="max-w-xs truncate">{log.message}</TableCell> <TableCell>{log.adminEmail}</TableCell> <TableCell className="text-xs">{log.targetId || "N/A"}</TableCell> </TableRow> )) )} </TableBody> </Table> </div> </div> ) } [V0_FILE]typescriptreact:file="app/admin/logs/loading.tsx" isEdit="true" import { Card, CardContent, CardHeader } from "@/components/ui/card" import { Skeleton } from "@/components/ui/skeleton" export default function AdminLogsLoadingPage() { return ( <div className="container mx-auto py-8 px-4"> <h1 className="text-3xl font-bold mb-6 text-center">Admin Activity Logs</h1> <p className="text-muted-foreground text-center mb-8">Monitor system events and administrator actions.</p> <Card className="max-w-6xl mx-auto"> <CardHeader> <Skeleton className="h-6 w-1/4 mb-2" /> <Skeleton className="h-4 w-1/2" /> </CardHeader> <CardContent> {/* Filters Skeleton */} <div className="flex flex-wrap items-end gap-4 mb-6"> <Skeleton className="h-10 w-[200px]" /> <Skeleton className="h-10 w-[150px]" /> <Skeleton className="h-10 w-[150px]" /> <Skeleton className="h-10 w-[120px]" /> <Skeleton className="h-10 w-[120px]" /> </div> {/* Table Skeleton */} <div className="overflow-x-auto"> <table className="w-full"> <thead> <tr className="border-b"> <th className="py-2 px-4 text-left"> <Skeleton className="h-4 w-16" /> </th> <th className="py-2 px-4 text-left"> <Skeleton className="h-4 w-24" /> </th> <th className="py-2 px-4 text-left"> <Skeleton className="h-4 w-48" /> </th> <th className="py-2 px-4 text-left"> <Skeleton className="h-4 w-20" /> </th> <th className="py-2 px-4 text-left"> <Skeleton className="h-4 w-24" /> </th> <th className="py-2 px-4 text-left"> <Skeleton className="h-4 w-16" /> </th> </tr> </thead> <tbody> {[...Array(7)].map((_, i) => ( <tr key={i} className="border-b last:border-b-0"> <td className="py-3 px-4"> <Skeleton className="h-6 w-16" /> </td> <td className="py-3 px-4"> <Skeleton className="h-4 w-24" /> </td> <td className="py-3 px-4"> <Skeleton className="h-4 w-full" /> </td> <td className="py-3 px-4"> <Skeleton className="h-4 w-20" /> </td> <td className="py-3 px-4"> <Skeleton className="h-4 w-24" /> </td> <td className="py-3 px-4"> <Skeleton className="h-4 w-16" /> </td> </tr> ))} </tbody> </table> </div> {/* Pagination Skeleton */} <div className="flex justify-between items-center mt-6"> <Skeleton className="h-10 w-24" /> <Skeleton className="h-4 w-20" /> <Skeleton className="h-10 w-24" /> </div> </CardContent> </Card> </div> ) } [V0_FILE]typescriptreact:file="app/admin/settings/page.tsx" isEdit="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Switch } from "@/components/ui/switch" import { Textarea } from "@/components/ui/textarea" import { useToast } from "@/components/ui/use-toast" import { LoadingSpinner } from "@/components/ui/loading-spinner" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" import { Terminal } from "lucide-react" import type { SystemSettings as SystemSettingsType } from "@/models/SystemSettings" export default function AdminSettingsPage() { const [settings, setSettings] = useState<SystemSettingsType | null>(null) const [loading, setLoading] = useState(true) const [isSaving, setIsSaving] = useState(false) const [error, setError] = useState<string | null>(null) const { toast } = useToast() useEffect(() => { const fetchSettings = async () => { setLoading(true) setError(null) try { const res = await fetch("/api/admin/settings") if (!res.ok) { throw new Error(`HTTP error! status: ${res.status}`) } const data = await res.json() if (data.success) { setSettings(data.data) } else { setError(data.message || "Failed to fetch settings.") } } catch (e: any) { setError(e.message || "An unexpected error occurred.") console.error("Failed to fetch settings:", e) } finally { setLoading(false) } } fetchSettings() }, []) const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => { const { id, value } = e.target setSettings((prev) => (prev ? { ...prev, [id]: value } : null)) } const handleSwitchChange = (id: keyof SystemSettingsType, checked: boolean) => { setSettings((prev) => (prev ? { ...prev, [id]: checked } : null)) } const handleSaveSettings = async () => { if (!settings) return setIsSaving(true) setError(null) try { const res = await fetch("/api/admin/settings", { method: "PUT", headers: { "Content-Type": "application/json", }, body: JSON.stringify(settings), }) const data = await res.json() if (data.success) { toast({ title: "Success", description: "System settings updated successfully.", }) setSettings(data.data) // Update with potentially new data from server } else { setError(data.message || "Failed to update settings.") toast({ title: "Error", description: data.message || "Failed to update settings.", variant: "destructive", }) } } catch (e: any) { setError(e.message || "An unexpected error occurred.") toast({ title: "Error", description: e.message || "An unexpected error occurred.", variant: "destructive", }) console.error("Failed to save settings:", e) } finally { setIsSaving(false) } } if (loading) { return ( <div className="flex justify-center items-center h-full"> <LoadingSpinner /> </div> ) } if (error) { return ( <Alert variant="destructive"> <Terminal className="h-4 w-4" /> <AlertTitle>Error</AlertTitle> <AlertDescription>{error}</AlertDescription> </Alert> ) } if (!settings) { return <div className="p-4 md:p-6 text-center text-muted-foreground">No settings found.</div> } return ( <div className="p-4 md:p-6"> <h1 className="text-3xl font-bold mb-6">System Settings</h1> <Card className="mb-6"> <CardHeader> <CardTitle>General Settings</CardTitle> <CardDescription>Configure basic application information.</CardDescription> </CardHeader> <CardContent className="grid gap-4"> <div className="grid gap-2"> <Label htmlFor="appName">Application Name</Label> <Input id="appName" value={settings.appName || ""} onChange={handleInputChange} /> </div> <div className="grid gap-2"> <Label htmlFor="appDescription">Application Description</Label> <Textarea id="appDescription" value={settings.appDescription || ""} onChange={handleInputChange} /> </div> <div className="grid gap-2"> <Label htmlFor="contactEmail">Contact Email</Label> <Input id="contactEmail" type="email" value={settings.contactEmail || ""} onChange={handleInputChange} /> </div> </CardContent> </Card> <Card className="mb-6"> <CardHeader> <CardTitle>AI & Analysis Settings</CardTitle> <CardDescription>Manage AI model behavior and analysis features.</CardDescription> </CardHeader> <CardContent className="grid gap-4"> <div className="flex items-center justify-between"> <Label htmlFor="enableAISuggestions">Enable AI Suggestions</Label> <Switch id="enableAISuggestions" checked={settings.enableAISuggestions} onCheckedChange={(checked) => handleSwitchChange("enableAISuggestions", checked)} /> </div> <div className="flex items-center justify-between"> <Label htmlFor="enableBrandProfileExtraction">Enable Brand Profile Extraction</Label> <Switch id="enableBrandProfileExtraction" checked={settings.enableBrandProfileExtraction} onCheckedChange={(checked) => handleSwitchChange("enableBrandProfileExtraction", checked)} /> </div> <div className="grid gap-2"> <Label htmlFor="geminiApiKey">Gemini API Key</Label> <Input id="geminiApiKey" type="password" // Use password type for sensitive info value={settings.geminiApiKey || ""} onChange={handleInputChange} placeholder="Enter Gemini API Key" /> </div> </CardContent> </Card> <Card className="mb-6"> <CardHeader> <CardTitle>Integration Settings</CardTitle> <CardDescription>Configure third-party service integrations.</CardDescription> </CardHeader> <CardContent className="grid gap-4"> <div className="flex items-center justify-between"> <Label htmlFor="enableStripe">Enable Stripe Integration</Label> <Switch id="enableStripe" checked={settings.enableStripe} onCheckedChange={(checked) => handleSwitchChange("enableStripe", checked)} /> </div> <div className="flex items-center justify-between"> <Label htmlFor="enableAdobeExpress">Enable Adobe Express Add-on</Label> <Switch id="enableAdobeExpress" checked={settings.enableAdobeExpress} onCheckedChange={(checked) => handleSwitchChange("enableAdobeExpress", checked)} /> </div> </CardContent> </Card> <Card className="mb-6"> <CardHeader> <CardTitle>Notification Settings</CardTitle> <CardDescription>Control application notification preferences.</CardDescription> </CardHeader> <CardContent className="grid gap-4"> <div className="flex items-center justify-between"> <Label htmlFor="enableEmailNotifications">Enable Email Notifications</Label> <Switch id="enableEmailNotifications" checked={settings.enableEmailNotifications} onCheckedChange={(checked) => handleSwitchChange("enableEmailNotifications", checked)} /> </div> <div className="flex items-center justify-between"> <Label htmlFor="enableRealtimeNotifications">Enable Real-time Notifications</Label> <Switch id="enableRealtimeNotifications" checked={settings.enableRealtimeNotifications} onCheckedChange={(checked) => handleSwitchChange("enableRealtimeNotifications", checked)} /> </div> </CardContent> </Card> <Card className="mb-6"> <CardHeader> <CardTitle>Admin Specific Settings</CardTitle> <CardDescription>Settings relevant to administrator functions.</CardDescription> </CardHeader> <CardContent className="grid gap-4"> <div className="grid gap-2"> <Label htmlFor="adminContactEmail">Admin Contact Email</Label> <Input id="adminContactEmail" type="email" value={settings.adminContactEmail || ""} onChange={handleInputChange} /> </div> <div className="flex items-center justify-between"> <Label htmlFor="enableActivityLogging">Enable Admin Activity Logging</Label> <Switch id="enableActivityLogging" checked={settings.enableActivityLogging} onCheckedChange={(checked) => handleSwitchChange("enableActivityLogging", checked)} /> </div> </CardContent> </Card> <div className="flex justify-end"> <Button onClick={handleSaveSettings} disabled={isSaving}> {isSaving ? <LoadingSpinner className="mr-2" /> : null} {isSaving ? "Saving..." : "Save Settings"} </Button> </div> </div> ) } [V0_FILE]typescriptreact:file="app/demo/page.tsx" isEdit="true" "use client" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import type React from "react" import { useState, useRef } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { useToast } from "@/components/ui/use-toast" import { Loader2, UploadCloud, Palette, Type, Layout, MessageSquare, ImageIcon, Lightbulb } from "lucide-react" import Image from "next/image" import { ScrollArea } from "@/components/ui/scroll-area" import { Separator } from "@/components/ui/separator" import { cn } from "@/lib/utils" import { Badge } from "@/components/ui/badge" import Link from "next/link" import { CheckCircle2, XCircle } from "lucide-react" // Mock AI analysis function const mockAnalyzeImage = async (imageUrl: string, brandProfile: any): Promise<any> => { return new Promise((resolve) => { setTimeout(() => { const overallScore = Math.floor(Math.random() * 50) + 50 // 50-99 const colorScore = Math.floor(Math.random() * 40) + 60 // 60-99 const typographyScore = Math.floor(Math.random() * 40) + 60 // 60-99 const logoScore = Math.floor(Math.random() * 40) + 60 // 60-99 const layoutScore = Math.floor(Math.random() * 40) + 60 // 60-99 const toneScore = Math.floor(Math.random() * 40) + 60 // 60-99 const issues = [] if (colorScore < 70) issues.push("Detected colors are not fully compliant with primary brand palette.") if (typographyScore < 70) issues.push("Some text elements use unapproved fonts or incorrect sizing.") if (logoScore < 70) issues.push("Logo placement or sizing deviates from guidelines.") if (layoutScore < 70) issues.push("Inconsistent spacing or alignment detected in several elements.") if (toneScore < 70) issues.push("Messaging tone might not align perfectly with the brand voice.") const suggestions = [ "Adjust color palette to match primary brand colors.", "Ensure all text uses approved brand fonts and consistent sizing.", "Verify logo clear space and scale according to guidelines.", "Standardize padding and margins across design elements.", "Review messaging for brand voice consistency.", ] resolve({ overallScore, colorCompliance: { score: colorScore, details: { expected: brandProfile.primaryColors, detected: ["#FF0000", "#00FF00", "#0000FF"], // Mock detected colors issues: colorScore < 70 ? ["Detected red is not a brand color."] : [], }, }, typographyCompliance: { score: typographyScore, details: { expectedFonts: brandProfile.fonts, detectedFonts: ["Arial", "Times New Roman"], // Mock detected fonts issues: typographyScore < 70 ? ["'Times New Roman' is not an approved font."] : [], }, }, logoPlacement: { score: logoScore, details: { expectedPosition: "Top Right", detectedPosition: "Center", // Mock detected position issues: logoScore < 70 ? ["Logo is not in the specified top-right position."] : [], }, }, spacingAndLayout: { score: layoutScore, details: { issues: layoutScore < 70 ? ["Inconsistent vertical spacing between text blocks."] : [], }, }, toneAndMessaging: { score: toneScore, details: { expectedTone: brandProfile.brandVoice, detectedTone: "Informal", // Mock detected tone issues: toneScore < 70 ? ["Messaging is too informal for a professional brand voice."] : [], }, }, suggestions: overallScore < 80 ? suggestions : ["Your design is highly compliant! Great job."], }) }, 2000) // Simulate network delay }) } export default function DemoPage() { const { toast } = useToast() const [selectedFile, setSelectedFile] = useState<File | null>(null) const [previewUrl, setPreviewUrl] = useState<string | null>(null) const [isAnalyzing, setIsAnalyzing] = useState(false) const [analysisProgress, setAnalysisProgress] = useState(0) const [analysisResult, setAnalysisResult] = useState<any>(null) const fileInputRef = useRef<HTMLInputElement>(null) const defaultBrandProfile = { name: "Demo Brand Guidelines", primaryColors: ["#1A2B3C", "#FF6B6B", "#4ECDC4"], secondaryColors: ["#F7FFF7", "#FFE66D"], fonts: ["Mona Sans", "Inter"], brandVoice: "Professional, Innovative, Approachable", guidelines: "Maintain clear space around logo, use consistent padding, ensure high contrast for text.", } const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => { const file = event.target.files?.[0] if (file) { setSelectedFile(file) setPreviewUrl(URL.createObjectURL(file)) setAnalysisResult(null) // Clear previous analysis results setAnalysisProgress(0) } else { setSelectedFile(null) setPreviewUrl(null) } } const handleAnalyze = async (event: React.FormEvent) => { event.preventDefault() if (!selectedFile) { toast({ title: "No file selected", description: "Please upload an image to analyze.", variant: "destructive", }) return } setIsAnalyzing(true) setAnalysisProgress(0) setAnalysisResult(null) try { const progressInterval = setInterval(() => { setAnalysisProgress((prev) => { if (prev < 90) return prev + 5 return prev }) }, 200) // In a real app, you'd upload the image and send its URL to your backend for AI analysis. // For this demo, we'll just pass the previewUrl to the mock function. const result = await mockAnalyzeImage(previewUrl!, defaultBrandProfile) clearInterval(progressInterval) setAnalysisProgress(100) setAnalysisResult(result) toast({ title: "Analysis Complete!", description: "Your design has been successfully analyzed.", variant: "default", }) } catch (error: any) { console.error("Demo analysis error:", error) toast({ title: "Analysis Failed", description: error.message || "An unexpected error occurred during analysis.", variant: "destructive", }) setAnalysisProgress(0) } finally { setIsAnalyzing(false) } } const getScoreBadgeVariant = (score: number) => { if (score >= 80) return "default" if (score >= 60) return "secondary" return "destructive" } return ( <div className="container mx-auto px-4 py-12 md:py-20 text-center"> <h1 className="text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl mb-6">Experience Brand Guardian AI</h1> <p className="text-lg text-muted-foreground max-w-3xl mx-auto mb-12"> See how Brand Guardian AI can help you maintain brand consistency across all your designs. Try out our demo features below. </p> <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3 max-w-6xl mx-auto"> <Card className="flex flex-col"> <CardHeader> <CardTitle className="text-2xl font-bold">Basic Analysis Demo</CardTitle> <CardDescription>Upload an image and get a quick compliance check.</CardDescription> </CardHeader> <CardContent className="flex-1 flex flex-col justify-between"> <ul className="mt-4 space-y-2 text-left text-sm text-muted-foreground"> <li className="flex items-center"> <CheckCircle2 className="h-4 w-4 text-green-500 mr-2 flex-shrink-0" /> Upload single image </li> <li className="flex items-center"> <CheckCircle2 className="h-4 w-4 text-green-500 mr-2 flex-shrink-0" /> Basic color & font detection </li> <li className="flex items-center"> <XCircle className="h-4 w-4 text-red-500 mr-2 flex-shrink-0" /> No AI suggestions </li> <li className="flex items-center"> <XCircle className="h-4 w-4 text-red-500 mr-2 flex-shrink-0" /> No brand profile selection </li> </ul> <Button asChild className="mt-6"> <Link href="/analyzer">Try Analyzer</Link> </Button> </CardContent> </Card> <Card className="flex flex-col"> <CardHeader> <CardTitle className="text-2xl font-bold">Brand Profile Showcase</CardTitle> <CardDescription>Explore how brand profiles are defined and managed.</CardDescription> </CardHeader> <CardContent className="flex-1 flex flex-col justify-between"> <ul className="mt-4 space-y-2 text-left text-sm text-muted-foreground"> <li className="flex items-center"> <CheckCircle2 className="h-4 w-4 text-green-500 mr-2 flex-shrink-0" /> View sample brand profiles </li> <li className="flex items-center"> <CheckCircle2 className="h-4 w-4 text-green-500 mr-2 flex-shrink-0" /> Understand brand guidelines structure </li> <li className="flex items-center"> <XCircle className="h-4 w-4 text-red-500 mr-2 flex-shrink-0" /> Cannot create/edit profiles (requires login) </li> </ul> <Button asChild className="mt-6"> <Link href="/brand-profile">View Profiles</Link> </Button> </CardContent> </Card> <Card className="flex flex-col"> <CardHeader> <CardTitle className="text-2xl font-bold">Premium Features Preview</CardTitle> <CardDescription>See what you get with our Pro and Enterprise plans.</CardDescription> </CardHeader> <CardContent className="flex-1 flex flex-col justify-between"> <ul className="mt-4 space-y-2 text-left text-sm text-muted-foreground"> <li className="flex items-center"> <CheckCircle2 className="h-4 w-4 text-green-500 mr-2 flex-shrink-0" /> Preview AI suggestions </li> <li className="flex items-center"> <CheckCircle2 className="h-4 w-4 text-green-500 mr-2 flex-shrink-0" /> Understand batch processing concept </li> <li className="flex items-center"> <XCircle className="h-4 w-4 text-red-500 mr-2 flex-shrink-0" /> Features are not interactive </li> </ul> <Button asChild className="mt-6"> <Link href="/pricing">Explore Plans</Link> </Button> </CardContent> </Card> {/* Upload and Configuration Card */} <Card className="hidden md:flex"> <CardHeader> <CardTitle>Upload Design & Run Demo</CardTitle> <CardDescription>Upload an image to see a simulated brand compliance analysis.</CardDescription> </CardHeader> <CardContent> <form onSubmit={handleAnalyze} className="space-y-6"> <div className="grid w-full items-center gap-1.5"> <Label htmlFor="design-upload">Upload Design Image</Label> <div className="flex flex-col items-center justify-center w-full h-48 border-2 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700" onClick={() => fileInputRef.current?.click()} > {previewUrl ? ( <div className="relative w-full h-full"> <Image src={previewUrl || "/placeholder.svg"} alt="Design Preview" fill style={{ objectFit: "contain" }} className="rounded-lg" /> </div> ) : ( <> <UploadCloud className="w-10 h-10 text-gray-400" /> <p className="mt-2 text-sm text-gray-500 dark:text-gray-400"> <span className="font-semibold">Click to upload</span> or drag and drop </p> <p className="text-xs text-gray-500 dark:text-gray-400">PNG, JPG, GIF (Max 10MB)</p> </> )} <Input id="design-upload" type="file" accept="image/*" onChange={handleFileChange} className="hidden" ref={fileInputRef} disabled={isAnalyzing} /> </div> {selectedFile && <p className="text-sm text-muted-foreground mt-2">Selected: {selectedFile.name}</p>} </div> <div className="grid w-full items-center gap-1.5"> <Label>Simulated Brand Profile</Label> <Card className="p-4 bg-muted/20"> <h3 className="font-semibold text-lg">{defaultBrandProfile.name}</h3> <p className="text-sm text-muted-foreground"> Primary Colors: {defaultBrandProfile.primaryColors.join(", ")} </p> <p className="text-sm text-muted-foreground">Fonts: {defaultBrandProfile.fonts.join(", ")}</p> <p className="text-sm text-muted-foreground">Brand Voice: {defaultBrandProfile.brandVoice}</p> </Card> </div> <Button type="submit" className="w-full" disabled={isAnalyzing || !selectedFile}> {isAnalyzing ? ( <> <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Analyzing... </> ) : ( "Run Demo Analysis" )} </Button> {isAnalyzing && <Progress value={analysisProgress} className="w-full mt-4" />} </form> </CardContent> </Card> {/* Analysis Results Card */} <Card className="hidden md:flex"> <CardHeader> <CardTitle>Demo Analysis Results</CardTitle> <CardDescription>Simulated report based on your uploaded design.</CardDescription> </CardHeader> <CardContent> {isAnalyzing ? ( <div className="flex flex-col items-center justify-center h-full py-12"> <Loader2 className="h-12 w-12 animate-spin text-primary mb-4" /> <p className="text-lg font-medium">Analysis in progress...</p> <p className="text-sm text-muted-foreground">This may take a few moments.</p> <Progress value={analysisProgress} className="w-2/3 mt-4" /> </div> ) : analysisResult ? ( <ScrollArea className="h-[600px] pr-4"> <div className="space-y-6"> <div className="flex items-center justify-between"> <h3 className="text-xl font-semibold">Overall Score:</h3> <Badge className={cn("text-lg px-4 py-2", getScoreBadgeVariant(analysisResult.overallScore))}> {analysisResult.overallScore}% </Badge> </div> <Separator /> {/* Compliance Sections */} <div className="space-y-4"> <h4 className="text-lg font-semibold flex items-center gap-2"> <Palette className="h-5 w-5" /> Color Compliance <Badge variant={getScoreBadgeVariant(analysisResult.colorCompliance.score)}> {analysisResult.colorCompliance.score}% </Badge> </h4> {analysisResult.colorCompliance.details.issues.length > 0 ? ( <ul className="list-disc list-inside text-sm text-muted-foreground space-y-1"> {analysisResult.colorCompliance.details.issues.map((issue: string, i: number) => ( <li key={`color-issue-${i}`}>{issue}</li> ))} </ul> ) : ( <p className="text-sm text-muted-foreground">No significant color issues detected.</p> )} <div className="flex flex-wrap gap-2 mt-2"> <span className="text-sm font-medium">Detected Colors:</span> {analysisResult.colorCompliance.details.detected.map((color: string, i: number) => ( <div key={`detected-color-${i}`} className="w-6 h-6 rounded-full border" style={{ backgroundColor: color }} title={color} /> ))} </div> </div> <Separator /> <div className="space-y-4"> <h4 className="text-lg font-semibold flex items-center gap-2"> <Type className="h-5 w-5" /> Typography Compliance <Badge variant={getScoreBadgeVariant(analysisResult.typographyCompliance.score)}> {analysisResult.typographyCompliance.score}% </Badge> </h4> {analysisResult.typographyCompliance.details.issues.length > 0 ? ( <ul className="list-disc list-inside text-sm text-muted-foreground space-y-1"> {analysisResult.typographyCompliance.details.issues.map((issue: string, i: number) => ( <li key={`font-issue-${i}`}>{issue}</li> ))} </ul> ) : ( <p className="text-sm text-muted-foreground">No significant typography issues detected.</p> )} <p className="text-sm font-medium mt-2"> Detected Fonts: {analysisResult.typographyCompliance.details.detectedFonts.join(", ") || "N/A"} </p> </div> <Separator /> <div className="space-y-4"> <h4 className="text-lg font-semibold flex items-center gap-2"> <ImageIcon className="h-5 w-5" /> Logo Placement <Badge variant={getScoreBadgeVariant(analysisResult.logoPlacement.score)}> {analysisResult.logoPlacement.score}% </Badge> </h4> {analysisResult.logoPlacement.details.issues.length > 0 ? ( <ul className="list-disc list-inside text-sm text-muted-foreground space-y-1"> {analysisResult.logoPlacement.details.issues.map((issue: string, i: number) => ( <li key={`logo-issue-${i}`}>{issue}</li> ))} </ul> ) : ( <p className="text-sm text-muted-foreground">Logo placement appears compliant.</p> )} </div> <Separator /> <div className="space-y-4"> <h4 className="text-lg font-semibold flex items-center gap-2"> <Layout className="h-5 w-5" /> Spacing & Layout <Badge variant={getScoreBadgeVariant(analysisResult.spacingAndLayout.score)}> {analysisResult.spacingAndLayout.score}% </Badge> </h4> {analysisResult.spacingAndLayout.details.issues.length > 0 ? ( <ul className="list-disc list-inside text-sm text-muted-foreground space-y-1"> {analysisResult.spacingAndLayout.details.issues.map((issue: string, i: number) => ( <li key={`layout-issue-${i}`}>{issue}</li> ))} </ul> ) : ( <p className="text-sm text-muted-foreground">Layout and spacing appear consistent.</p> )} </div> <Separator /> <div className="space-y-4"> <h4 className="text-lg font-semibold flex items-center gap-2"> <MessageSquare className="h-5 w-5" /> Tone & Messaging <Badge variant={getScoreBadgeVariant(analysisResult.toneAndMessaging.score)}> {analysisResult.toneAndMessaging.score}% </Badge> </h4> {analysisResult.toneAndMessaging.details.issues.length > 0 ? ( <ul className="list-disc list-inside text-sm text-muted-foreground space-y-1"> {analysisResult.toneAndMessaging.details.issues.map((issue: string, i: number) => ( <li key={`tone-issue-${i}`}>{issue}</li> ))} </ul> ) : ( <p className="text-sm text-muted-foreground">Messaging tone is consistent with brand voice.</p> )} </div> <Separator /> <div className="space-y-4"> <h4 className="text-lg font-semibold flex items-center gap-2"> <Lightbulb className="h-5 w-5" /> AI Suggestions </h4> {analysisResult.suggestions.length > 0 ? ( <ul className="list-disc list-inside text-sm text-muted-foreground space-y-1"> {analysisResult.suggestions.map((suggestion: string, i: number) => ( <li key={`suggestion-${i}`}>{suggestion}</li> ))} </ul> ) : ( <p className="text-sm text-muted-foreground"> No specific AI suggestions generated for this analysis. </p> )} </div> </div> </ScrollArea> ) : ( <div className="flex flex-col items-center justify-center h-full py-12 text-muted-foreground"> <ImageIcon className="h-12 w-12 mb-4 opacity-50" /> <p className="text-lg font-medium">Upload a design to run the demo</p> <p className="text-sm">See how Brand Guardian AI can help you.</p> </div> )} </CardContent> </Card> </div> <div className="mt-16"> <h2 className="text-3xl font-bold mb-4">Ready to get started?</h2> <p className="text-lg text-muted-foreground mb-8"> Sign up for a free account to unlock more features and save your progress. </p> <Button asChild size="lg"> <Link href="/auth/signup">Sign Up Now</Link> </Button> </div> </div> ) } [V0_FILE]typescriptreact:file="app/auth/error/page.tsx" isEdit="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import Link from "next/link" import { AlertCircle } from "lucide-react" export default function AuthErrorPage({ searchParams, }: { searchParams: { error?: string } }) { const { error } = searchParams let errorMessage = "An unknown error occurred." switch (error) { case "OAuthAccountNotLinked": errorMessage = "This email is already registered with a different provider. Please sign in with your existing account or use a different email." break case "EmailSignInError": errorMessage = "Failed to send magic link. Please try again." break case "CredentialsSignin": errorMessage = "Invalid email or password. Please try again." break case "Configuration": errorMessage = "Server configuration error. Please contact support." break case "AccessDenied": errorMessage = "Access Denied. You do not have permission to access this page." break case "Verification": errorMessage = "The verification link has expired or is invalid. Please request a new one." break default: errorMessage = "An unexpected error occurred during authentication. Please try again." break } return ( <div className="flex min-h-[calc(100vh-64px)] items-center justify-center bg-background px-4 py-12"> <Card className="w-full max-w-md"> <CardHeader className="text-center"> <AlertCircle className="mx-auto h-12 w-12 text-destructive" /> <CardTitle className="mt-4 text-2xl font-bold">Authentication Error</CardTitle> <CardDescription className="mt-2 text-muted-foreground">{errorMessage}</CardDescription> </CardHeader> <CardContent className="grid gap-4"> <Button asChild className="w-full"> <Link href="/auth/signin">Go to Sign In</Link> </Button> <Button asChild variant="outline" className="w-full bg-transparent"> <Link href="/">Go to Home</Link> </Button> </CardContent> </Card> </div> ) } [V0_FILE]typescriptreact:file="app/auth/error/loading.tsx" isEdit="true" import { LoadingSpinner } from "@/components/ui/loading-spinner" export default function AuthErrorLoading() { return ( <div className="flex justify-center items-center h-full min-h-[calc(100vh-100px)]"> <LoadingSpinner /> </div> ) } [V0_FILE]typescriptreact:file="app/auth/signup/page.tsx" isEdit="true" "use client" import type React from "react" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import Link from "next/link" import { useToast } from "@/components/ui/use-toast" import { LoadingSpinner } from "@/components/ui/loading-spinner" import { signIn } from "next-auth/react" import { Github, ChromeIcon as Google } from "lucide-react" // Assuming you have these icons or similar export default function SignUpPage() { const [name, setName] = useState("") const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [confirmPassword, setConfirmPassword] = useState("") const [isLoading, setIsLoading] = useState(false) const { toast } = useToast() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) if (password !== confirmPassword) { toast({ title: "Error", description: "Passwords do not match.", variant: "destructive", }) setIsLoading(false) return } try { const res = await fetch("/api/auth/signup", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ name, email, password }), }) const data = await res.json() if (data.success) { toast({ title: "Success", description: "Account created successfully! Please sign in.", }) // Optionally redirect to sign-in page or auto-sign in await signIn("credentials", { email, password, redirect: true, callbackUrl: "/dashboard" }) } else { toast({ title: "Error", description: data.message || "Failed to create account.", variant: "destructive", }) } } catch (error: any) { toast({ title: "Error", description: error.message || "An unexpected error occurred.", variant: "destructive", }) console.error("Sign up error:", error) } finally { setIsLoading(false) } } const handleOAuthSignIn = async (provider: string) => { setIsLoading(true) try { await signIn(provider, { callbackUrl: "/dashboard" }) } catch (error) { toast({ title: "Error", description: "Failed to sign in with " + provider, variant: "destructive", }) console.error("OAuth sign in error:", error) } finally { setIsLoading(false) } } return ( <div className="flex min-h-[calc(100vh-64px)] items-center justify-center bg-background px-4 py-12"> <Card className="w-full max-w-md"> <CardHeader className="text-center"> <CardTitle className="text-2xl font-bold">Sign Up</CardTitle> <CardDescription className="mt-2 text-muted-foreground">Create your account to get started.</CardDescription> </CardHeader> <CardContent className="grid gap-4"> <form onSubmit={handleSubmit} className="grid gap-4"> <div className="grid gap-2"> <Label htmlFor="name">Name</Label> <Input id="name" type="text" placeholder="John Doe" required value={name} onChange={(e) => setName(e.target.value)} /> </div> <div className="grid gap-2"> <Label htmlFor="email">Email</Label> <Input id="email" type="email" placeholder="m@example.com" required value={email} onChange={(e) => setEmail(e.target.value)} /> </div> <div className="grid gap-2"> <Label htmlFor="password">Password</Label> <Input id="password" type="password" required value={password} onChange={(e) => setPassword(e.target.value)} /> </div> <div className="grid gap-2"> <Label htmlFor="confirm-password">Confirm Password</Label> <Input id="confirm-password" type="password" required value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} /> </div> <Button type="submit" className="w-full" disabled={isLoading}> {isLoading ? <LoadingSpinner className="mr-2" /> : null} {isLoading ? "Signing Up..." : "Sign Up"} </Button> </form> <div className="relative"> <div className="absolute inset-0 flex items-center"> <span className="w-full border-t" /> </div> <div className="relative flex justify-center text-xs uppercase"> <span className="bg-background px-2 text-muted-foreground">Or continue with</span> </div> </div> <div className="grid grid-cols-2 gap-4"> <Button variant="outline" onClick={() => handleOAuthSignIn("google")} disabled={isLoading}> <Google className="mr-2 h-4 w-4" /> Google </Button> <Button variant="outline" onClick={() => handleOAuthSignIn("github")} disabled={isLoading}> <Github className="mr-2 h-4 w-4" /> GitHub </Button> </div> <div className="mt-4 text-center text-sm"> Already have an account?{" "} <Link href="/auth/signin" className="underline"> Sign In </Link> </div> </CardContent> </Card> </div> ) } [V0_FILE]typescriptreact:file="app/auth/forgot-password/page.tsx" isEdit="true" "use client" import type React from "react" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import Link from "next/link" import { useToast } from "@/components/ui/use-toast" import { LoadingSpinner } from "@/components/ui/loading-spinner" export default function ForgotPasswordPage() { const [email, setEmail] = useState("") const [isLoading, setIsLoading] = useState(false) const [message, setMessage] = useState<string | null>(null) const { toast } = useToast() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) setMessage(null) try { const res = await fetch("/api/auth/forgot-password", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ email }), }) const data = await res.json() if (data.success) { setMessage("If an account with that email exists, a password reset link has been sent to your inbox.") toast({ title: "Success", description: "Password reset email sent (if account exists).", }) } else { setMessage(data.message || "Failed to send password reset email.") toast({ title: "Error", description: data.message || "Failed to send password reset email.", variant: "destructive", }) } } catch (error: any) { setMessage(error.message || "An unexpected error occurred.") toast({ title: "Error", description: error.message || "An unexpected error occurred.", variant: "destructive", }) console.error("Forgot password error:", error) } finally { setIsLoading(false) } } return ( <div className="flex min-h-[calc(100vh-64px)] items-center justify-center bg-background px-4 py-12"> <Card className="w-full max-w-md"> <CardHeader className="text-center"> <CardTitle className="text-2xl font-bold">Forgot Password</CardTitle> <CardDescription className="mt-2 text-muted-foreground"> Enter your email to receive a password reset link. </CardDescription> </CardHeader> <CardContent className="grid gap-4"> <form onSubmit={handleSubmit} className="grid gap-4"> <div className="grid gap-2"> <Label htmlFor="email">Email</Label> <Input id="email" type="email" placeholder="m@example.com" required value={email} onChange={(e) => setEmail(e.target.value)} /> </div> <Button type="submit" className="w-full" disabled={isLoading}> {isLoading ? <LoadingSpinner className="mr-2" /> : null} {isLoading ? "Sending..." : "Send Reset Link"} </Button> </form> {message && <div className="mt-4 text-center text-sm text-muted-foreground">{message}</div>} <div className="mt-4 text-center text-sm"> Remember your password?{" "} <Link href="/auth/signin" className="underline"> Sign In </Link> </div> </CardContent> </Card> </div> ) } [V0_FILE]typescriptreact:file="app/auth/reset-password/page.tsx" isEdit="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import Link from "next/link" import { useToast } from "@/components/ui/use-toast" import { LoadingSpinner } from "@/components/ui/loading-spinner" import { useRouter } from "next/navigation" export default function ResetPasswordPage({ searchParams, }: { searchParams: { token?: string } }) { const { token } = searchParams const [password, setPassword] = useState("") const [confirmPassword, setConfirmPassword] = useState("") const [isLoading, setIsLoading] = useState(false) const [isValidToken, setIsValidToken] = useState(false) const [validationMessage, setValidationMessage] = useState("Validating token...") const { toast } = useToast() const router = useRouter() useEffect(() => { const validateToken = async () => { if (!token) { setValidationMessage("No reset token provided.") setIsValidToken(false) return } try { // This is a simplified validation. In a real app, you'd hit an API endpoint // that checks the token's validity and expiration. // For now, we'll just assume it's valid if present. // A more robust check would involve a server-side call like: // const res = await fetch('/api/auth/validate-reset-token', { method: 'POST', body: JSON.stringify({ token }) }); // const data = await res.json(); // setIsValidToken(data.isValid); // setValidationMessage(data.message || ''); setIsValidToken(true) setValidationMessage("") } catch (error) { setValidationMessage("Failed to validate token. Please try again or request a new link.") setIsValidToken(false) console.error("Token validation error:", error) } } validateToken() }, [token]) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) if (password !== confirmPassword) { toast({ title: "Error", description: "Passwords do not match.", variant: "destructive", }) setIsLoading(false) return } if (!token) { toast({ title: "Error", description: "No reset token found.", variant: "destructive", }) setIsLoading(false) return } try { const res = await fetch("/api/auth/reset-password", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ token, newPassword: password }), }) const data = await res.json() if (data.success) { toast({ title: "Success", description: "Your password has been reset successfully. Please sign in.", }) router.push("/auth/signin") } else { toast({ title: "Error", description: data.message || "Failed to reset password.", variant: "destructive", }) } } catch (err) { toast({ title: "Error", description: (err as Error).message || "An unexpected error occurred.", variant: "destructive", }) console.error("Reset password error:", err) } finally { setIsLoading(false) } } if (!token) { return ( <div className="flex min-h-[calc(100vh-64px)] items-center justify-center bg-background px-4 py-12"> <Card className="w-full max-w-md"> <CardHeader className="text-center"> <CardTitle className="text-2xl font-bold">Invalid Link</CardTitle> <CardDescription className="mt-2 text-muted-foreground"> {validationMessage || "No password reset token provided."} </CardDescription> </CardHeader> <CardContent className="grid gap-4"> <Button asChild className="w-full"> <Link href="/auth/forgot-password">Request New Link</Link> </Button> <Button asChild variant="outline" className="w-full bg-transparent"> <Link href="/auth/signin">Go to Sign In</Link> </Button> </CardContent> </Card> </div> ) } if (!isValidToken) { return ( <div className="flex min-h-[calc(100vh-64px)] items-center justify-center bg-background px-4 py-12"> <Card className="w-full max-w-md"> <CardHeader className="text-center"> <CardTitle className="text-2xl font-bold">Invalid or Expired Link</CardTitle> <CardDescription className="mt-2 text-muted-foreground">{validationMessage}</CardDescription> </CardHeader> <CardContent className="grid gap-4"> <Button asChild className="w-full"> <Link href="/auth/forgot-password">Request New Link</Link> </Button> <Button asChild variant="outline" className="w-full bg-transparent"> <Link href="/auth/signin">Go to Sign In</Link> </Button> </CardContent> </Card> </div> ) } return ( <div className="flex min-h-[calc(100vh-64px)] items-center justify-center bg-background px-4 py-12"> <Card className="w-full max-w-md"> <CardHeader className="text-center"> <CardTitle className="text-2xl font-bold">Reset Password</CardTitle> <CardDescription className="mt-2 text-muted-foreground">Set a new password for your account.</CardDescription> </CardHeader> <CardContent className="grid gap-4"> <form onSubmit={handleSubmit} className="grid gap-4"> <div className="grid gap-2"> <Label htmlFor="password">New Password</Label> <Input id="password" type="password" required value={password} onChange={(e) => setPassword(e.target.value)} /> </div> <div className="grid gap-2"> <Label htmlFor="confirm-password">Confirm New Password</Label> <Input id="confirm-password" type="password" required value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} /> </div> <Button type="submit" className="w-full" disabled={isLoading}> {isLoading ? <LoadingSpinner className="mr-2" /> : null} {isLoading ? "Resetting..." : "Reset Password"} </Button> </form> <div className="mt-4 text-center text-sm"> <Link href="/auth/signin" className="underline"> Back to Sign In </Link> </div> </CardContent> </Card> </div> ) } [V0_FILE]typescriptreact:file="app/auth/reset-password/loading.tsx" isEdit="true" import { LoadingSpinner } from "@/components/ui/loading-spinner" export default function ResetPasswordLoading() { return ( <div className="flex justify-center items-center h-full min-h-[calc(100vh-100px)]"> <LoadingSpinner /> </div> ) } [V0_FILE]typescriptreact:file="app/auth/signin/page.tsx" isEdit="true" "use client" import type React from "react" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import Link from "next/link" import { useToast } from "@/components/ui/use-toast" import { LoadingSpinner } from "@/components/ui/loading-spinner" import { signIn } from "next-auth/react" import { useRouter, useSearchParams } from "next/navigation" import { Github, ChromeIcon as Google } from "lucide-react" // Assuming you have these icons or similar export default function SignInPage() { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [isLoading, setIsLoading] = useState(false) const { toast } = useToast() const router = useRouter() const searchParams = useSearchParams() const callbackUrl = searchParams.get("callbackUrl") || "/dashboard" const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) try { const result = await signIn("credentials", { redirect: false, email, password, }) if (result?.error) { toast({ title: "Error", description: result.error, variant: "destructive", }) } else { toast({ title: "Success", description: "Signed in successfully!", }) router.push(callbackUrl) } } catch (error: any) { toast({ title: "Error", description: error.message || "An unexpected error occurred.", variant: "destructive", }) console.error("Sign in error:", error) } finally { setIsLoading(false) } } const handleOAuthSignIn = async (provider: string) => { setIsLoading(true) try { await signIn(provider, { callbackUrl }) } catch (error) { toast({ title: "Error", description: "Failed to sign in with " + provider, variant: "destructive", }) console.error("OAuth sign in error:", error) } finally { setIsLoading(false) } } return ( <div className="flex min-h-[calc(100vh-64px)] items-center justify-center bg-background px-4 py-12"> <Card className="w-full max-w-md"> <CardHeader className="text-center"> <CardTitle className="text-2xl font-bold">Sign In</CardTitle> <CardDescription className="mt-2 text-muted-foreground"> Enter your credentials to access your account. </CardDescription> </CardHeader> <CardContent className="grid gap-4"> <form onSubmit={handleSubmit} className="grid gap-4"> <div className="grid gap-2"> <Label htmlFor="email">Email</Label> <Input id="email" type="email" placeholder="m@example.com" required value={email} onChange={(e) => setEmail(e.target.value)} /> </div> <div className="grid gap-2"> <Label htmlFor="password">Password</Label> <Input id="password" type="password" required value={password} onChange={(e) => setPassword(e.target.value)} /> </div> <div className="flex items-center justify-between text-sm"> <Link href="/auth/forgot-password" className="underline"> Forgot password? </Link> </div> <Button type="submit" className="w-full" disabled={isLoading}> {isLoading ? <LoadingSpinner className="mr-2" /> : null} {isLoading ? "Signing In..." : "Sign In"} </Button> </form> <div className="relative"> <div className="absolute inset-0 flex items-center"> <span className="w-full border-t" /> </div> <div className="relative flex justify-center text-xs uppercase"> <span className="bg-background px-2 text-muted-foreground">Or continue with</span> </div> </div> <div className="grid grid-cols-2 gap-4"> <Button variant="outline" onClick={() => handleOAuthSignIn("google")} disabled={isLoading}> <Google className="mr-2 h-4 w-4" /> Google </Button> <Button variant="outline" onClick={() => handleOAuthSignIn("github")} disabled={isLoading}> <Github className="mr-2 h-4 w-4" /> GitHub </Button> </div> <div className="mt-4 text-center text-sm"> Don't have an account?{" "} <Link href="/auth/signup" className="underline"> Sign Up </Link> </div> </CardContent> </Card> </div> ) } [V0_FILE]typescriptreact:file="app/auth/signin/loading.tsx" isEdit="true" import { LoadingSpinner } from "@/components/ui/loading-spinner" export default function SignInLoadingPage() { return ( <div className="flex justify-center items-center h-full min-h-[calc(100vh-100px)]"> <LoadingSpinner /> </div> ) } [V0_FILE]typescriptreact:file="app/settings/SettingsClientPage.tsx" isEdit="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { useSession } from "next-auth/react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { useToast } from "@/components/ui/use-toast" import { LoadingSpinner } from "@/components/ui/loading-spinner" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" import { Terminal } from "lucide-react" import Link from "next/link" import type { BrandProfile as BrandProfileType } from "@/models/BrandProfile" interface UserProfile { name: string email: string plan: string analysisLimit: number analysesThisMonth: number } export default function SettingsClientPage() { const { data: session, update } = useSession() const { toast } = useToast() const [loading, setLoading] = useState(true) const [error, setError] = useState<string | null>(null) const [profileName, setProfileName] = useState(session?.user?.name || "") const [profileEmail, setProfileEmail] = useState(session?.user?.email || "") const [isProfileSaving, setIsProfileSaving] = useState(false) const [brandProfiles, setBrandProfiles] = useState<BrandProfileType[]>([]) const [isBrandProfilesLoading, setIsBrandProfilesLoading] = useState(true) const [brandProfilesError, setBrandProfilesError] = useState<string | null>(null) const [isBillingLoading, setIsBillingLoading] = useState(false) useEffect(() => { if (session?.user) { setProfileName(session.user.name || "") setProfileEmail(session.user.email || "") setLoading(false) fetchBrandProfiles() } else if (session === null) { // User is unauthenticated, handle accordingly (e.g., redirect) setLoading(false) setError("You must be logged in to view settings.") } }, [session]) const fetchBrandProfiles = async () => { setIsBrandProfilesLoading(true) setBrandProfilesError(null) try { const res = await fetch("/api/brand-profiles") if (!res.ok) { throw new Error(`HTTP error! status: ${res.status}`) } const data = await res.json() if (data.success) { setBrandProfiles(data.data) } else { setBrandProfilesError(data.message || "Failed to fetch brand profiles.") } } catch (e: any) { setBrandProfilesError(e.message || "An unexpected error occurred fetching brand profiles.") console.error("Failed to fetch brand profiles:", e) } finally { setIsBrandProfilesLoading(false) } } const handleProfileSave = async (e: React.FormEvent) => { e.preventDefault() setIsProfileSaving(true) try { const res = await fetch("/api/users/me", { method: "PUT", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ name: profileName, email: profileEmail }), }) const data = await res.json() if (res.ok && data.success) { toast({ title: "Profile Updated", description: "Your profile information has been saved.", }) // Update session data await update({ user: { name: profileName, email: profileEmail } }) } else { throw new Error(data.message || "Failed to update profile.") } } catch (e: any) { toast({ title: "Error", description: e.message || "Failed to save profile.", variant: "destructive", }) console.error("Profile update error:", e) } finally { setIsProfileSaving(false) } } const handleManageSubscription = async () => { setIsBillingLoading(true) try { const res = await fetch("/api/stripe/portal", { method: "POST", headers: { "Content-Type": "application/json", }, }) const data = await res.json() if (res.ok && data.url) { window.location.href = data.url } else { throw new Error(data.message || "Failed to create billing portal session.") } } catch (e: any) { toast({ title: "Error", description: e.message || "Failed to open billing portal.", variant: "destructive", }) console.error("Billing portal error:", e) } finally { setIsBillingLoading(false) } } if (loading) { return ( <div className="flex justify-center items-center h-full min-h-[calc(100vh-100px)]"> <LoadingSpinner /> </div> ) } if (error) { return ( <Alert variant="destructive"> <Terminal className="h-4 w-4" /> <AlertTitle>Error</AlertTitle> <AlertDescription>{error}</AlertDescription> </Alert> ) } return ( <div className="container mx-auto px-4 py-8 md:py-12"> <h1 className="text-3xl font-bold mb-6">User Settings</h1> <p className="text-muted-foreground mb-8">Manage your account, brand profiles, and billing information.</p> <Tabs defaultValue="profile" className="w-full"> <TabsList className="grid w-full grid-cols-3"> <TabsTrigger value="profile">Profile</TabsTrigger> <TabsTrigger value="brand-profiles">Brand Profiles</TabsTrigger> <TabsTrigger value="billing">Billing</TabsTrigger> </TabsList> <TabsContent value="profile" className="mt-6"> <Card> <CardHeader> <CardTitle>Profile Information</CardTitle> <CardDescription>Update your name and email address.</CardDescription> </CardHeader> <CardContent> <form onSubmit={handleProfileSave} className="space-y-4"> <div className="grid gap-2"> <Label htmlFor="name">Name</Label> <Input id="name" value={profileName} onChange={(e) => setProfileName(e.target.value)} disabled={isProfileSaving} /> </div> <div className="grid gap-2"> <Label htmlFor="email">Email</Label> <Input id="email" type="email" value={profileEmail} onChange={(e) => setProfileEmail(e.target.value)} disabled={isProfileSaving} /> </div> <Button type="submit" disabled={isProfileSaving}> {isProfileSaving ? <LoadingSpinner className="mr-2" /> : null} {isProfileSaving ? "Saving..." : "Save Profile"} </Button> </form> </CardContent> </Card> </TabsContent> <TabsContent value="brand-profiles" className="mt-6"> <Card> <CardHeader className="flex flex-row items-center justify-between"> <div> <CardTitle>Your Brand Profiles</CardTitle> <CardDescription>Manage your brand guidelines and profiles.</CardDescription> </div> <Button asChild> <Link href="/brand-profile/new">Create New Profile</Link> </Button> </CardHeader> <CardContent> {isBrandProfilesLoading ? ( <div className="flex justify-center items-center h-32"> <LoadingSpinner /> </div> ) : brandProfilesError ? ( <Alert variant="destructive"> <Terminal className="h-4 w-4" /> <AlertTitle>Error</AlertTitle> <AlertDescription>{brandProfilesError}</AlertDescription> </Alert> ) : brandProfiles.length === 0 ? ( <p className="text-muted-foreground text-center py-8">No brand profiles created yet.</p> ) : ( <div className="grid gap-4"> {brandProfiles.map((profile) => ( <Card key={profile._id.toString()} className="p-4 flex items-center justify-between"> <div> <h3 className="font-semibold">{profile.name}</h3> <p className="text-sm text-muted-foreground">{profile.description}</p> </div> <Button variant="outline" asChild> <Link href={`/brand-profile/${profile._id.toString()}`}>View/Edit</Link> </Button> </Card> ))} </div> )} </CardContent> </Card> </TabsContent> <TabsContent value="billing" className="mt-6"> <Card> <CardHeader> <CardTitle>Billing & Subscription</CardTitle> <CardDescription>Manage your subscription plan and payment methods.</CardDescription> </CardHeader> <CardContent className="space-y-4"> <div> <h3 className="font-semibold">Current Plan: {session?.user?.plan || "Free"}</h3> <p className="text-sm text-muted-foreground"> Analyses remaining this month: {session?.user?.analysesThisMonth || 0} /{" "} {session?.user?.analysisLimit === -1 ? "Unlimited" : session?.user?.analysisLimit || 0} </p> </div> <Button onClick={handleManageSubscription} disabled={isBillingLoading}> {isBillingLoading ? <LoadingSpinner className="mr-2" /> : null} {isBillingLoading ? "Loading..." : "Manage Subscription"} </Button> <p className="text-sm text-muted-foreground"> You will be redirected to a secure Stripe portal to manage your subscription. </p> </CardContent> </Card> </TabsContent> </Tabs> </div> ) } [V0_FILE]typescriptreact:file="app/settings/page.tsx" isEdit="true" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" import { redirect } from "next/navigation" import SettingsClientPage from "./SettingsClientPage" import { RoleGuard } from "@/components/auth/role-guard" export default async function SettingsPage() { const session = await getServerSession(authOptions) if (!session) { redirect("/auth/signin?callbackUrl=/settings") } // This page is client-side rendered to fetch user-specific settings // and interact with the API. return ( <RoleGuard requiredRole="user"> <SettingsClientPage /> </RoleGuard> ) } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isEdit="true" import { CardDescription } from "@/components/ui/card" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" import { redirect } from "next/navigation" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import Link from "next/link" import { PlusCircle, LayoutDashboard, Settings, BarChart, Crown } from "lucide-react" import { connectToDatabase } from "@/lib/mongodb" import User from "@/models/User" import Analysis from "@/models/Analysis" import BrandProfile from "@/models/BrandProfile" import { ObjectId } from "mongodb" import { format } from "date-fns" export default async function DashboardPage() { const session = await getServerSession(authOptions) if (!session) { redirect("/auth/signin?callbackUrl=/dashboard") } await connectToDatabase() const user = await User.findById(new ObjectId(session.user.id)).lean() if (!user) { // This should ideally not happen if session exists, but as a fallback redirect("/auth/signin?error=UserNotFound") } const totalAnalyses = await Analysis.countDocuments({ userId: new ObjectId(session.user.id) }) const totalBrandProfiles = await BrandProfile.countDocuments({ userId: new ObjectId(session.user.id) }) // Fetch recent analyses (e.g., last 5) const recentAnalyses = await Analysis.find({ userId: new ObjectId(session.user.id) }) .sort({ createdAt: -1 }) .limit(5) .lean() const isPremium = user.plan !== "free" return ( <div className="container mx-auto px-4 py-8 md:py-12"> <h1 className="text-3xl font-bold mb-6">Welcome, {user.name || user.email}!</h1> <p className="text-muted-foreground mb-8">Your Brand Guardian AI Dashboard.</p> <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3 mb-8"> <Card> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardTitle className="text-sm font-medium">Current Plan</CardTitle> <Crown className="h-4 w-4 text-muted-foreground" /> </CardHeader> <CardContent> <div className="text-2xl font-bold capitalize">{user.plan}</div> <p className="text-xs text-muted-foreground"> Analyses this month: {user.analysesThisMonth} /{" "} {user.analysisLimit === -1 ? "Unlimited" : user.analysisLimit} </p> </CardContent> </Card> <Card> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardTitle className="text-sm font-medium">Total Analyses</CardTitle> <BarChart className="h-4 w-4 text-muted-foreground" /> </CardHeader> <CardContent> <div className="text-2xl font-bold">{totalAnalyses}</div> <p className="text-xs text-muted-foreground">Analyses performed across all profiles</p> </CardContent> </Card> <Card> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardTitle className="text-sm font-medium">Brand Profiles</CardTitle> <Settings className="h-4 w-4 text-muted-foreground" /> </CardHeader> <CardContent> <div className="text-2xl font-bold">{totalBrandProfiles}</div> <p className="text-xs text-muted-foreground">Your saved brand guidelines</p> </CardContent> </Card> </div> <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3"> <Card className="md:col-span-1"> <CardHeader> <CardTitle>Quick Actions</CardTitle> <CardDescription>Start a new task or manage your settings.</CardDescription> </CardHeader> <CardContent className="grid gap-4"> <Button asChild className="w-full"> <Link href="/analyzer"> <PlusCircle className="mr-2 h-4 w-4" /> New Analysis </Link> </Button> <Button asChild variant="outline" className="w-full bg-transparent"> <Link href="/brand-profile"> <LayoutDashboard className="mr-2 h-4 w-4" /> Manage Brand Profiles </Link> </Button> <Button asChild variant="outline" className="w-full bg-transparent"> <Link href="/settings"> <Settings className="mr-2 h-4 w-4" /> Account Settings </Link> </Button> {!isPremium && ( <Button asChild variant="secondary" className="w-full"> <Link href="/pricing"> <Crown className="mr-2 h-4 w-4" /> Upgrade to Pro </Link> </Button> )} </CardContent> </Card> <Card className="md:col-span-2"> <CardHeader> <CardTitle>Recent Analyses</CardTitle> <CardDescription>Your latest brand compliance reports.</CardDescription> </CardHeader> <CardContent> {recentAnalyses.length === 0 ? ( <p className="text-muted-foreground text-center py-8">No analyses performed yet. Start a new one!</p> ) : ( <div className="space-y-4"> {recentAnalyses.map((analysis) => ( <div key={analysis._id.toString()} className="border-b pb-3 last:border-b-0"> <div className="flex items-center justify-between"> <h3 className="font-semibold">{analysis.title || "Untitled Analysis"}</h3> <span className="text-sm text-muted-foreground"> Score: {analysis.overallScore?.toFixed(1) || "N/A"}% </span> </div> <p className="text-sm text-muted-foreground">Brand Profile: {analysis.brandProfileName || "N/A"}</p> <p className="text-xs text-muted-foreground"> {format(new Date(analysis.createdAt), "MMM dd, yyyy HH:mm")} </p> <Button variant="link" size="sm" asChild className="px-0"> <Link href={`/analyzer/${analysis._id.toString()}`}>View Report</Link> </Button> </div> ))} </div> )} </CardContent> </Card> </div> </div> ) } [V0_FILE]typescriptreact:file="middleware.ts" isEdit="true" import { withAuth } from "next-auth/middleware" import { NextResponse } from "next/server" export default withAuth( function middleware(req) { // Admin-only routes if (req.nextUrl.pathname.startsWith("/admin") && req.nextauth.token?.role !== "admin") { return NextResponse.redirect(new URL("/auth/error?message=AccessDenied", req.url)) } // Protected routes for authenticated users const protectedRoutes = ["/dashboard", "/analyzer", "/brand-profile", "/settings"] if (protectedRoutes.some((route) => req.nextUrl.pathname.startsWith(route)) && !req.nextauth.token) { return NextResponse.redirect(new URL("/auth/signin", req.url)) } // Redirect authenticated users from auth pages to dashboard if (req.nextUrl.pathname.startsWith("/auth") && req.nextauth.token) { return NextResponse.redirect(new URL("/dashboard", req.url)) } return NextResponse.next() }, { callbacks: { authorized: ({ token, req }) => { // Allow access to auth pages for unauthenticated users if (req.nextUrl.pathname.startsWith("/auth")) { return true } // Allow access to pricing and demo pages for all if (req.nextUrl.pathname.startsWith("/pricing") || req.nextUrl.pathname.startsWith("/demo")) { return true } // For all other pages, require a token (user is authenticated) return !!token }, }, pages: { signIn: "/auth/signin", error: "/auth/error", }, }, ) export const config = { matcher: ["/((?!api|_next/static|_next/image|favicon.ico|logo.svg|manifest.json).*)"], } [V0_FILE]typescriptreact:file="app/adobe-express/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import Link from "next/link" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" import { redirect } from "next/navigation" import { PermissionGuard } from "@/components/adobe-express/permission-guard" import { AddOnRoot } from "@/components/adobe-express/add-on-root" import { BrandPanel } from "@/components/adobe-express/brand-panel" import { BrandColorPicker } from "@/components/adobe-express/brand-color-picker" import { FontReplacer } from "@/components/adobe-express/font-replacer" import { connectToDatabase } from "@/lib/mongodb" import BrandProfile from "@/models/BrandProfile" import { ObjectId } from "mongodb" import { AuthProvider } from "@/components/adobe-express/auth-provider" async function getUserBrandProfiles(userId: string) { await connectToDatabase() const profiles = await BrandProfile.find({ userId: new ObjectId(userId) }).lean() return profiles.map((profile) => ({ id: profile._id.toString(), name: profile.name, logoUrl: profile.logoUrl, primaryColors: profile.primaryColors, secondaryColors: profile.secondaryColors, fonts: profile.fonts, guidelines: profile.guidelines, })) } export default async function AdobeExpressPage() { const session = await getServerSession(authOptions) if (!session) { redirect("/auth/signin?callbackUrl=/adobe-express") } const brandProfiles = await getUserBrandProfiles(session.user.id) return ( <AuthProvider> <PermissionGuard> <AddOnRoot> <div className="p-4 md:p-6"> <h1 className="text-3xl font-bold mb-6">Adobe Express Add-on</h1> <Card className="mb-6"> <CardHeader> <CardTitle>Brand Panel</CardTitle> <CardDescription>Access your brand profiles directly within Adobe Express.</CardDescription> </CardHeader> <CardContent> <BrandPanel brandProfiles={brandProfiles} /> </CardContent> </Card> <Card className="mb-6"> <CardHeader> <CardTitle>Brand Color Picker</CardTitle> <CardDescription>Apply your brand's primary and secondary colors to your designs.</CardDescription> </CardHeader> <CardContent> <BrandColorPicker brandProfiles={brandProfiles} /> </CardContent> </Card> <Card className="mb-6"> <CardHeader> <CardTitle>Font Replacer</CardTitle> <CardDescription> Ensure typography consistency by replacing fonts with your brand's approved fonts. </CardDescription> </CardHeader> <CardContent> <FontReplacer brandProfiles={brandProfiles} /> </CardContent> </Card> <Card> <CardHeader> <CardTitle>Need to manage your Brand Profiles?</CardTitle> <CardDescription> Create or edit your brand profiles in the main Brand Guardian AI application. </CardDescription> </CardHeader> <CardContent> <Button asChild> <Link href="/brand-profile" target="_blank" rel="noopener noreferrer"> Go to Brand Profiles </Link> </Button> </CardContent> </Card> </div> </AddOnRoot> </PermissionGuard> </AuthProvider> ) } [V0_FILE]typescriptreact:file="app/adobe-express/loading.tsx" isEdit="true" import { LoadingSpinner } from "@/components/ui/loading-spinner" export default function AdobeExpressLoading() { return ( <div className="flex justify-center items-center h-full min-h-[calc(100vh-100px)]"> <LoadingSpinner /> </div> ) } [V0_FILE]typescript:file="models/User.ts" isEdit="true" import mongoose, { Schema, models } from "mongoose" import type { Document } from "mongoose" export interface User extends Document { name?: string email: string password?: string image?: string role: "user" | "admin" plan: "free" | "pro" | "enterprise" stripeCustomerId?: string stripeSubscriptionId?: string analysisLimit: number analysesThisMonth: number emailVerified: boolean isActive: boolean resetPasswordToken?: string resetPasswordExpires?: Date createdAt: Date updatedAt: Date } const UserSchema = new Schema<User>( { name: { type: String }, email: { type: String, required: true, unique: true }, password: { type: String }, // Hashed password image: { type: String }, // For OAuth profile pictures role: { type: String, enum: ["user", "admin"], default: "user" }, plan: { type: String, enum: ["free", "pro", "enterprise"], default: "free" }, stripeCustomerId: { type: String }, stripeSubscriptionId: { type: String }, analysisLimit: { type: Number, default: 5 }, // e.g., 5 for free, 100 for pro, -1 for unlimited analysesThisMonth: { type: Number, default: 0 }, emailVerified: { type: Boolean, default: false }, isActive: { type: Boolean, default: true }, resetPasswordToken: { type: String }, resetPasswordExpires: { type: Date }, }, { timestamps: true, }, ) const User = models.User || mongoose.model<User>("User", UserSchema) export default User [V0_FILE]typescript:file="models/Analysis.ts" isEdit="true" import mongoose, { Schema, models } from "mongoose" import type { Document, Types } from "mongoose" export interface Analysis extends Document { userId: Types.ObjectId brandProfileId?: Types.ObjectId brandProfileName?: string // Denormalized for easier display imageUrl: string textContent?: string overallScore?: number complianceDetails?: { color?: { score: number; issues: string[] } typography?: { score: number; issues: string[] } logo?: { score: number; issues: string[] } layout?: { score: number; issues: string[] } tone?: { score: number; issues: string[] } } aiSuggestions?: string[] status: "pending" | "completed" | "failed" createdAt: Date updatedAt: Date } const AnalysisSchema = new Schema<Analysis>( { userId: { type: Schema.Types.ObjectId, ref: "User", required: true }, brandProfileId: { type: Schema.Types.ObjectId, ref: "BrandProfile" }, brandProfileName: { type: String }, imageUrl: { type: String, required: true }, textContent: { type: String }, overallScore: { type: Number }, complianceDetails: { color: { score: { type: Number }, issues: [{ type: String }], }, typography: { score: { type: Number }, issues: [{ type: String }], }, logo: { score: { type: Number }, issues: [{ type: String }], }, layout: { score: { type: Number }, issues: [{ type: String }], }, tone: { score: { type: Number }, issues: [{ type: String }], }, }, aiSuggestions: [{ type: String }], status: { type: String, enum: ["pending", "completed", "failed"], default: "pending" }, }, { timestamps: true, }, ) const Analysis = models.Analysis || mongoose.model<Analysis>("Analysis", AnalysisSchema) export default Analysis [V0_FILE]typescript:file="models/BrandProfile.ts" isEdit="true" import mongoose, { Schema, models } from "mongoose" import type { Document, Types } from "mongoose" export interface BrandProfile extends Document { userId: Types.ObjectId name: string description?: string primaryColors: string[] secondaryColors: string[] fonts: string[] brandVoice: string guidelines: string logoUrl?: string createdAt: Date updatedAt: Date } const BrandProfileSchema = new Schema<BrandProfile>( { userId: { type: Schema.Types.ObjectId, ref: "User", required: true }, name: { type: String, required: true }, description: { type: String }, primaryColors: [{ type: String }], secondaryColors: [{ type: String }], fonts: [{ type: String }], brandVoice: { type: String }, guidelines: { type: String }, logoUrl: { type: String }, }, { timestamps: true, }, ) const BrandProfile = models.BrandProfile || mongoose.model<BrandProfile>("BrandProfile", BrandProfileSchema) export default BrandProfile [V0_FILE]typescript:file="models/Subscription.ts" isEdit="true" import mongoose, { Schema, models } from "mongoose" import type { Document, Types } from "mongoose" export interface Subscription extends Document { userId: Types.ObjectId stripeCustomerId: string stripeSubscriptionId: string plan: "free" | "pro" | "enterprise" status: "active" | "canceled" | "past_due" | "unpaid" | "trialing" currentPeriodStart: Date currentPeriodEnd: Date cancelAtPeriodEnd: boolean createdAt: Date updatedAt: Date } const SubscriptionSchema = new Schema<Subscription>( { userId: { type: Schema.Types.ObjectId, ref: "User", required: true, unique: true }, stripeCustomerId: { type: String, required: true, unique: true }, stripeSubscriptionId: { type: String, required: true, unique: true }, plan: { type: String, enum: ["free", "pro", "enterprise"], required: true }, status: { type: String, enum: ["active", "canceled", "past_due", "unpaid", "trialing"], required: true, }, currentPeriodStart: { type: Date, required: true }, currentPeriodEnd: { type: Date, required: true }, cancelAtPeriodEnd: { type: Boolean, default: false }, }, { timestamps: true, }, ) const Subscription = models.Subscription || mongoose.model<Subscription>("Subscription", SubscriptionSchema) export default Subscription [V0_FILE]typescript:file="models/AdminLog.ts" isEdit="true" import mongoose, { Schema, models } from "mongoose" import type { Document, Types } from "mongoose" export interface AdminLog extends Document { timestamp: Date level: "info" | "warn" | "error" action: string message: string adminId?: Types.ObjectId // Optional, if action is system-generated adminEmail: string // Denormalized for easier querying targetType: string // e.g., "User", "BrandProfile", "Analysis", "SystemSettings" targetId?: Types.ObjectId // ID of the affected document metadata?: Record<string, any> // Additional relevant data createdAt: Date updatedAt: Date } const AdminLogSchema = new Schema<AdminLog>( { timestamp: { type: Date, default: Date.now }, level: { type: String, enum: ["info", "warn", "error"], required: true }, action: { type: String, required: true }, message: { type: String, required: true }, adminId: { type: Schema.Types.ObjectId, ref: "User" }, adminEmail: { type: String, required: true }, targetType: { type: String, required: true }, targetId: { type: Schema.Types.ObjectId }, metadata: { type: Schema.Types.Mixed }, }, { timestamps: true, }, ) const AdminLog = models.AdminLog || mongoose.model<AdminLog>("AdminLog", AdminLogSchema) export default AdminLog [V0_FILE]typescript:file="models/SystemSettings.ts" isEdit="true" import mongoose, { Schema, models } from "mongoose" import type { Document } from "mongoose" export interface SystemSettings extends Document { appName: string appDescription: string contactEmail: string websiteUrl: string geminiApiKey: string enableAISuggestions: boolean enableBrandProfileExtraction: boolean enableStripe: boolean enableAdobeExpress: boolean enableEmailNotifications: boolean enableRealtimeNotifications: boolean adminContactEmail: string enableActivityLogging: boolean createdAt: Date updatedAt: Date } const SystemSettingsSchema = new Schema<SystemSettings>( { appName: { type: String, default: "Brand Guardian AI" }, appDescription: { type: String, default: "AI-powered brand compliance and design analysis." }, contactEmail: { type: String, default: "support@brandguardian.com" }, websiteUrl: { type: String, default: "https://www.brandguardian.com" }, geminiApiKey: { type: String, default: "" }, // Store encrypted in production enableAISuggestions: { type: Boolean, default: true }, enableBrandProfileExtraction: { type: Boolean, default: true }, enableStripe: { type: Boolean, default: false }, enableAdobeExpress: { type: Boolean, default: false }, enableEmailNotifications: { type: Boolean, default: true }, enableRealtimeNotifications: { type: Boolean, default: true }, adminContactEmail: { type: String, default: "admin@brandguardian.com" }, enableActivityLogging: { type: Boolean, default: true }, }, { timestamps: true, }, ) const SystemSettings = models.SystemSettings || mongoose.model<SystemSettings>("SystemSettings", SystemSettingsSchema) export default SystemSettings [V0_FILE]typescript:file="lib/mongodb.ts" isEdit="true" import mongoose from "mongoose" const MONGODB_URI = process.env.MONGODB_URI if (!MONGODB_URI) { throw new Error("Please define the MONGODB_URI environment variable inside .env.local") } /** * Global is used here to maintain a cached connection across hot reloads * in development. This prevents connections growing exponentially * during API Route usage. */ let cached = global.mongoose if (!cached) { cached = global.mongoose = { conn: null, promise: null } } export async function connectToDatabase() { if (cached.conn) { return cached.conn } if (!cached.promise) { const opts = { bufferCommands: false, } cached.promise = mongoose.connect(MONGODB_URI, opts).then((mongoose) => { return mongoose }) } cached.conn = await cached.promise return cached.conn } [V0_FILE]typescript:file="lib/auth.ts" isEdit="true" import type { NextAuthOptions } from "next-auth" import CredentialsProvider from "next-auth/providers/credentials" import GithubProvider from "next-auth/providers/github" import GoogleProvider from "next-auth/providers/google" import { MongoDBAdapter } from "@auth/mongodb-adapter" import clientPromise from "./mongodb" import User from "@/models/User" import bcrypt from "bcryptjs" import { connectToDatabase } from "./mongodb" import type { Adapter } from "next-auth/adapters" export const authOptions: NextAuthOptions = { adapter: MongoDBAdapter(clientPromise) as Adapter, providers: [ CredentialsProvider({ name: "Credentials", credentials: { email: { label: "Email", type: "email" }, password: { label: "Password", type: "password" }, }, async authorize(credentials) { await connectToDatabase() const user = await User.findOne({ email: credentials?.email }) if (user && user.password && credentials?.password) { const isValidPassword = await bcrypt.compare(credentials.password, user.password) if (isValidPassword) { // Return user object without sensitive data return { id: user._id.toString(), name: user.name, email: user.email, image: user.image, role: user.role, plan: user.plan, analysisLimit: user.analysisLimit, analysesThisMonth: user.analysesThisMonth, stripeCustomerId: user.stripeCustomerId, } } } return null }, }), GithubProvider({ clientId: process.env.GITHUB_ID as string, clientSecret: process.env.GITHUB_SECRET as string, }), GoogleProvider({ clientId: process.env.GOOGLE_CLIENT_ID as string, clientSecret: process.env.GOOGLE_CLIENT_SECRET as string, }), ], session: { strategy: "jwt", maxAge: 30 * 24 * 60 * 60, // 30 days }, jwt: { secret: process.env.NEXTAUTH_JWT_SECRET, }, secret: process.env.NEXTAUTH_SECRET, callbacks: { async jwt({ token, user, trigger, session }) { if (user) { token.id = user.id token.role = (user as any).role token.plan = (user as any).plan token.analysisLimit = (user as any).analysisLimit token.analysesThisMonth = (user as any).analysesThisMonth token.stripeCustomerId = (user as any).stripeCustomerId } // Update token from session if using `useSession` update if (trigger === "update" && session?.user) { token.name = session.user.name token.email = session.user.email token.image = session.user.image token.role = session.user.role token.plan = session.user.plan token.analysisLimit = session.user.analysisLimit token.analysesThisMonth = session.user.analysesThisMonth token.stripeCustomerId = session.user.stripeCustomerId } return token }, async session({ session, token }) { if (token) { session.user.id = token.id as string session.user.role = token.role as "user" | "admin" session.user.plan = token.plan as "free" | "pro" | "enterprise" session.user.analysisLimit = token.analysisLimit as number session.user.analysesThisMonth = token.analysesThisMonth as number session.user.stripeCustomerId = token.stripeCustomerId as string } return session }, }, pages: { signIn: "/auth/signin", error: "/auth/error", }, events: { async createUser({ user }) { await connectToDatabase() // Set default role and plan for new users await User.findByIdAndUpdate(user.id, { role: "user", plan: "free", analysisLimit: 5, // Default for free plan analysesThisMonth: 0, emailVerified: user.emailVerified ? true : false, // Set based on OAuth provider or email verification flow isActive: true, }) }, async linkAccount({ user }) { await connectToDatabase() // Ensure users linking accounts also have default plan/role if not set const existingUser = await User.findById(user.id) if (existingUser && !existingUser.plan) { await User.findByIdAndUpdate(user.id, { plan: "free", analysisLimit: 5, analysesThisMonth: 0, isActive: true, }) } }, }, } [V0_FILE]typescript:file="lib/stripe.ts" isEdit="true" import Stripe from "stripe" export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY as string, { apiVersion: "2024-04-10", typescript: true, }) export const STRIPE_PLANS = { free: { name: "Free", price: 0, priceId: null, features: ["5 analyses/month", "1 brand profile", "Basic compliance checks"], }, pro: { name: "Pro", price: 29, // Example price in USD priceId: process.env.STRIPE_PRO_PRICE_ID, // Stripe Price ID for Pro plan features: [ "100 analyses/month", "10 brand profiles", "Advanced compliance checks", "AI-powered suggestions", "Batch processing", "Priority support", ], }, enterprise: { name: "Enterprise", price: 99, // Example price in USD priceId: process.env.STRIPE_ENTERPRISE_PRICE_ID, // Stripe Price ID for Enterprise plan features: [ "Unlimited analyses", "Unlimited brand profiles", "Full compliance suite", "AI-powered suggestions", "Batch processing", "Dedicated account manager", "Custom integrations", "24/7 support", ], }, } [V0_FILE]typescript:file="lib/cloudinary.ts" isFixed="true" isEdit="true" isQuickEdit="true" import { v2 as cloudinary } from "cloudinary" cloudinary.config({ cloud_name: process.env.CLOUDINARY_CLOUD_NAME, api_key: process.env.CLOUDINARY_API_KEY, api_secret: process.env.CLOUDINARY_API_SECRET, secure: true, }) export async function uploadImage(fileBuffer: Buffer, folder = "brand-guardian-ai") { return new Promise((resolve, reject) => { cloudinary.uploader .upload_stream( { folder: folder, resource_type: "image", }, (error, result) => { if (error) { console.error("Cloudinary upload error:", error) return reject(error) } resolve(result) }, ) .end(fileBuffer) }) } export async function deleteImage(publicId: string) { return new Promise((resolve, reject) => { cloudinary.uploader.destroy(publicId, (error, result) => { if (error) { console.error("Cloudinary delete error:", error) return reject(error) } resolve(result) }) }) } export { cloudinary } [V0_FILE]typescript:file="app/actions/analyze.ts" isEdit="true" "use server" import { connectToDatabase } from "@/lib/mongodb" import Analysis from "@/models/Analysis" import BrandProfile from "@/models/BrandProfile" import User from "@/models/User" import { getSession } from "next-auth/react" import { ObjectId } from "mongodb" import { getGeminiAnalysis } from "@/lib/gemini" import { adminLogger } from "@/lib/admin-logger" import SystemSettings from "@/models/SystemSettings" interface AnalyzeInput { imageUrl?: string textContent?: string brandProfileId?: string } export async function analyzeContent(input: AnalyzeInput) { const session = await getSession() if (!session?.user?.id) { return { success: false, message: "Authentication required." } } await connectToDatabase() const userId = new ObjectId(session.user.id) const user = await User.findById(userId) if (!user) { return { success: false, message: "User not found." } } // Check analysis limits if (user.analysisLimit !== -1 && user.analysesThisMonth >= user.analysisLimit) { return { success: false, message: "You have reached your monthly analysis limit. Please upgrade your plan." } } let brandProfile: any = null if (input.brandProfileId) { brandProfile = await BrandProfile.findOne({ _id: new ObjectId(input.brandProfileId), userId }) if (!brandProfile) { return { success: false, message: "Brand profile not found or does not belong to you." } } } let newAnalysis: any try { newAnalysis = await Analysis.create({ userId: userId, brandProfileId: brandProfile?._id, brandProfileName: brandProfile?.name, imageUrl: input.imageUrl, textContent: input.textContent, status: "pending", }) // Increment user's analysis count await User.findByIdAndUpdate(userId, { $inc: { analysesThisMonth: 1 } }) // Get system settings for AI toggle const systemSettings = await SystemSettings.findOne({}) const enableAISuggestions = systemSettings?.enableAISuggestions ?? true // Simulate AI analysis const aiResult = await getGeminiAnalysis({ imageUrl: input.imageUrl, textContent: input.textContent, brandProfile: brandProfile, enableAISuggestions: enableAISuggestions, }) // Update analysis with results newAnalysis.overallScore = aiResult.overallScore newAnalysis.complianceDetails = aiResult.complianceDetails newAnalysis.aiSuggestions = aiResult.aiSuggestions newAnalysis.status = "completed" await newAnalysis.save() await adminLogger({ adminId: userId, adminEmail: user.email, action: "PERFORMED_ANALYSIS", message: `User ${user.email} performed an analysis.`, targetType: "Analysis", targetId: newAnalysis._id, level: "info", }) return { success: true, data: newAnalysis, message: "Analysis completed successfully." } } catch (error: any) { console.error("Analysis failed:", error) if (newAnalysis) { newAnalysis.status = "failed" await newAnalysis.save() } await adminLogger({ adminId: userId, adminEmail: user.email, action: "ANALYSIS_FAILED", message: `User ${user.email} analysis failed: ${error.message}`, targetType: "Analysis", targetId: newAnalysis?._id, level: "error", metadata: { error: error.message }, }) return { success: false, message: error.message || "Failed to perform analysis." } } } [V0_FILE]typescript:file="app/api/auth/[...nextauth]/route.ts" isEdit="true" import NextAuth from "next-auth" import { authOptions } from "@/lib/auth" const handler = NextAuth(authOptions) export { handler as GET, handler as POST } [V0_FILE]typescript:file="app/api/auth/signup/route.ts" isEdit="true" import { type NextRequest, NextResponse } from "next/server" import { connectToDatabase } from "@/lib/mongodb" import User from "@/models/User" import bcrypt from "bcryptjs" import { adminLogger } from "@/lib/admin-logger" export async function POST(req: NextRequest) { await connectToDatabase() try { const { name, email, password } = await req.json() if (!email || !password) { return NextResponse.json({ success: false, message: "Email and password are required." }, { status: 400 }) } const existingUser = await User.findOne({ email }) if (existingUser) { return NextResponse.json({ success: false, message: "User with this email already exists." }, { status: 409 }) } const hashedPassword = await bcrypt.hash(password, 10) const newUser = await User.create({ name, email, password: hashedPassword, role: "user", plan: "free", analysisLimit: 5, // Default for free plan analysesThisMonth: 0, emailVerified: false, // Will be true after email verification isActive: true, }) // In a real application, you'd send a verification email here. // For simplicity, we'll just log it or simulate sending. // await sendVerificationEmail(newUser.email, newUser._id.toString()); console.log(`Verification email simulated for: ${newUser.email}`) await adminLogger({ adminId: newUser._id, adminEmail: newUser.email, action: "USER_REGISTERED", message: `New user registered: ${newUser.email}`, targetType: "User", targetId: newUser._id, level: "info", }) return NextResponse.json({ success: true, message: "User registered successfully." }, { status: 201 }) } catch (error: any) { console.error("Signup error:", error) return NextResponse.json({ success: false, message: error.message || "Internal server error." }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/auth/forgot-password/route.ts" isEdit="true" import { type NextRequest, NextResponse } from "next/server" import { connectToDatabase } from "@/lib/mongodb" import User from "@/models/User" import crypto from "crypto" import { sendPasswordResetEmail } from "@/lib/email" import { adminLogger } from "@/lib/admin-logger" export async function POST(req: NextRequest) { await connectToDatabase() try { const { email } = await req.json() if (!email) { return NextResponse.json({ success: false, message: "Email is required." }, { status: 400 }) } const user = await User.findOne({ email }) if (!user) { // For security, always return a generic success message even if user not found return NextResponse.json( { success: true, message: "If an account with that email exists, a password reset link has been sent." }, { status: 200 }, ) } // Generate a reset token const resetToken = crypto.randomBytes(32).toString("hex") const resetPasswordExpires = new Date(Date.now() + 3600000) // 1 hour from now user.resetPasswordToken = resetToken user.resetPasswordExpires = resetPasswordExpires await user.save() // Create reset URL const resetUrl = `${process.env.NEXT_PUBLIC_APP_URL}/auth/reset-password?token=${resetToken}&email=${user.email}` // Send email await sendPasswordResetEmail(user.email, resetUrl) await adminLogger({ adminId: user._id, adminEmail: user.email, action: "FORGOT_PASSWORD_REQUEST", message: `Password reset requested for user: ${user.email}`, targetType: "User", targetId: user._id, level: "info", }) return NextResponse.json({ success: true, message: "Password reset email sent successfully." }, { status: 200 }) } catch (error: any) { console.error("Forgot password API error:", error) return NextResponse.json({ success: false, message: error.message || "Internal server error." }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/auth/reset-password/route.ts" isEdit="true" import { type NextRequest, NextResponse } from "next/server" import { connectToDatabase } from "@/lib/mongodb" import User from "@/models/User" import bcrypt from "bcryptjs" import { adminLogger } from "@/lib/admin-logger" export async function POST(req: NextRequest) { await connectToDatabase() try { const { token, newPassword } = await req.json() if (!token || !newPassword) { return NextResponse.json({ success: false, message: "Token and new password are required." }, { status: 400 }) } const user = await User.findOne({ resetPasswordToken: token, resetPasswordExpires: { $gt: Date.now() }, }) if (!user) { return NextResponse.json({ success: false, message: "Invalid or expired reset token." }, { status: 400 }) } const hashedPassword = await bcrypt.hash(newPassword, 10) user.password = hashedPassword user.resetPasswordToken = undefined user.resetPasswordExpires = undefined await user.save() await adminLogger({ adminId: user._id, adminEmail: user.email, action: "PASSWORD_RESET", message: `Password reset successfully for user: ${user.email}`, targetType: "User", targetId: user._id, level: "info", }) return NextResponse.json({ success: true, message: "Password has been reset successfully." }, { status: 200 }) } catch (error: any) { console.error("Reset password API error:", error) return NextResponse.json({ success: false, message: error.message || "Internal server error." }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/admin/users/route.ts" isEdit="true" import { type NextRequest, NextResponse } from "next/server" import { connectToDatabase } from "@/lib/mongodb" import User from "@/models/User" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" export async function GET(req: NextRequest) { const session = await getServerSession(authOptions) if (!session || session.user.role !== "admin") { return NextResponse.json({ success: false, message: "Unauthorized" }, { status: 401 }) } await connectToDatabase() try { const users = await User.find({}).select("-password").lean() // Exclude passwords return NextResponse.json({ success: true, data: users }, { status: 200 }) } catch (error: any) { console.error("Error fetching users:", error) return NextResponse.json({ success: false, message: error.message || "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/admin/users/[id]/route.ts" isEdit="true" import { type NextRequest, NextResponse } from "next/server" import { connectToDatabase } from "@/lib/mongodb" import User from "@/models/User" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" import { ObjectId } from "mongodb" import { adminLogger } from "@/lib/admin-logger" export async function PUT(req: NextRequest, { params }: { params: { id: string } }) { const session = await getServerSession(authOptions) if (!session || session.user.role !== "admin") { return NextResponse.json({ success: false, message: "Unauthorized" }, { status: 401 }) } await connectToDatabase() try { const { id } = params const body = await req.json() // Prevent admin from changing their own role or plan to something that locks them out if (session.user.id === id && (body.role !== "admin" || body.plan === "free")) { return NextResponse.json( { success: false, message: "Admins cannot demote themselves or change to a free plan." }, { status: 403 }, ) } const updatedUser = await User.findByIdAndUpdate(new ObjectId(id), body, { new: true }).select("-password").lean() if (!updatedUser) { return NextResponse.json({ success: false, message: "User not found" }, { status: 404 }) } await adminLogger({ adminId: new ObjectId(session.user.id), adminEmail: session.user.email, action: "USER_UPDATED", message: `User ${updatedUser.email} updated by admin.`, targetType: "User", targetId: updatedUser._id, level: "info", metadata: { changes: body }, }) return NextResponse.json({ success: true, data: updatedUser }, { status: 200 }) } catch (error: any) { console.error("Error updating user:", error) return NextResponse.json({ success: false, message: error.message || "Internal server error" }, { status: 500 }) } } export async function DELETE(req: NextRequest, { params }: { params: { id: string } }) { const session = await getServerSession(authOptions) if (!session || session.user.role !== "admin") { return NextResponse.json({ success: false, message: "Unauthorized" }, { status: 401 }) } await connectToDatabase() try { const { id } = params // Prevent admin from deleting themselves if (session.user.id === id) { return NextResponse.json({ success: false, message: "Admins cannot delete their own account." }, { status: 403 }) } const deletedUser = await User.findByIdAndDelete(new ObjectId(id)).lean() if (!deletedUser) { return NextResponse.json({ success: false, message: "User not found" }, { status: 404 }) } await adminLogger({ adminId: new ObjectId(session.user.id), adminEmail: session.user.email, action: "USER_DELETED", message: `User ${deletedUser.email} deleted by admin.`, targetType: "User", targetId: deletedUser._id, level: "warn", // Use warn for destructive actions }) return NextResponse.json({ success: true, message: "User deleted successfully" }, { status: 200 }) } catch (error: any) { console.error("Error deleting user:", error) return NextResponse.json({ success: false, message: error.message || "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/brand-profiles/route.ts" isEdit="true" import { type NextRequest, NextResponse } from "next/server" import { connectToDatabase } from "@/lib/mongodb" import BrandProfile from "@/models/BrandProfile" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" import { ObjectId } from "mongodb" import { adminLogger } from "@/lib/admin-logger" export async function GET(req: NextRequest) { const session = await getServerSession(authOptions) if (!session?.user?.id) { return NextResponse.json({ success: false, message: "Unauthorized" }, { status: 401 }) } await connectToDatabase() try { const brandProfiles = await BrandProfile.find({ userId: new ObjectId(session.user.id) }).lean() return NextResponse.json({ success: true, data: brandProfiles }, { status: 200 }) } catch (error: any) { console.error("Error fetching brand profiles:", error) return NextResponse.json({ success: false, message: error.message || "Internal server error" }, { status: 500 }) } } export async function POST(req: NextRequest) { const session = await getServerSession(authOptions) if (!session?.user?.id) { return NextResponse.json({ success: false, message: "Unauthorized" }, { status: 401 }) } await connectToDatabase() try { const body = await req.json() const newBrandProfile = await BrandProfile.create({ ...body, userId: new ObjectId(session.user.id), }) await adminLogger({ adminId: new ObjectId(session.user.id), adminEmail: session.user.email, action: "BRAND_PROFILE_CREATED", message: `Brand profile "${newBrandProfile.name}" created by user.`, targetType: "BrandProfile", targetId: newBrandProfile._id, level: "info", }) return NextResponse.json({ success: true, data: newBrandProfile }, { status: 201 }) } catch (error: any) { console.error("Error creating brand profile:", error) return NextResponse.json({ success: false, message: error.message || "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/brand-profiles/[id]/route.ts" isEdit="true" import { type NextRequest, NextResponse } from "next/server" import { connectToDatabase } from "@/lib/mongodb" import BrandProfile from "@/models/BrandProfile" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" import { ObjectId } from "mongodb" import { adminLogger } from "@/lib/admin-logger" export async function GET(req: NextRequest, { params }: { params: { id: string } }) { const session = await getServerSession(authOptions) if (!session?.user?.id) { return NextResponse.json({ success: false, message: "Unauthorized" }, { status: 401 }) } await connectToDatabase() try { const { id } = params const brandProfile = await BrandProfile.findOne({ _id: new ObjectId(id), userId: new ObjectId(session.user.id), }).lean() if (!brandProfile) { return NextResponse.json({ success: false, message: "Brand profile not found" }, { status: 404 }) } return NextResponse.json({ success: true, data: brandProfile }, { status: 200 }) } catch (error: any) { console.error("Error fetching brand profile:", error) return NextResponse.json({ success: false, message: error.message || "Internal server error" }, { status: 500 }) } } export async function PUT(req: NextRequest, { params }: { params: { id: string } }) { const session = await getServerSession(authOptions) if (!session?.user?.id) { return NextResponse.json({ success: false, message: "Unauthorized" }, { status: 401 }) } await connectToDatabase() try { const { id } = params const body = await req.json() const updatedBrandProfile = await BrandProfile.findOneAndUpdate( { _id: new ObjectId(id), userId: new ObjectId(session.user.id) }, body, { new: true }, ).lean() if (!updatedBrandProfile) { return NextResponse.json({ success: false, message: "Brand profile not found or unauthorized" }, { status: 404 }) } await adminLogger({ adminId: new ObjectId(session.user.id), adminEmail: session.user.email, action: "BRAND_PROFILE_UPDATED", message: `Brand profile "${updatedBrandProfile.name}" updated by user.`, targetType: "BrandProfile", targetId: updatedBrandProfile._id, level: "info", metadata: { changes: body }, }) return NextResponse.json({ success: true, data: updatedBrandProfile }, { status: 200 }) } catch (error: any) { console.error("Error updating brand profile:", error) return NextResponse.json({ success: false, message: error.message || "Internal server error" }, { status: 500 }) } } export async function DELETE(req: NextRequest, { params }: { params: { id: string } }) { const session = await getServerSession(authOptions) if (!session?.user?.id) { return NextResponse.json({ success: false, message: "Unauthorized" }, { status: 401 }) } await connectToDatabase() try { const { id } = params const deletedBrandProfile = await BrandProfile.findOneAndDelete({ _id: new ObjectId(id), userId: new ObjectId(session.user.id), }).lean() if (!deletedBrandProfile) { return NextResponse.json({ success: false, message: "Brand profile not found or unauthorized" }, { status: 404 }) } await adminLogger({ adminId: new ObjectId(session.user.id), adminEmail: session.user.email, action: "BRAND_PROFILE_DELETED", message: `Brand profile "${deletedBrandProfile.name}" deleted by user.`, targetType: "BrandProfile", targetId: deletedBrandProfile._id, level: "warn", }) return NextResponse.json({ success: true, message: "Brand profile deleted successfully" }, { status: 200 }) } catch (error: any) { console.error("Error deleting brand profile:", error) return NextResponse.json({ success: false, message: error.message || "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/analyses/route.ts" isEdit="true" import { type NextRequest, NextResponse } from "next/server" import { connectToDatabase } from "@/lib/mongodb" import Analysis from "@/models/Analysis" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" import { ObjectId } from "mongodb" import { adminLogger } from "@/lib/admin-logger" export async function GET(req: NextRequest) { const session = await getServerSession(authOptions) if (!session?.user?.id) { return NextResponse.json({ success: false, message: "Unauthorized" }, { status: 401 }) } await connectToDatabase() try { const analyses = await Analysis.find({ userId: new ObjectId(session.user.id) }) .sort({ createdAt: -1 }) .lean() return NextResponse.json({ success: true, data: analyses }, { status: 200 }) } catch (error: any) { console.error("Error fetching analyses:", error) return NextResponse.json({ success: false, message: error.message || "Internal server error" }, { status: 500 }) } } export async function POST(req: NextRequest) { const session = await getServerSession(authOptions) if (!session?.user?.id) { return NextResponse.json({ success: false, message: "Unauthorized" }, { status: 401 }) } await connectToDatabase() try { const body = await req.json() const newAnalysis = await Analysis.create({ ...body, userId: new ObjectId(session.user.id), status: "pending", // Initial status }) await adminLogger({ adminId: new ObjectId(session.user.id), adminEmail: session.user.email, action: "ANALYSIS_INITIATED", message: `Analysis initiated by user: ${session.user.email}`, targetType: "Analysis", targetId: newAnalysis._id, level: "info", }) return NextResponse.json({ success: true, data: newAnalysis }, { status: 201 }) } catch (error: any) { console.error("Error creating analysis:", error) return NextResponse.json({ success: false, message: error.message || "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/analyses/[id]/route.ts" isEdit="true" import { type NextRequest, NextResponse } from "next/server" import { connectToDatabase } from "@/lib/mongodb" import Analysis from "@/models/Analysis" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" import { ObjectId } from "mongodb" import { adminLogger } from "@/lib/admin-logger" export async function GET(req: NextRequest, { params }: { params: { id: string } }) { const session = await getServerSession(authOptions) if (!session?.user?.id) { return NextResponse.json({ success: false, message: "Unauthorized" }, { status: 401 }) } await connectToDatabase() try { const { id } = params const analysis = await Analysis.findOne({ _id: new ObjectId(id), userId: new ObjectId(session.user.id), }).lean() if (!analysis) { return NextResponse.json({ success: false, message: "Analysis not found" }, { status: 404 }) } return NextResponse.json({ success: true, data: analysis }, { status: 200 }) } catch (error: any) { console.error("Error fetching analysis:", error) return NextResponse.json({ success: false, message: error.message || "Internal server error" }, { status: 500 }) } } export async function PUT(req: NextRequest, { params }: { params: { id: string } }) { const session = await getServerSession(authOptions) if (!session?.user?.id) { return NextResponse.json({ success: false, message: "Unauthorized" }, { status: 401 }) } await connectToDatabase() try { const { id } = params const body = await req.json() const updatedAnalysis = await Analysis.findOneAndUpdate( { _id: new ObjectId(id), userId: new ObjectId(session.user.id) }, body, { new: true }, ).lean() if (!updatedAnalysis) { return NextResponse.json({ success: false, message: "Analysis not found or unauthorized" }, { status: 404 }) } await adminLogger({ adminId: new ObjectId(session.user.id), adminEmail: session.user.email, action: "ANALYSIS_UPDATED", message: `Analysis ${updatedAnalysis._id} updated by user.`, targetType: "Analysis", targetId: updatedAnalysis._id, level: "info", metadata: { changes: body }, }) return NextResponse.json({ success: true, data: updatedAnalysis }, { status: 200 }) } catch (error: any) { console.error("Error updating analysis:", error) return NextResponse.json({ success: false, message: error.message || "Internal server error" }, { status: 500 }) } } export async function DELETE(req: NextRequest, { params }: { params: { id: string } }) { const session = await getServerSession(authOptions) if (!session?.user?.id) { return NextResponse.json({ success: false, message: "Unauthorized" }, { status: 401 }) } await connectToDatabase() try { const { id } = params const deletedAnalysis = await Analysis.findOneAndDelete({ _id: new ObjectId(id), userId: new ObjectId(session.user.id), }).lean() if (!deletedAnalysis) { return NextResponse.json({ success: false, message: "Analysis not found or unauthorized" }, { status: 404 }) } await adminLogger({ adminId: new ObjectId(session.user.id), adminEmail: session.user.email, action: "ANALYSIS_DELETED", message: `Analysis ${deletedAnalysis._id} deleted by user.`, targetType: "Analysis", targetId: deletedAnalysis._id, level: "warn", }) return NextResponse.json({ success: true, message: "Analysis deleted successfully" }, { status: 200 }) } catch (error: any) { console.error("Error deleting analysis:", error) return NextResponse.json({ success: false, message: error.message || "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/admin/analytics/route.ts" isFixed="true" isEdit="true" isQuickEdit="true" import { type NextRequest, NextResponse } from "next/server" import { connectToDatabase } from "@/lib/mongodb" import User from "@/models/User" import Analysis from "@/models/Analysis" import BrandProfile from "@/models/BrandProfile" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" import { adminLogger } from "@/lib/admin-logger" import { eachDayOfInterval, format } from "date-fns" export async function GET(req: NextRequest) { const session = await getServerSession(authOptions) if (!session || session.user.role !== "admin") { return NextResponse.json({ success: false, message: "Unauthorized" }, { status: 401 }) } await connectToDatabase() try { // User Growth (e.g., last 30 days) const thirtyDaysAgo = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000) const userGrowth = await User.aggregate([ { $match: { createdAt: { $gte: thirtyDaysAgo } } }, { $group: { _id: { $dateToString: { format: "%Y-%m-%d", date: "$createdAt" } }, count: { $sum: 1 }, }, }, { $sort: { _id: 1 } }, ]) // Fill in missing dates for user growth const allDates = eachDayOfInterval({ start: thirtyDaysAgo, end: new Date(), }).map((date) => format(date, "yyyy-MM-dd")) const userGrowthMap = new Map(userGrowth.map((item) => [item._id, item.count])) const formattedUserGrowth = allDates.map((date) => ({ date, count: userGrowthMap.get(date) || 0, })) // Analysis Trends (e.g., last 30 days) const analysisTrends = await Analysis.aggregate([ { $match: { createdAt: { $gte: thirtyDaysAgo } } }, { $group: { _id: { $dateToString: { format: "%Y-%m-%d", date: "$createdAt" } }, count: { $sum: 1 }, }, }, { $sort: { _id: 1 } }, ]) const analysisTrendsMap = new Map(analysisTrends.map((item) => [item._id, item.count])) const formattedAnalysisTrends = allDates.map((date) => ({ date, count: analysisTrendsMap.get(date) || 0, })) // Plan Distribution const planDistribution = await User.aggregate([ { $group: { _id: "$plan", count: { $sum: 1 }, }, }, { $project: { name: "$_id", value: "$count", _id: 0 } }, ]) // Feature Usage (simplified - could be based on logs or specific actions) const featureUsage = [ { name: "Image Analysis", count: await Analysis.countDocuments({ imageUrl: { $exists: true, $ne: null } }) }, { name: "Text Analysis", count: await Analysis.countDocuments({ textContent: { $exists: true, $ne: null } }), }, { name: "Brand Profile Creation", count: await BrandProfile.countDocuments() }, // Add more feature usage metrics as needed ] return NextResponse.json( { success: true, data: { userGrowth: formattedUserGrowth, analysisTrends: formattedAnalysisTrends, planDistribution, featureUsage, }, }, { status: 200 }, ) } catch (error: any) { console.error("Error fetching admin analytics:", error) await adminLogger({ adminId: session.user.id, adminEmail: session.user.email, action: "fetch_analytics_failed", level: "error", message: `Admin ${session.user.email} failed to fetch analytics: ${error.message}`, details: { error: error.message }, }) return NextResponse.json({ success: false, message: error.message || "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/admin/payments/route.ts" isEdit="true" import { type NextRequest, NextResponse } from "next/server" import { connectToDatabase } from "@/lib/mongodb" import Subscription from "@/models/Subscription" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" export async function GET(req: NextRequest) { const session = await getServerSession(authOptions) if (!session || session.user.role !== "admin") { return NextResponse.json({ success: false, message: "Unauthorized" }, { status: 401 }) } await connectToDatabase() try { // Fetch subscriptions and populate user details const payments = await Subscription.aggregate([ { $lookup: { from: "users", // The collection name for User model localField: "userId", foreignField: "_id", as: "userDetails", }, }, { $unwind: { path: "$userDetails", preserveNullAndEmptyArrays: true, // Keep subscriptions even if user not found }, }, { $project: { _id: 1, userId: "$userId", userEmail: "$userDetails.email", // Get email from populated user plan: 1, amount: { $switch: { branches: [ { case: { $eq: ["$plan", "pro"] }, then: 2900 }, // Example: $29.00 { case: { $eq: ["$plan", "enterprise"] }, then: 9900 }, // Example: $99.00 ], default: 0, }, }, currency: { $switch: { branches: [{ case: { $in: ["$plan", ["pro", "enterprise"]] }, then: "usd" }], default: "usd", }, }, status: 1, stripeSubscriptionId: 1, startDate: "$currentPeriodStart", endDate: "$currentPeriodEnd", createdAt: 1, }, }, { $sort: { createdAt: -1 } }, ]) return NextResponse.json({ success: true, data: payments }, { status: 200 }) } catch (error: any) { console.error("Error fetching payments:", error) return NextResponse.json({ success: false, message: error.message || "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/admin/settings/route.ts" isEdit="true" import { type NextRequest, NextResponse } from "next/server" import { connectToDatabase } from "@/lib/mongodb" import SystemSettings from "@/models/SystemSettings" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" import { adminLogger } from "@/lib/admin-logger" import { ObjectId } from "mongodb" export async function GET(req: NextRequest) { const session = await getServerSession(authOptions) if (!session || session.user.role !== "admin") { return NextResponse.json({ success: false, message: "Unauthorized" }, { status: 401 }) } await connectToDatabase() try { let settings = await SystemSettings.findOne({}).lean() // If no settings exist, create a default one if (!settings) { settings = await SystemSettings.create({}) await adminLogger({ adminId: new ObjectId(session.user.id), adminEmail: session.user.email, action: "DEFAULT_SETTINGS_CREATED", message: "Default system settings created as none existed.", targetType: "SystemSettings", targetId: settings._id, level: "info", }) } return NextResponse.json({ success: true, data: settings }, { status: 200 }) } catch (error: any) { console.error("Error fetching system settings:", error) return NextResponse.json({ success: false, message: error.message || "Internal server error" }, { status: 500 }) } } export async function PUT(req: NextRequest) { const session = await getServerSession(authOptions) if (!session || session.user.role !== "admin") { return NextResponse.json({ success: false, message: "Unauthorized" }, { status: 401 }) } await connectToDatabase() try { const body = await req.json() // Find and update the single settings document. If none exists, create it. const updatedSettings = await SystemSettings.findOneAndUpdate({}, body, { new: true, upsert: true, // Create if not found }).lean() await adminLogger({ adminId: new ObjectId(session.user.id), adminEmail: session.user.email, action: "SYSTEM_SETTINGS_UPDATED", message: "System settings updated by admin.", targetType: "SystemSettings", targetId: updatedSettings._id, level: "info", metadata: { changes: body }, }) return NextResponse.json({ success: true, data: updatedSettings }, { status: 200 }) } catch (error: any) { console.error("Error updating system settings:", error) return NextResponse.json({ success: false, message: error.message || "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/admin/logs/route.ts" isEdit="true" import { type NextRequest, NextResponse } from "next/server" import { connectToDatabase } from "@/lib/mongodb" import AdminLog from "@/models/AdminLog" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" export async function GET(req: NextRequest) { const session = await getServerSession(authOptions) if (!session || session.user.role !== "admin") { return NextResponse.json({ success: false, message: "Unauthorized" }, { status: 401 }) } await connectToDatabase() try { const logs = await AdminLog.find({}).sort({ timestamp: -1 }).lean() return NextResponse.json({ success: true, data: logs }, { status: 200 }) } catch (error: any) { console.error("Error fetching admin logs:", error) return NextResponse.json({ success: false, message: error.message || "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/upload/route.ts" isEdit="true" import { type NextRequest, NextResponse } from "next/server" import { cloudinary } from "@/lib/cloudinary" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" import { adminLogger } from "@/lib/admin-logger" import { ObjectId } from "mongodb" export async function POST(req: NextRequest) { const session = await getServerSession(authOptions) if (!session?.user?.id) { return NextResponse.json({ success: false, message: "Unauthorized" }, { status: 401 }) } try { const formData = await req.formData() const file = formData.get("file") as File | null if (!file) { return NextResponse.json({ success: false, message: "No file uploaded." }, { status: 400 }) } // Convert file to buffer const arrayBuffer = await file.arrayBuffer() const buffer = Buffer.from(arrayBuffer) // Upload to Cloudinary const uploadResult = await new Promise((resolve, reject) => { cloudinary.uploader .upload_stream( { folder: "brand-guardian-ai", // Optional: specify a folder in Cloudinary resource_type: "auto", // Automatically detect file type }, (error, result) => { if (error) return reject(error) resolve(result) }, ) .end(buffer) }) const imageUrl = (uploadResult as any).secure_url await adminLogger({ adminId: new ObjectId(session.user.id), adminEmail: session.user.email, action: "FILE_UPLOADED", message: `User ${session.user.email} uploaded an image.`, targetType: "File", targetId: null, // No specific document ID for a general file upload level: "info", metadata: { imageUrl: imageUrl, fileName: file.name, fileSize: file.size }, }) return NextResponse.json({ success: true, imageUrl }, { status: 200 }) } catch (error: any) { console.error("File upload error:", error) return NextResponse.json({ success: false, message: error.message || "Failed to upload file." }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/export/route.ts" isEdit="true" import { type NextRequest, NextResponse } from "next/server" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" import { connectToDatabase } from "@/lib/mongodb" import Analysis from "@/models/Analysis" import BrandProfile from "@/models/BrandProfile" import User from "@/models/User" import { ObjectId } from "mongodb" import { Parser } from "json2csv" import { adminLogger } from "@/lib/admin-logger" export async function GET(req: NextRequest) { const session = await getServerSession(authOptions) if (!session?.user?.id) { return NextResponse.json({ success: false, message: "Unauthorized" }, { status: 401 }) } await connectToDatabase() const { searchParams } = new URL(req.url) const format = searchParams.get("format") || "json" const type = searchParams.get("type") // e.g., 'analyses', 'brand-profiles', 'users' (admin only) let dataToExport: any[] = [] let filename = "export" let contentType = "application/json" try { const userId = new ObjectId(session.user.id) switch (type) { case "analyses": dataToExport = await Analysis.find({ userId }).lean() filename = `analyses-${userId}` break case "brand-profiles": dataToExport = await BrandProfile.find({ userId }).lean() filename = `brand-profiles-${userId}` break case "users": if (session.user.role !== "admin") { return NextResponse.json({ success: false, message: "Unauthorized to export user data" }, { status: 403 }) } dataToExport = await User.find({}).select("-password").lean() filename = `all-users` break default: return NextResponse.json({ success: false, message: "Invalid export type" }, { status: 400 }) } let exportedContent: string if (format === "csv") { const json2csvParser = new Parser() exportedContent = json2csvParser.parse(dataToExport) contentType = "text/csv" filename += ".csv" } else { // Default to JSON exportedContent = JSON.stringify(dataToExport, null, 2) contentType = "application/json" filename += ".json" } await adminLogger({ adminId: userId, adminEmail: session.user.email, action: "DATA_EXPORTED", message: `User ${session.user.email} exported ${type} data in ${format} format.`, targetType: "Export", targetId: null, level: "info", metadata: { type, format, count: dataToExport.length }, }) return new NextResponse(exportedContent, { status: 200, headers: { "Content-Type": contentType, "Content-Disposition": `attachment; filename="${filename}"`, }, }) } catch (error: any) { console.error("Error exporting data:", error) return NextResponse.json({ success: false, message: error.message || "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/premium/batch/route.ts" isEdit="true" import { type NextRequest, NextResponse } from "next/server" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" import { connectToDatabase } from "@/lib/mongodb" import User from "@/models/User" import { ObjectId } from "mongodb" import { analyzeContent } from "@/app/actions/analyze" // Re-use the server action import { adminLogger } from "@/lib/admin-logger" export async function POST(req: NextRequest) { const session = await getServerSession(authOptions) if (!session?.user?.id) { return NextResponse.json({ success: false, message: "Unauthorized" }, { status: 401 }) } await connectToDatabase() const user = await User.findById(new ObjectId(session.user.id)) if (!user || (user.plan !== "pro" && user.plan !== "enterprise")) { return NextResponse.json({ success: false, message: "Batch processing is a premium feature." }, { status: 403 }) } try { const { items }: { items: Array<{ imageUrl?: string; textContent?: string; brandProfileId: string }> } = await req.json() if (!items || !Array.isArray(items) || items.length === 0) { return NextResponse.json({ success: false, message: "No items provided for batch processing." }, { status: 400 }) } // In a real application, you would queue these items for background processing // and return a job ID. For this example, we'll simulate immediate processing. const results = [] for (const item of items) { // Check user's analysis limit for each item if not unlimited if (user.analysisLimit !== -1 && user.analysesThisMonth >= user.analysisLimit) { results.push({ success: false, message: "Monthly analysis limit reached for user." }) break // Stop processing if limit is hit } const result = await analyzeContent({ imageUrl: item.imageUrl, textContent: item.textContent, brandProfileId: item.brandProfileId, }) results.push(result) } await adminLogger({ adminId: new ObjectId(session.user.id), adminEmail: session.user.email, action: "BATCH_ANALYSIS_INITIATED", message: `User ${session.user.email} initiated a batch analysis for ${items.length} items.`, targetType: "Batch", targetId: null, // No specific batch job ID in this simplified example level: "info", metadata: { itemCount: items.length, resultsSummary: results.map((r) => r.success) }, }) return NextResponse.json({ success: true, message: "Batch processing initiated.", results }, { status: 200 }) } catch (error: any) { console.error("Batch processing error:", error) return NextResponse.json({ success: false, message: error.message || "Internal server error." }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/notifications/stream/route.ts" isEdit="true" import { type NextRequest, NextResponse } from "next/server" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" import { connectToDatabase } from "@/lib/mongodb" import User from "@/models/User" import { ObjectId } from "mongodb" import { realtime } from "@/lib/realtime" import SystemSettings from "@/models/SystemSettings" export async function GET(req: NextRequest) { const session = await getServerSession(authOptions) if (!session?.user?.id) { return new NextResponse("Unauthorized", { status: 401 }) } await connectToDatabase() const user = await User.findById(new ObjectId(session.user.id)) if (!user) { return new NextResponse("User not found", { status: 404 }) } const systemSettings = await SystemSettings.findOne({}) const enableRealtimeNotifications = systemSettings?.enableRealtimeNotifications ?? true if (!enableRealtimeNotifications) { return new NextResponse("Real-time notifications are disabled by admin.", { status: 403 }) } const responseStream = new ReadableStream({ start(controller) { const encoder = new TextEncoder() // Send a "connected" event immediately controller.enqueue(encoder.encode("event: connected\n")) controller.enqueue( encoder.encode(`data: ${JSON.stringify({ message: "Connected to notification stream." })}\n\n`), ) // Subscribe the user to their private channel realtime.subscribe(`user-${user._id.toString()}`, (message) => { controller.enqueue(encoder.encode(`data: ${JSON.stringify(message)}\n\n`)) }) // Keep the connection alive by sending a heartbeat every 30 seconds const heartbeatInterval = setInterval(() => { controller.enqueue(encoder.encode("event: heartbeat\n")) controller.enqueue(encoder.encode(`data: ${JSON.stringify({ timestamp: Date.now() })}\n\n`)) }, 30000) req.signal.onabort = () => { console.log(`Client disconnected: ${user.email}`) clearInterval(heartbeatInterval) // In a real app, you might want to unsubscribe the user here // realtime.unsubscribe(`user-${user._id.toString()}`); controller.close() } }, }) return new NextResponse(responseStream, { headers: { "Content-Type": "text/event-stream", "Cache-Control": "no-cache, no-transform", Connection: "keep-alive", }, }) } [V0_FILE]typescript:file="app/api/dashboard/stats/route.ts" isEdit="true" import { type NextRequest, NextResponse } from "next/server" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" import { connectToDatabase } from "@/lib/mongodb" import Analysis from "@/models/Analysis" import BrandProfile from "@/models/BrandProfile" import { ObjectId } from "mongodb" export async function GET(req: NextRequest) { const session = await getServerSession(authOptions) if (!session?.user?.id) { return NextResponse.json({ success: false, message: "Unauthorized" }, { status: 401 }) } await connectToDatabase() try { const userId = new ObjectId(session.user.id) const totalAnalyses = await Analysis.countDocuments({ userId }) const totalBrandProfiles = await BrandProfile.countDocuments({ userId }) // Get user's current plan and usage from session (already populated by JWT callback) const userPlan = session.user.plan const analysesThisMonth = session.user.analysesThisMonth const analysisLimit = session.user.analysisLimit // Fetch recent analyses (e.g., last 5) const recentAnalyses = await Analysis.find({ userId }).sort({ createdAt: -1 }).limit(5).lean() return NextResponse.json( { success: true, data: { userPlan, analysesThisMonth, analysisLimit, totalAnalyses, totalBrandProfiles, recentAnalyses, }, }, { status: 200 }, ) } catch (error: any) { console.error("Error fetching dashboard stats:", error) return NextResponse.json({ success: false, message: error.message || "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/analyses/[id]/suggestions/route.ts" isEdit="true" import { type NextRequest, NextResponse } from "next/server" import { connectToDatabase } from "@/lib/mongodb" import Analysis from "@/models/Analysis" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" import { ObjectId } from "mongodb" import { getGeminiSuggestions } from "@/lib/gemini" import { adminLogger } from "@/lib/admin-logger" import SystemSettings from "@/models/SystemSettings" export async function POST(req: NextRequest, { params }: { params: { id: string } }) { const session = await getServerSession(authOptions) if (!session?.user?.id) { return NextResponse.json({ success: false, message: "Unauthorized" }, { status: 401 }) } await connectToDatabase() try { const { id } = params const analysis = await Analysis.findOne({ _id: new ObjectId(id), userId: new ObjectId(session.user.id), }).lean() if (!analysis) { return NextResponse.json({ success: false, message: "Analysis not found or unauthorized" }, { status: 404 }) } // Check if AI suggestions are enabled in system settings const systemSettings = await SystemSettings.findOne({}) const enableAISuggestions = systemSettings?.enableAISuggestions ?? true if (!enableAISuggestions) { return NextResponse.json( { success: false, message: "AI suggestions are currently disabled by the administrator." }, { status: 403 }, ) } // Check if user has a premium plan for AI suggestions if (session.user.plan === "free") { return NextResponse.json( { success: false, message: "AI suggestions are a premium feature. Please upgrade your plan." }, { status: 403 }, ) } // Generate new suggestions based on the existing analysis data const newSuggestions = await getGeminiSuggestions({ imageUrl: analysis.imageUrl, textContent: analysis.textContent, complianceDetails: analysis.complianceDetails, overallScore: analysis.overallScore, brandProfileName: analysis.brandProfileName, }) // Update the analysis with new suggestions (optional: append or replace) const updatedAnalysis = await Analysis.findByIdAndUpdate( analysis._id, { $set: { aiSuggestions: newSuggestions } }, // Replace existing suggestions { new: true }, ).lean() await adminLogger({ adminId: new ObjectId(session.user.id), adminEmail: session.user.email, action: "AI_SUGGESTIONS_GENERATED", message: `AI suggestions generated for analysis ${analysis._id}.`, targetType: "Analysis", targetId: analysis._id, level: "info", }) return NextResponse.json({ success: true, data: updatedAnalysis?.aiSuggestions }, { status: 200 }) } catch (error: any) { console.error("Error generating AI suggestions:", error) return NextResponse.json( { success: false, message: error.message || "Failed to generate suggestions." }, { status: 500 }, ) } } [V0_FILE]typescript:file="app/api/stripe/checkout/route.ts" isEdit="true" import { type NextRequest, NextResponse } from "next/server" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" import { stripe } from "@/lib/stripe" import { connectToDatabase } from "@/lib/mongodb" import User from "@/models/User" import { ObjectId } from "mongodb" import { adminLogger } from "@/lib/admin-logger" export async function POST(req: NextRequest) { const session = await getServerSession(authOptions) if (!session?.user?.id) { return NextResponse.json({ success: false, message: "Unauthorized" }, { status: 401 }) } await connectToDatabase() const user = await User.findById(new ObjectId(session.user.id)) if (!user) { return NextResponse.json({ success: false, message: "User not found" }, { status: 404 }) } try { const { priceId } = await req.json() if (!priceId) { return NextResponse.json({ success: false, message: "Price ID is required." }, { status: 400 }) } let customerId = user.stripeCustomerId // If user doesn't have a Stripe customer ID, create one if (!customerId) { const customer = await stripe.customers.create({ email: user.email, name: user.name || undefined, metadata: { userId: user._id.toString(), }, }) customerId = customer.id user.stripeCustomerId = customerId await user.save() await adminLogger({ adminId: user._id, adminEmail: user.email, action: "STRIPE_CUSTOMER_CREATED", message: `Stripe customer created for user: ${user.email}`, targetType: "User", targetId: user._id, level: "info", }) } const checkoutSession = await stripe.checkout.sessions.create({ customer: customerId, payment_method_types: ["card"], line_items: [ { price: priceId, quantity: 1, }, ], mode: "subscription", success_url: `${process.env.NEXT_PUBLIC_APP_URL}/dashboard?success=true`, cancel_url: `${process.env.NEXT_PUBLIC_APP_URL}/pricing?canceled=true`, metadata: { userId: user._id.toString(), priceId: priceId, }, }) await adminLogger({ adminId: user._id, adminEmail: user.email, action: "STRIPE_CHECKOUT_INITIATED", message: `Stripe checkout initiated for user: ${user.email} for price ID: ${priceId}`, targetType: "Payment", targetId: null, // No specific payment record yet level: "info", metadata: { sessionId: checkoutSession.id, priceId }, }) return NextResponse.json({ success: true, url: checkoutSession.url }, { status: 200 }) } catch (error: any) { console.error("Stripe checkout session creation failed:", error) return NextResponse.json({ success: false, message: error.message || "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/stripe/portal/route.ts" isEdit="true" import { type NextRequest, NextResponse } from "next/server" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" import { stripe } from "@/lib/stripe" import { connectToDatabase } from "@/lib/mongodb" import User from "@/models/User" import { ObjectId } from "mongodb" import { adminLogger } from "@/lib/admin-logger" export async function POST(req: NextRequest) { const session = await getServerSession(authOptions) if (!session?.user?.id) { return NextResponse.json({ success: false, message: "Unauthorized" }, { status: 401 }) } await connectToDatabase() const user = await User.findById(new ObjectId(session.user.id)) if (!user || !user.stripeCustomerId) { return NextResponse.json({ success: false, message: "Stripe customer ID not found for user." }, { status: 400 }) } try { const portalSession = await stripe.billingPortal.sessions.create({ customer: user.stripeCustomerId, return_url: `${process.env.NEXT_PUBLIC_APP_URL}/settings?tab=billing`, }) await adminLogger({ adminId: user._id, adminEmail: user.email, action: "STRIPE_PORTAL_ACCESSED", message: `Stripe customer portal accessed by user: ${user.email}`, targetType: "Payment", targetId: null, level: "info", metadata: { customerId: user.stripeCustomerId }, }) return NextResponse.json({ success: true, url: portalSession.url }, { status: 200 }) } catch (error: any) { console.error("Stripe customer portal creation failed:", error) return NextResponse.json({ success: false, message: error.message || "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/stripe/webhook/route.ts" isFixed="true" isEdit="true" isQuickEdit="true" import { type NextRequest, NextResponse } from "next/server" import { stripe } from "@/lib/stripe" import { connectToDatabase } from "@/lib/mongodb" import User from "@/models/User" import Subscription from "@/models/Subscription" import { ObjectId } from "mongodb" import { adminLogger } from "@/lib/admin-logger" import type Stripe from "stripe" const relevantEvents = new Set([ "checkout.session.completed", "customer.subscription.created", "customer.subscription.updated", "customer.subscription.deleted", "invoice.payment_succeeded", "invoice.payment_failed", ]) export async function POST(req: NextRequest) { const body = await req.text() const signature = req.headers.get("stripe-signature") if (!signature) { return NextResponse.json({ message: "No stripe-signature header found" }, { status: 400 }) } let event: Stripe.Event try { event = stripe.webhooks.constructEvent(body, signature, process.env.STRIPE_WEBHOOK_SECRET as string) } catch (err: any) { console.error(`Webhook Error: ${err.message}`) return NextResponse.json({ message: `Webhook Error: ${err.message}` }, { status: 400 }) } if (!relevantEvents.has(event.type)) { return NextResponse.json({ message: "Event not relevant" }, { status: 200 }) } await connectToDatabase() try { switch (event.type) { case "checkout.session.completed": { const session = event.data.object as Stripe.Checkout.Session const subscriptionId = session.subscription as string const customerId = session.customer as string const userId = session.metadata?.userId as string const priceId = session.metadata?.priceId as string if (!userId || !subscriptionId || !customerId || !priceId) { console.error("Missing metadata in checkout.session.completed event", session) return NextResponse.json({ message: "Missing metadata" }, { status: 400 }) } const subscription = await stripe.subscriptions.retrieve(subscriptionId) const price = await stripe.prices.retrieve(priceId) const plan = price.lookup_key || price.id // Use lookup_key if available, otherwise price ID await User.findByIdAndUpdate(new ObjectId(userId), { stripeCustomerId: customerId, stripeSubscriptionId: subscriptionId, plan: plan, analysisLimit: plan === "pro" ? 100 : plan === "enterprise" ? -1 : 5, // Update limits based on plan analysesThisMonth: 0, // Reset monthly usage on new subscription }) await Subscription.findOneAndUpdate( { userId: new ObjectId(userId) }, { userId: new ObjectId(userId), stripeCustomerId: customerId, stripeSubscriptionId: subscriptionId, plan: plan as any, status: subscription.status, currentPeriodStart: new Date(subscription.current_period_start * 1000), currentPeriodEnd: new Date(subscription.current_period_end * 1000), cancelAtPeriodEnd: subscription.cancel_at_period_end, }, { upsert: true, new: true }, ) await adminLogger({ adminId: new ObjectId(userId), adminEmail: (await User.findById(new ObjectId(userId)))?.email || "N/A", action: "STRIPE_CHECKOUT_COMPLETED", message: `Checkout completed for user ${userId}. Plan: ${plan}`, targetType: "Subscription", targetId: new ObjectId(userId), level: "info", metadata: { subscriptionId, customerId, priceId, plan }, }) break } case "customer.subscription.created": case "customer.subscription.updated": case "customer.subscription.deleted": { const subscription = event.data.object as Stripe.Subscription const customerId = subscription.customer as string const priceId = subscription.items.data[0]?.price.id const plan = priceId ? (await stripe.prices.retrieve(priceId)).lookup_key || priceId : "unknown" const user = await User.findOne({ stripeCustomerId: customerId }) if (!user) { console.warn(`User not found for Stripe customer ID: ${customerId}`) return NextResponse.json({ message: "User not found" }, { status: 200 }) } const updateData: any = { stripeSubscriptionId: subscription.id, plan: plan as any, status: subscription.status, currentPeriodStart: new Date(subscription.current_period_start * 1000), currentPeriodEnd: new Date(subscription.current_period_end * 1000), cancelAtPeriodEnd: subscription.cancel_at_period_end, } if (event.type === "customer.subscription.deleted") { updateData.plan = "free" // Revert to free plan on deletion updateData.stripeSubscriptionId = undefined updateData.cancelAtPeriodEnd = false updateData.currentPeriodEnd = new Date() // Set end date to now updateData.analysesThisMonth = 0 // Reset usage updateData.analysisLimit = 5 // Reset limit to free tier } else { // Update user's plan and limits based on the new subscription updateData.analysisLimit = plan === "pro" ? 100 : plan === "enterprise" ? -1 : 5 // Only reset analysesThisMonth if plan changes or new period starts (handled by cron/manual reset) } await User.findByIdAndUpdate(user._id, updateData) await Subscription.findOneAndUpdate( { userId: user._id }, { userId: user._id, stripeCustomerId: customerId, ...updateData, }, { upsert: true, new: true }, ) await adminLogger({ adminId: user._id, adminEmail: user.email, action: `STRIPE_SUBSCRIPTION_${event.type.split(".").pop()?.toUpperCase()}`, message: `Subscription ${subscription.id} for user ${user.email} ${event.type.split(".").pop()} to ${plan}.`, targetType: "Subscription", targetId: user._id, level: event.type === "customer.subscription.deleted" ? "warn" : "info", metadata: { subscriptionId: subscription.id, customerId, plan, status: subscription.status }, }) break } case "invoice.payment_succeeded": { const invoice = event.data.object as Stripe.Invoice const customerId = invoice.customer as string const user = await User.findOne({ stripeCustomerId: customerId }) if (user) { await adminLogger({ adminId: user._id, adminEmail: user.email, action: "STRIPE_PAYMENT_SUCCEEDED", message: `Payment succeeded for user ${user.email}. Invoice: ${invoice.id}`, targetType: "Payment", targetId: user._id, level: "info", metadata: { invoiceId: invoice.id, amount: invoice.amount_paid, currency: invoice.currency }, }) } break } case "invoice.payment_failed": { const invoice = event.data.object as Stripe.Invoice const customerId = invoice.customer as string const user = await User.findOne({ stripeCustomerId: customerId }) if (user) { await adminLogger({ adminId: user._id, adminEmail: user.email, action: "STRIPE_PAYMENT_FAILED", message: `Payment failed for user ${user.email}. Invoice: ${invoice.id}`, targetType: "Payment", targetId: user._id, level: "error", metadata: { invoiceId: invoice.id, amount: invoice.amount_due, currency: invoice.currency, reason: invoice.last_payment_error?.message, }, }) } break } default: console.warn(`Unhandled event type ${event.type}`) } return NextResponse.json({ received: true }, { status: 200 }) } catch (error: any) { console.error("Stripe webhook handler error:", error) return NextResponse.json({ message: "Webhook handler failed" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/adobe-express/webhook/route.ts" isEdit="true" import { type NextRequest, NextResponse } from "next/server" import { adminLogger } from "@/lib/admin-logger" export async function POST(req: NextRequest) { try { const payload = await req.json() const eventType = req.headers.get("x-adobe-event-type") || "unknown" const eventId = req.headers.get("x-adobe-event-id") || "unknown" console.log(`Received Adobe Express webhook: ${eventType} (ID: ${eventId})`) console.log("Payload:", JSON.stringify(payload, null, 2)) // Log the webhook event for auditing await adminLogger({ adminId: null, // No specific admin user for webhooks adminEmail: "system@brandguardian.com", // System email for webhook logs action: `ADOBE_EXPRESS_WEBHOOK_${eventType.toUpperCase()}`, message: `Adobe Express webhook received: ${eventType}`, targetType: "AdobeExpressWebhook", targetId: null, // No specific document ID level: "info", metadata: { eventType, eventId, payload }, }) // Process the webhook payload based on eventType // Example: if eventType is 'asset.saved', you might update an analysis or user's asset list // This part would depend on your specific integration needs. if (eventType === "asset.saved") { const assetId = payload.asset?.id const userId = payload.user?.id // Adobe user ID, map to your internal user console.log(`Asset saved: ${assetId} by user ${userId}`) // Further logic to handle the saved asset, e.g., trigger an analysis } return NextResponse.json({ success: true, message: "Webhook received and processed." }, { status: 200 }) } catch (error: any) { console.error("Error processing Adobe Express webhook:", error) return NextResponse.json({ success: false, message: error.message || "Internal server error." }, { status: 500 }) } } [V0_FILE]typescript:file="lib/rate-limit.ts" isEdit="true" import { LRUCache } from "lru-cache" import type { NextResponse } from "next/server" type Options = { uniqueTokenPerInterval?: number interval?: number } export function rateLimit(options?: Options) { const tokenCache = new LRUCache({ max: options?.uniqueTokenPerInterval || 500, ttl: options?.interval || 60000, }) return { check: (res: NextResponse, limit: number, token: string) => { const tokenCount = (tokenCache.get(token) as number[]) || [0] if (tokenCount[0] === 0) { tokenCache.set(token, tokenCount) } tokenCount[0]++ const currentUsage = tokenCount[0] const isRateLimited = currentUsage >= limit res.headers.set("X-RateLimit-Limit", String(limit)) res.headers.set("X-RateLimit-Remaining", String(Math.max(0, limit - currentUsage))) return !isRateLimited }, } } [V0_FILE]typescript:file="lib/cache.ts" isFixed="true" isEdit="true" isQuickEdit="true" import { LRUCache } from "lru-cache" interface CacheItem<T> { value: T expiresAt: number } const cache = new LRUCache<string, CacheItem<any>>({ max: 500, // Max number of items in cache ttl: 1000 * 60 * 5, // Default TTL: 5 minutes updateAgeOnGet: false, // Do not update TTL on get }) export const setCache = <T>(key: string, value: T, ttl?: number) => {\ const expiresAt = Date.now() + (ttl || cache.ttl) cache.set(key, { value, expiresAt }) } export const getCache = <T>(key: string): T | undefined => {\ const item = cache.get(key) if (item && item.expiresAt > Date.now()) {\ return item.value as T } // If item is expired or not found, delete it from cache if (item) { cache.delete(key) } return undefined } export const deleteCache = (key: string) => { cache.delete(key) } export const clearCache = () => { cache.clear() }\ [V0_FILE]typescript:file="lib/utils.ts" isEdit="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } export function formatCurrency(amount: number, currency = "usd") { return new Intl.NumberFormat("en-US", { style: "currency", currency: currency, }).format(amount / 100) // Assuming amount is in cents } export function formatDate(dateString: string | Date): string { const date = new Date(dateString) return new Intl.DateTimeFormat("en-US", { year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false, }).format(date) } [V0_FILE]json:file="tsconfig.json" isEdit="true" { "compilerOptions": { "target": "es2017", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "plugins": [ { "name": "next" } ], "paths": { "@/*": ["./*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] } [V0_FILE]javascript:file="tailwind.config.js" isEdit="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", 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))", }, sidebar: { DEFAULT: "hsl(var(--sidebar-background))", foreground: "hsl(var(--sidebar-foreground))", primary: { DEFAULT: "hsl(var(--sidebar-primary))", foreground: "hsl(var(--sidebar-primary-foreground))", }, accent: { DEFAULT: "hsl(var(--sidebar-accent))", foreground: "hsl(var(--sidebar-accent-foreground))", }, border: "hsl(var(--sidebar-border))", ring: "hsl(var(--sidebar-ring))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]css:file="app/globals.css" isEdit="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; --primary: 240 5.9% 10%; --primary-foreground: 0 0% 98%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 240 4.8% 95.9%; --accent-foreground: 240 5.9% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 240 5.9% 10%; --radius: 0.5rem; /* Sidebar specific variables */ --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } .dark { --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; --popover: 240 10% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 240 5.9% 10%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --accent: 240 3.7% 15.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 0 0% 98%; /* Sidebar specific variables for dark mode */ --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 0 0% 98%; --sidebar-primary-foreground: 240 5.9% 10%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]javascript:file="next.config.mjs" isFixed="true" isEdit="true" isQuickEdit="true" /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, swcMinify: true, eslint: { ignoreDuringBuilds: true, }, typescript: { ignoreBuildErrors: true, }, images: { remotePatterns: [ { protocol: "https", hostname: "res.cloudinary.com", port: "", pathname: "/your-cloud-name/**", // Replace with your Cloudinary cloud name }, { protocol: "https", hostname: "avatars.githubusercontent.com", }, { protocol: "https", hostname: "lh3.googleusercontent.com", }, { protocol: "https", hostname: "via.placeholder.com", // For placeholder images }, ], unoptimized: true, }, experimental: { serverActions: true, serverComponentsExternalPackages: ["mongoose"], }, }; export default nextConfig; [V0_FILE]javascript:file="postcss.config.js" isEdit="true" module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, } [V0_FILE]json:file="public/manifest.json" isEdit="true" { "name": "Brand Guardian AI", "short_name": "BrandGuardianAI", "description": "AI-powered brand compliance and design analysis tool.", "start_url": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#000000", "icons": [ { "src": "/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" } ] } [V0_FILE]json:file="public/icons/manifest.json" isEdit="true" { "name": "Brand Guardian AI", "short_name": "BrandGuardianAI", "description": "AI-powered brand compliance and design analysis tool.", "start_url": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#000000", "icons": [ { "src": "/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" } ] } [V0_FILE]typescript:file="types/global.d.ts" isEdit="true" import type { Mongoose } from "mongoose" declare global { var mongoose: { conn: Mongoose | null promise: Promise<Mongoose> | null } } [V0_FILE]typescript:file="types/next-auth.d.ts" isEdit="true" import type { DefaultSession, DefaultUser } from "next-auth" import type { DefaultJWT } from "next-auth/jwt" declare module "next-auth" { interface Session { user: { id: string role: "user" | "admin" plan: "free" | "pro" | "enterprise" analysisLimit: number analysesThisMonth: number stripeCustomerId?: string } & DefaultSession["user"] } interface User extends DefaultUser { role: "user" | "admin" plan: "free" | "pro" | "enterprise" analysisLimit: number analysesThisMonth: number stripeCustomerId?: string } } declare module "next-auth/jwt" { interface JWT extends DefaultJWT { id: string role: "user" | "admin" plan: "free" | "pro" | "enterprise" analysisLimit: number analysesThisMonth: number stripeCustomerId?: string } } [V0_FILE]javascript:file="__tests__/api/analyses.test.js" isFixed="true" isEdit="true" isQuickEdit="true" import { GET, POST } from "../../app/api/analyses/route" import connectToDatabase from "../../lib/mongodb" import Analysis from "../../models/Analysis" import { getServerSession } from "next-auth" import { ObjectId } from "mongodb" import jest from "jest" // Mock external dependencies jest.mock("next-auth") jest.mock("../../lib/mongodb") jest.mock("../../models/Analysis") jest.mock("../../models/User") jest.mock("../../models/BrandProfile") describe("/api/analyses", () => { beforeEach(() => { jest.clearAllMocks() connectToDatabase.mockResolvedValue(true) }) describe("GET /api/analyses", () => { it("should return 401 if unauthorized", async () => { getServerSession.mockResolvedValue(null) const req = new Request("http://localhost/api/analyses", { method: "GET", }) const res = await GET(req) expect(res.status).toBe(401) await expect(res.json()).resolves.toEqual({ success: false, message: "Unauthorized" }) }) it("should return analyses for the authenticated user", async () => { const mockUserId = new ObjectId() getServerSession.mockResolvedValue({ user: { id: mockUserId.toString() } }) Analysis.find.mockReturnValue({ sort: jest.fn().mockReturnThis(), lean: jest.fn().mockResolvedValue([{ _id: "analysis1", userId: mockUserId }]), }) const req = new Request("http://localhost/api/analyses", { method: "GET", }) const res = await GET(req) expect(res.status).toBe(200) await expect(res.json()).resolves.toEqual({ success: true, data: [{ _id: "analysis1", userId: mockUserId }] }) expect(Analysis.find).toHaveBeenCalledWith({ userId: mockUserId }) }) it("should handle database errors", async () => { const mockUserId = new ObjectId() getServerSession.mockResolvedValue({ user: { id: mockUserId.toString() } }) Analysis.find.mockReturnValue({ sort: jest.fn().mockReturnThis(), lean: jest.fn().mockRejectedValue(new Error("DB Error")), }) const req = new Request("http://localhost/api/analyses", { method: "GET", }) const res = await GET(req) expect(res.status).toBe(500) await expect(res.json()).resolves.toEqual({ success: false, message: "DB Error" }) }) }) describe("POST /api/analyses", () => { it("should return 401 if unauthorized", async () => { getServerSession.mockResolvedValue(null) const req = new Request("http://localhost/api/analyses", { method: "POST", body: JSON.stringify({ imageUrl: "test.jpg" }), headers: { "Content-Type": "application/json" }, }) const res = await POST(req) expect(res.status).toBe(401) await expect(res.json()).resolves.toEqual({ success: false, message: "Unauthorized" }) }) it("should create a new analysis", async () => { const mockUserId = new ObjectId() getServerSession.mockResolvedValue({ user: { id: mockUserId.toString(), email: "test@example.com" } }) Analysis.create.mockResolvedValue({ _id: "newAnalysis", userId: mockUserId, status: "pending" }) const req = new Request("http://localhost/api/analyses", { method: "POST", body: JSON.stringify({ imageUrl: "test.jpg", textContent: "test text" }), headers: { "Content-Type": "application/json" }, }) const res = await POST(req) expect(res.status).toBe(201) await expect(res.json()).resolves.toEqual({ success: true, data: { _id: "newAnalysis", userId: mockUserId, status: "pending" }, }) expect(Analysis.create).toHaveBeenCalledWith({ imageUrl: "test.jpg", textContent: "test text", userId: mockUserId, status: "pending", }) }) it("should handle database errors during creation", async () => { const mockUserId = new ObjectId() getServerSession.mockResolvedValue({ user: { id: mockUserId.toString(), email: "test@example.com" } }) Analysis.create.mockRejectedValue(new Error("Creation Error")) const req = new Request("http://localhost/api/analyses", { method: "POST", body: JSON.stringify({ imageUrl: "test.jpg" }), headers: { "Content-Type": "application/json" }, }) const res = await POST(req) expect(res.status).toBe(500) await expect(res.json()).resolves.toEqual({ success: false, message: "Creation Error" }) }) }) }) [V0_FILE]javascript:file="__tests__/components/batch-processor.test.jsx" isFixed="true" isEdit="true" isQuickEdit="true" import { render, screen, fireEvent, waitFor } from "@testing-library/react" import "@testing-library/jest-dom" import BatchProcessor from "../../components/premium/batch-processor" // Adjust path as necessary import jest from "jest" // Mock next-auth and useToast jest.mock("next-auth/react", () => ({ useSession: jest.fn(), })) jest.mock("../../components/ui/use-toast", () => ({ useToast: jest.fn(), })) // Mock global fetch global.fetch = jest.fn() describe("BatchProcessor", () => { const mockToast = jest.fn() beforeEach(() => { jest.fn().mockReturnValue({ toast: mockToast }) jest.fn().mockReturnValue({ data: { user: { id: "user123", plan: "pro" } }, status: "authenticated" }) jest.clearAllMocks() }) it("renders correctly for a premium user", () => { render(<BatchProcessor />) expect(screen.getByText("Batch Process Designs")).toBeInTheDocument() expect(screen.getByText("Upload multiple images for bulk analysis.")).toBeInTheDocument() expect(screen.getByRole("button", { name: /Add Files/i })).toBeInTheDocument() expect(screen.getByRole("button", { name: /Start Batch Analysis/i })).toBeInTheDocument() }) it("allows adding and removing files", () => { render(<BatchProcessor />) const addFilesButton = screen.getByRole("button", { name: /Add Files/i }) const fileInput = screen.getByLabelText(/hidden-file-input/i) // Simulate adding files const file1 = new File(["dummy content 1"], "image1.png", { type: "image/png" }) const file2 = new File(["dummy content 2"], "image2.jpg", { type: "image/jpeg" }) fireEvent.change(fileInput, { target: { files: [file1, file2] } }) expect(screen.getByText("image1.png")).toBeInTheDocument() expect(screen.getByText("image2.jpg")).toBeInTheDocument() expect(screen.getAllByRole("button", { name: /Remove/i }).length).toBe(2) // Simulate removing a file fireEvent.click(screen.getAllByRole("button", { name: /Remove/i })[0]) expect(screen.queryByText("image1.png")).not.toBeInTheDocument() expect(screen.getByText("image2.jpg")).toBeInTheDocument() }) it("shows error toast if no files are selected on analysis start", () => { render(<BatchProcessor />) fireEvent.click(screen.getByRole("button", { name: /Start Batch Analysis/i })) expect(mockToast).toHaveBeenCalledWith( expect.objectContaining({ title: "No files selected", description: "Please add images to process.", variant: "destructive", }), ) }) it("handles successful batch analysis", async () => { global.fetch.mockResolvedValueOnce({ ok: true, json: async () => ({ success: true, message: "Batch processing initiated." }), }) render(<BatchProcessor />) const fileInput = screen.getByLabelText(/hidden-file-input/i) const file = new File(["dummy content"], "test.png", { type: "image/png" }) fireEvent.change(fileInput, { target: { files: [file] } }) fireEvent.click(screen.getByRole("button", { name: /Start Batch Analysis/i })) await waitFor(() => { expect(global.fetch).toHaveBeenCalledTimes(1) expect(global.fetch).toHaveBeenCalledWith( "/api/premium/batch", expect.objectContaining({ method: "POST", body: JSON.stringify({ items: [{ imageUrl: expect.any(String), textContent: undefined, brandProfileId: undefined }], }), }), ) expect(mockToast).toHaveBeenCalledWith( expect.objectContaining({ title: "Batch Analysis Started", description: "Your designs are being processed in the background.", }), ) expect(screen.getByRole("button", { name: /Start Batch Analysis/i })).not.toBeDisabled() expect(screen.queryByText("test.png")).not.toBeInTheDocument() // Files should be cleared }) }) it("handles failed batch analysis", async () => { global.fetch.mockResolvedValueOnce({ ok: false, json: async () => ({ success: false, message: "Server error." }), }) render(<BatchProcessor />) const fileInput = screen.getByLabelText(/hidden-file-input/i) const file = new File(["dummy content"], "test.png", { type: "image/png" }) fireEvent.change(fileInput, { target: { files: [file] } }) fireEvent.click(screen.getByRole("button", { name: /Start Batch Analysis/i })) await waitFor(() => { expect(global.fetch).toHaveBeenCalledTimes(1) expect(mockToast).toHaveBeenCalledWith( expect.objectContaining({ title: "Batch Analysis Failed", description: "Server error.", variant: "destructive", }), ) expect(screen.getByRole("button", { name: /Start Batch Analysis/i })).not.toBeDisabled() expect(screen.getByText("test.png")).toBeInTheDocument() // Files should not be cleared on error }) }) it("disables button while processing", async () => { global.fetch.mockImplementationOnce( () => new Promise((resolve) => setTimeout(() => resolve({ ok: true, json: async () => ({ success: true }) }), 500)), ) render(<BatchProcessor />) const fileInput = screen.getByLabelText(/hidden-file-input/i) const file = new File(["dummy content"], "test.png", { type: "image/png" }) fireEvent.change(fileInput, { target: { files: [file] } }) const startButton = screen.getByRole("button", { name: /Start Batch Analysis/i }) fireEvent.click(startButton) expect(startButton).toBeDisabled() expect(startButton).toHaveTextContent(/Processing.../i) await waitFor(() => { expect(startButton).not.toBeDisabled() expect(startButton).toHaveTextContent(/Start Batch Analysis/i) }) }) }) [V0_FILE]javascript:file="__tests__/lib/rate-limit.test.js" isFixed="true" isEdit="true" isQuickEdit="true" import { RateLimiter, apiRateLimit, authRateLimit, uploadRateLimit, analysisRateLimit, withRateLimit, rateLimit, } from "../../lib/rate-limit" import { createMocks } from "node-mocks-http" import { NextResponse } from "next/server" import jest from "jest" // Declare jest variable // Mock timers for testing jest.useFakeTimers() describe("RateLimiter", () => { let rateLimiter beforeEach(() => { rateLimiter = new RateLimiter({ windowMs: 60000, // 1 minute maxRequests: 5, }) jest.clearAllTimers() }) afterEach(() => { jest.runOnlyPendingTimers() jest.useRealTimers() }) describe("Basic rate limiting", () => { it("should allow requests within limit", async () => { const { req } = createMocks({ method: "GET", headers: { "x-real-ip": "192.168.1.1" }, }) for (let i = 0; i < 5; i++) { const result = await rateLimiter.isAllowed(req) expect(result.allowed).toBe(true) expect(result.remaining).toBe(4 - i) expect(result.total).toBe(5) } }) it("should block requests exceeding limit", async () => { const { req } = createMocks({ method: "GET", headers: { "x-real-ip": "192.168.1.1" }, }) // Use up all allowed requests for (let i = 0; i < 5; i++) { await rateLimiter.isAllowed(req) } // Next request should be blocked const result = await rateLimiter.isAllowed(req) expect(result.allowed).toBe(false) }) it("should reset after time window", async () => { const { req } = createMocks({ method: "GET", headers: { "x-real-ip": "192.168.1.1" }, }) // Use up all requests for (let i = 0; i < 5; i++) { await rateLimiter.isAllowed(req) } // Should be blocked let result = await rateLimiter.isAllowed(req) expect(result.allowed).toBe(false) // Fast forward past window jest.advanceTimersByTime(61000) // Should be allowed again result = await rateLimiter.isAllowed(req) expect(result.allowed).toBe(true) expect(result.remaining).toBe(4) }) it("should handle different IP addresses separately", async () => { const { req: req1 } = createMocks({ method: "GET", headers: { "x-real-ip": "192.168.1.1" }, }) const { req: req2 } = createMocks({ method: "GET", headers: { "x-real-ip": "192.168.1.2" }, }) // Use up requests for first IP for (let i = 0; i < 5; i++) { await rateLimiter.isAllowed(req1) } // First IP should be blocked const result1 = await rateLimiter.isAllowed(req1) expect(result1.allowed).toBe(false) // Second IP should still be allowed const result2 = await rateLimiter.isAllowed(req2) expect(result2.allowed).toBe(true) expect(result2.remaining).toBe(4) }) }) describe("IP address detection", () => { it("should use x-forwarded-for header", async () => { const { req } = createMocks({ method: "GET", headers: { "x-forwarded-for": "203.0.113.1, 192.168.1.1" }, }) const result = await rateLimiter.isAllowed(req) expect(result.allowed).toBe(true) }) it("should fallback to x-real-ip header", async () => { const { req } = createMocks({ method: "GET", headers: { "x-real-ip": "203.0.113.1" }, }) const result = await rateLimiter.isAllowed(req) expect(result.allowed).toBe(true) }) it("should use unknown for missing IP", async () => { const { req } = createMocks({ method: "GET", headers: {}, }) const result = await rateLimiter.isAllowed(req) expect(result.allowed).toBe(true) }) }) describe("Custom key generator", () => { it("should use custom key generator", async () => { const customRateLimiter = new RateLimiter({ windowMs: 60000, maxRequests: 3, keyGenerator: (req) => `user:${req.headers.get("user-id")}`, }) const { req } = createMocks({ method: "GET", headers: { "user-id": "user123" }, }) for (let i = 0; i < 3; i++) { const result = await customRateLimiter.isAllowed(req) expect(result.allowed).toBe(true) } const result = await customRateLimiter.isAllowed(req) expect(result.allowed).toBe(false) }) }) describe("Cleanup functionality", () => { it("should clean up expired entries", async () => { const { req } = createMocks({ method: "GET", headers: { "x-real-ip": "192.168.1.1" }, }) // Make some requests await rateLimiter.isAllowed(req) await rateLimiter.isAllowed(req) // Fast forward past cleanup interval jest.advanceTimersByTime(61000) // Trigger cleanup by making another request const result = await rateLimiter.isAllowed(req) expect(result.allowed).toBe(true) expect(result.remaining).toBe(4) // Should be reset }) }) describe("Reset functionality", () => { it("should reset rate limit for specific request", async () => { const { req } = createMocks({ method: "GET", headers: { "x-real-ip": "192.168.1.1" }, }) // Use up all requests for (let i = 0; i < 5; i++) { await rateLimiter.isAllowed(req) } // Should be blocked let result = await rateLimiter.isAllowed(req) expect(result.allowed).toBe(false) // Reset await rateLimiter.reset(req) // Should be allowed again result = await rateLimiter.isAllowed(req) expect(result.allowed).toBe(true) expect(result.remaining).toBe(4) }) }) describe("Error handling", () => { it("should handle malformed headers gracefully", async () => { const rateLimiterInstance = new RateLimiter({ windowMs: 60000, maxRequests: 5 }) const { req } = createMocks({ method: "GET", headers: { "x-forwarded-for": null }, }) const result = await rateLimiterInstance.isAllowed(req) expect(result.allowed).toBe(true) }) it("should handle concurrent requests correctly", async () => { const rateLimiterInstance = new RateLimiter({ windowMs: 60000, maxRequests: 5 }) const { req } = createMocks({ method: "GET", headers: { "x-real-ip": "192.168.1.1" }, }) // Make concurrent requests const promises = Array(10) .fill() .map(() => rateLimiterInstance.isAllowed(req)) const results = await Promise.all(promises) const allowedCount = results.filter((r) => r.allowed).length const blockedCount = results.filter((r) => !r.allowed).length expect(allowedCount).toBe(5) // Only 5 should be allowed expect(blockedCount).toBe(5) // 5 should be blocked }) }) describe("Memory management", () => { it("should not leak memory with many different IPs", async () => { const initialMemory = process.memoryUsage().heapUsed const rateLimiterInstance = new RateLimiter({ windowMs: 60000, maxRequests: 5 }) // Simulate many different IPs for (let i = 0; i < 1000; i++) { const { req } = createMocks({ method: "GET", headers: { "x-real-ip": `192.168.1.${i % 255}` }, }) await rateLimiterInstance.isAllowed(req) } // Fast forward to trigger cleanup jest.advanceTimersByTime(61000) const finalMemory = process.memoryUsage().heapUsed const memoryIncrease = finalMemory - initialMemory // Memory increase should be reasonable (less than 10MB) expect(memoryIncrease).toBeLessThan(10 * 1024 * 1024) }) }) }) describe("Pre-configured rate limiters", () => { it("should have correct configuration for API rate limiter", () => { expect(apiRateLimit).toBeInstanceOf(RateLimiter) }) it("should have correct configuration for auth rate limiter", () => { expect(authRateLimit).toBeInstanceOf(RateLimiter) }) it("should have correct configuration for upload rate limiter", () => { expect(uploadRateLimit).toBeInstanceOf(RateLimiter) }) it("should have correct configuration for analysis rate limiter", () => { expect(analysisRateLimit).toBeInstanceOf(RateLimiter) }) }) describe("withRateLimit utility", () => { it("should return null when rate limit not exceeded", async () => { const { req } = createMocks({ method: "GET", headers: { "x-real-ip": "192.168.1.1" }, }) const result = await withRateLimit(req, new RateLimiter({ windowMs: 60000, maxRequests: 5 })) expect(result).toBeNull() }) it("should return 429 response when rate limit exceeded", async () => { const rateLimiter = new RateLimiter({ windowMs: 60000, maxRequests: 1 }) const { req } = createMocks({ method: "GET", headers: { "x-real-ip": "192.168.1.1" }, }) // Use up the single allowed request await rateLimiter.isAllowed(req) const result = await withRateLimit(req, rateLimiter) expect(result).toBeInstanceOf(Response) expect(result.status).toBe(429) const data = await result.json() expect(data.error).toBe("Rate limit exceeded") expect(data.retryAfter).toBeGreaterThan(0) }) it("should include rate limit headers in response", async () => { const rateLimiter = new RateLimiter({ windowMs: 60000, maxRequests: 1 }) const { req } = createMocks({ method: "GET", headers: { "x-real-ip": "192.168.1.1" }, }) // Use up the single allowed request await rateLimiter.isAllowed(req) const result = await withRateLimit(req, rateLimiter) expect(result.headers.get("X-RateLimit-Limit")).toBe("1") expect(result.headers.get("X-RateLimit-Remaining")).toBe("0") expect(result.headers.get("X-RateLimit-Reset")).toBeTruthy() expect(result.headers.get("Retry-After")).toBeTruthy() }) it("should use custom onExceeded callback", async () => { const rateLimiter = new RateLimiter({ windowMs: 60000, maxRequests: 1 }) const { req } = createMocks({ method: "GET", headers: { "x-real-ip": "192.168.1.1" }, }) // Use up the single allowed request await rateLimiter.isAllowed(req) const customResponse = new Response("Custom rate limit message", { status: 429 }) const onExceeded = jest.fn(() => customResponse) const result = await withRateLimit(req, rateLimiter, onExceeded) expect(onExceeded).toHaveBeenCalled() expect(result).toBe(customResponse) }) }) describe("rateLimit", () => { let mockResponse let rateLimiter beforeEach(() => { // Mock NextResponse.json to capture headers mockResponse = new NextResponse() rateLimiter = rateLimit({ interval: 1000, uniqueTokenPerInterval: 10 }) // 1 second interval, max 10 unique tokens }) it("should allow requests within the limit", () => { const token = "user1" const limit = 5 for (let i = 0; i < limit; i++) { const allowed = rateLimiter.check(mockResponse, limit, token) expect(allowed).toBe(true) expect(mockResponse.headers.get("X-RateLimit-Remaining")).toBe(String(limit - 1 - i)) } }) it("should block requests exceeding the limit", () => { const token = "user1" const limit = 3 // First 3 requests should be allowed for (let i = 0; i < limit; i++) { expect(rateLimiter.check(mockResponse, limit, token)).toBe(true) } // 4th request should be blocked const blocked = rateLimiter.check(mockResponse, limit, token) expect(blocked).toBe(false) expect(mockResponse.headers.get("X-RateLimit-Remaining")).toBe("0") }) it("should reset the limit after the interval", async () => { const token = "user2" const limit = 2 expect(rateLimiter.check(mockResponse, limit, token)).toBe(true) expect(rateLimiter.check(mockResponse, limit, token)).toBe(true) expect(rateLimiter.check(mockResponse, limit, token)).toBe(false) // Blocked // Wait for the interval to pass await new Promise((resolve) => setTimeout(resolve, 1000)) // After interval, it should be allowed again const allowedAfterReset = rateLimiter.check(mockResponse, limit, token) expect(allowedAfterReset).toBe(true) expect(mockResponse.headers.get("X-RateLimit-Remaining")).toBe(String(limit - 1)) }) it("should handle different tokens independently", () => { const token1 = "userA" const token2 = "userB" const limit = 1 expect(rateLimiter.check(mockResponse, limit, token1)).toBe(true) expect(rateLimiter.check(mockResponse, limit, token1)).toBe(false) // token1 blocked expect(rateLimiter.check(mockResponse, limit, token2)).toBe(true) // token2 still allowed expect(rateLimiter.check(mockResponse, limit, token2)).toBe(false) // token2 blocked }) it("should set X-RateLimit-Limit header correctly", () => { const token = "user3" const limit = 7 rateLimiter.check(mockResponse, limit, token) expect(mockResponse.headers.get("X-RateLimit-Limit")).toBe(String(limit)) }) it("should handle default options if none are provided", () => { const defaultRateLimiter = rateLimit() const token = "defaultUser" const defaultLimit = 500 // Default uniqueTokenPerInterval for (let i = 0; i < defaultLimit; i++) { expect(defaultRateLimiter.check(mockResponse, defaultLimit, token)).toBe(true) } expect(defaultRateLimiter.check(mockResponse, defaultLimit, token)).toBe(false) }) }) [V0_FILE]javascript:file="jest.setup.js" isEdit="true" isTerminated="true" // Optional: configure or extend Jest's setup here // For example, if you're using @testing-library/jest-dom import "@testing-library/jest-dom" // Mock the `next/navigation` module for client components that use `useRouter`, `useSearchParams`, etc. jest.mock("next/navigation", () => ({ useRouter: () => ({ push: jest.fn(), replace: jest.fn(), reload: jest.fn(), back: jest.fn(), prefetch: jest.fn(), beforePopState: jest.fn(), events: { on: jest.fn(), off: jest.fn(), emit: jest.fn(), }, isFallback: false, }), usePathname: () => "/", useSearchParams: () => new URLSearchParams(), redirect: jest.fn(), })) // Mock `next/headers` for server components that use `cookies` or `headers` jest.mock("next/headers", () => ({ cookies: () => ({ get: jest.fn(), set: jest.fn(), delete: jest.fn(), }), headers: () => ({ get: jest.fn(), }), })) // Mock `next-auth/react` for client components jest.mock("next-auth/react", () => ({ useSession: jest.fn(() => ({ data: null, status: "unauthenticated" })), signIn: jest.fn(), signOut: jest.fn(), getSession: jest.fn(() => Promise.resolve(null)), // Mock the `update` function if you use it // update: jest.fn((data) => Promise.resolve({ user: { ...data.user } })), })) // Mock `next-auth` for server components (getServerSession) jest.mock("next-auth", () => ({ getServerSession: jest.fn(() => Promise.resolve(null)), })) // Mock `lucide-react` icons if you use them extensively and want to avoid rendering them in tests // For example, if you have a lot of tests that don't care about the actual icon SVG jest.mock("lucide-react", () => { const originalModule = jest.requireActual("lucide-react") const mockIcons = {} for (const key in originalModule) { if (key.endsWith("Icon") || key.endsWith("Svg")) { // Adjust based on your icon naming convention mockIcons[key] = jest.fn(() => <svg data-testid={`${key}-icon`} />) } else { mockIcons[key] = originalModule[key] } } return mockIcons }) // Mock any other global objects or APIs not available in Node.js environment // For example, if you use `URL</article></body></html>
)) TableHead.displayName = "TableHead" const TableCell = React.forwardRef< HTMLTableCellElement, React.TdHTMLAttributes >(({ className, ...props }, ref) => (	)) TableCell.displayName = "TableCell" const TableCaption = React.forwardRef< HTMLTableCaptionElement, React.HTMLAttributes >(({ className, ...props }, ref) => (