keannu125/Ivy-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Ivy-Frontend.git synced 2024-11-16 22:29:24 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Removed lowercase directories

Browse source
This commit is contained in:
keannu125 2023-02-24 17:20:52 +08:00
parent e3bbca7e8c
commit d54e6be430
21 changed files with 0 additions and 737 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/components/ColoredCube/ColoredCube.tsx
View file

@ -1,20 +0,0 @@
import { PropaneSharp } from "@mui/icons-material";
import React from "react";
export interface props {
color: string;
size: number;
}
export default function ColoredCube(props: props) {
return (
<div style={{ paddingRight: 8 }}>
<div
style={{
backgroundColor: props.color,
width: props.size + "vh",
height: props.size + "vh",
}}
/>
</div>
);
}

20
src/components/Container/Container.tsx
View file

@ -1,20 +0,0 @@
import React from "react";
import Sidebar from "../Sidebar/Sidebar";
import Header from "../Header/Header";
import styles from "../../styles";
export interface props {
children: React.ReactNode;
}
export default function Container(props: props) {
return (
<div>
<Header />
<div style={{ width: "15%", position: "fixed" }}>
<Sidebar />
</div>
<div style={styles.route_wrapper}>{props.children}</div>
</div>
);
}

18
src/components/Header/Header.tsx
View file

@ -1,18 +0,0 @@
import React from "react";
import AppLogo from "../Icons/AppLogo/AppLogo";
import Login from "../Login/Login";
import styles from "../../styles";
export default function Header() {
return (
<div style={styles.header_wrapper}>
<div style={styles.header_left}>
<AppLogo size={8} color="#80b38b" />
<p style={styles.logo_title}>Ivy</p>
</div>
<div style={styles.header_right}>
<Login />
</div>
</div>
);
}

31
src/components/Icons/AppLogo/AppLogo.tsx
View file

@ -1,31 +0,0 @@
import React from "react";
export interface props {
size: number;
color: string;
}
export default function AppLogo(props: props) {
return (
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-plant-2"
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
stroke-width="2"
stroke={props.color}
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M2 9a10 10 0 1 0 20 0"></path>
<path d="M12 19a10 10 0 0 1 10 -10"></path>
<path d="M2 9a10 10 0 0 1 10 10"></path>
<path d="M12 4a9.7 9.7 0 0 1 2.99 7.5"></path>
<path d="M9.01 11.5a9.7 9.7 0 0 1 2.99 -7.5"></path>
</svg>
</div>
);
}

29
src/components/Icons/HomeIcon/HomeIcon.tsx
View file

@ -1,29 +0,0 @@
import React from "react";
export interface props {
size: number;
color: string;
}
export default function HomeIcon(props: props) {
return (
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-home-2"
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
stroke-width="2"
stroke={props.color}
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M5 12l-2 0l9 -9l9 9l-2 0"></path>
<path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></path>
<path d="M10 12h4v4h-4z"></path>
</svg>
</div>
);
}

31
src/components/Icons/InventoryIcon/InventoryIcon.tsx
View file

@ -1,31 +0,0 @@
import React from "react";
export interface props {
size: number;
color: string;
}
export default function InventoryIcon(props: props) {
return (
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-box-seam"
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 3l8 4.5v9l-8 4.5l-8 -4.5v-9l8 -4.5"></path>
<path d="M12 12l8 -4.5"></path>
<path d="M8.2 9.8l7.6 -4.6"></path>
<path d="M12 12v9"></path>
<path d="M12 12l-8 -4.5"></path>
</svg>
</div>
);
}

28
src/components/Icons/LogoutIcon/LogoutIcon.tsx
View file

@ -1,28 +0,0 @@
import React from "react";
export interface props {
size: number;
color: string;
}
export default function LogoutIcon(props: props) {
return (
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-logout"
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2"></path>
<path d="M7 12h14l-3 -3m0 6l3 -3"></path>
</svg>
</div>
);
}

32
src/components/Icons/LogsIcon/LogsIcon.tsx
View file

@ -1,32 +0,0 @@
import React from "react";
export interface props {
size: number;
color: string;
}
export default function LogsIcon(props: props) {
return (
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-clipboard-data"
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2"></path>
<path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path>
<path d="M9 17v-4"></path>
<path d="M12 17v-1"></path>
<path d="M15 17v-2"></path>
<path d="M12 17v-1"></path>
</svg>
</div>
);
}

30
src/components/Icons/LowStockIcon/LowStockIcon.tsx
View file

