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/student_pages' of https://git.keannu1.duckdns.org/keannu125/Borrowing-TrackerFrontend into feature/student_pages

Browse source
This commit is contained in:
Prince Kurt Laurence 2023-12-27 18:59:10 +08:00
commit 80423a79fd
16 changed files with 1085 additions and 271 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/App.tsx
View file

@ -18,6 +18,7 @@ import EquipmentInstanceLogsPage from "./Pages/EquipmentInstanceLogsPage/Equipme
import EquipmentInstancesFilteredListPage from "./Pages/EquipmentInstancesListPage/EquipmentInstancesFilteredListPage";
import RestrictedPage from "./Components/RestrictedPage/RestrictedPage";
import TransactionsListPage from "./Pages/TransactionsListPage/TransactionsListPage";
import AddTransactionPage from "./Pages/AddTransactionPage/AddTransactionPage";
const queryClient = new QueryClient();
const router = createHashRouter([
@ -125,6 +126,17 @@ const router = createHashRouter([
),
errorElement: <ErrorPage />,
},
{
path: "/new/transaction",
element: (
<>
<Revalidator />
<RestrictedPage allow_only="Student" />
<AddTransactionPage />
</>
),
errorElement: <ErrorPage />,
},
]);
export default function App() {

74
src/Components/API/API.tsx
View file

@ -19,6 +19,8 @@ import {
TransactionListType,
TransactionUpdateType,
TransactionType,
ClearanceType,
TransactionCreateType,
} from "../Types/Types";
const debug = true;
@ -184,6 +186,29 @@ export function ResetPasswordConfirmAPI(info: ResetPasswordConfirmType) {
});
}
export async function ClearanceAPI() {
const config = await GetConfig();
return instance
.get("api/v1/accounts/clearance/", config)
.then((response) => {
return response.data as ClearanceType;
})
.catch(() => {
console.log("Error retrieving clearance status for user");
});
}
export async function TeachersAPI() {
const config = await GetConfig();
return instance
.get("api/v1/accounts/teachers/", config)
.then((response) => {
return response.data as Array<UserType>;
})
.catch(() => {
console.log("Error retrieving teachers");
});
}
// Equipment APIs
export async function EquipmentAPI(id: number) {
@ -330,6 +355,18 @@ export async function EquipmentInstancesAPI() {
});
}
export async function AvailableEquipmentInstancesAPI() {
const config = await GetConfig();
return instance
.get("api/v1/equipments/equipment_instances/available", config)
.then((response) => {
return response.data as EquipmentInstanceListType;
})
.catch(() => {
console.log("Error retrieving available equipments");
});
}
export async function EquipmentInstanceCreateAPI(
equipment_instance: AddEquipmentInstanceType
) {
@ -371,6 +408,19 @@ export async function TransactionAPI(id: number) {
});
}
export async function TransactionCreateAPI(transaction: TransactionCreateType) {
const config = await GetConfig();
return instance
.post(`api/v1/transactions/`, transaction, config)
.then((response) => {
return [true, response.data as TransactionType];
})
.catch((error) => {
console.log("Error creating transaction");
return [false, ParseError(error)];
});
}
export async function TransactionUpdateAPI(
transaction: TransactionUpdateType,
id: number
@ -386,3 +436,27 @@ export async function TransactionUpdateAPI(
return [false, ParseError(error)];
});
}
export async function TransactionsByStudentAPI() {
const config = await GetConfig();
return instance
.get("api/v1/transactions/student/", config)
.then((response) => {
return response.data as TransactionListType;
})
.catch(() => {
console.log("Error retrieving transactions for current student");
});
}
export async function TransactionsByTeacherAPI() {
const config = await GetConfig();
return instance
.get("api/v1/transactions/teacher/", config)
.then((response) => {
return response.data as TransactionListType;
})
.catch(() => {
console.log("Error retrieving transactions for current teacher");
});
}

62
src/Components/DashboardPage/Student/StudentDashboard.tsx Normal file
View file

