190 |
193 |
194 |
195 | ) : (
196 |
81 | setVisibleModalNotification(false)}>
116 |
138 |
139 | );
140 | };
141 |
142 | export default HeaderComponent;
143 |
--------------------------------------------------------------------------------
/src/components/SalesAndPurchaseStatistic.tsx:
--------------------------------------------------------------------------------
1 | /** @format */
2 |
3 | import { Card, DatePicker, Dropdown, Empty, Radio, Spin } from 'antd';
4 | import React, { useEffect, useState } from 'react';
5 | import { Bar, Line } from 'react-chartjs-2';
6 | import handleAPI from '../apis/handleAPI';
7 | import { DateTime } from '../utils/dateTime';
8 | import { add0toNumber } from '../utils/add0toNumber';
9 |
10 | const SalesAndPurchaseStatistic = () => {
11 | const [timeTypeSelected, setTimeTypeSelected] = useState('monthly');
12 | const [isLoading, setIsLoading] = useState(false);
13 | const [datas, setDatas] = useState<
14 | {
15 | date: string;
16 | data: {
17 | orders: number;
18 | purchase: number;
19 | };
20 | }[]
21 | >([]);
22 |
23 | const options = {
24 | responsive: true,
25 | plugins: {
26 | legend: {
27 | position: 'bottom' as const,
28 | },
29 | title: {
30 | display: false,
31 | },
32 | },
33 | };
34 |
35 | useEffect(() => {
36 | getSalseAndPurchase();
37 | }, [timeTypeSelected]);
38 |
39 | const getSalseAndPurchase = async () => {
40 | const api = `/admin/order-purchase?timeType=${timeTypeSelected}`;
41 | try {
42 | const res = await handleAPI(api);
43 | setDatas(res.data);
44 | } catch (error) {
45 | console.log(error);
46 | }
47 | };
48 |
49 | const renderChart = () => {
50 | return {
51 | labels: datas.map((item) =>
52 | timeTypeSelected === 'yearly'
53 | ? `${add0toNumber(new Date(item.date as string).getMonth())}`
54 | : DateTime.getShortDate(item.date)
55 | ),
56 | datasets: [
57 | {
58 | label: 'Sales',
59 | data: datas.map((item) => item.data.purchase),
60 | backgroundColor: 'rgba(255, 99, 132, 0.2)',
61 | borderColor: 'rgba(255, 99, 132, 1)',
62 | borderWidth: 1,
63 | },
64 | {
65 | label: 'Orders',
66 | data: datas.map((item) => item.data.orders),
67 | backgroundColor: 'rgba(54, 162, 235, 0.2)',
68 | borderColor: 'rgba(54, 162, 235, 1)',
69 | borderWidth: 1,
70 | },
71 | ],
72 | };
73 | };
74 |
75 | return isLoading ? (
76 |
82 | }
90 | />
91 |
92 |
93 |
94 |
110 |
111 |
112 | - (
119 |
77 |
79 | ) : datas ? (
80 |
81 |
111 | ) : (
112 |
82 | setTimeTypeSelected(e.target.value)}
88 | options={[
89 | { label: 'Weekly', value: 'weekly' },
90 | {
91 | label: 'Monthly',
92 | value: 'monthly',
93 | },
94 | {
95 | label: 'Yearly',
96 | value: 'yearly',
97 | },
98 | ]}
99 | optionType='button'
100 | />
101 | }>
102 |
104 |
105 |
106 |
107 |
109 |
110 |
100 | 
101 |
108 | {appInfo.title}
109 |
110 |
111 |
112 |
18 |
74 | );
75 | };
76 |
77 | export default StatisticComponent;
78 |
--------------------------------------------------------------------------------
/src/components/TableComponent.tsx:
--------------------------------------------------------------------------------
1 | /** @format */
2 |
3 | import { Button, Space, Table, Typography } from 'antd';
4 | import { FormModel } from '../models/FormModel';
5 | import { useEffect, useState } from 'react';
6 | import { ColumnProps } from 'antd/es/table';
7 | import { Sort } from 'iconsax-react';
8 | import { colors } from '../constants/colors';
9 | import { Resizable } from 're-resizable';
10 | import { ModalExportData } from '../modals';
11 |
12 | interface Props {
13 | forms: FormModel;
14 | loading?: boolean;
15 | records: any[];
16 | onPageChange: (val: { page: number; pageSize: number }) => void;
17 | onAddNew: () => void;
18 | scrollHeight?: string;
19 | total: number;
20 | extraColumn?: (item: any) => void;
21 | api: string;
22 | }
23 |
24 | const { Title } = Typography;
25 |
26 | const TableComponent = (props: Props) => {
27 | const {
28 | forms,
29 | loading,
30 | records,
31 | onPageChange,
32 | onAddNew,
33 | total,
34 | scrollHeight,
35 | extraColumn,
36 | api,
37 | } = props;
38 |
39 | const [pageInfo, setPageInfo] = useState<{
40 | page: number;
41 | pageSize: number;
42 | }>({
43 | page: 1,
44 | pageSize: 10,
45 | });
46 | const [columns, setColumns] = useState
19 |
40 |
29 | 
38 |
39 |
45 |
73 |
51 |
58 | {value}
59 |
60 |
72 |
61 |
68 | {title}
69 |
70 |
71 | 
25 |
66 |
67 |
68 |
69 | {totalProfitDatas ? (
70 | <>
71 |
131 |
132 |
72 |
95 |
73 | a + b.total, 0)
77 | )}
78 | />
79 |
80 |
81 |
86 |
87 | a + b.total, 0)
91 | )}
92 | />
93 |
94 |
97 |
126 |
127 | ) : (
128 |
98 |
103 |
104 |
109 |
110 |
119 |
120 |
125 |
133 | See all}>
137 | VND.format(total),
160 | },
161 | ]}
162 | />
163 |
164 |
165 |
166 |
167 | );
168 | };
169 |
170 | export default ReportScreen;
171 |
--------------------------------------------------------------------------------
/src/screens/Suppliers.tsx:
--------------------------------------------------------------------------------
1 | /** @format */
2 |
3 | import { Button, Empty, message, Modal, Space, Table, Typography } from 'antd';
4 | import { ColumnProps } from 'antd/es/table';
5 | import { Edit2, Sort, UserRemove } from 'iconsax-react';
6 | import { useEffect, useState } from 'react';
7 | import handleAPI from '../apis/handleAPI';
8 | import { colors } from '../constants/colors';
9 | import { ToogleSupplier } from '../modals';
10 | import { SupplierModel } from '../models/SupplierModel';
11 | import { FormModel } from '../models/FormModel';
12 | import TableComponet from '../components/TableComponent';
13 | import { useNavigate, useRoutes, useSearchParams } from 'react-router-dom';
14 |
15 | const { Title, Text } = Typography;
16 | const { confirm } = Modal;
17 |
18 | const Suppliers = () => {
19 | const [isVisibleModalAddNew, setIsVisibleModalAddNew] = useState(false);
20 | const [suppliers, setSuppliers] = useState
CategoryDetail
;
12 | };
13 |
14 | export default CategoryDetail;
15 |
--------------------------------------------------------------------------------
/src/screens/index.ts:
--------------------------------------------------------------------------------
1 | /** @format */
2 |
3 | import Actions from './Actions';
4 | import Login from './auth/Login';
5 | import SignUp from './auth/SignUp';
6 | import BillsScreen from './bills';
7 | import Inventories from './inventories/Inventories';
8 | import ProductDetail from './inventories/ProductDetail';
9 | import ManageStore from './ManageStore';
10 | import Orders from './orther';
11 | import ReportScreen from './ReportScreen';
12 | import Suppliers from './Suppliers';
13 |
14 | export {
15 | Login,
16 | SignUp,
17 | ManageStore,
18 | Inventories,
19 | ReportScreen,
20 | Orders,
21 | Suppliers,
22 | ProductDetail,
23 | Actions,
24 | BillsScreen,
25 | };
26 |
--------------------------------------------------------------------------------
/src/screens/inventories/AddProduct.tsx:
--------------------------------------------------------------------------------
1 | /** @format */
2 |
3 | import { Editor } from '@tinymce/tinymce-react';
4 | import {
5 | Button,
6 | Card,
7 | Divider,
8 | Form,
9 | Input,
10 | message,
11 | Select,
12 | Space,
13 | Spin,
14 | TreeSelect,
15 | Typography,
16 | Image,
17 | Upload,
18 | UploadProps,
19 | } from 'antd';
20 | import { useEffect, useRef, useState } from 'react';
21 | import handleAPI from '../../apis/handleAPI';
22 | import { SelectModel, TreeModel } from '../../models/FormModel';
23 | import { replaceName } from '../../utils/replaceName';
24 | import { uploadFile } from '../../utils/uploadFile';
25 | import { Add } from 'iconsax-react';
26 | import { ModalCategory } from '../../modals';
27 | import { getTreeValues } from '../../utils/getTreeValues';
28 | import { useSearchParams } from 'react-router-dom';
29 | import ProductDetail from './ProductDetail';
30 |
31 | const { Text, Title, Paragraph } = Typography;
32 |
33 | const AddProduct = () => {
34 | const [isLoading, setIsLoading] = useState(false);
35 | const [content, setcontent] = useState('');
36 | const [supplierOptions, setSupplierOptions] = useState
181 | setIsVisibleAddCategory(false)}
348 | onAddNew={async (val) => {
349 | await getCategories();
350 | }}
351 | values={categories}
352 | />
353 |
354 | );
355 | };
356 |
357 | export default AddProduct;
358 |
--------------------------------------------------------------------------------
/src/screens/inventories/Inventories.tsx:
--------------------------------------------------------------------------------
1 | /** @format */
2 |
3 | import {
4 | Avatar,
5 | Button,
6 | Divider,
7 | Dropdown,
8 | Input,
9 | message,
10 | Modal,
11 | Space,
12 | Table,
13 | Tag,
14 | Tooltip,
15 | Typography,
16 | } from 'antd';
17 | import { ColumnProps, TableProps } from 'antd/es/table';
18 | import { Edit2, Sort, Trash } from 'iconsax-react';
19 | import React, { useEffect, useState } from 'react';
20 | import { MdLibraryAdd } from 'react-icons/md';
21 | import { Link, useNavigate } from 'react-router-dom';
22 | import handleAPI from '../../apis/handleAPI';
23 | import { FilterProduct } from '../../components';
24 | import { FilterProductValue } from '../../components/FilterProduct';
25 | import { colors, listColors } from '../../constants/colors';
26 | import { AddSubProductModal } from '../../modals';
27 | import {
28 | CategoyModel,
29 | ProductModel,
30 | SubProductModel,
31 | } from '../../models/Products';
32 | import { replaceName } from '../../utils/replaceName';
33 |
34 | const { confirm } = Modal;
35 |
36 | type TableRowSelection
182 | Add new Product
183 |
343 |
344 |
345 | {desc}
136 |
332 | record._id}
410 | pagination={{
411 | showSizeChanger: true,
412 | onShowSizeChange: (current, size) => {
413 | // console.log(current, size);
414 | // console.log('size');
415 | },
416 | total,
417 | onChange(page, pageSize) {
418 | setPage(page);
419 | setPageSize(pageSize);
420 | },
421 | showQuickJumper: false,
422 | }}
423 | rowSelection={rowSelection}
424 | dataSource={products}
425 | columns={columns}
426 | loading={isLoading}
427 | scroll={{
428 | x: '100%',
429 | }}
430 | bordered
431 | size='small'
432 | />
433 |
434 |
333 |
408 |
334 | Product
335 |
336 |
337 | {selectedRowKeys.length > 0 && (
338 |
339 |
340 |
360 |
361 |
362 | {selectedRowKeys.length} items selected
363 |
364 | {selectedRowKeys.length < total && (
365 |
368 | )}
369 |
370 | )}
371 |
372 |
373 |
374 |
375 | {isFilting && (
376 |
386 | )}
387 | setSearchKey(val.target.value)}
390 | onSearch={handleSearchProducts}
391 | placeholder='Search'
392 | allowClear
393 | />
394 | (
396 | handleFilterProducts(vals)}
399 | />
400 | )}>
401 | }>Filter
402 |
403 |
406 |
407 |
147 | setIsVisibleAddSubProduct(true)}>
153 | Add product
154 |
155 | }>
156 |
162 |
163 |
173 |
174 | {
178 | setIsVisibleAddSubProduct(false);
179 | }}
180 | onAddNew={async (val: any) => {
181 | setIsVisibleAddSubProduct(false);
182 |
183 | const index = subProducts.findIndex(
184 | (element) =>
185 | element.product.value === val.product.value &&
186 | element.color === val.color &&
187 | element.size === val.size
188 | );
189 |
190 | if (index !== -1) {
191 | const item: ItemProps = subProducts[index];
192 | item.qty += val.qty;
193 | item.price = val.price;
194 | item.cost = val.cost;
195 |
196 | const newSubProducts = [...subProducts];
197 | newSubProducts[index] = item;
198 | setSubProducts(newSubProducts);
199 | } else {
200 | setSubProducts([...subProducts, val]);
201 | }
202 | }}
203 | />
204 |
205 | );
206 | };
207 |
208 | export default AddOrder;
209 |
--------------------------------------------------------------------------------
/src/screens/orther/index.tsx:
--------------------------------------------------------------------------------
1 | /** @format */
2 |
3 | import { useEffect, useState } from 'react';
4 | import handleAPI from '../../apis/handleAPI';
5 | import {
6 | Button,
7 | Card,
8 | ColorPicker,
9 | DatePicker,
10 | Radio,
11 | Space,
12 | Statistic,
13 | Table,
14 | Typography,
15 | } from 'antd';
16 | import { OrderModel } from '../../models/OrderModel';
17 | import { ColumnProps } from 'antd/es/table';
18 | import { DateTime } from '../../utils/dateTime';
19 | import { useNavigate } from 'react-router-dom';
20 | import { StatisticComponent } from '../../components';
21 |
22 | const Orders = () => {
23 | const [loading, setLoading] = useState(false);
24 | const [page, setPage] = useState(1);
25 | const [limit, setLimit] = useState(20);
26 | const [total, setTotal] = useState(0);
27 | const [api, setApi] = useState('');
28 | const [orders, setOrders] = useState
164 |
171 |
172 |
176 |
179 | {title}
180 |
181 |
196 | );
197 | };
198 |
199 | const flatArray = (arr: OrderModel[]) => {
200 | const items: string[] = [];
201 |
202 | arr.map((item) => {
203 | !items.includes(item.product_id) && items.push(item.product_id);
204 | });
205 |
206 | return items;
207 | };
208 | return (
209 |
182 |
183 | {value}
184 |
185 | {total && (
186 |
187 | {total}
188 |
189 | )}
190 |
191 |
192 | {label}
193 | {desc && {desc} }
194 |
195 |
210 |
242 |
280 | navigate('/orders/add-new')}>
284 | Add Order
285 |
286 | }>
287 | setPage(page),
298 | }}
299 | />
300 |
301 |
302 | );
303 | };
304 |
305 | export default Orders;
306 |
--------------------------------------------------------------------------------
/src/setupTests.ts:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 |
--------------------------------------------------------------------------------
/src/utils/add0toNumber.ts:
--------------------------------------------------------------------------------
1 | /** @format */
2 |
3 | export const add0toNumber = (num: number) => `${num > 9 ? num : `0${num}`}`;
4 |
--------------------------------------------------------------------------------
/src/utils/dateTime.ts:
--------------------------------------------------------------------------------
1 | /** @format */
2 |
3 | import { add0toNumber } from './add0toNumber';
4 |
5 | export class DateTime {
6 | static CalendarDate = (val: any) => {
7 | const date = new Date(val);
8 |
9 | // YYYY/MM/DD
10 | return `${date.getFullYear()}-${add0toNumber(
11 | date.getMonth() + 1
12 | )}-${add0toNumber(date.getDate())}`;
13 | };
14 |
15 | static getShortDate = (val: any) => {
16 | const date = new Date(val);
17 | return `${add0toNumber(date.getDate())}/${add0toNumber(
18 | date.getMonth() + 1
19 | )}`;
20 | };
21 | }
22 |
--------------------------------------------------------------------------------
/src/utils/formatNumber.ts:
--------------------------------------------------------------------------------
1 | /** @format */
2 |
3 | export const formatNumber = (num: string) =>
4 | num.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
5 |
6 | export class FormatCurrency {
7 | static VND = new Intl.NumberFormat(`vi-VN`, {
8 | style: 'currency',
9 | currency: 'VND',
10 | });
11 | }
12 |
--------------------------------------------------------------------------------
/src/utils/getTreeValues.ts:
--------------------------------------------------------------------------------
1 | /** @format */
2 |
3 | export const getTreeValues = (data: any[], isSelect?: boolean) => {
4 | const values: any = [];
5 | const items = data.filter((element) => !element.parentId);
6 | const newItems = items.map((item) =>
7 | isSelect
8 | ? {
9 | label: item.title,
10 | value: item._id,
11 | }
12 | : { ...item, key: item._id }
13 | );
14 |
15 | newItems.forEach((item) => {
16 | const children = changeMenu(
17 | data,
18 | isSelect ? item.value : item._id,
19 | isSelect ?? false
20 | );
21 | values.push({
22 | ...item,
23 | children,
24 | });
25 | });
26 |
27 | return values;
28 | };
29 |
30 | const changeMenu = (data: any[], id: string, isSelect: boolean) => {
31 | const items: any = [];
32 | const datas = data.filter((element) => element.parentId === id);
33 |
34 | datas.forEach((val) =>
35 | items.push(
36 | isSelect
37 | ? {
38 | label: val.title,
39 | value: val._id,
40 | children: changeMenu(data, val._id, isSelect),
41 | }
42 | : {
43 | ...val,
44 | key: val._id,
45 | children: changeMenu(data, val._id, isSelect),
46 | }
47 | )
48 | );
49 | return items;
50 | };
51 |
--------------------------------------------------------------------------------
/src/utils/handleCurrency.ts:
--------------------------------------------------------------------------------
1 | /** @format */
2 |
3 | export const VND = new Intl.NumberFormat('vi-VN', {
4 | style: 'currency',
5 | currency: 'VND',
6 | });
7 |
--------------------------------------------------------------------------------
/src/utils/handleExportExcel.ts:
--------------------------------------------------------------------------------
1 | /** @format */
2 |
3 | import { utils, writeFileXLSX } from 'xlsx';
4 |
5 | export const hanldExportExcel = async (data: any[], name?: string) => {
6 | const ws = utils.json_to_sheet(data);
7 | const wb = utils.book_new();
8 |
9 | utils.book_append_sheet(wb, ws, `data`);
10 |
11 | writeFileXLSX(wb, `${name ? name : `Kanban-data-${Date.now()}`}.xlsx`);
12 | };
13 |
--------------------------------------------------------------------------------
/src/utils/replaceName.ts:
--------------------------------------------------------------------------------
1 | /** @format */
2 |
3 | export const replaceName = (str: string) => {
4 | return str
5 | .normalize('NFD')
6 | .toLocaleLowerCase()
7 | .replace(/[\u0300-\u036f]/g, '')
8 | .replace(/đ/g, 'd')
9 | .replace(/Đ/g, 'D')
10 | .replace(/ /g, '-')
11 | .replace(/[:!@#$%^&*()?;/]/g, '');
12 | };
13 |
--------------------------------------------------------------------------------
/src/utils/uploadFile.ts:
--------------------------------------------------------------------------------
1 | /** @format */
2 |
3 | import { UploadProps } from 'antd';
4 | import { storage } from '../firebase/firebaseConfig';
5 | import { replaceName } from './replaceName';
6 | import { getDownloadURL, ref, uploadBytes } from 'firebase/storage';
7 | import Resizer from 'react-image-file-resizer';
8 |
9 | export const uploadFile = async (file: any) => {
10 | const newFile: any = await handleResize(file);
11 |
12 | const filename = replaceName(newFile.name);
13 |
14 | const storageRef = ref(storage, `images/${filename}`);
15 |
16 | const res = await uploadBytes(storageRef, newFile);
17 |
18 | if (res) {
19 | if (res.metadata.size === newFile.size) {
20 | return getDownloadURL(storageRef);
21 | } else {
22 | return 'Uploading';
23 | }
24 | } else {
25 | return 'Error upload';
26 | }
27 | };
28 |
29 | export const handleResize = (file: any) =>
30 | new Promise((resolve) => {
31 | Resizer.imageFileResizer(
32 | file,
33 | 1080,
34 | 720,
35 | 'JPEG',
36 | 80,
37 | 0,
38 | (newfile) => {
39 | newfile && resolve(newfile);
40 | },
41 | 'file'
42 | );
43 | });
44 |
45 | export const handleChangeFile: UploadProps['onChange'] = ({
46 | fileList: newFileList,
47 | }) => {
48 | const items = newFileList.map((item) =>
49 | item.originFileObj
50 | ? {
51 | ...item,
52 | url: item.originFileObj
53 | ? URL.createObjectURL(item.originFileObj)
54 | : '',
55 | status: 'done',
56 | }
57 | : { ...item }
58 | );
59 |
60 | return items;
61 | };
62 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "esModuleInterop": true,
8 | "allowSyntheticDefaultImports": true,
9 | "strict": true,
10 | "forceConsistentCasingInFileNames": true,
11 | "noFallthroughCasesInSwitch": true,
12 | "module": "esnext",
13 | "moduleResolution": "node",
14 | "resolveJsonModule": true,
15 | "isolatedModules": true,
16 | "noEmit": true,
17 | "jsx": "react-jsx"
18 | },
19 | "include": ["src", "**/*.ts", "**/*.tsx"]
20 | }
21 |
--------------------------------------------------------------------------------
211 |
212 | setDateSelected(val.target.value)}
214 | value={dateSelected}>
215 | setDateSelected('day')}>
216 | Day
217 |
218 | setDateSelected('week')}>
219 | Week
220 |
221 | setDateSelected('month')}>
224 | Month
225 |
226 | setDateSelected('year')}>
227 | Year
228 |
229 |
230 | {
234 | if (vals && vals.length === 2) {
235 | setDates({ start: vals[0].toDate(), end: vals[1].toDate() });
236 | }
237 | }}
238 | />
239 |
240 |
241 |
243 | {renderStatisticItem({
244 | title: 'Products',
245 | value: `${orders.length > 0 ? flatArray(orders).length : 0} `,
246 | label: `Last ${30} days`,
247 | })}
248 | {renderStatisticItem({
249 | title: 'Sub Products',
250 | value: orders.reduce((a, b) => a + b.quantity, 0).toLocaleString(),
251 | total: orders.reduce((a, b) => a + b.total, 0).toLocaleString(),
252 | label: `Last ${30} days`,
253 | })}
254 | {renderStatisticItem({
255 | title: 'Done',
256 | value: orders
257 | .filter((element) => element.status === 'done')
258 | .reduce((a, b) => a + b.quantity, 0)
259 | .toLocaleString(),
260 | total: orders
261 | .filter((element) => element.status === 'done')
262 | .reduce((a, b) => a + b.total, 0)
263 | .toLocaleString(),
264 | label: `Last ${30} days`,
265 | })}
266 | {renderStatisticItem({
267 | title: 'Waiting',
268 | value: orders
269 | .filter((element) => element.status === 'waiting')
270 | .reduce((a, b) => a + b.quantity, 0)
271 | .toLocaleString(),
272 | total: orders
273 | .filter((element) => element.status === 'waiting')
274 | .reduce((a, b) => a + b.total, 0)
275 | .toLocaleString(),
276 | label: `Last ${30} days`,
277 | })}
278 |
279 |