@ -1,30 +0,0 @@
import React from "react";
export interface props {
size: number;
color: string;
}
export default function LowStockIcon(props: props) {
return (
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-zoom-exclamation"
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
stroke-width="2"
stroke={props.color}
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
<path d="M21 21l-6 -6"></path>
<path d="M10 13v.01"></path>
<path d="M10 7v3"></path>
</svg>
</div>
);
}

31
src/components/Icons/NotFoundIcon/NotFoundIcon.tsx
View file

@ -1,31 +0,0 @@
import React from "react";
export interface props {
size: number;
color: string;
}
export default function NotFoundIcon(props: props) {
return (
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-error-404"
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M3 7v4a1 1 0 0 0 1 1h3"></path>
<path d="M7 7v10"></path>
<path d="M10 8v8a1 1 0 0 0 1 1h2a1 1 0 0 0 1 -1v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1z"></path>
<path d="M17 7v4a1 1 0 0 0 1 1h3"></path>
<path d="M21 7v10"></path>
</svg>
</div>
);
}

31
src/components/Icons/ProductsIcon/ProductsIcon.tsx
View file

@ -1,31 +0,0 @@
import React from "react";
export interface props {
size: number;
color: string;
}
export default function ProductsIcon(props: props) {
return (
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-list-numbers"
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M11 6h9"></path>
<path d="M11 12h9"></path>
<path d="M12 18h8"></path>
<path d="M4 16a2 2 0 1 1 4 0c0 .591 -.5 1 -1 1.5l-3 2.5h4"></path>
<path d="M6 10v-6l-2 2"></path>
</svg>
</div>
);
}

30
src/components/Icons/RecentlyAddedIcon/RecentlyAddedIcon.tsx
View file

@ -1,30 +0,0 @@
import React from "react";
export interface props {
size: number;
color: string;
}
export default function RecentlyAddedIcon(props: props) {
return (
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-book-upload"
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M14 20h-8a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12v5"></path>
<path d="M11 16h-5a2 2 0 0 0 -2 2"></path>
<path d="M15 16l3 -3l3 3"></path>
<path d="M18 13v9"></path>
</svg>
</div>
);
}

30
src/components/Icons/StatsIcon/StatsIcon.tsx
View file

@ -1,30 +0,0 @@
import React from "react";
export interface props {
size: number;
color: string;
}
export default function StatsIcon(props: props) {
return (
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-align-box-bottom-center"
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"></path>
<path d="M9 15v2"></path>
<path d="M12 11v6"></path>
<path d="M15 13v4"></path>
</svg>
</div>
);
}

35
src/components/Icons/TotalProductsIcon/TotalProductsIcon.tsx
View file

@ -1,35 +0,0 @@
import React from "react";
export interface props {
size: number;
color: string;
}
export default function TotalProductsIcon(props: props) {
return (
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-packages"
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M7 16.5l-5 -3l5 -3l5 3v5.5l-5 3z"></path>
<path d="M2 13.5v5.5l5 3"></path>
<path d="M7 16.545l5 -3.03"></path>
<path d="M17 16.5l-5 -3l5 -3l5 3v5.5l-5 3z"></path>
<path d="M12 19l5 3"></path>
<path d="M17 16.5l5 -3"></path>
<path d="M12 13.5v-5.5l-5 -3l5 -3l5 3v5.5"></path>
<path d="M7 5.03v5.455"></path>
<path d="M12 8l5 -3"></path>
</svg>
</div>
);
}

43
src/components/Login/Login.tsx
View file

