Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/cepdnaclk/e19-3yp-Smart-Bil…
Browse files Browse the repository at this point in the history 
…ling-System
  • Loading branch information
@mewanDimalsha
mewanDimalsha committed Jan 30, 2024
2 parents 330fa5b + e6ea1d7 commit 254d160
Show file tree
Hide file tree
Showing 19 changed files with 550 additions and 173 deletions.
142 changes: 68 additions & 74 deletions code/Software/Frontend/src/AdminDashboard/AdminDashboard.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,87 +1,81 @@
import React from 'react'
import 'bootstrap-icons/font/bootstrap-icons.css'
import { Link, Outlet } from "react-router-dom"
import { useState } from 'react';
import './AdminDashboard.css';
import React, { useState } from 'react';
import 'bootstrap-icons/font/bootstrap-icons.css';
import { Link, Outlet } from 'react-router-dom';
import './AdminDashboard.css';

function AdminDashboard() {
const [isSidebarOpen, setSidebarOpen] = useState(true);

const toggleSidebar = () => {
setSidebarOpen(!isSidebarOpen);
};

function AdminDashboard(){
return (
<div className="login-container">
<div className="header-bar ">
<h2 style={{ color: 'white', textAlign: 'left' }}><b>SMART</b> <span className="thin-text">BILLING SYSTEM</span></h2>
<div className={`login-container ${isSidebarOpen ? 'sidebar-open' : 'sidebar-closed'}`}>
{/* Removed the slide bar arrow button */}
<div className="header-bar">
<h2 style={{ color: 'white', textAlign: 'left' }}>
<b>SMART</b> <span className="thin-text">BILLING SYSTEM</span>
</h2>
</div>
<div className={`container-fluid`} >
<div className={`container-fluid`}>
<div className="row bg-light">

<div className="col-12 col-md-5 col-xl-2 px-sm-2 px-0 bg-white" >
<div className="d-flex flex-column align-items-start px-3 pt-2 min-vh-100">


{isSidebarOpen && (
<div className="col-12 col-md-5 col-xl-2 px-sm-2 px-0 bg-white">
<div className="d-flex flex-column align-items-start px-3 pt-2 min-vh-100 max-width-5000px">
<ul className="nav nav-pills flex-column mb-sm-auto mb-0 align-items-start" id="menu">

<li>
<Link to="/AdminDashboard" className="nav-link px-0 align-middle">
<i className="fs-4 bi-house-door icon-color" ></i> <span className="ms-1 d-none d-sm-inline text-dark thin-text" ><b>Dashboard</b></span>
</Link>
</li>

<li>
<Link to='/AdminDashboard/Invoices' className="nav-link px-0 align-middle">
<i className="fs-4 bi-file-text icon-color" ></i> <span className="ms-1 d-none d-sm-inline text-dark thin-text" ><b>Invoices</b></span>
</Link>
</li>
<li>
<Link to='/AdminDashboard/Sales' className="nav-link px-0 align-middle">
<i className="fs-4 bi-cash-coin icon-color" ></i> <span className="ms-1 d-none d-sm-inline text-dark thin-text" ><b>Sales</b></span>
</Link>
</li>
<li>
<Link to='/AdminDashboard/Security_Footage' className="nav-link px-0 align-middle">
<i className="fs-4 bi-lock icon-color" ></i> <span className="ms-1 d-none d-sm-inline text-dark thin-text" ><b>Security Footage</b></span>
</Link>
</li>
<li>
<Link to='/AdminDashboard/Device_Status' className="nav-link px-0 align-middle">
<i className="fs-4 bi-gear icon-color" ></i> <span className="ms-1 d-none d-sm-inline text-dark thin-text" ><b>Device Status</b></span>
</Link>
</li>
<li>
<Link to='/' className="nav-link px-0 align-middle">
<i className="fs-4 bi-power icon-color" ></i> <span className="ms-1 d-none d-sm-inline text-dark thin-text" ><b>Logout</b></span>
</Link>
</li>
{/* Sidebar menu items */}
<li>
<Link to="/AdminDashboard" className="nav-link px-0 align-middle">
<i className="fs-4 bi-house-door icon-color"></i> <span className="ms-1 d-none d-sm-inline text-dark thin-text"><b>Dashboard</b></span>
</Link>
</li>
<li>
<Link to="/AdminDashboard/Invoices" className="nav-link px-0 align-middle">
<i className="fs-4 bi-file-text icon-color"></i> <span className="ms-1 d-none d-sm-inline text-dark thin-text"><b>Invoices</b></span>
</Link>
</li>
<li>
<Link to="/AdminDashboard/Sales" className="nav-link px-0 align-middle">
<i className="fs-4 bi-cash-coin icon-color"></i> <span className="ms-1 d-none d-sm-inline text-dark thin-text"><b>Sales</b></span>
</Link>
</li>
<li>
<Link to="/AdminDashboard/Security_Footage" className="nav-link px-0 align-middle">
<i className="fs-4 bi-lock icon-color"></i> <span className="ms-1 d-none d-sm-inline text-dark thin-text"><b>Security Footage</b></span>
</Link>
</li>
<li>
<Link to="/AdminDashboard/Device_Status" className="nav-link px-0 align-middle">
<i className="fs-4 bi-gear icon-color"></i> <span className="ms-1 d-none d-sm-inline text-dark thin-text"><b>Device Status</b></span>
</Link>
</li>
<li>
<Link to="/" className="nav-link px-0 align-middle">
<i className="fs-4 bi-power icon-color"></i> <span className="ms-1 d-none d-sm-inline text-dark thin-text"><b>Logout</b></span>
</Link>
</li>
</ul>

</div>
</div>
)}
<div className="col py-3 position-relative">
{/* Main content area */}
<Outlet />
</div>
</div>
<div className="col py-3 position-relative">


<Outlet />
</div>
</div>
</div>
<div className="footer-bar">
<h6>
<span className="thin-text" >
<a href="/privacy-policy" >
Privacy Policy
</a>
<a href="/terms-of-service" >
Terms of Service
</a>
<a href="/contact-us" >
Contact Us
</a>
</span>
</h6>
</div>
<div className="footer-bar">
<h6>
<span className="thin-text">
<a href="/privacy-policy">Privacy Policy</a>
<a href="/terms-of-service">Terms of Service</a>
<a href="/contact-us">Contact Us</a>
</span>
</h6>
</div>
</div>

</div>

)
);
}

