+
+
+
+
+ + Thêm danh mục sản phẩm +
+
+
+ Trang chủ
+ +Sản phẩm
+ +Tạo danh mục
+
-
+
+
Dashboard
diff --git a/src/screens/Dashboard/Data.tsx b/src/screens/Dashboard/Data.tsx index 24eea44..5ef6ba2 100644 --- a/src/screens/Dashboard/Data.tsx +++ b/src/screens/Dashboard/Data.tsx @@ -3,11 +3,11 @@ import { ChartPie } from './components/index' function Data() { return ( -
+
Tổng hợp số liệu
-
+
+
Tổng kho
Số lượng hàng trong kho
-
+
+
-
Tổng kho
24.3%
+
-
- Còn hàng
41.8%
+
Hêt hàng
10.8%
@@ -56,7 +56,8 @@ function Data() {
+
+
Sản phẩm bán chạy
Các sản phẩm bán chạy trong 7 ngày gần nhất
diff --git a/src/screens/Dashboard/Finance.tsx b/src/screens/Dashboard/Finance.tsx
index 23b47d8..cc29e4d 100644
--- a/src/screens/Dashboard/Finance.tsx
+++ b/src/screens/Dashboard/Finance.tsx
@@ -2,7 +2,7 @@ import { ChartLine } from './components/index'
function Finance() {
return (
-
+
Tài chính
Tổng quan
-
-
+
+
+
-
+
- Doanh thu tháng hiện tại
7,350,000
Doanh thu - -1,29% + -1,29%
+
- Lợi nhuận tháng hiện tại @@ -43,8 +43,8 @@ function Overview() {
-
-
-
- +
- +
@@ -54,7 +54,7 @@ function Overview() {Chờ xử lý
300
- +
Đang giao
10
@@ -65,7 +65,7 @@ function Overview() {Đã giao
47
diff --git a/src/screens/Dashboard/components/Calendar.tsx b/src/screens/Dashboard/components/Calendar.tsx index e7bcc29..0e90254 100644 --- a/src/screens/Dashboard/components/Calendar.tsx +++ b/src/screens/Dashboard/components/Calendar.tsx @@ -1,5 +1,5 @@ import { useState } from 'react' -import { Date } from './Date' + import { Link } from 'react-router-dom' import { IconDrop } from '../../../svgs' @@ -29,15 +29,16 @@ export const Calendar = () => { setOpenDate(!openDate) } return ( -
-
-
+
+
+
ĐƠN GẦN ĐÂY
+
diff --git a/src/screens/Dashboard/components/ChartLine.tsx b/src/screens/Dashboard/components/ChartLine.tsx
index 39b6569..dc59e65 100644
--- a/src/screens/Dashboard/components/ChartLine.tsx
+++ b/src/screens/Dashboard/components/ChartLine.tsx
@@ -1,12 +1,4 @@
-import {
- LineChart,
- Line,
- XAxis,
- YAxis,
- CartesianGrid,
- Tooltip,
- Legend,
-} from 'recharts'
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts'
const data = [
{
date: '11/08',
@@ -54,9 +46,9 @@ const data = [
export const ChartLine = () => {
const customYAxisTicks = [2000, 4000, 6000, 8000]
return (
-
-
-
+
+ {
{
return (
+
Tổng thu chi tháng này
(+21%) so với tháng trước @@ -74,8 +66,9 @@ export const ChartLine = () => {
76%
-
+
(
-
+
)
diff --git a/src/screens/Dashboard/components/Date.tsx b/src/screens/Dashboard/components/DayPicker.tsx
similarity index 95%
rename from src/screens/Dashboard/components/Date.tsx
rename to src/screens/Dashboard/components/DayPicker.tsx
index 3df42b1..7cc591e 100644
--- a/src/screens/Dashboard/components/Date.tsx
+++ b/src/screens/Dashboard/components/DayPicker.tsx
@@ -3,7 +3,7 @@ import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'
import { DateCalendar } from '@mui/x-date-pickers/DateCalendar'
import { useState } from 'react'
-export const Date = () => {
+export const DayPicker = () => {
const [value, setValue] = useState(null)
return (
{properties}
{name}
-{des}
+{des}
diff --git a/src/screens/Dashboard/components/Note.tsx b/src/screens/Dashboard/components/Note.tsx
index 68d00ba..38036e4 100644
--- a/src/screens/Dashboard/components/Note.tsx
+++ b/src/screens/Dashboard/components/Note.tsx
@@ -1,38 +1,41 @@
import { Client, Calendar } from './index'
-import ImgMoney from '../../../assets/images/imgMoney.png'
import {
- IconBag,
- IconDrawstringBag,
- IconFolder,
+ IconAdd,
+ IconBags,
+ IconBuy,
+ IconDebt,
+ IconFolders,
+ IconMoney,
IconPinned,
IconSub,
} from '../../../svgs'
export const Note = () => (
-
-
-
+
+
+
+
Số mặt hàng
-
+ 1000
+
+ 
+
+
Lượt mua
-
+ 1000
Trả hàng
-
+ 1000
ĐÃ GHIM
+
(
/>
-
+
NHẮC NỢ
-
-
+
-
- Đã nhận
-0
+0
+
Đã đưa
-0
+0
- 
+
Chưa có giao dịch nào!
-
-
+ ()
+ const onSubmit = (data: UserProps) => {
+ if (selectedFileURL) {
+ data.image = selectedFileURL
+ }
+ console.log(data)
+
+ reset()
+ }
+ const handleFileChange = (event: React.ChangeEvent) => {
+ if (event.target.files && event.target.files.length > 0) {
+ if (selectedFileURL) {
+ URL.revokeObjectURL(selectedFileURL)
+ }
+ const file = event.target.files[0]
+ const url = URL.createObjectURL(file)
+ setSelectedFileURL(url)
+ }
+ }
+
+ function capitalizeFirstLetter(value: string) {
+ return value.charAt(0).toUpperCase() + value.slice(1)
+ }
+ return (
+
+
- Tôi cho nợ
+
+
+ )
}
diff --git a/src/screens/Order/Order.tsx b/src/screens/Order/Order.tsx
index ef82889..7c8aea6 100644
--- a/src/screens/Order/Order.tsx
+++ b/src/screens/Order/Order.tsx
@@ -1,10 +1,11 @@
import { Statistics, OrderTable } from './components'
import { IconAddCircle, IconDownload } from '../../svgs'
+import { Link } from 'react-router-dom'
export const Order = () => {
return (
<>
- (
+ 'product-item',
+ [],
+ )
+
+ const increaseProductQuantity = (id: number) => {
+ setListOrder((prevListOrder) => {
+ return prevListOrder.map((item) => {
+ if (item.id === id) {
+ return {
+ ...item,
+ quantity: (item.quantity || 0) + 1,
+ }
+ }
+ return item
+ })
+ })
+ }
+ const decreaseProductQuantity = (id: number) => {
+ setListOrder((prevListOrder) => {
+ const updatedListOrder = prevListOrder.map((item) => {
+ if (
+ item.id === id &&
+ item.quantity !== undefined &&
+ item.quantity > 0
+ ) {
+ return {
+ ...item,
+ quantity: item.quantity - 1,
+ }
+ }
+ return item
+ })
+
+ // Loại bỏ sản phẩm có quantity là 0 khỏi danh sách
+ const newList = updatedListOrder.filter(
+ (item) => item.quantity !== 0,
+ )
+
+ return newList
+ })
+ }
+ const handleAddProductToCart = (item: ProductProps) => {
+ const newList = listOrder.find(
+ (product) => product.title === item.title,
+ )
+ if (!newList) {
+ setListOrder((prevListOrder) => [
+ ...prevListOrder,
+ { ...item, quantity: 1 },
+ ])
+ } else {
+ setListOrder((prevListOrder) => [
+ ...prevListOrder.map((product) => {
+ if (product.title === item.title) {
+ return {
+ ...product,
+ quantity: (product.quantity || 0) + 1,
+ }
+ }
+ return product
+ }),
+ ])
+ }
+ }
+ const removeFromCart = (id: number) => {
+ const newList = listOrder.filter((item) => item.id !== id)
+ setListOrder(newList)
+ }
+ const totalMoney = listOrder.reduce((total, item) => {
+ if (item.quantity !== undefined) {
+ return total + item.price * item.quantity
+ }
+ return total
+ }, 0)
+
+ return (
+
+
+ )
+}
diff --git a/src/screens/PageNotFound/PageNotFound.tsx b/src/screens/PageNotFound/PageNotFound.tsx
index c5e4677..70fa305 100644
--- a/src/screens/PageNotFound/PageNotFound.tsx
+++ b/src/screens/PageNotFound/PageNotFound.tsx
@@ -1,4 +1,11 @@
+import { useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+
export const PageNotFound = () => {
+ const navigate = useNavigate()
+ useEffect(() => {
+ setTimeout(() => navigate('/'), 2000)
+ }, [navigate])
return (
<>
()
+
+ const handleFileChange = (event: React.ChangeEvent) => {
+ if (event.target.files && event.target.files.length > 0) {
+ if (selectedFileURL) {
+ URL.revokeObjectURL(selectedFileURL)
+ }
+ const file = event.target.files[0]
+ const url = URL.createObjectURL(file)
+ setSelectedFileURL(url)
+ }
+ }
+ const onSubmit = (data: AddCategoryProps) => {
+ if (selectedFileURL) {
+ data.image = selectedFileURL
+ }
+ alert('Bạn đã tạo sản phẩm thành công')
+ console.log(data)
+ reset()
+ }
+ return (
+ ([])
+ const handleListItemChange = (newList: ProductProps[]) => {
+ setListItem(newList)
+ }
+
+ return (
+
+ setIsAddCategory(!isAddCategory)} />
+ ) : (
+ ''
+ )}
+
+ )
+}
diff --git a/src/screens/Product/components/CreateProduct.tsx b/src/screens/Product/components/CreateProduct.tsx
new file mode 100644
index 0000000..ba869ec
--- /dev/null
+++ b/src/screens/Product/components/CreateProduct.tsx
@@ -0,0 +1,244 @@
+import { LinkDerectory } from '../../../components/LinkDerectory'
+import { useForm } from 'react-hook-form'
+import { useState } from 'react'
+import { handleKeyPress } from '../../../constants/handleKeyPressNumber'
+import { IconImage, IconStar, IconSum } from '../../../svgs'
+interface CreateProductProps {
+ nameProduct: string
+ unit: string
+ quatity: number
+ categoryProduct?: string
+ sellPrice: number
+ capitalPrice: number
+ promotionalPrice: number
+ image?: string
+ description?: string
+}
+export const CreateProduct = () => {
+ const [selectedFileURL, setSelectedFileURL] = useState('')
+
+ const {
+ register,
+ handleSubmit,
+ formState: { errors },
+ reset,
+ } = useForm()
+ const handleFileChange = (event: React.ChangeEvent) => {
+ if (event.target.files && event.target.files.length > 0) {
+ if (selectedFileURL) {
+ URL.revokeObjectURL(selectedFileURL)
+ }
+ const file = event.target.files[0]
+ const url = URL.createObjectURL(file)
+ setSelectedFileURL(url)
+ }
+ }
+
+ const onSubmit = (data: CreateProductProps) => {
+ if (selectedFileURL) {
+ data.image = selectedFileURL
+ }
+ console.log(data)
+ reset()
+ }
+ return (
+ {
+ handleSelectAction(action, params.row.id)
+ }}
+ >
+
+ ),
+ },
+ ]
+
+ const handleSelectAction = (action: string, id: GridRowId) => {
+ console.log(action, id)
+ }
+
+ const { data = [], isLoading } = useQuery({
+ queryKey: ['products'],
+ queryFn: getProducts,
+ })
+
+ return (
+ = createRef()
+// const [searchValue, setSearchValue] = useState('')
+// const [showSearchResult, setShowSearchResult] = useState(true)
+// const [searchResult, setSearchResult] = useState([])
+// const debouncedValue = useDebounce(searchValue, 500)
+// useEffect(() => {
+// if (!searchValue.trim()) {
+// setSearchResult([])
+// return
+// }
+// const normalizeString = (str: string) => {
+// return str
+// .toLowerCase()
+// .normalize('NFD')
+// .replace(/[\u0300-\u036f]/g, '')
+// }
+// const searchItembyTitle = (searchValue: string) => {
+// const normalizedSearchValue = normalizeString(searchValue)
+// const regex = new RegExp(normalizedSearchValue, 'i')
+
+// const listItem = listProduct.filter((item) =>
+// regex.test(normalizeString(item.title)),
+// )
+
+// return listItem
+// }
+// setSearchResult(searchItembyTitle(debouncedValue))
+// // eslint-disable-next-line react-hooks/exhaustive-deps
+// }, [debouncedValue])
+// const handleSearchValue = (e) => {
+// setSearchValue(e.target.value)
+// }
+// const handleHideResult = () => {
+// setShowSearchResult(false)
+// }
+
+// return (
+//
diff --git a/src/screens/User/User.tsx b/src/screens/User/User.tsx
index fc1ebc5..32dcfe4 100644
--- a/src/screens/User/User.tsx
+++ b/src/screens/User/User.tsx
@@ -1,3 +1,185 @@
+import { useForm } from 'react-hook-form'
+import { LinkDerectory } from '../../components/LinkDerectory'
+import { useState } from 'react'
+import { handleKeyPress } from '../../constants/handleKeyPressNumber'
+import { IconImage, IconStar } from '../../svgs'
+interface UserProps {
+ nameUser: string
+ numberPhone: number
+ userProperty?: string
+ location: string
+ image?: string
+}
export const User = () => {
- return Tôi mượn nợ
Money
+ return ( +
+
+ )
}
diff --git a/src/screens/Order/Order.tsx b/src/screens/Order/Order.tsx
index ef82889..7c8aea6 100644
--- a/src/screens/Order/Order.tsx
+++ b/src/screens/Order/Order.tsx
@@ -1,10 +1,11 @@
import { Statistics, OrderTable } from './components'
import { IconAddCircle, IconDownload } from '../../svgs'
+import { Link } from 'react-router-dom'
export const Order = () => {
return (
<>
-
+
-
+
diff --git a/src/screens/Order/component/CreateOrder.tsx b/src/screens/Order/component/CreateOrder.tsx
new file mode 100644
index 0000000..c714938
--- /dev/null
+++ b/src/screens/Order/component/CreateOrder.tsx
@@ -0,0 +1,75 @@
+import { LinkDerectory } from '../../../components/LinkDerectory'
+import { useState } from 'react'
+import UserInfo from './UserInfo'
+import PurchaseOrder from './PurchaseOrder'
+import { useCreatOrderContext } from '../context/CreatOrderContext'
+import { SearchResult } from '../../Product/components/SearchResult'
+import PanigationQ from '../../../components/Panigation/PanigationQ'
+import { listProduct } from '../../../constants'
+import { IconSort } from '../../../svgs'
+interface ProductProps {
+ title: string
+ price: number
+ image: string
+}
+export const CreateOrder = () => {
+ const [listItem, setListItem] = useState
diff --git a/src/screens/Order/context/CreatOrderContext.tsx b/src/screens/Order/context/CreatOrderContext.tsx
new file mode 100644
index 0000000..93a157c
--- /dev/null
+++ b/src/screens/Order/context/CreatOrderContext.tsx
@@ -0,0 +1,120 @@
+import { createContext, useContext } from 'react'
+
+import { CreateOrder } from '../component/CreateOrder'
+import { useLocalStorage } from '../../../hooks/useLocalStorage'
+interface ProductProps {
+ id: number
+ title: string
+ quantity?: number
+ price: number
+ image: string
+}
+type CreatOrderContext = {
+ // eslint-disable-next-line no-unused-vars
+ increaseProductQuantity: (id: number) => void
+ // eslint-disable-next-line no-unused-vars
+ decreaseProductQuantity: (id: number) => void
+ // eslint-disable-next-line no-unused-vars
+ removeFromCart: (id: number) => void
+ // eslint-disable-next-line no-unused-vars
+ handleAddProductToCart: (item: ProductProps) => void
+ totalMoney: number
+ listOrder: ProductProps[]
+}
+const CreatOrderContext = createContext({} as CreatOrderContext)
+export function useCreatOrderContext() {
+ return useContext(CreatOrderContext)
+}
+
+export function CreatOrderContextProvider() {
+ const [listOrder, setListOrder] = useLocalStorage@@ -14,9 +15,13 @@ export const Order = () => { Trang chủ • Đơn hàng
diff --git a/src/screens/Order/component/CreateOrder.tsx b/src/screens/Order/component/CreateOrder.tsx
new file mode 100644
index 0000000..c714938
--- /dev/null
+++ b/src/screens/Order/component/CreateOrder.tsx
@@ -0,0 +1,75 @@
+import { LinkDerectory } from '../../../components/LinkDerectory'
+import { useState } from 'react'
+import UserInfo from './UserInfo'
+import PurchaseOrder from './PurchaseOrder'
+import { useCreatOrderContext } from '../context/CreatOrderContext'
+import { SearchResult } from '../../Product/components/SearchResult'
+import PanigationQ from '../../../components/Panigation/PanigationQ'
+import { listProduct } from '../../../constants'
+import { IconSort } from '../../../svgs'
+interface ProductProps {
+ title: string
+ price: number
+ image: string
+}
+export const CreateOrder = () => {
+ const [listItem, setListItem] = useState([])
+ const { handleAddProductToCart } = useCreatOrderContext()
+ const handleSetListItem = (newList: ProductProps[]) => {
+ setListItem(newList)
+ }
+
+ return (
+
+
+
+ Danh mục sản phẩm
+
+
+ Bộ lọc
+
+
+
+
+
+ {listItem.map((item, index) => (
+ -
+
+ {item.title}
+
+ {item.price}
+
+
+
+ ))}
+
+
+ Đơn mua
+
+ Mã đơn: KH2012386
+
+
+ Tổng
{listOrder.length}
+ món
+
+
+
+ {listOrder.length === 0 ? (
+
+ Chưa có sản phẩm nào
+
+ ) : (
+ listOrder.map((item, index) => {
+ return (
+ -
+
+
{item.title}
+
+ {item.price}
+
+
+
+
+ decreaseProductQuantity(item.id)
+ }
+ className="w-2/5 flex-auto cursor-pointer text-center text-3xl"
+ >
+ -
+
+
+ {item.quantity}
+
+
+ increaseProductQuantity(item.id)
+ }
+ className="w-2/5 flex-auto cursor-pointer text-center text-3xl"
+ >
+ +
+
+
+ removeFromCart(item.id)}>
+
+ )
+ })
+ )}
+
+
+ -
+
Tổng thanh toán
+
+ {totalMoney.toLocaleString()}
+
+
+ -
+
Phương thức thanh toán
+
+
+ -
+
Chiết khấu
+
+
+ -
+
Voucher giảm giá
+
+
+ -
+
Vận chuyển
+
+ -
+
Voucher giảm giá
+
+
+
+ Tổng phải trả
+ {totalMoney.toLocaleString()}
+
+
+
+
+
+
+ )
+}
diff --git a/src/screens/Order/component/UserInfo.tsx b/src/screens/Order/component/UserInfo.tsx
new file mode 100644
index 0000000..9efd1d5
--- /dev/null
+++ b/src/screens/Order/component/UserInfo.tsx
@@ -0,0 +1,20 @@
+import { IconEdit } from '../../../svgs'
+
+export default function UserInfo() {
+ return (
+
+
+
+ Thông tin khách hàng
+
+
+ Huyền Trang
+
+ 123 Trần Phú - Di Linh - Lâm Đồng
+ 0123.456.789
+ thanhnt@gmail.com
+
+ )
+}
diff --git a/src/screens/Order/components/MoreAction.tsx b/src/screens/Order/components/MoreAction.tsx
index 29759bd..de5673a 100644
--- a/src/screens/Order/components/MoreAction.tsx
+++ b/src/screens/Order/components/MoreAction.tsx
@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react'
export interface IPopupActions {
items: IAction[]
+ // eslint-disable-next-line no-unused-vars
onChange: (params: IAction) => void
children: JSX.Element
id: GridRowId
diff --git a/src/screens/Order/components/OrderTable.tsx b/src/screens/Order/components/OrderTable.tsx
index 5c9d815..104df7c 100644
--- a/src/screens/Order/components/OrderTable.tsx
+++ b/src/screens/Order/components/OrderTable.tsx
@@ -1,5 +1,5 @@
import { useQuery } from '@tanstack/react-query'
-import { GridRowId } from '@mui/x-data-grid'
+import { GridRowId, GridRowModel } from '@mui/x-data-grid'
import { TableData, Status } from '../../../components'
import { IconAction, IconSetting } from '../../../svgs'
import {
@@ -103,7 +103,6 @@ export function OrderTable() {
const handleSelectAction = (action: string, id: GridRowId) => {
console.log(action, id)
}
-
const { data = [], isLoading } = useQuery({
queryKey: ['orders'],
queryFn: getOrders,
@@ -119,7 +118,8 @@ export function OrderTable() {
pageSizeOptions={[5, 10, 20]}
checkBox={true}
loading={isLoading}
- onHandleSearch={() => getOrders()}
+ onHandleSearch={getOrders}
+ onGetRowId={(row: GridRowModel) => row.orderId}
/>
+
+ )
+}
diff --git a/src/screens/Order/component/PurchaseOrder.tsx b/src/screens/Order/component/PurchaseOrder.tsx
new file mode 100644
index 0000000..35efef4
--- /dev/null
+++ b/src/screens/Order/component/PurchaseOrder.tsx
@@ -0,0 +1,143 @@
+import { useCreatOrderContext } from '../context/CreatOrderContext'
+import { useState } from 'react'
+import { IconDelete, IconMore, IconNotes } from '../../../svgs'
+
+export default function PurchaseOrder() {
+ const [voucherValue, setVoucherValue] = useState(0)
+ const {
+ removeFromCart,
+ listOrder,
+ increaseProductQuantity,
+ decreaseProductQuantity,
+ totalMoney,
+ } = useCreatOrderContext()
+
+ // console.log(parseInt(totalMoney.replace(/\./g, '')))
+ const handleChangeVoucher = (e) => {
+ setVoucherValue(e.target.value)
+ }
+ console.log(voucherValue)
+
+ return (
+
+
+
+
+ + Danh mục sản phẩm +
+
+
+
+
+ Bộ lọc
+
+
+ -
+ {listItem.map((item, index) => (
+
-
+
{item.title}
++ {item.price} +
+ +
+ ))}
+
+
+
+
+ )
+}
diff --git a/src/screens/Order/component/UserInfo.tsx b/src/screens/Order/component/UserInfo.tsx
new file mode 100644
index 0000000..9efd1d5
--- /dev/null
+++ b/src/screens/Order/component/UserInfo.tsx
@@ -0,0 +1,20 @@
+import { IconEdit } from '../../../svgs'
+
+export default function UserInfo() {
+ return (
+
+
+
+
+ Đơn mua
+
+
+ Mã đơn: KH2012386
++ Tổng
{listOrder.length}
+ món + +-
+ {listOrder.length === 0 ? (
+
-
+ ++
{item.title}
++ {item.price} +
++++ decreaseProductQuantity(item.id) + } + className="w-2/5 flex-auto cursor-pointer text-center text-3xl" + > + - +++ {item.quantity} +
++ increaseProductQuantity(item.id) + } + className="w-2/5 flex-auto cursor-pointer text-center text-3xl" + > + + ++removeFromCart(item.id)}> +++
+ )
+ })
+ )}
+
+ Chưa có sản phẩm nào
+
+ ) : (
+ listOrder.map((item, index) => {
+ return (
+ -
+
-
+
Tổng thanh toán
++ {totalMoney.toLocaleString()} +
+
+ -
+
Phương thức thanh toán
+ +
+ -
+
Chiết khấu
+ +
+ -
+
Voucher giảm giá
+ +
+ -
+
Vận chuyển
++
+ -
+
Voucher giảm giá
++
+
+
+ Tổng phải trả
+{totalMoney.toLocaleString()}
+
+
+
+
+
+
+ )
+}
diff --git a/src/screens/Order/components/MoreAction.tsx b/src/screens/Order/components/MoreAction.tsx
index 29759bd..de5673a 100644
--- a/src/screens/Order/components/MoreAction.tsx
+++ b/src/screens/Order/components/MoreAction.tsx
@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react'
export interface IPopupActions {
items: IAction[]
+ // eslint-disable-next-line no-unused-vars
onChange: (params: IAction) => void
children: JSX.Element
id: GridRowId
diff --git a/src/screens/Order/components/OrderTable.tsx b/src/screens/Order/components/OrderTable.tsx
index 5c9d815..104df7c 100644
--- a/src/screens/Order/components/OrderTable.tsx
+++ b/src/screens/Order/components/OrderTable.tsx
@@ -1,5 +1,5 @@
import { useQuery } from '@tanstack/react-query'
-import { GridRowId } from '@mui/x-data-grid'
+import { GridRowId, GridRowModel } from '@mui/x-data-grid'
import { TableData, Status } from '../../../components'
import { IconAction, IconSetting } from '../../../svgs'
import {
@@ -103,7 +103,6 @@ export function OrderTable() {
const handleSelectAction = (action: string, id: GridRowId) => {
console.log(action, id)
}
-
const { data = [], isLoading } = useQuery({
queryKey: ['orders'],
queryFn: getOrders,
@@ -119,7 +118,8 @@ export function OrderTable() {
pageSizeOptions={[5, 10, 20]}
checkBox={true}
loading={isLoading}
- onHandleSearch={() => getOrders()}
+ onHandleSearch={getOrders}
+ onGetRowId={(row: GridRowModel) => row.orderId}
/>
+
+ Thông tin khách hàng
+
+
+ + Huyền Trang +
+123 Trần Phú - Di Linh - Lâm Đồng
+0123.456.789
+thanhnt@gmail.com
+Page Not Found
diff --git a/src/screens/Product/Product.tsx b/src/screens/Product/Product.tsx index de26c0a..83995e5 100644 --- a/src/screens/Product/Product.tsx +++ b/src/screens/Product/Product.tsx @@ -1,3 +1,37 @@ +import { LinkDerectory } from '../../components/LinkDerectory' +import { Link } from 'react-router-dom' +import { IconSum } from '../../svgs' +import { ProductTable } from './components/ProductTable' export const Product = () => { - returnProduct
+ return ( +
+
+ )
}
diff --git a/src/screens/Product/components/AddCategory.tsx b/src/screens/Product/components/AddCategory.tsx
new file mode 100644
index 0000000..4b5134d
--- /dev/null
+++ b/src/screens/Product/components/AddCategory.tsx
@@ -0,0 +1,149 @@
+import { useForm } from 'react-hook-form'
+import { AiOutlineClose } from 'react-icons/ai'
+import { useState } from 'react'
+import { handleKeyPress } from '../../../constants/handleKeyPressNumber'
+import { IconStar } from '../../../svgs'
+interface AddCategoryProps {
+ title: string
+ quatity: number
+ image: string
+}
+export default function AddCategory({ onClick }) {
+ const [selectedFileURL, setSelectedFileURL] = useState('')
+
+ const {
+ register,
+ handleSubmit,
+ formState: { errors },
+ reset,
+ } = useForm
+
+
+
+ -
+
- Danh sách sản phẩm +
+
+
+ Danh mục sản phẩm
+ + +Tạo sản phẩm
+ +
+
+
+
+ )
+}
diff --git a/src/screens/Product/components/CategoryProduct.tsx b/src/screens/Product/components/CategoryProduct.tsx
new file mode 100644
index 0000000..76f0366
--- /dev/null
+++ b/src/screens/Product/components/CategoryProduct.tsx
@@ -0,0 +1,73 @@
+import { LinkDerectory } from '../../../components/LinkDerectory'
+// import { FilterIcon, SumIcon } from '../../Dashboard/components'
+import { useState } from 'react'
+import AddCategory from './AddCategory'
+import PanigationQ from '../../../components/Panigation/PanigationQ'
+import { listProduct } from '../../../constants'
+import { IconAdd, IconSort } from '../../../svgs'
+interface ProductProps {
+ title: string
+ price: number
+ image: string
+}
+export function CategoryProduct() {
+ const [isAddCategory, setIsAddCategory] = useState(false)
+
+ const [listItem, setListItem] = useState
+ {/*
+
+
+
+ Lọc
+-
+ {listItem.map((item, index) => (
+
-
+ ++
+ {item.title} +
++ {item.price} + sản phẩm +
+
+ ))}
+
+
+ )
+}
diff --git a/src/screens/Product/components/ProductTable.tsx b/src/screens/Product/components/ProductTable.tsx
new file mode 100644
index 0000000..7c53a3a
--- /dev/null
+++ b/src/screens/Product/components/ProductTable.tsx
@@ -0,0 +1,121 @@
+import { useQuery } from '@tanstack/react-query'
+import { GridRowId, GridRowModel } from '@mui/x-data-grid'
+import { TableData, Status } from '../../../components'
+import { IconAction, IconSetting } from '../../../svgs'
+import {
+ GridColWithDefaultOptional,
+ defaultGridColValues,
+} from '../../../components/TableData/table.interface'
+import { getProducts } from '../../../services/orderAPI'
+import { MoreAction } from '../../Order/components/MoreAction'
+const actions = [
+ {
+ title: 'Detail',
+ icon: detail
,
+ action: 'detail',
+ },
+ {
+ title: 'Setting',
+ icon: setting
,
+ action: 'setting',
+ },
+ {
+ title: 'Delete',
+ icon: delete
,
+ action: 'delete',
+ },
+]
+
+export function ProductTable() {
+ const columns: GridColWithDefaultOptional[] = [
+ {
+ ...defaultGridColValues,
+ field: 'name',
+ headerName: 'Tên sản phẩm',
+ description: 'Tên sản phẩm',
+ align: 'left',
+ headerAlign: 'left',
+ minWidth: 135,
+ },
+ {
+ ...defaultGridColValues,
+ field: 'category',
+ headerName: 'Danh mục',
+ description: 'Danh mục',
+ minWidth: 130,
+ },
+ {
+ ...defaultGridColValues,
+ field: 'unit',
+ headerName: 'Đơn vị tính',
+ description: 'Đơn vị tính',
+ minWidth: 200,
+ },
+ {
+ ...defaultGridColValues,
+ field: 'price',
+ headerName: 'Giá bán',
+ description: 'Giá bán',
+ minWidth: 150,
+ },
+ {
+ ...defaultGridColValues,
+ field: 'status',
+ headerName: 'Hàng sẵn có',
+ description: 'Hàng sẵn có',
+ minWidth: 160,
+ renderCell: (params) => {
+ return
+
+ )
+}
diff --git a/src/screens/Product/components/SearchResult.tsx b/src/screens/Product/components/SearchResult.tsx
new file mode 100644
index 0000000..1f357de
--- /dev/null
+++ b/src/screens/Product/components/SearchResult.tsx
@@ -0,0 +1,97 @@
+// import { CiSearch } from 'react-icons/ci'
+// import { useEffect, useState } from 'react'
+// import { RefObject, createRef } from 'react'
+// import { listProduct } from '../../../constants'
+// import { useDebounce } from '../../../hooks/useDebounce'
+// import HeadlessTippy from '@tippyjs/react/headless'
+// interface ItemProp {
+// title: string
+// price: number
+// image: string
+// }
+// export const SearchResult = () => {
+// const inputRef: RefObject
+ row.name}
+ />
+
+
+// 0}
+// interactive
+// placement="bottom"
+// offset={[0, 0]}
+// render={(attrs) => (
+//
+//
+// )
+// }
+export const SearchResult = () =>
+// {searchResult.map((item, index) => (
+//
+// )}
+// onClickOutside={handleHideResult}
+// >
+//
+//
+//
+// ))}
+// +// {item.title} +//
+//
+//
+// Hello
diff --git a/src/screens/SignUp/SignUp.tsx b/src/screens/SignUp/SignUp.tsx
index 386c8dc..f42a238 100644
--- a/src/screens/SignUp/SignUp.tsx
+++ b/src/screens/SignUp/SignUp.tsx
@@ -94,7 +94,7 @@ export const SignUp = () => {
size="xxl"
borderRadius={40}
>
- Tạo tài khoảnnnnn
+ Tạo tài khoản
User
+ const [selectedFileURL, setSelectedFileURL] = useState('') + const { + register, + handleSubmit, + formState: { errors }, + reset, + } = useForm
+
+ )
}
diff --git a/src/screens/layouts/MainLayout/MainLayout.tsx b/src/screens/layouts/MainLayout/MainLayout.tsx
index d433c92..204aacf 100644
--- a/src/screens/layouts/MainLayout/MainLayout.tsx
+++ b/src/screens/layouts/MainLayout/MainLayout.tsx
@@ -6,10 +6,12 @@ export const MainLayout = () => {
return (
+
+
+
+
diff --git a/src/screens/layouts/MainLayout/Siderbar.tsx b/src/screens/layouts/MainLayout/Siderbar.tsx
index 869ee93..0aa7cc3 100644
--- a/src/screens/layouts/MainLayout/Siderbar.tsx
+++ b/src/screens/layouts/MainLayout/Siderbar.tsx
@@ -3,7 +3,7 @@ import routerList from '../../../constants/routes'
export const Siderbar = () => {
return (
-