[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" "use client" import { useState } from "react" import Dashboard from "@/components/Dashboard" import ExpenseForm from "@/components/ExpenseForm" import ConfirmationScreen from "@/components/ConfirmationScreen" export type Expense = { id: string title: string amount: number date: string category: string description: string status: "pending" | "approved" | "rejected" receipt?: string } export default function Home() { const [currentView, setCurrentView] = useState<"dashboard" | "form" | "confirmation">("dashboard") const [expenses, setExpenses] = useState([ { id: "1", title: "Client Dinner", amount: 127.5, date: "2024-01-15", category: "Meals & Entertainment", description: "Dinner with potential client at The Steakhouse", status: "approved", }, { id: "2", title: "Flight to NYC", amount: 485.0, date: "2024-01-12", category: "Travel", description: "Round trip flight for conference", status: "pending", }, { id: "3", title: "Office Supplies", amount: 67.23, date: "2024-01-10", category: "Office Supplies", description: "Notebooks, pens, and sticky notes", status: "approved", }, ]) const handleSubmitExpense = (expense: Omit) => { const newExpense: Expense = { ...expense, id: Date.now().toString(), status: "pending", } setExpenses((prev) => [newExpense, ...prev]) setCurrentView("confirmation") } const handleBackToDashboard = () => { setCurrentView("dashboard") } const handleStartNewExpense = () => { setCurrentView("form") } return (

{currentView === "dashboard" && } {currentView === "form" && } {currentView === "confirmation" && }

) } [V0_FILE]typescriptreact:file="components/Dashboard.tsx" isMerged="true" "use client" import { Plus, Search, Filter, Download } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import type { Expense } from "@/app/page" interface DashboardProps { expenses: Expense[] onStartNewExpense: () => void } export default function Dashboard({ expenses, onStartNewExpense }: DashboardProps) { const getStatusBadge = (status: string) => { const baseClasses = "px-2 py-1 rounded-full text-xs font-medium" switch (status) { case "approved": return `${baseClasses} bg-green-100 text-green-800` case "pending": return `${baseClasses} bg-yellow-100 text-yellow-800` case "rejected": return `${baseClasses} bg-red-100 text-red-800` default: return `${baseClasses} bg-gray-100 text-gray-800` } } return (

{/* Header */}

Expense Dashboard

Track and manage your business expenses

{/* Actions Bar */}

{/* Expenses Table */}

{expenses.map((expense) => ( ))}

Expense	Amount	Date	Category	Status
{expense.title} {expense.description}	${expense.amount.toFixed(2)}	{new Date(expense.date).toLocaleDateString()}	{expense.category}	{expense.status.charAt(0).toUpperCase() + expense.status.slice(1)}

{/* Summary Cards */}

Total Expenses

${expenses.reduce((sum, expense) => sum + expense.amount, 0).toFixed(2)}

Pending Approval

{expenses.filter((e) => e.status === "pending").length}

This Month

$ {expenses .filter((e) => new Date(e.date).getMonth() === new Date().getMonth()) .reduce((sum, expense) => sum + expense.amount, 0) .toFixed(2)}

) } [V0_FILE]typescriptreact:file="components/ConfirmationScreen.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { CheckCircle, ArrowRight, Receipt, Clock } from "lucide-react" import { Button } from "@/components/ui/button" interface ConfirmationScreenProps { onBackToDashboard: () => void } export default function ConfirmationScreen({ onBackToDashboard }: ConfirmationScreenProps) { const [showAnimation, setShowAnimation] = useState(false) useEffect(() => { // Trigger animation after component mounts const timer = setTimeout(() => { setShowAnimation(true) }, 100) return () => clearTimeout(timer) }, []) return (

{/* Animated Checkmark */}

{/* Success Message */}

Expense Submitted Successfully!

Your expense has been submitted for approval. You'll receive a notification once it's reviewed.

{/* Info Cards */}

Expense ID

#EXP-{Date.now().toString().slice(-6)}

Expected Approval

2-3 business days

{/* Next Steps */}

