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", padding: "7px",
margin: "0px", margin: "0px",
backgroundColor: colors.header_color, backgroundColor: colors.header_color,
width: 550, width: "100%",
maxWidth: 550,
alignSelf: "center", alignSelf: "center",
borderRadius: "0px 0px 7px 7px", borderRadius: "0px 0px 7px 7px",

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

@ -77,7 +77,8 @@ export default function TeacherTransactionListView() {
padding: "7px", padding: "7px",
margin: "0px", margin: "0px",
backgroundColor: colors.header_color, backgroundColor: colors.header_color,
width: 550, width: "100%",
maxWidth: 550,
alignSelf: "center", alignSelf: "center",
borderRadius: "0px 0px 7px 7px", 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 { colors } from "../../../styles";
import ScienceIcon from "@mui/icons-material/Science"; import ScienceIcon from "@mui/icons-material/Science";
import ColorizeIcon from "@mui/icons-material/Colorize"; import ColorizeIcon from "@mui/icons-material/Colorize";
import ArticleIcon from '@mui/icons-material/Article';
import Popup from "reactjs-popup"; import Popup from "reactjs-popup";
import AddItemModal from "../../AddItemModal/AddItemModal"; import AddItemModal from "../../AddItemModal/AddItemModal";
import AddSKUModal from "../../AddSKUModal/AddSKUModal"; import AddSKUModal from "../../AddSKUModal/AddSKUModal";
@ -98,7 +97,7 @@ export default function TechnicianEquipmentButtons() {
> >
Add Item Add Item
</p> </p>
</Button> </Button>
<Button <Button
style={{ style={{
...styles.flex_column, ...styles.flex_column,
@ -129,7 +128,7 @@ export default function TechnicianEquipmentButtons() {
> >
Add SKU Add SKU
</p> </p>
</Button> </Button>
<Button <Button
style={{ style={{
...styles.flex_column, ...styles.flex_column,
@ -161,7 +160,6 @@ export default function TechnicianEquipmentButtons() {
View SKUs View SKUs
</p> </p>
</Button> </Button>
</div> </div>
<div <div
style={{ style={{
@ -173,38 +171,7 @@ export default function TechnicianEquipmentButtons() {
}, },
}} }}
> >
<Button <Button
style={{
...styles.flex_column,
...{
alignSelf: "center",
justifyContent: "center",
flexWrap: "wrap",
},
}}
>
<ArticleIcon
style={{
height: 64,
width: 64,
fill: colors.font_dark,
marginLeft: "1rem",
marginRight: "1rem",
}}
onClick={() => {
navigate("/view/transactions");
}}
/>
<p
style={{
...styles.text_dark,
...styles.text_M,
}}
>
Transactions
</p>
</Button>
<Button
style={{ style={{
...styles.flex_column, ...styles.flex_column,
...{ ...{
@ -265,7 +232,7 @@ export default function TechnicianEquipmentButtons() {
> >
Miscellaneous Miscellaneous
</p> </p>
</Button> </Button>
</div> </div>
<Popup <Popup
open={addSKUmodalOpen} open={addSKUmodalOpen}
@ -285,8 +252,8 @@ export default function TechnicianEquipmentButtons() {
}} }}
> >
<AddSKUModal /> <AddSKUModal />
</Popup> </Popup>
<Popup <Popup
open={additemmodalOpen} open={additemmodalOpen}
onClose={() => SetAddItemModalOpen(false)} onClose={() => SetAddItemModalOpen(false)}
modal 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 { useNavigate } from "react-router-dom";
import ManageSearchIcon from "@mui/icons-material/ManageSearch"; import ManageSearchIcon from "@mui/icons-material/ManageSearch";
import CountertopsIcon from "@mui/icons-material/Countertops"; import CountertopsIcon from "@mui/icons-material/Countertops";
import AssessmentIcon from "@mui/icons-material/Assessment";
import styles from "../../../styles"; import styles from "../../../styles";
import { colors } from "../../../styles"; import { colors } from "../../../styles";
@ -56,7 +55,7 @@ export default function TechnicianLogButtons() {
...styles.text_M, ...styles.text_M,
}} }}
> >
SKU Logs SKU <br/> History
</p> </p>
</Button> </Button>
<Button <Button
@ -87,7 +86,7 @@ export default function TechnicianLogButtons() {
...styles.text_M, ...styles.text_M,
}} }}
> >
Equipment Logs Equipment <br/> History
</p> </p>
</Button> </Button>
<Button <Button
@ -118,40 +117,10 @@ export default function TechnicianLogButtons() {
...styles.text_M, ...styles.text_M,
}} }}
> >
Item Tally Equipment <br/>Stock Check
</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
</p> </p>
</Button> </Button>
</div> </div>
</> </>
); );

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

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

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

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

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

@ -54,7 +54,7 @@ export default function EquipmentTallyPage() {
} }
return ( return (
<div style={styles.background}> <div style={styles.background}>
<Header label={"Items Tally"} /> <Header label={"Equipment Stocks"} />
<div <div
style={{ style={{
...styles.flex_column, ...styles.flex_column,
@ -65,81 +65,95 @@ export default function EquipmentTallyPage() {
width: "100%", width: "100%",
minHeight: "100%", minHeight: "100%",
minWidth: "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> <div style={{ alignSelf: "flex-start", paddingLeft: "32px" }}></div>
<TableContainer <TableContainer
style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }} style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}
component={Paper} 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"> <Table sx={{ minWidth: "32rem" }} size="medium">
<TableHead> <TableHead>
<TableRow></TableRow>
<TableRow style={{ backgroundColor: colors.header_color }}> <TableRow style={{ backgroundColor: colors.header_color }}>
<TableCell align="center" style={styles.text_light}> <TableCell align="center" style={styles.text_light}>
ID ID
@ -192,7 +206,7 @@ export default function EquipmentTallyPage() {
<TableCell align="center" component="th" scope="row"> <TableCell align="center" component="th" scope="row">
<div style={styles.flex_column}> <div style={styles.flex_column}>
<p style={{ ...styles.text_dark, ...styles.text_S }}> <p style={{ ...styles.text_dark, ...styles.text_S }}>
Available: Available: {"\n"}
{ {
equipment_instances.data?.filter( equipment_instances.data?.filter(
(equipment_instance) => (equipment_instance) =>
@ -203,7 +217,7 @@ export default function EquipmentTallyPage() {
} }
</p> </p>
<p style={{ ...styles.text_dark, ...styles.text_S }}> <p style={{ ...styles.text_dark, ...styles.text_S }}>
Pending: Pending: {"\n"}
{ {
equipment_instances.data?.filter( equipment_instances.data?.filter(
(equipment_instance) => (equipment_instance) =>
@ -214,7 +228,24 @@ export default function EquipmentTallyPage() {
} }
</p> </p>
<p style={{ ...styles.text_dark, ...styles.text_S }}> <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_instances.data?.filter(
(equipment_instance) => (equipment_instance) =>
@ -224,6 +255,26 @@ export default function EquipmentTallyPage() {
).length ).length
} }
</p> </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> </div>
</TableCell> </TableCell>
</TableRow> </TableRow>

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

@ -9,7 +9,7 @@ export default function ManageEquipmentPage() {
return ( return (
<div style={styles.background}> <div style={styles.background}>
<Header label={"Equipment Management"} /> <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"}> <RestrictedComponent allow_only={"Technician"}>
<TechnicianEquipmentButtons /> <TechnicianEquipmentButtons />
<TechnicianLogButtons /> <TechnicianLogButtons />

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

@ -186,7 +186,7 @@ export default function TransactionsListPage() {
Additional Members Additional Members
</TableCell> </TableCell>
<TableCell align="center" style={styles.text_light}> <TableCell align="center" style={styles.text_light}>
Additional Members Equipments
</TableCell> </TableCell>
<TableCell align="center" style={styles.text_light}> <TableCell align="center" style={styles.text_light}>
Actions Actions
@ -461,6 +461,7 @@ export default function TransactionsListPage() {
width: "auto", width: "auto",
alignSelf: "center", alignSelf: "center",
borderRadius: "7px", borderRadius: "7px",
minWidth: "65px"
}} }}
onClick={() => { onClick={() => {
navigate(`/view/transaction/${transaction.id}`, { 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> </p>
</button> </button>
</TableCell> </TableCell>