[V0_FILE]typescriptreact:file="app/page.tsx" import { redirect } from "next/navigation" export default function Home() { redirect("/dashboard") } [V0_FILE]typescriptreact:file="app/layout.tsx" 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: "Hotel Management System", description: "A modern hotel management system", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/dashboard-layout.tsx" "use client" import type React from "react" import { useState } from "react" import { usePathname } from "next/navigation" import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarProvider, SidebarTrigger, } from "@/components/ui/sidebar" import { ModeToggle } from "@/components/mode-toggle" import { Button } from "@/components/ui/button" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { BarChart3, BellIcon, Building2, CalendarDays, CreditCard, FileText, HotelIcon, LogOut, Settings, Users, } from "lucide-react" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" const navigationItems = [ { name: "Dashboard", href: "/dashboard", icon: BarChart3 }, { name: "Room Management", href: "/rooms", icon: HotelIcon }, { name: "Bookings", href: "/bookings", icon: CalendarDays }, { name: "Guests", href: "/guests", icon: Users }, { name: "Payments", href: "/payments", icon: CreditCard }, { name: "Staff", href: "/staff", icon: Building2 }, { name: "Reports", href: "/reports", icon: FileText }, ] export default function DashboardLayout({ children }: { children: React.ReactNode }) { const pathname = usePathname() const [notificationsOpen, setNotificationsOpen] = useState(false) return (

HotelPro

{navigationItems.map((item) => ( {item.name} ))}

John Doe Hotel Manager

Notifications

{children}

) } function Search(props: React.SVGProps) { return ( ) } function NotificationItem({ title, description, time }: { title: string; description: string; time: string }) { return (

{title}

{description}

{time}

) } [V0_FILE]typescriptreact:file="components/mode-toggle.tsx" "use client" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" export function ModeToggle() { const { setTheme } = useTheme() return ( setTheme("light")}>Light setTheme("dark")}>Dark setTheme("system")}>System ) } [V0_FILE]typescriptreact:file="app/dashboard/layout.tsx" import type React from "react" import DashboardLayout from "@/components/dashboard-layout" export default function Layout({ children }: { children: React.ReactNode }) { return {children} } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { ArrowDownIcon, ArrowUpIcon, BedDoubleIcon, CalendarIcon, CreditCardIcon, DollarSignIcon, PercentIcon, UsersIcon, } from "lucide-react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { OccupancyChart } from "@/components/dashboard/occupancy-chart" import { RevenueChart } from "@/components/dashboard/revenue-chart" export default function DashboardPage() { return (

Dashboard

Total Revenue

$45,231.89

+20.1% from last month

Occupancy Rate

84.3%

+4.3% from last month

Available Rooms

Out of 120 total rooms

New Bookings

+12

-8% from yesterday

Overview Analytics Reports

Occupancy Rate Room occupancy over the last 30 days Revenue Monthly revenue breakdown

Recent Bookings You have 6 new bookings today

{recentBookings.map((booking) => (

{booking.initials}

{booking.name}

Room {booking.room}

{booking.date}

{booking.status}

))}

Quick Actions Common tasks and operations

Analytics Content Detailed analytics will be displayed here

Analytics charts and data will be displayed here

Reports Content Generated reports will be displayed here

Report data and exports will be displayed here

) } const recentBookings = [ { id: "1", name: "Emma Thompson", room: "301", date: "Check-in: Today", status: "Confirmed", avatar: "/placeholder.svg", initials: "ET", }, { id: "2", name: "Michael Chen", room: "205", date: "Check-in: Tomorrow", status: "Pending", avatar: "/placeholder.svg", initials: "MC", }, { id: "3", name: "Sarah Johnson", room: "412", date: "Check-in: Today", status: "Confirmed", avatar: "/placeholder.svg", initials: "SJ", }, { id: "4", name: "David Williams", room: "118", date: "Check-out: Today", status: "Checked In", avatar: "/placeholder.svg", initials: "DW", }, { id: "5", name: "Olivia Martinez", room: "507", date: "Check-in: Mar 15", status: "Confirmed", avatar: "/placeholder.svg", initials: "OM", }, { id: "6", name: "James Wilson", room: "220", date: "Check-in: Mar 16", status: "Pending", avatar: "/placeholder.svg", initials: "JW", }, ] [V0_FILE]typescriptreact:file="components/dashboard/occupancy-chart.tsx" "use client" import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "@/components/ui/chart" const data = [ { name: "Mar 1", value: 78 }, { name: "Mar 5", value: 82 }, { name: "Mar 10", value: 87 }, { name: "Mar 15", value: 89 }, { name: "Mar 20", value: 84 }, { name: "Mar 25", value: 83 }, { name: "Mar 30", value: 84 }, ] export function OccupancyChart() { return ( `${value}%`} /> { if (active && payload && payload.length) { return (

Date {payload[0].payload.name}

Occupancy {payload[0].value}%

) } return null }} /> ) } [V0_FILE]typescriptreact:file="components/dashboard/revenue-chart.tsx" "use client" import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "@/components/ui/chart" const data = [ { name: "Jan", revenue: 32000, expenses: 21000 }, { name: "Feb", revenue: 38000, expenses: 24000 }, { name: "Mar", revenue: 45000, expenses: 28000 }, { name: "Apr", revenue: 40000, expenses: 25000 }, { name: "May", revenue: 42000, expenses: 27000 }, { name: "Jun", revenue: 48000, expenses: 30000 }, ] export function RevenueChart() { return ( `$${value / 1000}k`} /> { if (active && payload && payload.length) { return (

Month {payload[0].payload.name}

Revenue ${payload[0].value.toLocaleString()}

Expenses ${payload[1].value.toLocaleString()}

) } return null }} /> ) } [V0_FILE]typescriptreact:file="app/rooms/page.tsx" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Badge } from "@/components/ui/badge" import { BedDoubleIcon, FilterIcon, PlusIcon, RefreshCwIcon, SearchIcon, WrenchIcon } from "lucide-react" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" export default function RoomsPage() { return (