What happens next?

Your manager will review the expense

You'll receive an email notification with the decision

Approved expenses will be processed for reimbursement

{/* Actions */}

) } [V0_FILE]typescriptreact:file="components/ExpenseForm.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { ArrowLeft, Upload, Bot, Sparkles } from "lucide-react" 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import AIAssistant from "@/components/AIAssistant" import type { Expense } from "@/app/page" interface ExpenseFormProps { onSubmit: (expense: Omit) => void onCancel: () => void } export default function ExpenseForm({ onSubmit, onCancel }: ExpenseFormProps) { const [currentStep, setCurrentStep] = useState(1) const [isGenerating, setIsGenerating] = useState(false) const [formData, setFormData] = useState({ title: "", amount: "", date: "", category: "", description: "", receipt: "", }) const steps = [ { number: 1, title: "Basic Info" }, { number: 2, title: "Details" }, { number: 3, title: "Receipt" }, ] const categories = [ "Travel", "Meals & Entertainment", "Office Supplies", "Software & Subscriptions", "Marketing", "Professional Services", "Other", ] // AI expense patterns for generation const aiExpensePatterns = [ { title: "Flight to Berlin", amount: "450.00", category: "Travel", description: "Round-trip flight for client meeting in Berlin. Business development opportunity with potential new partner.", }, { title: "Client Dinner at The Steakhouse", amount: "127.50", category: "Meals & Entertainment", description: "Business dinner with potential client to discuss partnership opportunities. 3 attendees total.", }, { title: "Adobe Creative Suite License", amount: "52.99", category: "Software & Subscriptions", description: "Monthly subscription for Adobe Creative Suite used for marketing materials and presentations.", }, { title: "Office Supplies - Notebooks & Pens", amount: "67.23", category: "Office Supplies", description: "Bulk purchase of notebooks, pens, and sticky notes for team meetings and note-taking.", }, { title: "Uber to Airport", amount: "45.80", category: "Travel", description: "Transportation to airport for business trip. Taxi receipt attached.", }, { title: "Conference Registration Fee", amount: "299.00", category: "Professional Services", description: "Registration for Tech Innovation Conference 2024. Includes networking sessions and workshops.", }, ] const handleInputChange = (field: string, value: string) => { setFormData((prev) => ({ ...prev, [field]: value })) // Trigger real-time AI analysis if (field === "title" || field === "amount") { // Small delay to simulate AI processing setTimeout(() => { // This will trigger the useEffect in AIAssistant }, 300) } } const handleGenerateWithAI = async () => { setIsGenerating(true) // Simulate AI thinking time (1.5s) await new Promise((resolve) => setTimeout(resolve, 1500)) // Select a random expense pattern const randomPattern = aiExpensePatterns[Math.floor(Math.random() * aiExpensePatterns.length)] // Fill form with AI-generated data setFormData((prev) => ({ ...prev, title: randomPattern.title, amount: randomPattern.amount, category: randomPattern.category, description: randomPattern.description, date: new Date().toISOString().split("T")[0], // Today's date })) setIsGenerating(false) } const handleNext = () => { if (currentStep < 3) { setCurrentStep(currentStep + 1) } } const handlePrevious = () => { if (currentStep > 1) { setCurrentStep(currentStep - 1) } } const handleSubmit = () => { onSubmit({ title: formData.title, amount: Number.parseFloat(formData.amount), date: formData.date, category: formData.category, description: formData.description, receipt: formData.receipt, }) } const isStepValid = () => { switch (currentStep) { case 1: return formData.title && formData.amount && formData.date case 2: return formData.category && formData.description case 3: return true // Receipt is optional default: return false } } return (

{/* Main Form */}

{/* Header */}

Submit New Expense

Fill out the form below to submit your expense for approval

{/* Progress Bar */}

{steps.map((step, index) => (

= step.number ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-600" }`} > {step.number}

= step.number ? "text-blue-600" : "text-gray-500" }`} > {step.title} {index < steps.length - 1 && (

step.number ? "bg-blue-600" : "bg-gray-200"}`} /> )}

))}

