[V0_FILE]typescriptreact:file="components/ui/progress.tsx" isMerged="true" "use client" import * as React from "react" import * as ProgressPrimitive from "@radix-ui/react-progress" import { cn } from "@/lib/utils" const Progress = React.forwardRef< React.ElementRef, React.ComponentProps >(({ className, value, ...props }, ref) => ( )) Progress.displayName = ProgressPrimitive.Root.displayName export { Progress } [V0_FILE]typescriptreact:file="dashboard.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import Image from "next/image" import { BarChart, ChevronLeft, ChevronRight, Search, Plus, Edit, Trash, ChevronDown, Bell, Home, CalendarIcon, MessageSquare, Star, Award, CreditCard, Utensils, ShoppingBag, Truck, Clock, DollarSign, Filter, Download, Printer, MoreHorizontal, Menu, } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle, CardFooter, CardDescription } from "@/components/ui/card" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuSeparator, } from "@/components/ui/dropdown-menu" import { Progress } from "@/components/ui/progress" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Checkbox } from "@/components/ui/checkbox" import { Textarea } from "@/components/ui/textarea" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { useToast } from "@/components/ui/use-toast" import { Bar, BarChart as RechartsBarChart, Line, LineChart as RechartsLineChart, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell, } from "recharts" export default function Dashboard() { const [activeTab, setActiveTab] = useState("stays") const [activeSection, setActiveSection] = useState("dashboard") const [isMobile, setIsMobile] = useState(false) const [sidebarOpen, setSidebarOpen] = useState(false) const { toast } = useToast() useEffect(() => { const handleResize = () => { setIsMobile(window.innerWidth < 768) } handleResize() window.addEventListener("resize", handleResize) return () => { window.removeEventListener("resize", handleResize) } }, []) // Sample data for charts const revenueData = [ { name: "Sun", value: 8 }, { name: "Mon", value: 10 }, { name: "Tue", value: 12 }, { name: "Wed", value: 11 }, { name: "Thu", value: 9 }, { name: "Fri", value: 11 }, { name: "Sat", value: 12 }, ] const guestsData = [ { name: "Sun", value: 8000 }, { name: "Mon", value: 10000 }, { name: "Tue", value: 12000 }, { name: "Wed", value: 9000 }, { name: "Thu", value: 6000 }, { name: "Fri", value: 8000 }, ] const roomsData = [ { name: "Sun", occupied: 15, booked: 10, available: 25 }, { name: "Mon", occupied: 20, booked: 12, available: 18 }, { name: "Tue", occupied: 18, booked: 15, available: 17 }, { name: "Wed", occupied: 22, booked: 10, available: 18 }, { name: "Thu", occupied: 20, booked: 15, available: 15 }, { name: "Fri", occupied: 18, booked: 12, available: 20 }, { name: "Sat", occupied: 15, booked: 10, available: 25 }, ] const foodOrdersData = [ { name: "Breakfast", value: 35 }, { name: "Lunch", value: 45 }, { name: "Dinner", value: 55 }, { name: "Room Service", value: 25 }, ] const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042"] const bookingData = [ { id: 1, name: "Ram Kailash", phone: "9905598912", bookingId: "SDK89635", nights: 2, roomType: "1 King Room", guests: 2, paid: "rsp.150", cost: "rsp.1500", avatar: "/placeholder.svg?height=32&width=32", }, { id: 2, name: "Samira Karki", phone: "9815394203", bookingId: "SDK89635", nights: 4, roomType: ["1 Queen", "1 King Room"], guests: 5, paid: "paid", cost: "rsp.5500", avatar: "/placeholder.svg?height=32&width=32", }, { id: 3, name: "Jeevan Rai", phone: "9865328452", bookingId: "SDK89635", nights: 1, roomType: ["1 Deluxe", "1 King Room"], guests: 3, paid: "rsp.150", cost: "rsp.2500", avatar: "/placeholder.svg?height=32&width=32", }, { id: 4, name: "Bindu Sharma", phone: "9845653124", bookingId: "SDK89635", nights: 3, roomType: ["1 Deluxe", "1 King Room"], guests: 2, paid: "rsp.150", cost: "rsp.3000", avatar: "/placeholder.svg?height=32&width=32", }, ] const foodOrders = [ { id: "FO-1234", guest: "Ram Kailash", room: "101", items: ["Chicken Curry", "Naan Bread", "Rice"], total: "rsp.850", status: "Delivered", time: "12:30 PM", }, { id: "FO-1235", guest: "Samira Karki", room: "205", items: ["Vegetable Pasta", "Garlic Bread", "Tiramisu"], total: "rsp.1200", status: "Preparing", time: "1:15 PM", }, { id: "FO-1236", guest: "Jeevan Rai", room: "310", items: ["Club Sandwich", "French Fries", "Coke"], total: "rsp.650", status: "On the way", time: "1:45 PM", }, ] const invoices = [ { id: "INV-2023-001", guest: "Ram Kailash", date: "26 Jul 2023", amount: "rsp.1500", status: "Paid", items: [ { description: "Room Charges (2 nights)", amount: "rsp.1200" }, { description: "Food & Beverages", amount: "rsp.300" }, ], }, { id: "INV-2023-002", guest: "Samira Karki", date: "25 Jul 2023", amount: "rsp.5500", status: "Paid", items: [ { description: "Room Charges (4 nights)", amount: "rsp.4800" }, { description: "Food & Beverages", amount: "rsp.700" }, ], }, { id: "INV-2023-003", guest: "Jeevan Rai", date: "24 Jul 2023", amount: "rsp.2500", status: "Pending", items: [ { description: "Room Charges (1 night)", amount: "rsp.2000" }, { description: "Food & Beverages", amount: "rsp.500" }, ], }, ] const calendarEvents = [ { date: 2, guest: "Carl Larson II", nights: 2, guests: 2 }, { date: 9, guest: "Mrs. Emmett Morar", nights: 2, guests: 2 }, { date: 24, guest: "Marjorie Klocko", nights: 2, guests: 2 }, ] const renderDashboard = () => ( <>

Wed // July 26th, 2023

{/* Stats Cards */}

Arrival (This week)

73

+24%

Previous week: 35

Departure (This week)

35

-12%

Previous week: 97

Booking (This week)

237

+31%

Previous week: 187

Today Activities

Room
Available

Room
Blocked

Guest

Total Revenue

Rs.35k

{/* Charts */}

Revenue This Month This Year

{ if (active && payload && payload.length) { return (

{`${payload[0].value} K`}

) } return null }} />

