Merge branch 'develop' into 'devops-staging'

Develop

See merge request empatnusabangsa/ppob/ppob-frontend!5

src/component/CategoryComponent.js

@@ -139,7 +139,7 @@ export const CategoryComponent = observer((props) => {
           store.category.pageSize = page.pageSize;
           store.category.page = pageNumber - 1;
           modalLoader.setLoading(true);
-          await store.category.getData();
+          //await store.category.getData();
           modalLoader.setLoading(false);
         }}
       />

src/component/CommissionComponent.js

@@ -82,7 +82,7 @@ export const CommissionComponent = observer((props) => {
           store.commission.pageSize = page.pageSize;
           store.commission.page = pageNumber - 1;
           modalLoader.setLoading(true);
-          await store.commission.getData();
+          //await store.commission.getData();
           modalLoader.setLoading(false);
         }}
       />

src/component/PartnerComponent.js

@@ -211,7 +211,7 @@ export const PartnerComponent = observer((props) => {
             store.partner.pageSize = page.pageSize;
             store.partner.page = pageNumber - 1;
             modalLoader.setLoading(true);
-            await store.partner.getData();
+            //await store.partner.getData();
             modalLoader.setLoading(false);
           }}
         />

src/component/ProductComponent.js

@@ -1,38 +1,22 @@
-import React, { useContext, useState } from "react";
+import React, {useContext, useState} from "react";
-import {
+import {Button, Col, Divider, Form, Input, List, message, Modal, Row, Select, Table, Tag, Typography,} from "antd";
-  Button,
+import {observer} from "mobx-react-lite";
-  Col,
+import {ExclamationCircleOutlined} from "@ant-design/icons";
-  Form,
+import {useHistory} from "react-router-dom";
-  Input,
+import {useStore} from "../utils/useStore";
-  message,
+import {LINKS} from "../routes/app";
-  Modal,
+import {ModalLoaderContext} from "../utils/modal";
-  Row,
-  Select,
-  Table,
-  Divider,
-  Tag,
-  Typography,
-  List,
-} from "antd";
-import { observer } from "mobx-react-lite";
-import { ExclamationCircleOutlined } from "@ant-design/icons";
-import { useHistory } from "react-router-dom";
-import { capitalize } from "lodash";
-import { useStore } from "../utils/useStore";
-import { LINKS } from "../routes/app";
-import { ModalLoaderContext } from "../utils/modal";
 
