keannu125/Borrowing-TrackerFrontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Borrowing-TrackerFrontend.git synced 2024-11-16 22:09:29 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request 'feature/additional_styles' (#5) from feature/additional_styles into master

Browse source 
Reviewed-on: https://git.keannu1.duckdns.org/keannu125/Borrowing-TrackerFrontend/pulls/5
This commit is contained in:
keannu125 2024-01-11 08:26:50 +08:00
commit 06d019323c
35 changed files with 2343 additions and 1118 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: (

42
src/Components/DashboardPage/Student/StudentDashboard.tsx
View file

@ -1,27 +1,24 @@
import styles from "../../../styles";
import { Button } from "@mui/material";
import AddBoxIcon from "@mui/icons-material/AddBox";
import { colors } from "../../../styles";
import { useNavigate } from "react-router-dom";
export default function StudentDashboard() {
const navigate = useNavigate();
return (
<div style={styles.flex_column}>
<p
style={{
...styles.text_dark,
...styles.text_L,
}}
>
Student Actions
</p>
<div
style={{
...styles.flex_row,
...styles.flex_column,
...{
alignSelf: "center",
display: "flex",
justifyContent: "center",
flexWrap: "wrap",
marginTop: "40px",
width: "100%"
},
}}
>
@ -30,30 +27,25 @@ export default function StudentDashboard() {
...styles.flex_column,
...{
alignSelf: "center",
justifyContent: "center",
flexWrap: "wrap",
backgroundColor: "#CCDDFF",
borderRadius: "20px",
paddingInline: "100px",
width: "100%",
},
}}
onClick={() => {
navigate("/new/transaction");
}}
>
<AddBoxIcon
style={{
height: 64,
width: 64,
fill: colors.font_dark,
marginLeft: "1rem",
marginRight: "1rem",
}}
/>
<p
style={{
...styles.text_dark,
...styles.text_M,
...styles.text_dark_blue,
fontSize: "15px",
}}
>
New Transaction
CLICK TO REQUEST BORROW ITEMS
</p>
</Button>
</div>

45
src/Components/DashboardPage/Student/StudentTransactionListView.tsx
View file

@ -1,6 +1,6 @@
import { useQuery } from "@tanstack/react-query";
import { TransactionsByStudentAPI } from "../../API/API";
import styles from "../../../styles";
import styles, { colors } from "../../../styles";
import CircularProgress from "@mui/material/CircularProgress/CircularProgress";
import React, { useState } from "react";
import TransactionEntry from "../../TransactionEntry/TransactionEntry";
@ -39,14 +39,19 @@ export default function StudentTransactionListView() {
);
}
return (
<div>
<div style={styles.flex_column}>
<div style={{ width: "100%" }}>
<div style={{
marginTop: "60px",
width: "85%",
marginInline: "6.5%"
}}>
<TransactionFilterMenu filter={filter} setFilter={setFilter} />
<div style={{ marginTop: "16px" }} />
<div
style={{
...styles.flex_column,
...{ height: "50vh", overflowY: "scroll" },
...{ height: "60vh", overflowY: "scroll" },
}}
>
{transactions.data ? (
@ -65,12 +70,44 @@ export default function StudentTransactionListView() {
}}
transaction={transaction}
/>
<button
style={{
borderTop: "2px solid rgba(160, 160, 160, 0.20)",
padding: "7px",
margin: "0px",
backgroundColor: colors.header_color,
width: "100%",
maxWidth: 550,
alignSelf: "center",
borderRadius: "0px 0px 7px 7px",
}}
onClick={() => {
navigate(`/view/transaction/${transaction.id}`, {
replace: true,
state: { id: transaction.id },
});
}}
>
<p
style={{
...styles.text_gray,
...styles.text_S,
padding: "0px",
margin: "0px",
}}
>
TAP TO VIEW
</p>
</button>
</React.Fragment>
))
) : (
<></>
)}
</div>
</div>
</div>
);

37
src/Components/DashboardPage/Teacher/TeacherTransactionListView.tsx
View file

@ -1,14 +1,16 @@
import { useQuery } from "@tanstack/react-query";
import { TransactionsByTeacherAPI } from "../../API/API";
import styles from "../../../styles";
import styles, { colors } from "../../../styles";
import CircularProgress from "@mui/material/CircularProgress/CircularProgress";
import React, { useState } from "react";
import TransactionEntry from "../../TransactionEntry/TransactionEntry";
import TransactionFilterMenu from "../../TransactionFilterMenu/TransactionFilterMenu";
import Popup from "reactjs-popup";
import EditTransactionModal from "../../EditTransactionModal/EditTransactionModal";
import { useNavigate } from "react-router-dom";
export default function TeacherTransactionListView() {
const navigate = useNavigate();
const [EditTransactionOpen, SetEditTransactionOpen] = useState(false);
const [SelectedTransaction, SetSelectedTransaction] = useState(0);
const transactions = useQuery({
@ -48,7 +50,7 @@ export default function TeacherTransactionListView() {
<div
style={{
...styles.flex_column,
...{ height: "50vh", overflowY: "scroll" },
...{ height: "50vh", overflowY: "scroll", width: "100%", gap: "-15px", },
}}
>
{transactions.data ? (
@ -69,6 +71,36 @@ export default function TeacherTransactionListView() {
}}
transaction={transaction}
/>
<button
style={{
borderTop: "2px solid rgba(160, 160, 160, 0.20)",
padding: "7px",
margin: "0px",
backgroundColor: colors.header_color,
width: "100%",
maxWidth: 550,
alignSelf: "center",
borderRadius: "0px 0px 7px 7px",
}}
onClick={() => {
navigate(`/view/transaction/${transaction.id}`, {
replace: true,
state: { id: transaction.id },
});
}}
>
<p
style={{
...styles.text_gray,
...styles.text_S,
padding: "0px",
margin: "0px",
}}
>
TAP TO VIEW
</p>
</button>
</React.Fragment>
))
) : (
@ -76,6 +108,7 @@ export default function TeacherTransactionListView() {
)}
</div>
</div>
<Popup
open={EditTransactionOpen}
onClose={() => SetEditTransactionOpen(false)}

33
src/Components/DashboardPage/Technician/TechnicianEquipmentButtons.tsx
View file

@ -8,7 +8,6 @@ import NoteIcon from "@mui/icons-material/Note";
import { colors } from "../../../styles";
import ScienceIcon from "@mui/icons-material/Science";
import ColorizeIcon from "@mui/icons-material/Colorize";
import ArticleIcon from '@mui/icons-material/Article';
import Popup from "reactjs-popup";
import AddItemModal from "../../AddItemModal/AddItemModal";
import AddSKUModal from "../../AddSKUModal/AddSKUModal";
@ -161,7 +160,6 @@ export default function TechnicianEquipmentButtons() {
View SKUs
</p>
</Button>
</div>
<div
style={{
@ -173,37 +171,6 @@ export default function TechnicianEquipmentButtons() {
},
}}
>
<Button
style={{
...styles.flex_column,
...{
alignSelf: "center",
justifyContent: "center",
flexWrap: "wrap",
},
}}
>
<ArticleIcon
style={{
height: 64,
width: 64,
fill: colors.font_dark,
marginLeft: "1rem",
marginRight: "1rem",
}}
onClick={() => {
navigate("/view/transactions");
}}
/>
<p
style={{
...styles.text_dark,
...styles.text_M,
}}
>
Transactions
</p>
</Button>
<Button
style={{
...styles.flex_column,

39
src/Components/DashboardPage/Technician/TechnicianLogButtons.tsx
View file

@ -2,7 +2,6 @@ import { Button } from "@mui/material";
import { useNavigate } from "react-router-dom";
import ManageSearchIcon from "@mui/icons-material/ManageSearch";
import CountertopsIcon from "@mui/icons-material/Countertops";
import AssessmentIcon from "@mui/icons-material/Assessment";
import styles from "../../../styles";
import { colors } from "../../../styles";
@ -56,7 +55,7 @@ export default function TechnicianLogButtons() {
...styles.text_M,
}}
>
SKU Logs
SKU <br/> History
</p>
</Button>
<Button
@ -87,7 +86,7 @@ export default function TechnicianLogButtons() {
...styles.text_M,
}}
>
Equipment Logs
Equipment <br/> History
</p>
</Button>
<Button
@ -118,40 +117,10 @@ export default function TechnicianLogButtons() {
...styles.text_M,
}}
>
Item Tally
</p>
</Button>
<Button
style={{
...styles.flex_column,
...{
alignSelf: "center",
justifyContent: "center",
flexWrap: "wrap",
},
}}
onClick={() => {
navigate("/view/transactions/report");
}}
>
<AssessmentIcon
style={{
height: 64,
width: 64,
fill: colors.font_dark,
marginLeft: "1rem",
marginRight: "1rem",
}}
/>
<p
style={{
...styles.text_dark,
...styles.text_M,
}}
>
Transaction Report
Equipment <br/>Stock Check
</p>
</Button>
</div>
</>
);

125
src/Components/DashboardPage/Technician/TechnicianNavigation.tsx Normal file
View file

@ -0,0 +1,125 @@
import styles from "../../../styles";
import { useNavigate } from "react-router-dom";
import AssessmentIcon from "@mui/icons-material/Assessment";
import equipment from "../../../assets/Equipment.svg";
import transaction from "../../../assets/Transaction.svg";
export default function TechnicianNavigation() {
const navigate = useNavigate();
return (
<>
<div
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
gap: "24px",
alignSelf: "stretch",
paddingBottom: "5rem"
}}
>
<div
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
gap: "24px",
width: "100%",
maxWidth: "800px",
}}
>
<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",
width: "100%",
height: "85px",
padding: "15px 30px",
alignItems: "center",
gap: "15px",
borderRadius: "12px",
border: "1px solid #6877FF",
background: "#DDEDFF",
}}
onClick={() => {
navigate("/view/transactions");
}}
>
<img src={transaction} alt="Manage Transaction" />
<p style={{ ...styles.text_normal, fontSize: 20, margin: "10" }}>
Manage Transactions
</p>
</button>
<button
style={{
display: "flex",
width: "100%",
height: "85px",
padding: "15px 30px",
alignItems: "center",
gap: "15px",
borderRadius: "12px",
border: "1px solid #E3BD91",
background: "#E8D3BB",
}}
onClick={() => {
navigate("/view/ManageEquipment");
}}
>
<img src={equipment} alt="Manage Equipment" />
<p style={{ ...styles.text_normal, fontSize: 20, margin: "10" }}>
Manage Equipments
</p>
</button>
<button
style={{
display: "flex",
width: "100%",
height: "85px",
padding: "15px 30px",
alignItems: "center",
gap: "15px",
borderRadius: "12px",
border: "1px solid #FFCBA5",
background: "#FFEDAF",
}}
onClick={() => {
navigate("/view/transactions/report");
}}
>
<AssessmentIcon
style={{
height: 48,
width: 48,
fill: "brown",
}}
/>
<p style={{ ...styles.text_normal, fontSize: 20, margin: "10" }}>
Generate Report
</p>
</button>
</div>
</div>
</>
);
}

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>

