keannu125/Borrowing-TrackerFrontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Borrowing-TrackerFrontend.git synced 2025-09-16 20:49:36 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

added homepage navigation, and configure header

Browse source
This commit is contained in:
Pongot, Jophiel 2024-01-09 07:17:14 +08:00
parent 8a53d12c8a
commit fa89268e0a
7 changed files with 238 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

124
src/Components/DashboardPage/Technician/TechnicianNavigation.tsx Normal file
View file

@ -0,0 +1,124 @@
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",
}}
>
<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("/dashboard");
}}
>
<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>
</>
);
}

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

@ -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 />