Scribd
Upload
9 views24 pages

Create Admin and Staff Accounts

Uploaded by

yanyan02089
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views24 pages

Create Admin and Staff Accounts

Uploaded by

yanyan02089
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

create_account_admin.

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Create Admin Account</title>
<link rel="stylesheet" href="create_account_admin_css.css">
</head>
<body>
<h2>Create Admin Account</h2>
<form method="POST">
<input type="text" name="name" placeholder="Full Name"
required><br>
<input type="text" name="username" placeholder="Username"
required><br>
<input type="password" name="password" placeholder="Password"
required><br>
<input type="password" name="confirm_password"
placeholder="Confirm password" required><br>
<button type="submit">Create Admin</button>
</form>
</body>
</html>

create_account_staff.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Create Staff Account</title>
<link rel="stylesheet" href="create_account_staff_css.css">
</head>
<body>
<h2>Create Staff Account</h2>
<form method="POST">
<input type="text" name="full_name" placeholder="Full Name"
required><br>
<input type="text" name="username" placeholder="Username"
required><br>
<input type="password" name="password" placeholder="Password"
required><br>
<input type="password" name="confirm_password"
placeholder="Confirm Password" required><br>
<input type="text" name="employee_id" placeholder="Employee
ID" required><br>
<select name="role" required>
<option value=""> --Select Role-- </option>
<option value="manager">Manager</option>
<option value="sales_clerk">Sales Clerk</option>
<option value="inventory_clerk">Inventory Clerk</option>
</select><br>
<button type="submit">Create Staff</button>
</form>
</body>
</html>

dashboard_staff_view_css.css
/* Reset some styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', sans-serif;
}

/* Layout */
body {
padding: 20px;
background-color: #f9f9f9;
}

h1, h2, h3 {
margin-bottom: 15px;
color: #333;
}

nav a {
display: inline-block;
margin-right: 15px;
padding: 8px 16px;
background-color: #4285f4;
color: white;
text-decoration: none;
border-radius: 4px;
}

nav a:hover {
background-color: #3367d6;
}

/* Tabs */
.tab {
display: none;
margin-top: 20px;
}

.[Link] {
display: block;
}

/* Table */
table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}

th, td {
padding: 10px;
border: 1px solid #ccc;
text-align: left;
}

th {
background-color: #f2f2f2;
cursor: pointer;
}

tbody tr:nth-child(even) {
background-color: #f9f9f9;
}

/* Forms */
form {
margin-top: 15px;
}

input, select, button {


margin: 5px 10px 10px 0;
padding: 8px;
border-radius: 4px;
border: 1px solid #bbb;
}

input:disabled, button:disabled {
background-color: #eee;
color: #888;
}

/* Buttons */
button {
background-color: #28a745;
color: white;
border: none;
cursor: pointer;
}

button:hover:not(:disabled) {
background-color: #218838;
}

button:disabled {
cursor: not-allowed;
}

