├── client
├── public
│ ├── robots.txt
│ ├── favicon.ico
│ ├── logo192.png
│ ├── logo512.png
│ ├── images
│ │ ├── sale.png
│ │ ├── user.png
│ │ ├── money.png
│ │ ├── product.png
│ │ ├── statistic.svg
│ │ ├── admin.svg
│ │ ├── customer.svg
│ │ └── responsive.svg
│ ├── manifest.json
│ └── index.html
├── postcss.config.js
├── src
│ ├── redux
│ │ ├── store.js
│ │ └── cartSlice.js
│ ├── components
│ │ ├── categories
│ │ │ ├── style.css
│ │ │ ├── Add.jsx
│ │ │ ├── Categories.jsx
│ │ │ └── Edit.jsx
│ │ ├── header
│ │ │ ├── index.css
│ │ │ └── Header.jsx
│ │ ├── auth
│ │ │ └── AuthCarousel.jsx
│ │ ├── statistics
│ │ │ └── StatisticCard.jsx
│ │ ├── products
│ │ │ ├── ProductItem.jsx
│ │ │ ├── Products.jsx
│ │ │ ├── Add.jsx
│ │ │ └── Edit.jsx
│ │ ├── cart
│ │ │ ├── CreateBill.jsx
│ │ │ └── CartTotals.jsx
│ │ └── bills
│ │ │ └── PrintBill.jsx
│ ├── index.js
│ ├── pages
│ │ ├── ProductPage.jsx
│ │ ├── HomePage.jsx
│ │ ├── StatisticPage.jsx
│ │ ├── auth
│ │ │ ├── Login.jsx
│ │ │ └── Register.jsx
│ │ ├── CustomerPage.jsx
│ │ ├── BillPage.jsx
│ │ └── CartPage.jsx
│ ├── index.css
│ └── App.jsx
├── tailwind.config.js
├── .gitignore
├── package.json
└── README.md
└── api
├── models
├── Category.js
├── User.js
├── Product.js
└── Bill.js
├── .gitignore
├── package.json
├── routes
├── users.js
├── bills.js
├── auth.js
├── products.js
└── categories.js
└── server.js
/client/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/client/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/eminbasbayan/pos-application-udemy/HEAD/client/public/favicon.ico
--------------------------------------------------------------------------------
/client/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/eminbasbayan/pos-application-udemy/HEAD/client/public/logo192.png
--------------------------------------------------------------------------------
/client/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/eminbasbayan/pos-application-udemy/HEAD/client/public/logo512.png
--------------------------------------------------------------------------------
/client/public/images/sale.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/eminbasbayan/pos-application-udemy/HEAD/client/public/images/sale.png
--------------------------------------------------------------------------------
/client/public/images/user.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/eminbasbayan/pos-application-udemy/HEAD/client/public/images/user.png
--------------------------------------------------------------------------------
/client/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/client/public/images/money.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/eminbasbayan/pos-application-udemy/HEAD/client/public/images/money.png
--------------------------------------------------------------------------------
/client/public/images/product.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/eminbasbayan/pos-application-udemy/HEAD/client/public/images/product.png
--------------------------------------------------------------------------------
/client/src/redux/store.js:
--------------------------------------------------------------------------------
1 | import { configureStore } from "@reduxjs/toolkit";
2 | import cartSlice from "./cartSlice";
3 |
4 | export default configureStore({
5 | reducer: {
6 | cart: cartSlice,
7 | },
8 | });
9 |
--------------------------------------------------------------------------------
/client/src/components/categories/style.css:
--------------------------------------------------------------------------------
1 | .category-item {
2 | @apply bg-green-700 px-6 py-10 text-white cursor-pointer hover:bg-pink-700 transition-all text-center min-w-[145px] flex items-center justify-center;
3 | }
4 |
--------------------------------------------------------------------------------
/api/models/Category.js:
--------------------------------------------------------------------------------
1 | const mongoose = require("mongoose");
2 |
3 | const CategorySchema = mongoose.Schema(
4 | {
5 | title: { type: String, require: true },
6 | },
7 | { timestamps: true }
8 | );
9 |
10 | const Category = mongoose.model("categories", CategorySchema);
11 | module.exports = Category;
12 |
--------------------------------------------------------------------------------
/client/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | content: ["./src/**/*.{js,jsx,ts,tsx}"],
4 | theme: {
5 | extend: {
6 | gridTemplateColumns: {
7 | "card": "repeat(auto-fill, minmax(150px, 1fr))"
8 | },
9 | },
10 | },
11 | plugins: [],
12 | };
13 |
--------------------------------------------------------------------------------
/api/models/User.js:
--------------------------------------------------------------------------------
1 | const mongoose = require("mongoose");
2 |
3 | const UserSchema = mongoose.Schema(
4 | {
5 | username: { type: String, require: true },
6 | email: { type: String, require: true },
7 | password: { type: String, require: true },
8 | },
9 | { timestamps: true }
10 | );
11 |
12 | const User = mongoose.model("users", UserSchema);
13 | module.exports = User;
14 |
--------------------------------------------------------------------------------
/client/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom/client";
3 | import "./index.css";
4 | import App from "./App";
5 | import { Provider } from "react-redux";
6 | import store from "./redux/store";
7 |
8 | const root = ReactDOM.createRoot(document.getElementById("root"));
9 | root.render(
10 |
11 |
13 | );
14 |
--------------------------------------------------------------------------------
/client/src/components/header/index.css:
--------------------------------------------------------------------------------
1 | .menu-links {
2 | @apply flex justify-between items-center gap-7 md:static fixed z-50 bottom-0 md:w-auto w-screen md:bg-transparent bg-white left-0 md:border-t-0 border-t md:px-0 px-4 py-1;
3 | }
4 |
5 | .menu-link {
6 | @apply flex flex-col hover:text-[#40a9ff] transition-all gap-y-[2px];
7 | }
8 |
9 | .menu-link.active {
10 | @apply !text-[#40a9ff];
11 | }
12 |
--------------------------------------------------------------------------------
/api/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | .env
--------------------------------------------------------------------------------
/client/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | .env
--------------------------------------------------------------------------------
/api/models/Product.js:
--------------------------------------------------------------------------------
1 | const mongoose = require("mongoose");
2 |
3 | const ProductSchema = mongoose.Schema(
4 | {
5 | title: { type: String, require: true },
6 | img: { type: String, require: true },
7 | price: { type: Number, require: true },
8 | category: { type: String, require: true },
9 | },
10 | { timestamps: true }
11 | );
12 |
13 | const Product = mongoose.model("products", ProductSchema);
14 | module.exports = Product;
15 |
--------------------------------------------------------------------------------
/client/src/pages/ProductPage.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Header from "../components/header/Header";
3 | import Edit from "../components/products/Edit";
4 |
5 | const ProductPage = () => {
6 | return (
7 | <>
8 |
9 |
10 |
Ürünler
11 |
4 |
5 |
{title}
6 |
{desc}
7 |
4 |
5 |
6 |
7 |
8 |
9 |
{title}
10 |
{amount}
11 |
12 |
13 |
18 |
19 |
24 |
25 |
26 | {item.title}
27 | {item.price}₺
28 |
29 |
setIsAddModalOpen(false)}
38 | footer={false}
39 | >
40 |
54 |
55 | );
56 | };
57 |
58 | export default Add;
59 |
--------------------------------------------------------------------------------
/client/src/components/products/Products.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import ProductItem from "./ProductItem";
3 | import { PlusOutlined, EditOutlined } from "@ant-design/icons";
4 | import Add from "./Add";
5 | import { useNavigate } from "react-router-dom";
6 |
7 | const Products = ({ categories, filtered, products, setProducts, search }) => {
8 | const [isAddModalOpen, setIsAddModalOpen] = useState(false);
9 | const navigate = useNavigate();
10 |
11 | return (
12 |
13 | {filtered
14 | .filter((product) => product.title?.toLowerCase().includes(search))
15 | .map((item) => (
16 |
17 | ))}
18 |
19 |
setIsAddModalOpen(true)}
22 | >
23 |
24 |
25 |
navigate("/products")}
28 | >
29 |
31 |
38 |
React App
28 |
29 |
30 | You need to enable JavaScript to run this app.
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/client/src/redux/cartSlice.js:
--------------------------------------------------------------------------------
1 | import { createSlice } from "@reduxjs/toolkit";
2 |
3 | const cartSlice = createSlice({
4 | name: "cart",
5 | initialState: {
6 | cartItems: localStorage.getItem("cart")
7 | ? JSON.parse(localStorage.getItem("cart")).cartItems
8 | : [],
9 | total: localStorage.getItem("cart")
10 | ? JSON.parse(localStorage.getItem("cart")).total
11 | : 0,
12 | tax: 8,
13 | },
14 | reducers: {
15 | addProduct: (state, action) => {
16 | const findCartItem = state.cartItems.find(
17 | (item) => item._id === action.payload._id
18 | );
19 |
20 | if (findCartItem) {
21 | findCartItem.quantity = findCartItem.quantity + 1;
22 | } else {
23 | state.cartItems.push(action.payload);
24 | }
25 | state.total += action.payload.price;
26 | },
27 | deleteCart: (state, action) => {
28 | state.cartItems = state.cartItems.filter(
29 | (item) => item._id !== action.payload._id
30 | );
31 | state.total -= action.payload.price * action.payload.quantity;
32 | },
33 | increase: (state, action) => {
34 | const cartItem = state.cartItems.find(
35 | (item) => item._id === action.payload._id
36 | );
37 | cartItem.quantity += 1;
38 | state.total += cartItem.price;
39 | },
40 | decrease: (state, action) => {
41 | const cartItem = state.cartItems.find(
42 | (item) => item._id === action.payload._id
43 | );
44 | cartItem.quantity -= 1;
45 | if (cartItem.quantity === 0) {
46 | state.cartItems = state.cartItems.filter(
47 | (item) => item._id !== action.payload._id
48 | );
49 | }
50 | state.total -= cartItem.price;
51 | },
52 | reset: (state) => {
53 | state.cartItems = [];
54 | state.total = 0;
55 | },
56 | },
57 | });
58 |
59 | export const { addProduct, deleteCart, increase, decrease, reset } =
60 | cartSlice.actions;
61 | export default cartSlice.reducer;
62 |
--------------------------------------------------------------------------------
/client/src/components/categories/Categories.jsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | import { PlusOutlined, EditOutlined } from "@ant-design/icons";
3 | import Add from "./Add";
4 | import Edit from "./Edit";
5 | import "./style.css";
6 |
7 | const Categories = ({ categories, setCategories, setFiltered, products }) => {
8 | const [isAddModalOpen, setIsAddModalOpen] = useState(false);
9 | const [isEditModalOpen, setIsEditModalOpen] = useState(false);
10 | const [categoryTitle, setCategoryTitle] = useState("Tümü");
11 |
12 | useEffect(() => {
13 | if (categoryTitle === "Tümü") {
14 | setFiltered(products);
15 | } else {
16 | setFiltered(products.filter((item) => item.category === categoryTitle));
17 | }
18 | }, [products, setFiltered, categoryTitle]);
19 |
20 | return (
21 |
22 | {categories.map((item) => (
23 | setCategoryTitle(item.title)}
29 | >
30 | {item.title}
31 |
32 | ))}
33 | setIsAddModalOpen(true)}
36 | >
37 |
39 | setIsEditModalOpen(true)}
42 | >
43 |
45 |
58 | );
59 | };
60 |
61 | export default Categories;
62 |
--------------------------------------------------------------------------------
/client/src/App.jsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from "react";
2 | import { useSelector } from "react-redux";
3 | import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
4 | import Login from "./pages/auth/Login";
5 | import Register from "./pages/auth/Register";
6 | import BillPage from "./pages/BillPage";
7 | import CartPage from "./pages/CartPage";
8 | import CustomerPage from "./pages/CustomerPage";
9 | import HomePage from "./pages/HomePage";
10 | import ProductPage from "./pages/ProductPage";
11 | import StatisticPage from "./pages/StatisticPage";
12 |
13 | function App() {
14 | const cart = useSelector((state) => state.cart);
15 |
16 | useEffect(() => {
17 | localStorage.setItem("cart", JSON.stringify(cart));
18 | }, [cart]);
19 |
20 | return (
21 |
22 |
23 |
27 |
35 |
43 |
51 |
59 |
67 |
74 |
75 | );
76 | }
77 |
78 | export default App;
79 |
80 | export const RouteControl = ({ children }) => {
81 | if (localStorage.getItem("posUser")) {
82 | return children;
83 | } else {
84 | return
54 |
55 |
62 |
71 |
72 |
74 |
setIsAddModalOpen(false)}
41 | footer={false}
42 | >
43 |
95 |
96 | );
97 | };
98 |
99 | export default Add;
100 |
--------------------------------------------------------------------------------
/client/README.md:
--------------------------------------------------------------------------------
1 | # Getting Started with Create React App
2 |
3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
4 |
5 | ## Available Scripts
6 |
7 | In the project directory, you can run:
8 |
9 | ### `npm start`
10 |
11 | Runs the app in the development mode.\
12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
13 |
14 | The page will reload when you make changes.\
15 | You may also see any lint errors in the console.
16 |
17 | ### `npm test`
18 |
19 | Launches the test runner in the interactive watch mode.\
20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21 |
22 | ### `npm run build`
23 |
24 | Builds the app for production to the `build` folder.\
25 | It correctly bundles React in production mode and optimizes the build for the best performance.
26 |
27 | The build is minified and the filenames include the hashes.\
28 | Your app is ready to be deployed!
29 |
30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31 |
32 | ### `npm run eject`
33 |
34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!**
35 |
36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37 |
38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
39 |
40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
41 |
42 | ## Learn More
43 |
44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45 |
46 | To learn React, check out the [React documentation](https://reactjs.org/).
47 |
48 | ### Code Splitting
49 |
50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
51 |
52 | ### Analyzing the Bundle Size
53 |
54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
55 |
56 | ### Making a Progressive Web App
57 |
58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
59 |
60 | ### Advanced Configuration
61 |
62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
63 |
64 | ### Deployment
65 |
66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
67 |
68 | ### `npm run build` fails to minify
69 |
70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
71 |
--------------------------------------------------------------------------------
/client/src/components/categories/Edit.jsx:
--------------------------------------------------------------------------------
1 | import { Button, Form, Input, message, Modal, Table } from "antd";
2 | import React, { useState } from "react";
3 |
4 | const Edit = ({
5 | isEditModalOpen,
6 | setIsEditModalOpen,
7 | categories,
8 | setCategories,
9 | }) => {
10 | const [editingRow, setEditingRow] = useState({});
11 |
12 | const onFinish = (values) => {
13 | console.log(values);
14 | try {
15 | fetch(process.env.REACT_APP_SERVER_URL + "/api/categories/update-category", {
16 | method: "PUT",
17 | body: JSON.stringify({ ...values, categoryId: editingRow._id }),
18 | headers: { "Content-type": "application/json; charset=UTF-8" },
19 | });
20 | message.success("Kategori başarıyla güncellendi.");
21 | setCategories(
22 | categories.map((item) => {
23 | if (item._id === editingRow._id) {
24 | return { ...item, title: values.title };
25 | }
26 | return item;
27 | })
28 | );
29 | } catch (error) {
30 | message.error("Bir şeyler yanlış gitti.");
31 | console.log(error);
32 | }
33 | };
34 |
35 | const deleteCategory = (id) => {
36 | if (window.confirm("Emin misiniz?")) {
37 | try {
38 | fetch(process.env.REACT_APP_SERVER_URL + "/api/categories/delete-category", {
39 | method: "DELETE",
40 | body: JSON.stringify({ categoryId: id }),
41 | headers: { "Content-type": "application/json; charset=UTF-8" },
42 | });
43 | message.success("Kategori başarıyla silindi.");
44 | setCategories(categories.filter((item) => item._id !== id));
45 | } catch (error) {
46 | message.error("Bir şeyler yanlış gitti.");
47 | console.log(error);
48 | }
49 | }
50 | };
51 |
52 | const columns = [
53 | {
54 | title: "Category Title",
55 | dataIndex: "title",
56 | render: (_, record) => {
57 | if (record._id === editingRow._id) {
58 | return (
59 |
60 |
62 | );
63 | } else {
64 | return {record.title}
;
65 | }
66 | },
67 | },
68 | {
69 | title: "Action",
70 | dataIndex: "action",
71 | render: (_, record) => {
72 | return (
73 |
74 | setEditingRow(record)}
77 | className="pl-0"
78 | >
79 | Düzenle
80 |
81 |
82 | Kaydet
83 |
84 | deleteCategory(record._id)}
88 | >
89 | Sil
90 |
91 |
92 | );
93 | },
94 | },
95 | ];
96 |
97 | return (
98 | setIsEditModalOpen(false)}
103 | >
104 |
112 |
113 | );
114 | };
115 |
116 | export default Edit;
117 |
--------------------------------------------------------------------------------
/client/src/components/cart/CreateBill.jsx:
--------------------------------------------------------------------------------
1 | import { Button, Card, Form, Input, message, Modal, Select } from "antd";
2 | import { useSelector, useDispatch } from "react-redux";
3 | import { useNavigate } from "react-router-dom";
4 | import { reset } from "../../redux/cartSlice";
5 |
6 | const CreateBill = ({ isModalOpen, setIsModalOpen }) => {
7 | const cart = useSelector((state) => state.cart);
8 | const dispatch = useDispatch();
9 | const navigate = useNavigate();
10 |
11 | const onFinish = async (values) => {
12 | try {
13 | const res = await fetch(process.env.REACT_APP_SERVER_URL + "/api/bills/add-bill", {
14 | method: "POST",
15 | body: JSON.stringify({
16 | ...values,
17 | subTotal: cart.total,
18 | tax: ((cart.total * cart.tax) / 100).toFixed(2),
19 | totalAmount: (cart.total + (cart.total * cart.tax) / 100).toFixed(2),
20 | cartItems: cart.cartItems,
21 | }),
22 | headers: { "Content-type": "application/json; charset=UTF-8" },
23 | });
24 |
25 | if (res.status === 200) {
26 | message.success("Fatura başarıyla oluşturuldu.");
27 | dispatch(reset());
28 | navigate("/bills");
29 | }
30 | } catch (error) {
31 | message.danger("Bir şeyler yanlış gitti.");
32 | console.log(error);
33 | }
34 | };
35 |
36 | return (
37 | setIsModalOpen(false)}
42 | >
43 |
109 |
110 | );
111 | };
112 |
113 | export default CreateBill;
114 |
--------------------------------------------------------------------------------
/client/src/components/header/Header.jsx:
--------------------------------------------------------------------------------
1 | import { Link, useLocation, useNavigate } from "react-router-dom";
2 | import { Badge, Input, message } from "antd";
3 | import {
4 | SearchOutlined,
5 | HomeOutlined,
6 | ShoppingCartOutlined,
7 | CopyOutlined,
8 | UserOutlined,
9 | BarChartOutlined,
10 | LogoutOutlined,
11 | } from "@ant-design/icons";
12 | import { useSelector } from "react-redux";
13 | import "./index.css";
14 |
15 | const Header = ({ setSearch }) => {
16 | const cart = useSelector((state) => state.cart);
17 | const { pathname } = useLocation();
18 | const navigate = useNavigate();
19 |
20 | const logOut = () => {
21 | if (window.confirm("Çıkış yapmak istediğinize emin misiniz?")) {
22 | localStorage.removeItem("posUser");
23 | navigate("/login");
24 | message.success("Çıkış işlemi başarılı.");
25 | }
26 | };
27 |
28 | return (
29 |
114 | );
115 | };
116 |
117 | export default Header;
118 |
--------------------------------------------------------------------------------
/client/src/pages/StatisticPage.jsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | import Header from "../components/header/Header.jsx";
3 | import StatisticCard from "../components/statistics/StatisticCard.jsx";
4 | import { Area, Pie } from "@ant-design/plots";
5 | import { Spin } from "antd";
6 |
7 | const StatisticPage = () => {
8 | const [data, setData] = useState();
9 | const [products, setProducts] = useState([]);
10 | const user = JSON.parse(localStorage.getItem("posUser"));
11 |
12 | useEffect(() => {
13 | asyncFetch();
14 | }, []);
15 |
16 | useEffect(() => {
17 | const getProducts = async () => {
18 | try {
19 | const res = await fetch(process.env.REACT_APP_SERVER_URL + "/api/products/get-all");
20 | const data = await res.json();
21 | setProducts(data);
22 | } catch (error) {
23 | console.log(error);
24 | }
25 | };
26 |
27 | getProducts();
28 | }, []);
29 |
30 | const asyncFetch = () => {
31 | fetch(process.env.REACT_APP_SERVER_URL + "/api/bills/get-all")
32 | .then((response) => response.json())
33 | .then((json) => setData(json))
34 | .catch((error) => {
35 | console.log("fetch data failed", error);
36 | });
37 | };
38 |
39 | const config = {
40 | data,
41 | xField: "customerName",
42 | yField: "subTotal",
43 | xAxis: {
44 | range: [0, 1],
45 | },
46 | };
47 |
48 | const config2 = {
49 | appendPadding: 10,
50 | data,
51 | angleField: "subTotal",
52 | colorField: "customerName",
53 | radius: 1,
54 | innerRadius: 0.6,
55 | label: {
56 | type: "inner",
57 | offset: "-50%",
58 | content: "{value}",
59 | style: {
60 | textAlign: "center",
61 | fontSize: 14,
62 | },
63 | },
64 | interactions: [
65 | {
66 | type: "element-selected",
67 | },
68 | {
69 | type: "element-active",
70 | },
71 | ],
72 | statistic: {
73 | title: false,
74 | content: {
75 | style: {
76 | whiteSpace: "pre-wrap",
77 | overflow: "hidden",
78 | textOverflow: "ellipsis",
79 | },
80 | content: "Toplam\nDeğer",
81 | },
82 | },
83 | };
84 |
85 | const totalAmount = () => {
86 | const amount = data.reduce((total, item) => item.totalAmount + total, 0);
87 | return `${amount.toFixed(2)}₺`;
88 | };
89 |
90 | return (
91 | <>
92 |
93 | İstatistiklerim
94 | {data ? (
95 |
96 |
97 |
98 | Hoş geldin{" "}
99 |
100 | {user.username}
101 |
102 | .
103 |
104 |
105 |
126 |
134 |
135 |
46 |
47 |
48 |
LOGO
49 |
98 |
99 | Henüz bir hesabınız yok mu?
100 |
104 |
105 |
106 |
107 |
108 |
109 |
130 |
131 |
132 |
133 |
134 |
32 |
33 |
34 |
LOGO
35 |
107 |
108 | Bir hesabınız var mı?
109 |
113 |
114 |
115 |
116 |
117 |
118 |
139 |
140 |
141 |
142 |
143 |
19 |
20 | Sepetteki Ürünler
21 |
22 |
76 |
77 |
78 |
79 | Ara Toplam
80 | {cart.total > 0 ? cart.total.toFixed(2) : 0}₺
81 |
82 |
83 | KDV %{cart.tax}
84 |
85 | {(cart.total * cart.tax) / 100 > 0
86 | ? `+${((cart.total * cart.tax) / 100).toFixed(2)}`
87 | : 0}
88 | ₺
89 |
90 |
91 |
92 |
93 |
94 | Genel Toplam
95 |
96 | {cart.total + (cart.total * cart.tax) / 100 > 0
97 | ? (cart.total + (cart.total * cart.tax) / 100).toFixed(2)
98 | : 0}
99 | ₺
100 |
101 |
102 |
103 |
104 | navigate("/cart")}
110 | >
111 | Sipariş Oluştur
112 |
113 |
130 |
131 |
e.stopPropagation()}
37 | >
38 |
52 | handleSearch(selectedKeys, confirm, dataIndex)}
55 | icon={
63 | clearFilters && handleReset(clearFilters)}
65 | size="small"
66 | style={{
67 | width: 90,
68 | }}
69 | >
70 | Reset
71 |
72 | {
76 | confirm({
77 | closeDropdown: false,
78 | });
79 | setSearchText(selectedKeys[0]);
80 | setSearchedColumn(dataIndex);
81 | }}
82 | >
83 | Filter
84 |
85 | {
89 | close();
90 | }}
91 | >
92 | close
93 |
94 |
95 |
96 | ),
97 | filterIcon: (filtered) => (
98 | {text.substring(0, 10)} ;
160 | },
161 | },
162 | ];
163 |
164 | return (
165 | <>
166 |
167 | Müşterilerim
168 | {billItems ? (
169 |
182 | ) : (
183 | e.stopPropagation()}
40 | >
41 |
55 | handleSearch(selectedKeys, confirm, dataIndex)}
58 | icon={
66 | clearFilters && handleReset(clearFilters)}
68 | size="small"
69 | style={{
70 | width: 90,
71 | }}
72 | >
73 | Reset
74 |
75 | {
79 | confirm({
80 | closeDropdown: false,
81 | });
82 | setSearchText(selectedKeys[0]);
83 | setSearchedColumn(dataIndex);
84 | }}
85 | >
86 | Filter
87 |
88 | {
92 | close();
93 | }}
94 | >
95 | close
96 |
97 |
98 |
99 | ),
100 | filterIcon: (filtered) => (
101 | {text.substring(0, 10)} ;
163 | },
164 | },
165 | {
166 | title: "Ödeme Yöntemi",
167 | dataIndex: "paymentMode",
168 | key: "paymentMode",
169 | ...getColumnSearchProps("paymentMode"),
170 | },
171 | {
172 | title: "Toplam Fiyat",
173 | dataIndex: "totalAmount",
174 | key: "totalAmount",
175 | render: (text) => {
176 | return {text}₺ ;
177 | },
178 | sorter: (a, b) => a.totalAmount - b.totalAmount,
179 | },
180 | {
181 | title: "Actions",
182 | dataIndex: "action",
183 | key: "action",
184 | render: (_, record) => {
185 | return (
186 | {
190 | setIsModalOpen(true);
191 | setCustomer(record);
192 | }}
193 | >
194 | Yazdır
195 |
196 | );
197 | },
198 | },
199 | ];
200 |
201 | return (
202 | <>
203 |
204 | Faturalar
205 | {billItems ? (
206 |
219 | ) : (
220 | {record.title}
;
90 | },
91 | },
92 | {
93 | title: "Ürün Görseli",
94 | dataIndex: "img",
95 | width: "4%",
96 | render: (_, record) => {
97 | return (
98 |
119 | {
123 | setIsEditModalOpen(true);
124 | setEditingItem(record);
125 | }}
126 | >
127 | Düzenle
128 |
129 | deleteCategory(record._id)}
133 | >
134 | Sil
135 |
136 |
137 | );
138 | },
139 | },
140 | ];
141 |
142 | return (
143 | <>
144 |
154 | setIsEditModalOpen(false)}
158 | footer={false}
159 | >
160 |
221 |
222 |
223 | );
224 | };
225 |
226 | export default Edit;
227 |
--------------------------------------------------------------------------------
/client/public/images/admin.svg:
--------------------------------------------------------------------------------
1 |
3 |
--------------------------------------------------------------------------------
/client/src/pages/CartPage.jsx:
--------------------------------------------------------------------------------
1 | import { Button, Card, Input, message, Popconfirm, Space, Table } from "antd";
2 | import { useRef, useState } from "react";
3 | import { useDispatch, useSelector } from "react-redux";
4 | import CreateBill from "../components/cart/CreateBill.jsx";
5 | import Header from "../components/header/Header.jsx";
6 | import { PlusCircleOutlined, MinusCircleOutlined } from "@ant-design/icons";
7 | import { deleteCart, increase, decrease } from "../redux/cartSlice.js";
8 | import Highlighter from "react-highlight-words";
9 | import { SearchOutlined } from "@ant-design/icons";
10 |
11 | const CartPage = () => {
12 | const [isModalOpen, setIsModalOpen] = useState(false);
13 | const [searchText, setSearchText] = useState("");
14 | const [searchedColumn, setSearchedColumn] = useState("");
15 | const searchInput = useRef(null);
16 | const cart = useSelector((state) => state.cart);
17 | const dispatch = useDispatch();
18 |
19 | const handleSearch = (selectedKeys, confirm, dataIndex) => {
20 | confirm();
21 | setSearchText(selectedKeys[0]);
22 | setSearchedColumn(dataIndex);
23 | };
24 |
25 | const handleReset = (clearFilters) => {
26 | clearFilters();
27 | setSearchText("");
28 | };
29 |
30 | const getColumnSearchProps = (dataIndex) => ({
31 | filterDropdown: ({
32 | setSelectedKeys,
33 | selectedKeys,
34 | confirm,
35 | clearFilters,
36 | close,
37 | }) => (
38 | e.stopPropagation()}
43 | >
44 |
58 | handleSearch(selectedKeys, confirm, dataIndex)}
61 | icon={
69 | clearFilters && handleReset(clearFilters)}
71 | size="small"
72 | style={{
73 | width: 90,
74 | }}
75 | >
76 | Reset
77 |
78 | {
82 | confirm({
83 | closeDropdown: false,
84 | });
85 | setSearchText(selectedKeys[0]);
86 | setSearchedColumn(dataIndex);
87 | }}
88 | >
89 | Filter
90 |
91 | {
95 | close();
96 | }}
97 | >
98 | close
99 |
100 |
101 |
102 | ),
103 | filterIcon: (filtered) => (
104 | {text.toFixed(2)}₺ ;
161 | },
162 | sorter: (a, b) => a.price - b.price,
163 | },
164 | {
165 | title: "Ürün Adeti",
166 | dataIndex: "quantity",
167 | key: "quantity",
168 | render: (text, record) => {
169 | return (
170 |
171 |
179 | {record.quantity}
180 |
181 |
199 | );
200 | },
201 | },
202 | {
203 | title: "Toplam Fiyat",
204 | render: (text, record) => {
205 | return {(record.quantity * record.price).toFixed(2)}₺ ;
206 | },
207 | },
208 | {
209 | title: "Actions",
210 | render: (_, record) => {
211 | return (
212 | {
215 | dispatch(deleteCart(record));
216 | message.success("Ürün Sepetten Silindi.");
217 | }}
218 | okText="Evet"
219 | cancelText="Hayır"
220 | >
221 |
222 | Sil
223 |
224 |
225 | );
226 | },
227 | },
228 | ];
229 |
230 | return (
231 | <>
232 |
233 |
234 |
244 |
245 |
246 |
247 | Ara Toplam
248 | {cart.total > 0 ? cart.total.toFixed(2) : 0}₺
249 |
250 |
251 | KDV %{cart.tax}
252 |
253 | {(cart.total * cart.tax) / 100 > 0
254 | ? `+${((cart.total * cart.tax) / 100).toFixed(2)}`
255 | : 0}
256 | ₺
257 |
258 |
259 |
260 | Genel Toplam
261 |
262 | {cart.total + (cart.total * cart.tax) / 100 > 0
263 | ? (cart.total + (cart.total * cart.tax) / 100).toFixed(2)
264 | : 0}
265 | ₺
266 |
267 |
268 | setIsModalOpen(true)}
273 | disabled={cart.cartItems.length === 0}
274 | >
275 | Sipariş Oluştur
276 |
277 |
278 |
279 |
setIsModalOpen(false)}
16 | width={800}
17 | >
18 |
19 |
20 |
21 |
22 |
LOGO
23 |
24 |
25 |
26 |
27 |
Fatura Detayı:
28 |
{customer?.customerName}
29 |
Fake Street 123
30 |
San Javier
31 |
CA 1234
32 |
33 |
34 |
Fatura:
35 | The Boring Company
36 |
Tesla Street 007
37 |
Frisco
38 |
CA 0000
39 |
40 |
41 |
42 |
Fatura numarası:
43 |
000{Math.floor(Math.random() * 100)}
44 |
45 |
46 |
47 | Veriliş Tarihi:
48 |
49 |
{customer?.createdAt.substring(0, 10)}
50 |
51 |
52 |
53 |
54 |
Şartlar:
55 |
10 gün
56 |
57 |
58 |
Vade:
59 |
2023-11-21
60 |
61 |
62 |
63 |
65 |
66 |
67 |
68 |
72 | Görsel
73 |
74 |
78 | {" "}
79 | Başlık
80 |
81 |
86 | {" "}
87 | Başlık
88 |
89 |
93 | Fiyat
94 |
95 |
99 | Adet
100 |
101 |
105 | Toplam
106 |
107 |
108 |
109 |
110 | {customer?.cartItems.map((item) => (
111 |
112 |
113 |
119 |
120 |
121 | {item.title}
122 |
123 | Birim Fiyatı {item.price}₺
124 |
125 |
126 |
127 |
128 |
129 | {item.title}
130 |
131 | Birim Fiyatı {item.price}₺
132 |
133 |
134 |
135 |
136 | {item.price.toFixed(2)}₺
137 |
138 |
139 | {item.quantity}
140 |
141 |
142 | {(item.price * item.quantity).toFixed(2)}₺
143 |
144 |
145 | ))}
146 |
147 |
148 |
149 |
154 |
155 | Ara Toplam
156 |
157 |
158 |
163 | Ara Toplam
164 |
165 |
166 |
167 | {customer?.subTotal}₺
168 |
169 |
170 |
171 |
172 |
177 | KDV
178 |
179 |
184 | KDV
185 |
186 |
187 |
188 | +{customer?.tax}₺
189 |
190 |
191 |
192 |
193 |
198 |
199 | Genel Toplam
200 |
201 |
202 |
207 | Genel Toplam
208 |
209 |
210 |
211 | {customer?.totalAmount}₺
212 |
213 |
214 |
215 |
216 |
217 |
218 |
219 |
220 | Ödeme koşulları 14 gündür. Paketlenmemiş Borçların Geç
221 | Ödenmesi Yasası 0000'e göre, serbest çalışanların bu süreden
222 | sonra borçların ödenmemesi durumunda 00.00 gecikme ücreti
223 | talep etme hakkına sahip olduklarını ve bu noktada bu ücrete
224 | ek olarak yeni bir fatura sunulacağını lütfen unutmayın.
225 | Revize faturanın 14 gün içinde ödenmemesi durumunda, vadesi
226 | geçmiş hesaba ek faiz ve %8 yasal oran artı %0,5 Bank of
227 | England tabanı olmak üzere toplam %8,5 uygulanacaktır.
228 | Taraflar Kanun hükümleri dışında sözleşme yapamazlar.
229 |
230 |
231 |
232 |
234 |
236 |
237 |
238 | Yazdır
239 |
240 |
241 |
242 | );
243 | };
244 |
245 | export default PrintBill;
246 |
--------------------------------------------------------------------------------
/client/public/images/customer.svg:
--------------------------------------------------------------------------------
1 |
3 |
--------------------------------------------------------------------------------
/client/public/images/responsive.svg:
--------------------------------------------------------------------------------
1 |
3 |
--------------------------------------------------------------------------------