mirror of
https://github.com/rjNemo/rentease.git
synced 2026-06-06 02:36:49 +00:00
288 lines
9.2 KiB
HTML
288 lines
9.2 KiB
HTML
<!doctype html>
|
|
<html lang="en" data-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Booking Details - RentEase</title>
|
|
<link
|
|
href="https://cdn.jsdelivr.net/npm/daisyui@latest/dist/full.css"
|
|
rel="stylesheet"
|
|
type="text/css"
|
|
/>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
/* Custom styles can go here if needed, but DaisyUI should handle most */
|
|
body {
|
|
background-color: #1a1a2e; /* A darker background for the 'dark' theme feel */
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen p-4 sm:p-6 md:p-8">
|
|
<div class="navbar bg-base-100 rounded-box shadow-lg mb-8">
|
|
<div class="flex-1">
|
|
<a class="btn btn-ghost text-xl normal-case">RentEase</a>
|
|
</div>
|
|
<div class="flex-none gap-2">
|
|
<ul class="menu menu-horizontal px-1">
|
|
<li><a>Bookings</a></li>
|
|
<li><a>Reports</a></li>
|
|
</ul>
|
|
<button class="btn btn-primary">New Booking</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="container mx-auto p-4 sm:p-6 lg:p-8 bg-base-200 rounded-box shadow-xl"
|
|
>
|
|
<div class="flex justify-between items-center mb-6">
|
|
<div>
|
|
<h1 class="text-3xl font-bold mb-1">Montagnac</h1>
|
|
<p class="text-lg text-base-content/80">VFNI00327</p>
|
|
</div>
|
|
<div class="flex space-x-2">
|
|
<button class="btn btn-outline btn-info">Create PDF</button>
|
|
<button class="btn btn-error btn-outline">Cancel</button>
|
|
<button class="btn btn-primary">Update</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
|
|
<div class="card bg-base-100 shadow-md p-6">
|
|
<h2
|
|
class="text-xl font-semibold mb-4 border-b pb-2 border-base-content/10"
|
|
>
|
|
Customer Information
|
|
</h2>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="label">
|
|
<span class="label-text">Customer Name</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
placeholder="Montagnac"
|
|
value="Montagnac"
|
|
class="input input-bordered w-full"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="label">
|
|
<span class="label-text">Phone Number</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
placeholder="+596 696 08 42 13"
|
|
value="+596 696 08 42 13"
|
|
class="input input-bordered w-full"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="label">
|
|
<span class="label-text">Email</span>
|
|
</label>
|
|
<input
|
|
type="email"
|
|
placeholder="customer@example.com"
|
|
class="input input-bordered w-full"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="label">
|
|
<span class="label-text">Customer Number</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
placeholder="2"
|
|
value="2"
|
|
class="input input-bordered w-full"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card bg-base-100 shadow-md p-6">
|
|
<h2
|
|
class="text-xl font-semibold mb-4 border-b pb-2 border-base-content/10"
|
|
>
|
|
Booking Details
|
|
</h2>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="label">
|
|
<span class="label-text">From</span>
|
|
</label>
|
|
<input
|
|
type="date"
|
|
value="2025-05-24"
|
|
class="input input-bordered w-full"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="label">
|
|
<span class="label-text">To</span>
|
|
</label>
|
|
<input
|
|
type="date"
|
|
value="2025-05-31"
|
|
class="input input-bordered w-full"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="label">
|
|
<span class="label-text">Platform</span>
|
|
</label>
|
|
<select class="select select-bordered w-full">
|
|
<option disabled selected>Other</option>
|
|
<option>Airbnb</option>
|
|
<option>Booking.com</option>
|
|
<option>Direct</option>
|
|
<option>Other</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="label">
|
|
<span class="label-text">Platform ID</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
placeholder=""
|
|
class="input input-bordered w-full"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="label">
|
|
<span class="label-text">Rate</span>
|
|
</label>
|
|
<input
|
|
type="number"
|
|
placeholder="0.00"
|
|
value="0.00"
|
|
class="input input-bordered w-full"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-end mt-6">
|
|
<button class="btn btn-accent">Add Payment</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card bg-base-100 shadow-md p-6 mb-8">
|
|
<h2
|
|
class="text-xl font-semibold mb-4 border-b pb-2 border-base-content/10"
|
|
>
|
|
Line Items
|
|
</h2>
|
|
<div class="overflow-x-auto mb-6">
|
|
<table class="table w-full">
|
|
<thead>
|
|
<tr>
|
|
<th>Item</th>
|
|
<th>Quantity</th>
|
|
<th>Price (€)</th>
|
|
<th>Payment Method</th>
|
|
<th>Sub-total (€)</th>
|
|
<th class="text-right">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>TS</td>
|
|
<td>7</td>
|
|
<td>65.00</td>
|
|
<td>
|
|
<input
|
|
type="text"
|
|
placeholder="Payment Method"
|
|
class="input input-ghost input-xs w-full max-w-xs"
|
|
/>
|
|
</td>
|
|
<td>455.00</td>
|
|
<td class="text-right">
|
|
<button class="btn btn-xs btn-outline btn-warning">
|
|
Edit
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Cleaning Fee</td>
|
|
<td>1</td>
|
|
<td>50.00</td>
|
|
<td>
|
|
<input
|
|
type="text"
|
|
placeholder="Payment Method"
|
|
class="input input-ghost input-xs w-full max-w-xs"
|
|
/>
|
|
</td>
|
|
<td>50.00</td>
|
|
<td class="text-right">
|
|
<button class="btn btn-xs btn-outline btn-warning">
|
|
Edit
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot>
|
|
<tr>
|
|
<td colspan="4" class="text-right font-bold">Total:</td>
|
|
<td colspan="2" class="font-bold">505.00</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="border-t pt-4 border-base-content/10">
|
|
<h3 class="text-lg font-semibold mb-3">Add New Line Item</h3>
|
|
<div
|
|
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 items-end"
|
|
>
|
|
<div>
|
|
<label class="label">
|
|
<span class="label-text">Item</span>
|
|
</label>
|
|
<select class="select select-bordered w-full">
|
|
<option disabled selected>Airport</option>
|
|
<option>Security Deposit</option>
|
|
<option>Late Check-out</option>
|
|
<option>Extra Guest</option>
|
|
<option>Other Service</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="label">
|
|
<span class="label-text">Quantity</span>
|
|
</label>
|
|
<input
|
|
type="number"
|
|
placeholder="1"
|
|
class="input input-bordered w-full"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="label">
|
|
<span class="label-text">Price (€)</span>
|
|
</label>
|
|
<input
|
|
type="number"
|
|
placeholder="0.00"
|
|
class="input input-bordered w-full"
|
|
/>
|
|
</div>
|
|
<div class="flex justify-end md:justify-start">
|
|
<button class="btn btn-secondary">Add Line Item</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer
|
|
class="footer footer-center p-4 bg-base-300 text-base-content rounded-t-box mt-8"
|
|
>
|
|
<aside>
|
|
<p>Copyright © 2024 - All right reserved by RentEase</p>
|
|
</aside>
|
|
</footer>
|
|
</body>
|
|
</html>
|