keannu125/Borrowing-TrackerFrontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Borrowing-TrackerFrontend.git synced 2024-11-17 06:19:27 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

bonggang bonggang configuration T_T. p78a45k122y12u1245p56r4a446i41n1

Browse source
This commit is contained in:
Pongot, Jophiel 2024-01-09 08:43:22 +08:00
parent fa89268e0a
commit 209219afb4
10 changed files with 439 additions and 213 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/App.tsx
View file

@ -22,6 +22,7 @@ import AddTransactionPage from "./Pages/AddTransactionPage/AddTransactionPage";
import TransactionPage from "./Pages/TransactionPage/TransactionPage";
import EquipmentInstanceTallyPage from "./Pages/EquipmentTallyPage/EquipmentTallyPage";
import TransactionReportPage from "./Pages/TransactionReportPage/TransactionReportPage";
import ManageEquipmentPage from "./Pages/ManageEquipmentPage/ManageEquipmentPage";
const queryClient = new QueryClient();
const router = createHashRouter([
@ -67,6 +68,17 @@ const router = createHashRouter([
),
errorElement: <ErrorPage />,
},
{
path: "/view/ManageEquipment",
element: (
<>
<Revalidator />
<RestrictedPage allow_only="Technician" />
<ManageEquipmentPage />
</>
),
errorElement: <ErrorPage />,
},
{
path: "/view/equipment_instances/filter/:filter_by",
element: (

47
src/Components/DashboardPage/Technician/TechnicianNavigation.tsx
View file

@ -16,34 +16,35 @@ export default function TechnicianNavigation() {
alignItems: "center",
gap: "24px",
alignSelf: "stretch",
paddingBottom: "5rem"
}}
>
<div style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
gap: "24px",
width: "100%",
maxWidth: "800px"
}}>
<p
<div
style={{
overflow: "hidden",
color: "#0E410D",
fontSize: "24px",
fontWeight: 700,
display: "-webkit-box",
display: "flex",
flexDirection: "column",
alignItems: "center",
gap: "24px",
width: "100%",
maxWidth: "807px",
flex: 1,
textAlign: "left",
marginLeft: "1rem"
maxWidth: "800px",
}}
>
Feature
</p>
<p
style={{
overflow: "hidden",
color: "#0E410D",
fontSize: "24px",
fontWeight: 700,
display: "-webkit-box",
width: "100%",
maxWidth: "807px",
flex: 1,
textAlign: "left",
marginLeft: "1rem",
}}
>
Feature
</p>
<button
style={{
display: "flex",
@ -80,7 +81,7 @@ export default function TechnicianNavigation() {
background: "#E8D3BB",
}}
onClick={() => {
navigate("/dashboard");
navigate("/view/ManageEquipment");
}}
>
<img src={equipment} alt="Manage Equipment" />

544
src/Components/DashboardPage/Technician/TechnicianWidgets.tsx
View file

@ -47,226 +47,404 @@ export default function TechnicianWidgets() {
>
<div
style={{
paddingLeft: "16px",
paddingRight: "16px",
margin: "16px",
borderRadius: 16,
backgroundColor: "#a6a6a6",
alignSelf: "center",
justifyContent: "center",
width: "16rem",
display: "flex",
flexDirection: "column",
alignItems: "center",
gap: "24px",
width: "100%",
maxWidth: "800px",
}}
>
<p
style={{
...styles.text_dark,
...styles.text_M,
...{ float: "left", position: "absolute" },
overflow: "hidden",
color: "#0E410D",
fontSize: "24px",
fontWeight: 700,
display: "-webkit-box",
width: "100%",
maxWidth: "807px",
flex: 1,
textAlign: "left",
marginLeft: "1rem",
marginBottom: -15,
}}
>
Pending Equipments
</p>
<p
style={{
...styles.text_dark,
...styles.text_L,
}}
>
{queries[1].data?.filter(
(equipment) => equipment.status == "Pending"
).length || "Loading..."}
Summary
</p>
</div>
{/* Blue Capsule */}
<div
className="capsule"
style={{
paddingLeft: "16px",
paddingRight: "16px",
margin: "16px",
borderRadius: 16,
backgroundColor: "#a6a6a6",
alignSelf: "center",
justifyContent: "center",
width: "16rem",
background: "#DDEDF3",
margin: 30,
paddingTop: 50,
}}
>
<p
<div
style={{
...styles.text_dark,
...styles.text_M,
...{ float: "left", position: "absolute" },
display: "flex",
justifyContent: "center",
alignItems: "center",
gap: "15px",
}}
>
Equipments in Inventory
</p>
{/* Transactions all */}
<div
style={{
display: "flex",
width: "202px",
height: "245px",
padding: "25px 10px",
flexDirection: "column",
justifyContent: "space-between",
alignItems: "center",
borderRadius: "15px",
background: "#FFF",
boxShadow: "0px 4px 4px 0px rgba(0, 0, 0, 0.25)",
}}
>
<p
style={{
...styles.text_dark,
...styles.text_normal,
fontWeight: "400",
}}
>
Total Transactions Today
</p>
<p
style={{
...styles.text_dark,
...styles.text_L,
margin: 0,
}}
>
{queries[3].data?.filter((transaction) =>
moment(transaction.timestamp, "MM-DD-YYYY hh:mm A").isBetween(
todayStartOfDay,
todayEndOfDay
)
).length || "0"}
</p>
<p
style={{
...styles.text_dark,
...styles.text_normal,
fontWeight: "400",
}}
>
Total Transactions this Month
</p>
<p
style={{
...styles.text_dark,
...styles.text_L,
margin: 0,
}}
>
{queries[3].data?.filter((transaction) =>
moment(transaction.timestamp, "MM-DD-YYYY hh:mm A").isBetween(
thisMonthStart,
thisMonthEnd
)
).length || "Loading..."}
</p>
</div>
<div
style={{
display: "flex",
width: "40%",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
gap: "15px",
alignSelf: "stretch",
}}
>
<div
style={{
display: "flex",
height: "88px",
width: "100%",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
alignSelf: "stretch",
borderRadius: "15px",
background: "#FFF",
boxShadow: "0px 4px 4px 0px rgba(0, 0, 0, 0.25)",
}}
>
<p
style={{
...styles.text_dark,
...styles.text_L,
margin: "0",
}}
>
{queries[3].data?.filter(
(transaction) =>
transaction.transaction_status == "Approved"
).length || 0}
</p>
<p
style={{
...styles.text_dark,
...styles.text_S,
margin: "0",
fontWeight: "400",
}}
>
Pending Request
</p>
</div>
<div
style={{
display: "flex",
height: "88px",
width: "100%",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
alignSelf: "stretch",
borderRadius: "15px",
background: "#FFF",
boxShadow: "0px 4px 4px 0px rgba(0, 0, 0, 0.25)",
}}
>
<p
style={{
...styles.text_dark,
...styles.text_L,
margin: "0",
}}
>
{queries[3].data?.filter(
(transaction) =>
transaction.transaction_status == "Borrowed"
).length || 0}
</p>
<p
style={{
...styles.text_dark,
...styles.text_S,
margin: "0",
fontWeight: "400",
}}
>
On Borrow
</p>
</div>
<div
style={{
display: "flex",
height: "88px",
width: "100%",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
alignSelf: "stretch",
borderRadius: "15px",
background: "#FFF",
boxShadow: "0px 4px 4px 0px rgba(0, 0, 0, 0.25)",
}}
>
<p
style={{
...styles.text_dark,
...styles.text_L,
margin: "0",
}}
>
{queries[3].data?.filter(
(transaction) =>
transaction.transaction_status == "Finalized"
).length || 0}
</p>
<p
style={{
...styles.text_dark,
...styles.text_S,
margin: "0",
fontWeight: "400",
}}
>
Success
</p>
</div>
</div>
</div>
<p
style={{
...styles.text_dark,
...styles.text_L,
margin: "0",
fontWeight: 700,
...styles.text_normal,
}}
>
{queries[1].data?.length || "Loading..."}
Borrowing Transaction
</p>
</div>
</div>
<div
style={{
...styles.flex_row,
...{
alignSelf: "center",
justifyContent: "center",
flexWrap: "wrap",
},
}}
>
{/* Yellow Capsule */}
<div
className="capsule"
style={{
paddingLeft: "16px",
paddingRight: "16px",
margin: "16px",
borderRadius: 16,
backgroundColor: "#a6a6a6",
alignSelf: "center",
justifyContent: "center",
width: "16rem",
background: "#FCF2E7",
paddingTop: 50,
margin: 30,
}}
>
<p
<div
style={{
...styles.text_dark,
...styles.text_M,
...{ float: "left", position: "absolute" },
display: "flex",
justifyContent: "center",
alignItems: "center",
gap: "15px",
}}
>
Available Equipments
</p>
{/* Pending Req */}
<div
style={{
display: "flex",
width: "202px",
height: "193px",
padding: "25px 10px",
flexDirection: "column",
justifyContent: "space-between",
alignItems: "center",
borderRadius: "15px",
background: "#FFF",
boxShadow: "0px 4px 4px 0px rgba(0, 0, 0, 0.25)",
}}
>
<p
style={{
...styles.text_dark,
...styles.text_L,
}}
>
{queries[1].data?.length || "Loading..."}
</p>
<p
style={{
...styles.text_dark,
...styles.text_L,
}}
>
{queries[1].data?.filter(
(equipment) => equipment.status == "Available"
).length || "Loading..."}
</p>
</div>
<div
style={{
paddingLeft: "16px",
paddingRight: "16px",
margin: "16px",
borderRadius: 16,
backgroundColor: "#a6a6a6",
alignSelf: "center",
justifyContent: "center",
width: "16rem",
}}
>
<p
style={{
...styles.text_dark,
...styles.text_M,
...{ float: "left", position: "absolute" },
}}
>
Broken Equipments
</p>
<p
style={{
...styles.text_dark,
...styles.text_M,
fontWeight: "400",
}}
>
Total Equipment
</p>
</div>
<div
style={{
display: "flex",
width: "40%",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
gap: "15px",
alignSelf: "stretch",
}}
>
<div
style={{
display: "flex",
height: "100%",
width: "100%",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
alignSelf: "stretch",
borderRadius: "15px",
background: "#FFF",
boxShadow: "0px 4px 4px 0px rgba(0, 0, 0, 0.25)",
}}
>
<p
style={{
...styles.text_dark,
...styles.text_S,
margin: "0",
fontWeight: "400",
}}
>
Available
</p>
<p
style={{
...styles.text_dark,
...styles.text_L,
margin: 0,
}}
>
{queries[1].data?.filter(
(equipment) => equipment.status == "Available"
).length || "Loading..."}
</p>
<p
style={{
...styles.text_dark,
...styles.text_L,
}}
>
{queries[1].data?.filter(
(equipment) => equipment.status == "Broken"
).length || "Loading..."}
</p>
</div>
</div>
<div
style={{
...styles.flex_row,
...{
alignSelf: "center",
justifyContent: "center",
flexWrap: "wrap",
},
}}
>
<div
style={{
paddingLeft: "16px",
paddingRight: "16px",
margin: "16px",
borderRadius: 16,
backgroundColor: "#a6a6a6",
alignSelf: "center",
justifyContent: "center",
width: "16rem",
}}
>
<p
style={{
...styles.text_dark,
...styles.text_M,
...{ float: "left", position: "absolute" },
}}
>
Total Transactions Today
</p>
<p
style={{
...styles.text_dark,
...styles.text_S,
margin: "0",
fontWeight: "400",
}}
>
Pending
</p>
<p
style={{
...styles.text_dark,
...styles.text_L,
margin: 0,
}}
>
{queries[1].data?.filter(
(equipment) => equipment.status == "Pending"
).length || 0}
</p>
<p
style={{
...styles.text_dark,
...styles.text_L,
}}
>
{queries[3].data?.filter((transaction) =>
moment(transaction.timestamp, "MM-DD-YYYY hh:mm A").isBetween(
todayStartOfDay,
todayEndOfDay
)
).length || "Loading..."}
</p>
</div>
<div
style={{
paddingLeft: "16px",
paddingRight: "16px",
margin: "16px",
borderRadius: 16,
backgroundColor: "#a6a6a6",
alignSelf: "center",
justifyContent: "center",
width: "16rem",
}}
>
<p
style={{
...styles.text_dark,
...styles.text_M,
...{ float: "left", position: "absolute" },
}}
>
Total Transactions this Month
</p>
<p
style={{
...styles.text_dark,
...styles.text_S,
margin: "0",
fontWeight: "400",
color: "#a44141",
}}
>
Broken
</p>
<p
style={{
...styles.text_dark,
...styles.text_L,
margin: "0",
color: "#a44141",
}}
>
{queries[1].data?.filter(
(equipment) => equipment.status == "Broken"
).length || 0}
</p>
</div>
</div>
</div>
<p
style={{
...styles.text_dark,
...styles.text_L,
margin: "0",
fontWeight: 700,
...styles.text_normal,
}}
>
{queries[3].data?.filter((transaction) =>
moment(transaction.timestamp, "MM-DD-YYYY hh:mm A").isBetween(
thisMonthStart,
thisMonthEnd
)
).length || "Loading..."}
Equipment Tracking
</p>
</div>
</div>

2
src/Components/Header/Header.tsx
View file

@ -1,5 +1,5 @@
import { useState } from "react";
import styles, { colors } from "../../styles";
import styles from "../../styles";
import MenuIcon from "@mui/icons-material/Menu";
import SidebarModal from "../Drawer/Drawer";
import { Drawer } from "@mui/material";

7
src/Pages/DashboardPage/DashboardPage.tsx
View file

@ -2,8 +2,6 @@ import Header from "../../Components/Header/Header";
import styles from "../../styles";
import RestrictedComponent from "../../Components/RestrictedComponent/RestrictedComponent";
import TechnicianWidgets from "../../Components/DashboardPage/Technician/TechnicianWidgets";
import TechnicianEquipmentButtons from "../../Components/DashboardPage/Technician/TechnicianEquipmentButtons";
import TechnicianLogButtons from "../../Components/DashboardPage/Technician/TechnicianLogButtons";
import StudentTransactionListView from "../../Components/DashboardPage/Student/StudentTransactionListView";
import StudentDashboard from "../../Components/DashboardPage/Student/StudentDashboard";
import TechnicianNavigation from "../../Components/DashboardPage/Technician/TechnicianNavigation";
@ -16,8 +14,6 @@ export default function Dashboard() {
<RestrictedComponent allow_only={"Technician"}>
<TechnicianWidgets />
<TechnicianNavigation />
<TechnicianEquipmentButtons />
<TechnicianLogButtons />
</RestrictedComponent>
<RestrictedComponent allow_only={"Student"}>
<div
@ -31,8 +27,9 @@ export default function Dashboard() {
},
}}
>
<StudentTransactionListView />
<StudentDashboard />
<StudentTransactionListView />
</div>
</RestrictedComponent>
<RestrictedComponent allow_only={"Teacher"}>

20
src/Pages/ManageEquipmentPage/ManageEquipmentPage.tsx Normal file
View file

@ -0,0 +1,20 @@
import Header from "../../Components/Header/Header";
import styles from "../../styles";
import RestrictedComponent from "../../Components/RestrictedComponent/RestrictedComponent";
import TechnicianEquipmentButtons from "../../Components/DashboardPage/Technician/TechnicianEquipmentButtons";
import TechnicianLogButtons from "../../Components/DashboardPage/Technician/TechnicianLogButtons";
export default function ManageEquipmentPage() {
return (
<div style={styles.background}>
<Header label={"Equipment Management"} />
<div style={{ position: "relative", zIndex: 999, marginTop: 80 , alignContent: "center", height: "100%"}}>
<RestrictedComponent allow_only={"Technician"}>
<TechnicianEquipmentButtons />
<TechnicianLogButtons />
</RestrictedComponent>
</div>
</div>
);
}

1
src/Pages/TransactionPage/TransactionPage.tsx
View file

@ -53,6 +53,7 @@ export default function TransactionPage() {
alignContent: "center",
justifyContent: "center",
alignItems: "center",
marginTop: 64
}}
>
<PDFDownloadLink

2
src/Pages/TransactionsListPage/TransactionsListPage.tsx
View file

@ -68,6 +68,8 @@ export default function TransactionsListPage() {
minHeight: "100%",
minWidth: "100%",
flexWrap: "wrap",
marginTop: 60,
paddingBottom: 20,
},
...styles.flex_column,
}}

15
src/index.css
View file

@ -104,3 +104,18 @@ button:focus-visible {
.custom-scrollbar::-webkit-scrollbar-track {
background-color: #f0f0f0; /* Color of the track */
}
.capsule {
display: flex;
width: 374px;
padding: 10px;
justify-content: center;
align-items: center;
align-content: center;
gap: 30px;
flex-wrap: wrap;
border-radius: 6px;
border: 1px dashed #000;
background: #DDEDFF;
}

2
src/styles.tsx
View file

@ -45,7 +45,7 @@ const styles: { [key: string]: React.CSSProperties } = {
color: colors.font_dark,
fontWeight: "500",
},
text_dark_red: {
color: colors.font_dark_red,
fontWeight: "bold",