From 101a8e8ae61d8759305700adcb8a7543c3484fdc Mon Sep 17 00:00:00 2001 From: keannu125 Date: Fri, 24 Feb 2023 17:22:12 +0800 Subject: [PATCH] Readded directories with uppercase --- src/Components/ColoredCube/ColoredCube.tsx | 20 ++++ src/Components/Container/Container.tsx | 20 ++++ src/Components/Header/Header.tsx | 18 +++ src/Components/Icons/AppLogo/AppLogo.tsx | 31 ++++++ src/Components/Icons/HomeIcon/HomeIcon.tsx | 29 +++++ .../Icons/InventoryIcon/InventoryIcon.tsx | 31 ++++++ .../Icons/LogoutIcon/LogoutIcon.tsx | 28 +++++ src/Components/Icons/LogsIcon/LogsIcon.tsx | 32 ++++++ .../Icons/LowStockIcon/LowStockIcon.tsx | 30 +++++ .../Icons/NotFoundIcon/NotFoundIcon.tsx | 31 ++++++ .../Icons/ProductsIcon/ProductsIcon.tsx | 31 ++++++ .../RecentlyAddedIcon/RecentlyAddedIcon.tsx | 30 +++++ src/Components/Icons/StatsIcon/StatsIcon.tsx | 30 +++++ .../TotalProductsIcon/TotalProductsIcon.tsx | 35 ++++++ src/Components/Login/Login.tsx | 43 ++++++++ src/Components/Logout/Logout.tsx | 38 +++++++ src/Components/Sidebar/Sidebar.tsx | 102 +++++++++++++++++ .../SidebarButton/SidebarButton.tsx | 27 +++++ src/Routes/Dashboard/Dashboard.tsx | 104 ++++++++++++++++++ src/Routes/Error/Error.tsx | 14 +++ src/Routes/Products/Products.tsx | 13 +++ 21 files changed, 737 insertions(+) create mode 100644 src/Components/ColoredCube/ColoredCube.tsx create mode 100644 src/Components/Container/Container.tsx create mode 100644 src/Components/Header/Header.tsx create mode 100644 src/Components/Icons/AppLogo/AppLogo.tsx create mode 100644 src/Components/Icons/HomeIcon/HomeIcon.tsx create mode 100644 src/Components/Icons/InventoryIcon/InventoryIcon.tsx create mode 100644 src/Components/Icons/LogoutIcon/LogoutIcon.tsx create mode 100644 src/Components/Icons/LogsIcon/LogsIcon.tsx create mode 100644 src/Components/Icons/LowStockIcon/LowStockIcon.tsx create mode 100644 src/Components/Icons/NotFoundIcon/NotFoundIcon.tsx create mode 100644 src/Components/Icons/ProductsIcon/ProductsIcon.tsx create mode 100644 src/Components/Icons/RecentlyAddedIcon/RecentlyAddedIcon.tsx create mode 100644 src/Components/Icons/StatsIcon/StatsIcon.tsx create mode 100644 src/Components/Icons/TotalProductsIcon/TotalProductsIcon.tsx create mode 100644 src/Components/Login/Login.tsx create mode 100644 src/Components/Logout/Logout.tsx create mode 100644 src/Components/Sidebar/Sidebar.tsx create mode 100644 src/Components/SidebarButton/SidebarButton.tsx create mode 100644 src/Routes/Dashboard/Dashboard.tsx create mode 100644 src/Routes/Error/Error.tsx create mode 100644 src/Routes/Products/Products.tsx diff --git a/src/Components/ColoredCube/ColoredCube.tsx b/src/Components/ColoredCube/ColoredCube.tsx new file mode 100644 index 0000000..6e34a1f --- /dev/null +++ b/src/Components/ColoredCube/ColoredCube.tsx @@ -0,0 +1,20 @@ +import { PropaneSharp } from "@mui/icons-material"; +import React from "react"; + +export interface props { + color: string; + size: number; +} +export default function ColoredCube(props: props) { + return ( +
+
+
+ ); +} diff --git a/src/Components/Container/Container.tsx b/src/Components/Container/Container.tsx new file mode 100644 index 0000000..89d6a63 --- /dev/null +++ b/src/Components/Container/Container.tsx @@ -0,0 +1,20 @@ +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 ( +
+
+
+ +
+
{props.children}
+
+ ); +} diff --git a/src/Components/Header/Header.tsx b/src/Components/Header/Header.tsx new file mode 100644 index 0000000..7c3e850 --- /dev/null +++ b/src/Components/Header/Header.tsx @@ -0,0 +1,18 @@ +import React from "react"; +import AppLogo from "../Icons/AppLogo/AppLogo"; +import Login from "../Login/Login"; +import styles from "../../styles"; + +export default function Header() { + return ( +
+
+ +

Ivy

+
+
+ +
+
+ ); +} diff --git a/src/Components/Icons/AppLogo/AppLogo.tsx b/src/Components/Icons/AppLogo/AppLogo.tsx new file mode 100644 index 0000000..4926766 --- /dev/null +++ b/src/Components/Icons/AppLogo/AppLogo.tsx @@ -0,0 +1,31 @@ +import React from "react"; + +export interface props { + size: number; + color: string; +} +export default function AppLogo(props: props) { + return ( +
+ + + + + + + + +
+ ); +} diff --git a/src/Components/Icons/HomeIcon/HomeIcon.tsx b/src/Components/Icons/HomeIcon/HomeIcon.tsx new file mode 100644 index 0000000..2f9bf42 --- /dev/null +++ b/src/Components/Icons/HomeIcon/HomeIcon.tsx @@ -0,0 +1,29 @@ +import React from "react"; + +export interface props { + size: number; + color: string; +} +export default function HomeIcon(props: props) { + return ( +
+ + + + + + +
+ ); +} diff --git a/src/Components/Icons/InventoryIcon/InventoryIcon.tsx b/src/Components/Icons/InventoryIcon/InventoryIcon.tsx new file mode 100644 index 0000000..669ca09 --- /dev/null +++ b/src/Components/Icons/InventoryIcon/InventoryIcon.tsx @@ -0,0 +1,31 @@ +import React from "react"; + +export interface props { + size: number; + color: string; +} +export default function InventoryIcon(props: props) { + return ( +
+ + + + + + + + +
+ ); +} diff --git a/src/Components/Icons/LogoutIcon/LogoutIcon.tsx b/src/Components/Icons/LogoutIcon/LogoutIcon.tsx new file mode 100644 index 0000000..e986e10 --- /dev/null +++ b/src/Components/Icons/LogoutIcon/LogoutIcon.tsx @@ -0,0 +1,28 @@ +import React from "react"; + +export interface props { + size: number; + color: string; +} +export default function LogoutIcon(props: props) { + return ( +
+ + + + + +
+ ); +} diff --git a/src/Components/Icons/LogsIcon/LogsIcon.tsx b/src/Components/Icons/LogsIcon/LogsIcon.tsx new file mode 100644 index 0000000..d125858 --- /dev/null +++ b/src/Components/Icons/LogsIcon/LogsIcon.tsx @@ -0,0 +1,32 @@ +import React from "react"; + +export interface props { + size: number; + color: string; +} +export default function LogsIcon(props: props) { + return ( +
+ + + + + + + + + +
+ ); +} diff --git a/src/Components/Icons/LowStockIcon/LowStockIcon.tsx b/src/Components/Icons/LowStockIcon/LowStockIcon.tsx new file mode 100644 index 0000000..f60ff6f --- /dev/null +++ b/src/Components/Icons/LowStockIcon/LowStockIcon.tsx @@ -0,0 +1,30 @@ +import React from "react"; + +export interface props { + size: number; + color: string; +} +export default function LowStockIcon(props: props) { + return ( +
+ + + + + + + +
+ ); +} diff --git a/src/Components/Icons/NotFoundIcon/NotFoundIcon.tsx b/src/Components/Icons/NotFoundIcon/NotFoundIcon.tsx new file mode 100644 index 0000000..6a395b6 --- /dev/null +++ b/src/Components/Icons/NotFoundIcon/NotFoundIcon.tsx @@ -0,0 +1,31 @@ +import React from "react"; + +export interface props { + size: number; + color: string; +} +export default function NotFoundIcon(props: props) { + return ( +
+ + + + + + + + +
+ ); +} diff --git a/src/Components/Icons/ProductsIcon/ProductsIcon.tsx b/src/Components/Icons/ProductsIcon/ProductsIcon.tsx new file mode 100644 index 0000000..74d8832 --- /dev/null +++ b/src/Components/Icons/ProductsIcon/ProductsIcon.tsx @@ -0,0 +1,31 @@ +import React from "react"; + +export interface props { + size: number; + color: string; +} +export default function ProductsIcon(props: props) { + return ( +
+ + + + + + + + +
+ ); +} diff --git a/src/Components/Icons/RecentlyAddedIcon/RecentlyAddedIcon.tsx b/src/Components/Icons/RecentlyAddedIcon/RecentlyAddedIcon.tsx new file mode 100644 index 0000000..a5f4493 --- /dev/null +++ b/src/Components/Icons/RecentlyAddedIcon/RecentlyAddedIcon.tsx @@ -0,0 +1,30 @@ +import React from "react"; + +export interface props { + size: number; + color: string; +} +export default function RecentlyAddedIcon(props: props) { + return ( +
+ + + + + + + +
+ ); +} diff --git a/src/Components/Icons/StatsIcon/StatsIcon.tsx b/src/Components/Icons/StatsIcon/StatsIcon.tsx new file mode 100644 index 0000000..02f600d --- /dev/null +++ b/src/Components/Icons/StatsIcon/StatsIcon.tsx @@ -0,0 +1,30 @@ +import React from "react"; + +export interface props { + size: number; + color: string; +} +export default function StatsIcon(props: props) { + return ( +
+ + + + + + + +
+ ); +} diff --git a/src/Components/Icons/TotalProductsIcon/TotalProductsIcon.tsx b/src/Components/Icons/TotalProductsIcon/TotalProductsIcon.tsx new file mode 100644 index 0000000..f799772 --- /dev/null +++ b/src/Components/Icons/TotalProductsIcon/TotalProductsIcon.tsx @@ -0,0 +1,35 @@ +import React from "react"; + +export interface props { + size: number; + color: string; +} +export default function TotalProductsIcon(props: props) { + return ( +
+ + + + + + + + + + + + +
+ ); +} diff --git a/src/Components/Login/Login.tsx b/src/Components/Login/Login.tsx new file mode 100644 index 0000000..213121e --- /dev/null +++ b/src/Components/Login/Login.tsx @@ -0,0 +1,43 @@ +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

