diff --git a/package.json b/package.json index 495d91e..2d6a14a 100755 --- a/package.json +++ b/package.json @@ -11,13 +11,12 @@ "dependencies": { "@formkit/auto-animate": "^0.7.0", "@jsreport/browser-client": "^3.1.0", - "firebase": "^9.8.4", + "firebase": "^10.0.0", "formik": "^2.2.9", "lodash": "^4.17.21", "moment": "^2.29.3", "react": "^18.0.0", "react-dom": "^18.0.0", - "react-haiku": "^2.0.3", "react-router-dom": "^6.3.0", "react-transition-group": "^4.4.5", "recharts": "^2.1.16" diff --git a/src/index.css b/src/index.css index d93af56..8a90c80 100755 --- a/src/index.css +++ b/src/index.css @@ -2,155 +2,4 @@ @tailwind components; -@tailwind utilities; - -@layer base { - td { - @apply border bg-white border-black text-center py-2; - } -} - -@layer components { - - .row { - @apply border bg-white border-black text-center py-2; - } - .header { - @apply border bg-gray-400 border-black text-center py-2 font-bold; - } - .page-conteiner { - @apply bg-slate-200 border-2 border-black p-2 m-16 rounded-md shadow-lg; - } - /* .form-input { - @apply m-1 border border-black rounded-md px-2 py-1; - } */ - .button { - @apply font-bold border border-black bg-slate-300 px-2 rounded-md py-1 hover:bg-gray-500 hover:text-white; - } - .button-active { - @apply font-bold border border-black px-2 rounded-md py-1 bg-gray-500 text-white; - } -} -.task { - zoom: 1.3; - background: url("./assets/open-iconic-master/svg/task.svg"); - background-size: contain; - background-repeat: no-repeat; - background-position: center; -} - -.reload { - zoom: 1.3; - background: url("./assets/open-iconic-master/svg/loop-circular.svg"); - background-size: contain; - background-repeat: no-repeat; - background-position: center; - -} - -.clear { - zoom: 1.3; - background-image: url("./assets/open-iconic-master/svg/trash.svg"); - background-size: cover; -} - -.delete { - zoom: 1.3; - background: url("./assets/open-iconic-master/svg/circle-x.svg"); - background-size: contain; - background-repeat: no-repeat; -} - -.locked { - zoom: 1.2; - background: url("./assets/open-iconic-master/svg/lock-locked.svg"); - background-size: contain; - background-repeat: no-repeat; -} - -.unlocked { - zoom: 1.2; - background: url("./assets/open-iconic-master/svg/lock-unlocked.svg"); - background-size: contain; - background-repeat: no-repeat; -} - -.input-number::-webkit-inner-spin-button, -.input-number::-webkit-outer-spin-button { - display: none; -} -[list]::-webkit-calendar-picker-indicator { - display: none !important; -} - -#tabela { - display: flex; - flex-direction: column; -} - -form > div { - display: inline; -} -/** - * Ring of dots - * - * @author jh3y -*/ -@-webkit-keyframes ring-of-dots { - 0% { - -webkit-box-shadow: 20px 0px 0 0 #d4c3c3, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 #ba98dd, 12.4698px -15.63663px 0 0 #3b30d4; - box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 #ba98dd, 12.4698px -15.63663px 0 0 #3b30d4; } - 14.28571% { - -webkit-box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 #ba98dd, -4.45042px -19.49856px 0 0 #3b30d4, 12.4698px -15.63663px 0 0 white; - box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 #ba98dd, -4.45042px -19.49856px 0 0 #3b30d4, 12.4698px -15.63663px 0 0 white; } - 28.57143% { - -webkit-box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 #ba98dd, -18.01938px -8.67767px 0 0 #3b30d4, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white; - box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 #ba98dd, -18.01938px -8.67767px 0 0 #3b30d4, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white; } - 42.85714% { - -webkit-box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 #ba98dd, -18.01938px 8.67767px 0 0 #3b30d4, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white; - box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 #ba98dd, -18.01938px 8.67767px 0 0 #3b30d4, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white; } - 57.14286% { - -webkit-box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 #ba98dd, -4.45042px 19.49856px 0 0 #3b30d4, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white; - box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 #ba98dd, -4.45042px 19.49856px 0 0 #3b30d4, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white; } - 71.42857% { - -webkit-box-shadow: 20px 0px 0 0 #ba98dd, 12.4698px 15.63663px 0 0 #3b30d4, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white; - box-shadow: 20px 0px 0 0 #ba98dd, 12.4698px 15.63663px 0 0 #3b30d4, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white; } - 85.71429% { - -webkit-box-shadow: 20px 0px 0 0 #3b30d4, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 #ba98dd; - box-shadow: 20px 0px 0 0 #3b30d4, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 #ba98dd; } - 100% { - -webkit-box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 #ba98dd, 12.4698px -15.63663px 0 0 #3b30d4; - box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 #ba98dd, 12.4698px -15.63663px 0 0 #3b30d4; } } -@keyframes ring-of-dots { - 0% { - -webkit-box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 #ba98dd, 12.4698px -15.63663px 0 0 #3b30d4; - box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 #ba98dd, 12.4698px -15.63663px 0 0 #3b30d4; } - 14.28571% { - -webkit-box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 #ba98dd, -4.45042px -19.49856px 0 0 #3b30d4, 12.4698px -15.63663px 0 0 white; - box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 #ba98dd, -4.45042px -19.49856px 0 0 #3b30d4, 12.4698px -15.63663px 0 0 white; } - 28.57143% { - -webkit-box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 #ba98dd, -18.01938px -8.67767px 0 0 #3b30d4, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white; - box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 #ba98dd, -18.01938px -8.67767px 0 0 #3b30d4, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white; } - 42.85714% { - -webkit-box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 #ba98dd, -18.01938px 8.67767px 0 0 #3b30d4, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white; - box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 #ba98dd, -18.01938px 8.67767px 0 0 #3b30d4, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white; } - 57.14286% { - -webkit-box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 #ba98dd, -4.45042px 19.49856px 0 0 #3b30d4, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white; - box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 #ba98dd, -4.45042px 19.49856px 0 0 #3b30d4, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white; } - 71.42857% { - -webkit-box-shadow: 20px 0px 0 0 #ba98dd, 12.4698px 15.63663px 0 0 #3b30d4, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white; - box-shadow: 20px 0px 0 0 #ba98dd, 12.4698px 15.63663px 0 0 #3b30d4, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white; } - 85.71429% { - -webkit-box-shadow: 20px 0px 0 0 #3b30d4, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 #ba98dd; - box-shadow: 20px 0px 0 0 #3b30d4, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 #ba98dd; } - 100% { - -webkit-box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 #ba98dd, 12.4698px -15.63663px 0 0 #3b30d4; - box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 #ba98dd, 12.4698px -15.63663px 0 0 #3b30d4; } } - -.ring-of-dots:before { - animation: ring-of-dots 1s infinite linear reverse; - border-radius: 10px; - content: ''; - display: block; - height: 10px; - width: 10px; } \ No newline at end of file +@tailwind utilities; \ No newline at end of file diff --git a/src/layout/Header.jsx b/src/layout/Header.jsx index 3f541eb..f5915a4 100755 --- a/src/layout/Header.jsx +++ b/src/layout/Header.jsx @@ -1,45 +1,88 @@ -import React from 'react'; -import UserMenu from './UserMenu'; +import React, { useContext } from "react"; +import { layout } from "../layout"; +import logo from "../style/icons/logo.png" -function Header({ - sidebarOpen, - setSidebarOpen -}) { +function Header() { - // const [searchModalOpen, setSearchModalOpen] = useState(false) + const { layoutState, setLayoutState } = useContext(layout) return (
-
+
- - {/* Header: Left side */}
- - {/* Hamburger button */} -
- - {/* Header: Right side */}
- + {/* inicio */} +
+ +
+ {/* */} +
+
+
email@site.com
+
TEXTO
+
+
    +
  • + {/* setDropdownOpen(!dropdownOpen)} + > + Sign Out + */} + Sair +
    • +
+
+ {/* */} +
+
+ {/* fim */}
-
diff --git a/src/layout/Sidebar.jsx b/src/layout/Sidebar.jsx index 60ecdf8..720b1a7 100755 --- a/src/layout/Sidebar.jsx +++ b/src/layout/Sidebar.jsx @@ -1,132 +1,56 @@ -import React, { useState, useEffect, useRef } from "react"; -import { Link, useLocation } from "react-router-dom"; -// import {Tooltip} from "react-tooltip"; -function Sidebar({ sidebarOpen, setSidebarOpen }) { - const location = useLocation(); - const { pathname } = location; +import React, {useContext} from "react"; +import { Link } from "react-router-dom"; +import {layout} from "../layout"; - const trigger = useRef(null); - const sidebar = useRef(null); - - const storedSidebarExpanded = localStorage.getItem("sidebar-expanded"); - const [sidebarExpanded, setSidebarExpanded] = useState( - storedSidebarExpanded === null ? false : storedSidebarExpanded === "true" - ); - - // close on click outside - useEffect(() => { - const clickHandler = ({ target }) => { - if (!sidebar.current || !trigger.current) return; - if ( - !sidebarOpen || - sidebar.current.contains(target) || - trigger.current.contains(target) - ) - return; - setSidebarOpen(false); - }; - document.addEventListener("click", clickHandler); - return () => document.removeEventListener("click", clickHandler); - }); - - // close if the esc key is pressed - useEffect(() => { - const keyHandler = ({ keyCode }) => { - if (!sidebarOpen || keyCode !== 27) return; - setSidebarOpen(false); - }; - document.addEventListener("keydown", keyHandler); - return () => document.removeEventListener("keydown", keyHandler); - }); - - useEffect(() => { - localStorage.setItem("sidebar-expanded", sidebarExpanded); - if (sidebarExpanded) { - document.querySelector("body").classList.add("sidebar-expanded"); - } else { - document.querySelector("body").classList.remove("sidebar-expanded"); - } - }, [sidebarExpanded]); +function Wrapper({children}) { + + let {layoutState} = useContext(layout) + return ( -
- {/* Sidebar backdrop (mobile only) */} - + // + + ) + }; + +function Header({logo}){ + let {setLayoutState} = useContext(layout) + return(
- {/* Close button */} - {/* Logo */} - - - - - - - - - - - - - - - - +
+ ) +} - {/* Links */} -
- {/* Pages group */} +function MenuList({links}){ + + return ( +

    -
  • + {links.map((link, index) => { + return (
  • + to={link.path} + className={`block text-slate-200 hover:text-white truncate transition duration-150`}>
    + title={link.title}>
    - - - - - + - Vendas - -
    -
    - -
    • - {/* Messages */} -
  • - -
    -
    - - - - - - Vendas por Usuario + {link.title}
    -
    • -
  • - -
    -
    - - - - - Relatorios - -
    -
    - -
    • + ) + })}
- {/* */} - {/* Expand / collapse button */} -
-
- -
-
-
-
- ); + ) + } -export default Sidebar; +function ExpandButton(){ + let { layoutState, setLayoutState} = useContext(layout) + + return ( +
+
+ +
+
+ ) +} +export default {Wrapper, MenuList, Header, ExpandButton}; \ No newline at end of file diff --git a/src/layout/UserMenu.jsx b/src/layout/UserMenu.jsx index 7927dc8..6dc12aa 100755 --- a/src/layout/UserMenu.jsx +++ b/src/layout/UserMenu.jsx @@ -10,7 +10,7 @@ function UserMenu() { const trigger = useRef(null); const dropdown = useRef(null); - + const navigate = useNavigate() const {logOut, user} = useUserAuth() diff --git a/src/layout/index.jsx b/src/layout/index.jsx new file mode 100644 index 0000000..df6a487 --- /dev/null +++ b/src/layout/index.jsx @@ -0,0 +1,45 @@ +import React, {useReducer, createContext} from "react"; +import Header from "./Header"; +import Sidebar from "./Sidebar" +import { Outlet } from "react-router-dom"; +import listRouters from "../routers" +import logo from "../style/icons/logo.png" + +export const layout = createContext() + +const INITIAL_STATES = {sidebarOpen: false, sidebarExpanded: false, userMenu: false} + +function handlerLayoutChange(state, action){ + + let newValue = Object.defineProperty( + state, + action.toggle, + { value: !state[action.toggle] } + ) + + return {...newValue} +} + +function LayoutContext() { + + const [layoutState, setLayoutState] = useReducer(handlerLayoutChange, INITIAL_STATES) + + return ( + +
+ + + + + +
+
+
+ +
+
+
+ + ) +} +export default LayoutContext \ No newline at end of file diff --git a/src/main.jsx b/src/main.jsx index 6fb3986..ecd52ab 100755 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,13 +1,20 @@ import React from 'react' import ReactDOM from 'react-dom/client' -import { BrowserRouter } from 'react-router-dom' -import App from './App' -// import './index.css' +import { createBrowserRouter, RouterProvider } from 'react-router-dom' +import listRoutes from './routers' +import LayoutPage from './layout' +import './index.css' + ReactDOM.createRoot(document.getElementById('root')).render( - // - - - -// + // + , + children: listRoutes + } + ]) + } /> + // ) diff --git a/src/pages/newPage.jsx b/src/pages/newPage.jsx new file mode 100644 index 0000000..e19ae67 --- /dev/null +++ b/src/pages/newPage.jsx @@ -0,0 +1,9 @@ +import icon from '../style/icons/bar-chart.svg' + +function NewP(){ + return ( +

NewPage

+ ) +} + +export {icon, NewP} \ No newline at end of file diff --git a/src/pages/newPage2.jsx b/src/pages/newPage2.jsx new file mode 100644 index 0000000..8fcf28e --- /dev/null +++ b/src/pages/newPage2.jsx @@ -0,0 +1,5 @@ +export default function New(){ + return ( +

NewPage2

+ ) +} \ No newline at end of file diff --git a/src/routers/index.jsx b/src/routers/index.jsx new file mode 100644 index 0000000..64203ce --- /dev/null +++ b/src/routers/index.jsx @@ -0,0 +1,20 @@ +import {icon, NewP as ComponentPage} from "../pages/newPage" +// import NewPageTwo from "../pages/newPage2" +// import barchart from "../style/icons/bar-chart.svg" + +const routers = [ + { + path: "/1", + title: "Pagina 1", + icon: icon, + element: + }, + // { + // path: "/2", + // title: "Pagina 2", + // icon: barchart, + // element: + // } +] + +export default routers \ No newline at end of file diff --git a/src/style/icons/bar-chart.svg b/src/style/icons/bar-chart.svg new file mode 100644 index 0000000..881a854 --- /dev/null +++ b/src/style/icons/bar-chart.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/style/icons/logo.png b/src/style/icons/logo.png new file mode 100644 index 0000000..62f009a Binary files /dev/null and b/src/style/icons/logo.png differ diff --git a/src/style/icons/menu.svg b/src/style/icons/menu.svg new file mode 100644 index 0000000..bf2b025 --- /dev/null +++ b/src/style/icons/menu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/vite.config.js b/vite.config.js index ba38fc7..079e66d 100755 --- a/vite.config.js +++ b/vite.config.js @@ -5,6 +5,6 @@ import react from '@vitejs/plugin-react' export default defineConfig({ plugins: [ react() - ] + ],assetsInclude: ['**/*.svg'] } )