[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import Link from "next/link" import { Code, FileText, GitGraphIcon as Git, Receipt, MessageSquare, DollarSign } from "lucide-react" const tools = [ { title: "EnvLens", description: "Environment Variable Inspector", icon: Code, href: "/envlens", }, { title: "RegexBuddyLite", description: "Regex Playground & Tester", icon: FileText, href: "/regexbuddy", }, { title: "BranchForge", description: "Git Branch Name Generator", icon: Git, href: "/branchforge", }, { title: "InvoiceFlow", description: "Simple Invoice Generator", icon: Receipt, href: "/invoiceflow", }, { title: "MinuteMind", description: "Meeting Minute Taker", icon: MessageSquare, href: "/minutemind", }, { title: "ExpenseEase", description: "Expense Report Simplifier", icon: DollarSign, href: "/expenseease", }, ] export default function Home() { return (

Dev & Office Toolbox

A suite of productivity tools for developers and office professionals

{tools.map((tool) => { const Icon = tool.icon return (

{tool.title}

{tool.description}

Click to access this tool

) })}

) } [V0_FILE]typescriptreact:file="components/ui/code.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" interface CodeProps extends React.HTMLAttributes { children: React.ReactNode } const Code = React.forwardRef(({ className, children, ...props }, ref) => { return (


      {children}

) }) Code.displayName = "Code" export { Code } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Dev & Office Toolbox", description: "A suite of tools for developers and office productivity", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return (

{children}

) } [V0_FILE]typescriptreact:file="components/back-button.tsx" "use client" import { Button } from "@/components/ui/button" import { ChevronLeft } from "lucide-react" import Link from "next/link" export function BackButton() { return ( ) } [V0_FILE]typescriptreact:file="app/envlens/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Textarea } from "@/components/ui/textarea" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Badge } from "@/components/ui/badge" import { BackButton } from "@/components/back-button" type EnvVariable = { name: string value: string status: "OK" | "Duplicate" | "Placeholder" } export default function EnvLens() { const [envContent, setEnvContent] = useState("") const [variables, setVariables] = useState([]) // Placeholder function for analyzing .env content const analyzeEnv = () => { // This is a placeholder. In a real implementation, you would: // 1. Parse the .env content // 2. Detect duplicates, placeholders, etc. // 3. Update the variables state // For now, let's just create some sample data const sampleVariables: EnvVariable[] = [ { name: "API_KEY", value: "abc123xyz", status: "OK" }, { name: "DATABASE_URL", value: "postgres://user:pass@localhost:5432/db", status: "OK" }, { name: "DEBUG", value: "true", status: "OK" }, { name: "SECRET_KEY", value: "YOUR_SECRET_KEY_HERE", status: "Placeholder" }, { name: "API_URL", value: "https://api.example.com", status: "OK" }, { name: "API_URL", value: "https://api.backup.com", status: "Duplicate" }, ] setVariables(sampleVariables) } // Placeholder function for downloading .env content const downloadEnv = () => { // In a real implementation, you would: // 1. Create a blob with the content // 2. Create a download link // 3. Trigger the download const blob = new Blob([envContent], { type: "text/plain" }) const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = ".env" document.body.appendChild(a) a.click() document.body.removeChild(a) URL.revokeObjectURL(url) } return (

EnvLens - Environment Variable Inspector

Analyze and manage your environment variables

setEnvContent(e.target.value)}
          />
        </CardContent>
      </Card>

<div className="flex flex-col sm:flex-row gap-2">
        <Button onClick={analyzeEnv} className="w-full sm:w-auto">
          Analyze
        </Button>
        <Button variant="outline" onClick={downloadEnv} className="w-full sm:w-auto">
          Download .env
        </Button>
      </div>