@ -1,43 +0,0 @@
import React, { useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { toggle } from "../../Features/Login/LoginSlice";
import { Button } from "@mui/material";
import styles from "../../styles";
export interface state {
logged_in: {
value: boolean;
};
}
export default function Login() {
const logged_in = useSelector((state: state) => state.logged_in.value);
const [status, setStatus] = useState("Not logged in");
const dispatch = useDispatch();
async function login() {
await dispatch(toggle());
if (logged_in) {
setStatus("Logged in");
} else {
setStatus("Not logged in");
}
await console.log("test " + logged_in);
}
if (logged_in) {
return <p style={styles.text}>Welcome Jophiel</p>;
} else {
return (
<div>
<Button
onClick={login}
value="Login"
variant="contained"
style={styles.login_button}
>
<p style={styles.text}>Login</p>
</Button>
</div>
);
}
}

38
src/components/Logout/Logout.tsx
View file

@ -1,38 +0,0 @@
import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { toggle } from "../../Features/Login/LoginSlice";
import { Button } from "@mui/material";
import styles from "../../styles";
export interface state {
logged_in: {
value: boolean;
};
}
export interface props {
children: React.ReactNode;
}
export default function Logout(props: props) {
const logged_in = useSelector((state: state) => state.logged_in.value);
const dispatch = useDispatch();
async function login() {
await dispatch(toggle());
await console.log("test " + logged_in);
}
return (
<div style={{ paddingTop: "40vh" }}>
<Button
onClick={login}
value="Log out"
variant="contained"
style={styles.logout_button}
>
{props.children}
<p style={styles.text}>Log Out</p>
</Button>
</div>
);
}

102
src/components/Sidebar/Sidebar.tsx
View file

@ -1,102 +0,0 @@
import React from "react";
import styles from "../../styles";
import { useNavigate } from "react-router-dom";
import { useSelector } from "react-redux";
import SidebarButton from "../SidebarButton/SidebarButton";
import HomeIcon from "../Icons/HomeIcon/HomeIcon";
import ProductsIcon from "../Icons/ProductsIcon/ProductsIcon";
import Logout from "../Logout/Logout";
import InventoryIcon from "../Icons/InventoryIcon/InventoryIcon";
import LogsIcon from "../Icons/LogsIcon/LogsIcon";
import LogoutIcon from "../Icons/LogoutIcon/LogoutIcon";
export interface state {
logged_in: {
value: boolean;
};
}
export default function Sidebar() {
const navigate = useNavigate();
const logged_in = useSelector((state: state) => state.logged_in.value);
if (!logged_in) {
return (
<div style={styles.sidebar_container}>
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "flex-end",
}}
>
<div
style={{
position: "relative",
display: "flex",
flexDirection: "column",
justifyContent: "flex-start",
}}
>
<SidebarButton onClick={() => navigate("/")} name="Dashboard">
<HomeIcon size={4} color="white" />
</SidebarButton>
<SidebarButton
onClick={() => navigate("/Products")}
name="Products"
>
<ProductsIcon size={4} color="white" />
</SidebarButton>
<SidebarButton
onClick={() => navigate("/Inventory")}
name="Inventory"
>
<InventoryIcon size={4} color="white" />
</SidebarButton>
</div>
</div>
</div>
);
} else {
return (
<div style={styles.sidebar_container}>
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "flex-end",
}}
>
<div
style={{
position: "relative",
display: "flex",
flexDirection: "column",
justifyContent: "flex-start",
}}
>
<SidebarButton onClick={() => navigate("/")} name="Dashboard">
<HomeIcon size={4} color="white" />
</SidebarButton>
<SidebarButton
onClick={() => navigate("/Products")}
name="Products"
>
<ProductsIcon size={4} color="white" />
</SidebarButton>
<SidebarButton
onClick={() => navigate("/Inventory")}
name="Inventory"
>
<InventoryIcon size={4} color="white" />
</SidebarButton>
<SidebarButton onClick={() => navigate("/Logs")} name="Logs">
<LogsIcon size={4} color="white" />
</SidebarButton>
<Logout>
<LogoutIcon size={4} color="white" />
</Logout>
</div>
</div>
</div>
);
}
}

27
src/components/SidebarButton/SidebarButton.tsx
View file

@ -1,27 +0,0 @@
import React from "react";
import { Button } from "@mui/material";
import styles from "../../styles";
export interface props {
name: string;
onClick: any;
children: React.ReactNode;
}
export default function SidebarButton(props: props) {
return (
<div
style={{
paddingBottom: 16,
}}
>
<Button
onClick={props.onClick}
variant="contained"
style={styles.sidebar_button}
>
{props.children}
<p style={styles.text}>{props.name}</p>
</Button>
</div>
);
}

104
src/routes/Dashboard/Dashboard.tsx
View file

