Skip to content

Commit def244c

Browse files
Ifaz-IkramIfaz-Ikram
committed
style: Enhance Billing page with improved layout, colors, and animations for better user experience
1 parent 4f548b6 commit def244c

File tree

1 file changed

+128
-41
lines changed

1 file changed

+128
-41
lines changed

‎src/pages/Billing.js‎

Lines changed: 128 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -77,63 +77,104 @@ const Billing = () => {
7777
};
7878

7979
return (
80-
<div>
80+
<div style={{ backgroundColor: '#f8f9fa', minHeight: '100vh', padding: '20px' }}>
8181
{/* Page Header */}
82-
<Row className="mb-4">
83-
<Col>
84-
<div className="page-header">
85-
<h2>Billing & Payments</h2>
86-
<p style={{ marginBottom: 0 }}>Manage payments, transactions, and billing adjustments</p>
87-
</div>
88-
</Col>
89-
</Row>
82+
<div style={{
83+
background: 'linear-gradient(135deg, #1a237e 0%, #0d47a1 100%)',
84+
color: 'white',
85+
padding: '30px',
86+
borderRadius: '12px',
87+
marginBottom: '30px',
88+
boxShadow: '0 4px 6px rgba(0,0,0,0.1)'
89+
}}>
90+
<h2 style={{ margin: 0, fontSize: '2rem', fontWeight: 'bold' }}>Billing & Payments</h2>
91+
<p style={{ marginBottom: 0, fontSize: '1.1rem', opacity: 0.9 }}>Manage payments, transactions, and billing adjustments</p>
92+
</div>
9093

9194
{/* Statistics */}
9295
<Row className="mb-4">
9396
<Col md={3}>
94-
<Card className="card-custom text-center">
95-
<Card.Body>
96-
<h4 className="text-success">Rs {payments.reduce((sum, p) => sum + parseFloat(p.amount || 0), 0).toLocaleString('en-US', { minimumFractionDigits: 2 })}</h4>
97-
<p className="mb-0">Total Payments</p>
97+
<Card style={{
98+
background: 'white',
99+
borderRadius: '12px',
100+
border: '1px solid #e2e8f0',
101+
boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
102+
transition: 'transform 0.3s ease'
103+
}}>
104+
<Card.Body className="text-center">
105+
<h4 style={{ color: '#28a745', fontWeight: 'bold', fontSize: '1.8rem' }}>Rs {payments.reduce((sum, p) => sum + parseFloat(p.amount || 0), 0).toLocaleString('en-US', { minimumFractionDigits: 2 })}</h4>
106+
<p className="mb-0" style={{ color: '#666', fontWeight: '500' }}>Total Payments</p>
98107
</Card.Body>
99108
</Card>
100109
</Col>
101110
<Col md={3}>
102-
<Card className="card-custom text-center">
103-
<Card.Body>
104-
<h4 className="text-primary">{payments.length}</h4>
105-
<p className="mb-0">Payment Transactions</p>
111+
<Card style={{
112+
background: 'white',
113+
borderRadius: '12px',
114+
border: '1px solid #e2e8f0',
115+
boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
116+
transition: 'transform 0.3s ease'
117+
}}>
118+
<Card.Body className="text-center">
119+
<h4 style={{ color: '#1976d2', fontWeight: 'bold', fontSize: '1.8rem' }}>{payments.length}</h4>
120+
<p className="mb-0" style={{ color: '#666', fontWeight: '500' }}>Payment Transactions</p>
106121
</Card.Body>
107122
</Card>
108123
</Col>
109124
<Col md={3}>
110-
<Card className="card-custom text-center">
111-
<Card.Body>
112-
<h4 className="text-warning">Rs {adjustments.reduce((sum, a) => sum + parseFloat(a.amount || 0), 0).toLocaleString('en-US', { minimumFractionDigits: 2 })}</h4>
113-
<p className="mb-0">Total Adjustments</p>
125+
<Card style={{
126+
background: 'white',
127+
borderRadius: '12px',
128+
border: '1px solid #e2e8f0',
129+
boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
130+
transition: 'transform 0.3s ease'
131+
}}>
132+
<Card.Body className="text-center">
133+
<h4 style={{ color: '#f59e0b', fontWeight: 'bold', fontSize: '1.8rem' }}>Rs {adjustments.reduce((sum, a) => sum + parseFloat(a.amount || 0), 0).toLocaleString('en-US', { minimumFractionDigits: 2 })}</h4>
134+
<p className="mb-0" style={{ color: '#666', fontWeight: '500' }}>Total Adjustments</p>
114135
</Card.Body>
115136
</Card>
116137
</Col>
117138
<Col md={3}>
118-
<Card className="card-custom text-center">
119-
<Card.Body>
120-
<h4 className="text-info">{adjustments.length}</h4>
121-
<p className="mb-0">Adjustment Records</p>
139+
<Card style={{
140+
background: 'white',
141+
borderRadius: '12px',
142+
border: '1px solid #e2e8f0',
143+
boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
144+
transition: 'transform 0.3s ease'
145+
}}>
146+
<Card.Body className="text-center">
147+
<h4 style={{ color: '#0d47a1', fontWeight: 'bold', fontSize: '1.8rem' }}>{adjustments.length}</h4>
148+
<p className="mb-0" style={{ color: '#666', fontWeight: '500' }}>Adjustment Records</p>
122149
</Card.Body>
123150
</Card>
124151
</Col>
125152
</Row>
126153

127154
{/* Tabs */}
128-
<Card className="card-custom">
155+
<Card style={{
156+
background: 'white',
157+
borderRadius: '12px',
158+
border: '1px solid #e2e8f0',
159+
boxShadow: '0 2px 8px rgba(0,0,0,0.08)'
160+
}}>
129161
<Card.Body>
130162
<Tabs activeKey={activeTab} onSelect={(k) => setActiveTab(k)} className="mb-3">
131163

132164
{/* Payments Tab */}
133165
<Tab eventKey="payments" title="Payments">
134166
{loading ? (
135167
<div className="text-center py-5">
136-
<Spinner animation="border" />
168+
<Spinner
169+
animation="border"
170+
style={{
171+
color: '#1976d2',
172+
width: '3rem',
173+
height: '3rem',
174+
borderWidth: '4px'
175+
}}
176+
/>
177+
<p className="mt-3" style={{ color: '#0d47a1', fontSize: '1.1rem', fontWeight: '500' }}>Loading...</p>
137178
</div>
138179
) : (
139180
<div className="table-container">
@@ -175,7 +216,25 @@ const Billing = () => {
175216
</td>
176217
<td>
177218
<button
178-
className="btn btn-sm btn-outline-primary"
219+
style={{
220+
background: 'linear-gradient(135deg, #1a237e 0%, #0d47a1 100%)',
221+
color: 'white',
222+
border: 'none',
223+
borderRadius: '6px',
224+
padding: '6px 14px',
225+
fontSize: '0.875rem',
226+
fontWeight: '500',
227+
cursor: 'pointer',
228+
transition: 'all 0.3s ease'
229+
}}
230+
onMouseEnter={(e) => {
231+
e.target.style.transform = 'translateY(-2px)';
232+
e.target.style.boxShadow = '0 4px 8px rgba(25, 118, 210, 0.3)';
233+
}}
234+
onMouseLeave={(e) => {
235+
e.target.style.transform = 'translateY(0)';
236+
e.target.style.boxShadow = 'none';
237+
}}
179238
onClick={() => fetchBillingSummary(payment.booking_id)}
180239
>
181240
<FaEye /> View Bill
@@ -235,8 +294,15 @@ const Billing = () => {
235294

236295
{/* Billing Detail Modal */}
237296
<Modal show={showModal} onHide={() => setShowModal(false)} size="lg">
238-
<Modal.Header closeButton>
239-
<Modal.Title>
297+
<Modal.Header
298+
closeButton
299+
style={{
300+
background: 'linear-gradient(135deg, #1a237e 0%, #0d47a1 100%)',
301+
color: 'white',
302+
borderBottom: '2px solid #1976d2'
303+
}}
304+
>
305+
<Modal.Title style={{ color: 'white', fontWeight: 'bold' }}>
240306
<FaReceipt className="me-2" />
241307
Billing Summary - Booking #{selectedBilling?.booking.booking_id}
242308
</Modal.Title>
@@ -263,8 +329,15 @@ const Billing = () => {
263329
</Card>
264330

265331
{/* Charges Breakdown */}
266-
<Card className="mb-3">
267-
<Card.Header><strong>Charges Breakdown</strong></Card.Header>
332+
<Card className="mb-3" style={{ border: '1px solid #e2e8f0', borderRadius: '8px' }}>
333+
<Card.Header style={{
334+
background: 'linear-gradient(135deg, #1a237e 0%, #0d47a1 100%)',
335+
color: 'white',
336+
fontWeight: 'bold',
337+
borderBottom: '2px solid #1976d2'
338+
}}>
339+
<strong>Charges Breakdown</strong>
340+
</Card.Header>
268341
<ListGroup variant="flush">
269342
<ListGroup.Item className="d-flex justify-content-between">
270343
<span>Room Charges ({selectedBilling.booking.nights} nights)</span>
@@ -291,8 +364,8 @@ const Billing = () => {
291364
</ListGroup.Item>
292365
)}
293366
<ListGroup.Item className="d-flex justify-content-between bg-light">
294-
<strong>Grand Total</strong>
295-
<strong className="text-primary">Rs {selectedBilling.summary.grandTotal}</strong>
367+
<strong style={{ color: '#1a237e' }}>Grand Total</strong>
368+
<strong style={{ color: '#1976d2', fontSize: '1.2rem' }}>Rs {selectedBilling.summary.grandTotal}</strong>
296369
</ListGroup.Item>
297370
<ListGroup.Item className="d-flex justify-content-between">
298371
<span>Total Paid</span>
@@ -304,17 +377,24 @@ const Billing = () => {
304377
<strong>Rs {selectedBilling.summary.refunds}</strong>
305378
</ListGroup.Item>
306379
)}
307-
<ListGroup.Item className="d-flex justify-content-between bg-info text-white">
308-
<strong>Balance</strong>
309-
<strong>Rs {selectedBilling.summary.balance}</strong>
380+
<ListGroup.Item className="d-flex justify-content-between" style={{ background: '#e3f2fd' }}>
381+
<strong style={{ color: '#1a237e' }}>Balance</strong>
382+
<strong style={{ color: '#0d47a1', fontSize: '1.2rem' }}>Rs {selectedBilling.summary.balance}</strong>
310383
</ListGroup.Item>
311384
</ListGroup>
312385
</Card>
313386

314387
{/* Payment History */}
315388
{selectedBilling.payments.length > 0 && (
316-
<Card className="mb-3">
317-
<Card.Header><strong>Payment History</strong></Card.Header>
389+
<Card className="mb-3" style={{ border: '1px solid #e2e8f0', borderRadius: '8px' }}>
390+
<Card.Header style={{
391+
background: 'linear-gradient(135deg, #1a237e 0%, #0d47a1 100%)',
392+
color: 'white',
393+
fontWeight: 'bold',
394+
borderBottom: '2px solid #1976d2'
395+
}}>
396+
<strong>Payment History</strong>
397+
</Card.Header>
318398
<Card.Body>
319399
<Table size="sm" responsive>
320400
<thead>
@@ -340,8 +420,15 @@ const Billing = () => {
340420

341421
{/* Services Used */}
342422
{selectedBilling.services.length > 0 && (
343-
<Card>
344-
<Card.Header><strong>Services Used</strong></Card.Header>
423+
<Card style={{ border: '1px solid #e2e8f0', borderRadius: '8px' }}>
424+
<Card.Header style={{
425+
background: 'linear-gradient(135deg, #1a237e 0%, #0d47a1 100%)',
426+
color: 'white',
427+
fontWeight: 'bold',
428+
borderBottom: '2px solid #1976d2'
429+
}}>
430+
<strong>Services Used</strong>
431+
</Card.Header>
345432
<Card.Body>
346433
<Table size="sm" responsive>
347434
<thead>

0 commit comments

Comments
 (0)