-const { Title, Text } = Typography;
+const {Title, Text} = Typography;
 
 export const ProductComponent = observer((props) => {
   const store = useStore();
   const [form] = Form.useForm();
-  const { Option } = Select;
+  const {Option} = Select;
   const history = useHistory();
   const [idData, setIdData] = useState("");
-  const [filterSupplier, setFilterSupplier] = useState(null);
+  const [filterSupplier, setFilterSupplier] = useState([]);
-  const [filterCategories, setFilterCategories] = useState(null);
+  const [filterSubCategories, setFilterSubCategories] = useState([]);
-  const [filterSubCategories, setFilterSubCategories] = useState(null);
   const modalLoader = useContext(ModalLoaderContext);
 
   const handleEditButton = (data) => {
@@ -52,23 +36,23 @@ export const ProductComponent = observer((props) => {
   const columns = [
     {
       title: "Kode",
-      dataIndex: "code",
+      dataIndex: "product_code",
-      key: "code",
+      key: "product_code",
     },
     {
       title: "Produk",
-      dataIndex: ["name"],
+      dataIndex: "product_name",
-      key: "name",
+      key: "product_name",
     },
     {
       title: "Harga Beli",
-      dataIndex: ["currentPrice", "price"],
+      dataIndex: "current_price_price",
-      key: ["currentPrice", "price"],
+      key: "current_price_price",
     },
     {
       title: "Harga Jual",
-      dataIndex: ["currentPrice", "mark_up_price"],
+      dataIndex: "mark_up_price",
-      key: ["currentPrice", "mark_up_price"],
+      key: "mark_up_price",
     },
     // {
     //     title: "Gangguan",
@@ -96,6 +80,20 @@ export const ProductComponent = observer((props) => {
         </Tag>
       ),
     },
+    {
+      title: "Action",
+      key: "action",
+      render: (text, record) => (
+          <Button
+            onClick={async () => {
+              history.push(LINKS.DETAILPRODUCT.replace(":id", record.id));
+              //console.log(record.id)
+            }}
+            >
+              Detail
+            </Button>
+      ),
+    },
   ];
 
   const deleteData = async (id) => {
@@ -164,17 +162,17 @@ export const ProductComponent = observer((props) => {
   const handleRemoveFilter = async () => {
     store.product.filterSupplier = null;
     store.product.filterSubCategory = null;
-    setFilterSupplier(null);
+    setFilterSupplier([]);
-    setFilterCategories(null);
+    store.product.filterCategory = null;
-    setFilterSubCategories(null);
+    setFilterSubCategories([]);
     await store.product.getData();
     store.product.visibleModalFilterProduct = false;
   };
 
   const handleCancelFilter = () => {
-    setFilterSupplier(null);
+    setFilterSupplier([]);
-    setFilterCategories(null);
+    store.product.filterCategory = null;
-    setFilterSubCategories(null);
+    setFilterSubCategories([]);
     store.product.visibleModalFilterProduct = false;
   };
 
@@ -187,14 +185,24 @@ export const ProductComponent = observer((props) => {
     store.product.visibleModalFilterProduct = false;
   };
 
+  const handleFilterCategory = async (value) => {
+    if (value) {
+      store.product.filterCategory = value;
+      await store.product.getDataSubCategories();
+    } else {
+      store.product.filterCategory = null;
+      await store.product.getDataSubCategories();
+    }
+  };
+
   const footerLayoutFilter = [
     <Button
-      key={"remove"}
+        key={"remove"}
-      onClick={handleRemoveFilter}
+        onClick={handleRemoveFilter}
-      style={{
+        style={{
-        backgroundColor: "#e74e5e",
+          backgroundColor: "#e74e5e",
-        color: "#fff",
+          color: "#fff",
-      }}
+        }}
     >
       Remove Filter
     </Button>,
@@ -383,10 +391,10 @@ export const ProductComponent = observer((props) => {
             ]}
           >
             <Select placeholder="Select Sub Category" allowClear>
-              {store.product.dataSubCategories.map((item) => (
+              {store.category.dataSubCategories.map((item) => (
-                <Option value={item.id} key={item.id}>
+                  <Option value={item.id} key={item.id}>
-                  {item.name}
+                    {item.name}
-                </Option>
+                  </Option>
               ))}
             </Select>
           </Form.Item>
@@ -404,17 +412,18 @@ export const ProductComponent = observer((props) => {
               Filter Supplier
             </Title>
             <Select
-              mode={"multiple"}
+                mode={"multiple"}
-              placeholder="Choose Supplier"
+                placeholder="Choose Supplier"
-              onChange={(val) => {
+                onChange={(val) => {
-                setFilterSupplier(val);
+                  setFilterSupplier(val);
-              }}
+                }}
-              style={{ marginBottom: "20px", width: "100%" }}
+                style={{marginBottom: "20px", width: "100%"}}
+                value={filterSupplier}
             >
               {store.supplier.data.map((item) => (
-                <Option value={item.id} key={item.id}>
+                  <Option value={item.id} key={item.id}>
-                  {item.name}
+                    {item.name}
-                </Option>
+                  </Option>
               ))}
             </Select>
           </Col>
@@ -423,19 +432,16 @@ export const ProductComponent = observer((props) => {
               Filter Categories
             </Title>
             <Select
-              mode={"multiple"}
+                mode={"multiple"}
-              placeholder="Choose Category"
+                placeholder="Choose Category"
-              onChange={async (val) => {
+                onChange={async (val) => handleFilterCategory(val)}
-                setFilterCategories(val);
+                style={{marginBottom: "20px", width: "100%"}}
-                store.product.filterByCategory = val;
+                value={store.product.filterCategory || []}
-                await store.product.getDataSubCategories();
-              }}
-              style={{ marginBottom: "20px", width: "100%" }}
             >
               {store.category.data.map((item) => (
-                <Option value={item.id} key={item.id}>
+                  <Option value={item.id} key={item.id}>
-                  {item.name}
+                    {item.name}
-                </Option>
+                  </Option>
               ))}
             </Select>
           </Col>
@@ -444,17 +450,18 @@ export const ProductComponent = observer((props) => {
               Filter Sub-Categories
             </Title>
             <Select
-              mode={"multiple"}
+                mode={"multiple"}
-              placeholder="Choose Sub-Category"
+                placeholder="Choose Sub-Category"
-              onChange={(val) => {
+                onChange={(val) => {
-                setFilterSubCategories(val);
+                  setFilterSubCategories(val);
-              }}
+                }}
-              style={{ marginBottom: "20px", width: "100%" }}
+                style={{marginBottom: "20px", width: "100%"}}
+                value={filterSubCategories}
             >
               {store.product.dataSubCategories.map((item) => (
-                <Option value={item.id} key={item.id}>
+                  <Option value={item.id} key={item.id}>
-                  {item.name}
+                    {item.name}
-                </Option>
+                  </Option>
               ))}
             </Select>
           </Col>

src/component/Subcategory.js

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from "react";
+import React, { useContext, useState,useEffect } from "react";
 import {
   Button,
   Form,
@@ -23,7 +23,10 @@ export const SubcategoryComponent = observer((props) => {
   const { Option } = Select;
   const [idData, setIdData] = useState("");
   const modalLoader = useContext(ModalLoaderContext);
-
+  useEffect(() => {
+    
+    getData()
+  }, [])
   const getData = async () => {
     await store.category.getData();
     await store.subcategory.getData();
@@ -78,7 +81,7 @@ export const SubcategoryComponent = observer((props) => {
       modalLoader.setLoading(true);
       try {
         await store.subcategory.update(idData, data);
-        await getData();
+        //await getData();
         message.success("Success Update Data Category");
       } catch (e) {
         message.error("Failed Update Data Category");
@@ -91,7 +94,6 @@ export const SubcategoryComponent = observer((props) => {
       modalLoader.setLoading(true);
       try {
         await store.subcategory.create(data);
-        await getData();
         message.success("Success Add New Category");
       } catch (e) {
         console.log(e, "apa errornya");
@@ -124,7 +126,7 @@ export const SubcategoryComponent = observer((props) => {
             store.subcategory.pageSize = page.pageSize;
             store.subcategory.page = pageNumber - 1;
             modalLoader.setLoading(true);
-            await getData();
+            // await getData();
             modalLoader.setLoading(false);
           }}
         />

src/component/SupplierComponent.js

@@ -1,12 +1,23 @@
-import React, {useContext, useState} from "react";
+import React, { useContext, useState } from "react";
-import {Button, Form, Input, message, Modal, Space, Table, Tag} from "antd";
+import {
-import {observer} from "mobx-react-lite";
+  Button,
-import {ExclamationCircleOutlined} from "@ant-design/icons";
+  Form,
-import {useHistory} from "react-router-dom";
+  Input,
-import {useStore} from "../utils/useStore";
+  message,
-import {LINKS} from "../routes/app";
+  Modal,
-import {TopupsaldoModal} from "./TopupsaldoModal";
+  Space,
-import {ModalLoaderContext} from "../utils/modal";
+  Table,
+  Tag,
+  List,
+  Divider,
+} from "antd";
+import { observer } from "mobx-react-lite";
+import { ExclamationCircleOutlined } from "@ant-design/icons";
+import { useHistory } from "react-router-dom";
+import { useStore } from "../utils/useStore";
+import { LINKS } from "../routes/app";
+import { TopupsaldoModal } from "./TopupsaldoModal";
+import { ModalLoaderContext } from "../utils/modal";
 
 export const SupplierComponent = observer((props) => {
   const store = useStore();
@@ -70,10 +81,10 @@ export const SupplierComponent = observer((props) => {
       key: ["coa", "amount"],
       width: "20%",
       render: (text, record) =>
-          new Intl.NumberFormat("id-ID", {
+        new Intl.NumberFormat("id-ID", {
-            style: "currency",
+          style: "currency",
-            currency: "IDR",
+          currency: "IDR",
-          }).format(text)
+        }).format(text),
     },
     {
       title: "Saldo di System",
@@ -81,10 +92,10 @@ export const SupplierComponent = observer((props) => {
       key: ["coa_undistribute", "amount"],
       width: "20%",
       render: (text, record) =>
-          new Intl.NumberFormat("id-ID", {
+        new Intl.NumberFormat("id-ID", {
-            style: "currency",
+          style: "currency",
-            currency: "IDR",
+          currency: "IDR",
-          }).format(text)
+        }).format(text),
     },
     {
       title: "Status",
@@ -94,7 +105,7 @@ export const SupplierComponent = observer((props) => {
       render: (text, record) => (
         <Tag
           color={record?.status === true ? "processing" : "#E3E8EE"}
-          style={{color: "#4F566B"}}
+          style={{ color: "#4F566B" }}
         >
           {record?.status === true ? " ACTIVE" : "INACTIVE"}
         </Tag>
@@ -137,7 +148,7 @@ export const SupplierComponent = observer((props) => {
   const handleDelete = (id) => {
     Modal.confirm({
       title: "Are you sure delete this record?",
-      icon: <ExclamationCircleOutlined/>,
+      icon: <ExclamationCircleOutlined />,
       okText: "Yes",
       okType: "primary",
       cancelText: "Cancel",
@@ -190,27 +201,121 @@ export const SupplierComponent = observer((props) => {
 
   return (
     <div>
-      <Table
+      {store.ui.mediaQuery.isDesktop && (
-        style={{textAlign: "center"}}
+        <Table
-        columns={columns}
+          style={{ textAlign: "center" }}
-        dataSource={store.supplier.data}
+          columns={columns}
-        bordered
+          dataSource={store.supplier.data}
-        pagination={{
+          bordered
-          pageSize: store.supplier.pageSize,
+          pagination={{
-          total: store.supplier.total_data,
+            pageSize: store.supplier.pageSize,
-          current: store.supplier.page + 1,
+            total: store.supplier.total_data,
-          showSizeChanger: true,
+            current: store.supplier.page + 1,
-          simple: false,
+            showSizeChanger: true,
-        }}
+            simple: false,
-        onChange={async (page) => {
+          }}
-          let pageNumber = page.current;
+          onChange={async (page) => {
-          store.supplier.pageSize = page.pageSize;
+            let pageNumber = page.current;
-          store.supplier.page = pageNumber - 1;
+            store.supplier.pageSize = page.pageSize;
-          modalLoader.setLoading(true);
+            store.supplier.page = pageNumber - 1;
-          await store.supplier.getData();
+            modalLoader.setLoading(true);
-          modalLoader.setLoading(false);
+            //await store.supplier.getData();
-        }}
+            modalLoader.setLoading(false);
-      />
+          }}
+        />
+      )}
+      {store.ui.mediaQuery.isMobile && (
+        <List
+          itemLayout="horizontal"
+          position={"top"}
+          pagination={{
+            onChange: async (page) => {
+              store.supplier.pageSize = page.pageSize;
+              store.supplier.page = page.current;
+              modalLoader.setLoading(true);
+              await store.supplier.getData();
+              modalLoader.setLoading(false);
+            },
+            pageSize: store.supplier.pageSize,
+            total: store.supplier.total_data,
+            current: store.supplier.page,
+            style: { marginBottom: "1rem", marginRight: "1rem" },
+          }}
+          dataSource={store.supplier.data}
+          style={{ padding: 0 }}
+          renderItem={(item) => {
+            return (
+              <div>
+                <List.Item
+                  key={item.id}
+                  style={{
+                    backgroundColor: "#ffffff",
+                    paddingTop: 0,
+                    paddingBottom: 0,
+                    display: "flex",
+                    flexDirection: "row",
+                    alignItems: "center",
+                    justifyContent: "center",
+                  }}
+                >
+                  <List.Item.Meta
+                    className={["cariparkir-container"].join(" ")}
+                    title={item.code}
+                    description={
+                      <div style={{}}>
+                        <p>
+                          <small>Name : {item.name}</small> <br />
+                          <small>Saldo Supplier : {item.coa.amount}</small>
+                          <br />
+                          <small>
+                            Saldo System : {item.coa_undistribute.amount}
+                          </small>
+                          <br />
+                          <Button
+                            style={{
+                              marginRight: 10,
+                            }}
+                            type={item?.status === true ? "danger" : "primary"}
+                            onClick={() => changeStatus(item?.id, item?.status)}
+                          >
+                            {item?.status === true ? "INACTIVE" : "ACTIVE"}
+                          </Button>
+                          <Button
+                            onClick={() => handleTopup(item)}
+                            style={{
+                              marginRight: 10,
+                            }}
+                          >
+                            Top Up Saldo
+                          </Button>
+                          <Button
+                            onClick={() => handleEditButton(item)}
+                            style={{
+                              marginBottom: 5,
+                            }}
+                          >
+                            Edit
+                          </Button>
+                          <Tag
+                            color={
+                              item?.status === true ? "processing" : "#E3E8EE"
+                            }
+                            style={{ color: "#4F566B" }}
+                          >
+                            {item?.status === true ? " ACTIVE" : "INACTIVE"}
+                          </Tag>
+                        </p>
+                        <p></p>
+                      </div>
+                    }
+                  />
+                </List.Item>
+                <Divider plain style={{ margin: 0 }} />
+              </div>
+            );
+          }}
+        />
+      )}
       <Modal
         visible={store.supplier.visibleModalSupplier}
         title={idData ? "Edit Supplier" : "Create a new Supplier"}
@@ -237,22 +342,22 @@ export const SupplierComponent = observer((props) => {
           <Form.Item
             name="name"
             label="Name"
-            rules={[{required: true, message: "Please input name!"}]}
+            rules={[{ required: true, message: "Please input name!" }]}
           >
-            <Input/>
+            <Input />
           </Form.Item>
           {!idData && (
             <Form.Item
               name="code"
               label="Kode"
-              rules={[{required: true, message: "Please input kode!"}]}
+              rules={[{ required: true, message: "Please input kode!" }]}
             >
-              <Input/>
+              <Input />
             </Form.Item>
           )}
         </Form>
       </Modal>
-      <TopupsaldoModal code={store.supplier.code}/>
+      <TopupsaldoModal code={store.supplier.code} />
     </div>
   );
 });

src/index.css

@@ -63,6 +63,11 @@ code {
 .ant-menu-submenu-arrow{
     padding-right: 40px !important; 
 }
-.ant-breadcrumb{
+.ant-breadcrumb {
     margin-bottom: 10px !important;
+}
+
+.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
+    color: #ed1f24 !important;
+    border-color: #ed1f24 !important;
 }

src/pages/App/DesktopLayout.js

@@ -209,18 +209,22 @@ export const DesktopLayout = observer(() => {
                 icon={<ProfileOutlined />}
                 title="Payback"
               >
+                {store.authentication.userData.role !== "Retail" && (
                 <Menu.Item key="payback-to-user">
                   <Link to={LINKS.PAYBACK}>
                     <PayCircleOutlined />
                     <span>Payback To</span>
                   </Link>
                 </Menu.Item>
+                )}
+                {store.authentication.userData.role !== "Admin" && (
                 <Menu.Item key="payback-from-user">
                   <Link to={LINKS.PAYBACKFROMUSER}>
                     <AlipayOutlined />
                     <span>Payback</span>
                   </Link>
                 </Menu.Item>
+                )}
               </SubMenu>
               {store.authentication.userData.role !== "Admin" && (
                 <Menu.Item key="profile">

src/pages/App/MenuList.js

@@ -15,7 +15,7 @@ import {
   ShoppingCartOutlined,
   UserOutlined,
   AlipayOutlined,
-  PayCircleOutlined
+  PayCircleOutlined,
 } from "@ant-design/icons";
 import { observer } from "mobx-react-lite";
 import { useStore } from "../../utils/useStore";
@@ -127,18 +127,22 @@ export const MenuList = observer((props) => {
         </Menu.Item>
       )}
       <SubMenu key="payback-main" icon={<ProfileOutlined />} title="Payback">
-        <Menu.Item key="payback-to-user">
+        {store.authentication.userData.role !== "Retail" && (
-          <Link to={LINKS.PAYBACK}>
+          <Menu.Item key="payback-to-user">
-            <PayCircleOutlined />
+            <Link to={LINKS.PAYBACK}>
-            <span>Payback To</span>
+              <PayCircleOutlined />
-          </Link>
+              <span>Payback To</span>
-        </Menu.Item>
+            </Link>
-        <Menu.Item key="payback-from-user">
+          </Menu.Item>
-          <Link to={LINKS.PAYBACKFROMUSER}>
+        )}
-            <AlipayOutlined/>
+        {store.authentication.userData.role !== "Admin" && (
-            <span>Payback</span>
+          <Menu.Item key="payback-from-user">
-          </Link>
+            <Link to={LINKS.PAYBACKFROMUSER}>
-        </Menu.Item>
+              <AlipayOutlined />
+              <span>Payback</span>
+            </Link>
+          </Menu.Item>
+        )}
       </SubMenu>
       {store.authentication.userData.role !== "Admin" && (
         <Menu.Item key="profile">

src/pages/Config/Supplier.js

@@ -75,7 +75,7 @@ export const Supplier = observer(() => {
               placeholder="input search text"
               style={{
                 width: store.ui.mediaQuery.isMobile ? 160 : 200,
-                marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
+                marginRight: store.ui.mediaQuery.isMobile ? 10 : 10,
                 marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
               }}
               onSearch={(value) => console.log(value)}

src/pages/Membership/DetailUser.js

@@ -0,0 +1,148 @@
+import React, {useContext, useEffect} from "react";
+import {Button, Card, Col, Row, Table, Typography} from "antd";
+import {BreadcumbComponent} from "../../component/BreadcumbComponent";
+import {LINKS} from "../../routes/app";
+import {useStore} from "../../utils/useStore";
+import {observer} from "mobx-react-lite";
+import {FilterOutlined} from "@ant-design/icons";
+import {format, parseISO} from "date-fns";
+import {ModalLoaderContext} from "../../utils/modal";
+
+const {Title, Text} = Typography;
+
+export const DetailUser = observer(() => {
+  const store = useStore();
+  const modalLoader = useContext(ModalLoaderContext);
+
+  const routeData = [
+    {
+      route: LINKS.HOME,
+      name: "Home",
+    },
+    {
+      route: LINKS.DETAILUSER,
+      name: <span style={{fontWeight: 'bold'}}>Detail User</span>,
+    },
+  ];
+
+  useEffect(() => {
+    (async () => {
+      modalLoader.setLoading(true);
+      await Promise.allSettled([
+        store.authentication.getProfile(),
+        store.transaction.getDataHistoryTransaction(),
+      ]);
+      modalLoader.setLoading(false);
+    })()
+  }, []);
+
+  const columns = [
+    {
+      title: 'Markup Price',
+      dataIndex: 'mark_up_price',
+      key: 'mark_up_price',
+      width: '20%',
+    },
+    {
+      title: 'Name',
+      dataIndex: 'name',
+      key: 'name',
+      width: '50%',
+    },
+    {
+      title: 'Transaction Date',
+      dataIndex: 'created_at',
+      key: 'created_at',
+      render: (text, record) => {
+        return (
+          <Text>{format(parseISO(record.created_at), 'dd MMMM yyyy HH:mm')}</Text>
+        )
+      },
+    },
+  ]
+
+  const styleSaldoTitle = store.ui.mediaQuery.isDesktop ? {
+    display: "flex",
+    justifyContent: "center"
+  } : {fontSize: "0.75rem"};
+  const styleSaldoContent = store.ui.mediaQuery.isDesktop ? {
+    fontSize: '1.25rem',
+    display: "flex",
+    justifyContent: "center"
+  } : null;
+
+  return (
+    <div className={["ppob-container"].join(" ")}>
+      <BreadcumbComponent data={routeData}/>
+      <Card>
+        <Title strong>Detail User</Title>
+        <Row style={{marginBottom: 20}}>
+          <Col lg={12} xs={24}>
+            <Row>
+              <Col span={12}>
+                <Text strong>Name</Text>
+              </Col>
+              <Col span={12}>
+                <Text>{store.authentication.profileData?.userDetail?.name}</Text>
+              </Col>
+              <Col span={12}>
+                <Text strong>Role</Text>
+              </Col>
+              <Col span={12}>
+                <Text>{store.authentication.profileData?.userDetail?.phone_number}</Text>
+              </Col>
+              <Col span={12}>
+                <Text strong>Saldo Supplier</Text>
+              </Col>
+              <Col span={12}>
+                <Text>{store.authentication.profileData?.username}</Text>
+              </Col>
+              <Col span={12}>
+                <Text strong>Saldo System</Text>
+              </Col>
+              <Col span={12}>
+                <Text>{store.authentication.profileData.roles?.name}</Text>
+              </Col>
+              <Col span={12}>
+                <Text strong>Status</Text>
+              </Col>
+              <Col span={12}>
+                <Text>{store.authentication.profileData.superior?.username}</Text>
+              </Col>
+            </Row>
+          </Col>
+          <Col lg={12} xs={24}>
+            <Row justify={"center"}>
+              <Col lg={24} xs={12}>
+                <Title strong level={3} style={styleSaldoTitle}>Saldo</Title>
+              </Col>
+              <Col lg={24} xs={12}>
+                <Text style={styleSaldoContent}>{store.authentication.profileData?.wallet}</Text>
+              </Col>
+            </Row>
+          </Col>
+        </Row>
+        <Row>
+          <Col span={24}>
+            <div>
+              <Title strong level={3}>History User Transaction</Title>
+
+              <Button style={{marginBottom: '1rem'}} onClick={() => {
+                console.log('clicked filter')
+              }}>
+                <FilterOutlined/>
+                Filter
+              </Button>
+              <Table
+                columns={columns}
+                dataSource={store.transaction.dataHistoryTransaction}
+                bordered
+              />
+            </div>
+          </Col>
+        </Row>
+        <div/>
+      </Card>
+    </div>
+  )
+});

src/pages/Membership/Membership.js

@@ -1,36 +1,37 @@
-import React, {useContext, useEffect, useState} from "react";
+import React, { useContext, useEffect, useState } from "react";
 import {
   Button,
   Card,
   Col,
   Divider,
+  Form,
   Input,
   List,
   message,
   Modal,
   Row,
+  Select,
   Space,
   Table,
   Tag,
-  Form,
-  Select,
 } from "antd";
-import {useStore} from "../../utils/useStore";
+import { useStore } from "../../utils/useStore";
-import {observer} from "mobx-react-lite";
+import { observer } from "mobx-react-lite";
 import {
-  ExclamationCircleOutlined,
-  FilterOutlined,
-  PlusSquareOutlined,
   DownloadOutlined,
+  ExclamationCircleOutlined,
+  PlusSquareOutlined,
 } from "@ant-design/icons";
-import {MembershipModal} from "./MembershipModal";
+import { MembershipModal } from "./MembershipModal";
-import {BreadcumbComponent} from "../../component/BreadcumbComponent";
+import { BreadcumbComponent } from "../../component/BreadcumbComponent";
-import {LINKS} from "../../routes/app";
+import { LINKS } from "../../routes/app";
-import {ModalLoaderContext} from "../../utils/modal";
+import { Link, useHistory } from "react-router-dom";
+import { ModalLoaderContext } from "../../utils/modal";
 
-const {Search} = Input;
+const { Search } = Input;
-const {Option} = Select;
+const { Option } = Select;
 export const Membership = observer(() => {
+  const history = useHistory();
   const [form] = Form.useForm();
   const store = useStore();
   const [visibleModal, setVisibleModal] = useState(false);
@@ -133,9 +134,26 @@ export const Membership = observer(() => {
       key: "role",
     },
     {
-      title: "Saldo",
+      title: "Saldo di Supplier",
       dataIndex: ["coa", "amount"],
       key: ["coa", "amount"],
+      width: "20%",
+      render: (text) =>
+        new Intl.NumberFormat("id-ID", {
+          style: "currency",
+          currency: "IDR",
+        }).format(text),
+    },
+    {
+      title: "Saldo di System",
+      dataIndex: ["coa_undistribute", "amount"],
+      key: ["coa_undistribute", "amount"],
+      width: "20%",
+      render: (text) =>
+        new Intl.NumberFormat("id-ID", {
+          style: "currency",
+          currency: "IDR",
+        }).format(text),
     },
     {
       title: "Status",
@@ -144,7 +162,7 @@ export const Membership = observer(() => {
       render: (text, record) => (
         <Tag
           color={record?.isActive === true ? "processing" : "#E3E8EE"}
-          style={{color: "#4F566B"}}
+          style={{ color: "#4F566B" }}
         >
           {record?.isActive === true ? " ACTIVE" : "INACTIVE"}
         </Tag>
@@ -168,7 +186,7 @@ export const Membership = observer(() => {
               setIsVisibleTopUpModal(true);
             }}
           >
-            <DownloadOutlined/> Top Up Saldo
+            <DownloadOutlined /> Top Up Saldo
           </Button>
           <Button
             onClick={() => {
@@ -200,13 +218,14 @@ export const Membership = observer(() => {
           >
             Ganti Password
           </Button>
-          {/* <Button
+          <Button
             onClick={async () => {
-              handleDelete(record.id);
+              history.push(LINKS.DETAILUSER.replace(":id", record.id));
+              //console.log(record.id)
             }}
           >
-            Delete
+            Detail
-          </Button> */}
+          </Button>
         </Space>
       ),
     },
@@ -219,7 +238,7 @@ export const Membership = observer(() => {
     },
     {
       route: "/app/membership",
-      name: <span style={{fontWeight: "bold"}}>Membership</span>,
+      name: <span style={{ fontWeight: "bold" }}>Membership</span>,
     },
   ];
 
@@ -254,7 +273,6 @@ export const Membership = observer(() => {
       try {
         await store.membership.create(data);
         message.success("Success Add New Member");
-        await getData();
       } catch (e) {
         console.log(e, "apa errornya");
         message.error("Failed Add Member");
@@ -266,42 +284,42 @@ export const Membership = observer(() => {
     }
   };
 
-  const handleDelete = (record) => {
+  const handleDetail = (record) => {
-    Modal.confirm({
+    // Modal.confirm({
-      title: "Are you sure delete this record?",
+    //   title: "Are you sure delete this record?",
-      icon: <ExclamationCircleOutlined/>,
+    //   icon: <ExclamationCircleOutlined/>,
-      okText: "Yes",
+    //   okText: "Yes",
-      okType: "primary",
+    //   okType: "primary",
-      cancelText: "Cancel",
+    //   cancelText: "Cancel",
-      async onOk() {
+    //   async onOk() {
-        try {
+    //     try {
-          //TODO: minta apinya ke ka ilham ya, jangan di uncomment kalo pake api reconcile, nanti beneran ke apus datanya
+    //       //TODO: minta apinya ke ka ilham ya, jangan di uncomment kalo pake api reconcile, nanti beneran ke apus datanya
-          await store.membership.delete(record);
+    //       await store.membership.delete(record);
-          message.success("Success Delete Data");
+    //       message.success("Success Delete Data");
-          await getData();
+    //       await getData();
-        } catch (e) {
+    //     } catch (e) {
-          message.error("Failed Delete Data");
+    //       message.error("Failed Delete Data");
-        }
+    //     }
-      },
+    //   },
-      onCancel() {
+    //   onCancel() {
-        console.log("Cancel");
+    //     console.log("Cancel");
-      },
+    //   },
-    });
+    // });
   };
 
   return (
     <div className={["ppob-container"].join(" ")}>
-      <BreadcumbComponent data={routeData}/>
+      <BreadcumbComponent data={routeData} />
       <Card>
         <div>
-          <Row style={{marginBottom: 20}}>
+          <Row style={{ marginBottom: 20 }}>
             <Col span={12}>
               {/* <Button>
                 <FilterOutlined />
                 Filter
               </Button> */}
             </Col>
-            <Col span={12} style={{textAlign: "right"}}>
+            <Col span={12} style={{ textAlign: "right" }}>
               <Search
                 placeholder="input search text"
                 style={{
@@ -316,7 +334,7 @@ export const Membership = observer(() => {
                   setVisibleModal(true);
                 }}
               >
-                <PlusSquareOutlined/> New
+                <PlusSquareOutlined /> New
               </Button>
             </Col>
           </Row>
@@ -339,7 +357,7 @@ export const Membership = observer(() => {
                 store.membership.pageSize = page.pageSize;
                 store.membership.page = pageNumber - 1;
                 modalLoader.setLoading(true);
-                await getData();
+                //await getData();
                 modalLoader.setLoading(false);
               }}
             />
@@ -360,10 +378,10 @@ export const Membership = observer(() => {
                 pageSize: store.membership.pageSize,
                 total: store.membership.total_data,
                 current: store.membership.page,
-                style: {marginBottom: "1rem", marginRight: "1rem"},
+                style: { marginBottom: "1rem", marginRight: "1rem" },
               }}
               dataSource={store.membership.data}
-              style={{padding: 0}}
+              style={{ padding: 0 }}
               renderItem={(item) => {
                 return (
                   <div>
@@ -381,27 +399,39 @@ export const Membership = observer(() => {
                     >
                       <List.Item.Meta
                         className={["cariparkir-container"].join(" ")}
-                        title={item.username}
+                        title={item.name}
                         description={
                           <div style={{}}>
                             <p>
-                              <small>Username : {item.username}</small> <br/>
+                              <small>Role : {item.roleName}</small> <br />
+                              <small>Saldo Supplier : {item.amount}</small>{" "}
+                              <br />
+                              <small>Saldo System : {item.amount}</small> <br />
                             </p>
                           </div>
                         }
                       />
-                      <div style={{marginRight: 16}}>
+                      <div style={{ marginRight: 16 }}>
                         <p
                           style={{
                             fontSize: 9,
                             margin: 0,
                           }}
                         >
-                          {item.username}
+                          <Button
+                            type={
+                              item?.isActive === true ? "danger" : "primary"
+                            }
+                            onClick={() =>
+                              changeStatus(item?.id, item?.isActive)
+                            }
+                          >
+                            {item?.isActive === true ? "Inactive" : "Active"}
+                          </Button>
                         </p>
                       </div>
                     </List.Item>
-                    <Divider plain style={{margin: 0}}/>
+                    <Divider plain style={{ margin: 0 }} />
                   </div>
                 );
               }}
@@ -435,7 +465,7 @@ export const Membership = observer(() => {
           <Form.Item
             name="supplier"
             label="Supplier"
-            rules={[{required: true, message: "Please input supplier!"}]}
+            rules={[{ required: true, message: "Please input supplier!" }]}
           >
             <Select placeholder="Select Code Supplier" allowClear>
               {store.supplier.data.map((item) => (
@@ -448,9 +478,9 @@ export const Membership = observer(() => {
           <Form.Item
             name="amount"
             label="Amount"
-            rules={[{required: true, message: "Please input amount!"}]}
+            rules={[{ required: true, message: "Please input amount!" }]}
           >
-            <Input/>
+            <Input />
           </Form.Item>
         </Form>
       </Modal>

src/pages/Membership/MembershipModal.js

@@ -1,17 +1,16 @@
 import React from "react";
-import { Form, Input, Modal, Select } from "antd";
+import {Form, Input, Modal, Select} from "antd";
-import { capitalize } from "lodash";
+import {useStore} from "../../utils/useStore";
-import { useStore } from "../../utils/useStore";
 
 export const MembershipModal = ({
-  visible,
+                                    visible,
-  onCreate,
+                                    onCreate,
-  onCancel,
+                                    onCancel,
-  initialData,
+                                    initialData,
-}) => {
+                                }) => {
-  const [form] = Form.useForm();
+    const [form] = Form.useForm();
-  const { Option } = Select;
+    const {Option} = Select;
-  const store = useStore();
+    const store = useStore();
 
   return (
     <Modal
@@ -77,7 +76,7 @@ export const MembershipModal = ({
             label="Password"
             rules={[{ required: false, message: "Please input password!" }]}
           >
-            <Input />
+              <Input.Password/>
           </Form.Item>
         )}
         {((initialData.id && !initialData.isChangePassword) ||

src/pages/Payback/Payback.js

@@ -158,21 +158,21 @@ export const Payback = observer(() => {
                   columns={columns}
                   dataSource={store.payback.data}
                   bordered
-                  pagination={{
+                  // pagination={{
-                    pageSize: store.payback.page,
+                  //   pageSize: store.payback.page,
-                    total: store.payback.total_data,
+                  //   total: store.payback.total_data,
-                    current: store.payback.pageSize + 1,
+                  //   current: store.payback.pageSize + 1,
-                    showSizeChanger: true,
+                  //   showSizeChanger: true,
-                    simple: false
+                  //   simple: false
-                  }}
+                  // }}
-                  onChange={async (page) => {
+                  // onChange={async (page) => {
-                    let pageNumber = page.current;
+                  //   let pageNumber = page.current;
-                    store.payback.pageSize = page.pageSize;
+                  //   store.payback.pageSize = page.pageSize;
-                    store.payback.page = pageNumber - 1;
+                  //   store.payback.page = pageNumber - 1;
-                    modalLoader.setLoading(true);
+                  //   modalLoader.setLoading(true);
-                    await store.payback.getData();
+                  //   await store.payback.getData();
-                    modalLoader.setLoading(false);
+                  //   modalLoader.setLoading(false);
-                  }}
+                  // }}
               />
           )}
 
@@ -180,19 +180,19 @@ export const Payback = observer(() => {
               <List
                   itemLayout="horizontal"
                   position={"top"}
-                  pagination={{
+                  // pagination={{
-                    onChange: async (page) => {
+                  //   onChange: async (page) => {
-                      store.payback.pageSize = page.pageSize;
+                  //     store.payback.pageSize = page.pageSize;
-                      store.payback.page = page.current;
+                  //     store.payback.page = page.current;
-                      modalLoader.setLoading(true);
+                  //     modalLoader.setLoading(true);
-                      await store.payback.getData();
+                  //     await store.payback.getData();
-                      modalLoader.setLoading(false);
+                  //     modalLoader.setLoading(false);
-                    },
+                  //   },
-                    pageSize: store.payback.pageSize,
+                  //   pageSize: store.payback.pageSize,
-                    total: store.payback.total_data,
+                  //   total: store.payback.total_data,
-                    current: store.payback.page,
+                  //   current: store.payback.page,
-                    style: {marginBottom: "1rem", marginRight: "1rem"},
+                  //   style: {marginBottom: "1rem", marginRight: "1rem"},
-                  }}
+                  // }}
                   dataSource={store.payback.data}
                   style={{padding: 0}}
                   renderItem={(item) => {

src/pages/Payback/PaybackFromUser.js

@@ -12,7 +12,6 @@ const {Search} = Input;
 
 export const PaybackFromUser = observer(() => {
   const store = useStore();
-  const [visibleModal, setVisibleModal] = useState(false);
   const [initialData, setInitialData] = useState({});
   const modalLoader = useContext(ModalLoaderContext);
 
@@ -71,23 +70,6 @@ export const PaybackFromUser = observer(() => {
     },
   ];
 
-  const onSubmit = async (data) => {
-    modalLoader.setLoading(true);
-    try {
-      // await store.membership.create(data);
-      // message.success("Success Add New Member");
-      // await store.membership.getData();
-    } catch (e) {
-      console.error(e, "apa errornya");
-      message.error("Failed Add Member");
-    }
-    modalLoader.setLoading(false);
-    setVisibleModal(false);
-  };
-
-  const handleAction = async (record, type) => {
-  };
-
   return (
     <div className={["ppob-container"].join(" ")}>
       <BreadcumbComponent data={routeData}/>
@@ -113,7 +95,7 @@ export const PaybackFromUser = observer(() => {
                 <Button
                   onClick={() => {
                     setInitialData({});
-                    setVisibleModal(true);
+                    store.payback.visibleModalPayback = true;
                   }}
                 >
                   <PlusSquareOutlined/> New
@@ -140,7 +122,7 @@ export const PaybackFromUser = observer(() => {
                   store.payback.pageSizePaybackUser = page.pageSize;
                   store.payback.pageSizePaybackUser = pageNumber - 1;
                   modalLoader.setLoading(true);
-                  await store.payback.getDataUser();
+                  //await store.payback.getDataUser();
                   modalLoader.setLoading(false);
                 }}
             />
@@ -210,15 +192,7 @@ export const PaybackFromUser = observer(() => {
       </Card>
 
       <PaybackModal
-        visible={visibleModal}
         initialData={initialData}
-        onCreate={async (data) => {
-          await onSubmit(data);
-        }}
-        onCancel={() => {
-          setInitialData({});
-          setVisibleModal(false);
-        }}
       />
     </div>
   );

src/pages/Payback/PaybackModal.js

@@ -1,12 +1,12 @@
 import React, {useContext, useState} from "react";
-import {Form, Input, message, Modal, Upload,} from "antd";
+import {Form, InputNumber, message, Modal, Upload,} from "antd";
 import {useStore} from "../../utils/useStore";
 import {LoadingOutlined, PlusOutlined} from "@ant-design/icons";
 import {ModalLoaderContext} from "../../utils/modal";
 import {http} from "../../utils/http";
 import {appConfig} from "../../config/app";
 
-export const PaybackModal = ({visible, onCreate, onCancel, initialData}) => {
+export const PaybackModal = ({initialData}) => {
   const [form] = Form.useForm();
   const store = useStore();
   const [image, setImage] = useState("");
@@ -58,40 +58,51 @@ export const PaybackModal = ({visible, onCreate, onCancel, initialData}) => {
   );
 
   const handleSubmit = async (data) => {
-    console.log(data, "isi data2");
+    modalLoader.setLoading(true);
     try {
-      modalLoader.setLoading(true);
+      const request = {
-      await store.payback.create(data);
+        ...data,
-      modalLoader.setLoading(false);
+        destination: store.authentication.profileData.superior?.id
+      }
+      await store.payback.create(request);
       message.success("Success Add Payback");
-      await store.payback.getData();
     } catch (e) {
-      modalLoader.setLoading(false);
       if (e.response?.body?.message) {
         message.error(e.response.body.message);
         return;
       }
       message.error(e.message);
     }
+    modalLoader.setLoading(false);
     form.resetFields();
+    store.payback.visibleModalPayback = false;
+    setImage("");
+    setFileList([]);
+    setPreviewImage("");
+    setPreviewVisible(false);
   };
 
+  const handleCancel = () => {
+    form.resetFields();
+    store.payback.visibleModalPayback = false;
+    setImage("");
+    setFileList([]);
+    setPreviewImage("");
+    setPreviewVisible(false);
+  }
+
   return (
       <Modal
-          visible={visible}
+          visible={store.payback.visibleModalPayback}
           title={"Create a new Payback"}
           okText={"Create"}
           cancelText="Cancel"
-          onCancel={() => {
+          onCancel={handleCancel}
-            form.resetFields();
-            onCancel();
-          }}
           onOk={() => {
             form
                 .validateFields()
                 .then((values) => {
                   handleSubmit(values);
-                  console.log(values);
                   form.resetFields();
                 })
                 .catch((info) => {
@@ -105,14 +116,6 @@ export const PaybackModal = ({visible, onCreate, onCancel, initialData}) => {
             name="form_in_modal"
             initialValues={initialData}
         >
-          <Form.Item
-              name="destination"
-              label="destination"
-              rules={[{required: true, message: "Please input Name!"}]}
-              initialValue={store.authentication.profileData.superior?.id}
-          >
-            <Input/>
-          </Form.Item>
           <Form.Item
               label="Upload Picture"
               name="image_prove"
@@ -138,13 +141,11 @@ export const PaybackModal = ({visible, onCreate, onCancel, initialData}) => {
 
                 {image === "" ? uploadButton : null}
               </Upload>
-              <h5
+              <h5 style={{
-                  style={{
+                marginTop: 12,
-                    marginTop: 12,
+                color: "rgba(0, 0, 0, 0.45)",
-                    color: "rgba(0, 0, 0, 0.45)",
+              }}>
-                  }}
+                Max size of file 2 MB
-              >
-                Max size of file 2 mb
               </h5>
             </div>
           </Form.Item>
@@ -153,7 +154,11 @@ export const PaybackModal = ({visible, onCreate, onCancel, initialData}) => {
               label="amount"
               rules={[{required: true, message: "Please input Amount!"}]}
           >
-            <Input/>
+            <InputNumber
+                style={{width: "100%"}}
+                formatter={value => `Rp. ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
+                parser={value => value.replace(/\Rp.\s?|(,*)/g, '')}
+            />
           </Form.Item>
         </Form>
       </Modal>

src/pages/Product/DetailProduct.js

@@ -0,0 +1,148 @@
+import React, {useContext, useEffect} from "react";
+import {Button, Card, Col, Row, Table, Typography} from "antd";
+import {BreadcumbComponent} from "../../component/BreadcumbComponent";
+import {LINKS} from "../../routes/app";
+import {useStore} from "../../utils/useStore";
+import {observer} from "mobx-react-lite";
+import {FilterOutlined} from "@ant-design/icons";
+import {format, parseISO} from "date-fns";
+import {ModalLoaderContext} from "../../utils/modal";
+
+const {Title, Text} = Typography;
+
+export const DetailProduct = observer(() => {
+  const store = useStore();
+  const modalLoader = useContext(ModalLoaderContext);
+
+  const routeData = [
+    {
+      route: LINKS.HOME,
+      name: "Home",
+    },
+    {
+      route: LINKS.DETAILPRODUCT,
+      name: <span style={{fontWeight: 'bold'}}>Detail Product</span>,
+    },
+  ];
+
+  useEffect(() => {
+    (async () => {
+      modalLoader.setLoading(true);
+      await Promise.allSettled([
+        store.authentication.getProfile(),
+        store.transaction.getDataHistoryTransaction(),
+      ]);
+      modalLoader.setLoading(false);
+    })()
+  }, []);
+
+  const columns = [
+    {
+      title: 'Markup Price',
+      dataIndex: 'mark_up_price',
+      key: 'mark_up_price',
+      width: '20%',
+    },
+    {
+      title: 'Name',
+      dataIndex: 'name',
+      key: 'name',
+      width: '50%',
+    },
+    {
+      title: 'Transaction Date',
+      dataIndex: 'created_at',
+      key: 'created_at',
+      render: (text, record) => {
+        return (
+          <Text>{format(parseISO(record.created_at), 'dd MMMM yyyy HH:mm')}</Text>
+        )
+      },
+    },
+  ]
+
+  const styleSaldoTitle = store.ui.mediaQuery.isDesktop ? {
+    display: "flex",
+    justifyContent: "center"
+  } : {fontSize: "0.75rem"};
+  const styleSaldoContent = store.ui.mediaQuery.isDesktop ? {
+    fontSize: '1.25rem',
+    display: "flex",
+    justifyContent: "center"
+  } : null;
+
+  return (
+    <div className={["ppob-container"].join(" ")}>
+      <BreadcumbComponent data={routeData}/>
+      <Card>
+        <Title strong>Detail Product</Title>
+        <Row style={{marginBottom: 20}}>
+          <Col lg={12} xs={24}>
+            <Row>
+              <Col span={12}>
+                <Text strong>Kode</Text>
+              </Col>
+              <Col span={12}>
+                <Text>{store.authentication.profileData?.userDetail?.name}</Text>
+              </Col>
+              <Col span={12}>
+                <Text strong>Produk</Text>
+              </Col>
+              <Col span={12}>
+                <Text>{store.authentication.profileData?.userDetail?.phone_number}</Text>
+              </Col>
+              <Col span={12}>
+                <Text strong>Harga Beli</Text>
+              </Col>
+              <Col span={12}>
+                <Text>{store.authentication.profileData?.username}</Text>
+              </Col>
+              <Col span={12}>
+                <Text strong>Harga Jual</Text>
+              </Col>
+              <Col span={12}>
+                <Text>{store.authentication.profileData.roles?.name}</Text>
+              </Col>
+              <Col span={12}>
+                <Text strong>Status</Text>
+              </Col>
+              <Col span={12}>
+                <Text>{store.authentication.profileData.superior?.username}</Text>
+              </Col>
+            </Row>
+          </Col>
+          <Col lg={12} xs={24}>
+            <Row justify={"center"}>
+              <Col lg={24} xs={12}>
+                <Title strong level={3} style={styleSaldoTitle}>Saldo</Title>
+              </Col>
+              <Col lg={24} xs={12}>
+                <Text style={styleSaldoContent}>{store.authentication.profileData?.wallet}</Text>
+              </Col>
+            </Row>
+          </Col>
+        </Row>
+        <Row>
+          <Col span={24}>
+            <div>
+              <Title strong level={3}>History User Transaction</Title>
+
+              <Button style={{marginBottom: '1rem'}} onClick={() => {
+                console.log('clicked filter')
+              }}>
+                <FilterOutlined/>
+                Filter
+              </Button>
+              <Table
+                columns={columns}
+                dataSource={store.transaction.dataHistoryTransaction}
+                bordered
+              />
+            </div>
+          </Col>
+        </Row>
+        <div/>
+      </Card>
+    </div>
+  )
+});

src/pages/Product/Product.js

@@ -1,5 +1,5 @@
 import React, {useContext, useEffect} from "react";
-import {Button, Card, Col, Input, Row, Upload,message} from "antd";
+import {Button, Card, Col, Input, message, Row, Upload} from "antd";
 import {FilterOutlined, PlusSquareOutlined, UploadOutlined,} from "@ant-design/icons";
 import {BreadcumbComponent} from "../../component/BreadcumbComponent";
 import {useStore} from "../../utils/useStore";
@@ -20,8 +20,8 @@ export const Product = observer(() => {
         modalLoader.setLoading(true);
         await Promise.allSettled([
           store.supplier.getData(),
-          store.product.getDataCategories(),
           store.category.getData(),
+          store.product.getDataSubCategories(),
         ]);
         await store.product.getData();
         modalLoader.setLoading(false);

src/pages/Transaction/Product.js

@@ -1,4 +1,4 @@
-import React, {useContext, useEffect, useState} from "react";
+import React, {useContext, useEffect} from "react";
 import {useStore} from "../../utils/useStore";
 import {Button, Card, Col, Input, message, Modal, Row, Select} from "antd";
 import {observer} from "mobx-react-lite";
@@ -10,8 +10,6 @@ const {Option} = Select;
 
 export const Product = observer(() => {
   const store = useStore();
-
-  const [productData, setProductData] = useState([]);
   const modalLoader = useContext(ModalLoaderContext);
 
   useEffect(() => {
@@ -36,20 +34,6 @@ export const Product = observer(() => {
     init();
   }, []);
 
-  // data
-  useEffect(() => {
-    console.log("⚡ transaction data store", store.transaction.data);
-    setProductData(store.transaction.data);
-  }, [store.transaction.data]);
-
-  // Subcategory
-  useEffect(() => {
-    console.log(
-      "⚡ transaction subcategory store",
-      store.transaction.dataSubCategories
-    );
-  }, [store.transaction.dataSubCategories]);
-
   const handleChangeSubcategory = async (item) => {
     store.transaction.filterSubCategory = item;
     modalLoader.setLoading(true);
@@ -61,12 +45,16 @@ export const Product = observer(() => {
     modalLoader.setLoading(true);
     try {
       const response = await store.transaction.buyProduct({productCode: data});
-      // if (response.status === 200) {
+      if (response.status === 201) {
-      message.success("Success Buy Product");
+        message.success("Success Buy Product");
-      // } else {
+      } else {
-      //message.error("Failed Buy Product");
+        message.error("Failed Buy Product", 3);
-      //}
+      }
     } catch (e) {
+      if (e.response?.body?.message) {
+        message.error(e.response.body.message);
+        return;
+      }
       console.log(e, "apa errornya");
       message.error("Failed Buy Product");
     }
@@ -81,14 +69,11 @@ export const Product = observer(() => {
       <Row>
         <Col span={24}>
           <Select
-            placeholder={"Select Sub Category"}
+              placeholder={"Select Sub Category"}
-            allowClear={true}
+              allowClear={true}
-            onChange={(val) => {
+              onChange={(val) => handleChangeSubcategory(val)}
-              if (val) {
+              style={{marginBottom: "10px", width: "100%"}}
-                handleChangeSubcategory(val);
+              value={store.transaction.filterSubCategory}
-              }
-            }}
-            style={{marginBottom: "10px", width: "100%"}}
           >
             {store.transaction.dataSubCategories.map((item, index) => (
               <Option key={item.id} value={item.id}>
@@ -107,52 +92,52 @@ export const Product = observer(() => {
         </Col>
         <Col span={12} style={{textAlign: "right"}}>
           <Search
-            placeholder="input search text"
+              placeholder="input search text"
-            style={{width: 200, marginRight: 10}}
+              style={{width: 200, marginRight: 10}}
           />
         </Col>
       </Row>
-      {productData.length != 0 && (
+      {store.transaction.data.length != 0 && (
-        <Row>
+          <Row>
-          {productData.map((item, index) => (
+            {store.transaction.data.map((item, index) => (
-            <Col key={index} xs={24} md={16} lg={8}>
+                <Col key={index} xs={24} md={16} lg={8}>
-              <Card
+                  <Card
-                onClick={() => {
+                      onClick={() => {
-                  Modal.confirm({
+                        Modal.confirm({
-                    title: `Are you sure buy ${item.name}?`,
+                          title: `Are you sure buy ${item.name}?`,
-                    icon: <MoneyCollectOutlined/>,
+                          icon: <MoneyCollectOutlined/>,
-                    okText: "Confirm",
+                          okText: "Confirm",
-                    cancelText: "Cancel",
+                          cancelText: "Cancel",
-                    okType: "primary",
+                          okType: "primary",
-                    onOk() {
+                          onOk() {
-                      handleBuyProduct(item.code)
+                            handleBuyProduct(item.code)
-                    },
+                          },
-                    onCancel() {
+                          onCancel() {
-                      console.log("Cancel");
+                            console.log("Cancel");
-                    },
+                          },
-                  });
+                        });
-                }}
+                      }}
-                style={{cursor: "pointer"}}
+                      style={{cursor: "pointer"}}
-              >
+                  >
-                <span style={{color: "black"}}>{item.name}</span>
+                    <span style={{color: "black"}}>{item.name}</span>
-                <br/>
+                    <br/>
-                <span style={{color: "grey", fontSize: 10}}>
+                    <span style={{color: "grey", fontSize: 10}}>
                   {new Intl.NumberFormat("id-ID", {
                     style: "currency",
                     currency: "IDR",
                   }).format(item?.currentPrice?.mark_up_price)}
                 </span>
-              </Card>
+                  </Card>
-            </Col>
+                </Col>
-          ))}
+            ))}
-        </Row>
+          </Row>
       )}
-      {productData.length !== 0 && (
+      {store.transaction.data.length !== 0 && (
-        <Col style={{textAlign: "right"}}>
+          <Col style={{textAlign: "right", marginTop: "1em"}}>
-          <Button style={{backgroundColor: "#2D9CDB", color: "white"}}>
+            <Button style={{backgroundColor: "#2D9CDB", color: "white"}}>
-            Beli Sekarang
+              Beli Sekarang
-          </Button>
+            </Button>
-        </Col>
+          </Col>
       )}
     </div>
   );

src/pages/Transaction/Transaction.js

@@ -1,4 +1,4 @@
-import React, {useContext, useEffect, useState,message} from "react";
+import React, {message, useContext, useEffect} from "react";
 import {useStore} from "../../utils/useStore";
 import {Card, Tabs} from "antd";
 import {BreadcumbComponent} from "../../component/BreadcumbComponent";
@@ -14,7 +14,6 @@ export const Transaction = observer(() => {
 
   const modalLoader = useContext(ModalLoaderContext);
 
-  // Init
   useEffect(() => {
     const init = async () => {
       try {
@@ -34,14 +33,12 @@ export const Transaction = observer(() => {
     init();
   }, []);
 
-  // Category
-  useEffect(() => {
-    console.log('⚡ transaction category store', store.transaction.dataCategories)
-  }, [store.transaction.dataCategories])
-
   const handleChangeTabs = async (key) => {
-    store.transaction.filterCategory = key;
     modalLoader.setLoading(true);
+    store.transaction.dataSubCategories = [];
+    store.transaction.data = [];
+    store.transaction.filterSubCategory = null;
+    store.transaction.filterCategory = key;
     await store.transaction.getDataSubCategories();
     modalLoader.setLoading(false);
   };

src/routes/app.js

@@ -2,7 +2,9 @@ import {Redirect, Route, Switch} from "react-router-dom";
 import {Home} from "../pages/Home/Home";
 import {About} from "../pages/About/About";
 import {Membership} from "../pages/Membership/Membership";
+import {DetailUser} from "../pages/Membership/DetailUser";
 import {Product} from "../pages/Product/Product";
+import {DetailProduct} from "../pages/Product/DetailProduct";
 import {Transaction} from "../pages/Transaction/Transaction";
 import {Profile} from "../pages/Profile/Profile";
 import {Commission} from "../pages/Config/Commission";
@@ -27,7 +29,8 @@ export const LINKS = {
     PAYBACK: "/app/payback",
     PAYBACKFROMUSER: "/app/payback-from-user",
     SUBCATEGORY: "/app/subcategory",
-
+    DETAILUSER: "/app/detail-user",
+    DETAILPRODUCT: "/app/detail-product",
 };
 
 export const AppRoute = () => {
@@ -35,6 +38,12 @@ export const AppRoute = () => {
         <Route path={LINKS.HOME}>
             <Home/>
         </Route>
+        <Route path={LINKS.DETAILUSER}>
+            <DetailUser/>
+        </Route>
+        <Route path={LINKS.DETAILPRODUCT}>
+            <DetailProduct/>
+        </Route>
         <Route path={LINKS.COMMISSION}>
             <Commission/>
         </Route>

src/store/payback.js

@@ -73,9 +73,9 @@ export class Payback {
 
   async create(data) {
     try {
-    console.log(data)
+      const response = await http.post("/transaction/deposit-return").send(data);
-      return await http.post("/transaction/deposit-return").send(data);
+      await this.getData();
-      
+      return response;
     } catch (e) {
       console.error(e);
     }

src/store/product.js

@@ -21,7 +21,7 @@ export class Product {
     pageSizeSubCategories = 10
     dataSubCategories = [];
     total_dataSubCategories = 0;
-    filterByCategory = null;
+    filterCategory = null;
 
     constructor(ctx) {
         this.ctx = ctx;
@@ -44,7 +44,7 @@ export class Product {
 
     async getDataSubCategories() {
         try {
-            const response = await http.get(`/product/sub-categories?category=${this.filterByCategory}&page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`);
+            const response = await http.get(`/product/sub-categories?category=${this.filterCategory}&page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`);
             this.dataSubCategories = response.body.data.map((item, idx) => {
                 item.key = idx;
                 return item

src/store/subcategory.js

@@ -56,7 +56,7 @@ export class Subcategory {
     async create(data) {
         try {
             const response = await http.post('/product/sub-categories').send(data);
-            await this.getData();
+            //await this.getData();
             return response;
         } catch (e) {
             console.error(e);
@@ -66,7 +66,7 @@ export class Subcategory {
     async update(id, data) {
         try {
             const response = await http.put(`/product/sub-categories/${id}`).send(data);
-            await this.getData();
+            //await this.getData();
             return response;
         } catch (e) {
             console.error(e);