Room Management

Total Rooms

120

All hotel rooms

Available Available

Ready for booking

Occupied Occupied

Currently in use

Maintenance Maintenance

Under repair

Room Status Manage and update room statuses

All Rooms Standard Deluxe Suite

{roomData.map((room) => ( ))}

{roomData .filter((room) => room.type === "Standard") .map((room) => ( ))}

{roomData .filter((room) => room.type === "Deluxe") .map((room) => ( ))}

{roomData .filter((room) => room.type === "Suite") .map((room) => ( ))}

) } function RoomCard({ room }: { room: Room }) { return (

{room.status}

Room {room.number} {room.type}

{room.description}

${room.rate} / night

) } interface Room { number: string type: "Standard" | "Deluxe" | "Suite" status: "Available" | "Occupied" | "Maintenance" rate: number description: string image?: string } const roomData: Room[] = [ { number: "101", type: "Standard", status: "Available", rate: 99, description: "Queen bed, city view, 25m²", }, { number: "102", type: "Standard", status: "Occupied", rate: 99, description: "Queen bed, garden view, 25m²", }, { number: "201", type: "Deluxe", status: "Occupied", rate: 149, description: "King bed, city view, 35m²", }, { number: "202", type: "Deluxe", status: "Maintenance", rate: 149, description: "King bed, ocean view, 35m²", }, { number: "301", type: "Suite", status: "Available", rate: 249, description: "King bed, living room, 50m²", }, { number: "302", type: "Suite", status: "Occupied", rate: 249, description: "King bed, balcony, 50m²", }, ] [V0_FILE]typescriptreact:file="app/rooms/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/bookings/page.tsx" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { CalendarIcon, CheckIcon, ClockIcon, FilterIcon, PlusIcon, SearchIcon, XIcon } from "lucide-react" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" export default function BookingsPage() { return (

