- );
- }
- // Does it have children and not visible? Skip this entry and call this function for children passing path.
- else if (route.children && route.additionalProps.disableInNavbar) {
- return GenerateNavigationEntries(route.children, combinedPath);
- } else if (route.additionalProps.disableInNavbar) {
- return null;
- }
- // Make entry with `/{route.path}`
- else {
- return (
-
- );
-}
-
-export default AboutPage;
diff --git a/src/features/App.tsx b/src/features/App.tsx
index fc136c9..d4a7bb5 100644
--- a/src/features/App.tsx
+++ b/src/features/App.tsx
@@ -1,94 +1,15 @@
-import { HamburgerMenuIcon, SunIcon } from "@radix-ui/react-icons";
-import { useEffect, useState } from "react";
-import { Outlet } from "react-router-dom";
-import { main, navigation } from "../configure.tsx";
-import NavigationTree from "../components/NavigationTree.tsx";
-import Breadcrumbs from "../components/Breadcrumbs.tsx";
-import ConfirmationDialog from "../components/ConfirmationDialog/ConfirmationDialog.tsx";
+import { main } from "../configure";
+import Debugger from "./Debugger";
-/** Here is located global wrapper for entire application, here you canfind:
- * - Drawer - contains navigation buttons
- * - Navbar - contains hamburger menu and theme selector
- * - Outlet - contains active page content
- * - App theme controll
- */
function App() {
- const [theme, setTheme] = useState("adient");
- const [openDrawer, setOpenDrawer] = useState(false);
-
- useEffect(() => {
- document.querySelector("html")?.setAttribute("data-theme", theme);
- // To resolve this issue, you can use the import.meta.env object instead of process.env. The import.meta.env object is provided by Vite.js and allows you to access environment variables in your code.
- document.title = import.meta.env.VITE_APP_NAME;
- }, [theme, openDrawer]);
-
- // Function on click drawer hamburger button
- const handleDrawerStatus = () => {
- setOpenDrawer(!openDrawer);
- };
-
return (
-
- {/* Root drawer container */}
- {/* Drawer opening is controlled directly via css prop and next via local useState variable */}
-
- {/* A hidden checkbox to toggle the visibility of the drawer */}
-
- {/* The actual drawer content */}
-
- {/* Navbar */}
-
- {/* Left side navbar */}
-
-
-
{main.program_name}
-
- {/* Right side navbar */}
-
-
-
-
- THEMEs HERE
-
-
-
-
-
- {/* App/active_drawer content */}
-
- {/*Automatically generated breadcrumbs based on routing table from configuration file and active path*/}
- {/*Get active route and find it in routing file*/}
-
-
-
-
- {/* Drawer sidebar wrapper */}
-
- {/* Dark overlay on mobile devices, clickable to close drawer */}
-
-
-
-
-
-
+
App
+
App
+
+
+ {main.program_name} v{main.program_version}
+
);
}
diff --git a/src/features/Debugger.tsx b/src/features/Debugger.tsx
index 3388869..6c543c2 100644
--- a/src/features/Debugger.tsx
+++ b/src/features/Debugger.tsx
@@ -1,5 +1,4 @@
-import { useLocation } from "react-router-dom";
-import { flatRoutes } from "../configure";
+import { useLocation } from "wouter";
function Debugger() {
const windowLocation = window.location.pathname;
@@ -10,7 +9,6 @@ function Debugger() {
Flat Routes
- {JSON.stringify(flatRoutes)}Locations
@@ -22,7 +20,6 @@ function Debugger() {
Routes
- {JSON.stringify(flatRoutes)}
);
diff --git a/src/features/Home/HomePage.tsx b/src/features/Home/HomePage.tsx
deleted file mode 100644
index 2d4d6bf..0000000
--- a/src/features/Home/HomePage.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-function HomePage() {
- return <>HOME;
-}
-
-export default HomePage;
diff --git a/src/features/Login/LoginPage.tsx b/src/features/Login/LoginPage.tsx
deleted file mode 100644
index 770d52b..0000000
--- a/src/features/Login/LoginPage.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useState } from "react";
-import { SubmitErrorHandler, SubmitHandler, useForm } from "react-hook-form";
-import { useNavigate } from "react-router-dom";
-import { z } from "zod";
-
-type Input = {
- username: string;
- password: string;
-};
-const InputSchema = z.object({
- username: z.string().min(4, "Username must be at least 4 characters"),
- password: z
- .string()
- .regex(/[A-Za-z\d@$!%*#?&]{4,}/, "Minimum four characters")
- .regex(/(?=.*[A-Z])/, "At least one big letter")
- .regex(/(?=.*\d)/, "At least one number")
- .regex(/(?=.*[@$!%*#?&])/, "At least one special character"),
-});
-
-function LoginPage() {
- const [isSubmitting, setIsSubmitting] = useState(false);
- const {
- register,
- handleSubmit,
- formState: { errors },
- } = useForm({
- resolver: zodResolver(InputSchema),
- });
- const navigate = useNavigate();
- const onSubmit: SubmitHandler = (data) => {
- if (data.username === "admin" && data.password === "A0m!n") {
- console.log("Login successful!", 3);
- navigate("/products");
- } else {
- console.log("Wrong username or password");
- }
- setIsSubmitting(false);
- };
- const onError: SubmitErrorHandler = () => {
- console.log("Errors in form fields");
- };
-
- return (
-
-
-
- );
-}
-
-export default LoginPage;
diff --git a/src/utils/Redirect.tsx b/src/utils/Redirect.tsx
deleted file mode 100644
index 64a35d7..0000000
--- a/src/utils/Redirect.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { useEffect } from "react";
-import { useNavigate } from "react-router-dom";
-
-/**
- * @description Redirects to the given page
- * @param {string} to - The page to redirect to
- */
-function Redirect({ to }: { to: string }) {
- // The navigate function from useNavigate is used to navigate to the given page
- const navigate = useNavigate();
- // useEffect is used to navigate to the given page when the component mounts
- useEffect(() => {
- navigate(to);
- });
- // A null element is returned because the component does not need to render anything
- return null;
-}
-export default Redirect;
-
-Used technologies:
-
-| Name | Description |
-|--------|---|
-| [TypeScript](https://www.typescriptlang.org/) | Main Language |
-| [Vite](https://vitejs.dev/) | Bundler |
-| [React](https://reactjs.org/) | Framework |
-| [TailwindCSS](https://tailwindcss.com/) | CSS Framework |
-| [PostCSS](https://postcss.org/) | CSS Processor |
-| [DaisyUI](https://daisyui.com/) | A tool for transforming CSS with JavaScript |
-| [RadixUI](https://www.radix-ui.com/) | Unstyled, accessible components for building high‑quality design systems and web apps in React |
-| [Zod](https://zod.dev/) | TypeScript-first schema validation with static type inference |
-| [React Router](https://reactrouter.com/) | Routing. Docs are lame, use [github](https://github.com/remix-run/react-router/tree/main) |
-> Planned: [React Hook Form](https://react-hook-form.com/) Forms
-
-Linting, formatting and code editor:
-
-- [VSCode](https://code.visualstudio.com/)
-- [ESlint](https://eslint.org/)
-- [Prettier](https://prettier.io/)
-
-> Always up-to-date tools rather than stable old.
-> It's not intended to be shared, but you can use it if you want.
-
-ToDo:
-[ ] Add tests
-[?] Add CI/CD
-[?] Add SSR (Server Side Rendering)
+- [Tailwind Elements](https://tw-elements.com/) - main styling
+- [react-icons](https://react-icons.github.io/react-icons/) - big icon library
+- [recharts](https://echarts.apache.org/) - charts library
+- [wouter](https://github.com/molefrog/wouter) - router library
+- [react-hook-form](https://github.com/react-hook-form/resolvers#zod) with [zod](https://zod.dev/) resolver - forms library
+- [axios](https://axios-http.com/) - http request library
+- [@tanstack/react-table](https://tanstack.com/table/v8/docs/adapters/react-table) - advanced table library
## Usage
@@ -41,8 +14,6 @@ ToDo:
2. run: `bun run dev`
3. To build for production, run: `bun run build`
-> Use 
-