export default AdminDashboard
export default AdminDashboard;
31 changes: 31 additions & 0 deletions code/Software/Frontend/src/AdminDashboard/BillDetails.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
.invoice-container {
margin-top: 30px;
}

.table {
width: 90%;
height: 50%;
border-collapse: collapse;
border-radius: 30px;
}

.table th,
.table td {
border: 1px solid #ffffff;
padding: 30px;
text-align: center;

}

.table th {
background-color: #a1ed92;
}

.table tbody tr:nth-child(even) {
background-color: #ffffff;
}

.table tbody tr:hover {
background-color: #ddd;
}

100 changes: 100 additions & 0 deletions code/Software/Frontend/src/AdminDashboard/BillDetails.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
// BillDetails.js

import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import './BillDetails.css';

function BillDetails() {
const { id } = useParams();
const [bill, setBill] = useState(null);
const fetchURL = "https://smart-billing-system-50913e9a24e6.herokuapp.com/";

useEffect(() => {
const fetchBillDetails = async () => {
try {
const response = await fetch(fetchURL+`/itemPurchased/bill/${id}`);
// const response = await fetch(`http://localhost:5555/itemPurchased/bill/${id}`);
if (!response.ok) {
throw new Error(`Failed to fetch bill details. Status: ${response.status}`);
}
const billData = await response.json();


// Fetch product details for each item in the bill
const productDetailsPromises = billData.map(async (item) => {

if (item.productID[0]=='%'){
item.productID = item.productID.slice(3, -3);
}
//const productResponse = await fetch(`http://localhost:5555/product/${item.productID}`);
const productResponse = await fetch(fetchURL+`/product/${item.productID}`);
if (!productResponse.ok) {
throw new Error(`Failed to fetch product details for product ID: ${item.productID}`);
}
const productData = await productResponse.json();

return { ...item, productName: productData.productName };
});

// Resolve all promises
const productDetails = await Promise.all(productDetailsPromises);
console.log(productDetails);
setBill(productDetails);
} catch (error) {
console.error('Error fetching bill details:', error);
}
};

fetchBillDetails();
}, [id]);


if (!bill) {
return <div>Loading...</div>;
}

return (
<section className="invoice-container">
<div className="container">
<div className="row">
<div className="col">
<h2>Invoice Summary</h2>
<p>Invoice No: {id}</p>
<table className="table">
<thead>
<tr>

<th >Description</th>
<th>Unit Price</th>
<th>Qty</th>
<th style={{textAlign:'right'}}>Price</th>
</tr>
</thead>
<tbody>
{bill.map((item, index) => (
<tr key={index}>

<td>{item.productName}</td>
<td >LKR {item.unitPrice}.00</td>
<td>{item.quantity}</td>
<td style={{textAlign:'right'}}>LKR {item.unitPrice * item.quantity}.00</td>
</tr>
))}
</tbody>
<tfoot>
<tr>
<th colSpan="3">Total</th>
<th style={{textAlign:'right'}}>
LKR {bill.reduce((total, item) => total + item.unitPrice * item.quantity, 0)}.00
</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</section>
);
}

export default BillDetails;
10 changes: 5 additions & 5 deletions code/Software/Frontend/src/AdminDashboard/Dashboard/Dashboard.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,13 @@
border-color: rgb(239, 245, 245);
margin: 0;
margin-top: 15px;

}

.row {
gap: 100px;
}


.card-body {
padding: 20px;
padding: 10px;
}

.container_for_sales {
Expand All @@ -21,6 +20,7 @@
align-items: center;
max-width: 900px;
border-radius: 25px;
padding: 40px;
padding: 10px;

}

Loading

0 comments on commit 254d160

Please sign in to comment.