Skip to content

Commit 92ba943

Browse files
Sheane-marioSheane-mario
committed
created the UI of the technician transactions page
1 parent 5d58f64 commit 92ba943

8 files changed

+297
-73
lines changed

‎controllers/TechnicianController.php

+6
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,12 @@ public function updateRequestStatus($request)
153153
Application::$app->response->redirect('/technician-requests');
154154
}
155155

156+
public function technicianTransactions()
157+
{
158+
$this->setLayout('auth');
159+
return $this->render('/technician/technician-transactions');
160+
}
161+
156162

157163
}
158164

‎public/css/technician/technician-transactions.css

+134
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
/** {*/
2+
/* box-sizing: border-box;*/
3+
/* margin: 0;*/
4+
/* padding: 0;*/
5+
/*}*/
6+
7+
/*body {*/
8+
/* font-family: Arial, sans-serif;*/
9+
/* background-color: #f4f6f9;*/
10+
/* color: #333;*/
11+
/*}*/
12+
13+
.container {
14+
max-width: 100%;
15+
background-color: #eef5fd;
16+
/*margin: auto;*/
17+
/*padding: 3rem;*/
18+
}
19+
20+
.header {
21+
display: flex;
22+
justify-content: space-between;
23+
/*margin-bottom: 1rem;*/
24+
padding: 5rem;
25+
/*background-color: #dbe9fd;*/
26+
}
27+
28+
.header-item {
29+
background-color: #ffffff;
30+
padding: 15px;
31+
width: 45%;
32+
border-radius: 8px;
33+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
34+
}
35+
36+
.header-item p {
37+
color: #888888;
38+
font-size: 14px;
39+
}
40+
41+
.header-item h2 {
42+
font-size: 24px;
43+
color: #007bff;
44+
}
45+
46+
.header-item small {
47+
font-size: 12px;
48+
color: #888888;
49+
}
50+
51+
.payment-history {
52+
background-color: #f4fbfb;
53+
padding: 3rem;
54+
border-radius: 8px;
55+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
56+
}
57+
58+
.payment-history h3 {
59+
font-size: 24px;
60+
margin-bottom: 20px;
61+
}
62+
63+
.tabs {
64+
display: flex;
65+
margin-bottom: 20px;
66+
}
67+
68+
.tab-button {
69+
background-color: #f8f9fa;
70+
border: 1px solid #ddd;
71+
padding: 10px 15px;
72+
margin-right: 10px;
73+
border-radius: 5px;
74+
font-size: 16px;
75+
color: #333;
76+
cursor: pointer;
77+
}
78+
79+
.tab-button:hover {
80+
background-color: #007bff;
81+
color: white;
82+
}
83+
84+
.tab-button.active {
85+
background-color: #007bff;
86+
color: white;
87+
}
88+
89+
table {
90+
width: 100%;
91+
border-collapse: collapse;
92+
}
93+
94+
table th, table td {
95+
padding: 10px;
96+
text-align: left;
97+
}
98+
99+
table th {
100+
background-color: #f8f9fa;
101+
font-size: 14px;
102+
}
103+
104+
table td {
105+
font-size: 14px;
106+
}
107+
108+
.success {
109+
color: green;
110+
}
111+
112+
.rejected {
113+
color: red;
114+
}
115+
116+
.pending {
117+
color: orange;
118+
}
119+
120+
.pagination {
121+
display: flex;
122+
justify-content: space-between;
123+
margin-top: 20px;
124+
}
125+
126+
.pagination span {
127+
font-size: 14px;
128+
color: #888888;
129+
}
130+
131+
.page-info {
132+
font-size: 14px;
133+
color: #888888;
134+
}

‎public/index.php

+1
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@
5555
$app->router->post('/update-technician-profile', [TechnicianController::class, 'updateTechnicianProfile']);
5656
$app->router->get('/technician-requests', [TechnicianController::class, 'viewRequests']);
5757
$app->router->post('/technician-requests-update', [TechnicianController::class, 'updateRequestStatus']);
58+
$app->router->get('/technician-transactions', [TechnicianController::class, 'technicianTransactions']);
5859

5960
/* Routes related to the Post */
6061
$app->router->get('/technician-create-post', [TechnicianController::class, 'technicianCreatePost']);

