diff --git a/README.md b/README.md index 2723b2e..4231480 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,28 @@ the warehouse use to tracking item in house +# Project setup + +install `Taskfile` first with this command line: +- for macOS, linux: + ```bash + brew install go-task + ``` +- for windows: + ```bash + winget install Task.Task + ``` + or + + ```bash + npm install -g @go-task/cli + ``` + +install `pnpm` for front-end with command line: +```bash +npm i pnpm -g +``` + # Common CLI ### alembic @@ -38,32 +60,31 @@ generate migration auto code alembic revision --autogenerate -m "version message" ``` +# Back-end + +## Usage + +```bash +task be +``` + # Front-end ## Usage ```bash -$ npm install # or pnpm install or yarn install +task fe:i ``` -### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs) +### Learn more on the [Solid Website](https://solidjs.com) ## Available Scripts In the project directory, you can run: -### `npm run dev` - -Runs the app in the development mode.
-Open [http://localhost:5173](http://localhost:5173) to view it in the browser. - -### `npm run build` - -Builds the app for production to the `dist` folder.
-It correctly bundles Solid in production mode and optimizes the build for the best performance. - -The build is minified and the filenames include the hashes.
-Your app is ready to be deployed! +```bash +task fe +``` ## Deployment diff --git a/Taskfile.yml b/Taskfile.yml index e1df452..854f425 100644 --- a/Taskfile.yml +++ b/Taskfile.yml @@ -12,17 +12,22 @@ dotenv: - .env - .dev.env tasks: - be:dev: + be:seed: + desc: remove db + dir: dev/data + cmds: + - rm -r fuware.db + be: desc: runs the backend server cmds: - poetry run python backend/app.py - fe:dev: - desc: runs the frontend server - dir: frontend - cmds: - - pnpm dev fe:i: desc: runs the install package dir: frontend cmds: - pnpm i + fe: + desc: runs the frontend server + dir: frontend + cmds: + - pnpm dev diff --git a/frontend/package.json b/frontend/package.json index 14f1e32..41b8677 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -20,7 +20,6 @@ "crypto-js": "^4.2.0", "solid-form-handler": "^1.2.3", "solid-js": "^1.8.15", - "solid-styled-components": "^0.28.5", "solid-toast": "^0.5.0", "yup": "^1.4.0" }, diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index 2aed860..c0decb8 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -32,9 +32,6 @@ importers: solid-js: specifier: ^1.8.15 version: 1.8.17 - solid-styled-components: - specifier: ^0.28.5 - version: 0.28.5(solid-js@1.8.17) solid-toast: specifier: ^0.5.0 version: 0.5.0(solid-js@1.8.17) @@ -1010,11 +1007,6 @@ packages: resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==} engines: {node: '>=10'} - goober@2.1.14: - resolution: {integrity: sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==} - peerDependencies: - csstype: ^3.0.10 - graphemer@1.4.0: resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==} @@ -1518,11 +1510,6 @@ packages: peerDependencies: solid-js: ^1.3 - solid-styled-components@0.28.5: - resolution: {integrity: sha512-vwTcdp76wZNnESIzB6rRZ3U55NgcSAQXCiiRIiEFhxTFqT0bEh/warNT1qaRZu4OkAzrBkViOngF35ktI8sc4A==} - peerDependencies: - solid-js: ^1.4.4 - solid-toast@0.5.0: resolution: {integrity: sha512-t770JakjyS2P9b8Qa1zMLOD51KYKWXbTAyJePVUoYex5c5FH5S/HtUBUbZAWFcqRCKmAE8KhyIiCvDZA8bOnxQ==} peerDependencies: @@ -2695,10 +2682,6 @@ snapshots: merge2: 1.4.1 slash: 3.0.0 - goober@2.1.14(csstype@3.1.3): - dependencies: - csstype: 3.1.3 - graphemer@1.4.0: {} has-flag@3.0.0: {} @@ -3136,12 +3119,6 @@ snapshots: '@babel/types': 7.24.5 solid-js: 1.8.17 - solid-styled-components@0.28.5(solid-js@1.8.17): - dependencies: - csstype: 3.1.3 - goober: 2.1.14(csstype@3.1.3) - solid-js: 1.8.17 - solid-toast@0.5.0(solid-js@1.8.17): dependencies: solid-js: 1.8.17 diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 404885e..fc71c1e 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -1,6 +1,6 @@ import { MetaProvider } from '@solidjs/meta' import { Toaster } from 'solid-toast' -import './App.css' +import './App.scss' import { SiteContextProvider } from './context/SiteContext' function App(props) { diff --git a/frontend/src/App.css b/frontend/src/App.scss similarity index 72% rename from frontend/src/App.css rename to frontend/src/App.scss index bae046d..f8818e9 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.scss @@ -14,11 +14,17 @@ overflow: hidden; } -#main-page.login-page { - height: 100svh; -} - #main-page .main-content { max-height: calc(100svh - 64px); overflow-y: auto; } + +a { + font-weight: 500; + color: #646cff; + text-decoration: inherit; +} + +a:hover { + color: #535bf2; +} diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar/Navbar.jsx similarity index 97% rename from frontend/src/components/Navbar.jsx rename to frontend/src/components/Navbar/Navbar.jsx index bfe976f..09cbd88 100644 --- a/frontend/src/components/Navbar.jsx +++ b/frontend/src/components/Navbar/Navbar.jsx @@ -1,5 +1,3 @@ -// import { styled } from 'solid-styled-components' - import { useSiteContext } from '@context/SiteContext' import useAuth from '@hooks/useAuth' import { NAV_ROUTES } from '@routes/routes' @@ -7,6 +5,7 @@ import { A } from '@solidjs/router' import { IconLogout, IconTriangle } from '@tabler/icons-solidjs' import { For, Show } from 'solid-js' import { Dynamic } from 'solid-js/web' +import './navbar.scss' export default function Navbar() { const { store, setAuth } = useSiteContext() diff --git a/frontend/src/components/Navbar/index.js b/frontend/src/components/Navbar/index.js new file mode 100644 index 0000000..e6400ae --- /dev/null +++ b/frontend/src/components/Navbar/index.js @@ -0,0 +1 @@ +export { default } from './Navbar' diff --git a/frontend/src/styles/fuware.scss b/frontend/src/components/Navbar/navbar.scss similarity index 100% rename from frontend/src/styles/fuware.scss rename to frontend/src/components/Navbar/navbar.scss diff --git a/frontend/src/index.jsx b/frontend/src/index.jsx index 6241b8a..73ac930 100644 --- a/frontend/src/index.jsx +++ b/frontend/src/index.jsx @@ -3,9 +3,8 @@ import { Route, Router } from '@solidjs/router' import { For, lazy } from 'solid-js' import { render } from 'solid-js/web' import App from './App' -import './index.css' +import './index.scss' import { ROUTES } from './routes' -import './styles/fuware.scss' const root = document.getElementById('root') diff --git a/frontend/src/index.css b/frontend/src/index.scss similarity index 83% rename from frontend/src/index.css rename to frontend/src/index.scss index f3280de..4cc5076 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.scss @@ -24,12 +24,3 @@ body { min-height: 100vh; font-size: 14px; } - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} diff --git a/frontend/src/pages/Login.jsx b/frontend/src/pages/Login/Login.jsx similarity index 78% rename from frontend/src/pages/Login.jsx rename to frontend/src/pages/Login/Login.jsx index b47aa3b..2fbfd83 100644 --- a/frontend/src/pages/Login.jsx +++ b/frontend/src/pages/Login/Login.jsx @@ -4,83 +4,13 @@ import { useNavigate } from '@solidjs/router' import { Field, useFormHandler } from 'solid-form-handler' import { yupSchema } from 'solid-form-handler/yup' import { Show, onMount } from 'solid-js' -import { styled } from 'solid-styled-components' import * as yup from 'yup' +import './login.scss' import logo from '@assets/logo-fuware.svg' import useAuth from '@hooks/useAuth' import useToast from '@hooks/useToast' -const LoginPage = styled('div')` - width: 100%; - height: 100svh; - display: flex; - padding-left: 15px; - padding-right: 15px; - background: #fff url('/images/bg-login.jpg') no-repeat fixed center; - background-size: cover; - place-items: center; - - .login-wrap { - width: 40%; - max-width: 500px; - min-width: 320px; - margin: 0 auto; - overflow: hidden; - position: relative; - - &:after { - content: ''; - display: block; - width: 500px; - height: 500px; - border-radius: 15px; - position: absolute; - z-index: 2; - top: -120px; - left: -285px; - background: #10b981; - transform: rotate(45deg); - } - - &:before { - content: ''; - display: block; - width: 500px; - height: 500px; - border-radius: 15px; - position: absolute; - z-index: 2; - top: -40px; - left: -130px; - background: #ff6600; - transform: rotate(20deg); - } - - .card-body { - position: relative; - z-index: 4; - } - - .logo { - position: relative; - z-index: 4; - display: block; - width: 40%; - max-width: 150px; - min-width: 100px; - margin: 0 auto; - margin-top: 15px; - } - - .login-box { - box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.25); - border-radius: 5px; - padding: 1rem; - } - } -` - const loginSchema = yup.object({ username: yup.string().required('Username is required'), password: yup.string().required('Password is required'), @@ -125,7 +55,7 @@ export default function Login() { } return ( - +
- +
) } diff --git a/frontend/src/pages/Login/index.js b/frontend/src/pages/Login/index.js new file mode 100644 index 0000000..626bc07 --- /dev/null +++ b/frontend/src/pages/Login/index.js @@ -0,0 +1 @@ +export { default } from './Login' diff --git a/frontend/src/pages/Login/login.scss b/frontend/src/pages/Login/login.scss new file mode 100644 index 0000000..e6080e1 --- /dev/null +++ b/frontend/src/pages/Login/login.scss @@ -0,0 +1,69 @@ +.login-page { + width: 100%; + height: 100svh; + display: flex; + padding-left: 15px; + padding-right: 15px; + background: #fff url('/images/bg-login.jpg') no-repeat fixed center; + background-size: cover; + place-items: center; + + .login-wrap { + width: 40%; + max-width: 500px; + min-width: 320px; + margin: 0 auto; + overflow: hidden; + position: relative; + + &:after { + content: ''; + display: block; + width: 500px; + height: 500px; + border-radius: 15px; + position: absolute; + z-index: 2; + top: -120px; + left: -285px; + background: #10b981; + transform: rotate(45deg); + } + + &:before { + content: ''; + display: block; + width: 500px; + height: 500px; + border-radius: 15px; + position: absolute; + z-index: 2; + top: -40px; + left: -130px; + background: #ff6600; + transform: rotate(20deg); + } + + .card-body { + position: relative; + z-index: 4; + } + + .logo { + position: relative; + z-index: 4; + display: block; + width: 40%; + max-width: 150px; + min-width: 100px; + margin: 0 auto; + margin-top: 15px; + } + + .login-box { + box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.25); + border-radius: 5px; + padding: 1rem; + } + } +}