Skip to content

Commit 6e3b30b

Browse files
Ifaz-IkramIfaz-Ikram
committed
style: Enhance Bookings page with improved layout, colors, and button styles for better user experience
1 parent def244c commit 6e3b30b

File tree

1 file changed

+151
-47
lines changed

1 file changed

+151
-47
lines changed

‎src/pages/Bookings.js‎

Lines changed: 151 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -148,34 +148,61 @@ const Bookings = () => {
148148
};
149149

150150
return (
151-
<Container fluid className="py-4" style={{ minHeight: '100vh' }}>
151+
<Container fluid className="py-4" style={{
152+
minHeight: '100vh',
153+
backgroundColor: '#f8f9fa'
154+
}}>
152155
{/* Page Header */}
153-
<Row className="mb-4">
154-
<Col>
155-
<div className="page-header">
156-
<div className="d-flex justify-content-between align-items-center">
157-
<div>
158-
<h2 className="mb-1">Bookings Management</h2>
159-
<p style={{ marginBottom: 0 }}>
160-
Manage hotel room bookings across all SkyNest branches
161-
</p>
162-
</div>
163-
<Button
164-
variant="primary"
165-
onClick={() => handleShowModal('add')}
166-
>
167-
<FaPlus className="me-2" />
168-
New Booking
169-
</Button>
170-
</div>
156+
<div style={{
157+
background: 'linear-gradient(135deg, #1a237e 0%, #0d47a1 100%)',
158+
color: 'white',
159+
padding: '30px',
160+
borderRadius: '12px',
161+
marginBottom: '30px',
162+
boxShadow: '0 4px 6px rgba(0,0,0,0.1)'
163+
}}>
164+
<div className="d-flex justify-content-between align-items-center">
165+
<div>
166+
<h2 style={{ margin: 0, fontSize: '2rem', fontWeight: 'bold', marginBottom: '8px' }}>Bookings Management</h2>
167+
<p style={{ marginBottom: 0, fontSize: '1.1rem', opacity: 0.9 }}>
168+
Manage hotel room bookings across all SkyNest branches
169+
</p>
171170
</div>
172-
</Col>
173-
</Row>
171+
<Button
172+
style={{
173+
background: 'rgba(255, 255, 255, 0.2)',
174+
border: '1px solid rgba(255, 255, 255, 0.3)',
175+
color: 'white',
176+
fontWeight: '600',
177+
padding: '10px 24px',
178+
borderRadius: '8px',
179+
transition: 'all 0.3s ease'
180+
}}
181+
onMouseEnter={(e) => {
182+
e.target.style.background = 'rgba(255, 255, 255, 0.3)';
183+
}}
184+
onMouseLeave={(e) => {
185+
e.target.style.background = 'rgba(255, 255, 255, 0.2)';
186+
}}
187+
onClick={() => handleShowModal('add')}
188+
>
189+
<FaPlus className="me-2" />
190+
New Booking
191+
</Button>
192+
</div>
193+
</div>
174194

175195
{/* Booking Statistics */}
176196
<Row className="mb-4">
177197
<Col md={3}>
178-
<Card className="stat-card h-100">
198+
<Card style={{
199+
background: 'linear-gradient(135deg, #1a237e 0%, #0d47a1 100%)',
200+
border: 'none',
201+
borderRadius: '12px',
202+
boxShadow: '0 4px 12px rgba(26, 35, 126, 0.2)',
203+
color: 'white',
204+
height: '100%'
205+
}}>
179206
<Card.Body className="text-center">
180207
<h3 style={{ color: 'white', fontWeight: '700', fontSize: '2.5rem' }}>
181208
{bookings.length}
@@ -187,7 +214,14 @@ const Bookings = () => {
187214
</Card>
188215
</Col>
189216
<Col md={3}>
190-
<Card className="stat-card h-100">
217+
<Card style={{
218+
background: 'linear-gradient(135deg, #1976d2 0%, #0d47a1 100%)',
219+
border: 'none',
220+
borderRadius: '12px',
221+
boxShadow: '0 4px 12px rgba(25, 118, 210, 0.2)',
222+
color: 'white',
223+
height: '100%'
224+
}}>
191225
<Card.Body className="text-center">
192226
<h3 style={{ color: 'white', fontWeight: '700', fontSize: '2.5rem' }}>
193227
{bookings.filter(b => b.status === 'Checked-In').length}
@@ -199,7 +233,14 @@ const Bookings = () => {
199233
</Card>
200234
</Col>
201235
<Col md={3}>
202-
<Card className="stat-card h-100">
236+
<Card style={{
237+
background: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
238+
border: 'none',
239+
borderRadius: '12px',
240+
boxShadow: '0 4px 12px rgba(245, 158, 11, 0.2)',
241+
color: 'white',
242+
height: '100%'
243+
}}>
203244
<Card.Body className="text-center">
204245
<h3 style={{ color: 'white', fontWeight: '700', fontSize: '2.5rem' }}>
205246
{bookings.filter(b => b.status === 'Pending Payment').length}
@@ -211,7 +252,14 @@ const Bookings = () => {
211252
</Card>
212253
</Col>
213254
<Col md={3}>
214-
<Card className="stat-card h-100">
255+
<Card style={{
256+
background: 'linear-gradient(135deg, #28a745 0%, #218838 100%)',
257+
border: 'none',
258+
borderRadius: '12px',
259+
boxShadow: '0 4px 12px rgba(40, 167, 69, 0.2)',
260+
color: 'white',
261+
height: '100%'
262+
}}>
215263
<Card.Body className="text-center">
216264
<h3 style={{ color: 'white', fontWeight: '700', fontSize: '2.5rem' }}>
217265
{formatCurrency(bookings.reduce((sum, b) => sum + b.totalAmount, 0))}
@@ -228,12 +276,17 @@ const Bookings = () => {
228276
<Row className="mb-3">
229277
<Col md={6}>
230278
<Form.Group>
231-
<Form.Label style={{ color: '#2c3e50', fontWeight: '600', marginBottom: '8px' }}>
279+
<Form.Label style={{ color: '#1a237e', fontWeight: '600', marginBottom: '8px' }}>
232280
Filter by Status
233281
</Form.Label>
234282
<Form.Select
235283
value={filterStatus}
236284
onChange={(e) => setFilterStatus(e.target.value)}
285+
style={{
286+
borderColor: '#1976d2',
287+
borderRadius: '8px',
288+
padding: '10px'
289+
}}
237290
>
238291
<option value="All">All Bookings</option>
239292
<option value="Confirmed">Confirmed</option>
@@ -249,28 +302,37 @@ const Bookings = () => {
249302
{/* Bookings Table */}
250303
<Row>
251304
<Col>
252-
<Card>
253-
<Card.Header style={{ background: '#f8f9fa', borderBottom: '1px solid #e0e6ed' }}>
254-
<h5 className="mb-0" style={{ fontWeight: '700', color: '#2c3e50' }}>
305+
<Card style={{
306+
background: 'white',
307+
borderRadius: '12px',
308+
border: '1px solid #e2e8f0',
309+
boxShadow: '0 2px 8px rgba(0,0,0,0.08)'
310+
}}>
311+
<Card.Header style={{
312+
background: 'linear-gradient(135deg, #1a237e 0%, #0d47a1 100%)',
313+
borderBottom: '2px solid #1976d2',
314+
borderRadius: '12px 12px 0 0'
315+
}}>
316+
<h5 className="mb-0" style={{ fontWeight: '700', color: 'white' }}>
255317
Bookings List ({filteredBookings.length})
256318
</h5>
257319
</Card.Header>
258320
<Card.Body style={{ padding: 0 }}>
259321
<div style={{ overflowX: 'auto' }}>
260322
<Table responsive style={{ marginBottom: 0 }}>
261-
<thead style={{ backgroundColor: '#f8f9fa', borderBottom: '2px solid #e0e6ed' }}>
323+
<thead style={{ backgroundColor: '#f8f9fa', borderBottom: '2px solid #1976d2' }}>
262324
<tr>
263-
<th style={{ padding: '16px', fontWeight: '600', color: '#5a6c7d', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Booking ID</th>
264-
<th style={{ padding: '16px', fontWeight: '600', color: '#5a6c7d', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Guest Name</th>
265-
<th style={{ padding: '16px', fontWeight: '600', color: '#5a6c7d', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Hotel/Room</th>
266-
<th style={{ padding: '16px', fontWeight: '600', color: '#5a6c7d', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Check-in</th>
267-
<th style={{ padding: '16px', fontWeight: '600', color: '#5a6c7d', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Check-out</th>
268-
<th style={{ padding: '16px', fontWeight: '600', color: '#5a6c7d', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Nights</th>
269-
<th style={{ padding: '16px', fontWeight: '600', color: '#5a6c7d', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Guests</th>
270-
<th style={{ padding: '16px', fontWeight: '600', color: '#5a6c7d', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Amount</th>
271-
<th style={{ padding: '16px', fontWeight: '600', color: '#5a6c7d', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Payment</th>
272-
<th style={{ padding: '16px', fontWeight: '600', color: '#5a6c7d', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Status</th>
273-
<th style={{ padding: '16px', fontWeight: '600', color: '#5a6c7d', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Actions</th>
325+
<th style={{ padding: '16px', fontWeight: '600', color: '#1a237e', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Booking ID</th>
326+
<th style={{ padding: '16px', fontWeight: '600', color: '#1a237e', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Guest Name</th>
327+
<th style={{ padding: '16px', fontWeight: '600', color: '#1a237e', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Hotel/Room</th>
328+
<th style={{ padding: '16px', fontWeight: '600', color: '#1a237e', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Check-in</th>
329+
<th style={{ padding: '16px', fontWeight: '600', color: '#1a237e', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Check-out</th>
330+
<th style={{ padding: '16px', fontWeight: '600', color: '#1a237e', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Nights</th>
331+
<th style={{ padding: '16px', fontWeight: '600', color: '#1a237e', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Guests</th>
332+
<th style={{ padding: '16px', fontWeight: '600', color: '#1a237e', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Amount</th>
333+
<th style={{ padding: '16px', fontWeight: '600', color: '#1a237e', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Payment</th>
334+
<th style={{ padding: '16px', fontWeight: '600', color: '#1a237e', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Status</th>
335+
<th style={{ padding: '16px', fontWeight: '600', color: '#1a237e', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Actions</th>
274336
</tr>
275337
</thead>
276338
<tbody>
@@ -316,14 +378,30 @@ const Bookings = () => {
316378
<td>
317379
<div className="d-flex gap-1">
318380
<Button
319-
variant="outline-primary"
381+
style={{
382+
background: 'linear-gradient(135deg, #1a237e 0%, #0d47a1 100%)',
383+
color: 'white',
384+
border: 'none',
385+
borderRadius: '6px',
386+
padding: '6px 12px',
387+
fontSize: '0.875rem',
388+
transition: 'all 0.3s ease'
389+
}}
320390
size="sm"
321391
onClick={() => handleShowModal('view', booking)}
322392
>
323393
<FaEye />
324394
</Button>
325395
<Button
326-
variant="outline-secondary"
396+
style={{
397+
background: '#6c757d',
398+
color: 'white',
399+
border: 'none',
400+
borderRadius: '6px',
401+
padding: '6px 12px',
402+
fontSize: '0.875rem',
403+
transition: 'all 0.3s ease'
404+
}}
327405
size="sm"
328406
onClick={() => handleShowModal('edit', booking)}
329407
>
@@ -343,8 +421,15 @@ const Bookings = () => {
343421

344422
{/* Modal for Add/Edit/View Booking */}
345423
<Modal show={showModal} onHide={handleCloseModal} size="lg">
346-
<Modal.Header closeButton>
347-
<Modal.Title>
424+
<Modal.Header
425+
closeButton
426+
style={{
427+
background: 'linear-gradient(135deg, #1a237e 0%, #0d47a1 100%)',
428+
color: 'white',
429+
borderBottom: '2px solid #1976d2'
430+
}}
431+
>
432+
<Modal.Title style={{ color: 'white', fontWeight: 'bold' }}>
348433
{modalType === 'add' && 'New Booking'}
349434
{modalType === 'edit' && 'Edit Booking'}
350435
{modalType === 'view' && 'Booking Details'}
@@ -503,11 +588,30 @@ const Bookings = () => {
503588
)}
504589
</Modal.Body>
505590
<Modal.Footer>
506-
<Button variant="secondary" onClick={handleCloseModal}>
591+
<Button
592+
variant="secondary"
593+
onClick={handleCloseModal}
594+
style={{
595+
background: '#6c757d',
596+
border: 'none',
597+
padding: '10px 24px',
598+
borderRadius: '6px',
599+
fontWeight: '500'
600+
}}
601+
>
507602
Close
508603
</Button>
509604
{modalType !== 'view' && (
510-
<Button variant="primary">
605+
<Button
606+
style={{
607+
background: 'linear-gradient(135deg, #1a237e 0%, #0d47a1 100%)',
608+
border: 'none',
609+
padding: '10px 24px',
610+
borderRadius: '6px',
611+
fontWeight: '500',
612+
transition: 'all 0.3s ease'
613+
}}
614+
>
511615
{modalType === 'add' ? 'Create Booking' : 'Save Changes'}
512616
</Button>
513617
)}

0 commit comments

Comments
 (0)