dashboard_staff_view.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Staff Dashboard</title>
<link rel="stylesheet" href="dashboard_staff_view_css.css">
<style>
.tab {
display: none;
}
.[Link] {
display: block;
}
nav a {
margin-right: 10px;
cursor: pointer;
}
input[type="text"] {
margin-bottom: 10px;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #dddddd;
padding: 8px;
}
th {
cursor: pointer; background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>Welcome Staff!</h1>

<nav>
<a onclick="showTab('manage_sales')">Manage Sales</a>
<a onclick="showTab('manage_inventory')">Manage Inventory</a>
</nav>

<section id="manage_sales" class="tab active">


<h2>Sales Table</h2>
<input type="text" id="searchInput" onkeyup="filterTable()"
placeholder="Search product name">
<table id="salesTable">
<thead>
<tr>
<th onclick="sortTable(0)">Sale ID</th>
<th onclick="sortTable(1)">Product</th>
<th onclick="sortTable(2)">Quantity</th>
<th onclick="sortTable(3)">Unit Price</th>
<th>Total Price</th>
<th onclick="sortTable(4)">Date</th>
<th class="no-print">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>1001</td>
<td>Motul Engine Oil</td>
<td>3</td>
<td>300.00 php</td>
<td>900.00 php</td>
<td>25/04/22</td>
</tr>
<tr>
<td>1002</td>
<td>Cyclone Motor Oil</td>
<td>10</td>
<td>350.00 php</td>
<td>3500.00 php</td>
<td>25/04/25</td>
</tr>
<tr>
<td>1003</td>
<td>Brake Cleaner</td>
<td>4</td>
<td>220.00 php</td>
<td>880.00 php</td>
<td>25/04/27</td>
</tr>
</tbody>
</table>
<section>
<button onclick="[Link]()" class="no-print">Print
Report</button>
<form method="POST">
<input type="text" name="product_id"
placeholder="Product ID" required><br>
<input type="number" name="quantity"
placeholder="Quantity" required><br>
<input type="number" step="0.01" name="price_per_unit"
placeholder="Price Per Unit" required><br>
<button type="submit">Add Sale</button>
</form>

<form method="POST">
<input type="hidden" name="sales_items_id" value="">
<input type="number" name="quantity" value="">
<input type="number" step="0.01" name="price_per_unit"
value="">
<button type="submit">Edit Sale</button>
</form>
<form method="POST">
<input type="hidden" name="sales_id" value="">
<button type="submit" onclick="return confirm('Delete
this sale?');">Delete Sale</button>
</form>
</section>

<script>
function filterTable() {
const input = [Link]("searchInput");
const filter = [Link]();
const table = [Link]("salesTable");
const trs = [Link]("tr");

for (let i = 1; i < [Link]; i++) {


const tds = trs[i].getElementsByTagName("td");
if ([Link] > 1) {
const product = tds[1].textContent || tds[1].innerText;
trs[i].[Link] = [Link]().includes(filter) ?
"" : "none";
}
}
}

function sortTable(n) {
const table = [Link]("salesTable");
let switching = true;
let dir = "asc";
let switchcount = 0;

while (switching) {
switching = false;
const rows = [Link];

for (let i = 1; i < [Link] - 1; i++) {


let shouldSwitch = false;
const x = rows[i].getElementsByTagName("TD")[n];
const y = rows[i + 1].getElementsByTagName("TD")[n];

let xContent = [Link] || [Link];


let yContent = [Link] || [Link];

let cmp = isNaN(xContent) ? [Link]() :


parseFloat(xContent);
let cmp2 = isNaN(yContent) ? [Link]() :
parseFloat(yContent);

if ((dir === "asc" && cmp > cmp2) || (dir === "desc" && cmp <
cmp2)) {
shouldSwitch = true;
break;
}
}

if (shouldSwitch) {
rows[i].[Link](rows[i + 1], rows[i]);
switching = true;
switchcount++;
} else {
if (switchcount === 0 && dir === "asc") {
dir = "desc";
switching = true;
}
}
}
}
</script>
</section>

<section id="manage_inventory" class="tab">


<h2>Inventory Table</h2>
<table id="inventoryTable">
<thead>
<tr>
<th>ID</th>
<th>Item</th>
<th>Stock</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>INV-001</td>
<td>Oil Filter</td>
<td>20</td>
<td>In Stock</td>
<td>
<form><button>Edit</button></form>
<form><button>Restock</button></form>
<form><button>Delete</button></form>
</td>
</tr>
<tr>
<td>INV-002</td>
<td>Engine Oil</td>
<td>0</td>
<td>Out of Stock</td>
<td>
<form><button>Edit</button></form>
<form><button>Restock</button></form>
<form><button>Delete</button></form>
</td>
</tr>
<tr>
<td>INV-003</td>
<td>Brake Cleaner</td>
<td>40</td>
<td>In Stock</td>
<td>
<form><button>Edit</button></form>
<form><button>Restock</button></form>
<form><button>Delete</button></form>
</td>
</tr>
</tbody>
</table>
<section>
<button type="submit">Add New Item</button>
<button type="submit">Print Inventory Report</button>
</section>
</section>

<script>
function showTab(tabId) {
const tabs = [Link]('.tab');
[Link](t => [Link]('active'));
[Link](tabId).[Link]('active');
}
</script>
</body>
</html>

dashboard_view.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Admin Dashboard</title>
<link rel="stylesheet" href="dashboard_view_css.css">
</head>
<body>
<header>
<h1>Welcome Admin!</h1>
<nav>
<a href="create_account_staff.html">Register Staff</a>
<a href="login_frontend.html">Logout</a>
</nav>
</header>
<main>
<p>This is your Admin control panel. You can now manage site
settings and users securely.</p>
</main>
</body>
</html>

inventory_manager_frontend.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Manage Inventory</title>
<link rel="stylesheet" href="manage_inventory_css.css">
</head>
<body>
<main>
<section>
<h2>Inventory Table</h2>
<table id="inventoryTable">
<thead>
<tr>
<th>ID</th>
<th>Item</th>
<th>Stock</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>INV-001</td>
<td>Oil Filter</td>
<td>20</td>
<td>In Stock</td>
<td>
<button>Edit</button>
<button>Restock</button>
<button>Delete</button>
</td>
</tr>
<tr>
<td>INV-002</td>
<td>Engine Oil</td>
<td>0</td>
<td>Out of Stock</td>
<td>
<button>Edit</button>
<button>Restock</button>
<button>Delete</button>
</td>
</tr>
<tr>
<td>INV-003</td>
<td>Brake Cleaner</td>
<td>40</td>
<td>In Stock</td>
<td>
<button>Edit</button>
<button>Restock</button>
<button>Delete</button>
</td>
</tr>
</tbody>
</table>
</section>
<section>
<button type="submit">Add New Item</button>
<button type="submit">Print Inventory Report</button>
</section>
</main>
</body>
</html>

inventory_view_frontend.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inventory - View Only</title>
<link rel="stylesheet" href="../public/dashboard_staff_view_css.css">
</head>
<body>

<h2>Inventory (View Only)</h2>

<input type="text" id="searchInventory" onkeyup="filterInventory()"


placeholder="Search product...">

<table id="inventoryTable">
<thead>
<tr>
<th onclick="sortInventory(0)">Product</th>
<th onclick="sortInventory(1)">Quantity</th>
<th onclick="sortInventory(2)">Status</th>
<th onclick="sortInventory(3)">Last Updated</th>
</tr>
</thead>
<tbody>
<tr>
<td>Transmission Oil</td>
<td>10</td>
<td>In Stock</td>
<td>2024-05-17</td>
</tr>
<tr>
<td>Windshield Washer</td>
<td>2</td>
<td>Low Stock</td>
<td>2024-05-15</td>
</tr>
</tbody>
</table>

<button onclick="[Link]()">Print Report</button>

<script>
function filterInventory() {
const input =
[Link]("searchInventory").[Link]();
const rows = [Link]("#inventoryTable tbody tr");

[Link](row => {
const product = [Link][0].[Link]();
[Link] = [Link](input) ? '' : 'none';
});
}

function sortInventory(n) {
const table = [Link]("inventoryTable");
let switching = true, dir = "asc", switchcount = 0;

while (switching) {
switching = false;
const rows = [Link];

for (let i = 1; i < [Link] - 1; i++) {


let x = rows[i].getElementsByTagName("TD")[n];
let y = rows[i + 1].getElementsByTagName("TD")[n];
let a = isNaN([Link]) ? [Link]() :
parseFloat([Link]);
let b = isNaN([Link]) ? [Link]() :
parseFloat([Link]);

if ((dir === "asc" && a > b) || (dir === "desc" && a < b)) {
rows[i].[Link](rows[i + 1], rows[i]);
switching = true;
switchcount++;
break;
}
}

if (switchcount === 0 && dir === "asc") {


dir = "desc";
switching = true;
}
}
}
</script>

</body>
</html>

login_frontend.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" href="login_frontend_css.css">
</head>
<body>
<h2>Login</h2>
<form method="POST">
<label for="role">Login As: </label>
<select name="role" id="role" require
onchange="toggleFields()">
<option value=""> --Select Role-- </option>
<option value="admin">Admin</option>
<option value="manager">Manager</option>
<option value="sales_clerk">Sales Clerk</option>
<option value="inventory_clerk">Inventory Clerk</option>
</select><br>

<input type="text" name="username" placeholder="Username"


required><br>
<input type="text" name="password" placeholder="Password"
required><br>
<button type="submit">Login</button>
</form>

<script>
function toggleFields() {
const role = [Link]("role").value;
[Link]("Selected role: ", role);
}
</script>
</body>
</html>

manage_sales.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Manage Sales</title>
<link rel="stylesheet" href="manage_sales_css.css">
<style>
input[type="text"] {
margin-bottom: 10px;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #dddddd;
padding: 8px;
}
th {
cursor: pointer; background-color: #f2f2f2;
}
</style>
</head>
<body>
<input type="text" id="searchInput" onkeyup="filterTable()"
placeholder="Search for products...">
<main>
<section>
<h2>Sales Table</h2>
<table id="salesTable">
<thead>
<tr>
<th onclick="sortTable(0)">Sale ID</th>
<th onclick="sortTable(1)">Product</th>
<th onclick="sortTable(2)">Quantity</th>
<th onclick="sortTable(3)">Unit Price</th>
<th>Total Price</th>
<th onclick="sortTable(4)">Date</th>
<th class="no-print">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>1001</td>
<td>Motul Engine Oil</td>
<td>3</td>
<td>300.00 php</td>
<td>900.00 php</td>
<td>25/04/22</td>
</tr>
<tr>
<td>1002</td>
<td>Cyclone Motor Oil</td>
<td>10</td>
<td>350.00 php</td>
<td>3500.00 php</td>
<td>25/04/25</td>
</tr>
<tr>
<td>1003</td>
<td>Brake Cleaner</td>
<td>4</td>
<td>220.00 php</td>
<td>880.00 php</td>
<td>25/04/27</td>
</tr>
</tbody>
</table>
</section>
<section>
<button onclick="[Link]()" class="no-print">Print
Report</button>
<form method="POST">
<input type="text" name="product_id"
placeholder="Product ID" required><br>
<input type="number" name="quantity"
placeholder="Quantity" required><br>
<input type="number" step="0.01" name="price_per_unit"
placeholder="Price Per Unit" required><br>
<button type="submit">Add Sale</button>
</form>
<form method="POST">
<input type="hidden" name="sales_items_id" value="">
<input type="number" name="quantity" value="">
<input type="number" step="0.01" name="price_per_unit"
value="">
<button type="submit">Edit Sale</button>
</form>

<form method="POST">
<input type="hidden" name="sales_id" value="">
<button type="submit" onclick="return confirm('Delete
this sale?');">Delete Sale</button>
</form>
</section>
</main>

<script>
function filterTable() {
const input = [Link]("searchInput");
const filter = [Link]();
const table = [Link]("salesTable");
const trs = [Link]("tr");

for (let i = 1; i < [Link]; i++) {


const tds = trs[i].getElementsByTagName("td");
if ([Link] > 1) {
const product = tds[1].textContent || tds[1].innerText;
trs[i].[Link] = [Link]().includes(filter) ?
"" : "none";
}
}
}

function sortTable(n) {
const table = [Link]("salesTable");
let switching = true;
let dir = "asc";
let switchcount = 0;
while (switching) {
switching = false;
const rows = [Link];

for (let i = 1; i < [Link] - 1; i++) {


let shouldSwitch = false;
const x = rows[i].getElementsByTagName("TD")[n];
const y = rows[i + 1].getElementsByTagName("TD")[n];

let xContent = [Link] || [Link];


let yContent = [Link] || [Link];

let cmp = isNaN(xContent) ? [Link]() :


parseFloat(xContent);
let cmp2 = isNaN(yContent) ? [Link]() :
parseFloat(yContent);

if ((dir === "asc" && cmp > cmp2) || (dir === "desc" && cmp <
cmp2)) {
shouldSwitch = true;
break;
}
}

if (shouldSwitch) {
rows[i].[Link](rows[i + 1], rows[i]);
switching = true;
switchcount++;
} else {
if (switchcount === 0 && dir === "asc") {
dir = "desc";
switching = true;
}
}
}
}
</script>
</body>
</html>
sales_view_frontend.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sales - View Only</title>
<link rel="stylesheet" href="../public/dashboard_staff_view_css.css">
</head>
<body>

<h2>Sales Report (View Only)</h2>

<input type="text" id="searchInput" onkeyup="filterTable()"


placeholder="Search for product...">

<table id="salesTable">
<thead>
<tr>
<th onclick="sortTable(0)">Sale ID</th>
<th onclick="sortTable(1)">Product</th>
<th onclick="sortTable(2)">Quantity</th>
<th onclick="sortTable(3)">Price/Unit</th>
<th onclick="sortTable(4)">Total</th>
<th onclick="sortTable(5)">Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>1001</td>
<td>Brake Fluid</td>
<td>4</td>
<td>₱200</td>
<td>₱800</td>
<td>2024-05-17</td>
</tr>
<tr>
<td>1002</td>
<td>Engine Oil</td>
<td>3</td>
<td>₱300</td>
<td>₱900</td>
<td>2024-05-18</td>
</tr>
</tbody>
</table>

<button onclick="[Link]()">Print Report</button>

<script>
function filterTable() {
const input =
[Link]("searchInput").[Link]();
const rows = [Link]("#salesTable tbody tr");

[Link](row => {
const product = [Link][1].[Link]();
[Link] = [Link](input) ? '' : 'none';
});
}

function sortTable(n) {
const table = [Link]("salesTable");
let switching = true, dir = "asc", switchcount = 0;

while (switching) {
switching = false;
const rows = [Link];

for (let i = 1; i < [Link] - 1; i++) {


let x = rows[i].getElementsByTagName("TD")[n];
let y = rows[i + 1].getElementsByTagName("TD")[n];
let a = isNaN([Link]) ? [Link]() :
parseFloat([Link]);
let b = isNaN([Link]) ? [Link]() :
parseFloat([Link]);

if ((dir === "asc" && a > b) || (dir === "desc" && a < b)) {
rows[i].[Link](rows[i + 1], rows[i]);
switching = true;
switchcount++;
break;
}
}

if (switchcount === 0 && dir === "asc") {


dir = "desc";
switching = true;
}
}
}
</script>

</body>
</html>

You might also like