54
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";
@ -10,26 +10,32 @@ export interface props {
export default function Header(props: props) {
const [SidebarOpen, SetSidebarOpen] = useState(false);
return (
<div>
<div
style={{
position: "sticky",
position: "fixed",
top: 0,
zIndex: 1000,
backgroundColor: colors.header_color,
width: "100%",
display: "flex",
flexDirection: "row",
padding: "10px 25px",
justifyContent: "space-between",
alignItems: "center",
alignSelf: "stretch",
background: "#B2DFAB",
zIndex: 1000, // Ensure it's above other elements
}}
>
<div
style={{
flex: 1,
alignSelf: "center",
display: "flex",
flex: "1 0 0",
}}
>
<MenuIcon
style={{
height: "64px",
width: "64px",
height: "48px",
width: "48px",
float: "left",
marginLeft: "8px",
}}
@ -38,9 +44,33 @@ export default function Header(props: props) {
}}
/>
</div>
<p style={{ ...styles.text_light, ...styles.text_L, ...{ flex: 1 } }}>
{props.label}
</p>
<div
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
flex: "1 0 0",
alignSelf: "stretch",
}}
>
<p style={{ ...styles.text_light, fontSize: 24, textAlign: "center", flex: 1, margin: "0px" }}>{props.label}</p>
</div>
<div
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
flex: "1 0 0",
alignSelf: "stretch",
}}
>
</div>
</div>
<div style={{ flex: 1 }} />
<Drawer open={SidebarOpen} onClose={() => SetSidebarOpen(false)}>
<SidebarModal />

102
src/Components/LoginModal/LoginModal.tsx
View file

@ -6,14 +6,14 @@ import InputAdornment from "@mui/material/InputAdornment";
import IconButton from "@mui/material/IconButton";
import Visibility from "@mui/icons-material/Visibility";
import VisibilityOff from "@mui/icons-material/VisibilityOff";
import LoginIcon from "@mui/icons-material/Login";
import Checkbox from "@mui/material/Checkbox";
import Button from "../Button/Button";
import { useNavigate } from "react-router-dom";
import { LoginAPI } from "../API/API";
import { useDispatch } from "react-redux";
import { auth_toggle } from "../Plugins/Redux/Slices/AuthSlice/AuthSlice";
import { toast } from "react-toastify";
import Logo_dako from "../../assets/Logo_dako.png"
export default function LoginModal() {
const navigate = useNavigate();
const [showPassword, setShowPassword] = useState(false);
@ -28,25 +28,41 @@ export default function LoginModal() {
<>
<div
style={{
...styles.flex_row,
...styles.flex_column,
...{
alignItems: "center",
justifyContent: "center",
overflowY: "scroll",
},
}}
>
<LoginIcon
style={{
height: 64,
width: 64,
fill: colors.font_dark,
}}
<img
style={{ width: "10rem", height: "auto", alignSelf: "center" }}
src={Logo_dako}
/>
<p style={{ ...styles.text_dark, ...styles.text_L }}>Welcome back!</p>
<p
style={{
...styles.text_normal,
fontSize: 16,
margin: "0",
marginTop: 15,
}}
>
Welcome back!
</p>
<p style={{ ...styles.text_normal, fontSize: 20, margin: "10" }}>
Sign In to Continue
</p>
</div>
<div style={styles.flex_column}>
<div style={{flex: 1, backgroundColor: "pink", margin: "20px"}}>
<p style={{ ...styles.text_dark_red, ...styles.text_S, flex: 1, textAlign: "left", marginLeft: 15}}>{error}</p>
</div>
<div style={{...styles.flex_column, marginTop: 30,
marginBottom: 20,
marginInline: 10,
}}>
<TextField
id="outlined-helperText"
label="Username"
@ -113,33 +129,45 @@ export default function LoginModal() {
backgroundColor: colors.button_border,
width: "100%",
height: "2px",
marginBottom: 8,
}}
/>
<p style={{ ...styles.text_dark, ...styles.text_S }}>{error}</p>
<Button
type={"dark"}
label={"Login"}
onClick={async () => {
const status = await LoginAPI(user, remember_session);
if (status === true) {
await dispatch(auth_toggle());
navigate("/dashboard");
toast("Logged in", {
position: "top-right",
autoClose: 2000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "light",
});
} else {
setError("Invalid login");
}
marginBottom: "40px"
}}
/>
<div style={{ margin: "10px", }}>
<button
onClick={async () => {
const status = await LoginAPI(user, remember_session);
if (status === true) {
await dispatch(auth_toggle());
navigate("/dashboard");
toast("Logged in", {
position: "top-right",
autoClose: 2000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "light",
});
} else {
setError("Invalid login");
}
}}
style={{
display: "flex",
padding: "25px 38px",
justifyContent: "center",
alignItems: "center",
background: "#FBB217",
height: "40px",
width: "100%",
}}
>
Login
</button>
</div>
</>
);
}

457
src/Components/RegisterModal/RegisterModal.tsx
View file

@ -1,13 +1,11 @@
import { useState } from "react";
import styles from "../../styles";
import { colors } from "../../styles";
import styles, { colors } from "../../styles";
import TextField from "@mui/material/TextField";
import InputAdornment from "@mui/material/InputAdornment";
import IconButton from "@mui/material/IconButton";
import Visibility from "@mui/icons-material/Visibility";
import VisibilityOff from "@mui/icons-material/VisibilityOff";
import { AppRegistration } from "@mui/icons-material";
import Button from "../Button/Button";
import Logo_dako from "../../assets/Logo_dako.png";
import { useNavigate } from "react-router-dom";
import { RegisterAPI } from "../API/API";
import { toast } from "react-toastify";
@ -34,216 +32,263 @@ export default function RegisterModal() {
const [error, setError] = useState("");
return (
<>
<div
style={{
...styles.flex_row,
...{
alignItems: "center",
justifyContent: "center",
overflowY: "scroll",
},
}}
>
<AppRegistration
<div className="custom-scrollbar">
<div
style={{
height: 64,
width: 64,
fill: colors.font_dark,
...styles.flex_column,
...{
alignItems: "center",
justifyContent: "center",
overflow: "auto",
scrollbarWidth: "thin",
WebkitOverflowScrolling: "touch",
},
}}
/>
<p style={{ ...styles.text_dark, ...styles.text_L }}>Get Started</p>
</div>
>
<img
style={{ width: "10rem", height: "auto", alignSelf: "center" }}
src={Logo_dako}
/>
<div style={styles.flex_column}>
<TextField
id="outlined-helperText"
label="First Name"
style={styles.input_form}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setUser({ ...user, first_name: e.target.value });
setError("");
}}
value={user.first_name}
placeholder={"Enter your first name"}
/>
<TextField
id="outlined-helperText"
label="Last Name"
style={styles.input_form}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setUser({ ...user, last_name: e.target.value })
}
value={user.last_name}
placeholder={"Enter your last name"}
/>
<TextField
id="outlined-helperText"
label="Email"
style={styles.input_form}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setUser({ ...user, email: e.target.value })
}
value={user.email}
placeholder={"Enter your email"}
/>
<FormControl style={{ marginTop: "8px" }}>
<FormLabel style={styles.text_dark} id="status-selection">
Course
</FormLabel>
<RadioGroup
aria-labelledby="demo-radio-buttons-group-label"
value={user.course}
defaultValue="BS Chemistry"
name="radio-buttons-group"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setUser({ ...user, course: e.target.value });
setError("");
<p
style={{
...styles.text_normal,
fontSize: 24,
margin: "0",
marginTop: 15,
}}
>
<div
style={{
...styles.flex_column,
...{ overflowY: "scroll", maxHeight: "72px" },
Create an Account
</p>
<p style={{ ...styles.text_normal, fontSize: 16, margin: "10" }}>
Enter required fields
</p>
</div>
<div style={{ flex: 1, backgroundColor: "pink", margin: "10px" }}>
<p
style={{
...styles.text_dark_red,
...styles.text_S,
flex: 1,
textAlign: "left",
marginLeft: 15,
}}
>
{error}
</p>
</div>
<div
style={{
...styles.flex_column,
marginTop: 30,
marginBottom: 55,
marginInline: 10,
}}
>
<TextField
id="outlined-helperText"
label="First Name"
style={styles.input_form}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setUser({ ...user, first_name: e.target.value });
setError("");
}}
value={user.first_name}
placeholder={"Enter your first name"}
/>
<TextField
id="outlined-helperText"
label="Last Name"
style={styles.input_form}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setUser({ ...user, last_name: e.target.value })
}
value={user.last_name}
placeholder={"Enter your last name"}
/>
<TextField
id="outlined-helperText"
label="Email"
style={styles.input_form}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setUser({ ...user, email: e.target.value })
}
value={user.email}
placeholder={"Enter your email"}
/>
<FormControl style={{ marginTop: "8px" }}>
<FormLabel style={styles.text_dark} id="status-selection">
Course
</FormLabel>
<RadioGroup
aria-labelledby="demo-radio-buttons-group-label"
value={user.course}
defaultValue="BS Chemistry"
name="radio-buttons-group"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setUser({ ...user, course: e.target.value });
setError("");
}}
>
<FormControlLabel
value="BS Chemistry"
control={<Radio />}
label="BS Chemistry"
style={styles.text_dark}
/>
<FormControlLabel
value="BS Food Technology"
control={<Radio />}
label="BS Food Technology"
style={styles.text_dark}
/>
<FormControlLabel
value="BS Applied Physics"
control={<Radio />}
label="BS Applied Physics"
style={styles.text_dark}
/>
<FormControlLabel
value="BS Environmental Science"
control={<Radio />}
label="BS Environmental Science"
style={styles.text_dark}
/>
</div>
</RadioGroup>
</FormControl>
<TextField
id="outlined-helperText"
label="Username"
style={styles.input_form}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setUser({ ...user, username: e.target.value });
setError("");
}}
value={user.username}
placeholder={"Enter username"}
/>
<TextField
id="outlined-helperText"
type={showPassword ? "text" : "password"}
style={styles.input_form}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={() => setShowPassword(!showPassword)}
edge="end"
>
{showPassword ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
),
}}
label="Password"
placeholder={"Enter password"}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setUser({ ...user, password: e.target.value })
}
value={user.password}
/>
<TextField
id="outlined-helperText"
type={showPassword ? "text" : "password"}
style={styles.input_form}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={() => setShowPassword(!showPassword)}
edge="end"
>
{showPassword ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
),
}}
label="Confirm Password"
placeholder={"Re-enter password"}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setUser({ ...user, confirm_password: e.target.value });
setError("");
}}
value={user.confirm_password}
/>
</div>
<p style={{ ...styles.text_dark, ...styles.text_M }}>{error}</p>
<div
style={{
backgroundColor: colors.button_border,
marginTop: "16px",
width: "100%",
height: "2px",
marginBottom: 8,
}}
/>
<Button
type={"dark"}
label={"Register"}
onClick={async () => {
if (user.password !== user.confirm_password) {
setError("Passwords do not match");
} else {
const status = await RegisterAPI(user);
if (status[0]) {
setError(
"Registration successful. Please activate your account using the email provided"
);
toast("Registration successful", {
position: "top-right",
autoClose: 2000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "light",
});
setTimeout(() => {
navigate(0);
}, 3000);
setUser({
first_name: "",
last_name: "",
username: "",
email: "",
password: "",
confirm_password: "",
course: "",
});
} else {
setError(JSON.stringify(status[1]));
<div
style={{
...styles.flex_column,
...{ overflowY: "scroll", maxHeight: "72px" },
}}
>
<FormControlLabel
value="BS Chemistry"
control={<Radio />}
label="BS Chemistry"
style={styles.text_dark}
/>
<FormControlLabel
value="BS Food Technology"
control={<Radio />}
label="BS Food Technology"
style={styles.text_dark}
/>
<FormControlLabel
value="BS Applied Physics"
control={<Radio />}
label="BS Applied Physics"
style={styles.text_dark}
/>
<FormControlLabel
value="BS Environmental Science"
control={<Radio />}
label="BS Environmental Science"
style={styles.text_dark}
/>
</div>
</RadioGroup>
</FormControl>
<TextField
id="outlined-helperText"
label="Username"
style={styles.input_form}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setUser({ ...user, username: e.target.value });
setError("");
}}
value={user.username}
placeholder={"Enter username"}
/>
<TextField
id="outlined-helperText"
type={showPassword ? "text" : "password"}
style={styles.input_form}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={() => setShowPassword(!showPassword)}
edge="end"
>
{showPassword ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
),
}}
label="Password"
placeholder={"Enter password"}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setUser({ ...user, password: e.target.value })
}
}
}}
/>
value={user.password}
/>
<TextField
id="outlined-helperText"
type={showPassword ? "text" : "password"}
style={styles.input_form}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={() => setShowPassword(!showPassword)}
edge="end"
>
{showPassword ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
),
}}
label="Confirm Password"
placeholder={"Re-enter password"}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setUser({ ...user, confirm_password: e.target.value });
setError("");
}}
value={user.confirm_password}
/>
</div>
<div
style={{
backgroundColor: colors.button_border,
height: "2px",
margin: "20px",
marginBottom: "40px",
}}
/>
<div style={{ margin: "10px" }}>
<button
onClick={async () => {
if (user.password !== user.confirm_password) {
setError("Passwords do not match");
} else {
const status = await RegisterAPI(user);
if (status[0]) {
setError(
"Registration successful. Please activate your account using the email provided"
);
toast("Registration successful", {
position: "top-right",
autoClose: 2000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "light",
});
setTimeout(() => {
navigate(0);
}, 3000);
setUser({
first_name: "",
last_name: "",
username: "",
email: "",
password: "",
confirm_password: "",
course: "",
});
} else {
setError(JSON.stringify(status[1]));
}
}
}}
style={{
display: "flex",
padding: "25px 38px",
justifyContent: "center",
alignItems: "center",
background: "#FBB217",
height: "40px",
width: "100%",
}}
>
Register
</button>
</div>
</div>
</>
);
}