Bookings & Reservations

Total Bookings

248

Active reservations

Check-ins Today

+2 from yesterday

Check-outs Today

-3 from yesterday

Pending Confirmations

Awaiting confirmation

Manage Bookings View and manage all hotel reservations

Upcoming Current Stays Past Bookings Cancelled Guest Room Check-in Check-out Status Payment Actions {bookingData .filter((booking) => booking.status === "Confirmed" || booking.status === "Pending") .map((booking) => ( ))}

Guest Room Check-in Check-out Status Payment Actions {bookingData .filter((booking) => booking.status === "Checked In") .map((booking) => ( ))}

Guest Room Check-in Check-out Status Payment Actions {bookingData .filter((booking) => booking.status === "Checked Out") .map((booking) => ( ))}

Guest Room Check-in Check-out Status Payment Actions {bookingData .filter((booking) => booking.status === "Cancelled") .map((booking) => ( ))}

) } function BookingRow({ booking }: { booking: Booking }) { return (

{booking.guestInitials}

{booking.guestName}

{booking.guestEmail}

Room {booking.room}

{booking.roomType}

{booking.checkIn} {booking.checkOut} {booking.status}

{booking.paymentStatus}

{booking.paymentMethod}

) } interface Booking { id: string guestName: string guestEmail: string guestAvatar?: string guestInitials: string room: string roomType: string checkIn: string checkOut: string status: "Confirmed" | "Checked In" | "Checked Out" | "Pending" | "Cancelled" paymentStatus: string paymentMethod: string } const bookingData: Booking[] = [ { id: "1", guestName: "Emma Thompson", guestEmail: "emma.t@example.com", guestInitials: "ET", room: "301", roomType: "Suite", checkIn: "Mar 12, 2024", checkOut: "Mar 15, 2024", status: "Confirmed", paymentStatus: "Paid", paymentMethod: "Credit Card", }, { id: "2", guestName: "Michael Chen", guestEmail: "m.chen@example.com", guestInitials: "MC", room: "205", roomType: "Deluxe", checkIn: "Mar 13, 2024", checkOut: "Mar 16, 2024", status: "Pending", paymentStatus: "Pending", paymentMethod: "PayPal", }, { id: "3", guestName: "Sarah Johnson", guestEmail: "s.johnson@example.com", guestInitials: "SJ", room: "412", roomType: "Suite", checkIn: "Mar 10, 2024", checkOut: "Mar 14, 2024", status: "Checked In", paymentStatus: "Paid", paymentMethod: "Credit Card", }, { id: "4", guestName: "David Williams", guestEmail: "d.williams@example.com", guestInitials: "DW", room: "118", roomType: "Standard", checkIn: "Mar 8, 2024", checkOut: "Mar 12, 2024", status: "Checked Out", paymentStatus: "Paid", paymentMethod: "MPesa", }, { id: "5", guestName: "Olivia Martinez", guestEmail: "o.martinez@example.com", guestInitials: "OM", room: "507", roomType: "Deluxe", checkIn: "Mar 15, 2024", checkOut: "Mar 18, 2024", status: "Confirmed", paymentStatus: "Paid", paymentMethod: "Credit Card", }, { id: "6", guestName: "James Wilson", guestEmail: "j.wilson@example.com", guestInitials: "JW", room: "220", roomType: "Standard", checkIn: "Mar 5, 2024", checkOut: "Mar 7, 2024", status: "Cancelled", paymentStatus: "Refunded", paymentMethod: "Credit Card", }, ] [V0_FILE]typescriptreact:file="app/bookings/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.75rem; --sidebar-background: 0 0% 100%; --sidebar-foreground: 222.2 84% 4.9%; --sidebar-primary: 221.2 83.2% 53.3%; --sidebar-primary-foreground: 210 40% 98%; --sidebar-accent: 210 40% 96.1%; --sidebar-accent-foreground: 222.2 47.4% 11.2%; --sidebar-border: 214.3 31.8% 91.4%; --sidebar-ring: 221.2 83.2% 53.3%; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; --sidebar-background: 222.2 84% 4.9%; --sidebar-foreground: 210 40% 98%; --sidebar-primary: 217.2 91.2% 59.8%; --sidebar-primary-foreground: 222.2 47.4% 11.2%; --sidebar-accent: 217.2 32.6% 17.5%; --sidebar-accent-foreground: 210 40% 98%; --sidebar-border: 217.2 32.6% 17.5%; --sidebar-ring: 224.3 76.3% 48%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="tailwind.config.ts" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, sidebar: { DEFAULT: "hsl(var(--sidebar-background))", foreground: "hsl(var(--sidebar-foreground))", primary: "hsl(var(--sidebar-primary))", "primary-foreground": "hsl(var(--sidebar-primary-foreground))", accent: "hsl(var(--sidebar-accent))", "accent-foreground": "hsl(var(--sidebar-accent-foreground))", border: "hsl(var(--sidebar-border))", ring: "hsl(var(--sidebar-ring))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="app/guests/page.tsx" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { FilterIcon, PlusIcon, SearchIcon, UserIcon, UsersIcon } from "lucide-react" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" export default function GuestsPage() { return (

