update warehouse page

2024-06-15 01:24:00 +08:00
parent 5a727a9722
commit e6b56e3b40
17 changed files with 84 additions and 25 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@ -2,7 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
--- a/frontend/public/favicon.png
+++ b/frontend/public/favicon.png
--- a/frontend/src/assets/css/fu-theme.scss
+++ b/frontend/src/assets/css/fu-theme.scss
@ -0,0 +1,4 @@
+.input:focus,
+.input:focus-within {
+  outline-color: var(--primary);
+}
--- a/frontend/src/assets/images/logo.svg
+++ b/frontend/src/assets/images/logo.svg
--- a/frontend/src/assets/images/solid.svg
+++ b/frontend/src/assets/images/solid.svg
--- a/frontend/src/components/Header.jsx
+++ b/frontend/src/components/Header.jsx
@ -1,5 +1,5 @@
 import { getProfile } from '@api/user'
-import Logo from '@assets/logo.svg'
+import Logo from '@assets/images/logo.svg'
 import { useSiteContext } from '@context/SiteContext'
 import useAuth from '@hooks/useAuth'
 import useToast from '@hooks/useToast'
--- a/frontend/src/components/Navbar/Navbar.jsx
+++ b/frontend/src/components/Navbar/Navbar.jsx
@ -2,7 +2,12 @@ import { useSiteContext } from '@context/SiteContext'
 import useAuth from '@hooks/useAuth'
 import useLanguage from '@hooks/useLanguage'
 import { A } from '@solidjs/router'
-import { IconDashboard, IconLocation, IconLogout, IconTriangle } from '@tabler/icons-solidjs'
+import {
+  IconBuildingWarehouse,
+  IconDashboard,
+  IconLogout,
+  IconTriangle
+} from '@tabler/icons-solidjs'
 import { For, Show, mergeProps } from 'solid-js'
 import { Dynamic } from 'solid-js/web'
 import './navbar.scss'
@ -17,9 +22,9 @@ export const NAV_ITEM = (admin = false) => [
    text: language?.ui.dashboard,
  },
  {
-    path: '/location',
+    path: '/warehouse',
    show: true,
-    icon: IconLocation,
+    icon: IconBuildingWarehouse,
    text: language?.ui.location,
  },
 ]
@ -36,7 +41,7 @@ function NavbarItem(props) {
        </>
      }
    >
-      <A href={merged.path}>
+      <A class="hover:text-fu-black" href={merged.path}>
        <Dynamic component={merged.icon} />
        {merged.text}
      </A>
--- a/frontend/src/index.scss
+++ b/frontend/src/index.scss
@ -1,6 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+@import './assets/css/fu-theme.scss';

 :root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
--- a/frontend/src/lang/vi.json
+++ b/frontend/src/lang/vi.json
@ -9,7 +9,7 @@
    "changeInfo": "Thông tin tài khoản",
    "save": "Lưu",
    "clear": "Xóa",
-    "houses": "Kho",
+    "location": "Nhà kho",
    "displayName": "Display Name",
    "newPassword": "New Password",
    "confirmNewPassword": "Confirm New Password"
--- a/frontend/src/pages/Login/Login.jsx
+++ b/frontend/src/pages/Login/Login.jsx
@ -8,7 +8,7 @@ import { onMount } from 'solid-js'
 import * as yup from 'yup'
 import './login.scss'

-import Logo from '@assets/logo.svg'
+import Logo from '@assets/images/logo.svg'
 import TextInput from '@components/common/TextInput'
 import useAuth from '@hooks/useAuth'
 import useToast from '@hooks/useToast'