21
src/Components/StatusTextColor/StatusTextColor.tsx
View file

@ -1,6 +1,6 @@
import { colors } from "../../styles";
export default function StatusTextColor(status: string) {
export function StatusTextColor(status: string) {
if (
status === "Pending Approval" ||
status === "Returned: Pending Checking"
@ -11,8 +11,25 @@ export default function StatusTextColor(status: string) {
status === "Finalized" ||
status === "Borrowed"
) {
return colors.green;
return colors.darkgreen;
} else {
return colors.red;
}
}
export function StatusBGColor(status: string) {
if (
status === "Pending Approval" ||
status === "Returned: Pending Checking"
) {
return colors.lightorange;
} else if (
status === "Approved" ||
status === "Finalized" ||
status === "Borrowed"
) {
return colors.lightgreen;
} else {
return colors.lightred;
}
}

219
src/Components/TransactionEntry/TransactionEntry.tsx
View file

@ -1,175 +1,116 @@
import styles from "../../styles";
import { colors } from "../../styles";
import { TransactionType } from "../Types/Types";
import StatusTextColor from "../StatusTextColor/StatusTextColor";
import { StatusTextColor } from "../StatusTextColor/StatusTextColor";
import CircleSharpIcon from '@mui/icons-material/CircleSharp';
export interface props {
transaction: TransactionType;
onClick?: React.MouseEventHandler<HTMLButtonElement>;
}
}
export default function TransactionEntry(props: props) {
return (
<button
style={{
alignSelf: "center",
justifySelf: "center",
width: "384px",
backgroundColor: colors.header_color,
borderRadius: 16,
margin: "8px",
padding: "8px",
borderRadius: "7px 7px 0px 0px",
marginTop: "10px",
paddingTop: "15px",
width: "100%",
maxWidth: "550px"
}}
onClick={props.onClick}
>
<div style={styles.flex_row}>
<div style={{
display: "flex",
flexDirection: "row",
padding: "0px",
margin: "0px"
}}>
<p
style={{
...styles.text_dark,
...styles.text_S,
...styles.text_super_dark,
...styles.text_M,
...{ textAlign: "left", flex: 1 },
padding: "0px",
margin: "0px",
}}
>
ID: {props.transaction.id}
Transaction ID: {props.transaction.id}
</p>
<p
<div style={{
display: "flex",
alignItems: "center",
flexDirection: "row",
margin: "0"
}}>
<CircleSharpIcon
style={{
width: "9px",
height: "8px",
color: StatusTextColor(props.transaction.transaction_status),
marginRight: "9px"
}}
/>
<p
style={{
...styles.text_dark,
...styles.text_S,
...{ textAlign: "right", flex: 2 },
}}
>
{props.transaction.timestamp}
</p>
...styles.text_M,
...{
textAlign: "center",
margin: 0,
color: StatusTextColor(props.transaction.transaction_status),
},
}}
>
{`${props.transaction.transaction_status}`}
</p>
</div>
</div>
<div style={styles.flex_row}>
<div style={{ flex: 1 }}>
<div style={{
flex:1,
marginTop: "3px",
alignItems: "center"
}}>
<p
style={{
...styles.text_dark,
...styles.text_gray,
...styles.text_S,
...{ textAlign: "left", margin: 0, wordWrap: "break-word" },
...{ textAlign: "left", flex: 2 },
fontStyle: "italic"
}}
>
Borrower: {props.transaction.borrower.name}{" "}
{`(ID:${props.transaction.borrower.id})`}
</p>
<p
style={{
...styles.text_dark,
...styles.text_S,
...{ textAlign: "left", margin: 0, wordWrap: "break-word" },
}}
>
{`(${props.transaction.borrower.course})`}
</p>
<p
style={{
...styles.text_dark,
...styles.text_S,
...{ textAlign: "left", margin: 0 },
}}
>
Teacher: {props.transaction.teacher.name}{" "}
{`(ID:${props.transaction.teacher.id})`}
</p>
<p
style={{
...styles.text_dark,
...styles.text_S,
...{
textAlign: "left",
margin: 0,
maxWidth: "128px",
wordWrap: "break-word",
},
}}
>
Subject: {props.transaction.subject}
</p>
<p
style={{
...styles.text_dark,
...styles.text_S,
...{
maxHeight: "64px",
textAlign: "left",
margin: 0,
marginTop: "8px",
flexWrap: "wrap",
overflowY: "scroll",
maxWidth: "192px",
wordWrap: "break-word",
},
}}
>
Remarks: {props.transaction.remarks}
</p>
<p
style={{
...styles.text_dark,
...styles.text_S,
...{
maxHeight: "64px",
textAlign: "left",
margin: 0,
marginTop: "8px",
flexWrap: "wrap",
overflowY: "scroll",
maxWidth: "192px",
wordWrap: "break-word",
},
}}
>
Consumables: {props.transaction.consumables}
{props.transaction.timestamp}
</p>
</div>
<div style={{ flex: 1 }}>
<p
style={{
...styles.text_dark,
...styles.text_S,
...{ textAlign: "right", margin: 0 },
}}
>
Equipments:
</p>
<div
style={{
...styles.flex_column,
...{ height: "96px", overflowY: "scroll" },
}}
>
{props.transaction.equipments.map((equipment) => (
<p
style={{
...styles.text_dark,
...styles.text_S,
...{
textAlign: "right",
wordWrap: "break-word",
margin: 0,
},
}}
>
{` - ${equipment.name} (ID:${equipment.id})`}
</p>
))}
</div>
</div>
</div>
<p
style={{
...styles.text_dark,
...styles.text_M,
...{
textAlign: "center",
margin: 0,
color: StatusTextColor(props.transaction.transaction_status),
},
}}
>
{`${props.transaction.transaction_status}`}
</p>
{/* //GIWALA */}
</button>
);
}

3
src/Components/TransactionFilterMenu/TransactionFilterMenu.tsx
View file

@ -41,10 +41,11 @@ export default function TransactionFilterMenu(props: props) {
alignSelf: "center",
justifyContent: "center",
flexWrap: "wrap",
width: "100%"
},
}}
>
<FormControl sx={{ width: "384px" }}>
<FormControl sx={{ width: "550px", marginInline: "30px" }}>
<InputLabel style={{ backgroundColor: "white", padding: 0 }}>
Filter Transactions
</InputLabel>