Guests This Month This Year

{ if (active && payload && payload.length) { return (

{`${payload[0].value}`}

) } return null }} />

Rooms This Month This Year

Total 50 Rooms

Occupied

Booked

Available

{ if (active && payload && payload.length) { return (

{`Occupied: ${payload[0].value}`}

{`Booked: ${payload[1].value}`}

{`Available: ${payload[2].value}`}

) } return null }} />

{/* Booking Table */} Todays Booking (8 Guest today) setActiveTab("stays")} > Stays setActiveTab("packages")} > Packages setActiveTab("arrivals")} > Arrivals setActiveTab("departure")} > Departure

NAME

BOOKING ID NIGHTS ROOM TYPE GUESTS PAID COST ACTION {bookingData.map((booking) => (

{booking.name .split(" ") .map((n) => n[0]) .join("")}

{booking.name}

{booking.phone}

{booking.bookingId} {booking.nights} {Array.isArray(booking.roomType) ? (

{booking.roomType.map((type, index) => (

{type}

))}

) : ( booking.roomType )} {booking.guests} Guests {booking.paid === "paid" ? ( paid ) : ( booking.paid )} {booking.cost}

))}

{/* Calendar and Rating */}

Calender

August 2023

August 02, 2023 Booking Lists

(3 Bookings)

{calendarEvents.map((event, index) => (

{event.guest .split(" ") .map((n) => n[0]) .join("")}

{event.guest}

{event.nights} Nights | {event.guests} Guests

))}

Overall Rating This Month This Year

Rating

4.5/5

+31%

Cleanliness

4.5

Facilities

4.5

Location

2.5

Room Comfort

2.5

Service

3.8

Value for money

3.8

) const renderBillingSystem = () => ( <>

Billing System

Total Revenue

Rs.125,000

+12% from last month

Paid Invoices

Rs.98,500

78% of total

Pending Payments

Rs.26,500

22% of total

Recent Invoices

Invoice ID Guest Date Amount Status Actions {invoices.map((invoice) => ( {invoice.id} {invoice.guest} {invoice.date} {invoice.amount} {invoice.status} { toast({ title: "Invoice details", description: `Viewing details for invoice ${invoice.id}`, }) }} > View Details { toast({ title: "Invoice printed", description: `Invoice ${invoice.id} sent to printer`, }) }} > Print { toast({ title: "Invoice downloaded", description: `Invoice ${invoice.id} downloaded as PDF`, }) }} > Download { toast({ title: "Payment reminder sent", description: `Reminder sent to ${invoice.guest}`, }) }} > Send Reminder ))}

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This