@ -0,0 +1,62 @@
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,
...{
alignSelf: "center",
justifyContent: "center",
flexWrap: "wrap",
},
}}
>
<Button
style={{
...styles.flex_column,
...{
alignSelf: "center",
justifyContent: "center",
flexWrap: "wrap",
},
}}
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,
}}
>
New Transaction
</p>
</Button>
</div>
</div>
);
}

388
src/Components/DashboardPage/Student/StudentTransactionFilterMenu.tsx Normal file
View file

@ -0,0 +1,388 @@
import styles from "../../../styles";
import {
Button,
FormControl,
InputLabel,
MenuItem,
Select,
SelectChangeEvent,
} from "@mui/material";
import HourglassBottomIcon from "@mui/icons-material/HourglassBottom";
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import FlashOffIcon from "@mui/icons-material/FlashOff";
import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
import ShoppingCartCheckoutIcon from "@mui/icons-material/ShoppingCartCheckout";
import AssignmentReturnedIcon from "@mui/icons-material/AssignmentReturned";
import CancelOutlinedIcon from "@mui/icons-material/CancelOutlined";
import CancelIcon from "@mui/icons-material/Cancel";
import ClearAllIcon from "@mui/icons-material/ClearAll";
type props = {
filter: string;
setFilter: React.Dispatch<React.SetStateAction<string>>;
};
export default function StudentTransactionFilterMenu(props: props) {
return (
<>
<p
style={{
...styles.text_dark,
...styles.text_L,
}}
>
Personal Transactions
</p>
<div
style={{
...styles.flex_row,
...{
alignSelf: "center",
justifyContent: "center",
flexWrap: "wrap",
},
}}
>
<FormControl sx={{ width: "384px" }}>
<InputLabel style={{ backgroundColor: "white", padding: 0 }}>
Filter Transactions
</InputLabel>
<Select
value={props.filter}
onChange={(e: SelectChangeEvent<string>) =>
props.setFilter(e.target.value)
}
>
<MenuItem value={""}>
<Button
style={{
...styles.row,
...{
alignSelf: "center",
justifyContent: "center",
flexWrap: "wrap",
},
}}
>
<ClearAllIcon style={styles.student_filter_item} />
<p
style={{
...styles.text_dark,
...styles.text_M,
}}
>
All
</p>
</Button>
</MenuItem>
<MenuItem value={"Pending Approval"}>
<Button
style={{
...styles.row,
...{
alignSelf: "center",
justifyContent: "center",
flexWrap: "wrap",
},
}}
>
<HourglassBottomIcon style={styles.student_filter_item} />
<div
style={{
...styles.flex_column,
}}
>
<p
style={{
...styles.text_dark,
...styles.text_M,
...{ margin: 0, textAlign: "left" },
}}
>
Pending
</p>
<p
style={{
...styles.text_dark,
...styles.text_XS,
...{ margin: 0, textAlign: "left" },
}}
>
Awaiting techncian approval
</p>
</div>
</Button>
</MenuItem>
<MenuItem value={"Approved"}>
<Button
style={{
...styles.flex_row,
...{
alignSelf: "center",
justifyContent: "center",
flexWrap: "wrap",
},
}}
>
<CheckCircleOutlineIcon style={styles.student_filter_item} />
<div
style={{
...styles.flex_column,
}}
>
<p
style={{
...styles.text_dark,
...styles.text_M,
...{ margin: 0, textAlign: "left" },
}}
>
Approved
</p>
<p
style={{
...styles.text_dark,
...styles.text_XS,
...{ margin: 0, textAlign: "left" },
}}
>
To be delivered by technician
</p>
</div>
</Button>
</MenuItem>
<MenuItem value={"Rejected"}>
<Button
style={{
...styles.flex_row,
...{
alignSelf: "center",
justifyContent: "center",
flexWrap: "wrap",
},
}}
>
<CancelOutlinedIcon style={styles.student_filter_item} />
<div
style={{
...styles.flex_column,
}}
>
<p
style={{
...styles.text_dark,
...styles.text_M,
...{ margin: 0, textAlign: "left" },
}}
>
Rejected
</p>
<p
style={{
...styles.text_dark,
...styles.text_XS,
...{ margin: 0, textAlign: "left" },
}}
>
Denied by technician
</p>
</div>
</Button>
</MenuItem>
<MenuItem value={"Borrowed"}>
<Button
style={{
...styles.flex_row,
...{
alignSelf: "center",
justifyContent: "center",
flexWrap: "wrap",
},
}}
>
<ShoppingCartCheckoutIcon style={styles.student_filter_item} />
<div
style={{
...styles.flex_column,
}}
>
<p
style={{
...styles.text_dark,
...styles.text_M,
...{ margin: 0, textAlign: "left" },
}}
>
On-Borrow
</p>
<p
style={{
...styles.text_dark,
...styles.text_XS,
...{ margin: 0, textAlign: "left" },
}}
>
Items currently with student
</p>
</div>
</Button>
</MenuItem>
<MenuItem value={"Cancelled"}>
<Button
style={{
...styles.flex_row,
...{
alignSelf: "center",
justifyContent: "center",
flexWrap: "wrap",
},
}}
>
<CancelIcon style={styles.student_filter_item} />
<div
style={{
...styles.flex_column,
}}
>
<p
style={{
...styles.text_dark,
...styles.text_M,
...{ margin: 0, textAlign: "left" },
}}
>
Cancelled
</p>
<p
style={{
...styles.text_dark,
...styles.text_XS,
...{ margin: 0, textAlign: "left" },
}}
>
Approved but was not delivered to student
</p>
</div>
</Button>
</MenuItem>
<MenuItem value={"Returned: Pending Checking"}>
<Button
style={{
...styles.flex_row,
...{
alignSelf: "center",
justifyContent: "center",
flexWrap: "wrap",
},
}}
>
<AssignmentReturnedIcon style={styles.student_filter_item} />
<div
style={{
...styles.flex_column,
}}
>
<p
style={{
...styles.text_dark,
...styles.text_M,
...{ margin: 0, textAlign: "left" },
}}
>
Returned: Pending
</p>
<p
style={{
...styles.text_dark,
...styles.text_XS,
...{ margin: 0, textAlign: "left" },
}}
>
Being checked for any breakages
</p>
</div>
</Button>
</MenuItem>
<MenuItem value={"Finalized"}>
<Button
style={{
...styles.flex_row,
...{
alignSelf: "center",
justifyContent: "center",
flexWrap: "wrap",
},
}}
>
<CheckCircleIcon style={styles.student_filter_item} />
<div
style={{
...styles.flex_column,
}}
>
<p
style={{
...styles.text_dark,
...styles.text_M,
...{ margin: 0, textAlign: "left" },
}}
>
Finalized
</p>
<p
style={{
...styles.text_dark,
...styles.text_XS,
...{ margin: 0, textAlign: "left" },
}}
>
Completed transaction without breakages
</p>
</div>
</Button>
</MenuItem>
<MenuItem value={"With Breakages: Pending Resolution"}>
<Button
style={{
...styles.flex_row,
...{
alignSelf: "center",
justifyContent: "center",
flexWrap: "wrap",
},
}}
>
<FlashOffIcon style={styles.student_filter_item} />
<div
style={{
...styles.flex_column,
}}
>
<p
style={{
...styles.text_dark,
...styles.text_M,
...{ margin: 0, textAlign: "left" },
}}
>
With Breakages
</p>
<p
style={{
...styles.text_dark,
...styles.text_XS,
...{ margin: 0, textAlign: "left" },
}}
>
With broken items awaiting reimbursement
</p>
</div>
</Button>
</MenuItem>
</Select>
</FormControl>
</div>
</>
);
}

