Skip to content

Commit 08d947e

Browse files
Ifaz-IkramIfaz-Ikram
committed
style: Enhance Employees page with improved layout, colors, and animations for better user experience
1 parent 6c49e5f commit 08d947e

File tree

1 file changed

+164
-27
lines changed

1 file changed

+164
-27
lines changed

‎src/pages/Employees.js‎

Lines changed: 164 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -188,15 +188,43 @@ const Employees = () => {
188188
{/* Page Header */}
189189
<Row className="mb-4">
190190
<Col>
191-
<div className="page-header">
191+
<div className="page-header" style={{
192+
background: 'linear-gradient(135deg, #1a237e 0%, #0d47a1 100%)',
193+
padding: '2rem',
194+
borderRadius: '1rem',
195+
boxShadow: '0 4px 15px rgba(0,0,0,0.1)',
196+
color: 'white'
197+
}}>
192198
<div className="d-flex justify-content-between align-items-center">
193199
<div>
194-
<h2>Employee Management</h2>
195-
<p style={{ marginBottom: 0 }}>
200+
<h2 style={{ color: 'white', fontWeight: '700', marginBottom: '0.5rem' }}>
201+
<FaUserTie className="me-2" />
202+
Employee Management
203+
</h2>
204+
<p style={{ marginBottom: 0, color: 'rgba(255, 255, 255, 0.9)' }}>
196205
Manage employees working at {selectedBranchId === 'All' ? 'all branches' : `Branch ${selectedBranchId}`}
197206
</p>
198207
</div>
199-
<Button variant="primary" onClick={() => handleShowModal()}>
208+
<Button
209+
onClick={() => handleShowModal()}
210+
style={{
211+
background: 'white',
212+
color: '#1a237e',
213+
border: 'none',
214+
fontWeight: '600',
215+
padding: '0.75rem 1.5rem',
216+
boxShadow: '0 4px 10px rgba(0,0,0,0.2)',
217+
transition: 'all 0.3s ease'
218+
}}
219+
onMouseEnter={(e) => {
220+
e.currentTarget.style.transform = 'translateY(-2px)';
221+
e.currentTarget.style.boxShadow = '0 6px 15px rgba(0,0,0,0.3)';
222+
}}
223+
onMouseLeave={(e) => {
224+
e.currentTarget.style.transform = 'translateY(0)';
225+
e.currentTarget.style.boxShadow = '0 4px 10px rgba(0,0,0,0.2)';
226+
}}
227+
>
200228
<FaPlus className="me-2" />
201229
Add New Employee
202230
</Button>
@@ -211,7 +239,21 @@ const Employees = () => {
211239
{/* Employee Statistics */}
212240
<Row className="mb-4">
213241
<Col md={2}>
214-
<Card className="stat-card text-center h-100">
242+
<Card className="text-center h-100" style={{
243+
background: 'linear-gradient(135deg, #1a237e 0%, #0d47a1 100%)',
244+
border: 'none',
245+
borderRadius: '1rem',
246+
boxShadow: '0 4px 15px rgba(26, 35, 126, 0.3)',
247+
transition: 'transform 0.3s ease, box-shadow 0.3s ease'
248+
}}
249+
onMouseEnter={(e) => {
250+
e.currentTarget.style.transform = 'translateY(-5px)';
251+
e.currentTarget.style.boxShadow = '0 8px 25px rgba(26, 35, 126, 0.4)';
252+
}}
253+
onMouseLeave={(e) => {
254+
e.currentTarget.style.transform = 'translateY(0)';
255+
e.currentTarget.style.boxShadow = '0 4px 15px rgba(26, 35, 126, 0.3)';
256+
}}>
215257
<Card.Body style={{ padding: '24px' }}>
216258
<FaUserTie style={{ color: 'white', marginBottom: '12px' }} size={32} />
217259
<h3 style={{ color: 'white', fontWeight: 'bold', fontSize: '2rem', marginBottom: '8px' }}>
@@ -222,7 +264,21 @@ const Employees = () => {
222264
</Card>
223265
</Col>
224266
<Col md={2}>
225-
<Card className="stat-card text-center h-100">
267+
<Card className="text-center h-100" style={{
268+
background: 'linear-gradient(135deg, #1a237e 0%, #0d47a1 100%)',
269+
border: 'none',
270+
borderRadius: '1rem',
271+
boxShadow: '0 4px 15px rgba(26, 35, 126, 0.3)',
272+
transition: 'transform 0.3s ease, box-shadow 0.3s ease'
273+
}}
274+
onMouseEnter={(e) => {
275+
e.currentTarget.style.transform = 'translateY(-5px)';
276+
e.currentTarget.style.boxShadow = '0 8px 25px rgba(26, 35, 126, 0.4)';
277+
}}
278+
onMouseLeave={(e) => {
279+
e.currentTarget.style.transform = 'translateY(0)';
280+
e.currentTarget.style.boxShadow = '0 4px 15px rgba(26, 35, 126, 0.3)';
281+
}}>
226282
<Card.Body style={{ padding: '24px' }}>
227283
<h3 style={{ color: 'white', fontWeight: 'bold', fontSize: '2rem', marginBottom: '8px' }}>
228284
{stats.managers}
@@ -232,7 +288,21 @@ const Employees = () => {
232288
</Card>
233289
</Col>
234290
<Col md={2}>
235-
<Card className="stat-card text-center h-100">
291+
<Card className="text-center h-100" style={{
292+
background: 'linear-gradient(135deg, #1a237e 0%, #0d47a1 100%)',
293+
border: 'none',
294+
borderRadius: '1rem',
295+
boxShadow: '0 4px 15px rgba(26, 35, 126, 0.3)',
296+
transition: 'transform 0.3s ease, box-shadow 0.3s ease'
297+
}}
298+
onMouseEnter={(e) => {
299+
e.currentTarget.style.transform = 'translateY(-5px)';
300+
e.currentTarget.style.boxShadow = '0 8px 25px rgba(26, 35, 126, 0.4)';
301+
}}
302+
onMouseLeave={(e) => {
303+
e.currentTarget.style.transform = 'translateY(0)';
304+
e.currentTarget.style.boxShadow = '0 4px 15px rgba(26, 35, 126, 0.3)';
305+
}}>
236306
<Card.Body style={{ padding: '24px' }}>
237307
<h3 style={{ color: 'white', fontWeight: 'bold', fontSize: '2rem', marginBottom: '8px' }}>
238308
{stats.receptionists}
@@ -242,7 +312,21 @@ const Employees = () => {
242312
</Card>
243313
</Col>
244314
<Col md={2}>
245-
<Card className="stat-card text-center h-100">
315+
<Card className="text-center h-100" style={{
316+
background: 'linear-gradient(135deg, #1a237e 0%, #0d47a1 100%)',
317+
border: 'none',
318+
borderRadius: '1rem',
319+
boxShadow: '0 4px 15px rgba(26, 35, 126, 0.3)',
320+
transition: 'transform 0.3s ease, box-shadow 0.3s ease'
321+
}}
322+
onMouseEnter={(e) => {
323+
e.currentTarget.style.transform = 'translateY(-5px)';
324+
e.currentTarget.style.boxShadow = '0 8px 25px rgba(26, 35, 126, 0.4)';
325+
}}
326+
onMouseLeave={(e) => {
327+
e.currentTarget.style.transform = 'translateY(0)';
328+
e.currentTarget.style.boxShadow = '0 4px 15px rgba(26, 35, 126, 0.3)';
329+
}}>
246330
<Card.Body style={{ padding: '24px' }}>
247331
<h3 style={{ color: 'white', fontWeight: 'bold', fontSize: '2rem', marginBottom: '8px' }}>
248332
{stats.accountants}
@@ -252,7 +336,21 @@ const Employees = () => {
252336
</Card>
253337
</Col>
254338
<Col md={2}>
255-
<Card className="stat-card text-center h-100">
339+
<Card className="text-center h-100" style={{
340+
background: 'linear-gradient(135deg, #1a237e 0%, #0d47a1 100%)',
341+
border: 'none',
342+
borderRadius: '1rem',
343+
boxShadow: '0 4px 15px rgba(26, 35, 126, 0.3)',
344+
transition: 'transform 0.3s ease, box-shadow 0.3s ease'
345+
}}
346+
onMouseEnter={(e) => {
347+
e.currentTarget.style.transform = 'translateY(-5px)';
348+
e.currentTarget.style.boxShadow = '0 8px 25px rgba(26, 35, 126, 0.4)';
349+
}}
350+
onMouseLeave={(e) => {
351+
e.currentTarget.style.transform = 'translateY(0)';
352+
e.currentTarget.style.boxShadow = '0 4px 15px rgba(26, 35, 126, 0.3)';
353+
}}>
256354
<Card.Body style={{ padding: '24px' }}>
257355
<h3 style={{ color: 'white', fontWeight: 'bold', fontSize: '2rem', marginBottom: '8px' }}>
258356
{stats.housekeeping}
@@ -264,33 +362,41 @@ const Employees = () => {
264362
</Row>
265363

266364
{/* Employee List */}
267-
<Card>
268-
<Card.Header style={{ background: '#f8f9fa', borderBottom: '1px solid #e0e6ed' }}>
269-
<h5 className="mb-0" style={{ fontWeight: '700', color: '#2c3e50' }}>
365+
<Card style={{ border: 'none', borderRadius: '1rem', boxShadow: '0 4px 15px rgba(0,0,0,0.1)' }}>
366+
<Card.Header style={{
367+
background: 'linear-gradient(135deg, #1a237e 0%, #0d47a1 100%)',
368+
borderBottom: 'none',
369+
borderRadius: '1rem 1rem 0 0',
370+
padding: '1.5rem'
371+
}}>
372+
<h5 className="mb-0" style={{ fontWeight: '700', color: 'white' }}>
270373
Employee List ({employees.length})
271374
</h5>
272375
</Card.Header>
273376
<Card.Body className="p-0">
274377
{loading ? (
275378
<div className="text-center py-5">
276-
<Spinner animation="border" variant="primary" />
277-
<p className="mt-2 text-muted">Loading employees...</p>
379+
<Spinner animation="border" style={{ color: '#1976d2', width: '3rem', height: '3rem' }} />
380+
<p className="mt-2" style={{ color: '#1976d2' }}>Loading employees...</p>
278381
</div>
279382
) : employees.length === 0 ? (
280383
<div className="text-center py-5">
281384
<p className="text-muted">No employees found</p>
282385
</div>
283386
) : (
284387
<Table responsive hover className="mb-0">
285-
<thead style={{ backgroundColor: '#f8f9fa', borderBottom: '2px solid #e0e6ed' }}>
388+
<thead style={{
389+
background: 'linear-gradient(135deg, #1a237e 0%, #0d47a1 100%)',
390+
borderBottom: '2px solid #0d47a1'
391+
}}>
286392
<tr>
287-
<th style={{ padding: '16px', fontWeight: '600', color: '#5a6c7d', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>ID</th>
288-
<th style={{ padding: '16px', fontWeight: '600', color: '#5a6c7d', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Name</th>
289-
<th style={{ padding: '16px', fontWeight: '600', color: '#5a6c7d', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Email</th>
290-
<th style={{ padding: '16px', fontWeight: '600', color: '#5a6c7d', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Phone</th>
291-
<th style={{ padding: '16px', fontWeight: '600', color: '#5a6c7d', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Branch</th>
292-
<th style={{ padding: '16px', fontWeight: '600', color: '#5a6c7d', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Role</th>
293-
<th style={{ padding: '16px', fontWeight: '600', color: '#5a6c7d', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Actions</th>
393+
<th style={{ padding: '16px', fontWeight: '600', color: 'white', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>ID</th>
394+
<th style={{ padding: '16px', fontWeight: '600', color: 'white', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Name</th>
395+
<th style={{ padding: '16px', fontWeight: '600', color: 'white', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Email</th>
396+
<th style={{ padding: '16px', fontWeight: '600', color: 'white', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Phone</th>
397+
<th style={{ padding: '16px', fontWeight: '600', color: 'white', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Branch</th>
398+
<th style={{ padding: '16px', fontWeight: '600', color: 'white', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Role</th>
399+
<th style={{ padding: '16px', fontWeight: '600', color: 'white', fontSize: '0.85rem', letterSpacing: '0.5px', textTransform: 'uppercase', border: 'none' }}>Actions</th>
294400
</tr>
295401
</thead>
296402
<tbody>
@@ -337,8 +443,14 @@ const Employees = () => {
337443

338444
{/* Add/Edit Employee Modal */}
339445
<Modal show={showModal} onHide={handleCloseModal} size="lg">
340-
<Modal.Header closeButton>
341-
<Modal.Title>{selectedEmployee ? 'Edit Employee' : 'Add New Employee'}</Modal.Title>
446+
<Modal.Header closeButton style={{
447+
background: 'linear-gradient(135deg, #1a237e 0%, #0d47a1 100%)',
448+
color: 'white',
449+
border: 'none'
450+
}}>
451+
<Modal.Title style={{ color: 'white', fontWeight: '600' }}>
452+
{selectedEmployee ? 'Edit Employee' : 'Add New Employee'}
453+
</Modal.Title>
342454
</Modal.Header>
343455
<Form onSubmit={handleSubmit}>
344456
<Modal.Body>
@@ -425,11 +537,36 @@ const Employees = () => {
425537
</Row>
426538
)}
427539
</Modal.Body>
428-
<Modal.Footer>
429-
<Button variant="secondary" onClick={handleCloseModal}>
540+
<Modal.Footer style={{ borderTop: '1px solid #e0e6ed', padding: '1.5rem' }}>
541+
<Button
542+
variant="secondary"
543+
onClick={handleCloseModal}
544+
style={{
545+
padding: '0.5rem 1.5rem',
546+
fontWeight: '600'
547+
}}
548+
>
430549
Cancel
431550
</Button>
432-
<Button variant="primary" type="submit">
551+
<Button
552+
type="submit"
553+
style={{
554+
background: 'linear-gradient(135deg, #1a237e 0%, #0d47a1 100%)',
555+
border: 'none',
556+
padding: '0.5rem 1.5rem',
557+
fontWeight: '600',
558+
boxShadow: '0 4px 10px rgba(26, 35, 126, 0.3)',
559+
transition: 'all 0.3s ease'
560+
}}
561+
onMouseEnter={(e) => {
562+
e.currentTarget.style.transform = 'translateY(-2px)';
563+
e.currentTarget.style.boxShadow = '0 6px 15px rgba(25, 118, 210, 0.4)';
564+
}}
565+
onMouseLeave={(e) => {
566+
e.currentTarget.style.transform = 'translateY(0)';
567+
e.currentTarget.style.boxShadow = '0 4px 10px rgba(26, 35, 126, 0.3)';
568+
}}
569+
>
433570
{selectedEmployee ? 'Update Employee' : 'Add Employee'}
434571
</Button>
435572
</Modal.Footer>

0 commit comments

Comments
 (0)