Skip to content

Commit 0fa254c

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

File tree

6 files changed

+328
-0
lines changed

6 files changed

+328
-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

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

0 commit comments

Comments
 (0)