67
src/Components/DashboardPage/Student/StudentTransactionListView.tsx Normal file
View file

@ -0,0 +1,67 @@
import { useQuery } from "@tanstack/react-query";
import { TransactionsByStudentAPI } from "../../API/API";
import styles from "../../../styles";
import CircularProgress from "@mui/material/CircularProgress/CircularProgress";
import React, { useState } from "react";
import TransactionEntry from "../../TransactionEntry/TransactionEntry";
import StudentTransactionFilterMenu from "./StudentTransactionFilterMenu";
export default function StudentTransactionListView() {
const transactions = useQuery({
queryKey: ["transactions_student"],
queryFn: TransactionsByStudentAPI,
});
const [filter, setFilter] = useState("");
if (transactions.isLoading) {
return (
<div
style={{
...styles.flex_column,
...{
alignItems: "center",
justifyContent: "center",
paddingTop: "64px",
},
}}
>
<CircularProgress style={{ height: "128px", width: "128px" }} />
<p
style={{
...styles.text_dark,
...styles.text_L,
}}
>
Loading
</p>
</div>
);
}
return (
<div>
<div style={styles.flex_column}>
<StudentTransactionFilterMenu filter={filter} setFilter={setFilter} />
<div style={{ marginTop: "16px" }} />
<div
style={{
...styles.flex_column,
...{ height: "50vh", overflowY: "scroll" },
}}
>
{transactions.data ? (
transactions.data
.filter((transaction) =>
filter !== "" ? transaction.transaction_status == filter : true
)
.map((transaction) => (
<React.Fragment key={transaction.id}>
<TransactionEntry transaction={transaction} />
</React.Fragment>
))
) : (
<></>
)}
</div>
</div>
</div>
);
}