Guest Management

Total Guests

1,248

All registered guests

Current Guests

Currently staying

VIP Guests VIP

Premium members

New Registrations

This week

Guest Directory View and manage guest profiles

All Guests Current VIP Recent Guest Contact Status Last Stay Total Stays Preferences Actions {guestData.map((guest) => ( ))}

Guest Contact Status Last Stay Total Stays Preferences Actions {guestData .filter((guest) => guest.status === "Current") .map((guest) => ( ))}

Guest Contact Status Last Stay Total Stays Preferences Actions {guestData .filter((guest) => guest.vip) .map((guest) => ( ))}

Guest Contact Status Last Stay Total Stays Preferences Actions {guestData .filter((guest) => guest.status === "Recent") .map((guest) => ( ))}

) } function GuestRow({ guest }: { guest: Guest }) { return (

{guest.initials}

{guest.name} {guest.vip && ( VIP )}

{guest.nationality}

{guest.email}

{guest.phone}

{guest.status} {guest.lastStay} {guest.totalStays}

{guest.preferences.map((pref, index) => ( {pref} ))}

) } interface Guest { id: string name: string initials: string avatar?: string email: string phone: string nationality: string status: "Current" | "Recent" | "Past" lastStay: string totalStays: number vip: boolean preferences: string[] } const guestData: Guest[] = [ { id: "1", name: "Emma Thompson", initials: "ET", email: "emma.t@example.com", phone: "+1 (555) 123-4567", nationality: "United States", status: "Current", lastStay: "Mar 12, 2024", totalStays: 5, vip: true, preferences: ["High Floor", "Non-Smoking", "Early Check-in"], }, { id: "2", name: "Michael Chen", initials: "MC", email: "m.chen@example.com", phone: "+1 (555) 987-6543", nationality: "Canada", status: "Current", lastStay: "Mar 13, 2024", totalStays: 2, vip: false, preferences: ["King Bed", "Quiet Room"], }, { id: "3", name: "Sarah Johnson", initials: "SJ", email: "s.johnson@example.com", phone: "+1 (555) 456-7890", nationality: "United Kingdom", status: "Current", lastStay: "Mar 10, 2024", totalStays: 8, vip: true, preferences: ["Ocean View", "Extra Pillows", "Late Check-out"], }, { id: "4", name: "David Williams", initials: "DW", email: "d.williams@example.com", phone: "+1 (555) 789-0123", nationality: "Australia", status: "Recent", lastStay: "Mar 5, 2024", totalStays: 3, vip: false, preferences: ["City View", "Extra Towels"], }, { id: "5", name: "Olivia Martinez", initials: "OM", email: "o.martinez@example.com", phone: "+1 (555) 234-5678", nationality: "Spain", status: "Past", lastStay: "Feb 20, 2024", totalStays: 1, vip: false, preferences: ["Twin Beds"], }, { id: "6", name: "James Wilson", initials: "JW", email: "j.wilson@example.com", phone: "+1 (555) 345-6789", nationality: "Germany", status: "Recent", lastStay: "Mar 1, 2024", totalStays: 4, vip: true, preferences: ["Suite", "Champagne Welcome", "Airport Transfer"], }, ] [V0_FILE]typescriptreact:file="app/guests/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/payments/page.tsx" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { ArrowDownIcon, ArrowUpIcon, CreditCardIcon, DollarSignIcon, FilterIcon, PlusIcon, SearchIcon, WalletIcon, } from "lucide-react" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" export default function PaymentsPage() { return (

