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

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

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

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

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

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

@ -1,5 +1,5 @@
import { useState } from "react"; import { useState } from "react";
import styles, { colors } from "../../styles"; import styles from "../../styles";
import MenuIcon from "@mui/icons-material/Menu"; import MenuIcon from "@mui/icons-material/Menu";
import SidebarModal from "../Drawer/Drawer"; import SidebarModal from "../Drawer/Drawer";
import { Drawer } from "@mui/material"; 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 styles from "../../styles";
import RestrictedComponent from "../../Components/RestrictedComponent/RestrictedComponent"; import RestrictedComponent from "../../Components/RestrictedComponent/RestrictedComponent";
import TechnicianWidgets from "../../Components/DashboardPage/Technician/TechnicianWidgets"; 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 StudentTransactionListView from "../../Components/DashboardPage/Student/StudentTransactionListView";
import StudentDashboard from "../../Components/DashboardPage/Student/StudentDashboard"; import StudentDashboard from "../../Components/DashboardPage/Student/StudentDashboard";
import TechnicianNavigation from "../../Components/DashboardPage/Technician/TechnicianNavigation"; import TechnicianNavigation from "../../Components/DashboardPage/Technician/TechnicianNavigation";
@ -16,8 +14,6 @@ export default function Dashboard() {
<RestrictedComponent allow_only={"Technician"}> <RestrictedComponent allow_only={"Technician"}>
<TechnicianWidgets /> <TechnicianWidgets />
<TechnicianNavigation /> <TechnicianNavigation />
<TechnicianEquipmentButtons />
<TechnicianLogButtons />
</RestrictedComponent> </RestrictedComponent>
<RestrictedComponent allow_only={"Student"}> <RestrictedComponent allow_only={"Student"}>
<div <div
@ -31,8 +27,9 @@ export default function Dashboard() {
}, },
}} }}
> >
<StudentTransactionListView />
<StudentDashboard /> <StudentDashboard />
<StudentTransactionListView />
</div> </div>
</RestrictedComponent> </RestrictedComponent>
<RestrictedComponent allow_only={"Teacher"}> <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", alignContent: "center",
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
marginTop: 64
}} }}
> >
<PDFDownloadLink <PDFDownloadLink

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

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

15
src/index.css
View file

@ -104,3 +104,18 @@ button:focus-visible {
.custom-scrollbar::-webkit-scrollbar-track { .custom-scrollbar::-webkit-scrollbar-track {
background-color: #f0f0f0; /* Color of the 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, color: colors.font_dark,
fontWeight: "500", fontWeight: "500",
}, },
text_dark_red: { text_dark_red: {
color: colors.font_dark_red, color: colors.font_dark_red,
fontWeight: "bold", fontWeight: "bold",