mirror of
https://github.com/lemeow125/Borrowing-TrackerFrontend.git
synced 2024-11-16 22:09:29 +08:00
Added item tally page for technician
This commit is contained in:
parent
81cb18dc5c
commit
0d32ce61cb
3 changed files with 260 additions and 0 deletions
12
src/App.tsx
12
src/App.tsx
|
|
@ -20,6 +20,7 @@ import RestrictedPage from "./Components/RestrictedPage/RestrictedPage";
|
|||
import TransactionsListPage from "./Pages/TransactionsListPage/TransactionsListPage";
|
||||
import AddTransactionPage from "./Pages/AddTransactionPage/AddTransactionPage";
|
||||
import TransactionPage from "./Pages/TransactionPage/TransactionPage";
|
||||
import EquipmentInstanceTallyPage from "./Pages/EquipmentTallyPage/EquipmentTallyPage";
|
||||
|
||||
const queryClient = new QueryClient();
|
||||
const router = createHashRouter([
|
||||
|
|
@ -54,6 +55,17 @@ const router = createHashRouter([
|
|||
),
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
{
|
||||
path: "/view/equipments/tally",
|
||||
element: (
|
||||
<>
|
||||
<Revalidator />
|
||||
<RestrictedPage allow_only="Technician" />
|
||||
<EquipmentInstanceTallyPage />
|
||||
</>
|
||||
),
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
{
|
||||
path: "/view/equipment_instances/filter/:filter_by",
|
||||
element: (
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
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 styles from "../../../styles";
|
||||
import { colors } from "../../../styles";
|
||||
|
||||
|
|
@ -57,6 +58,37 @@ export default function TechnicianLogButtons() {
|
|||
SKU Logs
|
||||
</p>
|
||||
</Button>
|
||||
<Button
|
||||
style={{
|
||||
...styles.flex_column,
|
||||
...{
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
}}
|
||||
onClick={() => {
|
||||
navigate("/view/equipments/tally");
|
||||
}}
|
||||
>
|
||||
<CountertopsIcon
|
||||
style={{
|
||||
height: 64,
|
||||
width: 64,
|
||||
fill: colors.font_dark,
|
||||
marginLeft: "1rem",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
}}
|
||||
>
|
||||
Item Tally
|
||||
</p>
|
||||
</Button>
|
||||
<Button
|
||||
style={{
|
||||
...styles.flex_column,
|
||||
|
|
|
|||
216
src/Pages/EquipmentTallyPage/EquipmentTallyPage.tsx
Normal file
216
src/Pages/EquipmentTallyPage/EquipmentTallyPage.tsx
Normal file
|
|
@ -0,0 +1,216 @@
|
|||
import { useQuery } from "@tanstack/react-query";
|
||||
import Header from "../../Components/Header/Header";
|
||||
import styles from "../../styles";
|
||||
import { EquipmentInstancesAPI, EquipmentsAPI } from "../../Components/API/API";
|
||||
import { CircularProgress } from "@mui/material";
|
||||
import Table from "@mui/material/Table";
|
||||
import TableBody from "@mui/material/TableBody";
|
||||
import TableCell from "@mui/material/TableCell";
|
||||
import TableContainer from "@mui/material/TableContainer";
|
||||
import TableHead from "@mui/material/TableHead";
|
||||
import TableRow from "@mui/material/TableRow";
|
||||
import Paper from "@mui/material/Paper";
|
||||
import { colors } from "../../styles";
|
||||
import { useState } from "react";
|
||||
import Autocomplete from "@mui/material/Autocomplete";
|
||||
import SearchIcon from "@mui/icons-material/Search";
|
||||
|
||||
export default function EquipmentTallyPage() {
|
||||
const equipment_instances = useQuery({
|
||||
queryKey: ["equipment_instances"],
|
||||
queryFn: EquipmentInstancesAPI,
|
||||
});
|
||||
const equipments = useQuery({
|
||||
queryKey: ["equipments"],
|
||||
queryFn: EquipmentsAPI,
|
||||
});
|
||||
const [filter, setFilter] = useState<string | null>(null);
|
||||
if (equipment_instances.isLoading || equipments.isLoading) {
|
||||
return (
|
||||
<div style={styles.background}>
|
||||
<Header label={"Dashboard"} />
|
||||
<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={"Items Tally"} />
|
||||
<div
|
||||
style={{
|
||||
...styles.flex_column,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
minHeight: "100%",
|
||||
minWidth: "100%",
|
||||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
<div style={{ alignSelf: "flex-start", paddingLeft: "32px" }}>
|
||||
<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:{" "}
|
||||
{
|
||||
equipments?.data?.filter((equipment) =>
|
||||
filter !== null
|
||||
? // If filter is not null, we filter if it matches any criteria
|
||||
equipment.name
|
||||
.toLowerCase()
|
||||
.includes(filter.toLowerCase()) ||
|
||||
equipment.category
|
||||
.toLowerCase()
|
||||
.includes(filter.toLowerCase()) ||
|
||||
equipment.last_updated
|
||||
.toLowerCase()
|
||||
.includes(filter?.toLowerCase()) ||
|
||||
equipment.category.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>
|
||||
<TableContainer
|
||||
style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}
|
||||
component={Paper}
|
||||
>
|
||||
<Table sx={{ minWidth: "32rem" }} size="medium">
|
||||
<TableHead>
|
||||
<TableRow style={{ backgroundColor: colors.header_color }}>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
ID
|
||||
</TableCell>
|
||||
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Name
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Category
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Amount in Inventory
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{equipments.data ? (
|
||||
equipments.data
|
||||
.filter((equipment) =>
|
||||
filter !== null
|
||||
? // If filter is not null, we filter if it matches any criteria
|
||||
equipment.name
|
||||
.toLowerCase()
|
||||
.includes(filter.toLowerCase()) ||
|
||||
equipment.category
|
||||
.toLowerCase()
|
||||
.includes(filter.toLowerCase()) ||
|
||||
equipment.last_updated
|
||||
.toLowerCase()
|
||||
.includes(filter?.toLowerCase())
|
||||
: // If filter keyword is null then we just pass through everything as if we did not filter at all
|
||||
true
|
||||
)
|
||||
.map((equipment) => (
|
||||
<TableRow
|
||||
key={equipment.id}
|
||||
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
|
||||
>
|
||||
<TableCell align="center" component="th" scope="row">
|
||||
{equipment.id}
|
||||
</TableCell>
|
||||
|
||||
<TableCell align="center" component="th" scope="row">
|
||||
{equipment.name}
|
||||
</TableCell>
|
||||
<TableCell align="center" component="th" scope="row">
|
||||
{equipment.category}
|
||||
</TableCell>
|
||||
<TableCell align="center" component="th" scope="row">
|
||||
{
|
||||
equipment_instances.data?.filter(
|
||||
(equipment_instance) =>
|
||||
equipment_instance.equipment_name ==
|
||||
equipment.name
|
||||
).length
|
||||
}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue