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

Merge branch 'feature/additional_styles' of https://git.keannu1.duckdns.org/keannu125/Borrowing-TrackerFrontend into feature/additional_styles

Browse source
This commit is contained in:
Prince Kurt Laurence 2024-01-10 12:51:57 +08:00
commit 30ee5c54bc
11 changed files with 359 additions and 272 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -76,7 +76,8 @@ export default function StudentTransactionListView() {
padding: "7px",
margin: "0px",
backgroundColor: colors.header_color,
width: 550,
width: "100%",
maxWidth: 550,
alignSelf: "center",
borderRadius: "0px 0px 7px 7px",

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

@ -77,7 +77,8 @@ export default function TeacherTransactionListView() {
padding: "7px",
margin: "0px",
backgroundColor: colors.header_color,
width: 550,
width: "100%",
maxWidth: 550,
alignSelf: "center",
borderRadius: "0px 0px 7px 7px",

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

@ -8,7 +8,6 @@ import NoteIcon from "@mui/icons-material/Note";
import { colors } from "../../../styles";
import ScienceIcon from "@mui/icons-material/Science";
import ColorizeIcon from "@mui/icons-material/Colorize";
import ArticleIcon from '@mui/icons-material/Article';
import Popup from "reactjs-popup";
import AddItemModal from "../../AddItemModal/AddItemModal";
import AddSKUModal from "../../AddSKUModal/AddSKUModal";
@ -98,7 +97,7 @@ export default function TechnicianEquipmentButtons() {
>
Add Item
</p>
</Button>
</Button>
<Button
style={{
...styles.flex_column,
@ -129,7 +128,7 @@ export default function TechnicianEquipmentButtons() {
>
Add SKU
</p>
</Button>
</Button>
<Button
style={{
...styles.flex_column,
@ -161,7 +160,6 @@ export default function TechnicianEquipmentButtons() {
View SKUs
</p>
</Button>
</div>
<div
style={{
@ -173,38 +171,7 @@ export default function TechnicianEquipmentButtons() {
},
}}
>
<Button
style={{
...styles.flex_column,
...{
alignSelf: "center",
justifyContent: "center",
flexWrap: "wrap",
},
}}
>
<ArticleIcon
style={{
height: 64,
width: 64,
fill: colors.font_dark,
marginLeft: "1rem",
marginRight: "1rem",
}}
onClick={() => {
navigate("/view/transactions");
}}
/>
<p
style={{
...styles.text_dark,
...styles.text_M,
}}
>
Transactions
</p>
</Button>
<Button
<Button
style={{
...styles.flex_column,
...{
@ -265,7 +232,7 @@ export default function TechnicianEquipmentButtons() {
>
Miscellaneous
</p>
</Button>
</Button>
</div>
<Popup
open={addSKUmodalOpen}
@ -285,8 +252,8 @@ export default function TechnicianEquipmentButtons() {
}}
>
<AddSKUModal />
</Popup>
<Popup
</Popup>
<Popup
open={additemmodalOpen}
onClose={() => SetAddItemModalOpen(false)}
modal

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

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

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

@ -52,16 +52,7 @@ export default function TransactionPDF(props: props) {
/>
<View style={{ alignItems: "center" }}>
<Text
style={{
color: colors.form_dark,
fontSize: 11,
textAlign: "center",
margin: "2 5 2 5",
}}
>
Department of Chemistry (Laboratory)
</Text>
<Text
style={{
color: colors.form_dark,
@ -72,8 +63,10 @@ export default function TransactionPDF(props: props) {
>
University of Science and Technology of Southern Philippines{" "}
{"\n"}
Lapasan Cagayan de Oro City {"\n"}
Lapasan, Cagayan de Oro City {"\n"}
College of Science and Mathematics
</Text>
<Text
style={{
color: colors.form_dark,
@ -81,7 +74,7 @@ export default function TransactionPDF(props: props) {
padding: "5 0 5 0",
}}
>
BORROWER'S SLIP
<Text style={{ fontFamily: 'Helvetica-Bold' }}> BORROWER'S SLIP </Text>
</Text>
</View>
</View>

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

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

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

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

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

@ -73,7 +73,7 @@ export default function EquipmentInstancesListPage() {
width: "100%",
minHeight: "100%",
minWidth: "100%",
marginTop: "100px"
marginTop: "7rem"
}}
>

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

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

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

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

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

@ -186,7 +186,7 @@ export default function TransactionsListPage() {
Additional Members
</TableCell>
<TableCell align="center" style={styles.text_light}>
Additional Members
Equipments
</TableCell>
<TableCell align="center" style={styles.text_light}>
Actions
@ -461,6 +461,7 @@ export default function TransactionsListPage() {
width: "auto",
alignSelf: "center",
borderRadius: "7px",
minWidth: "65px"
}}
onClick={() => {
navigate(`/view/transaction/${transaction.id}`, {
@ -477,7 +478,7 @@ export default function TransactionsListPage() {
}}
>
Tap To View {"\n"} or Print
Tap To View {"\n"} or Print this slip.
</p>
</button>
</TableCell>