431
src/Components/TransactionPDF/TransactionPDF.tsx
View file

@ -1,161 +1,348 @@
import { Document, Page, Text, View } from "@react-pdf/renderer";
import { Document, Page, Text, View, Image } from "@react-pdf/renderer";
import { TransactionType } from "../Types/Types";
import { colors } from "../../styles";
import StatusTextColor from "../StatusTextColor/StatusTextColor";
import {
StatusTextColor,
StatusBGColor,
} from "../StatusTextColor/StatusTextColor";
import ustplogo from "../../assets/ustp-logo.png";
type props = {
transaction: TransactionType | null;
transaction: TransactionType;
};
export default function TransactionPDF(props: props) {
return (
<Document>
<Page size={"A4"}>
<Page size={{ width: 8.5 * 72, height: 10 * 90 }}>
{/* Whole Page */}
<View
style={{
alignSelf: "center",
justifyContent: "center",
width: "512px",
backgroundColor: colors.header_color,
borderRadius: 16,
margin: "8px",
padding: "8px",
display: "flex",
flexDirection: "column",
width: "90%",
height: "100%",
alignItems: "flex-end",
marginLeft: "auto", // Align to the right edge
marginRight: "auto",
padding: "20 0",
gap: 10,
}}
>
<View style={{ display: "flex", flexDirection: "row" }}>
<Text
{/* Header */}
<View
style={{
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
alignSelf: "stretch",
}}
>
<Image
src={ustplogo}
style={{
color: colors.font_dark,
fontSize: 16,
textAlign: "left",
flex: 1,
width: 60,
height: 60,
position: "absolute",
left: 10,
top: 0,
}}
>
Transaction ID: {props.transaction?.id}
</Text>
<Text
style={{
color: colors.font_dark,
fontSize: 16,
textAlign: "right",
flex: 1,
}}
>
{props.transaction?.timestamp}
</Text>
</View>
<View style={{ paddingVertical: 8 }}></View>
<View style={{ display: "flex", flexDirection: "row" }}>
<View style={{ flex: 1 }}>
/>
<View style={{ alignItems: "center" }}>
<Text
style={{
color: colors.font_dark,
fontSize: 16,
textAlign: "left",
margin: 0,
color: colors.form_dark,
fontSize: 10,
textAlign: "center",
padding: "5 0 5 0",
}}
>
Borrower: {props.transaction?.borrower.name}{" "}
{`(ID:${props.transaction?.borrower.id})`}
University of Science and Technology of Southern Philippines{" "}
{"\n"}
Lapasan, Cagayan de Oro City {"\n"}
College of Science and Mathematics
</Text>
<Text
style={{
color: colors.font_dark,
fontSize: 16,
textAlign: "left",
margin: 0,
color: colors.form_dark,
fontSize: 11,
padding: "5 0 5 0",
}}
>
{`(${props.transaction?.borrower.course})`}
</Text>
<Text
style={{
color: colors.font_dark,
fontSize: 16,
textAlign: "left",
margin: 0,
}}
>
Teacher: {props.transaction?.teacher.name}{" "}
{`(ID:${props.transaction?.teacher.id})`}
</Text>
<Text
style={{
color: colors.font_dark,
fontSize: 16,
textAlign: "left",
margin: 0,
}}
>
Subject: {props.transaction?.subject}
</Text>
<Text
style={{
color: colors.font_dark,
fontSize: 16,
textAlign: "left",
margin: 0,
marginTop: 8,
flexWrap: "wrap",
}}
>
Remarks: {props.transaction?.remarks}
</Text>
<Text
style={{
color: colors.font_dark,
fontSize: 16,
textAlign: "left",
margin: 0,
marginTop: 8,
flexWrap: "wrap",
}}
>
Consumables: {props.transaction?.consumables}
<Text style={{ fontFamily: 'Helvetica-Bold' }}> BORROWER'S SLIP </Text>
</Text>
</View>
<View style={{ flex: 1 }}>
<Text
style={{
color: colors.font_dark,
textAlign: "right",
fontSize: 16,
margin: 0,
flexWrap: "wrap",
}}
>
Equipments:
</Text>
</View>
{/* Status */}
<View
style={{
alignSelf: "stretch",
alignContent: "center",
justifyContent: "center",
backgroundColor: StatusBGColor(
props.transaction.transaction_status
),
borderRadius: 16,
padding: "8px",
}}
>
<Text
style={{
color: StatusTextColor(props.transaction.transaction_status),
textAlign: "right",
fontSize: 16,
}}
>
Status: {`${props.transaction.transaction_status}`}
</Text>
</View>
{/* Transaction ID */}
<View
style={{
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
alignSelf: "stretch",
}}
>
<Text
style={{
color: colors.form_dark,
fontSize: 20,
textAlign: "right",
}}
>
Transaction ID: #{props.transaction.id}
</Text>
</View>
<View
style={{
display: "flex",
alignSelf: "stretch",
}}
>
<Text
style={{
color: colors.form_title,
borderBottom: "1px solid #A2A2A2",
}}
>
Borrower Details
</Text>
</View>
{/* Top Details */}
<View
style={{
display: "flex",
flexDirection: "row",
gap: 5,
alignSelf: "stretch",
justifyContent: "space-between",
}}
>
{/* Borrower Details */}
<View
style={{
display: "flex",
flexDirection: "row",
gap: 5,
alignSelf: "stretch",
padding: "0px 5px",
}}
>
<View style={{ display: "flex", flexDirection: "column" }}>
{props.transaction?.equipments.map((equipment) => (
<Text
style={{
color: colors.form_dark,
fontSize: 16,
textAlign: "left",
margin: 0,
}}
>
Name:{" "}
<Text style={{ textDecoration: "underline" }}>
{props.transaction.borrower.name}
</Text>{" "}
</Text>
<Text
style={{
color: colors.form_dark,
fontSize: 14,
textAlign: "left",
margin: 0,
}}
>
Course:{" "}
<Text
style={{
color: colors.font_dark,
textAlign: "right",
fontSize: 12,
margin: 0,
marginTop: 2,
flexWrap: "wrap",
}}
>
{` - ${equipment.name} (ID:${equipment.id})`}
</Text>
))}
style={{ textDecoration: "underline" }}
>{`${props.transaction.borrower.course}`}</Text>{" "}
{"\n"}
Section: <Text style={{ textDecoration: "underline" }}>{props.transaction.section}</Text>
</Text>
</View>
</View>
<View style={{ display: "flex", flexDirection: "column" }}>
<Text
style={{
color: colors.form_dark,
fontSize: 14,
textAlign: "left",
}}
>
Timestamp:{" "}
<Text style={{ textDecoration: "underline" }}>
{props.transaction.timestamp}
</Text>
{"\n"}
Lab instructor:{" "}
<Text style={{ textDecoration: "underline" }}>
{props.transaction.teacher.name}
</Text>{" "}
</Text>
<Text
style={{
color: colors.form_dark,
fontSize: 14,
textAlign: "left",
}}
>
Subject:{" "}
<Text style={{ textDecoration: "underline" }}>
{props.transaction.subject}
</Text>
</Text>
</View>
</View>
<View style={{ alignContent: "center", justifyContent: "center" }}>
{/* Equipment Section */}
<View
style={{
display: "flex",
gap: 5,
alignSelf: "stretch",
marginTop: "10"
}}
>
<Text
style={{
color: StatusTextColor(
props.transaction?.transaction_status || "Pending"
),
textAlign: "center",
fontSize: 16,
color: colors.form_title,
borderBottom: "1px solid #A2A2A2",
}}
>
{`${props.transaction?.transaction_status}`}
Selected Equipment
</Text>
{props.transaction.equipments.map((equipment) => (
<Text
style={{
color: colors.form_dark,
textAlign: "left",
fontSize: 14,
margin: 0,
marginTop: 2,
flexWrap: "wrap",
padding: 3,
}}
>
{` - ${equipment.name} (ID:${equipment.id})`}
</Text>
))}
{/* total Equipment */}
<View style={{ borderTop: "1px", marginTop: 5, width: "150px" }}>
<Text
style={{
color: colors.form_dark,
textAlign: "left",
fontSize: 14,
margin: 0,
flexWrap: "wrap",
}}
>
Total Equipment: {props.transaction.equipments.length}
</Text>
</View>
{/* Consumables Area */}
<View style={{ marginTop: "5" , marginBottom: 10}}>
<Text
style={{
color: colors.form_title,
borderBottom: "1px solid #A2A2A2",
}}
>
Consumables
</Text>
<Text
style={{
color: colors.form_dark,
textAlign: "left",
fontSize: 14,
flexWrap: "wrap",
padding: 3,
}}
>
{props.transaction?.consumables}
</Text>
</View>
</View>
{/* Members here */}
<View style={{
display: "flex",
gap: 5,
alignSelf: "stretch",}}>
<Text
style={{
color: colors.form_title,
borderBottom: "1px solid #A2A2A2",
}}
>
Members
</Text>
<Text
style={{
fontSize: 16,
margin: 0,
marginTop: 8,
}}
>
{props.transaction?.additional_members}
</Text>
{/* Remarks */}
</View>
<View style={{ display: "flex", flexDirection: "column", alignSelf: "stretch" }}>
<View style={{ padding: "10 0" }}>
<Text
style={{
color: colors.form_title,
marginTop: 10,
borderBottom: "1px solid #A2A2A2",
padding: "5 0",
}}
>
Remarks
</Text>
</View>
<Text
style={{
color: colors.form_dark,
fontSize: 14,
margin: 0,
marginTop: 8,
}}
>
{props.transaction.remarks}
</Text>
</View>
</View>
</Page>
</Document>

323
src/Components/TransactionReportPDF/TransactionReportPDF.tsx
View file

@ -1,4 +1,4 @@
import { Document, Page, Text, View } from "@react-pdf/renderer";
import { Document, Page, Text, View, Image } from "@react-pdf/renderer";
import { TransactionListType } from "../Types/Types";
import { colors } from "../../styles";
import count_transaction_equipments from "../../CountTransactionEquipments/CountTransactionEquipments";
@ -6,6 +6,7 @@ import {
filter_today,
filter_thismonth,
} from "../FilterTransaction/FilterTransaction";
import ustplogo from "../../assets/ustp-logo.png";
type props = {
transactions: TransactionListType | [];
@ -18,143 +19,245 @@ export default function TransactionReportPDF(props: props) {
return (
<Document>
<Page size={"A4"}>
<Text
style={{
color: colors.font_dark,
fontSize: 16,
alignSelf: "center",
justifyContent: "center",
}}
>
Daily Transaction Report
</Text>
{/* Header */}
<View
style={{
alignSelf: "center",
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
width: "512px",
backgroundColor: colors.header_color,
borderRadius: 16,
margin: "8px",
padding: "8px",
alignSelf: "stretch",
padding: 60,
}}
>
<Text
<Image
src={ustplogo}
style={{
color: colors.font_dark,
fontSize: 16,
textAlign: "center",
width: 70,
height: 70,
position: "absolute",
left: "45",
top: "",
}}
/>
<View
style={{
width: "100%",
height: "auto",
position: "absolute",
right: "30",
top: "35",
}}
>
Total Equipments Processed:{" "}
{count_transaction_equipments(transactions_today)}
</Text>
<Text
style={{
color: colors.font_dark,
fontSize: 16,
textAlign: "center",
}}
>
Total Transactions: {transactions_today.length}
</Text>
<Text
style={{
color: colors.font_dark,
fontSize: 16,
textAlign: "center",
}}
>
Rejected Transactions:{" "}
{
transactions_today.filter(
(transaction) => transaction.transaction_status == "Rejected"
).length
}
</Text>
<Text
style={{
color: colors.font_dark,
fontSize: 16,
textAlign: "center",
}}
>
Finalized Transactions:{" "}
{
transactions_today.filter(
(transaction) => transaction.transaction_status == "Finalized"
).length
}
</Text>
<View style={{ alignItems: "center" }}>
<Text
style={{
color: colors.form_dark,
fontSize: 11,
textAlign: "center",
}}
>
Republic of the Philippines{"\n"}
<Text style={{ fontFamily: "Helvetica-Bold" }}>
{" "}
UNIVERSITY OF SCIENCE and TECHNOLOGY OF SCIENCE AND TECHNOLOGY{" "}
</Text>
{"\n"}
College of Science and Mathematics
</Text>
<Text
style={{
color: colors.form_dark,
fontSize: 11,
textAlign: "center",
margin: "2 5 2 5",
}}
>
<Text style={{ fontFamily: "Helvetica-Bold" }}>
{" "}
Department of Chemistry (Laboratory)
</Text>
</Text>
</View>
</View>
</View>
<Text
style={{
color: colors.font_dark,
fontSize: 16,
alignSelf: "center",
justifyContent: "center",
color: colors.form_dark,
fontSize: 13,
padding: "5 0 5 0",
textAlign: "center",
}}
>
Monthly Transaction Report
<Text style={{ fontFamily: "Helvetica-Bold" }}>
LABORATORY REPORTS
</Text>
</Text>
<View
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
alignSelf: "center",
justifyContent: "center",
width: "512px",
backgroundColor: colors.header_color,
borderRadius: 16,
margin: "8px",
padding: "8px",
width: "85%",
}}
>
<Text
<View
style={{
color: colors.font_dark,
fontSize: 16,
textAlign: "center",
display: "flex",
padding: "0px 12px",
justifyContent: "center",
alignItems: "center",
gap: "10px",
alignSelf: "stretch",
border: "1px solid #000",
}}
>
Total Equipments Processed:{" "}
{count_transaction_equipments(transactions_thismonth)}
</Text>
<Text
<Text
style={{
fontFamily: "Helvetica-Bold",
color: colors.form_dark,
fontSize: 13,
padding: "5 0 5 0",
}}
>
Transaction
</Text>
</View>
<View
style={{
color: colors.font_dark,
fontSize: 16,
textAlign: "center",
display: "flex",
padding: "5px 12px",
flexDirection: "column",
justifyContent: "center",
alignItems: "flex-start",
gap: "10px",
alignSelf: "stretch",
borderRight: "1px solid #000",
borderBottom: "1px solid #000",
borderLeft: "1px solid #000",
}}
>
Total Transactions: {transactions_thismonth.length}
</Text>
<Text
<Text style={{ fontSize: 13 }}>Daily Transaction Report</Text>
<Text
style={{
fontSize: 13,
textAlign: "center",
}}
>
{" "}
• Total Equipments Processed:{" "}
{count_transaction_equipments(transactions_today)}
</Text>
<Text
style={{
fontSize: 13,
textAlign: "center",
}}
>
{" "}
• Total Transactions: {transactions_today.length}
</Text>
<Text
style={{
fontSize: 13,
textAlign: "center",
}}
>
{" "}
• Rejected Transactions:{" "}
{
transactions_today.filter(
(transaction) => transaction.transaction_status == "Rejected"
).length
}
</Text>
<Text
style={{
fontSize: 13,
textAlign: "center",
}}
>
{" "}
• Finalized Transactions:{" "}
{
transactions_today.filter(
(transaction) => transaction.transaction_status == "Finalized"
).length
}
</Text>
</View>
<View
style={{
color: colors.font_dark,
fontSize: 16,
textAlign: "center",
display: "flex",
padding: "5px 12px",
flexDirection: "column",
justifyContent: "center",
alignItems: "flex-start",
gap: "10px",
alignSelf: "stretch",
borderRight: "1px solid #000",
borderBottom: "1px solid #000",
borderLeft: "1px solid #000",
}}
>
Rejected Transactions:{" "}
{
transactions_thismonth.filter(
(transaction) => transaction.transaction_status == "Rejected"
).length
}
</Text>
<Text
style={{
color: colors.font_dark,
fontSize: 16,
textAlign: "center",
}}
>
Finalized Transactions:{" "}
{
transactions_thismonth.filter(
(transaction) => transaction.transaction_status == "Finalized"
).length
}
</Text>
<Text style={{ fontSize: 13 }}>Monthly Transaction Report</Text>
<Text
style={{
fontSize: 13,
textAlign: "center",
}}
>
{" "}
• Total Equipments Processed:{" "}
{count_transaction_equipments(transactions_thismonth)}
</Text>
<Text
style={{
fontSize: 13,
textAlign: "center",
}}
>
{" "}
• Total Transactions: {transactions_thismonth.length}
</Text>
<Text
style={{
fontSize: 13,
textAlign: "center",
}}
>
{" "}
• Rejected Transactions:{" "}
{
transactions_thismonth.filter(
(transaction) => transaction.transaction_status == "Rejected"
).length
}
</Text>
<Text
style={{
fontSize: 13,
textAlign: "center",
}}
>
{" "}
• Finalized Transactions:{" "}
{
transactions_thismonth.filter(
(transaction) => transaction.transaction_status == "Finalized"
).length
}
</Text>
</View>
</View>
</Page>
</Document>

3
src/Components/Types/Types.tsx
View file

@ -110,6 +110,8 @@ export type UserType = {
};
export type TransactionType = {
section: string;
additional_members: string;
id: number;
borrower: {
id: number;
@ -143,6 +145,7 @@ export type TransactionCreateType = {
consumables: string;
transaction_status: string;
additional_members: string;
section: string;
};
export type TransactionUpdateType = {

353
src/Pages/AddTransactionPage/AddTransactionPage.tsx
View file

@ -3,7 +3,6 @@ import styles from "../../styles";
import { colors } from "../../styles";
import TextField from "@mui/material/TextField";
import AddToQueueIcon from "@mui/icons-material/AddToQueue";
import Button from "../../Components/Button/Button";
import { toast } from "react-toastify";
import {
AvailableEquipmentInstancesAPI,
@ -21,6 +20,9 @@ import {
MenuItem,
OutlinedInput,
Autocomplete,
Alert,
Stack,
Button,
} from "@mui/material";
import React from "react";
import Header from "../../Components/Header/Header";
@ -38,7 +40,89 @@ export default function AddTransactionPage() {
consumables: "",
additional_members: "",
borrower: 0,
section: "",
});
// Function to calculate total equipment count
const calculateTotalEquipmentCount = () => {
const selectedItems =
equipments.data?.filter((equipment) =>
transaction.equipments.includes(equipment.id)
) || [];
// Calculate total count
const totalCount = selectedItems.reduce((count) => count + 1, 0);
return totalCount;
};
const handleShowSelectedItems = () => {
const selectedItems =
equipments.data?.filter((equipment) =>
transaction.equipments.includes(equipment.id)
) || [];
// Explicitly define the type for equipmentCounts
const equipmentCounts: Record<string, number> = {};
const totalEquipmentCount = calculateTotalEquipmentCount();
// Calculate counts based on equipment name
selectedItems.forEach((item) => {
equipmentCounts[item.equipment_name] =
(equipmentCounts[item.equipment_name] || 0) + 1;
});
// Show alert
const formattedCounts = Object.entries(equipmentCounts).map(
([name, count]) => `${count} pcs. of ${name}`
);
const confirmationMessage = `So, you're trying to borrow ${totalEquipmentCount} equipment(s):\n${formattedCounts.join(
"\n"
)}\nIs it correct?\n\nPlease click OK to continue request\nCancel if you still want to edit`;
if (window.confirm(confirmationMessage)) {
// OK Button Logic
console.log(JSON.stringify(transaction));
TransactionCreateAPI(transaction)
.then(async (data) => {
if (data[0]) {
setError("Created successfully");
toast(
`New transaction created successfully, ${
typeof data[1] == "object" ? "ID:" + data[1].id : ""
}`,
{
position: "top-right",
autoClose: 2000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "light",
}
);
queryClient.invalidateQueries({
queryKey: ["equipment_instances"],
});
queryClient.invalidateQueries({
queryKey: ["transactions"],
});
navigate("/dashboard");
} else {
setError(JSON.stringify(data[1]));
}
})
.catch((error) => {
setError(JSON.stringify(error));
});
} else {
// Cancel Button Logic
console.log("Cancel button clicked");
}
};
/*
const [selecteditems, SetSelectedItems] = useState<number[]>([]);
const [selectedteacher, SetSelectedTeacher] = useState<number>(0);
@ -110,6 +194,7 @@ export default function AddTransactionPage() {
alignItems: "center",
justifyContent: "center",
overflowY: "scroll",
marginTop: 64,
},
}}
>
@ -122,46 +207,89 @@ export default function AddTransactionPage() {
marginRight: "1rem",
}}
/>
<p style={{ ...styles.text_dark, ...styles.text_L }}>New Transaction</p>
<p style={{ ...styles.text_dark, ...styles.text_L }}>Borrowing Form</p>
</div>
<div style={styles.flex_column}>
<FormControl style={{ marginTop: "8px" }}>
<FormLabel
<div
style={{
...styles.flex_column,
marginLeft: "1rem",
marginRight: "1rem",
}}
>
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "flex-start",
gap: "8px",
alignSelf: "stretch",
}}
>
<FormControl style={{ marginTop: "8px", width: "100%" }}>
<FormLabel
style={{
...{ ...styles.text_dark, ...styles.bform_label2 },
...{
marginLeft: "4px",
marginBottom: "8px",
textAlign: "left",
},
}}
>
Items Requested
</FormLabel>
<Autocomplete
multiple
id="equipment-autocomplete"
options={equipments.data?.sort((a, b) => a.id - b.id) || []}
getOptionLabel={(option) =>
`${option.equipment_name} (ID:${option.id})`
}
value={
equipments.data?.filter((equipment) =>
transaction.equipments.includes(equipment.id)
) || []
}
onChange={(_event, newValue) => {
SetTransaction({
...transaction,
equipments: newValue.map((item) => item.id),
});
}}
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
label="Items Requested"
/>
)}
/>
</FormControl>
<div
style={{
...styles.text_dark,
...{ marginLeft: "4px", marginBottom: "8px", textAlign: "left" },
display: "flex",
padding: "4px 15px",
alignItems: "center",
borderRadius: "14px",
background: "#D1FF97",
}}
>
Items Requested
</FormLabel>
<Autocomplete
multiple
id="equipment-autocomplete"
options={equipments.data?.sort((a, b) => a.id - b.id) || []}
getOptionLabel={(option) =>
`${option.equipment_name} (ID:${option.id})`
}
value={
equipments.data?.filter((equipment) =>
transaction.equipments.includes(equipment.id)
) || []
}
onChange={(_event, newValue) => {
SetTransaction({
...transaction,
equipments: newValue.map((item) => item.id),
});
}}
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
label="Items Requested"
/>
)}
/>
</FormControl>
<p
style={{
...styles.text_dark,
...styles.text_normal,
textAlign: "left",
margin: 0,
}}
>
Total equipment to borrow: {calculateTotalEquipmentCount()}
</p>
</div>
</div>
<FormControl style={{ marginTop: "8px" }}>
<FormLabel
style={{
@ -188,6 +316,28 @@ export default function AddTransactionPage() {
))}
</Select>
</FormControl>
<FormControl style={{ marginTop: "8px" }}>
<FormLabel
style={{
...styles.text_dark,
...{ marginLeft: "4px", marginBottom: "4px", textAlign: "left" },
}}
>
Section
</FormLabel>
<TextField
style={styles.input_form}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
SetTransaction({ ...transaction, section: e.target.value });
setError("");
}}
label={"Section"}
value={transaction.section}
placeholder={"Type Section Here"}
/>
</FormControl>
<FormControl style={{ marginTop: "8px" }}>
<FormLabel
style={{
@ -207,26 +357,7 @@ export default function AddTransactionPage() {
placeholder={"The subject requiring the equipments"}
/>
</FormControl>
<FormControl style={{ marginTop: "8px" }}>
<FormLabel
style={{
...styles.text_dark,
...{ marginLeft: "4px", marginBottom: "4px", textAlign: "left" },
}}
>
Remarks
</FormLabel>
<TextField
multiline
style={styles.input_form}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
SetTransaction({ ...transaction, remarks: e.target.value });
setError("");
}}
value={transaction.remarks}
placeholder={"Optionally add a brief description of the request"}
/>
</FormControl>
<FormControl style={{ marginTop: "8px" }}>
<FormLabel
style={{
@ -244,7 +375,7 @@ export default function AddTransactionPage() {
setError("");
}}
value={transaction.consumables}
placeholder={"Write down any consumables here"}
placeholder={"ex. Filter Papers, Acids, Solvent, Cleaning Agents"}
/>
</FormControl>
<FormControl style={{ marginTop: "8px" }}>
@ -268,59 +399,81 @@ export default function AddTransactionPage() {
}}
value={transaction.additional_members}
placeholder={
"Write down any additional members borrowing on behalf of this transaction"
"1. Full Name ex. (Daniel John Padilla)\n2. Kathryn Bernardo \n3. ..."
}
/>
</FormControl>
<FormControl style={{ marginTop: "8px" }}>
<FormLabel
style={{
...styles.text_dark,
...{ marginLeft: "4px", marginBottom: "4px", textAlign: "left" },
}}
>
Remarks (optional)
</FormLabel>
<TextField
multiline
style={styles.input_form}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
SetTransaction({ ...transaction, remarks: e.target.value });
setError("");
}}
value={transaction.remarks}
placeholder={"Add a brief description of the request or N/A."}
/>
</FormControl>
</div>
<p style={{ ...styles.text_dark, ...styles.text_M }}>{error}</p>
<div
style={{
backgroundColor: colors.button_border,
marginTop: "16px",
display: "flex",
flex: 1,
alignContent: "center",
width: "100%",
height: "2px",
marginBottom: 8,
marginTop: "1rem",
}}
/>
>
<Stack
sx={{
width: "100%",
}}
spacing={2}
>
<Alert
icon={false}
severity="warning"
sx={{ alignItems: "center", justifyContent: "center" }}
>
NOTE: please be reminded that borrowing of lab apparatus can only be
made once. Further requests of additional apparatus will not be
entertained.
</Alert>
</Stack>
</div>
<p style={{ ...styles.text_dark, ...styles.text_M }}>{error}</p>
<Button
type={"dark"}
label={"Create Transaction"}
onClick={async () => {
console.log(JSON.stringify(transaction));
const data = await TransactionCreateAPI(transaction);
if (data[0]) {
setError("Created successfully");
toast(
`New transaction created successfuly, ${
typeof data[1] == "object" ? "ID:" + data[1].id : ""
}`,
{
position: "top-right",
autoClose: 2000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "light",
}
);
queryClient.invalidateQueries({
queryKey: ["equipment_instances"],
});
queryClient.invalidateQueries({
queryKey: ["equipment_instances_available"],
});
queryClient.invalidateQueries({
queryKey: ["transactions"],
});
navigate("/dashboard");
} else {
setError(JSON.stringify(data[1]));
}
variant="contained"
color="primary"
onClick={handleShowSelectedItems}
style={{
display: "flex",
padding: "25px 38px",
justifyContent: "center",
alignItems: "center",
background: "#A7DA96",
height: "40px",
width: "100%",
marginTop: "1rem",
marginBottom: "1rem",
}}
/>
>
<p style={{ ...styles.text_light, ...styles.text_M, ...{ flex: 1 } }}>
Create Transaction
</p>
</Button>
</div>
);
}

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

@ -2,39 +2,40 @@ 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";
import TeacherTransactionListView from "../../Components/DashboardPage/Teacher/TeacherTransactionListView";
export default function Dashboard() {
return (
<div style={styles.background}>
<Header label={"Dashboard"} />
<RestrictedComponent allow_only={"Technician"}>
<TechnicianWidgets />
<TechnicianEquipmentButtons />
<TechnicianLogButtons />
</RestrictedComponent>
<RestrictedComponent allow_only={"Student"}>
<div
style={{
...styles.flex_row,
...{
flexWrap: "wrap",
justifyContent: "center",
marginLeft: "16px",
marginRight: "16px",
},
}}
>
<StudentTransactionListView />
<StudentDashboard />
</div>
</RestrictedComponent>
<RestrictedComponent allow_only={"Teacher"}>
<TeacherTransactionListView />
</RestrictedComponent>
<div style={{ position: "relative", zIndex: 999, marginTop: 80 }}>
<RestrictedComponent allow_only={"Technician"}>
<TechnicianWidgets />
<TechnicianNavigation />
</RestrictedComponent>
<RestrictedComponent allow_only={"Student"}>
<div
style={{
...styles.flex_row,
...{
flexWrap: "wrap",
justifyContent: "center",
marginLeft: "16px",
marginRight: "16px",
},
}}
>
<StudentDashboard />
<StudentTransactionListView />
</div>
</RestrictedComponent>
<RestrictedComponent allow_only={"Teacher"}>
<TeacherTransactionListView />
</RestrictedComponent>
</div>
</div>
);
}

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

@ -58,6 +58,7 @@ export default function EquipmentInstanceLogsPage() {
minHeight: "100%",
minWidth: "100%",
flexWrap: "wrap",
marginTop: "2rem",
}}
>
<div style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}>

1
src/Pages/EquipmentInstancesListPage/EquipmentInstancesFilteredListPage.tsx
View file

@ -65,6 +65,7 @@ export default function EquipmentInstancesFilteredListPage() {
minHeight: "100%",
minWidth: "100%",
flexWrap: "wrap",
marginTop: "7rem"
}}
>
<TableContainer

15
src/Pages/EquipmentInstancesListPage/EquipmentInstancesListPage.tsx
View file

@ -17,9 +17,14 @@ import Popup from "reactjs-popup";
import Autocomplete from "@mui/material/Autocomplete";
import SearchIcon from "@mui/icons-material/Search";
export default function EquipmentInstancesListPage() {
const [editmodalOpen, SetEditModalOpen] = useState(false);
const [selectedItem, SetSelectedItem] = useState(0);
const equipment_instances = useQuery({
queryKey: ["equipment_instances"],
queryFn: EquipmentInstancesAPI,
@ -54,6 +59,9 @@ export default function EquipmentInstancesListPage() {
}
return (
<div style={styles.background}>
<Header label={"Items List"} />
<div
style={{
@ -65,8 +73,15 @@ export default function EquipmentInstancesListPage() {
width: "100%",
minHeight: "100%",
minWidth: "100%",
marginTop: "7rem"
}}
>
<div
style={{
...styles.flex_row,

72
src/Pages/EquipmentListPage/EquipmentListPage.tsx
View file

@ -14,10 +14,16 @@ import { colors } from "../../styles";
import EditSKUModal from "../../Components/EditSKUModal/EditSKUModal";
import Popup from "reactjs-popup";
import { useState } from "react";
import NoteAddIcon from "@mui/icons-material/NoteAdd";
import { Button } from "@mui/material";
import AddSKUModal from "../../Components/AddSKUModal/AddSKUModal";
export default function EquipmentListPage() {
const [editmodalOpen, SetEditModalOpen] = useState(false);
const [selectedItem, SetSelectedItem] = useState(0);
const [addSKUmodalOpen, SetAddSKUModalOpen] = useState(false);
const equipments = useQuery({
queryKey: ["equipments"],
queryFn: EquipmentsAPI,
@ -58,13 +64,69 @@ export default function EquipmentListPage() {
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "100%",
height: "80%",
width: "100%",
minHeight: "100%",
minHeight: "80%",
minWidth: "100%",
flexWrap: "wrap",
}}
>
}}>
<div style={{width: "90%", marginTop: "3rem"}}>
<Button
style={{
...styles.flex_column,
...{
alignSelf: "flex-start",
justifyContent: "center",
flexWrap: "wrap",
marginTop: "7rem"
},
}}
onClick={() => {
SetAddSKUModalOpen(true);
}}
>
<NoteAddIcon
style={{
height: 64,
width: 64,
fill: colors.font_dark,
marginLeft: "1rem",
marginRight: "1rem",
}}
/>
<p
style={{
...styles.text_dark,
...styles.text_M,
}}
>
Add SKU
</p>
</Button>
</div>
<Popup
open={addSKUmodalOpen}
onClose={() => SetAddSKUModalOpen(false)}
modal
position={"top center"}
contentStyle={{
width: "32rem",
borderRadius: 16,
borderColor: "grey",
borderStyle: "solid",
borderWidth: 1,
padding: 16,
alignContent: "center",
justifyContent: "center",
textAlign: "center",
}}
>
<AddSKUModal />
</Popup>
<TableContainer
style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}
component={Paper}

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

@ -28,6 +28,7 @@ export default function EquipmentLogsPage() {
alignItems: "center",
justifyContent: "center",
paddingTop: "64px",
marginTop: "7rem"
},
}}
>
@ -58,6 +59,7 @@ export default function EquipmentLogsPage() {
minHeight: "100%",
minWidth: "100%",
flexWrap: "wrap",
marginTop: "6rem"
}}
>
<TableContainer

191
src/Pages/EquipmentTallyPage/EquipmentTallyPage.tsx
View file

@ -54,7 +54,7 @@ export default function EquipmentTallyPage() {
}
return (
<div style={styles.background}>
<Header label={"Items Tally"} />
<Header label={"Equipment Stocks"} />
<div
style={{
...styles.flex_column,
@ -65,81 +65,95 @@ export default function EquipmentTallyPage() {
width: "100%",
minHeight: "100%",
minWidth: "100%",
marginTop: "6rem",
}}
>
<div
style={{
...styles.flex_row,
...{ alignItems: "center", justifySelf: "flex-start" },
}}
>
<SearchIcon
style={{
height: 32,
width: 32,
fill: colors.font_dark,
marginLeft: "1rem",
marginRight: "1rem",
}}
/>
<Autocomplete
sx={{
display: "inline-block",
"& input": {
width: "256x",
bgcolor: "background.paper",
color: (theme) =>
theme.palette.getContrastText(theme.palette.background.paper),
},
}}
value={filter}
onChange={(_event, newValue) => {
setFilter(newValue);
}}
freeSolo
id="custom-input-demo"
options={["Glassware", "Miscellaneous"]}
renderInput={(params) => (
<div ref={params.InputProps.ref}>
<input type="text" {...params.inputProps} />
</div>
)}
/>
<p
style={{
...styles.text_M,
...styles.text_dark,
...{ marginLeft: "4px" },
}}
>
Results Found:{" "}
{
equipment_instances?.data?.filter((equipment) =>
filter !== null
? // If filter is not null, we filter if it matches any criteria
equipment.equipment_name
.toLowerCase()
.includes(filter.toLowerCase()) ||
equipment.category
.toLowerCase()
.includes(filter.toLowerCase()) ||
equipment.last_updated
.toLowerCase()
.includes(filter?.toLowerCase()) ||
equipment.status.toLowerCase() == filter.toLowerCase()
: // If filter keyword is null then we just pass through everything as if we did not filter at all
true
).length
}
</p>
</div>
<div style={{ alignSelf: "flex-start", paddingLeft: "32px" }}></div>
<TableContainer
style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}
component={Paper}
>
<div
style={{
display: "flex",
flexDirection: "row",
}}
>
<div
style={{
...styles.flex_row,
...{ alignItems: "center", justifySelf: "flex-start" },
}}
>
<SearchIcon
style={{
height: 32,
width: 32,
fill: colors.font_dark,
marginLeft: "1rem",
marginRight: "1rem",
}}
/>
<Autocomplete
sx={{
display: "inline-block",
"& input": {
width: "256x",
bgcolor: "background.paper",
color: (theme) =>
theme.palette.getContrastText(
theme.palette.background.paper
),
},
}}
value={filter}
onChange={(_event, newValue) => {
setFilter(newValue);
}}
freeSolo
id="custom-input-demo"
options={["Glassware", "Miscellaneous"]}
renderInput={(params) => (
<div ref={params.InputProps.ref}>
<input type="text" {...params.inputProps} />
</div>
)}
/>
</div>
<div>
<p
style={{
...styles.text_M,
...styles.text_dark,
...{ marginLeft: "4px" },
}}
>
Results Found:{" "}
{
equipment_instances?.data?.filter((equipment) =>
filter !== null
? // If filter is not null, we filter if it matches any criteria
equipment.equipment_name
.toLowerCase()
.includes(filter.toLowerCase()) ||
equipment.category
.toLowerCase()
.includes(filter.toLowerCase()) ||
equipment.last_updated
.toLowerCase()
.includes(filter?.toLowerCase()) ||
equipment.status.toLowerCase() == filter.toLowerCase()
: // If filter keyword is null then we just pass through everything as if we did not filter at all
true
).length
}
</p>
</div>
</div>
<Table sx={{ minWidth: "32rem" }} size="medium">
<TableHead>
<TableRow></TableRow>
<TableRow style={{ backgroundColor: colors.header_color }}>
<TableCell align="center" style={styles.text_light}>
ID
@ -192,7 +206,7 @@ export default function EquipmentTallyPage() {
<TableCell align="center" component="th" scope="row">
<div style={styles.flex_column}>
<p style={{ ...styles.text_dark, ...styles.text_S }}>
Available:
Available: {"\n"}
{
equipment_instances.data?.filter(
(equipment_instance) =>
@ -203,7 +217,7 @@ export default function EquipmentTallyPage() {
}
</p>
<p style={{ ...styles.text_dark, ...styles.text_S }}>
Pending:
Pending: {"\n"}
{
equipment_instances.data?.filter(
(equipment_instance) =>
@ -214,7 +228,24 @@ export default function EquipmentTallyPage() {
}
</p>
<p style={{ ...styles.text_dark, ...styles.text_S }}>
Broken:
Borrowed: {"\n"}
{
equipment_instances.data?.filter(
(equipment_instance) =>
equipment_instance.equipment_name ==
equipment.name &&
equipment_instance.status == "Borrowed"
).length
}
</p>
<p
style={{
...styles.text_dark,
...styles.text_S,
color: colors.red,
}}
>
Broken: {"\n"}
{
equipment_instances.data?.filter(
(equipment_instance) =>
@ -224,6 +255,26 @@ export default function EquipmentTallyPage() {
).length
}
</p>
<div
style={{
borderTop: "1px solid #000",
minWidth: "40%",
alignSelf: "center",
}}
>
<p
style={{ ...styles.text_dark, ...styles.text_s }}
>
Total: {"\n"}
{
equipment_instances.data?.filter(
(equipment_instance) =>
equipment_instance.equipment_name ===
equipment.name
).length
}
</p>
</div>
</div>
</TableCell>
</TableRow>

18
src/Pages/LandingPage/LandingPage.tsx
View file

@ -37,6 +37,7 @@ export default function LandingPage() {
minHeight: "100%",
minWidth: "100%",
flexWrap: "wrap",
backgroundColor: "#F2FAF4"
}}
>
<div style={{ height: "auto", flex: 1, flexWrap: "wrap" }}>
@ -51,19 +52,26 @@ export default function LandingPage() {
>
<div
style={{
minWidth: "30vw",
minWidth: "80%",
borderRadius: 4,
borderColor: "grey",
borderStyle: "solid",
borderWidth: 1,
padding: 16,
margin: 64,
marginLeft: "1.2rem",
paddingBottom: "16vh",
paddingTop: "16vh",
paddingTop: "15vh",
backgroundColor: "white",
boxShadow: "0px 4px 4px 0px rgba(0, 0, 0, 0.25)",
maxWidth: "35vw",
}}
>
<p style={{ ...styles.text_dark, ...styles.text_L }}>
CSM Inventory
Welcome!
</p>
<p style={{ ...styles.text_dark, ...styles.text_M }}>
CSM Borrowing and Inventory
<br />
Monitoring and Management System
</p>

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: "7rem" , 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

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

@ -16,8 +16,10 @@ import { useState } from "react";
import EditTransactionModal from "../../Components/EditTransactionModal/EditTransactionModal";
import EditItemInstanceModal from "../../Components/EditItemInstanceModal/EditItemInstanceModal";
import SearchIcon from "@mui/icons-material/Search";
import { useNavigate } from "react-router-dom";
export default function TransactionsListPage() {
const navigate = useNavigate();
const [EditTransactionOpen, SetEditTransactionOpen] = useState(false);
const [SelectedTransaction, SetSelectedTransaction] = useState(0);
const [EditEquipmentsOpen, SetEditEquipmentsOpen] = useState(false);
@ -68,6 +70,8 @@ export default function TransactionsListPage() {
minHeight: "100%",
minWidth: "100%",
flexWrap: "wrap",
marginTop: 60,
paddingBottom: 20,
},
...styles.flex_column,
}}
@ -143,6 +147,9 @@ export default function TransactionsListPage() {
transaction.teacher.name
.toLowerCase()
.includes(filter.toLowerCase()) ||
transaction.additional_members
.toLowerCase()
.includes(filter.toLowerCase()) ||
transaction.remarks
.toLowerCase()
.includes(filter?.toLowerCase()) ||
@ -175,9 +182,15 @@ export default function TransactionsListPage() {
<TableCell align="center" style={styles.text_light}>
Consumables
</TableCell>
<TableCell align="center" style={styles.text_light}>
Additional Members
</TableCell>
<TableCell align="center" style={styles.text_light}>
Equipments
</TableCell>
<TableCell align="center" style={styles.text_light}>
Actions
</TableCell>
</TableRow>
</TableHead>
<TableBody>
@ -189,6 +202,9 @@ export default function TransactionsListPage() {
transaction.borrower.name
.toLowerCase()
.includes(filter.toLowerCase()) ||
transaction.additional_members
.toLowerCase()
.includes(filter.toLowerCase()) ||
transaction.teacher.name
.toLowerCase()
.includes(filter.toLowerCase()) ||
@ -313,6 +329,28 @@ export default function TransactionsListPage() {
>
{transaction.consumables}
</TableCell>
<TableCell
align="center"
component="th"
scope="row"
style={{ ...styles.text_S }}
sx={{
maxWidth: "64px",
flexWrap: "wrap",
wordWrap: "break-word",
}}
onClick={() => {
if (
transaction.transaction_status != "Finalized" &&
transaction.transaction_status != "Rejected"
) {
SetSelectedTransaction(transaction.id);
SetEditTransactionOpen(true);
}
}}
>
{transaction.additional_members}
</TableCell>
<TableCell align="center">
<p style={{ ...styles.text_M, ...styles.text_dark }}>
Involved Items: {transaction.equipments.length}
@ -403,6 +441,47 @@ export default function TransactionsListPage() {
</Table>
</TableContainer>
</TableCell>
<TableCell
align="center"
component="th"
scope="row"
style={{ ...styles.text_S }}
sx={{
maxWidth: "64px",
flexWrap: "wrap",
wordWrap: "break-word",
}}
>
<button
style={{
borderTop: "2px solid rgba(160, 160, 160, 0.20)",
padding: "7px",
margin: "0px",
backgroundColor: colors.dandelion,
width: "auto",
alignSelf: "center",
borderRadius: "7px",
minWidth: "65px"
}}
onClick={() => {
navigate(`/view/transaction/${transaction.id}`, {
replace: true,
state: { id: transaction.id },
});
}}
>
<p
style={{
...styles.text_S,
padding: "0px",
margin: "0px",
}}
>
Tap To View {"\n"} or Print this slip.
</p>
</button>
</TableCell>
</TableRow>
))
) : (

36
src/assets/Equipment.svg Normal file
View file

@ -0,0 +1,36 @@
<svg width="37" height="37" viewBox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="37" height="37" fill="#1E1E1E"/>
<g id="Dashboard">
<rect width="1440" height="1024" transform="translate(-199 -581)" fill="#F2FAF4"/>
<g id="Body" clip-path="url(#clip0_50_13)">
<rect width="1151" height="919" transform="translate(-199 -581)" fill="#F2FAF4"/>
<g id="Left">
<g id="Buttons">
<g id="Main">
<rect x="-23" y="-23.5" width="799" height="84" rx="11.5" fill="#E8D3BB"/>
<rect x="-23" y="-23.5" width="799" height="84" rx="11.5" stroke="#FFAC92"/>
<g id="Icon">
<g id="Group">
<path id="Vector" d="M10.9742 22.2765C12.8259 22.2765 14.5125 23.3215 15.4659 25.0815C16.0525 26.1632 17.2259 26.8232 18.5092 26.8232C19.7742 26.8232 20.9475 26.1632 21.5342 25.0815C22.4875 23.3215 24.1742 22.2765 26.0259 22.2765H33.3409H36.1092L34.3309 6.03317C33.9825 2.73317 31.1042 0.166504 27.8042 0.166504H9.19587C5.89587 0.166504 3.01754 2.73317 2.6692 6.03317L0.890869 22.2765H3.6592H10.9742ZM23.9909 14.9432L19.4809 19.4715C19.5542 19.3982 19.6092 19.3248 19.6459 19.2515C19.3892 19.6182 18.9675 19.8382 18.5092 19.8382C18.1242 19.8382 17.7942 19.6915 17.5375 19.4532V19.4715L13.0092 14.9432C12.4775 14.4115 12.4775 13.5498 13.0092 12.9998C13.5409 12.4682 14.4209 12.4682 14.9525 12.9998L17.1342 15.1815V7.16984C17.1342 6.39984 17.7392 5.79484 18.5092 5.79484C19.2609 5.79484 19.8842 6.39984 19.8842 7.16984V15.1632L22.0475 12.9998C22.5792 12.4682 23.4592 12.4682 23.9909 12.9998C24.5225 13.5498 24.5225 14.4115 23.9909 14.9432Z" fill="url(#paint0_linear_50_13)"/>
<path id="Vector_2" d="M36.7875 28.473L36.4025 25.0264H33.6341H26.0258C25.2008 25.0264 24.4125 25.5397 23.9541 26.4014C22.8725 28.363 20.7825 29.573 18.5091 29.573C16.2175 29.573 14.1275 28.363 13.0641 26.4014C12.5875 25.5397 11.7991 25.0264 10.9741 25.0264H3.34746H0.597458L0.212457 28.473C-0.0442093 30.838 0.634124 33.1297 2.08246 34.7247C3.29246 36.0814 4.94246 36.833 6.72079 36.833H30.2791C32.0575 36.833 33.7075 36.0814 34.9175 34.7247C36.3658 33.1297 37.0441 30.838 36.7875 28.473Z" fill="url(#paint1_linear_50_13)"/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<defs>
<linearGradient id="paint0_linear_50_13" x1="18.5" y1="0.166504" x2="18.5" y2="26.8232" gradientUnits="userSpaceOnUse">
<stop stop-color="#CB9C65"/>
<stop offset="1" stop-color="#693A03"/>
</linearGradient>
<linearGradient id="paint1_linear_50_13" x1="18.5" y1="25.0264" x2="18.5" y2="36.833" gradientUnits="userSpaceOnUse">
<stop stop-color="#CB9C65"/>
<stop offset="1" stop-color="#693A03"/>
</linearGradient>
<clipPath id="clip0_50_13">
<rect width="1151" height="919" fill="white" transform="translate(-199 -581)"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
src/assets/Profile-Icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 783 B

9
src/assets/Transaction.svg Normal file
View file

@ -0,0 +1,9 @@
<svg width="37" height="45" viewBox="0 0 37 45" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Vector" d="M30.1524 0.5H6.84758C3.35639 0.5 0.5 3.24998 0.5 6.65998V38.318C0.5 41.728 3.35639 44.5 6.84758 44.5H30.1524C33.6663 44.5 36.5 41.728 36.5 38.318V6.65998C36.5 3.24998 33.6663 0.5 30.1524 0.5ZM9.18266 32.246H27.8173C28.7695 32.246 29.5176 32.994 29.5176 33.896C29.5176 34.798 28.7695 35.546 27.8173 35.546H9.18266C8.25319 35.546 7.4824 34.798 7.4824 33.896C7.4824 32.994 8.25319 32.246 9.18266 32.246ZM7.4824 22.588C7.4824 21.686 8.25319 20.938 9.18266 20.938H27.8173C28.7695 20.938 29.5176 21.686 29.5176 22.588C29.5176 23.512 28.7695 24.238 27.8173 24.238H9.18266C8.25319 24.238 7.4824 23.512 7.4824 22.588ZM27.8173 12.93H9.18266C8.25319 12.93 7.4824 12.204 7.4824 11.28C7.4824 10.378 8.25319 9.62999 9.18266 9.62999H27.8173C28.7695 9.62999 29.5176 10.378 29.5176 11.28C29.5176 12.204 28.7695 12.93 27.8173 12.93Z" fill="url(#paint0_linear_121_218)"/>
<defs>
<linearGradient id="paint0_linear_121_218" x1="18.5" y1="0.499999" x2="31" y2="40" gradientUnits="userSpaceOnUse">
<stop stop-color="#417BBE"/>
<stop offset="1" stop-color="#3A389F"/>
</linearGradient>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/assets/ustp-logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 50 KiB

52
src/index.css
View file

@ -14,6 +14,21 @@
-webkit-text-size-adjust: 100%;
}
/* width */
::-webkit-scrollbar {
width: 5px;
}
/* Track */
::-webkit-scrollbar-track {
background: none;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
a {
font-weight: 500;
color: #646cff;
@ -67,3 +82,40 @@ button:focus-visible {
background-color: #f9f9f9;
}
}
.custom-scrollbar {
overflow-y: scroll;
max-height: 800px;
scrollbar-width: thin; /* For Firefox */
-webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */
-ms-overflow-style: none; /* For IE */
scrollbar-color: transparent transparent; /* For WebKit */
}
.custom-scrollbar::-webkit-scrollbar {
width: 6px; /* Adjust the width as needed */
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background-color: #c4c4c4; /* Color of the thumb */
border-radius: 3px; /* Rounded corners of the thumb */
}
.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;
}

68
src/styles.tsx
View file

@ -1,5 +1,5 @@
export const colors = {
background: "#FFFFFF",
background: "#F2FAF4",
header_color: "#b2dfab",
font_dark: "#2e482e",
font_light: "#0e410d",
@ -9,6 +9,23 @@ export const colors = {
red: "#a44141",
orange: "#c57331",
green: "#80b28a",
gray: "#8F8F8F",
dark_green: "#17561D",
dark_blue: "#19639D",
font_dark_red: "#570404",
dandelion: "#FBB217",
lightgreen: "#D9FFD8",
darkgreen: "#00360C",
lightorange: "#FEFFCD",
lightred: "#ECC4B8",
form_dark: "#000000",
form_title: "#1E1A4D"
};
const styles: { [key: string]: React.CSSProperties } = {
background: {
@ -16,19 +33,46 @@ const styles: { [key: string]: React.CSSProperties } = {
position: "fixed",
top: 0,
left: 0,
height: "100%",
width: "100%",
minHeight: "100%",
minWidth: "100%",
overflowY: "scroll",
},
text_normal: {
color: colors.font_dark,
fontWeight: "500",
},
text_dark_red: {
color: colors.font_dark_red,
fontWeight: "bold",
},
text_dark: {
color: colors.font_dark,
fontWeight: "bold",
},
text_super_dark: {
color: colors.font_dark,
fontWeight: 900,
},
text_light: {
color: colors.font_light,
fontWeight: "bold",
},
text_dark_blue:{
color:colors.dark_blue,
fontWeight:"bold"
},
text_gray: {
color: colors.gray,
},
text_red: {
color: colors.red,
@ -42,9 +86,16 @@ const styles: { [key: string]: React.CSSProperties } = {
color: colors.green,
fontWeight: "bold",
},
text_dark_green: {
color: colors.dark_green,
fontWeight: "bold",
},
text_XL: {
fontSize: "clamp(2rem, 3rem, 8rem)",
},
text_L: {
fontSize: "clamp(1.5rem, 2rem, 6rem)",
},
@ -94,6 +145,21 @@ const styles: { [key: string]: React.CSSProperties } = {
marginLeft: "1rem",
marginRight: "1rem",
},
bform_label: {
display: "flex",
justifyContent: "left",
marginTop: "10px",
},
bform_label2: {
display: "flex",
justifyContent: "left",
marginTop: "10px",
marginBottom: "10px",
},
};
export default styles;