254
src/Components/DashboardPage/StudentTransactionButtons.tsx
View file

@ -1,254 +0,0 @@
import styles from "../../styles";
import { useNavigate } from "react-router-dom";
import { Button } from "@mui/material";
import HourglassBottomIcon from '@mui/icons-material/HourglassBottom';
import ThumbUpIcon from '@mui/icons-material/ThumbUp';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import FlashOffIcon from '@mui/icons-material/FlashOff';
import ThumbDownIcon from '@mui/icons-material/ThumbDown';
import { colors } from "../../styles";
import Popup from "reactjs-popup";
import AddItemModal from "../AddItemModal/AddItemModal";
import AddSKUModal from "../AddSKUModal/AddSKUModal";
import { useState } from "react";
export default function StudentTransactionButtons() {
const [addSKUmodalOpen, SetAddSKUModalOpen] = useState(false);
const [additemmodalOpen, SetAddItemModalOpen] = useState(false);
const navigate = useNavigate();
return (
<>
<p
style={{
...styles.text_dark,
...styles.text_L,
}}
>
Equipments
</p>
<div
style={{
...styles.flex_row,
...{
alignSelf: "center",
justifyContent: "center",
flexWrap: "wrap",
},
}}
>
<Button
style={{
...styles.flex_column,
...{
alignSelf: "center",
justifyContent: "center",
flexWrap: "wrap",
},
}}
onClick={() => {
navigate("/view/equipment_instances");
}}
>
<HourglassBottomIcon
style={{
height: 64,
width: 64,
fill: colors.font_dark,
marginLeft: "1rem",
marginRight: "1rem",
}}
/>
<p
style={{
...styles.text_dark,
...styles.text_M,
}}
>
Pending
</p>
</Button>
<Button
style={{
...styles.flex_column,
...{
alignSelf: "center",
justifyContent: "center",
flexWrap: "wrap",
},
}}
onClick={() => {
navigate("/view/equipment_instances");
}}
>
<ThumbUpIcon
style={{
height: 64,
width: 64,
fill: colors.font_dark,
marginLeft: "1rem",
marginRight: "1rem",
}}
/>
<p
style={{
...styles.text_dark,
...styles.text_M,
}}
>
On-Borrow
</p>
</Button>
<Button
style={{
...styles.flex_column,
...{
alignSelf: "center",
justifyContent: "center",
flexWrap: "wrap",
},
}}
onClick={() => {
navigate("/view/equipment_instances");
}}
>
<CheckCircleIcon
style={{
height: 64,
width: 64,
fill: colors.font_dark,
marginLeft: "1rem",
marginRight: "1rem",
}}
/>
<p
style={{
...styles.text_dark,
...styles.text_M,
}}
>
Completed
</p>
</Button>
<Button
style={{
...styles.flex_column,
...{
alignSelf: "center",
justifyContent: "center",
flexWrap: "wrap",
},
}}
onClick={() => {
navigate("/view/equipment_instances");
}}
>
<FlashOffIcon
style={{
height: 64,
width: 64,
fill: colors.font_dark,
marginLeft: "1rem",
marginRight: "1rem",
}}
/>
<p
style={{
...styles.text_dark,
...styles.text_M,
}}
>
Breakage
</p>
</Button>
<Button
style={{
...styles.flex_column,
...{
alignSelf: "center",
justifyContent: "center",
flexWrap: "wrap",
},
}}
onClick={() => {
navigate("/view/equipment_instances");
}}
>
<ThumbDownIcon
style={{
height: 64,
width: 64,
fill: colors.font_dark,
marginLeft: "1rem",
marginRight: "1rem",
}}
/>
<p
style={{
...styles.text_dark,
...styles.text_M,
}}
>
Rejected
</p>
</Button>
</div>
<div
style={{
...styles.flex_row,
...{
alignSelf: "center",
justifyContent: "center",
flexWrap: "wrap",
},
}}
>
</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>
<Popup
open={additemmodalOpen}
onClose={() => SetAddItemModalOpen(false)}
modal
position={"top center"}
contentStyle={{
width: "32rem",
borderRadius: 16,
borderColor: "grey",
borderStyle: "solid",
borderWidth: 1,
padding: 16,
alignContent: "center",
justifyContent: "center",
textAlign: "center",
}}
>
<AddItemModal />
</Popup>
</>
);
}