{/* Form */}

{currentStep === 1 && (

Basic Information

Expense Title * handleInputChange("title", e.target.value)} placeholder="e.g., Client dinner, Flight to conference" className="w-full transition-all duration-200 focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />

Amount *

$ handleInputChange("amount", e.target.value)} placeholder="0.00" className="pl-8 transition-all duration-200 focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />

Date * handleInputChange("date", e.target.value)} className="w-full transition-all duration-200 focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />

)} {currentStep === 2 && (

Expense Details

Category *

Description *

handleInputChange("description", e.target.value)}
                    placeholder="Provide details about this expense..."
                    rows={4}
                    className="w-full transition-all duration-200 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                  />
                </div>
              </div>
            )}

{currentStep === 3 && (
              <div className="space-y-6">
                <h2 className="text-xl font-semibold text-gray-900 mb-6">Receipt Upload</h2>

<div>
                  <Label className="text-sm font-medium text-gray-700 mb-2 block">Receipt (Optional)</Label>
                  <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-gray-400 transition-colors">
                    <Upload className="h-12 w-12 text-gray-400 mx-auto mb-4" />
                    <p className="text-sm text-gray-600 mb-2">Drag and drop your receipt here, or click to browse</p>
                    <p className="text-xs text-gray-500">Supports: JPG, PNG, PDF (Max 10MB)</p>
                    <Button variant="outline" className="mt-4 bg-transparent">
                      Choose File
                    </Button>
                  </div>
                </div>

<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
                  <div className="flex items-start">
                    <Bot className="h-5 w-5 text-blue-600 mt-0.5 mr-3 flex-shrink-0" />
                    <div>
                      <h4 className="text-sm font-medium text-blue-900 mb-1">AI Tip</h4>
                      <p className="text-sm text-blue-700">
                        Our AI can automatically extract information from your receipt to speed up future submissions.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            )}

{/* Form Actions */}
            <div className="flex justify-between mt-8 pt-6 border-t border-gray-200">
              <Button variant="outline" onClick={handlePrevious} disabled={currentStep === 1}>
                Previous
              </Button>

{currentStep < 3 ? (
                <Button
                  onClick={handleNext}
                  disabled={!isStepValid()}
                  className="bg-blue-600 hover:bg-blue-700 text-white"
                >
                  Next
                </Button>
              ) : (
                <Button
                  onClick={handleSubmit}
                  disabled={!isStepValid()}
                  className="bg-blue-600 hover:bg-blue-700 text-white"
                >
                  Submit Expense
                </Button>
              )}
            </div>
          </div>
        </div>

{/* AI Assistant */}
        <AIAssistant formData={formData} currentStep={currentStep} isGenerating={isGenerating} />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/AIAssistant.tsx" isFixed="true" isEdit="true" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import { Bot, Lightbulb, TrendingUp, AlertCircle, Sparkles, Brain, HelpCircle } from "lucide-react"

interface AIAssistantProps {
  formData: {
    title: string
    amount: string
    date: string
    category: string
    description: string
  }
  currentStep: number
  isGenerating?: boolean
}

// Enhanced typing animation component
function TypingAnimation({ message = "AI is analyzing..." }: { message?: string }) {
  return (
    <div className="flex items-center space-x-2 p-3 bg-blue-50 border border-blue-200 rounded-lg">
      <div className="flex space-x-1">
        <div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style={{ animationDelay: "0ms" }}></div>
        <div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style={{ animationDelay: "150ms" }}></div>
        <div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style={{ animationDelay: "300ms" }}></div>
      </div>
      <span className="text-sm text-blue-700 font-medium">{message}</span>
    </div>
  )
}

