4c:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T5b83,"use client"; import * as React from "react"; import { Card, CardContent } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { Button } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Clock, Bed, DollarSign, User, Star, ChefHat, Car, CheckCircle, Users, Lock, Settings, ChevronDown, Search, Calendar, MoreVertical, TrendingUp, TrendingDown, Users2, Menu, X, } from "lucide-react"; import { cn } from "@/lib/utils"; // ─── Types ───────────────────────────────────────────────────────────────────── interface Booking { guestName: string; bookingId: string; guestCount: number; roomNumber: string; roomType: string; checkIn: string; checkOut: string; payment: string; status: "Confirmed" | "Checked - In" | "Cancelled"; } // ─── Data ─────────────────────────────────────────────────────────────────────── const bookings: Booking[] = [ { guestName: "Mr. John Smith", bookingId: "#25145", guestCount: 4, roomNumber: "No.07", roomType: "Suit Room", checkIn: "Aug 20, 2025", checkOut: "Aug 24, 2025", payment: "1400.00", status: "Confirmed", }, { guestName: "Ms. Nathan Zboncak", bookingId: "#25146", guestCount: 3, roomNumber: "No.12", roomType: "Deluxe Room", checkIn: "Aug 21, 2025", checkOut: "Aug 25, 2025", payment: "345.00", status: "Confirmed", }, { guestName: "Mr. Howard Goodwin", bookingId: "#25147", guestCount: 1, roomNumber: "No.30", roomType: "Premium Room", checkIn: "Aug 22, 2025", checkOut: "Aug 26, 2025", payment: "173.00", status: "Checked - In", }, { guestName: "Cornelius Davis Sr.", bookingId: "#25148", guestCount: 1, roomNumber: "No.001", roomType: "Villa VIP", checkIn: "Aug 23, 2025", checkOut: "Aug 27, 2025", payment: "740.00", status: "Confirmed", }, { guestName: "Mrs. Cecelia Oberbrunner", bookingId: "#25149", guestCount: 2, roomNumber: "No.55", roomType: "Economic", checkIn: "Aug 24, 2025", checkOut: "Aug 28, 2025", payment: "85.00", status: "Cancelled", }, { guestName: "Ms. Jodi Carter", bookingId: "#25150", guestCount: 2, roomNumber: "No.24", roomType: "Suit Room", checkIn: "Aug 25, 2025", checkOut: "Aug 29, 2025", payment: "214.00", status: "Checked - In", }, ]; // ─── Sub-components ───────────────────────────────────────────────────────────── function StatusBadge({ status }: { status: Booking["status"] }) { const variants = { Confirmed: "bg-[#E8F5E9] text-[#2E7D32] border-[#4CAF50]", "Checked - In": "bg-[#F3E5F5] text-[#7B1FA2] border-[#9C27B0]", Cancelled: "bg-[#FFEBEE] text-[#C62828] border-[#E53935]", }; return ( {status} ); } function NavItem({ icon: Icon, label, active = false, onClick, }: { icon: React.ComponentType<{ className?: string }>; label: string; active?: boolean; onClick?: () => void; }) { return ( ); } function MetricCard({ title, value, change, trend, }: { title: string; value: string; change: string; trend: "up" | "down"; }) { return (

{title}

{value}

{trend === "up" ? ( ) : ( )} {change}

); } // ─── Sidebar Nav Content ──────────────────────────────────────────────────────── function SidebarContent({ onClose }: { onClose?: () => void }) { return ( <> {/* Logo and Branding */}

Studio Management

{/* Navigation */} ); } // ─── Mobile Card Row ──────────────────────────────────────────────────────────── function BookingCard({ booking }: { booking: Booking }) { return (

{booking.guestName}

ID: {booking.bookingId}

View Details Edit Booking Cancel Booking

Room

{booking.roomNumber} · {booking.roomType}

Guests

{booking.guestCount}

Check-in

{booking.checkIn}

Check-out

{booking.checkOut}

Payment

${booking.payment}

); } // ─── Main Default Export ──────────────────────────────────────────────────────── export default function Dashboard01() { const [sidebarOpen, setSidebarOpen] = React.useState(false); return (

{/* ── Desktop Sidebar (lg+) ─────────────────────────── */} {/* ── Mobile Drawer Overlay ─────────────────────────── */} {sidebarOpen && (

setSidebarOpen(false)} /> )} {/* ── Mobile Sidebar Drawer ─────────────────────────── */} {/* ── Main Content ──────────────────────────────────── */}

{/* Mobile top bar */}

Studio

Guest Booking

{/* Header with breadcrumb + date picker */}

Home › Guest Booking

{/* Metric cards — 2-col on mobile, 4-col on md+ */}

{/* Search + Filter bar */}

{/* Filter chips — scroll horizontally on mobile */}

{["Special request", "Duration", "Booking date"].map((label) => ( ))}

{/* ── Mobile / tablet: card list (hidden on xl) ── */}

All Bookings {bookings.length}

{bookings.map((booking) => ( ))}

{/* ── Desktop: full table (hidden below xl) ── */}

Guest Room Check-in Check-out Payment Status Actions {bookings.map((booking) => (

{booking.guestName}

ID: {booking.bookingId}

{String(booking.guestCount).padStart(2, "0")}

{booking.roomNumber}

{booking.roomType}

{booking.checkIn} {booking.checkOut} ${booking.payment} View Details Edit Booking Cancel Booking ))}

); } 4b:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4c",null,{"namespace":"@d2","registryDependencies":["badge","button","card","dropdown-menu","input","table"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"registry/default/ui/dashboard-01.tsx","content":"$4e","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]