add scss and remove styled component

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`
+```bash
-
+task fe
-Runs the app in the development mode.<br>
+```
-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.<br>
-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.<br>
-Your app is ready to be deployed!
 
 ## Deployment
 

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

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"
   },

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

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) {

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;
+}

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()

frontend/src/components/Navbar/index.js

@@ -0,0 +1 @@
+export { default } from './Navbar'

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')
 

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;
-}

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 (
-    <LoginPage>
+    <div class="login-page">
       <div class="card glass card-compact login-wrap shadow-xl">
         <div class="h-44">
           <picture class="logo">
@@ -218,6 +148,6 @@ export default function Login() {
           </form>
         </div>
       </div>
-    </LoginPage>
+    </div>
   )
 }

frontend/src/pages/Login/index.js

@@ -0,0 +1 @@
+export { default } from './Login'

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;
+    }
+  }
+}