Skip to content

Commit fc4ba41

Browse files
yohan-ocyohan-oc
committed
new transaction design added
1 parent 8ceb888 commit fc4ba41

File tree

5 files changed

+378
-108
lines changed

5 files changed

+378
-108
lines changed

‎designs/transactions/new_design.html‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Work in Progress Palleting</title>
7+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> </head>
8+
<link rel="stylesheet" href="styles.css">
9+
<body>
10+
11+
<div class="container">
12+
<div class="header">
13+
<div class="logo">
14+
<img src="your_logo.png" alt="Turing Trust Logo"> </div>
15+
<div class="logout">
16+
<button>Log out</button>
17+
</div>
18+
</div>
19+
20+
<h1>Work in progress palleting</h1>
21+
22+
<div class="row">
23+
<div class="col-md-8"> <div class="transactions">
24+
<h2>Transactions</h2>
25+
<div class="input-group">
26+
<input type="text" placeholder="Scan or enter asset ID">
27+
<button>Add</button>
28+
</div>
29+
<table class="table">
30+
<thead>
31+
<tr>
32+
<th>Transaction ID</th>
33+
<th>Asset ID</th>
34+
<th>Notes</th>
35+
<th>Actions</th>
36+
</tr>
37+
</thead>
38+
<tbody>
39+
<tr>
40+
<td>5</td>
41+
<td>SB004321</td>
42+
<td>SB004321 is already assigned to XXX123</td>
43+
<td></td> </tr>
44+
<tr>
45+
<td>4</td>
46+
<td>SB001243</td>
47+
<td>SB001243 is already assigned to XXX123</td>
48+
<td></td> </tr>
49+
<tr>
50+
<td>3</td>
51+
<td>SB003412</td>
52+
<td>SB003412 is already assigned to XXX123</td>
53+
<td></td> </tr>
54+
</tbody>
55+
</table>
56+
</div>
57+
58+
<div class="inventory">
59+
<h2>Inventory List</h2>
60+
<p>Assets assigned to the parent will display below.</p>
61+
<table class="table">
62+
<thead>
63+
<tr>
64+
<th>Asset ID</th>
65+
<th>Status</th>
66+
<th>Make</th>
67+
<th>Model</th>
68+
</tr>
69+
</thead>
70+
<tbody>
71+
<tr>
72+
<td>SB004321</td>
73+
<td>Boxed for shipping</td>
74+
<td>Acer</td>
75+
<td>0560X</td>
76+
</tr>
77+
<tr>
78+
<td>SB001243</td>
79+
<td>Boxed for shipping</td>
80+
<td>Dell</td>
81+
<td>Inspiron</td>
82+
</tr>
83+
<tr>
84+
<td>SB003412</td>
85+
<td>Boxed for shipping</td>
86+
<td>Apple</td>
87+
<td>Macbook Air</td>
88+
</tr>
89+
</tbody>
90+
</table>
91+
</div>
92+
</div>
93+
94+
<div class="col-md-4"> <div class="summary">
95+
<div class="parent-id">
96+
<h3>Parent ID</h3>
97+
<p>XXX123</p>
98+
</div>
99+
<div class="transaction-errors">
100+
<h3>Transaction Errors</h3>
101+
<p>0</p>
102+
</div>
103+
<div class="inventory-count">
104+
<h3>Inventory List Count</h3>
105+
<p>3</p>
106+
</div>
107+
</div>
108+
</div>
109+
</div>
110+
111+
<div class="footer">
112+
<button>Finish scanning</button>
113+
</div>
114+
</div>
115+
116+
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
117+
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
118+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
119+
</body>
120+
</html>

