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,23 +1,8 @@
 import React, {useContext, useState} from "react";
-import {
+import {Button, Col, Divider, Form, Input, List, message, Modal, Row, Select, Table, Tag, Typography,} from "antd";
-  Button,
-  Col,
-  Form,
-  Input,
-  message,
-  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";
@@ -30,9 +15,8 @@ export const ProductComponent = observer((props) => {
   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,6 +185,16 @@ 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"}
@@ -383,7 +391,7 @@ 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}>
                     {item.name}
                   </Option>
@@ -410,6 +418,7 @@ export const ProductComponent = observer((props) => {
                   setFilterSupplier(val);
                 }}
                 style={{marginBottom: "20px", width: "100%"}}
+                value={filterSupplier}
             >
               {store.supplier.data.map((item) => (
                   <Option value={item.id} key={item.id}>
@@ -425,12 +434,9 @@ export const ProductComponent = observer((props) => {
             <Select
                 mode={"multiple"}
                 placeholder="Choose Category"
-              onChange={async (val) => {
+                onChange={async (val) => handleFilterCategory(val)}
-                setFilterCategories(val);
-                store.product.filterByCategory = val;
-                await store.product.getDataSubCategories();
-              }}
                 style={{marginBottom: "20px", width: "100%"}}
+                value={store.product.filterCategory || []}
             >
               {store.category.data.map((item) => (
                   <Option value={item.id} key={item.id}>
@@ -450,6 +456,7 @@ export const ProductComponent = observer((props) => {
                   setFilterSubCategories(val);
                 }}
                 style={{marginBottom: "20px", width: "100%"}}
+                value={filterSubCategories}
             >
               {store.product.dataSubCategories.map((item) => (
                   <Option value={item.id} key={item.id}>

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,5 +1,16 @@
 import React, { useContext, useState } from "react";
-import {Button, Form, Input, message, Modal, Space, Table, Tag} from "antd";
+import {
+  Button,
+  Form,
+  Input,
+  message,
+  Modal,
+  Space,
+  Table,
+  Tag,
+  List,
+  Divider,
+} from "antd";
 import { observer } from "mobx-react-lite";
 import { ExclamationCircleOutlined } from "@ant-design/icons";
 import { useHistory } from "react-router-dom";
@@ -73,7 +84,7 @@ export const SupplierComponent = observer((props) => {
         new Intl.NumberFormat("id-ID", {
           style: "currency",
           currency: "IDR",
-          }).format(text)
+        }).format(text),
     },
     {
       title: "Saldo di System",
@@ -84,7 +95,7 @@ export const SupplierComponent = observer((props) => {
         new Intl.NumberFormat("id-ID", {
           style: "currency",
           currency: "IDR",
-          }).format(text)
+        }).format(text),
     },
     {
       title: "Status",
@@ -190,6 +201,7 @@ export const SupplierComponent = observer((props) => {
 
   return (
     <div>
+      {store.ui.mediaQuery.isDesktop && (
         <Table
           style={{ textAlign: "center" }}
           columns={columns}
@@ -207,10 +219,103 @@ export const SupplierComponent = observer((props) => {
             store.supplier.pageSize = page.pageSize;
             store.supplier.page = pageNumber - 1;
             modalLoader.setLoading(true);
-          await store.supplier.getData();
+            //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"}

src/index.css

@@ -66,3 +66,8 @@ code {
 .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">
+        {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/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

@@ -4,33 +4,34 @@ import {
   Card,
   Col,
   Divider,
+  Form,
   Input,
   List,
   message,
   Modal,
   Row,
+  Select,
   Space,
   Table,
   Tag,
-  Form,
-  Select,
 } from "antd";
 import { useStore } from "../../utils/useStore";
 import { observer } from "mobx-react-lite";
 import {
-  ExclamationCircleOutlined,
-  FilterOutlined,
-  PlusSquareOutlined,
   DownloadOutlined,
+  ExclamationCircleOutlined,
+  PlusSquareOutlined,
 } from "@ant-design/icons";
 import { MembershipModal } from "./MembershipModal";
 import { BreadcumbComponent } from "../../component/BreadcumbComponent";
 import { LINKS } from "../../routes/app";
+import { Link, useHistory } from "react-router-dom";
 import { ModalLoaderContext } from "../../utils/modal";
 
 const { Search } = Input;
 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",
@@ -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>
       ),
     },
@@ -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,27 +284,27 @@ 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 (
@@ -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);
               }}
             />
@@ -381,11 +399,14 @@ 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>
                         }
@@ -397,7 +418,16 @@ export const Membership = observer(() => {
                             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>

src/pages/Membership/MembershipModal.js

@@ -1,6 +1,5 @@
 import React from "react";
 import {Form, Input, Modal, Select} from "antd";
-import { capitalize } from "lodash";
 import {useStore} from "../../utils/useStore";
 
 export const MembershipModal = ({
@@ -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");
-    try {
     modalLoader.setLoading(true);
-      await store.payback.create(data);
+    try {
-      modalLoader.setLoading(false);
+      const request = {
+        ...data,
+        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,
                 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");
-      // } 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");
     }
@@ -83,12 +71,9 @@ export const Product = observer(() => {
           <Select
               placeholder={"Select Sub Category"}
               allowClear={true}
-            onChange={(val) => {
+              onChange={(val) => handleChangeSubcategory(val)}
-              if (val) {
-                handleChangeSubcategory(val);
-              }
-            }}
               style={{marginBottom: "10px", width: "100%"}}
+              value={store.transaction.filterSubCategory}
           >
             {store.transaction.dataSubCategories.map((item, index) => (
               <Option key={item.id} value={item.id}>
@@ -112,9 +97,9 @@ export const Product = observer(() => {
           />
         </Col>
       </Row>
-      {productData.length != 0 && (
+      {store.transaction.data.length != 0 && (
           <Row>
-          {productData.map((item, index) => (
+            {store.transaction.data.map((item, index) => (
                 <Col key={index} xs={24} md={16} lg={8}>
                   <Card
                       onClick={() => {
@@ -147,8 +132,8 @@ export const Product = observer(() => {
             ))}
           </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"}}>
               Beli Sekarang
             </Button>

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);