"use client"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Input } from "@/components/ui/input"; import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"; import { AreaChart, Area, XAxis, YAxis, CartesianGrid, ResponsiveContainer } from "recharts"; import { Search, BarChart3, MessageSquare, CreditCard, Users, Diamond, ShoppingCart, FileText, Mail, Settings, ChevronDown, MoreHorizontal, Download, Trash2, Plus, ChevronLeft, ChevronRight, Info, Menu } from "lucide-react"; // Sample data for the cash flow chart const cashFlowData = [ { month: "Jan", value: 45 }, { month: "Feb", value: 52 }, { month: "Mar", value: 48 }, { month: "Apr", value: 58 }, { month: "May", value: 55 }, { month: "Jun", value: 62 }, { month: "Jul", value: 65 }, { month: "Aug", value: 68 }, { month: "Sep", value: 70 }, { month: "Oct", value: 72 }, { month: "Nov", value: 75 }, { month: "Dec", value: 78 } ]; // Sample invoice data const invoices = [ { id: "BF826438-0001", customer: "Robert Baratheon", status: "Paid", date: "5/30/14", dueDate: "7/11/19", amount: "$928.41" }, { id: "ECF17C97-0017", customer: "Arlene McCoy", status: "Overdue by 1 day", date: "6/21/19", dueDate: "9/23/16", amount: "$396.84" }, { id: "FAD83817-0017", customer: "Devon Lane", status: "Due in 14 days", date: "7/11/19", dueDate: "3/4/16", amount: "$490.51" }, { id: "FAD83817-0017", customer: "Ronald Richards", status: "Partially Paid", date: "4/21/12", dueDate: "5/27/15", amount: "$601.13" }, { id: "FD10AC76-0017", customer: "Bessie Cooper", status: "Due in 14 days", date: "8/30/14", dueDate: "9/18/16", amount: "$450.54" }, { id: "ECF17C97-0016", customer: "Robert Fox", status: "Overdue by 1 day", date: "8/21/15", dueDate: "7/27/13", amount: "$169.43" }, { id: "FAD83817-0016", customer: "Guy Hawkins", status: "Paid", date: "1/31/14", dueDate: "5/19/12", amount: "$948.55" }, { id: "BF826438-0001", customer: "Courtney Henry", status: "Partially Paid", date: "5/19/12", dueDate: "12/10/13", amount: "$293.01" }, { id: "BF826438-0001", customer: "Jerome Bell", status: "Due in 14 days", date: "10/6/13", dueDate: "9/4/12", amount: "$219.78" }, { id: "FD10AC76-0017", customer: "Dianne Russell", status: "Paid", date: "12/4/17", dueDate: "4/4/18", amount: "$767.50" } ]; const sidebarItems = [ { icon: BarChart3, label: "Dashboard", active: false }, { icon: MessageSquare, label: "Discuss", active: false, hasSubmenu: true }, { icon: CreditCard, label: "Subscription", active: false }, { icon: Users, label: "Contact", active: false }, { icon: Diamond, label: "CRM", active: false }, { icon: ShoppingCart, label: "Sales", active: false }, { icon: FileText, label: "Invoice", active: true }, { icon: Mail, label: "Email Marketing", active: false, hasSubmenu: true }, { icon: Settings, label: "Settings", active: false } ]; function getStatusBadge(status: string) { switch (status) { case "Paid": return {status}; case "Partially Paid": return {status}; case "Due in 14 days": return {status}; default: return {status}; } } function MobileSidebar() { return ( ); } function SidebarContent() { return ( <> {/* Logo */}

Dashboard

{/* Search */}

{/* Navigation */} {/* User Profile */}

Darrell Steward

darrell@example.com

); } export default function PaymentDashboard() { return (

{/* Desktop Sidebar */}

{/* Main Content */}

{/* Header */}

Invoice

{/* Content */}

{/* Stats Cards */}

Total Invoices

$152.9k

+15.0 /month

Paid Invoices

$109.3k

+10.47 /month

Pending Invoices

$43k

+0.78 /month

{/* Total Receivables */} Total Receivables

Total Unpaid Invoices $43,078

CURRENT/OVERDUE

$109.1k

$65k

{/* Cash Flow Chart */}

Cash Flow

{/* Cash Flow Summary */}

Cash as on 04/01/2019

$691.9k

Incoming

$106.6k

Outgoing

$798.5k

{/* All Invoices Table */}

All Invoices

{invoices.map((invoice, index) => ( ))}

Invoice Number	Customer Name	Status	Date	Due Date	Amount	Download
{invoice.id}	{invoice.customer}	{getStatusBadge(invoice.status)}	{invoice.date}	{invoice.dueDate}	{invoice.amount}

{/* Pagination */}

...

); }