diff --git a/src/App.tsx b/src/App.tsx index 1f8b4a5..567eb03 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -22,6 +22,7 @@ import Activation from "./Routes/Activation/Activation"; import { QueryClient, QueryClientProvider } from "react-query"; import NewProduct from "./Routes/NewProduct/NewProduct"; import Register from "./Routes/Register/Register"; +import DailyView from "./Routes/DailyView/DailyView"; const queryClient = new QueryClient(); @@ -103,6 +104,14 @@ const router = createHashRouter([ ), }, + { + path: "/ActivityToday", + element: ( + + + + ), + }, ]); export default function App() { diff --git a/src/Components/Icons/TodayIcon/TodayIcon.tsx b/src/Components/Icons/TodayIcon/TodayIcon.tsx new file mode 100644 index 0000000..e6fe11f --- /dev/null +++ b/src/Components/Icons/TodayIcon/TodayIcon.tsx @@ -0,0 +1,27 @@ +import React from "react"; + +export interface props { + size: number; + color: string; +} +export default function TodayIcon(props: props) { + return ( + + + + + + + + + ); +} diff --git a/src/Components/Sidebar/Sidebar.tsx b/src/Components/Sidebar/Sidebar.tsx index f95da1f..971a402 100644 --- a/src/Components/Sidebar/Sidebar.tsx +++ b/src/Components/Sidebar/Sidebar.tsx @@ -9,6 +9,7 @@ import Logout from "../Logout/Logout"; import InventoryIcon from "../Icons/InventoryIcon/InventoryIcon"; import LogsIcon from "../Icons/LogsIcon/LogsIcon"; import LogoutIcon from "../Icons/LogoutIcon/LogoutIcon"; +import TodayIcon from "../Icons/TodayIcon/TodayIcon"; export interface state { logged_in: { @@ -18,88 +19,58 @@ export interface state { 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" - > - - - navigate("/Logs")} name="Logs"> - - -
-
-
- ); - } else { - return ( -
-
-
- navigate("/")} name="Dashboard"> - - - navigate("/Products")} - name="Products" - > - - - navigate("/Inventory")} - name="Inventory" - > - - - navigate("/Logs")} name="Logs"> - - - - - -
-
-
- ); + function LogoutButton() { + if (!logged_in) { + return
; + } else { + return ( + + + + ); + } } + return ( +
+
+
+ navigate("/")} name="Dashboard"> + + + navigate("/Products")} name="Products"> + + + navigate("/Inventory")} + name="Inventory" + > + + + navigate("/ActivityToday")} + name="Daily View" + > + + + navigate("/Logs")} name="Logs"> + + + +
+
+
+ ); } diff --git a/src/Routes/DailyView/DailyView.tsx b/src/Routes/DailyView/DailyView.tsx new file mode 100644 index 0000000..d26f460 --- /dev/null +++ b/src/Routes/DailyView/DailyView.tsx @@ -0,0 +1,90 @@ +import React, { useState } 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"; +import LoginChecker from "../../Components/LoginChecker/LoginChecker"; +import { useQuery } from "react-query"; +import { + GetLogs, + GetLowestStockedProduct, + GetProducts, +} from "../../Components/Api/Api"; +import { + OldSessionState, + ProductLog, + SessionTransactions, +} from "../../Interfaces/Interfaces"; +import { useSelector } from "react-redux"; +import LowestStockWidget from "../../Components/DashboardPage/LowestStockWidget/LowestStockWidget"; +import RecentlyAddedWidget from "../../Components/DashboardPage/RecentlyAddedWidget/RecentlyAddedWidget"; +import TotalProductsWidget from "../../Components/DashboardPage/TotalProductsWidget/TotalProductsWidget"; +import SessionStatsWidget from "../../Components/DashboardPage/SessionStatsWidget/SessionStatsWidget"; +import TodayIcon from "../../Components/Icons/TodayIcon/TodayIcon"; + +export default function DailyView() { + const logs = useQuery("logs", GetLogs, { retry: 0 }); + const products = useQuery("products", GetProducts, { retry: 0 }); + const lowest_stock_product = useQuery( + "lowest_stock_product", + GetLowestStockedProduct, + { + retry: 0, + } + ); + const old_session_checked = useSelector( + (state: OldSessionState) => state.old_session_checked.value + ); + if ( + logs.isLoading || + products.isLoading || + lowest_stock_product.isLoading || + !old_session_checked + ) { + return ( +
+ +
+ +

Daily View

+
+
+

+ Loading today's summary... +

+
+
+ ); + } + if (logs.error || products.error || lowest_stock_product.isError) { +
+ +
+ +

Daily View

+
+
+

+ Error loading today's summary +

+
+
; + } + return ( +
+ +
+ +

Daily View

+
+
+

Heh

+
+
+ ); +}