[V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import { Inter } from "next/font/google" import "./globals.css" import { Sidebar } from "@/components/sidebar" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return (

{children}

) } [V0_FILE]typescriptreact:file="app/page.tsx" import { DashboardHeader } from "@/components/dashboard-header" import { ZapOverview } from "@/components/zap-overview" import { HealthSummary } from "@/components/health-summary" import { RecentActivity } from "@/components/recent-activity" import { QuickActions } from "@/components/quick-actions" export default function Dashboard() { return (

) } [V0_FILE]typescriptreact:file="app/zaps/[id]/page.tsx" "use client" import { useParams } from "next/navigation" import { Button } from "@/components/ui/button" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { ZapDetailHeader } from "@/components/zap-detail-header" import { ZapPerformanceChart } from "@/components/zap-performance-chart" import { ZapExecutionHistory } from "@/components/zap-execution-history" import { ZapResourceUsage } from "@/components/zap-resource-usage" import { ZapSettings } from "@/components/zap-settings" import { ArrowLeft } from "lucide-react" import Link from "next/link" export default function ZapDetails() { const { id } = useParams() return (

Zap Details

Performance History Resources Settings

) } [V0_FILE]typescriptreact:file="app/recommendations/page.tsx" import { RecommendationHeader } from "@/components/recommendation-header" import { RecommendationList } from "@/components/recommendation-list" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" export default function Recommendations() { return (

All Performance Reliability Cost

) } [V0_FILE]typescriptreact:file="app/troubleshoot/page.tsx" import { TroubleshootHeader } from "@/components/troubleshoot-header" import { TroubleshootWizards } from "@/components/troubleshoot-wizards" import { CommonIssues } from "@/components/common-issues" export default function Troubleshoot() { return (

) } [V0_FILE]typescriptreact:file="app/troubleshoot/[id]/page.tsx" "use client" import { useParams, useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { ArrowLeft, ArrowRight, CheckCircle } from "lucide-react" import { useState } from "react" import { TroubleshootStep } from "@/components/troubleshoot-step" import { wizardSteps } from "@/data/wizard-steps" import Link from "next/link" export default function TroubleshootWizard() { const { id } = useParams() const router = useRouter() const [currentStep, setCurrentStep] = useState(0) const steps = wizardSteps[id as string] || [] const isLastStep = currentStep === steps.length - 1 const handleNext = () => { if (isLastStep) { router.push("/troubleshoot") } else { setCurrentStep((prev) => prev + 1) } } const handleBack = () => { if (currentStep === 0) { router.push("/troubleshoot") } else { setCurrentStep((prev) => prev - 1) } } return (

Troubleshoot Wizard

{steps[currentStep]?.title || "Troubleshooting"} Step {currentStep + 1} of {steps.length} {steps[currentStep] && }

) } [V0_FILE]typescriptreact:file="components/sidebar.tsx" "use client" import Link from "next/link" import { usePathname } from "next/navigation" import { cn } from "@/lib/utils" import { BarChart3, Gauge, Home, LifeBuoy, LogOut, Settings, Zap } from "lucide-react" import { Button } from "@/components/ui/button" const navItems = [ { name: "Dashboard", href: "/", icon: Home, }, { name: "My Zaps", href: "/zaps", icon: Zap, }, { name: "Recommendations", href: "/recommendations", icon: Gauge, }, { name: "Troubleshoot", href: "/troubleshoot", icon: LifeBuoy, }, { name: "Analytics", href: "/analytics", icon: BarChart3, }, { name: "Settings", href: "/settings", icon: Settings, }, ] export function Sidebar() { const pathname = usePathname() return (

Zapier

John Doe

john@example.com

) } [V0_FILE]typescriptreact:file="components/dashboard-header.tsx" "use client" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { Calendar } from "@/components/ui/calendar" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { CalendarIcon, ChevronDown, Plus } from "lucide-react" import { useState } from "react" import { format } from "date-fns" export function DashboardHeader() { const [date, setDate] = useState(new Date()) return (

Dashboard

Monitor and optimize your Zaps

New Zap New Folder Import Zap

) } [V0_FILE]typescriptreact:file="components/health-summary.tsx" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { AlertCircle, CheckCircle, Clock } from "lucide-react" export function HealthSummary() { return ( Zap Health Summary Overview of your Zaps performance

Healthy

Delayed

Failed

) } [V0_FILE]typescriptreact:file="components/zap-overview.tsx" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { AlertCircle, ArrowRight, CheckCircle, Clock, ExternalLink } from "lucide-react" import Link from "next/link" const zapData = [ { id: "1", name: "Gmail to Slack Notifications", status: "healthy", runs: 245, successRate: 100, avgTime: "1.2s", }, { id: "2", name: "Twitter Mentions to Trello", status: "delayed", runs: 89, successRate: 92, avgTime: "3.8s", }, { id: "3", name: "New Shopify Orders to Google Sheets", status: "healthy", runs: 156, successRate: 99, avgTime: "2.1s", }, { id: "4", name: "Facebook Leads to Mailchimp", status: "failed", runs: 32, successRate: 68, avgTime: "4.5s", }, { id: "5", name: "Stripe Payments to QuickBooks", status: "healthy", runs: 178, successRate: 100, avgTime: "1.8s", }, ] export function ZapOverview() { return (

Your Zaps Performance overview of your top Zaps

Name

Status

Runs

Success

Avg. Time

{zapData.map((zap) => (

{zap.name}

{zap.status === "healthy" && ( Healthy )} {zap.status === "delayed" && ( Delayed )} {zap.status === "failed" && ( Failed )}

{zap.runs}

{zap.successRate}%

{zap.avgTime}

))}

) } [V0_FILE]typescriptreact:file="components/quick-actions.tsx" import { cn } from "@/lib/utils" import type React from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { AlertTriangle, ArrowUpRight, Gauge, LifeBuoy, Zap } from "lucide-react" import Link from "next/link" export function QuickActions() { return ( Quick Actions Common tasks and shortcuts ) } function Badge({ className, children, ...props }: React.HTMLAttributes) { return (

{children}

) } [V0_FILE]typescriptreact:file="components/recent-activity.tsx" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { AlertCircle, CheckCircle, Clock } from "lucide-react" const activities = [ { id: "1", zapName: "Gmail to Slack", event: "Executed successfully", time: "2 minutes ago", status: "success", }, { id: "2", zapName: "Twitter to Trello", event: "Execution delayed", time: "15 minutes ago", status: "warning", }, { id: "3", zapName: "Facebook Leads to Mailchimp", event: "Execution failed", time: "32 minutes ago", status: "error", }, { id: "4", zapName: "Shopify to Google Sheets", event: "Executed successfully", time: "1 hour ago", status: "success", }, { id: "5", zapName: "Stripe to QuickBooks", event: "Executed successfully", time: "2 hours ago", status: "success", }, ] export function RecentActivity() { return ( Recent Activity Latest events from your Zaps

{activities.map((activity) => (

{activity.status === "success" && } {activity.status === "warning" && } {activity.status === "error" && }

{activity.zapName}

{activity.event}

{activity.time}

))}

) } [V0_FILE]typescriptreact:file="components/zap-detail-header.tsx" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Switch } from "@/components/ui/switch" import { AlertCircle, CheckCircle, Clock, Edit, ExternalLink, MoreHorizontal, Play } from "lucide-react" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" const zapDetails = { "1": { name: "Gmail to Slack Notifications", status: "healthy", lastRun: "2 minutes ago", nextRun: "5 minutes from now", description: "Send Slack notifications for new emails in Gmail", }, "2": { name: "Twitter Mentions to Trello", status: "delayed", lastRun: "15 minutes ago", nextRun: "Delayed by 10 minutes", description: "Create Trello cards for new Twitter mentions", }, "3": { name: "New Shopify Orders to Google Sheets", status: "healthy", lastRun: "5 minutes ago", nextRun: "25 minutes from now", description: "Add new Shopify orders to Google Sheets", }, "4": { name: "Facebook Leads to Mailchimp", status: "failed", lastRun: "32 minutes ago", nextRun: "Not scheduled", description: "Add Facebook leads to Mailchimp audience", }, "5": { name: "Stripe Payments to QuickBooks", status: "healthy", lastRun: "10 minutes ago", nextRun: "50 minutes from now", description: "Sync Stripe payments to QuickBooks accounting", }, } export function ZapDetailHeader({ id }: { id: string }) { const zap = zapDetails[id as keyof typeof zapDetails] || { name: "Unknown Zap", status: "unknown", lastRun: "Unknown", nextRun: "Unknown", description: "No description available", } return (

