"use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Receipt, Plus, Download, Upload, ChevronDown, ChevronUp, Clock } from "lucide-react" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { Separator } from "@/components/ui/separator" import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs" import { cn } from "@/lib/utils" import { DotPattern } from "@/components/backgrounds/dot-pattern" import { stagger, staggerItem, cardHover, cardHoverTarget } from "@/lib/animations" const initialExpenses = [ { id: 1, title: "Uber to Client Meeting", amount: 34.50, category: "Travel", date: "Jun 10, 2026", status: "Approved", receipt: true }, { id: 2, title: "Team Lunch", amount: 89.20, category: "Meals", date: "Jun 8, 2026", status: "Pending", receipt: true }, { id: 3, title: "Software License (Figma)", amount: 15.00, category: "Software", date: "Jun 5, 2026", status: "Approved", receipt: false }, { id: 4, title: "Office Supplies", amount: 42.99, category: "Supplies", date: "Jun 3, 2026", status: "Rejected", receipt: true }, { id: 5, title: "Conference Ticket", amount: 299.00, category: "Travel", date: "May 28, 2026", status: "Pending", receipt: true }, { id: 6, title: "Printer Ink Cartridge", amount: 67.50, category: "Supplies", date: "May 25, 2026", status: "Approved", receipt: true }, ] const statusStyles: Record = { Approved: "bg-emerald-500/10 text-emerald-600 border-emerald-200 dark:border-emerald-800", Pending: "bg-amber-500/10 text-amber-600 border-amber-200 dark:border-amber-800", Rejected: "bg-red-500/10 text-red-600 border-red-200 dark:border-red-800", } export default function Expenses() { const [expenses, setExpenses] = useState(initialExpenses) const [expandedId, setExpandedId] = useState(null) const [showSubmit, setShowSubmit] = useState(false) const totalPending = expenses.filter((e) => e.status === "Pending").reduce((s, e) => s + e.amount, 0) return (

Expenses

Submit and track your expenses.

Total Expenses

$548.19

This month

Pending Approval

${totalPending.toFixed(2)}

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

Approved

${expenses.filter((e) => e.status === "Approved").reduce((s, e) => s + e.amount, 0).toFixed(2)}

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

{showSubmit && ( Submit Expense Enter the details of your expense.

Title

Amount