Fix bad ui to elegant_ui

.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

README.md

@@ -0,0 +1,135 @@
+## GlitchWave open-source react project
+
+### [Table of contents](table-fo-contents)
+- [What is GlitchWave?](#what-is-glitchwave)
+- [Features](#features)
+- [Work with GlitchWave](#work-with-glitchwave)
+
+![GlitchWave demo screenshot](https://github.com/abura1han/GlitchWave/blob/main/Screenshot.png)
+![](https://github.com/abura1han/GlitchWave/blob/main/Lighthouse-performance-score.png)
+
+## What is GlitchWave?
+GlitchWave is an open-source frontend project. It makes our life easy to work on the admin panel. No more work from scratch. Work with premaid admin panel. Easy to customize, add, remove features.
+
+## Features
+- Build with popular and latest technologys (`ReactJs, React-router-dom, TailwindCss3`).
+- All device responsive.
+- Minimal beautifyl UI. UX ready.
+- Optimized for performence.
+
+## Work with GlitchWave
+### Site configaration `./src/configs.json` <br/>
+`proxy` your backend server url. <br />
+`defaultProductImage` will show if any product image not provided.
+```json
+{
+    "sitename": "GlitchWave",
+    "description": "B2B eCommerce administration",
+    "proxy": "https://abura1han.github.io",
+    "defaultProductImage": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQOQJFJUWQbEuCOddUPTRU9xBJarkenHXq9dw&usqp=CAU", 
+    "userName": "Abu Raihan",
+    "userAvatar": "https://avatars.githubusercontent.com/u/74248037?v=4"
+}
+```
+
+### Work with GlitchWave page `./src/pages/PageWrapper.tsx`
+```js
+/**
+ * Create a new component and wrap that with PageWrapper
+ * It will autometacally import header, sidenav to your page
+ */
+const MyNewPage: React.FC = () => {
+  return (
+    <PageWrapper>
+      <div>
+        <h2>Hello world!</h2>
+        <button>Click me</button>
+      </div>
+    </PageWrapper>
+    )
+}
+```
+
+### Add page link to sidenav.
+GlitchWave provide a context to work with sidenav links `./src/context/PageContext.tsx`
+```js
+import {PageListContext} from "../context/PageContext.tsx";
+imort React, {useContext, useState} from "react";
+
+const MyComponent: React.FC = () => {
+  const {pageList, setPageList} = useContext(PageListContext);
+
+  // Read all pages
+  console.log(pageList);
+
+  // Add new page
+  useEffect(() => {
+    setPageList((prevPages) => [...prevPages, {label: "My brand new page", slug: "/my-brand-new-page", icon: "page"}])
+  }, [setPageList])
+
+  return (
+    <ul>
+      {pageList.map(({label, slug, icon}, i) => <li key={i}>{label}</li>)}
+    </ul>
+  )
+}
+```
+
+### Sort post by tag
+GlitchWave provide a component to work with Tagged posts/contents. `./src/components/SortBYTag.tsx`. <br />
+Props
+  - `tags` // Array ["Tag1", "Tag2"]
+  - `defaultActiveIndex` // Number 1/2
+```js
+import SortByTag from "../components/SortByTag.tsx";
+
+const MyComponent: React.FC = () => {
+  return (
+    <div>
+      <SortByTag tags={["All posts", "Trending posts", "New posts"]} />
+
+      {/* Custom default active button */}
+      <SortByTag tags={["All posts", "Trending posts", "New posts"]} defaultActiveIndex={2} />
+    </div>
+  )
+}
+```
+
+### Toggle button
+GlitchWave provide a component to work with Toggle button. `./src/components/ToggleBtn.tsx`. <br />
+It takes three props
+- `btnOnLabel`
+- `btnOffLabel`
+- `btnOnByDefault // Optional, default false `
+```js
+import ToggleBtn from "../components/SortByTag.tsx";
+
+const MyComponent: React.FC = () => {
+  return (
+    <div>
+      <ToggleBtn btnOnLabel="On" btnOffLabel="Off" btnOnByDefault={true}  />
+    </div>
+  )
+}
+```
+
+### Collapsible section
+GlitchWave provide a component to work with collapsible section. `./src/components/Collapse.tsx`. <br />
+It takes four props
+- `name: String; // Name of the Collapseable section`
+- `btnLabel: String; // Label of clickable button to collapse`
+- `openByDefault?: boolean; // Optional, default false`
+- `children: React.ReactChild; // After click what content to show`
+```js
+import Collapse from "../components/Collapse.tsx";
+
+const MyComponent: React.FC = () => {
+  return (
+    <div>
+      <Collapse name="My collapse" btnLabel="Toggle" openByDefault={true}>
+        <div>Hello world!</div>
+      </Collapse>
+    </div>
+  )
+}
+```

package.json

@@ -0,0 +1,49 @@
+{
+  "name": "healthos",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.0.0",
+    "@testing-library/user-event": "^13.2.1",
+    "@types/jest": "^27.0.1",
+    "@types/node": "^16.7.13",
+    "@types/react": "^17.0.20",
+    "@types/react-dom": "^17.0.9",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-router-dom": "^6.2.2",
+    "react-scripts": "5.0.0",
+    "typescript": "^4.4.2",
+    "web-vitals": "^2.1.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.4",
+    "postcss": "^8.4.12",
+    "tailwindcss": "^3.0.23"
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

public/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
+      rel="stylesheet">
+
+    <title>GlitchWave</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "GlitchWave",
+  "name": "Manage your online store",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

src/App.css

@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

src/App.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from "react";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import LoginPage from "./pages/LoginPage";
+import DashboardPage from "./pages/DashboardPage";
+import NotFoundPage from "./pages/404Page";
+import CustomerListPage from "./pages/CustomerListPage";
+import ManageOrderPage from "./pages/ManageOrderPage";
+import PaymentPage from "./pages/PaymentPage";
+import ProductPage from "./pages/ProductPage";
+import OrderDetailsPage from "./pages/OrderDetailsPage";
+import { PageListContext, PageType } from "./contexts/PageContext";
+
+/**
+ * App routes controller
+ */
+const App: React.FC = () => {
+  // Pagelist context for if any time we need to update form another child components
+  const [pageList, setPageList] = useState<PageType[]>([
+    { label: "Dashboard", slug: "/", icon: "dashboard" },
+    { label: "Customer list", slug: "/customer-list", icon: "people_alt" },
+    { label: "Manage orders", slug: "/manage-orders", icon: "leaderboard" },
+    {
+      label: "Online payments",
+      slug: "/online-payments",
+      icon: "account_balance_wallet",
+    },
+    { label: "Products", slug: "/products", icon: "shop_2" },
+    // Profile must be the last element of the array
+    { label: "Settings", slug: "/settings", icon: "settings" },
+  ]);
+
+  return (
+    <PageListContext.Provider value={{ pageList, setPageList }}>
+      <BrowserRouter>
+        <Routes>
+          {/* Customer lists */}
+          <Route
+            path="/customer-list"
+            caseSensitive
+            element={<CustomerListPage />}
+          />
+
+          {/* Manage orders */}
+          <Route
+            path="/manage-orders"
+            caseSensitive
+            element={<ManageOrderPage />}
+          />
+
+          {/* Online payments */}
+          <Route
+            path="/online-payments"
+            caseSensitive
+            element={<PaymentPage />}
+          />
+
+          {/* Order details */}
+          <Route
+            path="/order/:productId"
+            caseSensitive
+            element={<OrderDetailsPage />}
+          />
+
+          {/* Products */}
+          <Route path="/products" caseSensitive element={<ProductPage />} />
+
+          {/* Login page */}
+          <Route path="/login" caseSensitive element={<LoginPage />} />
+
+          {/* Home page */}
+          <Route path="/" element={<DashboardPage />} />
+
+          {/* 404 page not found */}
+          <Route path="*" element={<NotFoundPage />} />
+        </Routes>
+      </BrowserRouter>
+    </PageListContext.Provider>
+  );
+};
+
+export default App;