{zap.name}

{zap.status === "healthy" && ( Healthy )} {zap.status === "delayed" && ( Delayed )} {zap.status === "failed" && ( Failed )}

{zap.description}

Last run: {zap.lastRun} Next run: {zap.nextRun}

Active

Duplicate Share Export Delete

) } [V0_FILE]typescriptreact:file="components/zap-performance-chart.tsx" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart" import { Line, LineChart, ResponsiveContainer, XAxis, YAxis, CartesianGrid, Legend } from "recharts" const performanceData = { "1": { daily: [ { date: "Mon", successRate: 100, executionTime: 1.2, tasks: 42 }, { date: "Tue", successRate: 100, executionTime: 1.1, tasks: 38 }, { date: "Wed", successRate: 100, executionTime: 1.3, tasks: 45 }, { date: "Thu", successRate: 100, executionTime: 1.2, tasks: 39 }, { date: "Fri", successRate: 100, executionTime: 1.4, tasks: 41 }, { date: "Sat", successRate: 100, executionTime: 1.1, tasks: 28 }, { date: "Sun", successRate: 100, executionTime: 1.0, tasks: 22 }, ], weekly: [ { date: "Week 1", successRate: 100, executionTime: 1.2, tasks: 245 }, { date: "Week 2", successRate: 99, executionTime: 1.3, tasks: 232 }, { date: "Week 3", successRate: 100, executionTime: 1.1, tasks: 253 }, { date: "Week 4", successRate: 100, executionTime: 1.2, tasks: 240 }, ], monthly: [ { date: "Jan", successRate: 100, executionTime: 1.2, tasks: 980 }, { date: "Feb", successRate: 99, executionTime: 1.3, tasks: 890 }, { date: "Mar", successRate: 100, executionTime: 1.1, tasks: 1020 }, { date: "Apr", successRate: 100, executionTime: 1.2, tasks: 950 }, { date: "May", successRate: 99, executionTime: 1.3, tasks: 980 }, { date: "Jun", successRate: 100, executionTime: 1.2, tasks: 1050 }, ], }, "2": { daily: [ { date: "Mon", successRate: 95, executionTime: 3.5, tasks: 18 }, { date: "Tue", successRate: 92, executionTime: 3.8, tasks: 15 }, { date: "Wed", successRate: 90, executionTime: 4.0, tasks: 12 }, { date: "Thu", successRate: 88, executionTime: 4.2, tasks: 16 }, { date: "Fri", successRate: 92, executionTime: 3.7, tasks: 14 }, { date: "Sat", successRate: 95, executionTime: 3.5, tasks: 8 }, { date: "Sun", successRate: 94, executionTime: 3.6, tasks: 6 }, ], weekly: [ { date: "Week 1", successRate: 94, executionTime: 3.7, tasks: 89 }, { date: "Week 2", successRate: 92, executionTime: 3.9, tasks: 78 }, { date: "Week 3", successRate: 90, executionTime: 4.1, tasks: 82 }, { date: "Week 4", successRate: 93, executionTime: 3.8, tasks: 85 }, ], monthly: [ { date: "Jan", successRate: 95, executionTime: 3.5, tasks: 350 }, { date: "Feb", successRate: 93, executionTime: 3.7, tasks: 320 }, { date: "Mar", successRate: 91, executionTime: 3.9, tasks: 340 }, { date: "Apr", successRate: 90, executionTime: 4.0, tasks: 310 }, { date: "May", successRate: 92, executionTime: 3.8, tasks: 330 }, { date: "Jun", successRate: 94, executionTime: 3.6, tasks: 345 }, ], }, "3": { daily: [ { date: "Mon", successRate: 100, executionTime: 2.0, tasks: 28 }, { date: "Tue", successRate: 99, executionTime: 2.1, tasks: 25 }, { date: "Wed", successRate: 100, executionTime: 2.0, tasks: 30 }, { date: "Thu", successRate: 98, executionTime: 2.2, tasks: 26 }, { date: "Fri", successRate: 100, executionTime: 2.0, tasks: 27 }, { date: "Sat", successRate: 100, executionTime: 1.9, tasks: 12 }, { date: "Sun", successRate: 100, executionTime: 1.8, tasks: 8 }, ], weekly: [ { date: "Week 1", successRate: 99, executionTime: 2.0, tasks: 156 }, { date: "Week 2", successRate: 100, executionTime: 1.9, tasks: 148 }, { date: "Week 3", successRate: 99, executionTime: 2.1, tasks: 162 }, { date: "Week 4", successRate: 98, executionTime: 2.2, tasks: 150 }, ], monthly: [ { date: "Jan", successRate: 99, executionTime: 2.0, tasks: 620 }, { date: "Feb", successRate: 99, executionTime: 2.1, tasks: 580 }, { date: "Mar", successRate: 100, executionTime: 1.9, tasks: 640 }, { date: "Apr", successRate: 98, executionTime: 2.2, tasks: 600 }, { date: "May", successRate: 99, executionTime: 2.0, tasks: 630 }, { date: "Jun", successRate: 99, executionTime: 2.1, tasks: 610 }, ], }, "4": { daily: [ { date: "Mon", successRate: 75, executionTime: 4.2, tasks: 8 }, { date: "Tue", successRate: 70, executionTime: 4.5, tasks: 6 }, { date: "Wed", successRate: 65, executionTime: 4.8, tasks: 5 }, { date: "Thu", successRate: 60, executionTime: 5.0, tasks: 7 }, { date: "Fri", successRate: 68, executionTime: 4.6, tasks: 6 }, { date: "Sat", successRate: 0, executionTime: 0, tasks: 0 }, { date: "Sun", successRate: 0, executionTime: 0, tasks: 0 }, ], weekly: [ { date: "Week 1", successRate: 80, executionTime: 4.0, tasks: 32 }, { date: "Week 2", successRate: 75, executionTime: 4.2, tasks: 28 }, { date: "Week 3", successRate: 70, executionTime: 4.5, tasks: 30 }, { date: "Week 4", successRate: 68, executionTime: 4.6, tasks: 25 }, ], monthly: [ { date: "Jan", successRate: 85, executionTime: 3.8, tasks: 120 }, { date: "Feb", successRate: 80, executionTime: 4.0, tasks: 110 }, { date: "Mar", successRate: 78, executionTime: 4.1, tasks: 115 }, { date: "Apr", successRate: 75, executionTime: 4.3, tasks: 105 }, { date: "May", successRate: 72, executionTime: 4.4, tasks: 100 }, { date: "Jun", successRate: 68, executionTime: 4.6, tasks: 95 }, ], }, "5": { daily: [ { date: "Mon", successRate: 100, executionTime: 1.7, tasks: 32 }, { date: "Tue", successRate: 100, executionTime: 1.8, tasks: 28 }, { date: "Wed", successRate: 100, executionTime: 1.7, tasks: 35 }, { date: "Thu", successRate: 100, executionTime: 1.9, tasks: 30 }, { date: "Fri", successRate: 100, executionTime: 1.8, tasks: 33 }, { date: "Sat", successRate: 100, executionTime: 1.6, tasks: 12 }, { date: "Sun", successRate: 100, executionTime: 1.5, tasks: 8 }, ], weekly: [ { date: "Week 1", successRate: 100, executionTime: 1.8, tasks: 178 }, { date: "Week 2", successRate: 100, executionTime: 1.7, tasks: 165 }, { date: "Week 3", successRate: 100, executionTime: 1.8, tasks: 182 }, { date: "Week 4", successRate: 100, executionTime: 1.9, tasks: 170 }, ], monthly: [ { date: "Jan", successRate: 100, executionTime: 1.8, tasks: 700 }, { date: "Feb", successRate: 100, executionTime: 1.7, tasks: 650 }, { date: "Mar", successRate: 100, executionTime: 1.8, tasks: 720 }, { date: "Apr", successRate: 100, executionTime: 1.9, tasks: 680 }, { date: "May", successRate: 100, executionTime: 1.8, tasks: 710 }, { date: "Jun", successRate: 100, executionTime: 1.7, tasks: 690 }, ], }, } export function ZapPerformanceChart({ id }: { id: string }) { const data = performanceData[id as keyof typeof performanceData] || { daily: [], weekly: [], monthly: [], } return (