8
src/Components/DashboardPage/TechnicianEquipmentButtons.tsx → src/Components/DashboardPage/Technician/TechnicianEquipmentButtons.tsx
View file

@ -1,17 +1,17 @@
import styles from "../../styles";
import styles from "../../../styles";
import { useNavigate } from "react-router-dom";
import { Button } from "@mui/material";
import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
import AddToQueueIcon from "@mui/icons-material/AddToQueue";
import NoteAddIcon from "@mui/icons-material/NoteAdd";
import NoteIcon from "@mui/icons-material/Note";
import { colors } from "../../styles";
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";
import AddItemModal from "../../AddItemModal/AddItemModal";
import AddSKUModal from "../../AddSKUModal/AddSKUModal";
import { useState } from "react";
export default function TechnicianEquipmentButtons() {
const [addSKUmodalOpen, SetAddSKUModalOpen] = useState(false);

4
src/Components/DashboardPage/TechnicianLogButtons.tsx → src/Components/DashboardPage/Technician/TechnicianLogButtons.tsx
View file

@ -1,8 +1,8 @@
import { Button } from "@mui/material";
import { useNavigate } from "react-router-dom";
import ManageSearchIcon from "@mui/icons-material/ManageSearch";
import styles from "../../styles";
import { colors } from "../../styles";
import styles from "../../../styles";
import { colors } from "../../../styles";
export default function TechnicianLogButtons() {
const navigate = useNavigate();

4
src/Components/DashboardPage/TechnicianWidgets.tsx → src/Components/DashboardPage/Technician/TechnicianWidgets.tsx
View file

@ -1,6 +1,6 @@
import { useQueries } from "@tanstack/react-query";
import styles from "../../styles";
import { EquipmentsAPI, EquipmentInstancesAPI, UserAPI } from "../API/API";
import styles from "../../../styles";
import { EquipmentsAPI, EquipmentInstancesAPI, UserAPI } from "../../API/API";
import CircularProgress from "@mui/material/CircularProgress";
export default function TechnicianWidgets() {

79
src/Components/Drawer/Drawer.tsx
View file

@ -3,7 +3,12 @@ import AccountCircleIcon from "@mui/icons-material/AccountCircle";
import HomeIcon from "@mui/icons-material/Home";
import LogoutIcon from "@mui/icons-material/Logout";
import { useQuery } from "@tanstack/react-query";
import { UserAPI, setAccessToken, setRefreshToken } from "../API/API";
import {
ClearanceAPI,
UserAPI,
setAccessToken,
setRefreshToken,
} from "../API/API";
import DrawerButton from "../DrawerButton/DrawerButton";
import { useDispatch } from "react-redux";
import { auth_toggle } from "../Plugins/Redux/Slices/AuthSlice/AuthSlice";
@ -11,6 +16,12 @@ import { toast } from "react-toastify";
import { useNavigate } from "react-router-dom";
export default function Drawer() {
const user = useQuery({ queryKey: ["user"], queryFn: UserAPI });
const clearance = useQuery({
enabled:
user.isFetched && !user?.data?.is_teacher && !user?.data?.is_technician,
queryKey: ["clearance"],
queryFn: ClearanceAPI,
});
const dispatch = useDispatch();
const navigate = useNavigate();
return (
@ -62,6 +73,72 @@ export default function Drawer() {
</p>
</div>
</div>
{user.isFetched &&
user.data &&
!user.data.is_teacher &&
!user?.data?.is_technician ? (
<>
<div
style={{
backgroundColor: "white",
marginTop: "16px",
width: "100%",
height: "2px",
marginBottom: 8,
}}
/>
<div style={styles.flex_row}>
<p
style={{
...styles.text_light,
...styles.text_M,
...{
textAlign: "left",
paddingLeft: "8px",
},
margin: 0,
alignSelf: "center",
}}
>
Status:
</p>
<p
style={{
...styles.text_light,
...styles.text_M,
...{
textAlign: "left",
paddingLeft: "8px",
color:
clearance.data?.cleared === "Cleared"
? colors.font_dark
: colors.red,
margin: 0,
alignSelf: "center",
},
}}
>
{clearance.data?.cleared}
</p>
<p
style={{
...styles.text_light,
...styles.text_S,
...{
textAlign: "left",
paddingLeft: "8px",
},
margin: 0,
alignSelf: "center",
}}
>
{`(${clearance.data?.uncleared_transactions} pending)`}
</p>
</div>
</>
) : (
<></>
)}
<div
style={{

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

@ -14,11 +14,10 @@ export default function Header(props: props) {
style={{
position: "sticky",
top: 0,
zIndex: 1,
zIndex: 1000,
backgroundColor: colors.header_color,
display: "flex",
flexDirection: "row",
}}
>
<div

148
src/Components/TransactionEntry/TransactionEntry.tsx Normal file
View file

@ -0,0 +1,148 @@
import styles from "../../styles";
import { colors } from "../../styles";
import { TransactionType } from "../Types/Types";
export interface props {
transaction: TransactionType;
}
function StatusText(props: { status: string }) {
let color;
if (
props.status === "Pending Approval" ||
props.status === "Returned: Pending Checking"
) {
color = colors.orange;
} else if (
props.status === "Approved" ||
props.status === "Finalized" ||
props.status === "Borrowed"
) {
color = colors.green;
} else {
color = colors.red;
}
return (
<p
style={{
...styles.text_dark,
...styles.text_S,
...{
textAlign: "center",
color: color,
},
}}
>
{props.status}
</p>
);
}
export default function TransactionEntry(props: props) {
return (
<div
style={{
alignSelf: "center",
justifySelf: "center",
width: "384px",
backgroundColor: colors.header_color,
borderRadius: 16,
margin: "8px",
padding: "8px",
}}
>
<div style={styles.flex_row}>
<p
style={{
...styles.text_dark,
...styles.text_S,
...{ textAlign: "left", flex: 1 },
}}
>
ID: {props.transaction.id}
</p>
<p
style={{
...styles.text_dark,
...styles.text_S,
...{ textAlign: "right", flex: 2 },
}}
>
{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 },
}}
>
Borrower: {props.transaction.borrower.name}{" "}
{`(ID:${props.transaction.borrower.id})`}
</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,
...{
height: "64px",
textAlign: "left",
margin: 0,
marginTop: "8px",
flexWrap: "wrap",
overflowY: "scroll",
},
}}
>
{props.transaction.remarks}
</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",
margin: 0,
lineHeight: 0,
},
}}
>
{` - ${equipment.name} (ID:${equipment.id})`}
</p>
))}
</div>
</div>
</div>
<StatusText status={props.transaction.transaction_status} />
</div>
);
}

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