Welcome Jophiel

; + } else { + return ( +
+ +
+ ); + } +} diff --git a/src/Components/Logout/Logout.tsx b/src/Components/Logout/Logout.tsx new file mode 100644 index 0000000..1fcfef1 --- /dev/null +++ b/src/Components/Logout/Logout.tsx @@ -0,0 +1,38 @@ +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 ( +
+ +
+ ); +} diff --git a/src/Components/Sidebar/Sidebar.tsx b/src/Components/Sidebar/Sidebar.tsx new file mode 100644 index 0000000..cfbc502 --- /dev/null +++ b/src/Components/Sidebar/Sidebar.tsx @@ -0,0 +1,102 @@ +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 ( +
+
+
+ navigate("/")} name="Dashboard"> + + + navigate("/Products")} + name="Products" + > + + + navigate("/Inventory")} + name="Inventory" + > + + +
+
+
+ ); + } else { + return ( +
+
+
+ navigate("/")} name="Dashboard"> + + + navigate("/Products")} + name="Products" + > + + + navigate("/Inventory")} + name="Inventory" + > + + + navigate("/Logs")} name="Logs"> + + + + + +
+
+
+ ); + } +} diff --git a/src/Components/SidebarButton/SidebarButton.tsx b/src/Components/SidebarButton/SidebarButton.tsx new file mode 100644 index 0000000..f8534c6 --- /dev/null +++ b/src/Components/SidebarButton/SidebarButton.tsx @@ -0,0 +1,27 @@ +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 ( +
+ +
+ ); +} diff --git a/src/Routes/Dashboard/Dashboard.tsx b/src/Routes/Dashboard/Dashboard.tsx new file mode 100644 index 0000000..55f11f1 --- /dev/null +++ b/src/Routes/Dashboard/Dashboard.tsx @@ -0,0 +1,104 @@ +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 ( +
+
+ +

Dashboard

+
+
+
+
+
+
+ +

Total Products

+
+

2546 Unique Items

+

In inventory

+
+
+
+
+ +

Current Session

+
+
+ +

Added

+
+

254

+
+ +

Removed

{" "} +
+
+
+
+
+ +

Low Stock

+
+

Canned Pagmamahal

+

In Stock: 3

+
+
+
+ +

Recently Added

+
+

Zidane's Water

+

Added 02/17/2023

+
+
+
+
+
+
+
+
+ +
+

Recent

+

Transactions

+
+
+
+

Kopiko Blanca

+

Added: 96

+

Removed: 105

+

02/17/2023

+
+

Zidane's Water

+

Added: 49

+

Removed: 24

+

02/17/2023

+
+

Dan's Beefed Corn

+

Added: 32

+

Removed: 64

+

02/17/2023

+
+
+

Canned

+

Pagmamahal

+
+

Added: 0

+

Removed: 60

+

02/17/2023

+
+
+
+
+ ); +} diff --git a/src/Routes/Error/Error.tsx b/src/Routes/Error/Error.tsx new file mode 100644 index 0000000..cc094c3 --- /dev/null +++ b/src/Routes/Error/Error.tsx @@ -0,0 +1,14 @@ +import React from "react"; +import styles from "../../styles"; +import NotFoundIcon from "../../Components/Icons/NotFoundIcon/NotFoundIcon"; + +export default function Error() { + return ( +
+
+ +

Could not find the requested page

+
+
+ ); +} diff --git a/src/Routes/Products/Products.tsx b/src/Routes/Products/Products.tsx new file mode 100644 index 0000000..2d0326e --- /dev/null +++ b/src/Routes/Products/Products.tsx @@ -0,0 +1,13 @@ +import React from "react"; +import styles from "../../styles"; +import ProductsIcon from "../../Components/Icons/ProductsIcon/ProductsIcon"; +export default function Products() { + return ( +
+
+ +

Products

+
+
+ ); +}