Skip to content

Commit 7c4d791

Browse files
Agnes-NAgnes-N
committed
171648125-approval-table: add approval table
- add approval table UI. [Finishes#171648125]
1 parent 5735837 commit 7c4d791

File tree

6 files changed

+317
-0
lines changed

6 files changed

+317
-0
lines changed

‎src/Assets/leave.svg

47.9 KB
Loading

‎src/Assets/tripImage.svg

+9
Loading

‎src/Assets/user.svg

+9
Loading

‎src/Components/App.jsx

+2
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import Protected from "./Shared/ProtectedRoute/ProtectedRoute.jsx";
1313
import EmailVerificationResponse from "./Shared/EmailVerificationResponse/EmailVerificationResponse.jsx";
1414
import ResetPasswordComponent from "./Auth/ForgetPassword/ResetPassword/ResetPassword.jsx";
1515
import ChangePassword from "./Auth/ForgetPassword/ChangePassword/ChangePassword.jsx";
16+
import ApprovalTableComponent from "./ApprovalTable/approvalTable.jsx";
1617

1718
toast.configure();
1819

@@ -36,6 +37,7 @@ const App = () => (
3637
component={ResetPasswordComponent}
3738
/>
3839
<Route exact path="/reset-password" component={ChangePassword} />
40+
<Route exact path="/approval" component={ApprovalTableComponent} />
3941
</Switch>
4042
</Router>
4143
</div>

‎src/Components/ApprovalTable/approvalTable.jsx

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
import React from "react";
2+
import "./approvalTable.scss";
3+
import tripImage from "../../Assets/tripImage.svg";
4+
import user from "../../Assets/user.svg";
5+
6+
const ApprovalTable = () => {
7+
return (
8+
<div className="container">
9+
<section className="content-section">
10+
<div className="site-title">
11+
<h4>Assigned Trips</h4>
12+
<hr />
13+
</div>
14+
15+
<div className="page-filters">
16+
<div className="filters">
17+
<span className="filters-text">Filter</span>
18+
</div>
19+
20+
<div className="filter-status">
21+
<select>
22+
<option>Status</option>
23+
<option>Pending</option>
24+
<option>Accepted</option>
25+
</select>
26+
</div>
27+
</div>
28+
29+
<div className="">
30+
<div className="item">
31+
<div className="item-space">
32+
<img src={tripImage} alt="profile" />
33+
34+
<div className="reason">
35+
<h6>Going to visit my parent</h6>
36+
<div className="destination">
37+
<span className="from">
38+
<span className="label">From:</span> Kigali branch
39+
</span>
40+
<span className="from">
41+
<span className="label">To:</span> New York
42+
</span>
43+
</div>
44+
<div className="date">Date: 12 Dec 2020</div>
45+
</div>
46+
47+
<div className="buttons">
48+
<button type="button" className="btn-primary">
49+
Accept
50+
</button>
51+
<button type="button" className="btn-danger">
52+
Reject
53+
</button>
54+
</div>
55+
56+
<div className="details">
57+
<img src={user} alt="profile" />
58+
59+
<div className="text">
60+
<h4>Kalisa Arsene</h4>
61+
<span className="requester">Requester</span> <br />
62+
<span className="email">[email protected]</span> <br />
63+
<span className="department">IT Department</span> <br />
64+
</div>
65+
</div>
66+
</div>
67+
68+
<div className="item-space">
69+
<img src={tripImage} alt="profile" />
70+
71+
<div className="reason">
72+
<h6>Going to visit my parent</h6>
73+
<div className="destination">
74+
<span className="from">
75+
<span className="label">From:</span> Kigali branch
76+
</span>
77+
<span className="from">
78+
<span className="label">To:</span> New York
79+
</span>
80+
</div>
81+
<div className="date">Date: 12 Dec 2020</div>
82+
</div>
83+
84+
<div className="buttons">
85+
<button type="button" className="btn-primary">
86+
Accept
87+
</button>
88+
<button type="button" className="btn-danger">
89+
Reject
90+
</button>
91+
</div>
92+
93+
<div className="details">
94+
<img src={user} alt="profile" />
95+
<div className="text">
96+
<h4>Kalisa Arsene</h4>
97+
<span className="requester">Requester</span> <br />
98+
<span className="email">[email protected]</span> <br />
99+
<span className="department">IT Department</span> <br />
100+
</div>
101+
</div>
102+
</div>
103+
</div>
104+
</div>
105+
</section>
106+
</div>
107+
);
108+
};
109+
110+
export default ApprovalTable;

‎src/Components/ApprovalTable/approvalTable.scss

+187
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
.site-title {
2+
position: absolute;
3+
width: 185px;
4+
height: 33px;
5+
left: 558px;
6+
text-align: center;
7+
}
8+
9+
.h4 {
10+
font-size: 28px;
11+
line-height: 33px;
12+
}
13+
14+
hr {
15+
border-color: #2A96CC;
16+
width: 55%;
17+
}
18+
19+
.page-filters {
20+
position: absolute;
21+
width: 920px;
22+
height: 64px;
23+
left: 338px;
24+
top: 115px;
25+
background: #FEFEFE;
26+
box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.05);
27+
border-radius: 50px;
28+
}
29+
30+
.page-filters .filters {
31+
position: absolute;
32+
width: 166.76px;
33+
height: 49px;
34+
left: 10px;
35+
top: 6px;
36+
background: #2A96CC;
37+
box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.05);
38+
border-radius: 50px;
39+
}
40+
41+
.page-filters .filters .filters-text {
42+
position: absolute;
43+
width: 64px;
44+
height: 23px;
45+
left: 70px;
46+
top: 13px;
47+
font-weight: bold;
48+
font-size: 20px;
49+
line-height: 23px;
50+
color: #FFFBFB;
51+
}
52+
53+
.page-filters .filter-status {
54+
position: absolute;
55+
width: 62.6px;
56+
height: 23px;
57+
left: 225px;
58+
top: 20px;
59+
}
60+
61+
.page-filters .filter-status select {
62+
font-weight: bold;
63+
font-size: 20px;
64+
line-height: 23px;
65+
color: rgba(0, 1, 0, 0.6);
66+
border: none;
67+
background-color: transparent;
68+
}
69+
70+
.item {
71+
position: absolute;
72+
width: 932px;
73+
height: 131px;
74+
left: 338px;
75+
top: 193px;
76+
}
77+
78+
.item-space {
79+
background: #FFFBFB;
80+
box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.05);
81+
height: 106px;
82+
padding: 20px 30px;
83+
margin-bottom: 30px;
84+
}
85+
86+
.item-space img {
87+
width: 130px;
88+
height: 100px;
89+
border-radius: 20px;
90+
}
91+
92+
.item-space .reason {
93+
display: block;
94+
margin-top: -105px;
95+
margin-left: 150px;
96+
}
97+
98+
.item-space .reason h6 {
99+
font-size: 20px;
100+
line-height: 23px;
101+
color: rgba(0, 1, 0, 0.8);
102+
margin-block-start: 0px;
103+
margin-block-end: 0px;
104+
}
105+
106+
.item-space .reason .destination {
107+
margin: 20px 0px;
108+
}
109+
110+
.item-space .reason .destination .from {
111+
background: #41DFBE;
112+
padding: 15px 15px;
113+
font-size: 14px;
114+
}
115+
116+
.item-space .reason .destination .from .label {
117+
color: white;
118+
}
119+
120+
.item-space .reason .date {
121+
font-weight: bold;
122+
font-size: 20px;
123+
color: rgba(0, 1, 0, 0.5);
124+
font-size: 15px;
125+
}
126+
127+
.item-space .buttons {
128+
display: block;
129+
margin-top: -85px;
130+
margin-left: 460px;
131+
}
132+
133+
.item-space .buttons .btn-primary {
134+
display: block;
135+
color: white;
136+
background-color: #2A96CC;
137+
border: none;
138+
padding: 8px 50px;
139+
border-radius: 20px;
140+
margin-bottom: 10px;
141+
}
142+
143+
.item-space .buttons .btn-danger {
144+
color: white;
145+
background-color: #FC4F29;
146+
border: none;
147+
padding: 8px 50px;
148+
border-radius: 20px;
149+
}
150+
151+
.item-space .details {
152+
display: flex;
153+
margin-top: -85px;
154+
margin-left: 625px;
155+
border-left: 1px solid darkgrey;
156+
height: 100%;
157+
}
158+
159+
.item-space .details img {
160+
width: 50px;
161+
height: 50px;
162+
border-radius: 25px;
163+
margin-left: 10px;
164+
}
165+
166+
.item-space .details .text {
167+
left: 745px;
168+
}
169+
170+
.item-space .details .text h4 {
171+
margin-block-start: 0px;
172+
margin-block-end: 0px;
173+
font-weight: bold;
174+
font-size: 18px;
175+
}
176+
177+
.item-space .details .text span {
178+
line-height: 25px;
179+
}
180+
181+
.item-space .details .text .requester {
182+
color: darkgray;
183+
}
184+
185+
.item-space .details .text .email {
186+
color: #2A96CC;
187+
}

0 commit comments

Comments
 (0)