@ -98,6 +98,7 @@ export type EquipmentInstanceLogType = {
export type EquipmentInstanceLogListType = Array<EquipmentInstanceLogType>;
export type UserType = {
id: number;
username: string;
email: string;
avatar: string;
@ -122,10 +123,25 @@ export type TransactionType = {
name: string;
}>;
transaction_status: string;
timestamp: string;
remarks: string;
};
export type TransactionListType = Array<TransactionType>;
export type TransactionCreateType = {
equipments: number[];
remarks: string;
teacher: number;
borrower: number;
transaction_status: "Pending Approval";
};
export type TransactionUpdateType = {
transaction_status: string;
};
export type ClearanceType = {
cleared: string;
uncleared_transactions: number;
};

205
src/Pages/AddTransactionPage/AddTransactionPage.tsx Normal file
View file

@ -0,0 +1,205 @@
import { useState } from "react";
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,
TransactionCreateAPI,
TeachersAPI,
UserAPI,
} from "../../Components/API/API";
import FormControl from "@mui/material/FormControl";
import FormLabel from "@mui/material/FormLabel";
import { useQueryClient } from "@tanstack/react-query";
import { useQuery } from "@tanstack/react-query";
import {
Select,
CircularProgress,
MenuItem,
OutlinedInput,
} from "@mui/material";
import React from "react";
import Header from "../../Components/Header/Header";
import { useNavigate } from "react-router-dom";
export default function AddTransactionPage() {
const navigate = useNavigate();
const queryClient = useQueryClient();
const [selecteditems, SetSelectedItems] = useState<number[]>([]);
const [selectedteacher, SetSelectedTeacher] = useState<number>(0);
const [remarks, SetRemarks] = useState("");
const [error, setError] = useState("");
const equipments = useQuery({
queryKey: ["equipment_instances_available"],
queryFn: AvailableEquipmentInstancesAPI,
});
const teachers = useQuery({
queryKey: ["teachers"],
queryFn: TeachersAPI,
});
const user = useQuery({
queryKey: ["user"],
queryFn: UserAPI,
});
const isLoading =
equipments.isLoading || teachers.isLoading || user.isLoading;
if (isLoading) {
return (
<div style={styles.background}>
<Header label={"New Transaction"} />
<div
style={{
...styles.flex_column,
...{
alignItems: "center",
justifyContent: "center",
paddingTop: "64px",
},
}}
>
<CircularProgress style={{ height: "128px", width: "128px" }} />
<p
style={{
...styles.text_dark,
...styles.text_L,
}}
>
Loading
</p>
</div>
</div>
);
}
return (
<div style={styles.background}>
<Header label={"New Transaction"} />
<div
style={{
...styles.flex_row,
...{
alignItems: "center",
justifyContent: "center",
overflowY: "scroll",
},
}}
>
<AddToQueueIcon
style={{
height: 64,
width: 64,
fill: colors.font_dark,
marginLeft: "1rem",
marginRight: "1rem",
}}
/>
<p style={{ ...styles.text_dark, ...styles.text_L }}>New Transaction</p>
</div>
<div style={styles.flex_column}>
<FormControl style={{ marginTop: "8px" }}>
<FormLabel style={styles.text_dark}>Items Requested</FormLabel>
<Select
multiple
value={selecteditems}
onChange={(event) =>
SetSelectedItems(event.target.value as number[])
}
input={<OutlinedInput label="Name" />}
>
{equipments.data
?.filter((equipment) => equipment.status == "Available")
.map((equipment) => (
<MenuItem key={equipment.id} value={equipment.id}>
{`${equipment.equipment_name} (ID:${equipment.id})`}
</MenuItem>
))}
</Select>
</FormControl>
<FormControl style={{ marginTop: "8px" }}>
<FormLabel style={styles.text_dark}>Assigned Teacher</FormLabel>
<Select
value={selectedteacher}
onChange={(event) =>
SetSelectedTeacher(event.target.value as number)
}
input={<OutlinedInput label="Name" />}
>
{teachers.data?.map((teacher) => (
<MenuItem key={teacher.id} value={teacher.id}>
{`${teacher.first_name} ${teacher.last_name}`}
</MenuItem>
))}
</Select>
</FormControl>
<TextField
multiline
style={styles.input_form}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
SetRemarks(e.target.value);
setError("");
}}
value={remarks}
placeholder={"Optionally add a brief description of the request"}
/>
</div>
<p style={{ ...styles.text_dark, ...styles.text_M }}>{error}</p>
<div
style={{
backgroundColor: colors.button_border,
marginTop: "16px",
width: "100%",
height: "2px",
marginBottom: 8,
}}
/>
<Button
type={"dark"}
label={"Create Transaction"}
onClick={async () => {
console.log(selecteditems);
const data = await TransactionCreateAPI({
equipments: selecteditems,
teacher: selectedteacher,
remarks: remarks || " ",
transaction_status: "Pending Approval",
borrower: user.data?.id || 0,
});
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: ["transactions"],
});
navigate("/dashboard");
} else {
setError(JSON.stringify(data[1]));
}
}}
/>
</div>
);
}

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