@ -1,104 +0,0 @@
import React from "react";
import TotalProductsIcon from "../../Components/Icons/TotalProductsIcon/TotalProductsIcon";
import LowStockIcon from "../../Components/Icons/LowStockIcon/LowStockIcon";
import StatsIcon from "../../Components/Icons/StatsIcon/StatsIcon";
import LogsIcon from "../../Components/Icons/LogsIcon/LogsIcon";
import "../../index.css";
import styles from "../../styles";
import HomeIcon from "../../Components/Icons/HomeIcon/HomeIcon";
import ColoredCube from "../../Components/ColoredCube/ColoredCube";
import RecentlyAddedIcon from "../../Components/Icons/RecentlyAddedIcon/RecentlyAddedIcon";
export default function Dashboard() {
return (
<div style={{ margin: 32, height: "100%" }}>
<div style={styles.flex_row}>
<HomeIcon size={8} color="white" />
<h1 style={styles.text_large}>Dashboard</h1>
</div>
<div style={{ display: "flex", flexDirection: "row" }}>
<div style={{ flex: 7 }}>
<div style={styles.flex_column}>
<div style={{ ...styles.widget, ...{ flex: 5 } }}>
<div style={styles.content_row}>
<TotalProductsIcon size={8} color="white" />
<h1 style={styles.text_extra_large}>Total Products</h1>
</div>
<h1 style={styles.text_large}>2546 Unique Items</h1>
<h1 style={styles.text_large}>In inventory</h1>
</div>
<div style={styles.flex_row}>
<div style={{ ...styles.widget, ...{ flex: 6 } }}>
<div style={styles.content_row}>
<StatsIcon size={8} color="white" />
<h1 style={styles.text_large}>Current Session</h1>
</div>
<div style={styles.content_row}>
<ColoredCube size={3} color="#a48e41" />
<h1 style={styles.text_large}>Added</h1>
</div>
<h1 style={styles.text_large}>254</h1>
<div style={styles.content_row}>
<ColoredCube size={3} color="#a44141" />
<h1 style={styles.text_large}>Removed</h1>{" "}
</div>
</div>
<div style={{ ...styles.flex_column, ...{ flex: 4 } }}>
<div style={{ ...styles.widget, ...{ flex: 1 } }}>
<div style={styles.content_row}>
<LowStockIcon size={8} color="white" />
<h1 style={styles.text_medium}>Low Stock</h1>
</div>
<h1 style={styles.text_medium}>Canned Pagmamahal</h1>
<h1 style={styles.text_tiny}>In Stock: 3</h1>
</div>
<div style={{ ...styles.widget, ...{ flex: 1 } }}>
<div style={styles.content_row}>
<RecentlyAddedIcon size={8} color="white" />
<h1 style={styles.text_medium}>Recently Added</h1>
</div>
<h1 style={styles.text_medium}>Zidane's Water</h1>
<h1 style={styles.text_tiny}>Added 02/17/2023</h1>
</div>
</div>
</div>
</div>
</div>
<div style={{ flex: 3 }}>
<div style={styles.widget}>
<div style={styles.content_row}>
<LogsIcon size={8} color="white" />
<div style={styles.wrapper_column}>
<h1 style={styles.text_medium}>Recent</h1>
<h1 style={styles.text_medium}>Transactions</h1>
</div>
</div>
<div style={{ marginBottom: "2vh" }} />
<h1 style={styles.text}>Kopiko Blanca</h1>
<h1 style={styles.text_small}>Added: 96</h1>
<h1 style={styles.text_small}>Removed: 105</h1>
<h1 style={styles.text_tiny}>02/17/2023</h1>
<div style={{ marginBottom: "2vh" }} />
<h1 style={styles.text}>Zidane's Water</h1>
<h1 style={styles.text_small}>Added: 49</h1>
<h1 style={styles.text_small}>Removed: 24</h1>
<h1 style={styles.text_tiny}>02/17/2023</h1>
<div style={{ marginBottom: "2vh" }} />
<h1 style={styles.text}>Dan's Beefed Corn</h1>
<h1 style={styles.text_small}>Added: 32</h1>
<h1 style={styles.text_small}>Removed: 64</h1>
<h1 style={styles.text_tiny}>02/17/2023</h1>
<div style={{ marginBottom: "2vh" }} />
<div style={styles.content_column}>
<h1 style={styles.text}>Canned</h1>
<h1 style={styles.text}>Pagmamahal</h1>
</div>
<h1 style={styles.text_small}>Added: 0</h1>
<h1 style={styles.text_small}>Removed: 60</h1>
<h1 style={styles.text_tiny}>02/17/2023</h1>
</div>
</div>
</div>
</div>
);
}

14
src/routes/Error/Error.tsx
View file

@ -1,14 +0,0 @@
import React from "react";
import styles from "../../styles";
import NotFoundIcon from "../../Components/Icons/NotFoundIcon/NotFoundIcon";
export default function Error() {
return (
<div style={styles.content_center}>
<div style={styles.content_column}>
<NotFoundIcon size={64} color="#a44141" />
<p style={styles.text}>Could not find the requested page</p>
</div>
</div>
);
}

13
src/routes/Products/Products.tsx
View file

@ -1,13 +0,0 @@
import React from "react";
import styles from "../../styles";
import ProductsIcon from "../../Components/Icons/ProductsIcon/ProductsIcon";
export default function Products() {
return (
<div style={{ margin: 32, height: "100%" }}>
<div style={styles.content_row}>
<ProductsIcon size={8} color="white" />
<h1 style={styles.text_large}>Products</h1>
</div>
</div>
);
}