{variables.length > 0 && (
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Variable Name</TableHead>
              <TableHead>Value</TableHead>
              <TableHead>Status</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {variables.map((variable, index) => (
              <TableRow key={index}>
                <TableCell className="font-mono">{variable.name}</TableCell>
                <TableCell className="font-mono">{variable.value}</TableCell>
                <TableCell>
                  <Badge
                    variant={
                      variable.status === "OK" ? "default" : variable.status === "Duplicate" ? "warning" : "destructive"
                    }
                  >
                    {variable.status}
                  </Badge>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/regexbuddy/page.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Textarea } from "@/components/ui/textarea"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { InfoIcon } from "lucide-react"
import { BackButton } from "@/components/back-button"

export default function RegexBuddy() {
  const [regex, setRegex] = useState("")
  const [testString, setTestString] = useState("")
  const [results, setResults] = useState<string | null>(null)
  const [explanation, setExplanation] = useState<string | null>(null)

// Placeholder function for testing regex
  const testRegex = () => {
    // This is a placeholder. In a real implementation, you would:
    // 1. Parse the regex
    // 2. Apply it to the test string
    // 3. Display the results and explanation

try {
      // Simple implementation for demonstration
      const regexObj = new RegExp(regex, "g")
      const matches = testString.match(regexObj)

setResults(matches ? `Found ${matches.length} matches: ${JSON.stringify(matches)}` : "No matches found")

// Simple explanation placeholder
      setExplanation(`The regular expression /${regex}/g searches for patterns in the text.`)
    } catch (error) {
      setResults(`Error: ${(error as Error).message}`)
      setExplanation(null)
    }
  }

return (
    <div className="space-y-6">
      <BackButton />

<div className="space-y-2">
        <h1 className="text-3xl font-bold tracking-tighter">RegexBuddyLite - Regex Playground</h1>
        <p className="text-muted-foreground">Test and debug your regular expressions</p>
      </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div className="space-y-4">
          <Textarea
            placeholder="Enter your regular expression (without slashes)"
            className="font-mono min-h-[100px]"
            value={regex}
            onChange={(e) => setRegex(e.target.value)}
          />
          <Textarea
            placeholder="Enter your test string"
            className="font-mono min-h-[200px]"
            value={testString}
            onChange={(e) => setTestString(e.target.value)}
          />
          <Button onClick={testRegex} className="w-full">
            Test Regex
          </Button>
        </div>

<div className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Match Results</CardTitle>
            </CardHeader>
            <CardContent>
              {results ? (
                <pre className="whitespace-pre-wrap font-mono text-sm bg-muted p-4 rounded-md overflow-auto max-h-[200px]">
                  {results}
                </pre>
              ) : (
                <p className="text-muted-foreground">Results will appear here after testing</p>
              )}
            </CardContent>
          </Card>

{explanation && (
            <Alert>
              <InfoIcon className="h-4 w-4" />
              <AlertDescription>{explanation}</AlertDescription>
            </Alert>
          )}
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/branchforge/page.tsx" isEdit="true" isQuickEdit="true"
"use client"

type BranchType = "feature" | "bugfix" | "hotfix" | "release"

export default function BranchForge() {
  const [branchType, setBranchType] = useState<BranchType>("feature")
  const [featureName, setFeatureName] = useState("")
  const [generatedBranch, setGeneratedBranch] = useState<string | null>(null)

// Get placeholder text based on branch type
  const getPlaceholder = () => {
    switch (branchType) {
      case "feature":
        return "Enter feature name (e.g. user-authentication)"
      case "bugfix":
        return "Enter issue number or description (e.g. fix-login-error)"
      case "hotfix":
        return "Enter issue number or description (e.g. security-patch)"
      case "release":
        return "Enter version number (e.g. v1.2.0)"
      default:
        return "Enter name or description"
    }
  }

// Placeholder function for generating branch name
  const generateBranchName = () => {
    // This is a placeholder. In a real implementation, you would:
    // 1. Format the branch name based on type and input
    // 2. Apply conventions (kebab-case, prefixes, etc.)

if (!featureName.trim()) {
      setGeneratedBranch(null)
      return
    }

// Simple implementation for demonstration
    const sanitizedName = featureName
      .trim()
      .toLowerCase()
      .replace(/[^a-z0-9-]/g, "-")
      .replace(/-+/g, "-")
      .replace(/^-|-$/g, "")

const branch = `${branchType}/${sanitizedName}`
    setGeneratedBranch(branch)
  }

return (
    <div className="space-y-6">
      <BackButton />

<div className="space-y-2">
        <h1 className="text-3xl font-bold tracking-tighter">BranchForge - Git Branch Generator</h1>
        <p className="text-muted-foreground">Generate consistent Git branch names following best practices</p>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Branch Settings</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4 px-4 sm:px-6">
          <div className="space-y-2">
            <Label htmlFor="branch-type">Branch Type</Label>
            <Select value={branchType} onValueChange={(value) => setBranchType(value as BranchType)}>
              <SelectTrigger id="branch-type">
                <SelectValue placeholder="Select branch type" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="feature">Feature</SelectItem>
                <SelectItem value="bugfix">Bugfix</SelectItem>
                <SelectItem value="hotfix">Hotfix</SelectItem>
                <SelectItem value="release">Release</SelectItem>
              </SelectContent>
            </Select>
          </div>

<div className="space-y-2">
            <Label htmlFor="feature-name">
              {branchType === "feature"
                ? "Feature Name"
                : branchType === "release"
                  ? "Version"
                  : "Issue Number/Description"}
            </Label>
            <Input
              id="feature-name"
              placeholder={getPlaceholder()}
              value={featureName}
              onChange={(e) => setFeatureName(e.target.value)}
            />
          </div>

<Button onClick={generateBranchName}>Generate Branch Name</Button>
        </CardContent>
      </Card>

{generatedBranch && (
        <Card>
          <CardHeader>
            <CardTitle>Generated Branch Name</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="bg-muted p-4 rounded-md">
              <Code className="text-lg">{generatedBranch}</Code>
            </div>
            <p className="mt-2 text-sm text-muted-foreground">Use this branch name for your Git workflow</p>
          </CardContent>
        </Card>
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/invoiceflow/page.tsx" isEdit="true" isQuickEdit="true"
"use client"

type LineItem = {
  id: string
  description: string
  quantity: number
  unitPrice: number
}

export default function InvoiceFlow() {
  const [invoiceNumber, setInvoiceNumber] = useState("")
  const [date, setDate] = useState("")
  const [billToName, setBillToName] = useState("")
  const [billToAddress, setBillToAddress] = useState("")
  const [fromName, setFromName] = useState("")
  const [fromAddress, setFromAddress] = useState("")
  const [notes, setNotes] = useState("")
  const [lineItems, setLineItems] = useState<LineItem[]>([{ id: "1", description: "", quantity: 1, unitPrice: 0 }])
  const [showPreview, setShowPreview] = useState(false)

// Add a new line item
  const addLineItem = () => {
    setLineItems([
      ...lineItems,
      {
        id: Date.now().toString(),
        description: "",
        quantity: 1,
        unitPrice: 0,
      },
    ])
  }

// Remove a line item
  const removeLineItem = (id: string) => {
    if (lineItems.length > 1) {
      setLineItems(lineItems.filter((item) => item.id !== id))
    }
  }

// Update a line item
  const updateLineItem = (id: string, field: keyof LineItem, value: string | number) => {
    setLineItems(lineItems.map((item) => (item.id === id ? { ...item, [field]: value } : item)))
  }

// Calculate subtotal
  const calculateSubtotal = () => {
    return lineItems.reduce((sum, item) => sum + item.quantity * item.unitPrice, 0)
  }

// Generate invoice preview
  const generateInvoice = () => {
    setShowPreview(true)
  }

return (
    <div className="space-y-6">
      <BackButton />

<div className="space-y-2">
        <h1 className="text-3xl font-bold tracking-tighter">InvoiceFlow - Invoice Generator</h1>
        <p className="text-muted-foreground">Create professional invoices quickly and easily</p>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Invoice Details</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="invoice-number">Invoice Number</Label>
                  <Input
                    id="invoice-number"
                    placeholder="INV-001"
                    value={invoiceNumber}
                    onChange={(e) => setInvoiceNumber(e.target.value)}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="date">Date</Label>
                  <Input id="date" type="date" value={date} onChange={(e) => setDate(e.target.value)} />
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="bill-to-name">Bill To (Name)</Label>
                <Input
                  id="bill-to-name"
                  placeholder="Client Name"
                  value={billToName}
                  onChange={(e) => setBillToName(e.target.value)}
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="bill-to-address">Bill To (Address)</Label>
                <Textarea
                  id="bill-to-address"
                  placeholder="Client Address"
                  value={billToAddress}
                  onChange={(e) => setBillToAddress(e.target.value)}
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="from-name">From (Your Company Name)</Label>
                <Input
                  id="from-name"
                  placeholder="Your Company"
                  value={fromName}
                  onChange={(e) => setFromName(e.target.value)}
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="from-address">From (Your Address)</Label>
                <Textarea
                  id="from-address"
                  placeholder="Your Address"
                  value={fromAddress}
                  onChange={(e) => setFromAddress(e.target.value)}
                />
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Line Items</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              {lineItems.map((item, index) => (
                <div key={item.id} className="space-y-4 p-4 border rounded-md">
                  <div className="flex justify-between items-center">
                    <h4 className="font-medium">Item #{index + 1}</h4>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => removeLineItem(item.id)}
                      disabled={lineItems.length === 1}
                    >
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor={`description-${item.id}`}>Description</Label>
                    <Textarea
                      id={`description-${item.id}`}
                      placeholder="Item description"
                      value={item.description}
                      onChange={(e) => updateLineItem(item.id, "description", e.target.value)}
                    />
                  </div>
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor={`quantity-${item.id}`}>Quantity</Label>
                      <Input
                        id={`quantity-${item.id}`}
                        type="number"
                        min="1"
                        value={item.quantity}
                        onChange={(e) => updateLineItem(item.id, "quantity", Number.parseInt(e.target.value) || 0)}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor={`unit-price-${item.id}`}>Unit Price</Label>
                      <Input
                        id={`unit-price-${item.id}`}
                        type="number"
                        min="0"
                        step="0.01"
                        value={item.unitPrice}
                        onChange={(e) => updateLineItem(item.id, "unitPrice", Number.parseFloat(e.target.value) || 0)}
                      />
                    </div>
                  </div>
                </div>
              ))}

<Card>
            <CardHeader>
              <CardTitle>Notes/Terms</CardTitle>
            </CardHeader>
            <CardContent>
              <Textarea
                placeholder="Payment terms, notes, or additional information"
                className="min-h-[100px]"
                value={notes}
                onChange={(e) => setNotes(e.target.value)}
              />
            </CardContent>
          </Card>

<Button onClick={generateInvoice} className="w-full">
            Generate Invoice
          </Button>
        </div>

{showPreview && (
          <div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Invoice Preview</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="border rounded-md p-6 space-y-6">
                  <div className="flex justify-between">
                    <div>
                      <h2 className="text-2xl font-bold">INVOICE</h2>
                      <p className="text-muted-foreground">#{invoiceNumber}</p>
                    </div>
                    <div className="text-right">
                      <p className="font-medium">Date</p>
                      <p>{date || "Not specified"}</p>
                    </div>
                  </div>

<div className="grid grid-cols-2 gap-6">
                    <div>
                      <p className="font-medium">From:</p>
                      <p>{fromName}</p>
                      <p className="whitespace-pre-line text-sm">{fromAddress}</p>
                    </div>
                    <div>
                      <p className="font-medium">Bill To:</p>
                      <p>{billToName}</p>
                      <p className="whitespace-pre-line text-sm">{billToAddress}</p>
                    </div>
                  </div>

<div>
                    <table className="w-full border-collapse">
                      <thead>
                        <tr className="border-b">
                          <th className="text-left py-2">Description</th>
                          <th className="text-right py-2">Qty</th>
                          <th className="text-right py-2">Unit Price</th>
                          <th className="text-right py-2">Amount</th>
                        </tr>
                      </thead>
                      <tbody>
                        {lineItems.map((item, index) => (
                          <tr key={item.id} className="border-b">
                            <td className="py-2">{item.description || "Item description"}</td>
                            <td className="text-right py-2">{item.quantity}</td>
                            <td className="text-right py-2">${item.unitPrice.toFixed(2)}</td>
                            <td className="text-right py-2">${(item.quantity * item.unitPrice).toFixed(2)}</td>
                          </tr>
                        ))}
                      </tbody>
                      <tfoot>
                        <tr>
                          <td colSpan={3} className="text-right font-medium py-2">
                            Subtotal:
                          </td>
                          <td className="text-right py-2">${calculateSubtotal().toFixed(2)}</td>
                        </tr>
                      </tfoot>
                    </table>
                  </div>

{notes && (
                    <div>
                      <p className="font-medium">Notes:</p>
                      <p className="whitespace-pre-line text-sm">{notes}</p>
                    </div>
                  )}
                </div>
              </CardContent>
            </Card>
          </div>
        )}
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/minutemind/page.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Textarea } from "@/components/ui/textarea"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { PlusCircle, User, Calendar } from "lucide-react"
import { BackButton } from "@/components/back-button"

export default function MinuteMind() {
  const [meetingNotes, setMeetingNotes] = useState("")
  const [summary, setSummary] = useState<string | null>(null)
  const [showActionItemDialog, setShowActionItemDialog] = useState(false)
  const [actionItemAssignee, setActionItemAssignee] = useState("")
  const [actionItemDeadline, setActionItemDeadline] = useState("")
  const [actionItemDescription, setActionItemDescription] = useState("")

// Placeholder function for adding action item
  const addActionItem = () => {
    // This is a placeholder. In a real implementation, you would:
    // 1. Format the action item
    // 2. Insert it at the cursor position or append to the notes

const actionItem = `
ACTION ITEM:
- Task: ${actionItemDescription}
- Assignee: ${actionItemAssignee}
- Deadline: ${actionItemDeadline}
`

setMeetingNotes(meetingNotes + actionItem)
    setShowActionItemDialog(false)

// Reset form
    setActionItemAssignee("")
    setActionItemDeadline("")
    setActionItemDescription("")
  }

// Placeholder function for summarizing minutes
  const summarizeMinutes = () => {
    // This is a placeholder. In a real implementation, you would:
    // 1. Parse the meeting notes
    // 2. Extract key points, decisions, and action items
    // 3. Generate a summary

// Simple implementation for demonstration
    const actionItems = meetingNotes.match(/ACTION ITEM:[\s\S]*?(?=ACTION ITEM:|$)/g) || []

const summaryText = `
# Meeting Summary

## Key Points
- Meeting notes were recorded
- ${meetingNotes.split("\n").length} lines of notes were taken

## Action Items
${actionItems.map((item) => `- ${item.replace("ACTION ITEM:", "").trim()}`).join("\n")}

## Next Steps
- Follow up on action items
- Schedule next meeting
`

setSummary(summaryText)
  }

return (
    <div className="space-y-6">
      <BackButton />

<div className="space-y-2">
        <h1 className="text-3xl font-bold tracking-tighter">MinuteMind - Meeting Minutes</h1>
        <p className="text-muted-foreground">Take structured meeting notes and track action items</p>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="space-y-4">
          <Textarea
            placeholder="Enter your meeting notes here..."
            className="min-h-[400px] font-mono"
            value={meetingNotes}
            onChange={(e) => setMeetingNotes(e.target.value)}
          />

<div className="flex flex-col sm:flex-row gap-2">
            <Dialog open={showActionItemDialog} onOpenChange={setShowActionItemDialog}>
              <DialogTrigger asChild>
                <Button variant="outline">
                  <PlusCircle className="mr-2 h-4 w-4" />
                  Add Action Item
                </Button>
              </DialogTrigger>
              <DialogContent>
                <DialogHeader>
                  <DialogTitle>Add Action Item</DialogTitle>
                </DialogHeader>
                <div className="space-y-4 py-4">
                  <div className="space-y-2">
                    <Label htmlFor="action-description">Task Description</Label>
                    <Textarea
                      id="action-description"
                      placeholder="What needs to be done?"
                      value={actionItemDescription}
                      onChange={(e) => setActionItemDescription(e.target.value)}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="action-assignee">
                      <User className="h-4 w-4 inline mr-2" />
                      Assignee
                    </Label>
                    <Input
                      id="action-assignee"
                      placeholder="Who is responsible?"
                      value={actionItemAssignee}
                      onChange={(e) => setActionItemAssignee(e.target.value)}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="action-deadline">
                      <Calendar className="h-4 w-4 inline mr-2" />
                      Deadline
                    </Label>
                    <Input
                      id="action-deadline"
                      type="date"
                      value={actionItemDeadline}
                      onChange={(e) => setActionItemDeadline(e.target.value)}
                    />
                  </div>
                  <Button onClick={addActionItem} className="w-full">
                    Add Action Item
                  </Button>
                </div>
              </DialogContent>
            </Dialog>

<Button onClick={summarizeMinutes}>Summarize Minutes</Button>
          </div>
        </div>

{summary && (
          <Card>
            <CardHeader>
              <CardTitle>Summary</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="prose max-w-none">
                <pre className="whitespace-pre-wrap font-sans text-sm bg-muted p-4 rounded-md overflow-auto max-h-[400px]">
                  {summary}
                </pre>
              </div>
            </CardContent>
          </Card>
        )}
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/expenseease/page.tsx" isEdit="true" isQuickEdit="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { format } from "date-fns"
import { CalendarIcon, Upload, FileText } from "lucide-react"
import { Calendar } from "@/components/ui/calendar"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { cn } from "@/lib/utils"
import { BackButton } from "@/components/back-button"

type Expense = {
  id: string
  date: Date
  amount: number
  category: string
  description: string
  receipt?: File
}

const expenseCategories = [
  "Travel",
  "Meals",
  "Supplies",
  "Software",
  "Hardware",
  "Entertainment",
  "Accommodation",
  "Transportation",
  "Other",
]

export default function ExpenseEase() {
  const [date, setDate] = useState<Date | undefined>(new Date())
  const [amount, setAmount] = useState("")
  const [category, setCategory] = useState("")
  const [description, setDescription] = useState("")
  const [receipt, setReceipt] = useState<File | null>(null)
  const [expenses, setExpenses] = useState<Expense[]>([])
  const [showReport, setShowReport] = useState(false)

// Handle file upload
  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files[0]) {
      setReceipt(e.target.files[0])
    }
  }

// Add expense to the list
  const addExpense = () => {
    if (!date || !amount || !category) return

const newExpense: Expense = {
      id: Date.now().toString(),
      date: date,
      amount: Number.parseFloat(amount),
      category,
      description,
      receipt: receipt || undefined,
    }

setExpenses([...expenses, newExpense])

// Reset form
    setAmount("")
    setCategory("")
    setDescription("")
    setReceipt(null)
  }

// Generate expense report
  const generateReport = () => {
    setShowReport(true)
  }

// Calculate total expenses
  const calculateTotal = () => {
    return expenses.reduce((sum, expense) => sum + expense.amount, 0)
  }

// Group expenses by category
  const expensesByCategory = () => {
    const grouped: Record<string, number> = {}

expenses.forEach((expense) => {
      if (grouped[expense.category]) {
        grouped[expense.category] += expense.amount
      } else {
        grouped[expense.category] = expense.amount
      }
    })

return Object.entries(grouped).map(([category, amount]) => ({
      category,
      amount,
    }))
  }

return (
    <div className="space-y-6">
      <BackButton />

<div className="space-y-2">
        <h1 className="text-3xl font-bold tracking-tighter">ExpenseEase - Expense Reports</h1>
        <p className="text-muted-foreground">Track and manage your expenses with ease</p>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Add Expense</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="date">Date</Label>
                <Popover>
                  <PopoverTrigger asChild>
                    <Button
                      variant="outline"
                      className={cn("w-full justify-start text-left font-normal", !date && "text-muted-foreground")}
                    >
                      <CalendarIcon className="mr-2 h-4 w-4" />
                      {date ? format(date, "PPP") : <span>Pick a date</span>}
                    </Button>
                  </PopoverTrigger>
                  <PopoverContent className="w-auto p-0">
                    <Calendar mode="single" selected={date} onSelect={setDate} initialFocus />
                  </PopoverContent>
                </Popover>
              </div>

<div className="space-y-2">
                <Label htmlFor="amount">Amount</Label>
                <Input
                  id="amount"
                  type="number"
                  min="0"
                  step="0.01"
                  placeholder="0.00"
                  value={amount}
                  onChange={(e) => setAmount(e.target.value)}
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="category">Category</Label>
                <Select value={category} onValueChange={setCategory}>
                  <SelectTrigger id="category">
                    <SelectValue placeholder="Select category" />
                  </SelectTrigger>
                  <SelectContent>
                    {expenseCategories.map((cat) => (
                      <SelectItem key={cat} value={cat}>
                        {cat}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label htmlFor="description">Description</Label>
                <Textarea
                  id="description"
                  placeholder="Enter expense description"
                  value={description}
                  onChange={(e) => setDescription(e.target.value)}
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="receipt">Receipt (Optional)</Label>
                <div className="flex items-center gap-2">
                  <Input
                    id="receipt"
                    type="file"
                    accept="image/*,.pdf"
                    className="hidden"
                    onChange={handleFileChange}
                  />
                  <Button
                    variant="outline"
                    onClick={() => document.getElementById("receipt")?.click()}
                    className="w-full"
                  >
                    <Upload className="mr-2 h-4 w-4" />
                    {receipt ? receipt.name : "Upload Receipt"}
                  </Button>
                  {receipt && (
                    <Button variant="ghost" size="sm" onClick={() => setReceipt(null)}>
                      Clear
                    </Button>
                  )}
                </div>
              </div>

<Button onClick={addExpense} className="w-full">
                Add Expense
              </Button>
            </CardContent>
          </Card>

{expenses.length > 0 && (
            <>
              <div className="overflow-x-auto">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Date</TableHead>
                      <TableHead>Category</TableHead>
                      <TableHead>Description</TableHead>
                      <TableHead className="text-right">Amount</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {expenses.map((expense) => (
                      <TableRow key={expense.id}>
                        <TableCell>{format(expense.date, "MMM d, yyyy")}</TableCell>
                        <TableCell>{expense.category}</TableCell>
                        <TableCell>{expense.description}</TableCell>
                        <TableCell className="text-right">${expense.amount.toFixed(2)}</TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>

<Button onClick={generateReport} className="w-full mt-4">
                Generate Report
              </Button>
            </>
          )}
        </div>

{showReport && expenses.length > 0 && (
          <Card>
            <CardHeader>
              <CardTitle>Expense Report</CardTitle>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="space-y-2">
                <h3 className="text-lg font-medium">Summary</h3>
                <div className="bg-muted p-4 rounded-md">
                  <p>
                    Total Expenses: <span className="font-bold">${calculateTotal().toFixed(2)}</span>
                  </p>
                  <p>
                    Number of Expenses: <span className="font-bold">{expenses.length}</span>
                  </p>
                  <p>
                    Date Range:{" "}
                    <span className="font-bold">
                      {format(new Date(Math.min(...expenses.map((e) => e.date.getTime()))), "MMM d, yyyy")} -{" "}
                      {format(new Date(Math.max(...expenses.map((e) => e.date.getTime()))), "MMM d, yyyy")}
                    </span>
                  </p>
                </div>
              </div>

<div className="space-y-2">
                <h3 className="text-lg font-medium">Expenses by Category</h3>
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Category</TableHead>
                      <TableHead className="text-right">Amount</TableHead>
                      <TableHead className="text-right">Percentage</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {expensesByCategory().map((item, index) => (
                      <TableRow key={index}>
                        <TableCell>{item.category}</TableCell>
                        <TableCell className="text-right">${item.amount.toFixed(2)}</TableCell>
                        <TableCell className="text-right">
                          {((item.amount / calculateTotal()) * 100).toFixed(1)}%
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>

<div className="flex justify-end">
                <Button variant="outline" className="gap-2">
                  <FileText className="h-4 w-4" />
                  Download PDF
                </Button>
              </div>
            </CardContent>
          </Card>
        )}
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/navbar.tsx" isDeleted="true" isEdit="true"
...deleted...
</article></body></html>

About

About