Skip to content

Commit a27282f

Browse files
Ifaz-IkramIfaz-Ikram
committed
style: Revamp Hotels page with enhanced loading spinner, header, card styles, and modal design for improved user experience
1 parent ad0dfff commit a27282f

File tree

1 file changed

+170
-41
lines changed

1 file changed

+170
-41
lines changed

‎src/pages/Hotels.js‎

Lines changed: 170 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -80,10 +80,10 @@ const Hotels = () => {
8080
<Container fluid className="py-4">
8181
{loading && (
8282
<div className="text-center py-5">
83-
<Spinner animation="border" role="status" variant="primary">
83+
<Spinner animation="border" role="status" style={{ color: '#1976d2', width: '3rem', height: '3rem' }}>
8484
<span className="visually-hidden">Loading branches...</span>
8585
</Spinner>
86-
<p className="mt-3 text-muted">Loading hotel branches...</p>
86+
<p className="mt-3" style={{ color: '#1976d2', fontSize: '1.1rem' }}>Loading hotel branches...</p>
8787
</div>
8888
)}
8989

@@ -99,14 +99,41 @@ const Hotels = () => {
9999
<Row className="mb-4">
100100
<Col>
101101
<div className="d-flex justify-content-between align-items-center">
102-
<div className="page-header">
103-
<h2>Hotel Branches</h2>
104-
<p style={{ marginBottom: 0 }}>Manage SkyNest Hotels locations across Sri Lanka</p>
102+
<div className="page-header" style={{
103+
background: 'linear-gradient(135deg, #1a237e 0%, #0d47a1 100%)',
104+
padding: '2rem',
105+
borderRadius: '1rem',
106+
boxShadow: '0 4px 15px rgba(0,0,0,0.1)',
107+
color: 'white',
108+
flex: 1,
109+
marginRight: '1rem'
110+
}}>
111+
<h2 style={{ color: 'white', fontWeight: '700', marginBottom: '0.5rem' }}>
112+
<FaBuilding className="me-2" />
113+
Hotel Branches
114+
</h2>
115+
<p style={{ marginBottom: 0, color: 'rgba(255, 255, 255, 0.9)' }}>Manage SkyNest Hotels locations across Sri Lanka</p>
105116
</div>
106117
<Button
107-
variant="primary"
108118
onClick={() => handleShowModal('add')}
109119
className="d-flex align-items-center"
120+
style={{
121+
background: 'linear-gradient(135deg, #1a237e 0%, #0d47a1 100%)',
122+
border: 'none',
123+
fontWeight: '600',
124+
padding: '0.75rem 1.5rem',
125+
boxShadow: '0 4px 15px rgba(26, 35, 126, 0.4)',
126+
transition: 'all 0.3s ease',
127+
whiteSpace: 'nowrap'
128+
}}
129+
onMouseEnter={(e) => {
130+
e.currentTarget.style.transform = 'translateY(-2px)';
131+
e.currentTarget.style.boxShadow = '0 6px 20px rgba(25, 118, 210, 0.5)';
132+
}}
133+
onMouseLeave={(e) => {
134+
e.currentTarget.style.transform = 'translateY(0)';
135+
e.currentTarget.style.boxShadow = '0 4px 15px rgba(26, 35, 126, 0.4)';
136+
}}
110137
>
111138
<FaPlus className="me-2" />
112139
Add New Branch
@@ -119,10 +146,29 @@ const Hotels = () => {
119146
<Row className="mb-4">
120147
{hotels.map((hotel) => (
121148
<Col md={4} key={hotel.id} className="mb-3">
122-
<Card className="h-100 shadow-sm">
123-
<Card.Header className="bg-primary text-white">
149+
<Card className="h-100" style={{
150+
border: 'none',
151+
borderRadius: '1rem',
152+
boxShadow: '0 4px 15px rgba(0,0,0,0.1)',
153+
transition: 'transform 0.3s ease, box-shadow 0.3s ease'
154+
}}
155+
onMouseEnter={(e) => {
156+
e.currentTarget.style.transform = 'translateY(-5px)';
157+
e.currentTarget.style.boxShadow = '0 8px 25px rgba(26, 35, 126, 0.2)';
158+
}}
159+
onMouseLeave={(e) => {
160+
e.currentTarget.style.transform = 'translateY(0)';
161+
e.currentTarget.style.boxShadow = '0 4px 15px rgba(0,0,0,0.1)';
162+
}}>
163+
<Card.Header style={{
164+
background: 'linear-gradient(135deg, #1a237e 0%, #0d47a1 100%)',
165+
color: 'white',
166+
border: 'none',
167+
borderRadius: '1rem 1rem 0 0',
168+
padding: '1.5rem'
169+
}}>
124170
<div className="d-flex justify-content-between align-items-center">
125-
<h5 className="mb-0">
171+
<h5 className="mb-0" style={{ color: 'white', fontWeight: '600' }}>
126172
<FaBuilding className="me-2" />
127173
{hotel.name}
128174
</h5>
@@ -177,12 +223,30 @@ const Hotels = () => {
177223
</div>
178224
</div>
179225
</Card.Body>
180-
<Card.Footer className="bg-light">
226+
<Card.Footer style={{
227+
background: '#f8f9fa',
228+
borderTop: '1px solid #e0e6ed',
229+
borderRadius: '0 0 1rem 1rem',
230+
padding: '1rem 1.5rem'
231+
}}>
181232
<div className="d-flex justify-content-between">
182233
<Button
183234
variant="outline-primary"
184235
size="sm"
185236
onClick={() => handleShowModal('view', hotel)}
237+
style={{
238+
borderColor: '#1976d2',
239+
color: '#1976d2',
240+
fontWeight: '600'
241+
}}
242+
onMouseEnter={(e) => {
243+
e.currentTarget.style.background = '#1976d2';
244+
e.currentTarget.style.color = 'white';
245+
}}
246+
onMouseLeave={(e) => {
247+
e.currentTarget.style.background = 'transparent';
248+
e.currentTarget.style.color = '#1976d2';
249+
}}
186250
>
187251
<FaEye className="me-1" />
188252
View Details
@@ -191,6 +255,9 @@ const Hotels = () => {
191255
variant="outline-secondary"
192256
size="sm"
193257
onClick={() => handleShowModal('edit', hotel)}
258+
style={{
259+
fontWeight: '600'
260+
}}
194261
>
195262
<FaEdit className="me-1" />
196263
Edit
@@ -205,45 +272,53 @@ const Hotels = () => {
205272
{/* Hotels Table */}
206273
<Row>
207274
<Col>
208-
<Card>
209-
<Card.Header>
210-
<h5 className="mb-0">Hotel Branches Summary</h5>
275+
<Card style={{ border: 'none', borderRadius: '1rem', boxShadow: '0 4px 15px rgba(0,0,0,0.1)' }}>
276+
<Card.Header style={{
277+
background: 'linear-gradient(135deg, #1a237e 0%, #0d47a1 100%)',
278+
borderBottom: 'none',
279+
borderRadius: '1rem 1rem 0 0',
280+
padding: '1.5rem'
281+
}}>
282+
<h5 className="mb-0" style={{ color: 'white', fontWeight: '700' }}>Hotel Branches Summary</h5>
211283
</Card.Header>
212284
<Card.Body>
213285
<Table responsive striped hover>
214-
<thead>
286+
<thead style={{
287+
background: 'linear-gradient(135deg, #1a237e 0%, #0d47a1 100%)',
288+
borderBottom: '2px solid #0d47a1'
289+
}}>
215290
<tr>
216-
<th>Hotel Name</th>
217-
<th>Location</th>
218-
<th>Manager</th>
219-
<th>Total Rooms</th>
220-
<th>Available</th>
221-
<th>Occupancy</th>
222-
<th>Status</th>
223-
<th>Actions</th>
291+
<th style={{ padding: '16px', fontWeight: '600', color: 'white', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Hotel Name</th>
292+
<th style={{ padding: '16px', fontWeight: '600', color: 'white', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Location</th>
293+
<th style={{ padding: '16px', fontWeight: '600', color: 'white', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Manager</th>
294+
<th style={{ padding: '16px', fontWeight: '600', color: 'white', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Total Rooms</th>
295+
<th style={{ padding: '16px', fontWeight: '600', color: 'white', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Available</th>
296+
<th style={{ padding: '16px', fontWeight: '600', color: 'white', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Occupancy</th>
297+
<th style={{ padding: '16px', fontWeight: '600', color: 'white', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Status</th>
298+
<th style={{ padding: '16px', fontWeight: '600', color: 'white', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Actions</th>
224299
</tr>
225300
</thead>
226301
<tbody>
227302
{hotels.map((hotel) => (
228-
<tr key={hotel.id}>
229-
<td>
303+
<tr key={hotel.id} style={{ borderBottom: '1px solid #e0e6ed' }}>
304+
<td style={{ padding: '16px', color: '#2c3e50', fontWeight: '500' }}>
230305
<strong>{hotel.name}</strong>
231306
</td>
232-
<td>{hotel.location}</td>
233-
<td>{hotel.manager}</td>
234-
<td>{hotel.totalRooms}</td>
235-
<td className="text-success">{hotel.availableRooms}</td>
236-
<td>
307+
<td style={{ padding: '16px', color: '#2c3e50', fontWeight: '500' }}>{hotel.location}</td>
308+
<td style={{ padding: '16px', color: '#2c3e50', fontWeight: '500' }}>{hotel.manager}</td>
309+
<td style={{ padding: '16px', color: '#2c3e50', fontWeight: '500' }}>{hotel.totalRooms}</td>
310+
<td style={{ padding: '16px', fontWeight: '500' }} className="text-success">{hotel.availableRooms}</td>
311+
<td style={{ padding: '16px' }}>
237312
<Badge bg={getOccupancyColor(getOccupancyRate(hotel))}>
238313
{getOccupancyRate(hotel)}%
239314
</Badge>
240315
</td>
241-
<td>
316+
<td style={{ padding: '16px' }}>
242317
<Badge bg={hotel.status === 'Active' ? 'success' : 'secondary'}>
243318
{hotel.status}
244319
</Badge>
245320
</td>
246-
<td>
321+
<td style={{ padding: '16px' }}>
247322
<div className="d-flex gap-2">
248323
<Button
249324
variant="outline-primary"
@@ -272,8 +347,12 @@ const Hotels = () => {
272347

273348
{/* Modal for Add/Edit/View Hotel */}
274349
<Modal show={showModal} onHide={handleCloseModal} size="lg">
275-
<Modal.Header closeButton>
276-
<Modal.Title>
350+
<Modal.Header closeButton style={{
351+
background: 'linear-gradient(135deg, #1a237e 0%, #0d47a1 100%)',
352+
color: 'white',
353+
border: 'none'
354+
}}>
355+
<Modal.Title style={{ color: 'white', fontWeight: '600' }}>
277356
{modalType === 'add' && 'Add New Hotel Branch'}
278357
{modalType === 'edit' && 'Edit Hotel Branch'}
279358
{modalType === 'view' && 'Hotel Branch Details'}
@@ -283,7 +362,13 @@ const Hotels = () => {
283362
{selectedHotel && modalType === 'view' ? (
284363
<Row>
285364
<Col md={6}>
286-
<h6>Basic Information</h6>
365+
<h6 style={{
366+
color: '#1a237e',
367+
fontWeight: '600',
368+
borderBottom: '2px solid #1976d2',
369+
paddingBottom: '0.5rem',
370+
marginBottom: '1rem'
371+
}}>Basic Information</h6>
287372
<p><strong>Name:</strong> {selectedHotel.name}</p>
288373
<p><strong>Location:</strong> {selectedHotel.location}</p>
289374
<p><strong>Address:</strong> {selectedHotel.address}</p>
@@ -292,22 +377,42 @@ const Hotels = () => {
292377
<p><strong>Manager:</strong> {selectedHotel.manager}</p>
293378
</Col>
294379
<Col md={6}>
295-
<h6>Room Information</h6>
380+
<h6 style={{
381+
color: '#1a237e',
382+
fontWeight: '600',
383+
borderBottom: '2px solid #1976d2',
384+
paddingBottom: '0.5rem',
385+
marginBottom: '1rem'
386+
}}>Room Information</h6>
296387
<p><strong>Total Rooms:</strong> {selectedHotel.totalRooms}</p>
297388
<p><strong>Available Rooms:</strong> {selectedHotel.availableRooms}</p>
298389
<p><strong>Occupancy Rate:</strong> {getOccupancyRate(selectedHotel)}%</p>
299390
<p><strong>Status:</strong> {selectedHotel.status}</p>
300391

301-
<h6 className="mt-3">Amenities</h6>
392+
<h6 className="mt-3" style={{
393+
color: '#1a237e',
394+
fontWeight: '600',
395+
borderBottom: '2px solid #1976d2',
396+
paddingBottom: '0.5rem',
397+
marginBottom: '1rem'
398+
}}>Amenities</h6>
302399
<div>
303400
{selectedHotel.amenities.map((amenity, index) => (
304-
<Badge key={index} bg="primary" className="me-1 mb-1">
401+
<Badge key={index} className="me-1 mb-1" style={{
402+
background: 'linear-gradient(135deg, #1a237e 0%, #0d47a1 100%)'
403+
}}>
305404
{amenity}
306405
</Badge>
307406
))}
308407
</div>
309408

310-
<h6 className="mt-3">Description</h6>
409+
<h6 className="mt-3" style={{
410+
color: '#1a237e',
411+
fontWeight: '600',
412+
borderBottom: '2px solid #1976d2',
413+
paddingBottom: '0.5rem',
414+
marginBottom: '1rem'
415+
}}>Description</h6>
311416
<p>{selectedHotel.description}</p>
312417
</Col>
313418
</Row>
@@ -399,12 +504,36 @@ const Hotels = () => {
399504
</Form>
400505
)}
401506
</Modal.Body>
402-
<Modal.Footer>
403-
<Button variant="secondary" onClick={handleCloseModal}>
507+
<Modal.Footer style={{ borderTop: '1px solid #e0e6ed', padding: '1.5rem' }}>
508+
<Button
509+
variant="secondary"
510+
onClick={handleCloseModal}
511+
style={{
512+
padding: '0.5rem 1.5rem',
513+
fontWeight: '600'
514+
}}
515+
>
404516
Close
405517
</Button>
406518
{modalType !== 'view' && (
407-
<Button variant="primary">
519+
<Button
520+
style={{
521+
background: 'linear-gradient(135deg, #1a237e 0%, #0d47a1 100%)',
522+
border: 'none',
523+
padding: '0.5rem 1.5rem',
524+
fontWeight: '600',
525+
boxShadow: '0 4px 10px rgba(26, 35, 126, 0.3)',
526+
transition: 'all 0.3s ease'
527+
}}
528+
onMouseEnter={(e) => {
529+
e.currentTarget.style.transform = 'translateY(-2px)';
530+
e.currentTarget.style.boxShadow = '0 6px 15px rgba(25, 118, 210, 0.4)';
531+
}}
532+
onMouseLeave={(e) => {
533+
e.currentTarget.style.transform = 'translateY(0)';
534+
e.currentTarget.style.boxShadow = '0 4px 10px rgba(26, 35, 126, 0.3)';
535+
}}
536+
>
408537
{modalType === 'add' ? 'Add Hotel' : 'Save Changes'}
409538
</Button>
410539
)}

0 commit comments

Comments
 (0)