mirror of
https://github.com/lemeow125/Borrowing-TrackerFrontend.git
synced 2024-11-17 06:19:27 +08:00
Merge pull request 'feature/additional_styles' (#5) from feature/additional_styles into master
Reviewed-on: https://git.keannu1.duckdns.org/keannu125/Borrowing-TrackerFrontend/pulls/5
This commit is contained in:
commit
06d019323c
35 changed files with 2343 additions and 1118 deletions
12
src/App.tsx
12
src/App.tsx
|
|
@ -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: (
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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)}
|
||||
|
|
|
|||
|
|
@ -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={{
|
||||
|
|
@ -182,37 +180,6 @@ export default function TechnicianEquipmentButtons() {
|
|||
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,
|
||||
...{
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ScienceIcon
|
||||
style={{
|
||||
|
|
|
|||
|
|
@ -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
125
src/Components/DashboardPage/Technician/TechnicianNavigation.tsx
Normal 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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -47,173 +47,69 @@ 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",
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
...{ float: "left", position: "absolute" },
|
||||
}}
|
||||
>
|
||||
Equipments in Inventory
|
||||
</p>
|
||||
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_L,
|
||||
}}
|
||||
>
|
||||
{queries[1].data?.length || "Loading..."}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
...styles.flex_row,
|
||||
...{
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
background: "#DDEDF3",
|
||||
margin: 30,
|
||||
paddingTop: 50,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
paddingLeft: "16px",
|
||||
paddingRight: "16px",
|
||||
margin: "16px",
|
||||
borderRadius: 16,
|
||||
backgroundColor: "#a6a6a6",
|
||||
alignSelf: "center",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
width: "16rem",
|
||||
alignItems: "center",
|
||||
gap: "15px",
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
...{ float: "left", position: "absolute" },
|
||||
}}
|
||||
>
|
||||
Available Equipments
|
||||
</p>
|
||||
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_L,
|
||||
}}
|
||||
>
|
||||
{queries[1].data?.filter(
|
||||
(equipment) => equipment.status == "Available"
|
||||
).length || "Loading..."}
|
||||
</p>
|
||||
</div>
|
||||
{/* Transactions all */}
|
||||
<div
|
||||
style={{
|
||||
paddingLeft: "16px",
|
||||
paddingRight: "16px",
|
||||
margin: "16px",
|
||||
borderRadius: 16,
|
||||
backgroundColor: "#a6a6a6",
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
width: "16rem",
|
||||
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_M,
|
||||
...{ float: "left", position: "absolute" },
|
||||
}}
|
||||
>
|
||||
Broken Equipments
|
||||
</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" },
|
||||
...styles.text_normal,
|
||||
fontWeight: "400",
|
||||
}}
|
||||
>
|
||||
Total Transactions Today
|
||||
|
|
@ -223,6 +119,7 @@ export default function TechnicianWidgets() {
|
|||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_L,
|
||||
margin: 0,
|
||||
}}
|
||||
>
|
||||
{queries[3].data?.filter((transaction) =>
|
||||
|
|
@ -230,26 +127,13 @@ export default function TechnicianWidgets() {
|
|||
todayStartOfDay,
|
||||
todayEndOfDay
|
||||
)
|
||||
).length || "Loading..."}
|
||||
).length || "0"}
|
||||
</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" },
|
||||
...styles.text_normal,
|
||||
fontWeight: "400",
|
||||
}}
|
||||
>
|
||||
Total Transactions this Month
|
||||
|
|
@ -259,6 +143,7 @@ export default function TechnicianWidgets() {
|
|||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_L,
|
||||
margin: 0,
|
||||
}}
|
||||
>
|
||||
{queries[3].data?.filter((transaction) =>
|
||||
|
|
@ -269,6 +154,299 @@ export default function TechnicianWidgets() {
|
|||
).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={{
|
||||
margin: "0",
|
||||
fontWeight: 700,
|
||||
...styles.text_normal,
|
||||
}}
|
||||
>
|
||||
Borrowing Transaction
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Yellow Capsule */}
|
||||
<div
|
||||
className="capsule"
|
||||
style={{
|
||||
background: "#FCF2E7",
|
||||
paddingTop: 50,
|
||||
margin: 30,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
gap: "15px",
|
||||
}}
|
||||
>
|
||||
{/* 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_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_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_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={{
|
||||
margin: "0",
|
||||
fontWeight: 700,
|
||||
...styles.text_normal,
|
||||
}}
|
||||
>
|
||||
Equipment Tracking
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
|
|
|||
|
|
@ -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,13 +129,12 @@ export default function LoginModal() {
|
|||
backgroundColor: colors.button_border,
|
||||
width: "100%",
|
||||
height: "2px",
|
||||
marginBottom: 8,
|
||||
marginBottom: "40px"
|
||||
}}
|
||||
/>
|
||||
<p style={{ ...styles.text_dark, ...styles.text_S }}>{error}</p>
|
||||
<Button
|
||||
type={"dark"}
|
||||
label={"Login"}
|
||||
|
||||
<div style={{ margin: "10px", }}>
|
||||
<button
|
||||
onClick={async () => {
|
||||
const status = await LoginAPI(user, remember_session);
|
||||
if (status === true) {
|
||||
|
|
@ -139,7 +154,20 @@ export default function LoginModal() {
|
|||
setError("Invalid login");
|
||||
}
|
||||
}}
|
||||
/>
|
||||
style={{
|
||||
display: "flex",
|
||||
padding: "25px 38px",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
background: "#FBB217",
|
||||
height: "40px",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
Login
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,27 +32,61 @@ export default function RegisterModal() {
|
|||
const [error, setError] = useState("");
|
||||
return (
|
||||
<>
|
||||
<div className="custom-scrollbar">
|
||||
<div
|
||||
style={{
|
||||
...styles.flex_row,
|
||||
...styles.flex_column,
|
||||
...{
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
overflowY: "scroll",
|
||||
overflow: "auto",
|
||||
scrollbarWidth: "thin",
|
||||
WebkitOverflowScrolling: "touch",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<AppRegistration
|
||||
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 }}>Get Started</p>
|
||||
|
||||
<p
|
||||
style={{
|
||||
...styles.text_normal,
|
||||
fontSize: 24,
|
||||
margin: "0",
|
||||
marginTop: 15,
|
||||
}}
|
||||
>
|
||||
Create an Account
|
||||
</p>
|
||||
<p style={{ ...styles.text_normal, fontSize: 16, margin: "10" }}>
|
||||
Enter required fields
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div style={styles.flex_column}>
|
||||
<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"
|
||||
|
|
@ -86,6 +118,7 @@ export default function RegisterModal() {
|
|||
value={user.email}
|
||||
placeholder={"Enter your email"}
|
||||
/>
|
||||
|
||||
<FormControl style={{ marginTop: "8px" }}>
|
||||
<FormLabel style={styles.text_dark} id="status-selection">
|
||||
Course
|
||||
|
|
@ -194,19 +227,18 @@ export default function RegisterModal() {
|
|||
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,
|
||||
margin: "20px",
|
||||
marginBottom: "40px",
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
type={"dark"}
|
||||
label={"Register"}
|
||||
|
||||
<div style={{ margin: "10px" }}>
|
||||
<button
|
||||
onClick={async () => {
|
||||
if (user.password !== user.confirm_password) {
|
||||
setError("Passwords do not match");
|
||||
|
|
@ -243,7 +275,20 @@ export default function RegisterModal() {
|
|||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
style={{
|
||||
display: "flex",
|
||||
padding: "25px 38px",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
background: "#FBB217",
|
||||
height: "40px",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
Register
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,162 +1,73 @@
|
|||
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={{
|
||||
...styles.text_dark,
|
||||
...styles.text_S,
|
||||
...{ textAlign: "right", flex: 2 },
|
||||
width: "9px",
|
||||
height: "8px",
|
||||
color: StatusTextColor(props.transaction.transaction_status),
|
||||
marginRight: "9px"
|
||||
|
||||
}}
|
||||
>
|
||||
{props.transaction.timestamp}
|
||||
</p>
|
||||
</div>
|
||||
<div style={styles.flex_row}>
|
||||
<div style={{ flex: 1 }}>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_S,
|
||||
...{ textAlign: "left", margin: 0, wordWrap: "break-word" },
|
||||
}}
|
||||
>
|
||||
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}
|
||||
</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,
|
||||
|
|
@ -170,6 +81,36 @@ export default function TransactionEntry(props: props) {
|
|||
>
|
||||
{`${props.transaction.transaction_status}`}
|
||||
</p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div style={{
|
||||
flex:1,
|
||||
marginTop: "3px",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
|
||||
<p
|
||||
style={{
|
||||
...styles.text_gray,
|
||||
...styles.text_S,
|
||||
...{ textAlign: "left", flex: 2 },
|
||||
fontStyle: "italic"
|
||||
}}
|
||||
>
|
||||
{props.transaction.timestamp}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
{/* //GIWALA */}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,159 +1,346 @@
|
|||
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",
|
||||
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,
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<View
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: "512px",
|
||||
backgroundColor: colors.header_color,
|
||||
alignSelf: "stretch",
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src={ustplogo}
|
||||
style={{
|
||||
width: 60,
|
||||
height: 60,
|
||||
position: "absolute",
|
||||
left: 10,
|
||||
top: 0,
|
||||
}}
|
||||
/>
|
||||
|
||||
<View style={{ alignItems: "center" }}>
|
||||
|
||||
<Text
|
||||
style={{
|
||||
color: colors.form_dark,
|
||||
fontSize: 10,
|
||||
textAlign: "center",
|
||||
padding: "5 0 5 0",
|
||||
}}
|
||||
>
|
||||
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.form_dark,
|
||||
fontSize: 11,
|
||||
padding: "5 0 5 0",
|
||||
}}
|
||||
>
|
||||
<Text style={{ fontFamily: 'Helvetica-Bold' }}> BORROWER'S SLIP </Text>
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Status */}
|
||||
<View
|
||||
style={{
|
||||
alignSelf: "stretch",
|
||||
alignContent: "center",
|
||||
justifyContent: "center",
|
||||
backgroundColor: StatusBGColor(
|
||||
props.transaction.transaction_status
|
||||
),
|
||||
borderRadius: 16,
|
||||
margin: "8px",
|
||||
padding: "8px",
|
||||
}}
|
||||
>
|
||||
<View style={{ display: "flex", flexDirection: "row" }}>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.font_dark,
|
||||
fontSize: 16,
|
||||
textAlign: "left",
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
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 }}>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.font_dark,
|
||||
fontSize: 16,
|
||||
textAlign: "left",
|
||||
margin: 0,
|
||||
}}
|
||||
>
|
||||
Borrower: {props.transaction?.borrower.name}{" "}
|
||||
{`(ID:${props.transaction?.borrower.id})`}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.font_dark,
|
||||
fontSize: 16,
|
||||
textAlign: "left",
|
||||
margin: 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>
|
||||
</View>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.font_dark,
|
||||
color: StatusTextColor(props.transaction.transaction_status),
|
||||
textAlign: "right",
|
||||
fontSize: 16,
|
||||
margin: 0,
|
||||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
Equipments:
|
||||
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.font_dark,
|
||||
textAlign: "right",
|
||||
fontSize: 12,
|
||||
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={{ 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>
|
||||
|
||||
{/* Equipment Section */}
|
||||
<View
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: 5,
|
||||
alignSelf: "stretch",
|
||||
marginTop: "10"
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.form_title,
|
||||
borderBottom: "1px solid #A2A2A2",
|
||||
}}
|
||||
>
|
||||
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>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View style={{ alignContent: "center", justifyContent: "center" }}>
|
||||
{/* total Equipment */}
|
||||
<View style={{ borderTop: "1px", marginTop: 5, width: "150px" }}>
|
||||
<Text
|
||||
style={{
|
||||
color: StatusTextColor(
|
||||
props.transaction?.transaction_status || "Pending"
|
||||
),
|
||||
textAlign: "center",
|
||||
fontSize: 16,
|
||||
color: colors.form_dark,
|
||||
textAlign: "left",
|
||||
fontSize: 14,
|
||||
margin: 0,
|
||||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
{`${props.transaction?.transaction_status}`}
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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,68 +19,172 @@ 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,
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src={ustplogo}
|
||||
style={{
|
||||
width: 70,
|
||||
height: 70,
|
||||
position: "absolute",
|
||||
left: "45",
|
||||
top: "",
|
||||
}}
|
||||
/>
|
||||
|
||||
<View
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "auto",
|
||||
position: "absolute",
|
||||
right: "30",
|
||||
top: "35",
|
||||
}}
|
||||
>
|
||||
<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.form_dark,
|
||||
fontSize: 13,
|
||||
padding: "5 0 5 0",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
<Text style={{ fontFamily: "Helvetica-Bold" }}>
|
||||
LABORATORY REPORTS
|
||||
</Text>
|
||||
</Text>
|
||||
|
||||
<View
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
alignSelf: "center",
|
||||
width: "85%",
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
display: "flex",
|
||||
padding: "0px 12px",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
gap: "10px",
|
||||
alignSelf: "stretch",
|
||||
border: "1px solid #000",
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.font_dark,
|
||||
fontSize: 16,
|
||||
fontFamily: "Helvetica-Bold",
|
||||
color: colors.form_dark,
|
||||
fontSize: 13,
|
||||
padding: "5 0 5 0",
|
||||
}}
|
||||
>
|
||||
Transaction
|
||||
</Text>
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
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",
|
||||
}}
|
||||
>
|
||||
<Text style={{ fontSize: 13 }}>Daily Transaction Report</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 13,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Total Equipments Processed:{" "}
|
||||
{" "}
|
||||
• Total Equipments Processed:{" "}
|
||||
{count_transaction_equipments(transactions_today)}
|
||||
</Text>
|
||||
|
||||
<Text
|
||||
style={{
|
||||
color: colors.font_dark,
|
||||
fontSize: 16,
|
||||
fontSize: 13,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Total Transactions: {transactions_today.length}
|
||||
{" "}
|
||||
• Total Transactions: {transactions_today.length}
|
||||
</Text>
|
||||
|
||||
<Text
|
||||
style={{
|
||||
color: colors.font_dark,
|
||||
fontSize: 16,
|
||||
fontSize: 13,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Rejected Transactions:{" "}
|
||||
{" "}
|
||||
• Rejected Transactions:{" "}
|
||||
{
|
||||
transactions_today.filter(
|
||||
(transaction) => transaction.transaction_status == "Rejected"
|
||||
).length
|
||||
}
|
||||
</Text>
|
||||
|
||||
<Text
|
||||
style={{
|
||||
color: colors.font_dark,
|
||||
fontSize: 16,
|
||||
fontSize: 13,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Finalized Transactions:{" "}
|
||||
{" "}
|
||||
• Finalized Transactions:{" "}
|
||||
{
|
||||
transactions_today.filter(
|
||||
(transaction) => transaction.transaction_status == "Finalized"
|
||||
|
|
@ -87,68 +192,65 @@ export default function TransactionReportPDF(props: props) {
|
|||
}
|
||||
</Text>
|
||||
</View>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.font_dark,
|
||||
fontSize: 16,
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
Monthly Transaction Report
|
||||
</Text>
|
||||
<View
|
||||
style={{
|
||||
alignSelf: "center",
|
||||
display: "flex",
|
||||
padding: "5px 12px",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
width: "512px",
|
||||
backgroundColor: colors.header_color,
|
||||
borderRadius: 16,
|
||||
margin: "8px",
|
||||
padding: "8px",
|
||||
alignItems: "flex-start",
|
||||
gap: "10px",
|
||||
alignSelf: "stretch",
|
||||
borderRight: "1px solid #000",
|
||||
borderBottom: "1px solid #000",
|
||||
borderLeft: "1px solid #000",
|
||||
}}
|
||||
>
|
||||
<Text style={{ fontSize: 13 }}>Monthly Transaction Report</Text>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.font_dark,
|
||||
fontSize: 16,
|
||||
fontSize: 13,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Total Equipments Processed:{" "}
|
||||
{" "}
|
||||
• Total Equipments Processed:{" "}
|
||||
{count_transaction_equipments(transactions_thismonth)}
|
||||
</Text>
|
||||
|
||||
<Text
|
||||
style={{
|
||||
color: colors.font_dark,
|
||||
fontSize: 16,
|
||||
fontSize: 13,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Total Transactions: {transactions_thismonth.length}
|
||||
{" "}
|
||||
• Total Transactions: {transactions_thismonth.length}
|
||||
</Text>
|
||||
|
||||
<Text
|
||||
style={{
|
||||
color: colors.font_dark,
|
||||
fontSize: 16,
|
||||
fontSize: 13,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Rejected Transactions:{" "}
|
||||
{" "}
|
||||
• Rejected Transactions:{" "}
|
||||
{
|
||||
transactions_thismonth.filter(
|
||||
(transaction) => transaction.transaction_status == "Rejected"
|
||||
).length
|
||||
}
|
||||
</Text>
|
||||
|
||||
<Text
|
||||
style={{
|
||||
color: colors.font_dark,
|
||||
fontSize: 16,
|
||||
fontSize: 13,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Finalized Transactions:{" "}
|
||||
{" "}
|
||||
• Finalized Transactions:{" "}
|
||||
{
|
||||
transactions_thismonth.filter(
|
||||
(transaction) => transaction.transaction_status == "Finalized"
|
||||
|
|
@ -156,6 +258,7 @@ export default function TransactionReportPDF(props: props) {
|
|||
}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</Page>
|
||||
</Document>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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 = {
|
||||
|
|
|
|||
|
|
@ -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,15 +207,35 @@ 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" }}>
|
||||
<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,
|
||||
...{ marginLeft: "4px", marginBottom: "8px", textAlign: "left" },
|
||||
...{ ...styles.text_dark, ...styles.bform_label2 },
|
||||
...{
|
||||
marginLeft: "4px",
|
||||
marginBottom: "8px",
|
||||
textAlign: "left",
|
||||
},
|
||||
}}
|
||||
>
|
||||
Items Requested
|
||||
|
|
@ -162,6 +267,29 @@ export default function AddTransactionPage() {
|
|||
)}
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
padding: "4px 15px",
|
||||
alignItems: "center",
|
||||
borderRadius: "14px",
|
||||
background: "#D1FF97",
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,19 +2,18 @@ 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"} />
|
||||
<div style={{ position: "relative", zIndex: 999, marginTop: 80 }}>
|
||||
<RestrictedComponent allow_only={"Technician"}>
|
||||
<TechnicianWidgets />
|
||||
<TechnicianEquipmentButtons />
|
||||
<TechnicianLogButtons />
|
||||
<TechnicianNavigation />
|
||||
</RestrictedComponent>
|
||||
<RestrictedComponent allow_only={"Student"}>
|
||||
<div
|
||||
|
|
@ -28,13 +27,15 @@ export default function Dashboard() {
|
|||
},
|
||||
}}
|
||||
>
|
||||
<StudentTransactionListView />
|
||||
<StudentDashboard />
|
||||
<StudentTransactionListView />
|
||||
|
||||
</div>
|
||||
</RestrictedComponent>
|
||||
<RestrictedComponent allow_only={"Teacher"}>
|
||||
<TeacherTransactionListView />
|
||||
</RestrictedComponent>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -58,6 +58,7 @@ export default function EquipmentInstanceLogsPage() {
|
|||
minHeight: "100%",
|
||||
minWidth: "100%",
|
||||
flexWrap: "wrap",
|
||||
marginTop: "2rem",
|
||||
}}
|
||||
>
|
||||
<div style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}>
|
||||
|
|
|
|||
|
|
@ -65,6 +65,7 @@ export default function EquipmentInstancesFilteredListPage() {
|
|||
minHeight: "100%",
|
||||
minWidth: "100%",
|
||||
flexWrap: "wrap",
|
||||
marginTop: "7rem"
|
||||
}}
|
||||
>
|
||||
<TableContainer
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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%",
|
||||
}}>
|
||||
|
||||
<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}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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,6 +65,19 @@ export default function EquipmentTallyPage() {
|
|||
width: "100%",
|
||||
minHeight: "100%",
|
||||
minWidth: "100%",
|
||||
marginTop: "6rem",
|
||||
}}
|
||||
>
|
||||
|
||||
<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
|
||||
|
|
@ -89,7 +102,9 @@ export default function EquipmentTallyPage() {
|
|||
width: "256x",
|
||||
bgcolor: "background.paper",
|
||||
color: (theme) =>
|
||||
theme.palette.getContrastText(theme.palette.background.paper),
|
||||
theme.palette.getContrastText(
|
||||
theme.palette.background.paper
|
||||
),
|
||||
},
|
||||
}}
|
||||
value={filter}
|
||||
|
|
@ -105,6 +120,8 @@ export default function EquipmentTallyPage() {
|
|||
</div>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_M,
|
||||
|
|
@ -133,13 +150,10 @@ export default function EquipmentTallyPage() {
|
|||
}
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ alignSelf: "flex-start", paddingLeft: "32px" }}></div>
|
||||
<TableContainer
|
||||
style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}
|
||||
component={Paper}
|
||||
>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -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
20
src/Pages/ManageEquipmentPage/ManageEquipmentPage.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
|
|
@ -53,6 +53,7 @@ export default function TransactionPage() {
|
|||
alignContent: "center",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
marginTop: 64
|
||||
}}
|
||||
>
|
||||
<PDFDownloadLink
|
||||
|
|
|
|||
|
|
@ -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
36
src/assets/Equipment.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
BIN
src/assets/Profile-Icon.png
Normal file
BIN
src/assets/Profile-Icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 783 B |
9
src/assets/Transaction.svg
Normal file
9
src/assets/Transaction.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/assets/ustp-logo.png
Normal file
BIN
src/assets/ustp-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue