Rental Management

\n Manage boat rentals and track customer information\n

\n setShowForm(true)}\n className=\"inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500\"\n >\n 📋 New Rental\n \n

\n\n {/* Add/Edit Form */}\n {showForm && (\n

\n {editingRental ? 'Edit Rental' : 'Create New Rental'}\n

\n \n Boat *\n \n setFormData({ ...formData, boat_id: parseInt(e.target.value) })}\n className=\"mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500 sm:text-sm\"\n >\n \n {boats.map((boat) => (\n \n ))}\n \n

\n \n Status\n \n setFormData({ ...formData, status: e.target.value as any })}\n className=\"mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500 sm:text-sm\"\n >\n \n \n \n \n \n

\n \n Renter Name *\n \n setFormData({ ...formData, renter_name: e.target.value })}\n className=\"mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500 sm:text-sm\"\n />\n

\n \n Email\n \n setFormData({ ...formData, renter_email: e.target.value })}\n className=\"mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500 sm:text-sm\"\n />\n

\n \n Phone\n \n setFormData({ ...formData, renter_phone: e.target.value })}\n className=\"mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500 sm:text-sm\"\n />\n

\n \n Start Date & Time *\n \n setFormData({ ...formData, start_date: e.target.value })}\n className=\"mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500 sm:text-sm\"\n />\n

\n \n End Date & Time *\n \n setFormData({ ...formData, end_date: e.target.value })}\n className=\"mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500 sm:text-sm\"\n />\n

\n \n Deposit Amount\n \n setFormData({ ...formData, deposit_amount: e.target.value ? parseFloat(e.target.value) : undefined })}\n className=\"mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500 sm:text-sm\"\n />\n

\n \n Rental Fee\n \n setFormData({ ...formData, rental_fee: e.target.value ? parseFloat(e.target.value) : undefined })}\n className=\"mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500 sm:text-sm\"\n />\n

\n \n Notes\n \n setFormData({ ...formData, notes: e.target.value })}\n className=\"mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500 sm:text-sm\"\n />\n

\n \n Cancel\n \n \n {editingRental ? 'Update' : 'Create'} Rental\n \n

\n )}\n\n {/* Rentals List */}\n

\n
No rentals found. Create your first rental to get started.
\n
\n
\n
\n
\n
\n 📋\n
\n
\n
\n
\n {rental.boat_name || `Boat #${rental.boat_id}`}\n
\n \n {rental.status}\n \n {isOverdue(rental) && (\n \n ⚠️ Overdue\n \n )}\n
\n
\n {rental.renter_name}\n {rental.renter_email && ` • ${rental.renter_email}`}\n {rental.renter_phone && ` • ${rental.renter_phone}`}\n
\n
\n Start: {formatDateTime(rental.start_date)}\n End: {formatDateTime(rental.end_date)}\n {rental.deposit_amount && Deposit: {formatCurrency(rental.deposit_amount)}}\n {rental.rental_fee && Fee: {formatCurrency(rental.rental_fee)}}\n
\n {rental.notes && (\n
\n Notes: {rental.notes}\n
\n )}\n
\n
\n
\n handleEdit(rental)}\n className=\"inline-flex items-center px-3 py-1 border border-gray-300 shadow-sm text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500\"\n >\n ✏️ Edit\n \n handleDelete(rental)}\n className=\"inline-flex items-center px-3 py-1 border border-red-300 shadow-sm text-xs font-medium rounded text-red-700 bg-white hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500\"\n >\n 🗑️ Delete\n \n
\n
\n
\n

\n );\n}","deleted","label",[167,168,149],"frontend","components","permalink","https://www.val.town/x/bart/Rowing/code/frontend/components/RentalManager.tsx","extension","actionData","errors"]