Payments & Invoicing

Total Revenue

$45,231.89

+20.1% from last month

Pending Payments

$5,946.00

-4.3% from last week

Transactions

1,248

This month

Average Transaction

$189.43

+2.5% from last month

Payment Transactions View and manage all payment transactions

All Transactions Recent Pending Refunds Transaction ID Guest Date Amount Method Status Actions {transactionData.map((transaction) => ( ))}

Transaction ID Guest Date Amount Method Status Actions {transactionData.slice(0, 3).map((transaction) => ( ))}

Transaction ID Guest Date Amount Method Status Actions {transactionData .filter((t) => t.status === "Pending") .map((transaction) => ( ))}

Transaction ID Guest Date Amount Method Status Actions {transactionData .filter((t) => t.status === "Refunded") .map((transaction) => ( ))}

) } function TransactionRow({ transaction }: { transaction: Transaction }) { return ( {transaction.id}

{transaction.guestInitials}

{transaction.guestName}

{transaction.date} ${transaction.amount.toFixed(2)}

{transaction.method}

{transaction.status}

) } interface Transaction { id: string guestName: string guestInitials: string guestAvatar?: string date: string amount: number method: string status: "Completed" | "Pending" | "Failed" | "Refunded" } const transactionData: Transaction[] = [ { id: "TRX-4829", guestName: "Emma Thompson", guestInitials: "ET", date: "Mar 12, 2024", amount: 450.0, method: "Credit Card", status: "Completed", }, { id: "TRX-4830", guestName: "Michael Chen", guestInitials: "MC", date: "Mar 13, 2024", amount: 325.5, method: "PayPal", status: "Pending", }, { id: "TRX-4831", guestName: "Sarah Johnson", guestInitials: "SJ", date: "Mar 10, 2024", amount: 780.25, method: "Credit Card", status: "Completed", }, { id: "TRX-4832", guestName: "David Williams", guestInitials: "DW", date: "Mar 8, 2024", amount: 195.0, method: "MPesa", status: "Completed", }, { id: "TRX-4833", guestName: "Olivia Martinez", guestInitials: "OM", date: "Mar 5, 2024", amount: 550.75, method: "Credit Card", status: "Refunded", }, { id: "TRX-4834", guestName: "James Wilson", guestInitials: "JW", date: "Mar 3, 2024", amount: 225.0, method: "Credit Card", status: "Failed", }, ] [V0_FILE]typescriptreact:file="app/payments/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/ui/chart.tsx" isQuickEdit="true" import type React from "react" export const Area = () => { return <> } export const AreaChart = () => { return <> } export const CartesianGrid = () => { return <> } export const ResponsiveContainer = ({ children }: { children: React.ReactNode }) => { return <>{children} } export const Tooltip = () => { return <> } export const XAxis = () => { return <> } export const YAxis = () => { return <> } export const Bar = () => { return <> } export const BarChart = () => { return <> }

About

About