// Tooltip component
function InfoTooltip() {
  const [isVisible, setIsVisible] = useState(false)

return (
    <div className="relative">
      <button
        onMouseEnter={() => setIsVisible(true)}
        onMouseLeave={() => setIsVisible(false)}
        className="flex items-center gap-2 p-2 text-sm text-gray-600 hover:text-gray-800 transition-colors"
      >
        <HelpCircle className="h-4 w-4" />
        <span className="font-medium">How AI helps</span>
      </button>

{isVisible && (
        <div className="absolute top-full left-0 mt-2 w-64 p-3 bg-gray-900 text-white text-sm rounded-lg shadow-lg z-10 transform transition-all duration-200">
          <div className="absolute -top-1 left-4 w-2 h-2 bg-gray-900 rotate-45"></div>
          <p>
            AI suggests and pre-fills data based on typical expense patterns, helping you complete forms faster and more
            accurately.
          </p>
        </div>
      )}
    </div>
  )
}

export default function AIAssistant({ formData, currentStep, isGenerating = false }: AIAssistantProps) {
  const [isAnalyzing, setIsAnalyzing] = useState(false)
  const [realtimeStatus, setRealtimeStatus] = useState("Waiting for input...")
  const [suggestions, setSuggestions] = useState<any[]>([])

// Real-time analysis when form data changes
  useEffect(() => {
    if (isGenerating) {
      setRealtimeStatus("Generating expense data...")
      return
    }

// Trigger analysis when title or amount changes
    if (formData.title || formData.amount) {
      setIsAnalyzing(true)
      setRealtimeStatus("Analyzing input...")

// Simulate AI processing delay
      const timer = setTimeout(() => {
        setIsAnalyzing(false)
        analyzeInput()
      }, 600)

return () => clearTimeout(timer)
    } else {
      setRealtimeStatus("Waiting for input...")
      setSuggestions([])
    }
  }, [formData.title, formData.amount, isGenerating])

const analyzeInput = () => {
    const newSuggestions = []
    let status = "Ready to help"

// Analyze title
    if (formData.title) {
      const title = formData.title.toLowerCase()

if (
        title.includes("flight") ||
        title.includes("plane") ||
        title.includes("airline") ||
        title.includes("airport")
      ) {
        status = "✈️ Looks like a Travel expense"
        newSuggestions.push({
          icon: TrendingUp,
          title: "Travel Expense Detected",
          message: `"${formData.title}" appears to be travel-related. Consider selecting "Travel" category.`,
          type: "info",
          confidence: "94%",
        })
      } else if (title.includes("hotel") || title.includes("accommodation") || title.includes("booking")) {
        status = "🏨 Looks like a Travel expense"
        newSuggestions.push({
          icon: TrendingUp,
          title: "Accommodation Detected",
          message: "This appears to be accommodation expense. Travel category recommended.",
          type: "info",
          confidence: "91%",
        })
      } else if (
        title.includes("dinner") ||
        title.includes("lunch") ||
        title.includes("restaurant") ||
        title.includes("meal") ||
        title.includes("coffee")
      ) {
        status = "🍽️ Looks like a Meal expense"
        newSuggestions.push({
          icon: TrendingUp,
          title: "Meal Expense Detected",
          message: `This appears to be a meal expense. "Meals & Entertainment" category would be appropriate.`,
          type: "info",
          confidence: "89%",
        })
      } else if (
        title.includes("software") ||
        title.includes("subscription") ||
        title.includes("license") ||
        title.includes("saas")
      ) {
        status = "💻 Looks like a Software expense"
        newSuggestions.push({
          icon: TrendingUp,
          title: "Software Expense Detected",
          message: `This looks like a software expense. Consider "Software & Subscriptions" category.`,
          type: "info",
          confidence: "92%",
        })
      } else if (
        title.includes("office") ||
        title.includes("supplies") ||
        title.includes("notebook") ||
        title.includes("pen") ||
        title.includes("stationery")
      ) {
        status = "📝 Looks like Office Supplies"
        newSuggestions.push({
          icon: TrendingUp,
          title: "Office Supplies Detected",
          message: `This appears to be office supplies. "Office Supplies" category recommended.`,
          type: "info",
          confidence: "87%",
        })
      } else if (title.includes("uber") || title.includes("taxi") || title.includes("transport")) {
        status = "🚗 Looks like Transportation"
        newSuggestions.push({
          icon: TrendingUp,
          title: "Transportation Detected",
          message: "This appears to be transportation expense. Consider Travel category.",
          type: "info",
          confidence: "85%",
        })
      } else {
        status = "📝 Analyzing expense type..."
      }
    }

// Analyze amount
    if (formData.amount) {
      const amount = Number.parseFloat(formData.amount)

if (amount > 1000) {
        status = "⚠️ High amount – may require approval"
        newSuggestions.push({
          icon: AlertCircle,
          title: "High Amount Alert",
          message: `$${amount.toFixed(2)} exceeds $1,000. This will require manager approval and detailed justification.`,
          type: "warning",
          confidence: "100%",
        })
      } else if (amount > 500) {
        newSuggestions.push({
          icon: AlertCircle,
          title: "Medium Amount Notice",
          message: `$${amount.toFixed(2)} may require additional documentation. Ensure receipt is attached.`,
          type: "warning",
          confidence: "100%",
        })
      } else if (amount > 100 && formData.title.toLowerCase().includes("meal")) {
        newSuggestions.push({
          icon: Lightbulb,
          title: "Meal Expense Tip",
          message: "For meals over $100, include business purpose and attendee names in description.",
          type: "tip",
          confidence: "95%",
        })
      }

// Add amount-based insights
      if (amount > 0 && amount <= 50) {
        newSuggestions.push({
          icon: Lightbulb,
          title: "Small Expense Tip",
          message: "Small expenses like this are typically approved quickly. Keep your receipt handy.",
          type: "tip",
          confidence: "88%",
        })
      }
    }

// Combination analysis
    if (formData.title && formData.amount) {
      const amount = Number.parseFloat(formData.amount)
      const title = formData.title.toLowerCase()

if (title.includes("flight") && amount < 200) {
        newSuggestions.push({
          icon: Brain,
          title: "Unusual Pattern",
          message:
            "Flight expenses are typically higher. Double-check the amount or consider if this is a partial payment.",
          type: "info",
          confidence: "76%",
        })
      }

if (title.includes("software") && amount > 500) {
        newSuggestions.push({
          icon: Brain,
          title: "Software Expense Pattern",
          message: "High software costs may indicate annual subscription. Consider noting the billing period.",
          type: "tip",
          confidence: "82%",
        })
      }
    }

setRealtimeStatus(status)
    setSuggestions(newSuggestions)
  }

return (
    <div className="w-80 flex-shrink-0">
      <div className="sticky top-8 space-y-4">
        {/* Info Tooltip */}
        <InfoTooltip />

{/* AI Assistant Panel */}
        <div className="bg-gradient-to-br from-white to-gray-50 rounded-xl shadow-lg border border-gray-200 p-6 transition-all duration-300 hover:shadow-xl">
          {/* Header */}
          <div className="flex items-center mb-6">
            <div className="flex items-center justify-center w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full mr-3 shadow-md">
              <Sparkles className="h-5 w-5 text-white" />
            </div>
            <div>
              <h3 className="text-lg font-semibold text-gray-900">AI Assistant</h3>
              <p className="text-xs text-gray-500">Real-time expense analysis</p>
            </div>
            {(isAnalyzing || isGenerating) && (
              <div className="ml-auto">
                <div className="w-3 h-3 bg-blue-500 rounded-full animate-pulse shadow-sm"></div>
              </div>
            )}
          </div>

{/* Real-time Status */}
          <div className="mb-6 p-4 bg-gradient-to-r from-blue-50 to-purple-50 border border-blue-200 rounded-lg transition-all duration-300">
            <div className="flex items-center">
              <Bot className="h-4 w-4 text-blue-600 mr-2 flex-shrink-0" />
              <span className="text-sm font-medium text-blue-900">{realtimeStatus}</span>
            </div>
          </div>

{/* Loading Animation */}
          {(isAnalyzing || isGenerating) && (
            <div className="mb-4">
              <TypingAnimation message={isGenerating ? "Generating expense data..." : "Analyzing your input..."} />
            </div>
          )}

{/* Dynamic Suggestions */}
          <div className="space-y-3 mb-6">
            {suggestions.length > 0
              ? suggestions.map((suggestion, index) => {
                  const Icon = suggestion.icon
                  const bgColor = {
                    info: "bg-blue-50 border-blue-200 hover:bg-blue-100",
                    warning: "bg-yellow-50 border-yellow-200 hover:bg-yellow-100",
                    tip: "bg-green-50 border-green-200 hover:bg-green-100",
                  }[suggestion.type]

const iconColor = {
                    info: "text-blue-600",
                    warning: "text-yellow-600",
                    tip: "text-green-600",
                  }[suggestion.type]

return (
                    <div
                      key={index}
                      className={`border rounded-lg p-4 ${bgColor} transition-all duration-300 hover:shadow-md transform hover:-translate-y-0.5 cursor-pointer`}
                    >
                      <div className="flex items-start">
                        <Icon className={`h-4 w-4 mt-0.5 mr-3 flex-shrink-0 ${iconColor}`} />
                        <div className="flex-1">
                          <div className="flex items-center justify-between mb-1">
                            <h4 className="text-sm font-medium text-gray-900">{suggestion.title}</h4>
                            {suggestion.confidence && (
                              <span className="text-xs text-gray-500 bg-white px-2 py-1 rounded-full shadow-sm">
                                {suggestion.confidence}
                              </span>
                            )}
                          </div>
                          <p className="text-sm text-gray-600 leading-relaxed">{suggestion.message}</p>
                        </div>
                      </div>
                    </div>
                  )
                })
              : !isAnalyzing &&
                !isGenerating && (
                  <div className="text-center py-6 text-gray-500">
                    <Bot className="h-8 w-8 mx-auto mb-2 opacity-50" />
                    <p className="text-sm">Start typing to see AI suggestions</p>
                  </div>
                )}
          </div>

{/* Quick Stats */}
          <div className="pt-4 border-t border-gray-200">
            <h4 className="text-sm font-medium text-gray-900 mb-3 flex items-center">
              <TrendingUp className="h-4 w-4 mr-2 text-gray-600" />
              Quick Stats
            </h4>
            <div className="grid grid-cols-2 gap-3 text-sm">
              <div className="bg-white p-3 rounded-lg border border-gray-100 shadow-sm">
                <div className="text-xs text-gray-500 mb-1">Avg. approval</div>
                <div className="font-semibold text-gray-900">2.3 days</div>
              </div>
              <div className="bg-white p-3 rounded-lg border border-gray-100 shadow-sm">
                <div className="text-xs text-gray-500 mb-1">Success rate</div>
                <div className="font-semibold text-green-600">94%</div>
              </div>
              <div className="bg-white p-3 rounded-lg border border-gray-100 shadow-sm">
                <div className="text-xs text-gray-500 mb-1">This month</div>
                <div className="font-semibold text-gray-900">$1,247</div>
              </div>
              <div className="bg-white p-3 rounded-lg border border-gray-100 shadow-sm">
                <div className="text-xs text-gray-500 mb-1">AI accuracy</div>
                <div className="font-semibold text-blue-600">89%</div>
              </div>
            </div>
          </div>

{/* AI Insight Footer */}
          <div className="mt-4 p-3 bg-gradient-to-r from-purple-50 to-blue-50 border border-purple-200 rounded-lg">
            <div className="flex items-center mb-2">
              <Brain className="h-4 w-4 text-purple-600 mr-2" />
              <span className="text-sm font-medium text-purple-900">AI Insight</span>
            </div>
            <p className="text-xs text-purple-700 leading-relaxed">
              {isGenerating
                ? "Generating realistic expense data based on common business patterns..."
                : formData.title || formData.amount
                  ? "I'm continuously analyzing your input to provide the most relevant suggestions."
                  : "Try the 'Generate with AI' button to see how AI can auto-complete your expense form."}
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}</article></body></html>