Success Rate

{data.daily[data.daily.length - 1]?.successRate || 0}%

Last 7 days average

Avg. Execution Time

{data.daily[data.daily.length - 1]?.executionTime || 0}s

Last 7 days average

Total Tasks

{data.daily.reduce((sum, day) => sum + day.tasks, 0)}

Last 7 days

Performance Metrics Track success rate and execution time over time Daily Weekly Monthly } /> } /> } />

) } [V0_FILE]typescriptreact:file="components/zap-execution-history.tsx" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { AlertCircle, CheckCircle, ChevronDown, Clock, ExternalLink } from "lucide-react" const executionHistory = { "1": [ { id: "1-1", timestamp: "Today, 10:45 AM", status: "success", duration: "1.2s", data: "42 items processed" }, { id: "1-2", timestamp: "Today, 9:30 AM", status: "success", duration: "1.1s", data: "38 items processed" }, { id: "1-3", timestamp: "Today, 8:15 AM", status: "success", duration: "1.3s", data: "45 items processed" }, { id: "1-4", timestamp: "Yesterday, 4:45 PM", status: "success", duration: "1.2s", data: "39 items processed" }, { id: "1-5", timestamp: "Yesterday, 3:30 PM", status: "success", duration: "1.4s", data: "41 items processed" }, ], "2": [ { id: "2-1", timestamp: "Today, 10:30 AM", status: "success", duration: "3.5s", data: "18 items processed" }, { id: "2-2", timestamp: "Today, 9:15 AM", status: "warning", duration: "3.8s", data: "15 items processed" }, { id: "2-3", timestamp: "Today, 8:00 AM", status: "warning", duration: "4.0s", data: "12 items processed" }, { id: "2-4", timestamp: "Yesterday, 4:30 PM", status: "error", duration: "4.2s", data: "Failed to connect to Twitter API", }, { id: "2-5", timestamp: "Yesterday, 3:15 PM", status: "success", duration: "3.7s", data: "14 items processed" }, ], "3": [ { id: "3-1", timestamp: "Today, 10:15 AM", status: "success", duration: "2.0s", data: "28 items processed" }, { id: "3-2", timestamp: "Today, 9:00 AM", status: "success", duration: "2.1s", data: "25 items processed" }, { id: "3-3", timestamp: "Today, 7:45 AM", status: "success", duration: "2.0s", data: "30 items processed" }, { id: "3-4", timestamp: "Yesterday, 4:15 PM", status: "warning", duration: "2.2s", data: "26 items processed" }, { id: "3-5", timestamp: "Yesterday, 3:00 PM", status: "success", duration: "2.0s", data: "27 items processed" }, ], "4": [ { id: "4-1", timestamp: "Today, 10:00 AM", status: "error", duration: "4.2s", data: "Failed to connect to Facebook API", }, { id: "4-2", timestamp: "Today, 8:45 AM", status: "error", duration: "4.5s", data: "Authentication error" }, { id: "4-3", timestamp: "Today, 7:30 AM", status: "error", duration: "4.8s", data: "Rate limit exceeded" }, { id: "4-4", timestamp: "Yesterday, 4:00 PM", status: "warning", duration: "5.0s", data: "7 items processed" }, { id: "4-5", timestamp: "Yesterday, 2:45 PM", status: "warning", duration: "4.6s", data: "6 items processed" }, ], "5": [ { id: "5-1", timestamp: "Today, 9:45 AM", status: "success", duration: "1.7s", data: "32 items processed" }, { id: "5-2", timestamp: "Today, 8:30 AM", status: "success", duration: "1.8s", data: "28 items processed" }, { id: "5-3", timestamp: "Today, 7:15 AM", status: "success", duration: "1.7s", data: "35 items processed" }, { id: "5-4", timestamp: "Yesterday, 3:45 PM", status: "success", duration: "1.9s", data: "30 items processed" }, { id: "5-5", timestamp: "Yesterday, 2:30 PM", status: "success", duration: "1.8s", data: "33 items processed" }, ], } export function ZapExecutionHistory({ id }: { id: string }) { const history = executionHistory[id as keyof typeof executionHistory] || [] return ( Execution History Recent executions and their outcomes

Timestamp

Status

Duration

Data

{history.map((execution) => (

{execution.timestamp}

{execution.status === "success" && ( Success )} {execution.status === "warning" && ( Delayed )} {execution.status === "error" && ( Failed )}

{execution.duration}

{execution.data}

))}

) } [V0_FILE]typescriptreact:file="components/zap-resource-usage.tsx" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, XAxis, YAxis } from "recharts" const resourceData = { "1": { apiCalls: [ { name: "Gmail API", value: 245 }, { name: "Slack API", value: 245 }, ], dataTransfer: [ { name: "Gmail API", value: 12.5 }, { name: "Slack API", value: 8.2 }, ], executionTime: [ { name: "Gmail API", value: 0.8 }, { name: "Slack API", value: 0.4 }, ], }, "2": { apiCalls: [ { name: "Twitter API", value: 89 }, { name: "Trello API", value: 89 }, ], dataTransfer: [ { name: "Twitter API", value: 5.2 }, { name: "Trello API", value: 3.8 }, ], executionTime: [ { name: "Twitter API", value: 2.5 }, { name: "Trello API", value: 1.3 }, ], }, "3": { apiCalls: [ { name: "Shopify API", value: 156 }, { name: "Google Sheets API", value: 156 }, ], dataTransfer: [ { name: "Shopify API", value: 18.3 }, { name: "Google Sheets API", value: 5.7 }, ], executionTime: [ { name: "Shopify API", value: 1.5 }, { name: "Google Sheets API", value: 0.6 }, ], }, "4": { apiCalls: [ { name: "Facebook API", value: 32 }, { name: "Mailchimp API", value: 32 }, ], dataTransfer: [ { name: "Facebook API", value: 3.8 }, { name: "Mailchimp API", value: 2.5 }, ], executionTime: [ { name: "Facebook API", value: 2.8 }, { name: "Mailchimp API", value: 1.7 }, ], }, "5": { apiCalls: [ { name: "Stripe API", value: 178 }, { name: "QuickBooks API", value: 178 }, ], dataTransfer: [ { name: "Stripe API", value: 9.5 }, { name: "QuickBooks API", value: 7.2 }, ], executionTime: [ { name: "Stripe API", value: 1.0 }, { name: "QuickBooks API", value: 0.8 }, ], }, } export function ZapResourceUsage({ id }: { id: string }) { const data = resourceData[id as keyof typeof resourceData] || { apiCalls: [], dataTransfer: [], executionTime: [], } return ( Resource Usage API calls, data transfer, and execution time API Calls Data Transfer Execution Time } /> } /> } /> ) } [V0_FILE]typescriptreact:file="components/zap-settings.tsx" 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 { Textarea } from "@/components/ui/textarea" import { Switch } from "@/components/ui/switch" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Separator } from "@/components/ui/separator" export function ZapSettings({ id }: { id: string }) { return (

General Settings Configure your Zap's basic settings

Zap Name

Description

</div>

<div className="grid gap-3">
            <Label htmlFor="zap-folder">Folder</Label>
            <Select defaultValue="default">
              <SelectTrigger id="zap-folder">
                <SelectValue placeholder="Select folder" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="default">Default</SelectItem>
                <SelectItem value="marketing">Marketing</SelectItem>
                <SelectItem value="sales">Sales</SelectItem>
                <SelectItem value="support">Support</SelectItem>
              </SelectContent>
            </Select>
          </div>

<div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label htmlFor="zap-active">Active</Label>
              <p className="text-sm text-muted-foreground">Turn your Zap on or off</p>
            </div>
            <Switch id="zap-active" defaultChecked />
          </div>
        </CardContent>
      </Card>

<Card>
        <CardHeader>
          <CardTitle>Schedule</CardTitle>
          <CardDescription>Configure when your Zap runs</CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="grid gap-3">
            <Label htmlFor="schedule-type">Schedule Type</Label>
            <Select defaultValue="realtime">
              <SelectTrigger id="schedule-type">
                <SelectValue placeholder="Select schedule type" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="realtime">Real-time</SelectItem>
                <SelectItem value="interval">Interval</SelectItem>
                <SelectItem value="daily">Daily</SelectItem>
                <SelectItem value="weekly">Weekly</SelectItem>
              </SelectContent>
            </Select>
          </div>

<div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label htmlFor="retry-failed">Retry Failed Runs</Label>
              <p className="text-sm text-muted-foreground">Automatically retry when a run fails</p>
            </div>
            <Switch id="retry-failed" defaultChecked />
          </div>

<div className="grid gap-3">
            <Label htmlFor="max-retries">Maximum Retries</Label>
            <Select defaultValue="3">
              <SelectTrigger id="max-retries">
                <SelectValue placeholder="Select maximum retries" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="1">1</SelectItem>
                <SelectItem value="2">2</SelectItem>
                <SelectItem value="3">3</SelectItem>
                <SelectItem value="5">5</SelectItem>
                <SelectItem value="10">10</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

<Card>
        <CardHeader>
          <CardTitle>Advanced</CardTitle>
          <CardDescription>Advanced settings for your Zap</CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label htmlFor="error-notifications">Error Notifications</Label>
              <p className="text-sm text-muted-foreground">Get notified when your Zap encounters an error</p>
            </div>
            <Switch id="error-notifications" defaultChecked />
          </div>

<div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label htmlFor="detailed-logging">Detailed Logging</Label>
              <p className="text-sm text-muted-foreground">Enable detailed logging for debugging</p>
            </div>
            <Switch id="detailed-logging" />
          </div>

<div className="flex justify-between">
            <Button variant="outline" className="text-red-600 hover:text-red-700 hover:bg-red-50">
              Delete Zap
            </Button>
            <Button>Save Changes</Button>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/recommendation-header.tsx"
import { Input } from "@/components/ui/input"
import { Search } from "lucide-react"

export function RecommendationHeader() {
  return (
    <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
      <div>
        <h1 className="text-3xl font-bold tracking-tight">Recommendations</h1>
        <p className="text-muted-foreground">Optimize your Zaps with intelligent suggestions</p>
      </div>
      <div className="relative w-full sm:w-auto">
        <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
        <Input type="search" placeholder="Search recommendations..." className="w-full pl-8 sm:w-[250px]" />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/recommendation-list.tsx"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { AlertCircle, ArrowRight, Clock, Gauge, Zap } from "lucide-react"
import Link from "next/link"

const recommendations = [
  {
    id: "1",
    title: "Optimize Gmail to Slack Zap",
    description: "Add a filter to reduce unnecessary notifications",
    impact: "high",
    category: "performance",
    zapId: "1",
    icon: Gauge,
  },
  {
    id: "2",
    title: "Fix Twitter to Trello authentication",
    description: "Update Twitter API credentials to prevent failures",
    impact: "critical",
    category: "reliability",
    zapId: "2",
    icon: AlertCircle,
  },
  {
    id: "3",
    title: "Reduce Shopify polling frequency",
    description: "Change from 5 minutes to 15 minutes to save task usage",
    impact: "medium",
    category: "cost",
    zapId: "3",
    icon: Clock,
  },
  {
    id: "4",
    title: "Troubleshoot Facebook Leads to Mailchimp",
    description: "Fix recurring authentication errors",
    impact: "critical",
    category: "reliability",
    zapId: "4",
    icon: AlertCircle,
  },
  {
    id: "5",
    title: "Add error handling to Stripe to QuickBooks",
    description: "Implement retry logic for intermittent failures",
    impact: "medium",
    category: "reliability",
    zapId: "5",
    icon: Zap,
  },
]

export function RecommendationList({ filter = "all" }: { filter?: string }) {
  const filteredRecommendations =
    filter === "all" ? recommendations : recommendations.filter((rec) => rec.category === filter)

return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
      {filteredRecommendations.map((recommendation) => (
        <Card key={recommendation.id}>
          <CardHeader>
            <div className="flex items-start justify-between">
              <div className="space-y-1">
                <CardTitle>{recommendation.title}</CardTitle>
                <CardDescription>{recommendation.description}</CardDescription>
              </div>
              <div className="rounded-full p-2 bg-muted">
                <recommendation.icon className="h-5 w-5 text-primary" />
              </div>
            </div>
          </CardHeader>
          <CardContent>
            <div className="flex items-center gap-2">
              <Badge
                variant="outline"
                className={
                  recommendation.impact === "critical"
                    ? "bg-red-50 text-red-700 hover:bg-red-50 border-red-200"
                    : recommendation.impact === "high"
                      ? "bg-amber-50 text-amber-700 hover:bg-amber-50 border-amber-200"
                      : "bg-blue-50 text-blue-700 hover:bg-blue-50 border-blue-200"
                }
              >
                {recommendation.impact === "critical"
                  ? "Critical Impact"
                  : recommendation.impact === "high"
                    ? "High Impact"
                    : "Medium Impact"}
              </Badge>
              <Badge variant="outline">
                {recommendation.category === "performance"
                  ? "Performance"
                  : recommendation.category === "reliability"
                    ? "Reliability"
                    : "Cost"}
              </Badge>
            </div>
          </CardContent>
          <CardFooter className="flex justify-between">
            <Button variant="ghost" asChild>
              <Link href={`/zaps/${recommendation.zapId}`}>View Zap</Link>
            </Button>
            <Button asChild>
              <Link href={`/recommendations/${recommendation.id}`}>
                Apply Fix
                <ArrowRight className="ml-2 h-4 w-4" />
              </Link>
            </Button>
          </CardFooter>
        </Card>
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/troubleshoot-header.tsx"
export function TroubleshootHeader() {
  return (
    <div>
      <h1 className="text-3xl font-bold tracking-tight">Troubleshoot</h1>
      <p className="text-muted-foreground">Fix common issues with guided troubleshooting wizards</p>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/troubleshoot-wizards.tsx"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { ArrowRight, Clock, Key, Network, RefreshCw } from "lucide-react"
import Link from "next/link"

const wizards = [
  {
    id: "auth",
    title: "Authentication Issues",
    description: "Fix problems with API keys and authentication",
    icon: Key,
    steps: 4,
  },
  {
    id: "connection",
    title: "Connection Problems",
    description: "Resolve network and connection failures",
    icon: Network,
    steps: 3,
  },
  {
    id: "timeout",
    title: "Timeout Errors",
    description: "Fix Zaps that time out during execution",
    icon: Clock,
    steps: 5,
  },
  {
    id: "data",
    title: "Data Format Issues",
    description: "Resolve problems with data formatting",
    icon: RefreshCw,
    steps: 6,
  },
]

export function TroubleshootWizards() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Troubleshooting Wizards</CardTitle>
        <CardDescription>Step-by-step guides to fix common issues</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {wizards.map((wizard) => (
            <Card key={wizard.id} className="border-dashed">
              <CardHeader className="pb-2">
                <div className="flex items-start justify-between">
                  <CardTitle className="text-lg">{wizard.title}</CardTitle>
                  <div className="rounded-full p-2 bg-muted">
                    <wizard.icon className="h-5 w-5 text-primary" />
                  </div>
                </div>
                <CardDescription>{wizard.description}</CardDescription>
              </CardHeader>
              <CardFooter className="pt-2">
                <Button asChild className="w-full">
                  <Link href={`/troubleshoot/${wizard.id}`}>
                    Start Wizard
                    <ArrowRight className="ml-2 h-4 w-4" />
                  </Link>
                </Button>
              </CardFooter>
            </Card>
          ))}
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/common-issues.tsx"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"

export function CommonIssues() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Common Issues</CardTitle>
        <CardDescription>Quick solutions to frequent problems</CardDescription>
      </CardHeader>
      <CardContent>
        <Accordion type="single" collapsible className="w-full">
          <AccordionItem value="item-1">
            <AccordionTrigger>My Zap isn't running</AccordionTrigger>
            <AccordionContent>
              <p className="text-sm text-muted-foreground">
                Check if your Zap is turned on. If it is, verify that the trigger app is properly connected and that you
                have the necessary permissions.
              </p>
            </AccordionContent>
          </AccordionItem>
          <AccordionItem value="item-2">
            <AccordionTrigger>Authentication errors</AccordionTrigger>
            <AccordionContent>
              <p className="text-sm text-muted-foreground">
                Try reconnecting your account in the Zap editor. Many services require periodic re-authentication due to
                security policies.
              </p>
            </AccordionContent>
          </AccordionItem>
          <AccordionItem value="item-3">
            <AccordionTrigger>Missing data in actions</AccordionTrigger>
            <AccordionContent>
              <p className="text-sm text-muted-foreground">
                Ensure that the data you're trying to use is available from previous steps. Use the "Test" feature to
                see what data is available.
              </p>
            </AccordionContent>
          </AccordionItem>
          <AccordionItem value="item-4">
            <AccordionTrigger>Zap is running too frequently</AccordionTrigger>
            <AccordionContent>
              <p className="text-sm text-muted-foreground">
                Add a filter step to limit when your Zap runs, or adjust the polling interval in the trigger settings.
              </p>
            </AccordionContent>
          </AccordionItem>
          <AccordionItem value="item-5">
            <AccordionTrigger>Timeout errors</AccordionTrigger>
            <AccordionContent>
              <p className="text-sm text-muted-foreground">
                Break complex Zaps into multiple smaller Zaps, or optimize steps that process large amounts of data.
              </p>
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/troubleshoot-step.tsx"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { AlertCircle, CheckCircle, Info } from "lucide-react"

interface TroubleshootStepProps {
  step: {
    title: string
    type: string
    content: string
    options?: string[]
    fields?: { label: string; type: string; placeholder?: string }[]
  }
}

export function TroubleshootStep({ step }: TroubleshootStepProps) {
  return (
    <div className="space-y-6">
      <div className="space-y-2">
        {step.type === "info" && (
          <div className="flex items-start gap-3 p-4 rounded-md bg-blue-50 text-blue-700">
            <Info className="h-5 w-5 mt-0.5" />
            <div className="text-sm">{step.content}</div>
          </div>
        )}

{step.type === "success" && (
          <div className="flex items-start gap-3 p-4 rounded-md bg-green-50 text-green-700">
            <CheckCircle className="h-5 w-5 mt-0.5" />
            <div className="text-sm">{step.content}</div>
          </div>
        )}

{step.type === "error" && (
          <div className="flex items-start gap-3 p-4 rounded-md bg-red-50 text-red-700">
            <AlertCircle className="h-5 w-5 mt-0.5" />
            <div className="text-sm">{step.content}</div>
          </div>
        )}

{step.type === "text" && <div className="text-sm">{step.content}</div>}

{step.type === "choice" && (
          <div className="space-y-4">
            <div className="text-sm">{step.content}</div>
            <RadioGroup defaultValue={step.options?.[0]}>
              {step.options?.map((option, index) => (
                <div key={index} className="flex items-center space-x-2">
                  <RadioGroupItem value={option} id={`option-${index}`} />
                  <Label htmlFor={`option-${index}`}>{option}</Label>
                </div>
              ))}
            </RadioGroup>
          </div>
        )}

{step.type === "form" && (
          <div className="space-y-4">
            <div className="text-sm">{step.content}</div>
            {step.fields?.map((field, index) => (
              <div key={index} className="space-y-2">
                <Label htmlFor={`field-${index}`}>{field.label}</Label>
                {field.type === "text" && <Input id={`field-${index}`} placeholder={field.placeholder} />}
                {field.type === "textarea" && <Textarea id={`field-${index}`} placeholder={field.placeholder} />}
                {field.type === "select" && (
                  <Select>
                    <SelectTrigger id={`field-${index}`}>
                      <SelectValue placeholder={field.placeholder} />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="option1">Option 1</SelectItem>
                      <SelectItem value="option2">Option 2</SelectItem>
                      <SelectItem value="option3">Option 3</SelectItem>
                    </SelectContent>
                  </Select>
                )}
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="data/wizard-steps.ts" isTerminated="true"
export const wizardSteps = {
  "auth": [
    {
      title: "Identify Authentication Issue",
      type: "info",
      content: "Authentication issues are one of the most common problems with Zaps. This wizard will help you diagnose and fix authentication problems."
    },
    {
      title: "Check Authentication Status",
      type: "choice",
      content: "What error message are you seeing?",
      options: [
        "Invalid credentials",
        "Authentication token expired",
        "Permission denied",
        "API key invalid",
        "Other authentication error"
      ]
    },
    {
      title: "Reconnect Account",
      type: "text",
      content: "Let's try reconnecting your account. Go to your Zap editor, find the app with authentication issues, and click 'Reconnect Account'. After reconnecting, test your Zap again."
    },
    {
      title: "Verify Permissions",
      type: "form",
      content: "If reconnecting didn't work, let's check if your account has the necessary permissions:",
      fields: [
        {
          label: "Which app is having authentication issues?",
          type: "text",
          placeholder: "e.g., Gmail, Slack, etc."
        },
        {
          label: "What action are you trying to perform?",
          type: "textarea",
          placeholder: "Describe what your Zap is trying to do"
        }
      ]
    }
  ],
  "connection": [
    {
      title: "Diagnose Connection Problems",
      type: "info",
      content: "Connection issues can occur due to network problems, service outages, or firewall restrictions. Let's identify and fix the issue."
    },
    {
      title: "Check Service Status",
      type: "text",
      content: "First, check if the service you're connecting to is experiencing an outage. Visit the service's status page or social media accounts for any announcements about service disruptions."
    },
    {
      title: "Test Connection",
      type: "form",
      content: "Let's test the connection to identify the specific issue:",
      fields: [
        {
          label: "Which app is having connection issues?",
          type: "text",
          placeholder: "e.g., Twitter, Shopify, etc."
        },
        {
          label: "When did you first notice the problem?",
          type: "text",
          placeholder: "e.g., Today, Yesterday, etc."
        }
      ]
    }
  ],
  "timeout": [
    {
      title: "Understand Timeout Errors",
      type: "info",
      content: "Timeout errors occur when a Zap takes too long to complete. This can happen due to large data volumes, slow API responses, or complex operations."
    },
    {
      title: "Identify Slow Steps",
      type: "text",
      content: "Review your Zap's execution history to identify which steps are taking the longest time. Look for steps that process large amounts of data or make multiple API calls."
    },
    {
      title: "Check Data Volume",
      type: "choice",
      content: "Is your Zap processing a large amount of data?",
      options: [
        "Yes, it handles many records at once",
        "Yes, it processes large files or images",
        "No, it only processes a few records",
        "I'm not sure"
      ]
    },
    {
      title: "Optimize Zap Structure",
      type: "text",
      content: "Consider breaking your Zap into multiple smaller Zaps that each handle a portion of the work. You can use a storage app like Airtable or Google Sheets to pass data between Zaps."
    },
    {
      title: "Implement Filtering",
      type: "form",
      content: "Add filters to reduce the amount of data your Zap processes:",
      fields: [
        {
          label: "What criteria could you use to filter your data?",
          type: "textarea",
          placeholder: "e.g., only process items created today, only handle high-priority items, etc."
        }
      ]
    }
  ],
  "data": [
    {
      title: "Understand Data Format Issues",
      type: "info",
      content: "Data format issues occur when the data from one app isn't in the format expected by another app. This wizard will help you identify and fix these problems."
    },
    {
      title: "Identify Data Mismatch",
      type: "choice",
      content: "What type of data format issue are you experiencing?",
      options: [
        "Date format mismatch",
        "Number format issues",
        "Text formatting problems",
        "Missing required fields",
        "Array/object structure issues",
        "Other data format issue"
      ]
    },
    {
      title: "Check Data Structure",
      type: "text",
      content: "Use the 'Test' feature in your Zap editor to see the exact structure of the data coming from each step. Compare this with what the destination app expects."
    },
    {
      title: "Use Formatter",
      type: "text",\
      content: "Add a</article></body></html>