‎public/js/customer/customer-transactions.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// You can add functionality for tab switching here, for now it's just static
1+
// add functionality for tab switching here, for now it's just static
22
const tabs = document.querySelectorAll('.tab-button');
33
tabs.forEach(tab => {
44
tab.addEventListener('click', () => {

‎public/js/technician/technician-transactions.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// add functionality for tab switching here, for now it's just static
2+
const tabs = document.querySelectorAll('.tab-button');
3+
tabs.forEach(tab => {
4+
tab.addEventListener('click', () => {
5+
tabs.forEach(t => t.classList.remove('active'));
6+
tab.classList.add('active');
7+
// add logic here to filter the data based on the tab selected (All, Complete, Pending, Rejected)
8+
});
9+
});

‎views/technician/technician-settings.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
</div>
4343
</div>
4444
</a>
45-
<a href="#">
45+
<a href="/technician-transactions">
4646
<div class="card">
4747
<div>
4848
<div class="cardName">Transactions</div>

‎views/technician/technician-settings.php~

-71
This file was deleted.

‎views/technician/technician-transactions.php

+145
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
<?php
2+
3+
use app\core\Application;
4+
use app\models\CusTechReq;
5+
6+
?>
7+
8+
<!DOCTYPE html>
9+
<html lang="en">
10+
11+
<head>
12+
<meta charset="UTF-8">
13+
<meta name="viewport"
14+
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
15+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
16+
<title>Customer Dashboard</title>
17+
<link rel="stylesheet" href="/css/technician/technician-dashboard.css">
18+
<link rel="stylesheet" href="/css/technician/overlay.css">
19+
<link rel="stylesheet" href="/css/technician/technician-transactions.css">
20+
</head>
21+
22+
<body>
23+
<?php
24+
include_once 'components/sidebar.php';
25+
include_once 'components/header.php';
26+
?>
27+
<div class="container">
28+
<div class="header">
29+
<div class="header-item">
30+
<div class="total-payments">
31+
<p>Total Payments</p>
32+
<h2>LKR 430.00</h2>
33+
<small>as of 01-August 2024</small>
34+
</div>
35+
</div>
36+
<div class="header-item">
37+
<div class="pending-payments">
38+
<p>Pending Payments</p>
39+
<h2>LKR 100.00</h2>
40+
<small>as of 01-August 2024</small>
41+
</div>
42+
</div>
43+
</div>
44+
45+
<div class="payment-history">
46+
<h3>Payment History</h3>
47+
<div class="tabs">
48+
<button class="tab-button active">All</button>
49+
<button class="tab-button">Complete</button>
50+
<button class="tab-button">Pending</button>
51+
<button class="tab-button">Rejected</button>
52+
</div>
53+
54+
<table>
55+
<thead>
56+
<tr>
57+
<th>Order ID</th>
58+
<th>Date</th>
59+
<th>Amount</th>
60+
<th>Payment Method</th>
61+
<th>Status</th>
62+
</tr>
63+
</thead>
64+
<tbody>
65+
<tr>
66+
<td>#15267</td>
67+
<td>Mar 1, 2023</td>
68+
<td>LKR 100</td>
69+
<td>1502******4832</td>
70+
<td class="success">Success</td>
71+
</tr>
72+
<tr>
73+
<td>#153587</td>
74+
<td>Jan 26, 2023</td>
75+
<td>LKR 300</td>
76+
<td>1502******1132</td>
77+
<td class="success">Success</td>
78+
</tr>
79+
<tr>
80+
<td>#12436</td>
81+
<td>Feb 12, 2023</td>
82+
<td>LKR 100</td>
83+
<td>1256******4832</td>
84+
<td class="success">Success</td>
85+
</tr>
86+
<tr>
87+
<td>#16879</td>
88+
<td>Feb 12, 2023</td>
89+
<td>LKR 500</td>
90+
<td>1502******6789</td>
91+
<td class="success">Success</td>
92+
</tr>
93+
<tr>
94+
<td>#16378</td>
95+
<td>Feb 28, 2023</td>
96+
<td>LKR 500</td>
97+
<td>1502******4832</td>
98+
<td class="rejected">Rejected</td>
99+
</tr>
100+
<tr>
101+
<td>#16609</td>
102+
<td>March 13, 2023</td>
103+
<td>LKR 100</td>
104+
<td>1502******4832</td>
105+
<td class="pending">Pending</td>
106+
</tr>
107+
<tr>
108+
<td>#16907</td>
109+
<td>March 18, 2023</td>
110+
<td>LKR 100</td>
111+
<td>1502******4832</td>
112+
<td class="success">Success</td>
113+
</tr>
114+
</tbody>
115+
</table>
116+
117+
<div class="pagination">
118+
<span>10 per page</span>
119+
<div class="page-info">
120+
<span>1 of 1 pages</span>
121+
</div>
122+
</div>
123+
</div>
124+
</div>
125+
<body>
126+
127+
</body>
128+
<!-- Overlay for the confirmation message -->
129+
<div id="signOutOverlay" class="overlay">
130+
<div class="overlay-content">
131+
<p>Are you sure you want to sign out?</p>
132+
<button id="confirmSignOut" class="btn"><a href="/customer-logout"></a> Yes</button>
133+
<button id="cancelSignOut" class="btn">No</button>
134+
</div>
135+
</div>
136+
<!-- Icons-->
137+
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
138+
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
139+
<script src="/js/technician/technician-dashboard.js"></script>
140+
<script src="/js/technician/technician-home.js"></script>
141+
<script src="/js/technician/overlay.js"></script>
142+
<script src="/js/technician/technician-transactions.js"></script>
143+
</body>
144+
145+
</html>

0 commit comments

Comments
 (0)