--- a/frontend/src/pages/Profile/Profile.jsx
+++ b/frontend/src/pages/Profile/Profile.jsx
@ -71,7 +71,7 @@ export default function Profile() {
  return (
    <div class="profile">
      <div class="divider divider-accent text-xl">
-        <span class="text-green-400">
+        <span class="text-secondary">
          <IconUserCircle size={30} />
        </span>
        {language.ui.profile}
--- a/frontend/src/pages/WareHouse.jsx
+++ b/frontend/src/pages/WareHouse.jsx
@ -1,12 +0,0 @@
-import { useNavigate } from '@solidjs/router'
-import { onMount } from 'solid-js'
-
-export default function WareHouse() {
-  const navigate = useNavigate()
-
-  onMount(() => {
-    navigate('/me', { replace: true })
-  })
-
-  return <></>
-}
--- a/frontend/src/pages/WareHouse/WareHouse.jsx
+++ b/frontend/src/pages/WareHouse/WareHouse.jsx
@ -0,0 +1,54 @@
+import { IconPackage } from '@tabler/icons-solidjs'
+import { For } from 'solid-js'
+import { Dynamic } from 'solid-js/web'
+import './warehouse.scss'
+
+function PackageItem(props) {
+  const { item } = { ...props }
+  const isEmpty = item % 2 === 0
+  return (
+    <a href="#" class={`group/item w-10 h-10 m-[5px] hover:text-white bg-fu-warning${isEmpty ? '/30' : ''} hover:bg-fu-green rounded-[10px] block`}>
+      <div class="bx-dec invisible group-hover/item:visible">
+        <div class="section-dec flex items-center absolute bg-fu-green/90 rounded-[10px] p-[10px] shadow-[0_5px_15px_4px_rgba(0, 135, 90, 0.25)]] mt-[20px] ml-[20px]">
+          <div class="box-img">
+            <Dynamic class="mr-[10px] w-20 h-20 text-fu-warning" component={IconPackage} />
+          </div>
+          <div class="dec max-w-[200px]">
+            <h4 class="text-white mb-[5px] text-base font-bold">{isEmpty ? 'Rỗng' : 'Dụng cụ bếp'}</h4>
+            <p class="line-clamp-3">
+              {isEmpty
+                ? ''
+                : `Nồi cơm điện, Bếp nấu ăn, Lò vi sóng, Máy xay sinh tố, Máy ép trái cây, Lò nướng, Nồi áp suất, Chảo chống dính, Xửng hấp, Bộ nồi chuyên dụng, Dao bếp, Thớt, Hộp đựng thực phẩm, Hũ
+                    đựng gia vị , Dụng cụ đo lường, Bộ chén bát, Đũa, Muỗng, Thau, rổ, Khăn lau bếp, Thùng đựng gạo, Bộ ly cốc, Dung dịch tẩy rửa, Giá treo, Vòi rửa thông minh, Máy hút mùi, Máy lọc nước`}
+            </p>
+          </div>
+        </div>
+      </div>
+    </a>
+  )
+}
+
+export default function WareHouse() {
+  return (
+    <div class="warehouse">
+      <div class="card w-full bg-base-100 shadow-lg border border-gray-200">
+        <div class="card-body">
+          <div class="box-header pb-5 mb-5 flex items-center justify-between border-b border-gray-200">
+            <h4 class="card-title">Section Overview</h4>
+            <div class="box-controls pull-right">
+              <input class="form-control no-border bg-base-200 px-2 py-1" id="e" type="date" />
+            </div>
+          </div>
+          <div class="area-in-warehouse grid grid-cols-4">
+            <div class="area-block mb-10">
+              <div class="area-title text-center text-base font-bold mb-3">Khu bếp</div>
+              <div class="area-content flex justify-space-around flex-wrap">
+                <For each={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]}>{(item) => <PackageItem item={item} />}</For>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/frontend/src/pages/WareHouse/index.js
+++ b/frontend/src/pages/WareHouse/index.js
@ -0,0 +1 @@
+export { default } from './WareHouse'
--- a/frontend/src/pages/WareHouse/warehouse.scss
+++ b/frontend/src/pages/WareHouse/warehouse.scss
@ -0,0 +1,3 @@
+.warehouse {
+
+}
--- a/frontend/src/routes/routes.js
+++ b/frontend/src/routes/routes.js
@ -20,7 +20,7 @@ export const ROUTES = [
    show: true,
  },
  {
-    path: '/ware-house',
+    path: '/warehouse',
    components: lazy(() => import('@pages/WareHouse')),
    filter: {},
    show: true,
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@ -13,6 +13,7 @@ export default {
          primary: '#03c9d7',
          green: '#05b187',
          orange: '#fb9678',
+          warning: '#fbc66c',
          yellow: '#fec90f',
        },
      },
@ -24,10 +25,12 @@ export default {
      {
        light: {
          ...themes['light'],
-          primary: '#03c9d7',
-          'primary-content': '#ffff',
+          // primary: '#03c9d7',
+          // 'primary-content': '#ffffff',
          secondary: '#fb9678',
-          'secondary-content': '#ffff',
+          'secondary-content': '#ffffff',
+          neutral: '#03c9d7',
+          'neutral-content': '#ffffff',
        },
      },
    ],