+
setIsModalOpen(false)}>
+ {actionType === 'collect' ? '๐ฆ Collections' : 'โฉ๏ธ Returns'}
+
+
+
+
+
+
+
- {isCartOpen && (
-
-
My Cart
- {cart.map((item, index) => (
-
-
-
-
{item.item_name}
-
Qty: {item.qty_borrowed}
-
- {location.pathname !== '/new-borrow-form' && (
-
removeFromCart(index)}
- className="cancel-item-button"
- >
-
-
-
- )}
-
- ))}
-
Checkout
+
+ {window.location.pathname=='/'?<>:
๐ Home}
+
+ {window.location.host != 'edic.vercel.app' && <>
+
+ ๐ฆ Collect
+
+
+ โฉ๏ธ Return
+
+ }
+
+ ๐ Cart ({cart.length})
- )}
+
+
+ {isCartOpen && (
+
+
๐ My Cart
+ {cart.map((item, index) => (
+
+
+
+
{item.item_name}
+
Qty: {item.qty_borrowed}
+
+ {location.pathname !== '/new-borrow-form' && (
+
removeFromCart(index)}
+ className="cancel-item-button"
+ >
+
+
+
+ )}
+
+ ))}
+ {cart.length === 0 &&
No items in cart.
}
+
Checkout
+
+ )}
+
);
diff --git a/src/components/NewBorrowForm.js b/src/components/NewBorrowForm.js
index d5d9a5c..7433c7d 100644
--- a/src/components/NewBorrowForm.js
+++ b/src/components/NewBorrowForm.js
@@ -3,9 +3,11 @@ import '../styles/NewBorrowForm.css';
import { useLocation } from 'react-router-dom';
import axios from 'axios';
import { useCart } from './CartContext';
+import { useWhichLocation } from './LocationContext';
function NewBorrowForm() {
const location = useLocation();
+ const { whichLocation } = useWhichLocation();
const selectedItems = useMemo(() => location.state?.selectedItems || [], [location.state?.selectedItems]);
const [errors, setErrors] = useState({});
const [isSubmitting, setIsSubmitting] = useState(false);
@@ -14,7 +16,7 @@ function NewBorrowForm() {
const [requiresApproval, setRequiresApproval] = useState(false);
const submitButtonRef = useRef(null);
-
+ console.log(whichLocation);
const [formData, setFormData] = useState({
name: '',
email: '',
@@ -74,6 +76,11 @@ function NewBorrowForm() {
isValid = false;
}
+ if ((key === 'phone_number') && formData[key].length !== 8) {
+ newErrors[key] = 'Invalid phone number';
+ isValid = false;
+ }
+
if ((key === 'start_usage_date' || key === 'end_usage_date') && formData[key]) {
const date = new Date(formData[key]);
const dayOfWeek = date.getDay();
@@ -109,6 +116,7 @@ function NewBorrowForm() {
const formDataToSend = {
...formData,
...itemsData,
+ location: whichLocation || 'hub',
completion_time: new Date().toISOString()
};
@@ -117,6 +125,7 @@ function NewBorrowForm() {
formDataToSend.project_supervisor_name = '';
formDataToSend.supervisor_email = '';
}
+ console.log(formDataToSend);
await axios.post('https://express-server-1.fly.dev/api/submit-form', formDataToSend);
setIsSubmitted(true); // Set this on successful submission
@@ -169,7 +178,7 @@ function NewBorrowForm() {
{key.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')}:
);
})}
+
We collect your personal data to contact you regarding your loan transaction. Your data may be disclosed to third parties solely for this purpose.
+
+
By submitting this form, you consent to the collection, use, and disclosure of your data as described above. Please review your information for accuracy before clicking "Submit."
+
Submit
diff --git a/src/components/NewCollectForm.js b/src/components/NewCollectForm.js
new file mode 100644
index 0000000..0410885
--- /dev/null
+++ b/src/components/NewCollectForm.js
@@ -0,0 +1,176 @@
+import React, { useState, useEffect, useMemo, useRef } from 'react';
+import '../styles/NewBorrowForm.css';
+import { useLocation } from 'react-router-dom';
+import axios from 'axios';
+
+function NewCollectForm({verifiedByStaff, startVerification}) {
+ const location = useLocation();
+ const loanDetails = useMemo(() => location.state?.loanDetails || {});
+ const [errors, setErrors] = useState({});
+ const [isSubmitting, setIsSubmitting] = useState(false);
+ const [isSubmitted, setIsSubmitted] = useState(false);
+
+ const [formData, setFormData] = useState({
+ date: new Date().toISOString().split('T')[0],
+ staff_name: '',
+ serial_numbers: '',
+ });
+
+ const handleChange = (e) => {
+ const { name, value } = e.target;
+
+ // Ensure 8 digit phone number
+ if (name === 'phone' && value.length > 8) return;
+
+ let updatedErrors = { ...errors, [name]: '' };
+ const updatedFormData = { ...formData, [name]: value };
+
+ // Check for weekend dates
+ if (name === 'start_usage_date' || name === 'end_usage_date') {
+ const date = new Date(value);
+ const dayOfWeek = date.getDay();
+ if (dayOfWeek === 0 || dayOfWeek === 6) { // 0 = Sunday, 6 = Saturday
+ updatedErrors[name] = 'Weekend dates are not allowed';
+ }
+ }
+
+ setFormData(updatedFormData);
+ setErrors(updatedErrors);
+ };
+
+ const validateForm = () => {
+ let isValid = true;
+ let newErrors = {};
+
+ if (!verifiedByStaff) {
+ newErrors['verify'] = 'Get a staff to verify your collection';
+ isValid = false;
+ }
+
+ Object.keys(formData).forEach(key => {
+ if (!formData[key].trim() && key !== 'additional_remarks') {
+ newErrors[key] = 'Field cannot be blank';
+ isValid = false;
+ }
+
+ if ((key === 'date') && formData[key]) {
+ const date = new Date(formData[key]);
+ const dayOfWeek = date.getDay();
+ if (dayOfWeek === 0 || dayOfWeek === 6) {
+ newErrors[key] = 'Weekend dates are not allowed';
+ isValid = false;
+ }
+ }
+ });
+
+ // Log the current validation state for debugging
+ console.log("Validation Errors:", newErrors);
+ console.log("Is Form Valid:", isValid);
+
+ setErrors(newErrors);
+ return isValid;
+ };
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ if (isSubmitting) return; // Prevent further execution if already submitting
+ setIsSubmitting(true); // Set early to prevent multiple submissions
+
+ if (validateForm()) {
+ try {
+ const formDataToSend = {
+ ...formData,
+ status: 'Borrowed',
+ loan_id: loanDetails.transaction_id,
+ completion_time: new Date().toISOString()
+ };
+
+ console.log('Submitting form with data:', formDataToSend);
+ await axios.post('https://express-server-1.fly.dev/api/loan-status/update', formDataToSend);
+ setIsSubmitted(true); // Set this on successful submission
+ } catch (error) {
+ console.error('Error submitting form:', error);
+ setIsSubmitting(false); // Reset on error as well
+ } finally {
+ setIsSubmitting(false); // Always reset submitting state after the operation
+ }
+ } else {
+ setIsSubmitting(false); // Reset if validation fails
+ }
+ };
+
+ useEffect(() => window.scrollTo(0, 0), []);
+
+ if (isSubmitting) return
Submitting...
;
+ else if (isSubmitted) return
Form submitted successfully!
;
+
+ return (
+
+
Items to Collect:
+
{loanDetails.student_name}
+
+ {loanDetails?.loan_items?.length > 0 ? (
+
+ {loanDetails.loan_items.map((item, index) => (
+ {item.item_name} (Qty: {item.quantity})
+ ))}
+
+ ) : (
+
No items selected.
+ )}
+
+
๐: {new Date(loanDetails.start_usage_date).toLocaleDateString()} to {new Date(loanDetails.end_usage_date).toLocaleDateString()}
+
+
+
+
+ );
+}
+
+export default NewCollectForm;
\ No newline at end of file
diff --git a/src/components/NewReturnForm.js b/src/components/NewReturnForm.js
new file mode 100644
index 0000000..49b14cc
--- /dev/null
+++ b/src/components/NewReturnForm.js
@@ -0,0 +1,170 @@
+import React, { useState, useEffect, useMemo, useRef } from 'react';
+import '../styles/NewBorrowForm.css';
+import { useLocation } from 'react-router-dom';
+import axios from 'axios';
+
+function NewReturnForm({verifiedByStaff, startVerification}) {
+ const location = useLocation();
+ const loanDetails = useMemo(() => location.state?.loanDetails || {});
+ const [errors, setErrors] = useState({});
+ const [isSubmitting, setIsSubmitting] = useState(false);
+ const [isSubmitted, setIsSubmitted] = useState(false);
+
+ const [formData, setFormData] = useState({
+ date: new Date().toISOString().split('T')[0],
+ staff_name: '',
+ });
+
+ const handleChange = (e) => {
+ const { name, value } = e.target;
+
+ // Ensure 8 digit phone number
+ if (name === 'phone' && value.length > 8) return;
+
+ let updatedErrors = { ...errors, [name]: '' };
+ const updatedFormData = { ...formData, [name]: value };
+
+ // Check for weekend dates
+ if (name === 'start_usage_date' || name === 'end_usage_date') {
+ const date = new Date(value);
+ const dayOfWeek = date.getDay();
+ if (dayOfWeek === 0 || dayOfWeek === 6) { // 0 = Sunday, 6 = Saturday
+ updatedErrors[name] = 'Weekend dates are not allowed';
+ }
+ }
+
+ setFormData(updatedFormData);
+ setErrors(updatedErrors);
+ };
+
+ const validateForm = () => {
+ let isValid = true;
+ let newErrors = {};
+
+ if (!verifiedByStaff) {
+ newErrors['verify'] = 'Get a staff to verify your collection';
+ isValid = false;
+ }
+
+ Object.keys(formData).forEach(key => {
+ if ((key === 'phone') && formData[key].trim() != loanDetails.student_phone) {
+ newErrors[key] = 'Incorrect phone number';
+ isValid = false;
+ }
+
+ if (!formData[key].trim() && key !== 'additional_remarks') {
+ newErrors[key] = 'Field cannot be blank';
+ isValid = false;
+ }
+
+ if ((key === 'date') && formData[key]) {
+ const date = new Date(formData[key]);
+ const dayOfWeek = date.getDay();
+ if (dayOfWeek === 0 || dayOfWeek === 6) {
+ newErrors[key] = 'Weekend dates are not allowed';
+ isValid = false;
+ }
+ }
+ });
+
+ // Log the current validation state for debugging
+ console.log("Validation Errors:", newErrors);
+ console.log("Is Form Valid:", isValid);
+
+ setErrors(newErrors);
+ return isValid;
+ };
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ if (isSubmitting) return; // Prevent further execution if already submitting
+ setIsSubmitting(true); // Set early to prevent multiple submissions
+
+ if (validateForm()) {
+ try {
+ const formDataToSend = {
+ ...formData,
+ status: 'Completed',
+ loan_id: loanDetails.transaction_id,
+ completion_time: new Date().toISOString()
+ };
+
+ console.log('Submitting form with data:', formDataToSend);
+ await axios.post('https://express-server-1.fly.dev/api/loan-status/update', formDataToSend);
+ setIsSubmitted(true); // Set this on successful submission
+ } catch (error) {
+ console.error('Error submitting form:', error);
+ setIsSubmitting(false); // Reset on error as well
+ } finally {
+ setIsSubmitting(false); // Always reset submitting state after the operation
+ }
+ } else {
+ setIsSubmitting(false); // Reset if validation fails
+ }
+ };
+
+ useEffect(() => window.scrollTo(0, 0), []);
+
+ if (isSubmitting) return
Submitting...
;
+ else if (isSubmitted) return
Form submitted successfully!
;
+
+ return (
+
+
Items to Return:
+
{loanDetails.student_name}
+
+ {loanDetails?.loan_items?.length > 0 ? (
+
+ {loanDetails.loan_items.map((item, index) => (
+ {item.item_name} (Qty: {item.quantity})
+ ))}
+
+ ) : (
+
No items selected.
+ )}
+
+
Loan Period: {new Date(loanDetails.start_usage_date).toLocaleDateString()} to {new Date(loanDetails.end_usage_date).toLocaleDateString()}
+
+
+
+
+ );
+}
+
+export default NewReturnForm;
\ No newline at end of file
diff --git a/src/components/VerifyPIN.js b/src/components/VerifyPIN.js
new file mode 100644
index 0000000..fee257c
--- /dev/null
+++ b/src/components/VerifyPIN.js
@@ -0,0 +1,85 @@
+import React, { useState, useEffect, useMemo, useRef } from 'react';
+import '../styles/NewBorrowForm.css';
+
+function VerifyPIN({setVerifiedByStaff, verifying, children}) {
+ const [password, setPassword] = useState('');
+ const [passwordLess, setPasswordLess] = useState(true);
+
+ const handlePasswordSubmit = (e) => {
+ e.preventDefault();
+ const correctPassword = '003342'; // Hub's favourite password
+ setVerifiedByStaff(password === correctPassword);
+ if (password !== correctPassword) alert('Incorrect password');
+ setPassword('');
+ };
+
+ useEffect(() => {
+ if (verifying) {
+ registerCredential();
+ }
+ }, [verifying]);
+
+ const registerCredential = async () => {
+ try {
+ setPasswordLess(true);
+ const publicKeyCredentialCreationOptions = {
+ challenge: new Uint8Array([0x8C, 0xFA, 0xB3, 0xA9, 0x42, 0xF5, 0x89, 0xDE]), // Example challenge
+ rp: { name: "Your App Name" },
+ user: {
+ id: new Uint8Array(16), // User ID in Uint8Array form, must be unique per user
+ name: "Staff and Makers",
+ displayName: "User Name"
+ },
+ pubKeyCredParams: [
+ { alg: -7, type: "public-key" }, // ES256
+ { alg: -257, type: "public-key" } // RS256
+ ],
+ authenticatorSelection: {
+ authenticatorAttachment: "platform",
+ userVerification: "required"
+ },
+ timeout: 60000,
+ attestation: "direct",
+ };
+
+ const credential = await navigator.credentials.create({
+ publicKey: publicKeyCredentialCreationOptions
+ });
+
+ if (credential) {
+ console.log('Credential registered:', credential);
+ setVerifiedByStaff(true);
+ // Store the credential ID securely for future use
+ const credentialId = btoa(String.fromCharCode(...new Uint8Array(credential.rawId)));
+ console.log('Credential ID:', credentialId);
+ // Store this credentialId in your localStorage or server
+ }
+ } catch (err) {
+ console.error('Credential registration failed:', err);
+ setPasswordLess(false);
+ }
+ };
+
+ return (
+ <>
+ { verifying &&
+ {!passwordLess &&
+
+ }
+
}
+
{children}
+ );
+}
+
+export default VerifyPIN;
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 73beb1e..3fd7e82 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,11 +2,14 @@ import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
+import { BrowserRouter as Router } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
-
+
);
diff --git a/src/pages/Booking.js b/src/pages/Booking.js
new file mode 100644
index 0000000..c07a104
--- /dev/null
+++ b/src/pages/Booking.js
@@ -0,0 +1,20 @@
+import React from 'react';
+
+function OutlookBooking() {
+ return (
+
+
+
+ );
+}
+
+export default OutlookBooking;
\ No newline at end of file
diff --git a/src/pages/Catalogue.js b/src/pages/Catalogue.js
new file mode 100644
index 0000000..89fa941
--- /dev/null
+++ b/src/pages/Catalogue.js
@@ -0,0 +1,89 @@
+import React, { useState, useEffect } from 'react';
+import '../styles/App.css';
+import InventoryList from '../components/InventoryList';
+import Modal from '../components/Modal';
+import { useCart } from '../components/CartContext';
+import { useWhichLocation } from '../components/LocationContext';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
+
+function Catalogue({verifiedByStaff, startVerification}) {
+ const { whichLocation, setWhichLocation } = useWhichLocation();
+ const [showTopBtn, setShowTopBtn] = useState(false);
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ const { cart, setCart } = useCart(); // Use useCart here
+ const navigate = useNavigate();
+
+ const attemptToChangeLocation = () => {
+ if (cart.length > 0) {
+ setIsModalOpen(true);
+ } else {
+ changeLocation();
+ }
+ }
+
+ const changeLocation = () => {
+ setCart([]);
+ console.log(whichLocation);
+ setWhichLocation(whichLocation=='e2a' ? 'hub' : 'e2a');
+
+ setIsModalOpen(false);
+ }
+
+ useEffect(() => {
+ const toggleVisibility = () => {
+ if (window.scrollY > 200) { // Adjust as needed
+ setShowTopBtn(true);
+ } else {
+ setShowTopBtn(false);
+ }
+ };
+
+ window.addEventListener("scroll", toggleVisibility);
+ return () => window.removeEventListener("scroll", toggleVisibility);
+ }, []);
+
+ const handleCheckout = () => {
+ if (cart.length > 0) {
+ navigate('/new-borrow-form', { state: { selectedItems: cart, e2a: whichLocation } });
+ } else {
+ alert("Please select the items you wish to borrow.");
+ }
+ };
+
+ const scrollToTop = () => {
+ window.scrollTo({
+ top: 0,
+ behavior: 'smooth', // For smooth scrolling
+ });
+ };
+
+ return (
+
+
+
๐งพ whichLocation=='e2a'&&attemptToChangeLocation()}>Hub's whichLocation=='hub'&&attemptToChangeLocation()}> / E2A's Tool Catalogue {window.location.host != 'edic.vercel.app' && ๐ง }
+
Feel free to browse through the items we have for loan in {whichLocation=='e2a'?'E2A Electronics Workshop':'the Innovation & Design Hub'}, and choose any items you require.
+
+
+
+
+
+ {showTopBtn &&
Back to Top }
+
+
setIsModalOpen(false)}>
+ Empty Your Cart?
+ {cart.length>0 &&
+ <>
+ Are you sure you want to switch to {whichLocation=='e2a'?'Hub':'E2A'}?
+
+ {cart.map((item, i) => {item.item_name} )}
+
+
+ }
+ Borrow these Items
+ Switch to {whichLocation=='e2a'?'Hub':'E2A'}
+
+
+ );
+}
+
+export default Catalogue;
diff --git a/src/pages/Dashboard.js b/src/pages/Dashboard.js
new file mode 100644
index 0000000..8fcd55a
--- /dev/null
+++ b/src/pages/Dashboard.js
@@ -0,0 +1,549 @@
+import React, { useState, useEffect } from 'react';
+import '../styles/Dashboard.css';
+import {
+ Chart as ChartJS,
+ CategoryScale,
+ LinearScale,
+ PointElement,
+ LineElement,
+ Title,
+ Tooltip,
+ Legend,
+ BarElement,
+ ArcElement,
+} from 'chart.js';
+import { Bar, Pie } from 'react-chartjs-2';
+import Modal from '../components/Modal';
+
+ChartJS.register(
+ CategoryScale,
+ LinearScale,
+ PointElement,
+ LineElement,
+ Title,
+ Tooltip,
+ Legend,
+ BarElement,
+ ArcElement
+);
+
+const LoanDashboard = ({verifiedByStaff, startVerification}) => {
+ const [showTopBtn, setShowTopBtn] = useState(false);
+ const [selectedChart, setSelectedChart] = useState('loansPerMonth');
+ const [modalItem, setModalItem] = useState(null);
+ const [summaryData, setSummaryData] = useState([
+ { id: 'loansPerMonth', label: 'Loans This Month', value: 0 },
+ { id: 'loanStatus', label: 'Outstanding Loans', value: 0 },
+ { id: 'popularItems', label: 'Most Popular Items', value: 0 },
+ ]);
+
+ // 1st table: Loan transactions
+ const [loanData, setLoanData] = useState([]);
+ const [loanFilter, setLoanFilter] = useState('');
+ const [showAllLoans, setShowAllLoans] = useState(false);
+ const [loanSort, setLoanSort] = useState({ key: 'transaction_id', direction: 'descending' });
+
+ // 2nd table: Inventory
+ const [inventoryData, setInventoryData] = useState([]);
+ const [inventoryDataE2A, setInventoryDataE2A] = useState([]);
+ const [showAllInventory, setShowAllInventory] = useState(false);
+ const [inventorySort, setInventorySort] = useState({ key: 'item_id', direction: 'descending' });
+
+ // Shared by both: Location Filter
+ const [locationFilter, setLocationFilter] = useState(localStorage.getItem('location') || '');
+
+ // Get this computer's location preference (hub or e2a or both)
+ useEffect(() => {
+ localStorage.setItem('location', locationFilter);
+ }, [locationFilter]);
+
+ // Render summary items
+ const renderSummaryItems = () => {
+ return summaryData.map((item) => (
+
setSelectedChart(item.id)}
+ >
+
{item.label}
+
{item.value}
+
+ ));
+ };
+
+ // Conditionally render chart based on selected item
+ const renderSelectedChart = () => {
+ switch (selectedChart) {
+ case 'loansPerMonth':
+ return
;
+ case 'loanStatus':
+ return
;
+ case 'popularItems':
+ return
;
+ default:
+ return null;
+ }
+ };
+
+ const checkOverdue = (transaction) => {
+ if (new Date(transaction.end_usage_date).setHours(0, 0, 0, 0) < new Date().setHours(0, 0, 0, 0) && transaction.status == 'Borrowed') {
+ return true;
+ }
+ return false;
+ }
+
+ const filterByLocation = (transactions) => {
+ return transactions.filter((transaction) => {
+ if (locationFilter.length > 0) {
+ return transaction.location === locationFilter;
+ }
+ return true;
+ });
+ };
+
+ const filteredLoanDataByLocation = filterByLocation(loanData);
+
+ const filteredLoanData = filteredLoanDataByLocation.filter((transaction) => {
+ if (loanFilter=='Overdue') {
+ return checkOverdue(transaction);
+ }
+ if (loanFilter.length > 0) {
+ return transaction.status === loanFilter;
+ }
+ return true;
+ });
+
+ const filteredInventoryData = locationFilter.length==0 ? inventoryData.concat(inventoryDataE2A) : locationFilter=='hub' ? inventoryData : inventoryDataE2A;
+
+ const handleLoanSort = (key) => {
+ let direction = 'ascending';
+ if (loanSort.key === key && loanSort.direction === 'ascending') {
+ direction = 'descending';
+ }
+ setLoanSort({ key, direction });
+
+ const sortedData = [...loanData].sort((a, b) => {
+ let item1, item2;
+ if (!isNaN(a[key]) && !isNaN(b[key])) {
+ item1 = parseInt(a[key]);
+ item2 = parseInt(b[key]);
+ } else {
+ item1 = a[key];
+ item2 = b[key];
+ }
+ if (item1 < item2) return direction === 'ascending' ? -1 : 1;
+ if (item1 > item2) return direction === 'ascending' ? 1 : -1;
+ return 0;
+ });
+ setLoanData(sortedData);
+ };
+
+ const handleInventorySort = (key) => {
+ let direction = 'ascending';
+ if (inventorySort.key === key && inventorySort.direction === 'ascending') {
+ direction = 'descending';
+ }
+ setInventorySort({ key, direction });
+
+ const sortedData = [...inventoryData].sort((a, b) => {
+ let item1, item2;
+ if (!isNaN(a[key]) && !isNaN(b[key])) {
+ item1 = parseInt(a[key]);
+ item2 = parseInt(b[key]);
+ } else {
+ item1 = a[key];
+ item2 = b[key];
+ }
+ if (item1 < item2) return direction === 'ascending' ? -1 : 1;
+ if (item1 > item2) return direction === 'ascending' ? 1 : -1;
+ return 0;
+ });
+ setInventoryData(sortedData);
+ };
+
+ const getStatusColour = (status) => {
+ switch (status) {
+ case 'Reserved':
+ return 'lightblue';
+ case 'Borrowed':
+ return 'lightyellow';
+ case 'Completed':
+ return 'lightgreen';
+ case 'Overdue':
+ return 'lightred';
+ default:
+ return 'lightgray';
+ }
+ };
+
+ useEffect(() => {
+ // Fetch loan transactions from the API
+ fetch('https://express-server-1.fly.dev/api/loan-transactions')
+ .then((response) => response.json())
+ .then((data) =>
+ setLoanData(data.sort((a, b) => parseInt(b['transaction_id']) - parseInt(a['transaction_id'])))
+ )
+ .catch((error) => console.error('Error fetching loan transactions:', error));
+
+ fetch('https://express-server-1.fly.dev/api/inventory')
+ .then((response) => response.json())
+ .then((data) =>
+ setInventoryData(data.sort((a, b) => parseInt(b['item_id']) - parseInt(a['item_id'])))
+ )
+ .catch((error) => console.error('Error fetching inventory:', error));
+
+ fetch('https://express-server-1.fly.dev/api/inventoryE2A')
+ .then((response) => response.json())
+ .then((data) =>
+ setInventoryDataE2A(data.sort((a, b) => parseInt(b['item_id']) - parseInt(a['item_id'])))
+ )
+ .catch((error) => console.error('Error fetching E2A inventory:', error));
+ }, []);
+
+ useEffect(() => {
+ const toggleVisibility = () => {
+ if (window.scrollY > 200) {
+ setShowTopBtn(true);
+ } else {
+ setShowTopBtn(false);
+ }
+ };
+
+ window.addEventListener('scroll', toggleVisibility);
+ return () => window.removeEventListener('scroll', toggleVisibility);
+ }, []);
+
+ useEffect(() => {
+ if (loanData.length === 0) return;
+ const date = new Date();
+ const mostPopularItem = calculateMostPopularItems()[0];
+ setSummaryData([
+ { id: 'loansPerMonth', label: 'Loans This Month', value: calculateLoansPerMonth()[date.getMonth()] },
+ { id: 'loanStatus', label: 'Outstanding Loans', value: (loanData.length - calculateLoanStatus().Completed - calculateLoanStatus().Rejected).toString() + ' (' + ((loanData.length - calculateLoanStatus().Completed - calculateLoanStatus().Rejected) / loanData.length * 100).toFixed()+'%)' }, // Example value
+ { id: 'popularItems', label: 'Most Popular Items', value: mostPopularItem[0] + ' (' + mostPopularItem[1] + ')'}, // Example value
+ ]);
+ }, [loanData]);
+
+ const scrollToTop = () => {
+ window.scrollTo({
+ top: 0,
+ behavior: 'smooth',
+ });
+ };
+
+ // Function to calculate loans per month
+ const calculateLoansPerMonth = () => {
+ const months = Array(12).fill(0); // Array to hold loan counts for each month
+ loanData.forEach((transaction) => {
+ const startDate = new Date(transaction.start_usage_date);
+ const month = startDate.getMonth(); // Get month index (0-11)
+ months[month] += 1; // Increment loan count for the respective month
+ });
+ console.log(loanData);
+ return months;
+ };
+
+ // Function to calculate loan status breakdown
+ const calculateLoanStatus = () => {
+ const statusCount = {
+ Reserved: 0,
+ Borrowed: 0,
+ Completed: 0,
+ Overdue: 0,
+ Rejected: 0
+ };
+ loanData.forEach((transaction) => {
+ statusCount[transaction.status] += 1;
+ if (checkOverdue(transaction)) {
+ statusCount.Overdue += 1;
+ }
+ });
+ return statusCount;
+ };
+
+ // Function to calculate most popular loan items
+ const calculateMostPopularItems = () => {
+ const itemCount = {};
+ loanData.forEach((transaction) => {
+ transaction.loan_items.forEach((item) => {
+ if (itemCount[item.item_name]) {
+ itemCount[item.item_name] += item.quantity;
+ } else {
+ itemCount[item.item_name] = item.quantity;
+ }
+ });
+ });
+
+ // Convert to array and sort by quantity
+ const sortedItems = Object.entries(itemCount).sort((a, b) => b[1] - a[1]);
+ return sortedItems.slice(0, 5); // Top 5 popular items
+ };
+
+ // Define a helper function to render sort icons
+ const getLoanSortIcon = (key) => {
+ if (loanSort.key === key) {
+ return loanSort.direction === 'ascending' ? 'โฒ' : 'โผ';
+ }
+ return '';
+ };
+
+ const getInventorySortIcon = (key) => {
+ if (inventorySort.key === key) {
+ return inventorySort.direction === 'ascending' ? 'โฒ' : 'โผ';
+ }
+ return '';
+ };
+
+ // Prepare data for charts
+ const loansPerMonthData = {
+ labels: [
+ 'January',
+ 'February',
+ 'March',
+ 'April',
+ 'May',
+ 'June',
+ 'July',
+ 'August',
+ 'September',
+ 'October',
+ 'November',
+ 'December',
+ ],
+ datasets: [
+ {
+ label: 'Loans per Month',
+ data: calculateLoansPerMonth(),
+ backgroundColor: 'rgba(75, 192, 192, 0.6)',
+ },
+ ],
+ };
+
+ const loanStatusData = {
+ labels: ['Reserved', 'Borrowed', 'Completed', 'Overdue', 'Rejected'],
+ datasets: [
+ {
+ data: Object.values(calculateLoanStatus()),
+ backgroundColor: ['#36A2EB', '#FFCE56', '#4BC0C0', '#FF6384', '#888888'],
+ },
+ ],
+ };
+
+ const mostPopularItems = calculateMostPopularItems();
+ const mostPopularItemsData = {
+ labels: mostPopularItems.map((item) => item[0]),
+ datasets: [
+ {
+ label: 'Most Popular Items',
+ data: mostPopularItems.map((item) => item[1]),
+ backgroundColor: 'rgba(153, 102, 255, 0.6)',
+ },
+ ],
+ };
+
+ return (
+
+ {/** Modal for selected item **/}
+
setModalItem(null)}>
+ {modalItem && modalItem.item_name && (<>
+ {modalItem.item_name}
+ {modalItem.brand && Brand: {modalItem.brand}
}
+ Model: {modalItem.model || 'N/A'}
+ Size/Specs: {modalItem.size_specs || 'N/A'}
+ Requires Approval: {modalItem.requires_approval === 'true' ? 'Yes' : 'No'}
+ {(() => {
+ const imageName = modalItem.item_name ? modalItem.item_name.replace(/\//g, '_').replace(/\s+/g, '_') : 'default';
+ const brandName = modalItem.brand ? modalItem.brand.replace(/\s+/g, '_') : 'default_brand';
+ const imageUrl = modalItem.brand ? `/assets/${imageName}-${brandName}.jpg`.toLowerCase() : `/assets/${imageName}.jpg`.toLowerCase();
+
+ return {modalItem.student_name}
+ Status: {modalItem.status}
+ Updated by: {modalItem.updated_by}
+ Start Date: {new Date(modalItem.start_usage_date).toLocaleDateString()}
+ End Date: {new Date(modalItem.end_usage_date).toLocaleDateString()}
+ Email: {modalItem.student_email || 'N/A'}
+ Phone: {modalItem.student_phone || 'N/A'}
+ Items
+ {modalItem.loan_items.map((item, index) => (
+
+
{item.quantity} --- {item.item_name}
+
No items. Error?
}
+ Serial Numbers
+ {modalItem.remarks || 'N/A'}
+ )
+ }
+
+ {/** Dashboard content **/}
+
+
+
Hub Staff & Makers Dashboard
+
Loan transactions, inventory and insights.
+
+
+
+
{renderSummaryItems()}
+
{renderSelectedChart()}
+
+
+
+
+
+
+
{loanData.length} Loan Transactions
+
+ Select Location:
+ setLocationFilter(e.target.value)}
+ >
+ Hub & E2A
+ Hub
+ E2A
+
+
+
+ setLoanFilter('')}
+ >
+ Show All
+
+ setLoanFilter('Reserved')}
+ >
+ {filteredLoanDataByLocation.filter((transaction) => {return transaction.status==="Reserved"}).length} Reserved
+
+ setLoanFilter('Borrowed')}
+ >
+ {filteredLoanDataByLocation.filter((transaction) => {return transaction.status==="Borrowed"}).length} Borrowed
+
+ setLoanFilter('Completed')}
+ >
+ {filteredLoanDataByLocation.filter((transaction) => {return transaction.status==="Completed"}).length} Completed
+
+ setLoanFilter('Overdue')}
+ >
+ {filteredLoanDataByLocation.filter((transaction) => {return checkOverdue(transaction)}).length} Overdue
+
+
+
+
+
+ handleLoanSort('transaction_id')}>
+ ID {getLoanSortIcon('transaction_id')}
+
+ handleLoanSort('student_name')}>
+ Student Name {getLoanSortIcon('student_name')}
+
+ handleLoanSort('status')}>
+ Status {getLoanSortIcon('status')}
+
+ Loan Items
+ Serial Number
+
+
+
+ {filteredLoanData.slice(0,showAllLoans ? undefined: 9).map((transaction) => (
+ setModalItem(transaction)}>
+ {transaction.transaction_id}
+ {transaction.student_name}
+ {transaction.status}
+
+
+ {transaction.loan_items.map((item, index) => (
+
+ {item.item_name} (Qty: {item.quantity})
+
+ ))}
+
+
+ {transaction.remarks}
+
+ ))}
+
+
+
+ {/** Option to show all transactions **/}
+ {filteredLoanData.length>10 &&
+
setShowAllLoans(!showAllLoans)}>
+ {showAllLoans? "Only the 10 most recent": "Show "+(filteredLoanData.length-10)+" more ..."}
+ }
+
+
+
+
+
+
+
Inventory Data for {locationFilter==''? 'Hub & E2A': locationFilter=='hub' ? 'Hub': 'E2A'}
+
+
+
+ handleInventorySort('item_id')}>
+ ID {getInventorySortIcon('item_id')}
+
+ handleInventorySort('item_name')}>
+ Item Name {getInventorySortIcon('item_name')}
+
+ handleInventorySort('total_qty')}>
+ Total Qty {getInventorySortIcon('total_qty')}
+
+ handleInventorySort('qty_available')}>
+ Qty Available {getInventorySortIcon('qty_available')}
+
+ handleInventorySort('qty_reserved')}>
+ Qty Utilized {getInventorySortIcon('qty_reserved')}
+
+
+
+
+ {filteredInventoryData.slice(0,showAllInventory ? -1: 9).map((item) => (
+ setModalItem(item)}>
+ {item.item_id}
+ {item.item_name}
+ {item.total_qty}
+ {item.qty_available}
+ {item.qty_reserved}
+
+ ))}
+
+
+
+ {/** Option to show all inventory **/}
+ {filteredInventoryData.length>10 &&
+
setShowAllInventory(!showAllInventory)}>
+ {showAllInventory? "Only the 10 most recent": "Show "+(inventoryData.length-10)+" more ..."}
+ }
+
+
+ {showTopBtn && (
+
+ Back to Top
+
+ )}
+
+
+
);
+};
+
+export default LoanDashboard;
diff --git a/src/pages/Home.js b/src/pages/Home.js
index 77f20d9..de6492f 100644
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -1,54 +1,132 @@
import React, { useState, useEffect } from 'react';
import '../styles/App.css';
-import InventoryList from '../components/InventoryList';
+import Modal from '../components/Modal';
+import { useNavigate } from 'react-router-dom';
+import { useWhichLocation } from '../components/LocationContext';
-function Home({ cart, setCart }) {
- const [selectedCategories, setSelectedCategories] = useState([]);
- const [showTopBtn, setShowTopBtn] = useState(false);
+function Home() {
+ const { whichLocation, setWhichLocation } = useWhichLocation();
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ const [loanID, setLoanID] = useState('');
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState('');
+ const [actionType, setActionType] = useState(null);
+ let navigate = useNavigate();
- const handleCategoryChange = (category) => {
- if (Array.isArray(category) && category.length === 0) {
- setSelectedCategories([]);
- } else if (selectedCategories.includes(category)) {
- setSelectedCategories(selectedCategories.filter(cat => cat !== category));
- } else {
- setSelectedCategories([...selectedCategories, category]);
- }
+ const toggleCollections = () => {
+ setActionType('collect');
+ setIsModalOpen(true);
+ setError('');
+ setLoanID('');
};
- useEffect(() => {
- const toggleVisibility = () => {
- if (window.scrollY > 200) { // Adjust as needed
- setShowTopBtn(true);
- } else {
- setShowTopBtn(false);
+ const toggleReturns = () => {
+ setActionType('return');
+ setIsModalOpen(true);
+ setError('');
+ setLoanID('');
+ };
+
+ const handleCollectionsOrReturns = async (action, loanID) => {
+ try {
+ // Set loading state to true
+ setLoading(true);
+
+ // Call the API to check loan details
+ const response = await fetch(`https://express-server-1.fly.dev/api/loan-details/${loanID}`);
+ setLoading(false);
+
+ if (response.status === 404) {
+ // Loan not found, handle the error (e.g., display a message)
+ setError('Loan not found');
+ // You might want to display an error message to the user here
+ return; // Stop further execution
}
- };
- window.addEventListener("scroll", toggleVisibility);
- return () => window.removeEventListener("scroll", toggleVisibility);
- }, []);
+ // Parse the response as JSON
+ const loanDetails = await response.json();
+
+ // Now you have the loan details in the `loanDetails` variable
+ console.log('Loan Details:', loanDetails);
+
+ // If the loan items are already collected
+ if (action == 'collect' && loanDetails.status != 'Reserved') {
+ setError('Loan items are already collected.');
+ return; // Stop further execution
+ }
- const scrollToTop = () => {
- window.scrollTo({
- top: 0,
- behavior: 'smooth', // For smooth scrolling
- });
+ // If the loan items are already returned, or not collected yet
+ if (action == 'return' && loanDetails.status != 'Borrowed') {
+ setError('Loan items are already returned / not collected yet.');
+ return; // Stop further execution
+ }
+
+ // If the API call is successful (status code is not 404)
+ navigate(action=='collect' ? '/new-collect-form': '/new-return-form', { state: { loanDetails: loanDetails } });
+ setIsModalOpen(false);
+
+ } catch (error) {
+ // Handle any errors that occur during the API call
+ console.error('Error checking loan details:', error);
+ // You might want to display a generic error message to the user here
+ }
};
+ const changeLocation = () => {
+ setWhichLocation(whichLocation === 'e2a' ? 'hub' : 'e2a');
+ }
+
+ const isE2a = () => {
+ return whichLocation === 'e2a';
+ }
+
return (
-
+
+
setIsModalOpen(false)}>
+ {actionType === 'collect' ? '๐ฆ Collections' : 'โฉ๏ธ Returns'}
+
+
+
+
-
Welcome to the Hubโs Tool Catalogue
-
Feel free to browse through the items we have for loan in the Innovation & Design Hub, and choose any items you require.
+
isE2a()&&changeLocation()}>๐ The Hub !isE2a()&&changeLocation()}> / ๐ Electronics Workshop
+
{isE2a()?'E2A Laboratory':'Innovation & Design Hub, or The Hub in short,'} is a space to create, tinker and pursue exciting ideas to spur innovation.
+
+
+ {!isE2a() && window.open("https://outlook.office365.com/book/InnovationDesignHubMediaRoom@nusu.onmicrosoft.com")}>๐
Book a Consultation }
+ {!isE2a() && window.open("https://forms.office.com/r/T7x6UZRvqY")}>๐ทโโ๏ธ Job Request }
-
- {showTopBtn &&
Back to Top }
+
+
+ Loan System
+ navigate('/catalogue')}>๐ Look at the Catalogue
+ {window.location.host != 'edic.vercel.app' /*only on edic-vercel.app*/ &&
+ <>
+ ๐ฆ Collect
+ โฉ๏ธ Return
+
+ }
+
+
+
);
}
diff --git a/src/styles/App.css b/src/styles/App.css
index e754bc0..a63703c 100644
--- a/src/styles/App.css
+++ b/src/styles/App.css
@@ -10,7 +10,8 @@ html {
body {
margin: 0;
padding: 0;
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+ /*font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;*/
+ font-family: Rubik, sans-serif;
background-color: #f4f4f4;
}
@@ -19,41 +20,94 @@ body {
/* Make space for the sidebar */
max-width: calc(100% - 150px);
/* Adjust the width */
- padding: 40px;
align-items: center;
}
.content-area {
display: inline-flex;
- padding: 50px 50px;
flex-direction: column;
align-items: center;
- gap: 75px;
+ padding: 50px 32px;
}
.content-area,
.main-content {
- max-width: 1200px;
+ width: 100%;
+ max-width: 1260px;
/* Adjust based on your design preference */
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: column;
+ box-sizing: border-box;
align-items: center;
}
-.content-area,
-.main-content {
- max-width: 1200px;
- /* Adjust based on your design preference */
- margin-left: auto;
- margin-right: auto;
- display: flex;
- flex-direction: column;
+.cover-image {
+ width: 100vw;
+ margin-top: -100px;
+ margin-bottom: -10px;
+ max-height: 40vh;
+ aspect-ratio: 2.5;
+ object-fit: cover;
+ z-index: -1;
+ opacity: 50%;
+ mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1.0) 50%, transparent 100%);
+}
+
+.other-location {
+ color: #aaa;
+ cursor: pointer;
+ transition: all 0.3s ease-in-out;
+}
+
+.home-button {
+ grid-column-gap: .5rem;
+ border: 1px solid #7f56d9;
+ background-color: #7f56d9;
+ color: white;
+ text-align: center;
+ white-space: nowrap;
+ border-radius: .5rem;
+ justify-content: center;
align-items: center;
+ padding: .625rem 1.125rem;
+ font-size: 1rem;
+ font-weight: 500;
+ line-height: 1.5;
+ text-decoration: none;
+ transition: all .3s;
+ display: flex;
+ font-family: Rubik, sans-serif;
+ box-shadow: 0 1px 2px #1018280d;
}
+.home-button:active {
+ border-color: #6941c6;
+ background-color: #6941c6;
+ cursor: pointer;
+ color: #43464d;
+}
+
+.home-button-row, .home-button-fieldset {
+ grid-column-gap: .75rem;
+ grid-row-gap: .75rem;
+ flex-wrap: wrap;
+ align-items: center;
+ display: flex;
+}
+
+.home-button-fieldset {
+ border: 2px solid #9a7ed8;
+ color: #888;
+ white-space: pre;
+ border-radius: .5rem;
+ padding: 1rem;
+ margin: 1rem 0;
+ font-size: large;
+ font-family: Rubik, sans-serif;
+}
@media (max-width: 768px) {
@@ -64,28 +118,21 @@ body {
}
}
-
-.categories-sidebar {
- position: sticky;
- top: 150px;
- /* Adjust if your navbar height changes */
- height: calc(100vh - 150px);
- /* Adjust the height based on navbar */
-}
-
.inventory-list {
display: grid;
- grid-template-columns: 1fr;
- /* Changed to auto-fit and adjusted min-width */
+ grid-template-columns: repeat(auto-fit, minmax(232px, auto)); /* Adjust 232px to match the inventory-item width */
gap: 20px;
- padding: 20px;
- /* Adjust padding as needed */
+ padding: 20px 0;
justify-content: center;
+ width: 100%;
+ box-sizing: border-box;
+ overflow-x: hidden; /* Prevent horizontal scrolling */
}
.inventory-item {
display: flex;
- width: 232px;
+ width: 100%; /* Ensure the items take up the full width within the grid cell */
+ max-width: 232px; /* Maintain the max-width */
flex-direction: column;
align-items: center;
flex-shrink: 0;
@@ -115,11 +162,8 @@ body {
/* Add responsive behavior */
@media (min-width: 768px) {
-
- /* Adjust breakpoint as needed */
.inventory-list {
- grid-template-columns: repeat(4, 1fr);
- /* Four items per row */
+ grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); /* Responsive grid columns */
}
}
@@ -189,9 +233,9 @@ input[type="text"] {
align-items: flex-start;
margin-right: auto;
/* Center the .welcome-message horizontally */
- margin-left: 9%;
+ margin-left: 0%;
/* Center the .welcome-message horizontally */
- margin-top: -3%;
+ margin-top: 0%;
}
h1 {
@@ -203,6 +247,13 @@ h1 {
font-style: normal;
font-weight: 600;
line-height: normal;
+ opacity: 1;
+}
+
+h1 span {
+ /* for switching e2a and hub */
+ transition: all 0.3s ease-in-out;
+ z-index: -1;
}
p {
@@ -234,4 +285,4 @@ p {
.scrollToTop-btn:hover {
background-color: #0056b3;
-}
+}
\ No newline at end of file
diff --git a/src/styles/Dashboard.css b/src/styles/Dashboard.css
new file mode 100644
index 0000000..c650584
--- /dev/null
+++ b/src/styles/Dashboard.css
@@ -0,0 +1,242 @@
+/* Dashboard.css */
+
+/* General styles */
+
+.insights-container {
+ display: grid;
+ grid-template-columns: repeat(1, 1fr); /* Two columns */
+ gap: 20px; /* Spacing between charts */
+ margin-bottom: 20px;
+}
+
+
+.filter-container {
+ margin-bottom: 20px;
+ display: flex;
+ gap: 10px;
+}
+
+.filter-btn {
+ background-color: #a4cffc;
+ color: black;
+ border: none;
+ padding: 10px 20px;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: background-color 0.3s;
+}
+
+.filter-btn:hover {
+ background-color: #0056b3;
+}
+
+.filter-btn.active {
+ background-color: #0056b3;
+ color: white;
+}
+
+.welcome-message {
+ margin-bottom: 30px;
+}
+
+.welcome-message h1 {
+ color: #333;
+ font-size: 2em;
+}
+
+.welcome-message p {
+ color: #666;
+}
+
+
+.chart-container h2 {
+ font-size: 1.5em;
+ margin-bottom: 10px;
+ color: #333;
+}
+
+/* Scroll to top button */
+.scrollToTop-btn {
+ position: fixed;
+ bottom: 30px;
+ right: 30px;
+ background-color: #007bff;
+ color: white;
+ border: none;
+ padding: 10px 15px;
+ border-radius: 50%;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+ cursor: pointer;
+ transition: background-color 0.3s;
+}
+
+.scrollToTop-btn:hover {
+ background-color: #0056b3;
+}
+
+/* Updated CSS */
+
+/* General styles */
+body {
+ font-family: Arial, sans-serif;
+ background-color: #f4f4f4;
+ margin: 0;
+ padding: 0;
+}
+
+.dashboard-container {
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+ margin-bottom: 20px;
+}
+
+.summary-container {
+ width: 30%;
+ background-color: transparent;
+}
+
+.chart-container {
+ width: 60%;
+ max-height: 500px;
+
+ display: border-box;
+ justify-content: center;
+ align-items: center;
+}
+
+.table-container {
+ width: 100%;
+ overflow-x: auto;
+ margin-top: 20px;
+}
+
+table {
+ width: 100%;
+ border-collapse: collapse;
+}
+
+table th, table td {
+ padding: 12px;
+ border-bottom: 1px solid #ddd;
+ text-align: left;
+ font-size: 0.9em;
+}
+
+table th {
+ background-color: #f2f2f2;
+ color: #333;
+ text-transform: uppercase;
+ font-weight: bold;
+}
+
+table tr:hover {
+ background-color: #f1f1f1;
+}
+
+.summary-item {
+ width: 100%; /* Ensure summary items take full width */
+ background-color: white;
+ padding: 20px;
+ border-radius: 8px;
+ margin-bottom: 16px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ cursor: pointer;
+ transition: background-color 0.3s;
+}
+
+.summary-item.active {
+ background-color: #007bff;
+ color: white;
+}
+
+.summary-item:hover {
+ background-color: #0056b3;
+ color: white;
+}
+
+/* Media queries for responsiveness */
+@media (max-width: 768px) {
+ .chart-container {
+ width: 100%;
+ margin-bottom: 20px;
+ }
+
+ .table-container {
+ margin-bottom: 20px;
+ }
+}
+
+/* Password form styling */
+.password-form-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 60vh; /* Full viewport height for vertical centering */
+ background-color: #f4f4f4;
+ }
+
+ .password-form {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background-color: #ffffff;
+ padding: 20px;
+ border-radius: 8px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ }
+
+ .password-form input[type="password"] {
+ width: 250px;
+ padding: 10px;
+ margin-bottom: 15px;
+ font-size: 20px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ outline: none;
+ transition: border-color 0.3s;
+ }
+
+ .password-form input[type="password"]:focus {
+ border-color: #007bff;
+ }
+
+ .password-form button {
+ background-color: #007bff;
+ color: white;
+ border: none;
+ padding: 10px 20px;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: background-color 0.3s;
+ font-size: 20px;
+ width: 100%;
+ }
+
+ .password-form button:hover {
+ background-color: #0056b3;
+ }
+
+ .table {
+ width: 100%;
+ }
+
+
+ .filter-label {
+ font-size: 16px;
+ margin-bottom: 5px;
+ color: #333;
+ }
+
+ .filter-select {
+ padding: 8px;
+ font-size: 16px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ outline: none;
+ transition: border-color 0.3s ease;
+ }
+
+ .filter-select:focus {
+ border-color: #007bff;
+ }
\ No newline at end of file
diff --git a/src/styles/Navbar.css b/src/styles/Navbar.css
index baa849f..95f304e 100644
--- a/src/styles/Navbar.css
+++ b/src/styles/Navbar.css
@@ -15,7 +15,6 @@
/* Other styles remain unchanged */
.navbar .leftSide {
- flex: 50%;
height: 100%;
display: flex;
align-items: center;
@@ -27,7 +26,7 @@
}
.navbar .rightSide {
- flex: 50%;
+ flex: 80%;
height: 100%;
display: flex;
align-items: center;
@@ -65,6 +64,8 @@
text-decoration: none;
font-weight: bold;
transition: color 0.3s ease;
+ margin-left: 8px;
+ margin-right: 12px;
}
.cart-icon:hover {
@@ -169,6 +170,10 @@
border-radius: 50px;
}
+.loan-id-input {
+ max-width: 90%;
+}
+
.checkout-button {
display: flex;
align-items: center;
@@ -234,3 +239,26 @@
background-color: white;
color: black;
}
+
+.error-message {
+ color: red;
+ font-size: 1.3em;
+ padding-top: 32px;
+ text-align: center;
+ width: 100%;
+}
+
+.loader {
+ border: 8px solid #f3f3f3; /* Light grey */
+ border-top: 8px solid #3498db; /* Blue */
+ border-radius: 50%;
+ width: 30px;
+ height: 30px;
+ margin: 20px auto;
+ animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+}
\ No newline at end of file
diff --git a/src/styles/NewBorrowForm.css b/src/styles/NewBorrowForm.css
index bdaf796..e3f339d 100644
--- a/src/styles/NewBorrowForm.css
+++ b/src/styles/NewBorrowForm.css
@@ -1,3 +1,7 @@
+.selected-items-list {
+ line-height: 1.5;
+}
+
.form-container {
max-width: 600px;
margin: 20px auto;
@@ -99,7 +103,12 @@
transition: background-color 0.3s;
}
-.submit-button:hover {
+.submit-button:disabled {
+ background-color: #ccc;
+ cursor: not-allowed;
+}
+
+.submit-button:hover:enabled {
background-color: #0056b3;
}
diff --git a/src/styles/SearchBar.css b/src/styles/SearchBar.css
index 6291bf3..dda7465 100644
--- a/src/styles/SearchBar.css
+++ b/src/styles/SearchBar.css
@@ -1,13 +1,12 @@
.search-bar {
display: flex;
- width: 862px;
+ width: 90%;
height: 20px;
padding: 12px 24px;
align-items: center;
gap: 10px;
border-radius: 48px;
background: rgba(0, 0, 0, 0.10);
- margin-top: -105px;
margin-bottom: 70px;
}
?"/EDIC2.jpg":)
+