19 |
31 |
32 | );
33 | };
34 |
35 | export default Switch;
36 |
--------------------------------------------------------------------------------
/src/router/AppRouter.jsx:
--------------------------------------------------------------------------------
1 | import { Route, Routes } from "react-router-dom";
2 | import Login from "../pages/Login";
3 | import Register from "../pages/Register";
4 | import PrivateRouter from "./PrivateRouter";
5 | import Dashboard from "../pages/Dashboard";
6 | import Purchases from "../pages/Purchases"
7 | import Sales from "../pages/Sales"
8 | import Brands from "../pages/Brands"
9 | import Firms from "../pages/Firms"
10 | import Products from "../pages/Products"
11 | import ScrollToTop from "../pages/ScroolToTop";
12 | import { NotFound } from "../components/DataMessage";
13 |
14 | const AppRouter = () => {
15 | return (
16 | <>
17 |
27 | {error &&
40 |
41 | );
42 | };
43 |
44 | export default Dashboard;
45 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "first-app",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@emotion/react": "^11.11.3",
7 | "@emotion/styled": "^11.11.0",
8 | "@headlessui/react": "^1.7.17",
9 | "@heroicons/react": "^2.1.1",
10 | "@material-tailwind/react": "^2.1.8",
11 | "@mui/icons-material": "^5.15.4",
12 | "@mui/material": "^5.15.4",
13 | "@mui/x-data-grid": "^6.18.7",
14 | "@reduxjs/toolkit": "^2.0.1",
15 | "apexcharts": "^3.45.1",
16 | "axios": "^1.6.5",
17 | "formik": "^2.4.5",
18 | "open-graph": "^0.2.6",
19 | "react": "^18.2.0",
20 | "react-apexcharts": "^1.4.1",
21 | "react-dom": "^18.2.0",
22 | "react-helmet": "^6.1.0",
23 | "react-redux": "^9.0.4",
24 | "react-router-dom": "^6.21.1",
25 | "react-scripts": "5.0.1",
26 | "react-toastify": "^9.1.3",
27 | "redux-persist": "^6.0.0",
28 | "yup": "^1.3.3"
29 | },
30 | "scripts": {
31 | "start": "react-scripts start",
32 | "build": "react-scripts build",
33 | "test": "react-scripts test",
34 | "eject": "react-scripts eject"
35 | },
36 | "eslintConfig": {
37 | "extends": [
38 | "react-app",
39 | "react-app/jest"
40 | ]
41 | },
42 | "browserslist": {
43 | "production": [
44 | ">0.2%",
45 | "not dead",
46 | "not op_mini all"
47 | ],
48 | "development": [
49 | "last 1 chrome version",
50 | "last 1 firefox version",
51 | "last 1 safari version"
52 | ]
53 | },
54 | "devDependencies": {
55 | "tailwindcss": "^3.4.1"
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/src/components/Stats.jsx:
--------------------------------------------------------------------------------
1 | import { useSelector } from "react-redux";
2 | import {
3 | CheckIcon,
4 | DolarIcon,
5 | PurchasesIcon,
6 | UsersIcon,
7 | } from "../helper/icons";
8 | const Stats = () => {
9 | const { sales, purchases } = useSelector((state) => state.stock);
10 | const totalSales = sales?.reduce((acc, item) => acc + item.amount, 0);
11 | const totalPurchases = purchases?.reduce((acc, item) => acc + item.amount, 0);
12 | const section = [
13 | { title: "Total Sales", amount: `$${totalSales}`, icon:
33 |
37 |
38 | )}
39 |
21 |
38 | -
22 | {section.map(({ amount, title, icon }) => (
23 |
- {amount} 29 |
- 30 | {title} 31 | 32 |
27 |
35 | ))}
36 |
28 |
33 | {icon}
34 |
8 | 
13 |
40 |
41 | );
42 | };
43 |
44 | export default BrandCard;
45 |
--------------------------------------------------------------------------------
/src/components/BrandForm.jsx:
--------------------------------------------------------------------------------
1 | import {
2 | Dialog,
3 | } from "@material-tailwind/react";
4 | import useStockCalls from "../service/useStockCalls";
5 | import { Input } from "@material-tailwind/react";
6 | const BrandForm = ({open,handleClose, data, setData}) => {
7 | const inputData = [
8 | { type: "text", placeholder: "Brand Name", name:"name" },
9 | { type: "url", placeholder: "Image Url", name:"image" },
10 | ];
11 |
12 | const handleChange = (e) => {
13 | setData({ ...data, [e.target.name]: e.target.value });
14 | };
15 | const { postStock, putStock } = useStockCalls();
16 | const handleSubmit = (e) => {
17 | e.preventDefault();
18 | if(data._id){
19 | putStock("brands",data)
20 | }else{
21 | postStock("brands", data);
22 | }
23 | handleClose();
24 | };
25 |
26 | return (
27 |
53 | );
54 | };
55 |
56 | export default BrandForm;
57 |
--------------------------------------------------------------------------------
/src/service/useAuthCalls.js:
--------------------------------------------------------------------------------
1 | import { useDispatch} from "react-redux";
2 | import { useNavigate } from "react-router-dom";
3 | import {
4 | fetchFail,
5 | fetchStart,
6 | loginSuccess,
7 | registerSuccess,
8 | logoutSuccess,
9 | } from "../features/authSlice";
10 | import { toastErrorNotify, toastSuccessNotify } from "../helper/ToastNotify";
11 | import useAxios from "./useAxios";
12 | const useAuthCalls = () => {
13 | const navigate = useNavigate();
14 | const dispatch = useDispatch();
15 | const {axiosWithToken, axiosPublic} = useAxios()
16 | const login = async (userInfo) => {
17 | dispatch(fetchStart());
18 | try {
19 | const {data } = await axiosPublic.post("/auth/login/",userInfo);
20 | dispatch(loginSuccess(data));
21 | toastSuccessNotify("Login successful.");
22 | navigate("/stock");
23 | } catch (error) {
24 | dispatch(fetchFail());
25 | toastErrorNotify("Login attempt failed.");
26 | }
27 | };
28 | const register = async (userInfo) => {
29 | dispatch(fetchStart());
30 | try {
31 | const { data } = await axiosPublic.post("/users/",userInfo);
32 | dispatch(registerSuccess(data));
33 | toastSuccessNotify("Registration successful.");
34 | navigate("/stock");
35 | } catch (error) {
36 | dispatch(fetchFail());
37 | toastErrorNotify("Registration unsuccessful.");
38 | }
39 | };
40 | const logout = async () => {
41 | dispatch(fetchStart());
42 | try {
43 | await axiosWithToken.get("/auth/logout/")
44 | toastSuccessNotify("Logout successful.");
45 | dispatch(logoutSuccess());
46 | } catch (error) {
47 | dispatch(fetchFail());
48 | toastErrorNotify("Logout attempt failed.");
49 | }
50 | };
51 | return { login, register, logout };
52 | };
53 |
54 | export default useAuthCalls;
55 |
--------------------------------------------------------------------------------
/src/components/FirmForm.jsx:
--------------------------------------------------------------------------------
1 | import { Dialog } from "@material-tailwind/react";
2 | import useStockCalls from "../service/useStockCalls";
3 | import { Input } from "@material-tailwind/react";
4 | const FirmForm = ({ open,handleClose, data, setData }) => {
5 | const inputData = [
6 | { type: "text", placeholder: "Firm Name", name: "name" },
7 | { type: "text", placeholder: "Phone", name: "phone" },
8 | { type: "text", placeholder: "Adress", name: "address" },
9 | { type: "url", placeholder: "Image Url", name: "image" },
10 | ];
11 | const handleChange = (e) => {
12 | setData({ ...data, [e.target.name]: e.target.value });
13 | };
14 | const { postStock, putStock } = useStockCalls();
15 | const handleSubmit = (e) => {
16 | e.preventDefault();
17 | if (data._id) {
18 | putStock("firms", data);
19 | } else {
20 | postStock("firms", data);
21 | }
22 | handleClose();
23 | };
24 | return (
25 |
52 | );
53 | };
54 |
55 | export default FirmForm;
56 |
--------------------------------------------------------------------------------
/src/pages/Login.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import logo from "../assets/logo.png";
3 | import useAuthCalls from "../service/useAuthCalls";
4 | import { Formik } from "formik";
5 | import { loginSchema } from "../components/LoginForm";
6 | import LoginForm from "../components/LoginForm";
7 | import { Helmet } from "react-helmet";
8 |
9 | const Login = () => {
10 | const { login } = useAuthCalls();
11 |
12 | return (
13 | <>
14 |
14 |
39 | -
15 |
- Firm Name 17 |
- {name} 18 |
16 |
19 |
21 |
22 |
29 |
36 |
37 |
38 |
20 |
21 |
46 |
47 |
48 | );
49 | };
50 |
51 | export default Login;
52 |
--------------------------------------------------------------------------------
/src/pages/Register.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import logo from "../assets/logo.png";
3 | import { Formik } from "formik";
4 | import RegisterForm, { registerSchema } from "../components/RegisterForm";
5 | import useAuthCalls from "../service/useAuthCalls";
6 | import { Helmet } from "react-helmet";
7 |
8 | const Register = () => {
9 | const { register } = useAuthCalls();
10 | return (
11 | <>
12 |
22 | 
27 |
28 |
29 | {
38 | login(values);
39 | actions.resetForm();
40 | actions.setSubmitting(false);
41 | }}
42 | component={(props) =>
44 |
45 |
30 |
34 | 31 | Login to your Account 32 |
33 |
18 |
19 |
50 |
51 |
52 | );
53 | };
54 |
55 | export default Register;
56 |
--------------------------------------------------------------------------------
/src/components/ProductTable.jsx:
--------------------------------------------------------------------------------
1 | import { DataGrid, GridActionsCellItem, GridToolbar } from "@mui/x-data-grid";
2 | import { useSelector } from "react-redux";
3 | import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
4 | import useStockCalls from "../service/useStockCalls";
5 | const ProductTable = () => {
6 | const { products } = useSelector((state) => state.stock);
7 | const { deleteStocks } = useStockCalls();
8 | const columns = [
9 | {
10 | field: "_id",
11 | headerName: "#",
12 | flex: 1.4,
13 | minWidth: "150px",
14 |
15 | sortable: false,
16 | },
17 | {
18 | field: "categoryId",
19 | headerName: "Category",
20 | flex: 1,
21 |
22 | valueGetter: (props) => {
23 | return props.row?.categoryId?.name;
24 | },
25 | },
26 | {
27 | field: "brandId",
28 | headerName: "Brand",
29 | flex: 1,
30 | valueGetter: (props) => props.row?.brandId?.name,
31 | },
32 | {
33 | field: "name",
34 | headerName: "Name",
35 | flex: 1,
36 | },
37 | {
38 | field: "quantity",
39 | headerName: "Stock",
40 | type: "number",
41 | flex: 1,
42 | headerAlign: "left",
43 | align: "left",
44 | },
45 | {
46 | field: "actions",
47 | type: "actions",
48 | headerName: "Actions",
49 | getActions: (props) => [
50 |
20 |
25 |
26 |
27 | {
42 | register(values);
43 | actions.resetForm();
44 | actions.setSubmitting(false);
45 | }}
46 | component={(props) =>
48 |
49 |
28 |
32 | 29 | Create your Account 30 |
31 |
61 |
79 | );
80 | };
81 |
82 | export default ProductTable;
83 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 | |
44 | |
52 | ))}
53 | ||
|---|---|---|
|
59 | |
67 |
68 | |
76 | 77 | 78 | | 79 |
9 |
14 |
64 | );
65 | };
66 |
67 | export default FirmCard;
68 |
--------------------------------------------------------------------------------
/src/components/SaleTable.jsx:
--------------------------------------------------------------------------------
1 | import { DataGrid, GridActionsCellItem, GridToolbar } from "@mui/x-data-grid";
2 | import { useSelector } from "react-redux";
3 | import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
4 | import useStockCalls from "../service/useStockCalls";
5 | import EditIcon from "@mui/icons-material/Edit";
6 | const SaleTable = ({handleOpen, setData}) => {
7 | const { sales } = useSelector((state) => state.stock);
8 | const { deleteStocks } = useStockCalls();
9 | const columns = [
10 | {
11 | field: "createdAt",
12 | headerName: "Date",
13 | flex: 1,
14 | renderCell: ({ row }) => row.createdAtStr.slice(0,22),
15 | },
16 | {
17 | field: "brandId",
18 | headerName: "Brand",
19 | flex: 1,
20 | renderCell: ({ row }) => row?.brandId?.name,
21 | },
22 | {
23 | field: "productId",
24 | headerName: "Product",
25 | flex: 1,
26 | renderCell: ({ row }) => row?.productId?.name,
27 | },
28 | {
29 | field: "quantity",
30 | headerName: "Quantity",
31 | flex: 1,
32 | },
33 | {
34 | field: "price",
35 | headerName: "Price",
36 | flex: 1,
37 | },
38 | {
39 | field: "amount",
40 | headerName: "Amount",
41 | flex: 1,
42 | },
43 | {
44 | field: "actions",
45 | type: "actions",
46 | headerName: "Actions",
47 | flex: 1,
48 | renderCell: ({ row: { brandId, price, quantity, productId, _id } }) => {
49 | return [
50 |
15 |
63 | -
16 |
- Firm Name 18 |
- {name} 19 |
17 |
20 |
22 |
41 |
23 |
31 |
24 | {phoneIcon}
25 |
26 |
27 |
30 | Phone
28 |{phone}
29 |
32 |
40 |
33 | {addressIcon}
34 |
35 |
36 |
39 | Adress
37 |{address}
38 |
42 |
43 |
53 |
60 |
61 |
62 |
73 |
91 | );
92 | };
93 |
94 | export default SaleTable;
95 |
--------------------------------------------------------------------------------
/src/components/LoginForm.jsx:
--------------------------------------------------------------------------------
1 | import { Form } from "formik";
2 | import { object, string } from "yup";
3 | import { NavLink } from "react-router-dom";
4 | import { EmailIcon, PasswordIcon } from "../helper/icons";
5 |
6 | export const loginSchema = object({
7 | email: string()
8 | .email("Please enter a valid email.")
9 | .required("Email is required."),
10 | password: string()
11 | .required("Password is required.")
12 | .min(8, "Password must contain at least 8 characters.")
13 | .matches(/\d+/, "Password must contain at least one digit.")
14 | .matches(/[a-z]/, "Password must contain at least one lowercase letter.")
15 | .matches(/[A-Z]/, "Password must contain at least one uppercase letter.")
16 | .matches(
17 | /[@$!%*?&]+/,
18 | "Password must contain at least one special character (@$!%*?&)."
19 | ),
20 | });
21 |
22 | const inputData = [
23 | {
24 | label: "email",
25 | name: "email",
26 | type: "email",
27 | placeholder: "Enter email",
28 | },
29 | {
30 | label: "password",
31 | name: "password",
32 | type: "password",
33 | placeholder: "Enter password",
34 | },
35 | ];
36 | const LoginForm = ({ handleChange, values, touched, errors, handleBlur }) => {
37 | return (
38 |
80 | );
81 | };
82 |
83 | export default LoginForm;
84 |
--------------------------------------------------------------------------------
/src/service/useStockCalls.js:
--------------------------------------------------------------------------------
1 | import { useDispatch } from "react-redux";
2 | import useAxios from "./useAxios";
3 | import { fetchFail, fetchStart } from "../features/stockSlice";
4 | import { getStockSuccess ,getPromiseSuccess} from "../features/stockSlice";
5 | import { toastErrorNotify, toastSuccessNotify } from "../helper/ToastNotify";
6 | const useStockCalls = () => {
7 | const dispatch = useDispatch();
8 | const { axiosWithToken } = useAxios();
9 | const getStocks = async (url = "firms") => {
10 | dispatch(fetchStart());
11 | try {
12 | const { data } = await axiosWithToken(`${url}`);
13 | const apiData = data.data;
14 | dispatch(getStockSuccess({ apiData, url }));
15 | } catch (error) {
16 | dispatch(fetchFail());
17 | }
18 | };
19 | const deleteStocks = async (url = "firms", id) => {
20 | dispatch(fetchStart());
21 | try {
22 | await axiosWithToken.delete(`/${url}/${id}/`);
23 | toastSuccessNotify("Data has been deleted.");
24 | getStocks(url);
25 | } catch (error) {
26 | dispatch(fetchFail());
27 | toastErrorNotify("Data could not be deleted.");
28 | }
29 | };
30 | const postStock = async (url = "firms", info) => {
31 | dispatch(fetchStart());
32 | try {
33 | await axiosWithToken.post(`${url}`, info);
34 | getStocks(url);
35 | toastSuccessNotify("Data has been added.");
36 | } catch (error) {
37 | dispatch(fetchFail());
38 | toastErrorNotify("Data could not be added.");
39 | }
40 | };
41 | const putStock = async (url = "firms", info) => {
42 | dispatch(fetchStart());
43 | try {
44 | await axiosWithToken.put(`/${url}/${info._id}/`, info);
45 | toastSuccessNotify("Data has been updated.");
46 | getStocks(url);
47 | } catch (error) {
48 | dispatch(fetchFail());
49 | toastErrorNotify("Data could not be updated.");
50 | }
51 | };
52 | const searchStock = async (url = "firms", value) => {
53 | dispatch(fetchStart());
54 | try {
55 | const lowercaseValue = value.toLowerCase();
56 | const { data } = await axiosWithToken.get(
57 | `/${url}/?search[name]=${lowercaseValue}`
58 | );
59 | const apiData = data.data;
60 | dispatch(getStockSuccess({ apiData, url }));
61 | } catch (error) {
62 | dispatch(fetchFail());
63 | }
64 | };
65 | const getPromise = async(endpoints)=>{
66 | dispatch(fetchStart());
67 | try {
68 | const responses = await Promise.all(
69 | endpoints.map((endpoint) => axiosWithToken(endpoint))
70 | );
71 | const data = responses.map((response) => response?.data?.data);
72 | dispatch(getPromiseSuccess({data,endpoints}));
73 | } catch (error) {
74 | dispatch(fetchFail());
75 | }
76 |
77 | }
78 |
79 | return {
80 | getStocks,
81 | deleteStocks,
82 | postStock,
83 | putStock,
84 | searchStock,
85 | getPromise,
86 | };
87 | };
88 |
89 | export default useStockCalls;
90 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Created by https://www.toptal.com/developers/gitignore/api/node
2 | # Edit at https://www.toptal.com/developers/gitignore?templates=node
3 |
4 | ### Node ###
5 | # Logs
6 | logs
7 | *.log
8 | npm-debug.log*
9 | yarn-debug.log*
10 | yarn-error.log*
11 | lerna-debug.log*
12 | .pnpm-debug.log*
13 |
14 | # Diagnostic reports (https://nodejs.org/api/report.html)
15 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
16 |
17 | # Runtime data
18 | pids
19 | *.pid
20 | *.seed
21 | *.pid.lock
22 |
23 | # Directory for instrumented libs generated by jscoverage/JSCover
24 | lib-cov
25 |
26 | # Coverage directory used by tools like istanbul
27 | coverage
28 | *.lcov
29 |
30 | # nyc test coverage
31 | .nyc_output
32 |
33 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
34 | .grunt
35 |
36 | # Bower dependency directory (https://bower.io/)
37 | bower_components
38 |
39 | # node-waf configuration
40 | .lock-wscript
41 |
42 | # Compiled binary addons (https://nodejs.org/api/addons.html)
43 | build/Release
44 |
45 | # Dependency directories
46 | node_modules/
47 | jspm_packages/
48 |
49 | # Snowpack dependency directory (https://snowpack.dev/)
50 | web_modules/
51 |
52 | # TypeScript cache
53 | *.tsbuildinfo
54 |
55 | # Optional npm cache directory
56 | .npm
57 |
58 | # Optional eslint cache
59 | .eslintcache
60 |
61 | # Optional stylelint cache
62 | .stylelintcache
63 |
64 | # Microbundle cache
65 | .rpt2_cache/
66 | .rts2_cache_cjs/
67 | .rts2_cache_es/
68 | .rts2_cache_umd/
69 |
70 | # Optional REPL history
71 | .node_repl_history
72 |
73 | # Output of 'npm pack'
74 | *.tgz
75 |
76 | # Yarn Integrity file
77 | .yarn-integrity
78 |
79 | # dotenv environment variable files
80 | .env
81 | .env.development.local
82 | .env.test.local
83 | .env.production.local
84 | .env.local
85 |
86 | # parcel-bundler cache (https://parceljs.org/)
87 | .cache
88 | .parcel-cache
89 |
90 | # Next.js build output
91 | .next
92 | out
93 |
94 | # Nuxt.js build / generate output
95 | .nuxt
96 | dist
97 |
98 | # Gatsby files
99 | .cache/
100 | # Comment in the public line in if your project uses Gatsby and not Next.js
101 | # https://nextjs.org/blog/next-9-1#public-directory-support
102 | # public
103 |
104 | # vuepress build output
105 | .vuepress/dist
106 |
107 | # vuepress v2.x temp and cache directory
108 | .temp
109 |
110 | # Docusaurus cache and generated files
111 | .docusaurus
112 |
113 | # Serverless directories
114 | .serverless/
115 |
116 | # FuseBox cache
117 | .fusebox/
118 |
119 | # DynamoDB Local files
120 | .dynamodb/
121 |
122 | # TernJS port file
123 | .tern-port
124 |
125 | # Stores VSCode versions used for testing VSCode extensions
126 | .vscode-test
127 |
128 | # yarn v2
129 | .yarn/cache
130 | .yarn/unplugged
131 | .yarn/build-state.yml
132 | .yarn/install-state.gz
133 | .pnp.*
134 |
135 | ### Node Patch ###
136 | # Serverless Webpack directories
137 | .webpack/
138 |
139 | # Optional stylelint cache
140 |
141 | # SvelteKit build / generate output
142 | .svelte-kit
143 |
144 | # End of https://www.toptal.com/developers/gitignore/api/node
--------------------------------------------------------------------------------
/src/components/PurchaseTable.jsx:
--------------------------------------------------------------------------------
1 | import { DataGrid, GridActionsCellItem, GridToolbar } from "@mui/x-data-grid";
2 | import { useSelector } from "react-redux";
3 | import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
4 | import useStockCalls from "../service/useStockCalls";
5 | import EditIcon from "@mui/icons-material/Edit";
6 | const PurchaseTable = ({handleOpen, setData}) => {
7 | const { purchases } = useSelector((state) => state.stock)
8 | const { deleteStocks } = useStockCalls();
9 | const columns = [
10 | {
11 | field: "createdAt",
12 | headerName: "Date",
13 | flex: 1,
14 | renderCell: ({ row }) => row.createdAtStr.slice(0,22),
15 | },
16 | {
17 | field: "firmId",
18 | headerName: "Firm",
19 | flex: 1,
20 | renderCell: ({ row }) => row?.firmId?.name,
21 | },
22 | {
23 | field: "brandId",
24 | headerName: "Brand",
25 | flex: 1,
26 | renderCell: ({ row }) => row?.brandId?.name,
27 | },
28 | {
29 | field: "productId",
30 | headerName: "Product",
31 | flex: 1,
32 | renderCell: ({ row }) => row?.productId?.name,
33 | },
34 | {
35 | field: "quantity",
36 | headerName: "Quantity",
37 | flex: 1,
38 | },
39 | {
40 | field: "price",
41 | headerName: "Price",
42 | flex: 1,
43 | },
44 | {
45 | field: "amount",
46 | headerName: "Amount",
47 | flex: 1,
48 | },
49 | {
50 | field: "actions",
51 | type: "actions",
52 | headerName: "Actions",
53 | flex: 1,
54 | renderCell: ({ row: { brandId, productId, quantity, price, firmId, _id } }) => {
55 | return [
56 |
79 |
97 | );
98 | };
99 |
100 | export default PurchaseTable;
101 |
102 |
--------------------------------------------------------------------------------
/src/pages/Products.jsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | import useStockCalls from "../service/useStockCalls";
3 | import ProductTable from "../components/ProductTable";
4 | import { useSelector } from "react-redux";
5 | import ProductForm from "../components/ProductForm";
6 | import { LoadingMsg, NotFound } from "../components/DataMessage";
7 | import { NoData } from "../components/DataMessage";
8 | import { Helmet } from "react-helmet";
9 |
10 | const Products = () => {
11 | const [open, setOpen] = useState(false);
12 | const handleOpen = () => setOpen(true);
13 | const handleClose = () => {
14 | setData({ categoryId: "", brandId: "", name: "" });
15 | setOpen(false);
16 | };
17 | const [data, setData] = useState({
18 | categoryId: "",
19 | brandId: "",
20 | name: "",
21 | });
22 | const { getStocks, getPromise } = useStockCalls();
23 | const { products, error, loading } = useSelector((state) => state.stock);
24 | useEffect(() => {
25 | getPromise(["products", "categories", "brands"]);
26 | }, []);
27 |
28 | return (
29 | <>
30 |
36 | {error &&
72 |
73 | );
74 | };
75 |
76 | export default Products;
77 |
--------------------------------------------------------------------------------
/src/pages/Sales.jsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | import useStockCalls from "../service/useStockCalls";
3 | import SaleTable from "../components/SaleTable";
4 | import { useSelector } from "react-redux";
5 | import SaleForm from "../components/SaleForm";
6 | import { LoadingMsg, NotFound } from "../components/DataMessage";
7 | import { NoData } from "../components/DataMessage";
8 | import { Helmet } from "react-helmet";
9 |
10 | const Sales = () => {
11 | const [open, setOpen] = useState(false);
12 | const handleOpen = () => setOpen(true);
13 | const handleClose = () => {
14 | setData({ brandId: "", productId: "", quantity: "", price: "" });
15 | setOpen(false);
16 | };
17 |
18 | const [data, setData] = useState({
19 | brandId: "",
20 | productId: "",
21 | quantity: "",
22 | price: "",
23 | });
24 |
25 | const { getPromise } = useStockCalls();
26 | const { sales, error, loading } = useSelector((state) => state.stock);
27 | useEffect(() => {
28 | getPromise(["products", "sales", "brands"]);
29 | }, []);
30 |
31 | return (
32 | <>
33 |
41 |
68 | {products.length === 0 ?
42 |
47 | Products
43 |44 | See information about all products 45 |
46 |
48 |
67 |
49 |
58 |
66 |
38 | {error &&
78 |
79 | );
80 | };
81 | export default Sales;
82 |
--------------------------------------------------------------------------------
/src/pages/Purchases.jsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | import useStockCalls from "../service/useStockCalls";
3 | import PurchaseTable from "../components/PurchaseTable";
4 | import { useSelector } from "react-redux";
5 | import { Helmet } from "react-helmet";
6 | import { LoadingMsg, NotFound, TableSkeleton } from "../components/DataMessage";
7 | import { NoData } from "../components/DataMessage";
8 | import PurchaseForm from "../components/PurchaseForm";
9 |
10 | const Purchases = () => {
11 | const [open, setOpen] = useState(false);
12 | const handleOpen = () => setOpen(true);
13 |
14 | const handleClose = () => {
15 | setData({
16 | brandId: "",
17 | firmId: "",
18 | productId: "",
19 | quantity: "",
20 | price: "",
21 | });
22 | setOpen(false);
23 | };
24 |
25 | const [data, setData] = useState({
26 | brandId: "",
27 | firmId: "",
28 | productId: "",
29 | quantity: "",
30 | price: "",
31 | });
32 |
33 | const { getStocks, getPromise } = useStockCalls();
34 | const { purchases, error, loading } = useSelector((state) => state.stock);
35 |
36 | useEffect(() => {
37 | getPromise(["products", "purchases", "brands", "firms"]);
38 | }, []);
39 |
40 | return (
41 | <>
42 |
43 |
70 | {sales.length === 0 ? (
71 |
44 |
49 | Sales
45 |46 | See information about all sales 47 |
48 |
50 |
69 |
51 |
60 |
68 |
48 | {error &&
88 |
89 | );
90 | };
91 |
92 | export default Purchases;
93 |
--------------------------------------------------------------------------------
/src/components/SaleForm.jsx:
--------------------------------------------------------------------------------
1 | import { Dialog, Option, Select } from "@material-tailwind/react";
2 | import useStockCalls from "../service/useStockCalls";
3 | import { useSelector } from "react-redux";
4 | import { useNavigate } from "react-router-dom";
5 | import { Input } from "@material-tailwind/react";
6 | import React from "react";
7 | const SaleForm = ({ open, handleClose, data, setData }) => {
8 | const navigate = useNavigate();
9 | const handleChange = (e, fieldName, fieldType) => {
10 | if (fieldType === "select") {
11 | setData({ ...data, [fieldName]: e });
12 | } else {
13 | setData({ ...data, [fieldName]: e.target.value });
14 | }
15 | };
16 | const { postStock, putStock } = useStockCalls();
17 | const { brands, products } = useSelector((state) => state.stock);
18 | const handleSubmit = (e) => {
19 | e.preventDefault();
20 | if (data._id) {
21 | putStock("sales", data);
22 | } else {
23 | postStock("sales", data);
24 | console.log(data)
25 | }
26 | handleClose();
27 | };
28 |
29 | const myBrand = [
30 | {
31 | _id: "",
32 | name: "Add New Brand",
33 | onClick: () => navigate("/stock/brands/"),
34 | },
35 | ...brands,
36 | ];
37 | const myProduct = [
38 | {
39 | _id: "",
40 | name: "Add New Product",
41 | onClick: () => navigate("/stock/products"),
42 | },
43 | ...products,
44 | ];
45 | return (
46 |
104 | );
105 | };
106 |
107 | export default SaleForm;
108 |
--------------------------------------------------------------------------------
/src/components/RegisterForm.jsx:
--------------------------------------------------------------------------------
1 | import { Form } from "formik"
2 | import { object, string } from "yup"
3 | import { NavLink } from "react-router-dom";
4 | import { EmailIcon, PasswordIcon } from "../helper/icons";
5 | export const registerSchema = object({
6 | username: string()
7 | .max(10, "The username must be less than 10 characters.")
8 | .required(
9 | "The username is required."),
10 | firstName: string()
11 | .max(10, "The first name must be less than 10 characters.")
12 | .required(
13 | "The first name is required."),
14 | lastName: string()
15 | .max(10,
16 | "The last name must be less than 10 characters.")
17 | .required("The last name is required."),
18 |
19 | email: string()
20 | .email(
21 | "Please enter a valid email.")
22 | .required(
23 | "Email is required."),
24 | password: string()
25 | .required(
26 | "Password is required.")
27 | .min(8, "The password must be at least 8 characters.")
28 | .matches(/\d+/,
29 | "The password must contain at least one number.")
30 | .matches(/[a-z]/, "Password must contain at least one lowercase letter.")
31 | .matches(/[A-Z]/, "Password must contain at least one uppercase letter.")
32 | .matches(/[!/[@$!%*?&]+/, "Password must contain at least one special character (@$!%*?&)."),
33 | })
34 | const inputData= [
35 | {label:"username", name:"username", type:"text", placeholder:"User Name", icon:"" },
36 | {label:"firstName", name:"firstName", type:"text", placeholder:"First Name", icon:"" },
37 | {label:"lastName", name:"lastName", type:"text", placeholder:"Last Name", icon:"" },
38 | {label:"email", name:"email", type:"email", placeholder:"Enter email", icon:
53 |
80 | {purchases.length === 0 ? (
81 |
54 |
59 | Purchases
55 |56 | See information about all purchase 57 |
58 |
60 |
79 |
61 |
70 |
78 |
101 |
103 |
104 |
105 | Total Sales
106 |
107 |
112 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, ratione et tempora ipsa repellat est.
113 |
114 |
115 |
100 |
102 |
103 |
104 | Total Purchases
105 |
106 |
111 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex dolorem libero voluptates, quis accusamus iste.
112 |
113 |
114 |
39 | {error &&
107 |
108 | );
109 | };
110 |
111 | export default Brands;
112 |
--------------------------------------------------------------------------------
/src/pages/Firms.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react";
2 | import FirmCard from "../components/FirmCard";
3 | import FirmForm from "../components/FirmForm";
4 | import { useSelector } from "react-redux";
5 | import useStockCalls from "../service/useStockCalls";
6 | import { searchIcon } from "../helper/icons";
7 | import { CardSkeloton, NoData, NotFound } from "../components/DataMessage";
8 | import { Helmet } from "react-helmet";
9 |
10 | const Firms = () => {
11 | const [open, setOpen] = useState(false);
12 | const handleOpen = () => setOpen(true);
13 | const handleClose = () => {
14 | setData({ name: "", phone: "", address: "", image: "" });
15 | setOpen(false);
16 | };
17 |
18 | const { firms, loading, error } = useSelector((state) => state.stock);
19 | const { searchStock } = useStockCalls();
20 | const [data, setData] = useState({
21 | name: "",
22 | phone: "",
23 | address: "",
24 | image: "",
25 | });
26 |
27 | const [value, setValue] = useState("");
28 |
29 | useEffect(() => {
30 | searchStock("firms", value);
31 | }, [value]);
32 |
33 | return (
34 | <>
35 |
43 |
89 | {loading ? (
90 |
44 |
49 | Brand List
45 |46 | See information about all brands 47 |
48 |
50 |
88 |
51 | setValue(e.target.value)}
58 | autoComplete="off"
59 | />
60 |
61 |
68 |
69 |
70 |
71 |
80 |
87 |
93 | {brands?.map((brand) => (
94 |
102 | )}
103 |
104 | )}
105 | {!error && !loading && !brands.length &&
41 | {error &&
110 |
111 | );
112 | };
113 |
114 | export default Firms;
115 |
--------------------------------------------------------------------------------
/src/components/DataMessage.jsx:
--------------------------------------------------------------------------------
1 | import { loadingIcon } from "../helper/icons";
2 |
3 | export const NotFound = () => {
4 | return (
5 |
45 |
92 | {loading ? (
93 |
46 |
51 | Firm List
47 |48 | See information about all firm 49 |
50 |
52 |
91 |
53 | setValue(e.target.value)}
60 | autoComplete="off"
61 | />
62 |
63 |
70 |
71 |
72 |
73 |
82 |
90 |
96 | {firms?.map((firm) => (
97 |
105 | )}
106 | {!error && !loading && !firms.length &&
6 |
10 | );
11 | };
12 | export const NoData = () => {
13 | return (
14 | 7 | 404 | Not Found 8 |
9 |
15 |
33 | );
34 | };
35 | export const CardSkeloton = () => {
36 | const arr = [1, 2, 3, 4, 5, 6, 7];
37 | return (
38 |
16 |
30 |
31 | No Product!
32 |
39 | {arr.map((item, index) => (
40 |
74 | );
75 | };
76 | export const LoadingMsg = () => {
77 | return (
78 |
41 |
72 | ))}
73 |
42 | {loadingIcon}
43 |
44 |
45 |
61 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
62 |
70 |
71 |
79 |
84 | );
85 | };
86 |
--------------------------------------------------------------------------------
/src/components/Navbar.jsx:
--------------------------------------------------------------------------------
1 | import { Fragment, useState } from "react";
2 | import { Dialog, Disclosure, Popover, Transition } from "@headlessui/react";
3 | import {
4 | ArrowPathIcon,
5 | Bars3Icon,
6 | ChartPieIcon,
7 | CursorArrowRaysIcon,
8 | FingerPrintIcon,
9 | SquaresPlusIcon,
10 | XMarkIcon,
11 | } from "@heroicons/react/24/outline";
12 | import {
13 | ChevronDownIcon,
14 | PhoneIcon,
15 | PlayCircleIcon,
16 | } from "@heroicons/react/20/solid";
17 | import Switch from "./Switch";
18 | import logo from "../assets/logo.png";
19 | import { useSelector } from "react-redux";
20 | import useAuthCalls from "../service/useAuthCalls";
21 | import { NavLink } from "react-router-dom";
22 | const products = [
23 | {
24 | name: "Analytics",
25 | description: "Get a better understanding of your traffic",
26 | href: "#",
27 | icon: ChartPieIcon,
28 | },
29 | {
30 | name: "Engagement",
31 | description: "Speak directly to your customers",
32 | href: "#",
33 | icon: CursorArrowRaysIcon,
34 | },
35 | {
36 | name: "Security",
37 | description: "Your customers’ data will be safe and secure",
38 | href: "#",
39 | icon: FingerPrintIcon,
40 | },
41 | {
42 | name: "Integrations",
43 | description: "Connect with third-party tools",
44 | href: "#",
45 | icon: SquaresPlusIcon,
46 | },
47 | {
48 | name: "Automations",
49 | description: "Build strategic funnels that will convert",
50 | href: "#",
51 | icon: ArrowPathIcon,
52 | },
53 | ];
54 | const callsToAction = [
55 | { name: "Watch demo", href: "#", icon: PlayCircleIcon },
56 | { name: "Contact sales", href: "#", icon: PhoneIcon },
57 | ];
58 | const menu = [
59 | {
60 | title: "Dashboard",
61 | url: "/stock/",
62 | },
63 | {
64 | title: "Purchases",
65 | url: "/stock/purchases/",
66 | },
67 | {
68 | title: "Sales",
69 | url: "/stock/sales/",
70 | },
71 | {
72 | title: "Firms",
73 | url: "/stock/firms/",
74 | },
75 | {
76 | title: "Brands",
77 | url: "/stock/brands/",
78 | },
79 | {
80 | title: "Products",
81 | url: "/stock/products/",
82 | },
83 | ]
84 | function classNames(...classes) {
85 | return classes.filter(Boolean).join(" ");
86 | }
87 |
88 | export default function Navbar() {
89 | const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
90 | const {user} = useSelector((state)=> state.auth)
91 | const {logout} = useAuthCalls()
92 | return (
93 | 80 | Loading... 81 |
82 |Please wait...
83 |8 | If you prefer to see Redoc or JSON instead of Swagger, simply replace 'swagger' in the endpoint with 'redoc' or 'json'.
9 | [Swagger Documents](https://stock-management-system-backend.onrender.com/documents/swagger/) 10 | 11 | ## Project Skeleton 12 | 13 | ``` 14 | Stock Management System (folder) 15 | | 16 | | 17 | ├── public 18 | │ └── index.html 19 | ├── src 20 | │ ├── app 21 | │ │ └── store.jsx 22 | │ ├── assets 23 | │ │ └── logo.png 24 | │ ├── components 25 | │ │ ├──BarChart.jsx 26 | │ │ ├──BrandCard.jsx 27 | │ │ ├──BrandForm.jsx 28 | │ │ ├──DataMessage.jsx 29 | │ │ ├──FirmCard.jsx 30 | │ │ ├──FirmForm.jsx 31 | │ │ ├──Footer.jsx 32 | │ │ ├──LineChart.jsx 33 | │ │ ├──LoginForm.jsx 34 | │ │ ├──Navbar.jsx 35 | │ │ ├──ProductForm.jsx 36 | │ │ ├──ProductTable.jsx 37 | │ │ ├──RecentReport.jsx 38 | │ │ ├──RegisterForm.jsx 39 | │ │ ├──SaleForm.jsx 40 | │ │ ├──SaleTable.jsx 41 | │ │ ├──Stats.jsx 42 | │ │ └──Switch.jsx 43 | │ ├── features 44 | │ │ ├──authSlice.js 45 | │ │ └──stockSlice.js 46 | │ ├── helpers 47 | │ │ ├── icon.js 48 | │ │ └──ToastNotify.js 49 | │ ├── pages 50 | │ │ ├──Brands.jsx 51 | │ │ ├──Dashboard.jsx 52 | │ │ ├──Firms.jsx 53 | │ │ ├──Login.jsx 54 | │ │ ├──Products.jsx 55 | │ │ ├──Purchases.jsx 56 | │ │ ├──Register.jsx 57 | │ │ ├──Sales.jsx 58 | │ │ └──ScroolToTop.jsx 59 | │ ├── router 60 | │ │ ├── PrivateRouter.jsx 61 | │ │ └── AppRouter.jsx 62 | │ ├── service 63 | │ │ ├── useAuthCalls.js 64 | │ │ ├── useAxios.js 65 | │ │ └── useStockCalls.js 66 | │ ├── App.js 67 | │ ├── index.js 68 | │ ├── index.css 69 | ├── .env 70 | ├── package-lock-json 71 | ├── package.json 72 | ├── tailwind.config.js 73 | └── README.md 74 | ``` 75 | 76 | ## Packages Utilized in the Development: 77 | 78 | - **React**: A JavaScript library for building user interfaces, providing a declarative and component-based approach to UI development. 79 | - **React-Redux**: Official Redux bindings for React, enabling seamless integration of Redux state management with React components. 80 | - **Redux Toolkit**: An opinionated, batteries-included Redux library for efficient and simplified Redux usage, including Redux logic and state management utilities. 81 | - **Redux-persist**: A library for persisting Redux state to local storage or other storage mechanisms, ensuring data persistence between sessions. 82 | - **Yup**: A schema validation library for JavaScript, enabling easy and efficient validation of data schemas, particularly useful in form validation. 83 | - **Formik**: A React library for building forms with easy form state management, form validation, and form submission handling. 84 | - **Material-UI**: A popular React UI framework providing a set of pre-designed and customizable UI components based on Google's Material Design guidelines. 85 | - **Tailwind CSS**: A utility-first CSS framework for creating custom and responsive user interfaces with minimal CSS code, focusing on utility classes for styling. 86 | - **Material Tailwind**: A UI kit that combines the utility-first approach of Tailwind CSS with the components and design principles of Material Design. 87 | - **ApexCharts**: A modern JavaScript charting library that offers a wide range of interactive and visually appealing charts for data visualization in web applications. 88 | - **MUI Data Grid**: A feature-rich data grid component for React applications, offering advanced features like sorting, filtering, pagination, and customization options. 89 | - **Axios**: A promise-based HTTP client for making asynchronous HTTP requests in JavaScript environments, commonly used for consuming APIs. 90 | - **React-toastify**: A React library for displaying toast notifications in web applications, providing customizable and user-friendly notifications for various actions. 91 | - **React Router DOM**: A routing library for React applications, allowing for declarative routing and navigation between different views or pages within the application. 92 | - **React Helmet**: A React library for managing document head meta-information, enabling the dynamic manipulation of HTML head elements, including title, meta tags, and more. 93 | - **React Open Graph**: A React library for generating Open Graph meta tags, facilitating the customization and inclusion of Open Graph metadata in web pages for improved sharing on social media platforms. 94 | 95 | ## Tools Utilized in the Development: 96 | - **Postman**: A popular API testing and development tool used for testing backend API endpoints and debugging HTTP requests. 97 | - **Redux DevTools**: A browser extension and development tool that integrates with Redux, facilitating debugging and monitoring of Redux state changes during development. 98 | 99 | 100 | 101 | ## How to use? 102 | - If you have an account, you can log in; otherwise, you can create a new account. 103 | - You can delete or edit existing information at any time. 104 | - Easily add new information through the application. 105 | - You can enter product, firm, brand, etc., update stocks, and sell products currently in stock 106 | - Perform sorting or filtering operations on the displayed data in tabular form. 107 | - Access graphical representation of the data. 108 | 109 | ## Getting Started 110 | 111 | This is an example of how you may give instructions on setting up your project locally. 112 | To get a local copy up and running follow these simple example steps. 113 | 114 | ### Prerequisites 115 | 116 | This is an example of how to list things you need to use the software and how to install them. 117 | 118 | - npm 119 | ```sh 120 | npm install npm@latest -g 121 | 122 | ### Installation 123 | 124 | _Below is an example of how you can instruct your audience on installing and setting up your app. This template doesn't rely on any external dependencies or services._ 125 | 126 | 1. Clone the repo 127 | ```sh 128 | git clone https://github.com/esmaaksoy/Stock-Management-System-Frontend 129 | ``` 130 | 2. Install NPM packages 131 | ```sh 132 | npm install 133 | ``` 134 | 3. Create .env file in home directory. 135 | ```sh 136 | REACT_APP_BASE_URL=https://stock-management-system-backend.onrender.com/ 137 | ``` 138 | 5. The project is ready, you can start using it now. 139 | You can run: 140 | 141 | `npm start` 142 | 143 | Runs the app in the development mode.\ 144 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 145 | 146 | ## API Reference 147 | https://stock-management-system-backend.onrender.com/ 148 | 149 | ## İMPORTANT NOTES ! 150 | 151 | To use the application, you can log in with the following email and password
152 | email: admin@site.com
153 | password: aA?123456
154 | 155 | -------------------------------------------------------------------------------- /src/helper/icons.js: -------------------------------------------------------------------------------- 1 | export const loadingIcon = ( 2 | 16 | ); 17 | export const searchIcon = ( 18 | 32 | ); 33 | export const editIcon = ( 34 | 48 | ); 49 | export const deleteIcon = ( 50 | 64 | ); 65 | export const addressIcon = ( 66 | 85 | ); 86 | export const phoneIcon = ( 87 | 101 | ); 102 | export const EmailIcon = () => ( 103 | 117 | ); 118 | export const PasswordIcon = () => ( 119 | 139 | ); 140 | export const DolarIcon = () => ( 141 | 155 | ); 156 | export const UsersIcon = () => ( 157 | 171 | ); 172 | export const PurchasesIcon = () => ( 173 | 187 | ); 188 | export const CheckIcon = () => ( 189 | 203 | ); 204 | --------------------------------------------------------------------------------