‎designs/transactions/styles.css‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
/* Basic Styling for Work in Progress Palleting */
2+
3+
body {
4+
font-family: sans-serif; /* Use a default sans-serif font */
5+
margin: 20px; /* Add some margin around the content */
6+
}
7+
8+
.container {
9+
max-width: 1200px; /* Set a maximum width for the container */
10+
}
11+
12+
/* Header Styles */
13+
.header {
14+
display: flex;
15+
justify-content: space-between; /* Align logo and logout button */
16+
align-items: center;
17+
margin-bottom: 20px;
18+
}
19+
20+
.logo img {
21+
max-height: 50px; /* Adjust logo height as needed */
22+
}
23+
24+
.logout button {
25+
/* Style the logout button */
26+
padding: 8px 16px;
27+
background-color: #eee; /* Light gray background */
28+
border: 1px solid #ccc; /* Light gray border */
29+
border-radius: 4px;
30+
cursor: pointer;
31+
}
32+
33+
h1 {
34+
text-align: center; /* Center the main heading */
35+
margin-bottom: 20px;
36+
}
37+
38+
/* Tables Styles */
39+
.table {
40+
width: 100%;
41+
border-collapse: collapse; /* Collapse table borders */
42+
margin-bottom: 20px;
43+
}
44+
45+
.table th, .table td {
46+
padding: 8px;
47+
border: 1px solid #ddd; /* Light gray border for table cells */
48+
text-align: left; /* Align text to the left in table cells */
49+
}
50+
51+
.table th {
52+
background-color: #f0f0f0; /* Very light gray background for table headers */
53+
}
54+
55+
/* Transactions and Inventory Sections */
56+
.transactions, .inventory {
57+
margin-bottom: 20px;
58+
}
59+
60+
.transactions h2, .inventory h2 {
61+
margin-bottom: 10px;
62+
}
63+
64+
.input-group {
65+
display: flex; /* Arrange input and button horizontally */
66+
margin-bottom: 10px;
67+
}
68+
69+
.input-group input {
70+
flex-grow: 1; /* Allow input to take up available space */
71+
padding: 8px;
72+
border: 1px solid #ccc;
73+
border-radius: 4px;
74+
}
75+
76+
.input-group button {
77+
padding: 8px 16px;
78+
background-color: #4CAF50; /* Green background for Add button */
79+
color: white;
80+
border: none;
81+
border-radius: 4px;
82+
cursor: pointer;
83+
}
84+
85+
/* Summary Section Styles */
86+
.summary {
87+
border: 1px solid #ccc;
88+
padding: 20px;
89+
border-radius: 4px;
90+
}
91+
92+
.summary h3 {
93+
margin-bottom: 10px;
94+
}
95+
96+
.summary p {
97+
margin-bottom: 15px;
98+
}
99+
100+
/* Footer Styles */
101+
.footer {
102+
text-align: center;
103+
}
104+
105+
.footer button {
106+
padding: 10px 20px;
107+
background-color: #007bff; /* Blue background for Finish Scanning button */
108+
color: white;
109+
border: none;
110+
border-radius: 4px;
111+
cursor: pointer;
112+
}
113+
114+
/* Responsive adjustments (example) */
115+
@media (max-width: 768px) {
116+
.col-md-8, .col-md-4 {
117+
/* On smaller screens, make columns stack vertically */
118+
width: 100%;
119+
}
120+
}

‎vue-frontend/warehouse-frontend/src/assets/styles/global.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600&display=swap');
2+
3+
* {
4+
font-family: 'Barlow', sans-serif;
5+
}
6+
7+
body {
8+
font-family: 'Barlow', sans-serif; /* Fallback to sans-serif if Barlow is not available */
9+
}

‎vue-frontend/warehouse-frontend/src/main.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,6 @@ import router from "./router";
55
import "bootstrap/dist/css/bootstrap.min.css";
66
import "bootstrap/dist/js/bootstrap.bundle.min.js";
77
import 'bootstrap-icons/font/bootstrap-icons.css';
8+
import './assets/styles/global.css';
89

910
createApp(App).use(router).mount('#app')

0 commit comments

Comments
 (0)