keannu125/Borrowing-TrackerFrontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Borrowing-TrackerFrontend.git synced 2025-09-16 20:49:36 +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
Download patch file Download diff file Expand all files Collapse all files

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";