@ -1,10 +1,11 @@
import Header from "../../Components/Header/Header";
import styles from "../../styles";
import RestrictedComponent from "../../Components/RestrictedComponent/RestrictedComponent";
import TechnicianWidgets from "../../Components/DashboardPage/TechnicianWidgets";
import TechnicianEquipmentButtons from "../../Components/DashboardPage/TechnicianEquipmentButtons";
import TechnicianLogButtons from "../../Components/DashboardPage/TechnicianLogButtons";
import StudentTransactionButtons from "../../Components/DashboardPage/StudentTransactionButtons";
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";
export default function Dashboard() {
return (
<div style={styles.background}>
@ -15,7 +16,20 @@ export default function Dashboard() {
<TechnicianLogButtons />
</RestrictedComponent>
<RestrictedComponent allow_only={"Student"}>
<StudentTransactionButtons />
<div
style={{
...styles.flex_row,
...{
flexWrap: "wrap",
justifyContent: "center",
marginLeft: "16px",
marginRight: "16px",
},
}}
>
<StudentTransactionListView />
<StudentDashboard />
</div>
</RestrictedComponent>
<RestrictedComponent allow_only={"Teacher"}>
<p style={styles.text_dark}>Welcome teacher!</p>

8
src/styles.tsx
View file

@ -25,7 +25,6 @@ const styles: { [key: string]: React.CSSProperties } = {
text_dark: {
color: colors.font_dark,
fontWeight: "bold",
},
text_light: {
color: colors.font_light,
@ -88,6 +87,13 @@ const styles: { [key: string]: React.CSSProperties } = {
textAlign: "center",
overflowY: "scroll",
},
student_filter_item: {
height: 32,
width: 32,
fill: colors.font_dark,
marginLeft: "1rem",
marginRight: "1rem",
},
};
export default styles;