Config Menu

src/component/ProductComponent.js

@@ -92,6 +92,11 @@ export const ProductComponent = observer((props) => {
     //         </Tag>
     //     ),
     // },
+    {
+      title: "Supplier",
+      dataIndex: "supplier",
+      key: "supplier",
+    },
     {
       title: "Tersedia",
       dataIndex: "tersedia",
@@ -120,7 +125,7 @@ export const ProductComponent = observer((props) => {
       ),
     },
   ];
-
+  if (store.authentication.userData.role !== "Admin") columns.pop();
   const deleteData = async (id) => {
     try {
       console.log(id);

src/pages/App/MenuList.js

@@ -52,14 +52,14 @@ export const MenuList = observer((props) => {
       <Menu.Item key="home">
         <Link to={LINKS.HOME}>
           <HomeOutlined />
-          <span>Home</span>
+          <span>Beranda</span>
         </Link>
       </Menu.Item>
       {store.authentication.userData.role !== "Retail" && (
         <Menu.Item key="membership">
           <Link to={LINKS.MEMBERSHIP}>
             <FileProtectOutlined />
-            <span>Membership</span>
+            <span>Keanggotaan</span>
           </Link>
         </Menu.Item>
       )}
@@ -68,13 +68,13 @@ export const MenuList = observer((props) => {
           <Menu.Item key="partner">
             <Link to={LINKS.PARTNER}>
               <ProjectOutlined />
-              <span>Partner</span>
+              <span>Rekanan</span>
             </Link>
           </Menu.Item>
           <Menu.Item key="commision">
             <Link to={LINKS.COMMISSION}>
               <MoneyCollectOutlined />
-              <span>Commission</span>
+              <span>Komisi</span>
             </Link>
           </Menu.Item>
           <Menu.Item key="supplier">
@@ -90,14 +90,14 @@ export const MenuList = observer((props) => {
           <Menu.Item key="product">
             <Link to={LINKS.PRODUCT}>
               <DatabaseOutlined />
-              <span>Product</span>
+              <span>Produk</span>
             </Link>
           </Menu.Item>
           {store.authentication.userData.role === "Admin" && (
             <Menu.Item key="category">
               <Link to={LINKS.CATEGORY}>
                 <FileAddOutlined />
-                <span>Category</span>
+                <span>Kategori</span>
               </Link>
             </Menu.Item>
           )}
@@ -105,7 +105,7 @@ export const MenuList = observer((props) => {
             <Menu.Item key="sub-category">
               <Link to={LINKS.SUBCATEGORY}>
                 <FileSyncOutlined />
-                <span>Sub Category</span>
+                <span>Sub Kategori</span>
               </Link>
             </Menu.Item>
           )}
@@ -115,7 +115,7 @@ export const MenuList = observer((props) => {
         <Menu.Item key="retail">
           <Link to={LINKS.PRODUCT}>
             <DatabaseOutlined />
-            <span>Product</span>
+            <span>Produk</span>
           </Link>
         </Menu.Item>
       )}
@@ -123,24 +123,24 @@ export const MenuList = observer((props) => {
         <Menu.Item key="transaction">
           <Link to={LINKS.TRANSACTION}>
             <ShoppingCartOutlined />
-            <span>Transaction</span>
+            <span>Transaksi</span>
           </Link>
         </Menu.Item>
       )}
-      <SubMenu key="payback-main" icon={<ProfileOutlined />} title="Payback">
+      <SubMenu key="payback-main" icon={<ProfileOutlined />} title="Pembayaran">
         {store.authentication.userData.role !== "Retail" && (
           <Menu.Item key="payback-to-user">
             <Link to={LINKS.PAYBACK}>
-              <PayCircleOutlined/>
-                <span>Confirmation</span>
+              <FileProtectOutlined/>
+                <span>konfirmasi</span>
             </Link>
           </Menu.Item>
         )}
         {store.authentication.userData.role !== "Admin" && (
           <Menu.Item key="payback-from-user">
               <Link to={LINKS.PAYBACK_CREATED}>
-                  <AlipayOutlined/>
-                  <span>Created</span>
+                  <FileProtectOutlined/>
+                  <span>Buat Pembayaran</span>
               </Link>
           </Menu.Item>
         )}

src/pages/Config/Partner.js

@@ -56,14 +56,14 @@ export const Partner = observer(() => {
                         </Button> */}
           </Col>
           <Col span={12} style={{textAlign: "right"}}>
-            <Search
+            {/* <Search
               placeholder="input search text"
               style={{
                 width: store.ui.mediaQuery.isMobile ? 160 : 200,
                 marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
                 marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
               }}
-            />
+            /> */}
             <Button onClick={() => store.partner.visibleModalPartner = true}>
               <PlusSquareOutlined/> New
             </Button>

src/pages/Config/Supplier.js

@@ -71,7 +71,7 @@ export const Supplier = observer(() => {
             </Button>
           </Col> */}
           <Col span={24} style={{ textAlign: "right" }}>
-            <Search
+            {/* <Search
               placeholder="input search text"
               style={{
                 width: store.ui.mediaQuery.isMobile ? 160 : 200,
@@ -79,7 +79,7 @@ export const Supplier = observer(() => {
                 marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
               }}
               onSearch={(value) => console.log(value)}
-            />
+            /> */}
             <Button
               onClick={() => (store.supplier.visibleModalSupplier = true)}
             >

src/pages/Membership/DetailUser.js

@@ -1,10 +1,20 @@
-import React, {useContext, useEffect} from "react";
-import {Button, Card, Col, Row, Table, Typography} from "antd";
+import React, { useContext, useEffect, useState } from "react";
+import {
+  Button,
+  Card,
+  Col,
+  Row,
+  Table,
+  Typography,
+  Tag,
+  Space,
+  message,
+} 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 { FilterOutlined, DownloadOutlined } from "@ant-design/icons";
 import { format, parseISO } from "date-fns";
 import { ModalLoaderContext } from "../../utils/modal";
 import { useParams } from "react-router-dom";
@@ -15,6 +25,43 @@ export const DetailUser = observer(() => {
   const store = useStore();
   const modalLoader = useContext(ModalLoaderContext);
   const { id } = useParams();
+  const [visibleModal, setVisibleModal] = useState(false);
+  const [isVisibleTopUpModal, setIsVisibleTopUpModal] = useState(false);
+  const [destination, setDestination] = useState(null);
+  const [initialData, setInitialData] = useState({});
+  const [confirmLoading, setConfirmLoading] = useState(false);
+
+  //console.log(id)
+  useEffect(() => {
+    (async () => {
+      modalLoader.setLoading(true);
+      await Promise.allSettled([
+        store.transaction.getDataHistoryTopUp(id),
+        store.membership.getDetail(id),
+      ]);
+      modalLoader.setLoading(false);
+    })();
+  }, []);
+
+  const columns = [
+    {
+      title: "Amount",
+      dataIndex: "amount",
+      key: "amount",
+    },
+    {
+      title: "Transaction Date",
+      dataIndex: "transaction_date",
+      key: "transaction_date",
+      render: (text, record) => {
+        return (
+          <Text>
+            {format(parseISO(record.transaction_date), "dd MMMM yyyy ")}
+          </Text>
+        );
+      },
+    },
+  ];
 
   const routeData = [
     {
@@ -23,57 +70,9 @@ export const DetailUser = observer(() => {
     },
     {
       route: LINKS.USER_DETAIL,
-      name: <span style={{fontWeight: 'bold'}}>Detail User</span>,
+      name: <span style={{ fontWeight: "bold" }}>Detail User</span>,
     },
   ];
-console.log(id)
-  useEffect(() => {
-    (async () => {
-      modalLoader.setLoading(true);
-      await Promise.allSettled([
-        store.authentication.getProfile(),
-        store.transaction.getDataHistoryTopUp(id),
-        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} />
@@ -86,59 +85,74 @@ console.log(id)
                 <Text strong>Name</Text>
               </Col>
               <Col span={12}>
-                <Text>{store.transaction.data.name}</Text>
+                <Text>{store.membership.data.userDetail?.name}</Text>
+              </Col>
+              <Col span={12}>
+                <Text strong>Username</Text>
+              </Col>
+              <Col span={12}>
+                <Text>
+                {store.membership.data.superior?.username}
+                </Text>
               </Col>
               <Col span={12}>
                 <Text strong>Role</Text>
               </Col>
               <Col span={12}>
-                <Text>{store.authentication.profileData?.userDetail?.phone_number}</Text>
+                <Text>
+                {store.membership.data.roles?.name}
+                </Text>
               </Col>
               <Col span={12}>
-                <Text strong>Saldo Supplier</Text>
+                <Text strong>Phone Number</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>
+                <Text>{store.membership.data.userDetail?.phone_number}</Text>
               </Col>
               <Col span={12}>
                 <Text strong>Status</Text>
               </Col>
               <Col span={12}>
-                <Text>{store.authentication.profileData.superior?.username}</Text>
+                <Text>
+                  {store.authentication.profileData.superior?.isActive === true ? "Inaktif": "Aktif"}
+                </Text>
               </Col>
             </Row>
           </Col>
-          <Col lg={12} xs={24}>
+          {/* <Col lg={12} xs={24}>
             <Row justify={"center"}>
               <Col lg={24} xs={12}>
-                <Title strong level={3} style={styleSaldoTitle}>Saldo</Title>
+                <Title strong level={3} style={styleSaldoTitle}>
+                  Saldo
+                </Title>
               </Col>
               <Col lg={24} xs={12}>
-                <Text style={styleSaldoContent}>{store.authentication.profileData?.wallet}</Text>
+                <Text style={styleSaldoContent}>
+                  {store.transaction?.data.amount}
+                </Text>
               </Col>
             </Row>
-          </Col>
+          </Col> */}
         </Row>
         <Row>
           <Col span={24}>
             <div>
-              <Title strong level={3}>History Top Up</Title>
+              <Title strong level={3}>
+                History Top Up
+              </Title>
 
-              <Button style={{marginBottom: '1rem'}} onClick={() => {
-                console.log('clicked filter')
-              }}>
+              <Button
+                style={{ marginBottom: "1rem" }}
+                onClick={() => {
+                  console.log("clicked filter");
+                }}
+              >
                 <FilterOutlined />
                 Filter
               </Button>
               <Table
                 columns={columns}
-                dataSource={store.transaction.dataHistoryTransaction}
+                dataSource={store.transaction.dataHistoryTopUp}
                 bordered
               />
             </div>
@@ -147,5 +161,5 @@ console.log(id)
         <div />
       </Card>
     </div>
-  )
+  );
 });

src/pages/Membership/Membership.js

@@ -147,25 +147,25 @@ export const Membership = observer(() => {
           currency: "IDR",
         }).format(text),
     },
-    {
-      title: "Status",
-      dataIndex: "isActive",
-      key: "isActive",
-      render: (text, record) => (
-        <Tag
-          color={record?.isActive === true ? "processing" : "#E3E8EE"}
-          style={{ color: "#4F566B" }}
-        >
-          {record?.isActive === true ? " ACTIVE" : "INACTIVE"}
-        </Tag>
-      ),
-    },
+    // {
+    //   title: "Status",
+    //   dataIndex: "isActive",
+    //   key: "isActive",
+    //   render: (text, record) => (
+    //     <Tag
+    //       color={record?.isActive === true ? "processing" : "#E3E8EE"}
+    //       style={{ color: "#4F566B" }}
+    //     >
+    //       {record?.isActive === true ? " ACTIVE" : "INACTIVE"}
+    //     </Tag>
+    //   ),
+    // },
     {
       title: "Action",
       key: "action",
       render: (text, record) => (
         <Space size="middle">
-              {store.authentication.userData.role === "Admin" && <Button
+          {/* {store.authentication.userData.role === "Admin" && <Button
                   type={record?.isActive === true ? "danger" : "primary"}
                   onClick={() => changeStatus(record?.id, record?.isActive)}
               >
@@ -209,10 +209,19 @@ export const Membership = observer(() => {
                   }}
               >
                   Ganti Password
-              </Button>}
+              </Button>} */}
+          <Button
+            onClick={() => {
+              setDestination(record?.id);
+              console.log(record?.id);
+              setIsVisibleTopUpModal(true);
+            }}
+          >
+            <DownloadOutlined /> Top Up Saldo
+          </Button>
           <Button
             onClick={async () => {
-                await store.transaction.getDataHistoryTopUp(record.id)
+              await store.transaction.getDataHistoryTopUp(record.id);
               history.push(LINKS.USER_DETAIL.replace(":id", record.id));
               console.log(record.id);
             }}

src/pages/Payback/Payback.js

@@ -1,8 +1,28 @@
 import React, { useContext, useEffect } from "react";
-import {Button, Card, Col, Divider, Image, Input, List, message, Modal, Row, Space, Table, Tag,} from "antd";
+import {
+  Button,
+  Card,
+  Col,
+  Divider,
+  Image,
+  Input,
+  List,
+  message,
+  Modal,
+  Row,
+  Space,
+  Table,
+  Tag,
+} from "antd";
 import { useStore } from "../../utils/useStore";
 import { observer } from "mobx-react-lite";
-import {CheckCircleOutlined, CheckOutlined, CloseOutlined, FilterOutlined, StopOutlined,} from "@ant-design/icons";
+import {
+  CheckCircleOutlined,
+  CheckOutlined,
+  CloseOutlined,
+  FilterOutlined,
+  StopOutlined,
+} from "@ant-design/icons";
 import { BreadcumbComponent } from "../../component/BreadcumbComponent";
 import { LINKS } from "../../routes/app";
 import { ModalLoaderContext } from "../../utils/modal";
@@ -48,7 +68,7 @@ export const Payback = observer(() => {
       render: (text, record) => (
         <Image
           src={`${appConfig.apiUrl}/config/image/${text}`}
-                    style={{width: '5vw'}}
+          style={{ width: "5vw" }}
           alt={record.id}
         />
       ),
@@ -57,7 +77,7 @@ export const Payback = observer(() => {
       title: "Amount",
       dataIndex: "amount",
       key: "amount",
-            width: '20%',
+      width: "20%",
       render: (text) =>
         new Intl.NumberFormat("id-ID", {
           style: "currency",
@@ -68,9 +88,9 @@ export const Payback = observer(() => {
       title: "Action",
       dataIndex: "amount",
       key: "action",
-            width: '10%',
-            render: (text, record) => (
-                PAYBACK_STATUS[record.status] === PAYBACK_STATUS[0] ?
+      width: "10%",
+      render: (text, record) =>
+        PAYBACK_STATUS[record.status] === PAYBACK_STATUS[0] ? (
           <Space size="middle">
             <Button
               onClick={async () => {
@@ -86,7 +106,7 @@ export const Payback = observer(() => {
                   onCancel() {
                     console.log("Cancel");
                   },
-                                })
+                });
               }}
               icon={<CheckCircleOutlined />}
               style={{
@@ -111,8 +131,7 @@ export const Payback = observer(() => {
                   onCancel() {
                     console.log("Cancel");
                   },
-                                })
-
+                });
               }}
               icon={<CloseOutlined />}
               style={{
@@ -123,9 +142,14 @@ export const Payback = observer(() => {
             >
               Reject
             </Button>
-                    </Space> :
+          </Space>
+        ) : (
           <Tag
-                        color={PAYBACK_STATUS[record.status] === PAYBACK_STATUS[3] ? "cyan" : "red"}
+            color={
+              PAYBACK_STATUS[record.status] === PAYBACK_STATUS[3]
+                ? "cyan"
+                : "red"
+            }
             style={{ color: "#4F566B" }}
           >
             {PAYBACK_STATUS[record.status]}
@@ -176,14 +200,14 @@ export const Payback = observer(() => {
               </Button>
             </Col>
             <Col span={12} style={{ textAlign: "right" }}>
-                            <Search
+              {/* <Search
                 placeholder="input search text"
                 style={{
                   width: store.ui.mediaQuery.isMobile ? 160 : 200,
                   marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
                   marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
                 }}
-              />
+              /> */}
             </Col>
           </Row>
           {store.ui.mediaQuery.isDesktop && (
@@ -198,7 +222,7 @@ export const Payback = observer(() => {
                 total: store.payback.totalDataConfirmation,
                 current: store.payback.pageSizeConfirmation + 1,
                 showSizeChanger: true,
-                      simple: false
+                simple: false,
               }}
               onChange={async (page) => {
                 let pageNumber = page.current;

src/pages/Payback/PaybackCreated.js

@@ -101,14 +101,14 @@ export const PaybackCreated = observer(() => {
               </Button>
             </Col>
             <Col span={12} style={{textAlign: "right"}}>
-              <Search
+              {/* <Search
                 placeholder="input search text"
                 style={{
                   width: store.ui.mediaQuery.isMobile ? 160 : 200,
                   marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
                   marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
                 }}
-              />
+              /> */}
               {store.authentication.userData.role !== "Admin" && (
                 <Button
                   onClick={() => {

src/pages/Product/Category.js

@@ -57,14 +57,14 @@ export const Category = observer(() => {
             </Button>
           </Col>
           <Col span={12} style={{ textAlign: "right" }}>
-            <Search
+            {/* <Search
               placeholder="input search text"
               style={{
                 width: store.ui.mediaQuery.isMobile ? 160 : 200,
                 marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
                 marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
               }}
-            />
+            /> */}
             <Button
               onClick={() => (store.category.visibleModalCategory = true)}
             >

src/pages/Product/Product.js

@@ -57,6 +57,8 @@ export const Product = observer(() => {
     <div className={["ppob-container"].join(" ")}>
       <BreadcumbComponent data={routeData} />
       <Card>
+        {store.authentication.userData.role !== "Admin" && (
+          <div>
             <Row style={{ marginBottom: 20 }}>
               <Col span={12}>
                 <Button
@@ -76,15 +78,15 @@ export const Product = observer(() => {
                     textAlign: "right",
                   }}
                 >
-              <Search
+                  {/* <Search
                     placeholder="input search text"
                     style={{
                       width: store.ui.mediaQuery.isMobile ? 160 : 200,
                       marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
                       marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
                     }}
-              />
-              {store.authentication.userData.role === "Admin" && (
+                  /> */}
+
                   <div
                     style={{
                       display: store.ui.mediaQuery.isMobile ? "" : "flex",
@@ -104,16 +106,17 @@ export const Product = observer(() => {
                         Upload Product
                       </Button>
                     </Upload>
-                  <Button
+                    {/* <Button
                       onClick={() => (store.product.visibleModalProduct = true)}
                     >
                       <PlusSquareOutlined /> New
-                  </Button>
+                    </Button> */}
                   </div>
-              )}
                 </div>
               </Col>
             </Row>
+          </div>
+        )}
         <ProductComponent />
       </Card>
     </div>

src/pages/Product/Subcategory.js

@@ -61,14 +61,14 @@ export const Subcategory = observer(() => {
             </Button> */}
           </Col>
           <Col span={12} style={{textAlign: "right"}}>
-            <Search
+            {/* <Search
               placeholder="input search text"
               style={{
                 width: store.ui.mediaQuery.isMobile ? 160 : 200,
                 marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
                 marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
               }}
-            />
+            /> */}
             <Button
               onClick={() => (store.subcategory.visibleModalSubcategory = true)}
             >

src/pages/Profile/Profile.js

@@ -60,7 +60,7 @@ export const Profile = observer(() => {
       key: 'created_at',
       render: (text, record) => {
         return (
-          <Text>{format(parseISO(record.created_at), 'dd MMMM yyyy HH:mm')}</Text>
+          <Text>{format(parseISO(record.created_at), 'mm:HH dd MM YYYY')}</Text>
         )
       },
     },

src/pages/Transaction/Product.js

@@ -117,7 +117,7 @@ export const Product = observer(() => {
                           },
                         });
                       }}
-                      style={{cursor: "pointer"}}
+                      style={{cursor: "pointer",marginLeft:10}}
                   >
                     <span style={{color: "black"}}>{item.product_name}</span>
                     <br/>
@@ -132,13 +132,13 @@ export const Product = observer(() => {
             ))}
           </Row>
       )}
-      {store.transaction.data.length !== 0 && (
+      {/* {store.transaction.data.length !== 0 && (
           <Col style={{textAlign: "right", marginTop: "1em"}}>
             <Button style={{backgroundColor: "#2D9CDB", color: "white"}}>
               Beli Sekarang
             </Button>
           </Col>
-      )}
+      )} */}
     </div>
   );
 });

src/routes/app.js

@@ -29,7 +29,7 @@ export const LINKS = {
     PAYBACK: "/app/payback",
     PAYBACK_CREATED: "/app/payback-created",
     SUBCATEGORY: "/app/subcategory",
-    USER_DETAIL: "/app/user-detail",
+    USER_DETAIL: "/app/user-detail/:id",
     PRODUCT_DETAIL: "/app/product-detail",
 };
 

src/store/membership.js

@@ -28,6 +28,16 @@ export class Membership {
             console.error(e);
         }
     }
+    async getDetail(id) {
+        try {
+            const response = await http.get(`/users/`+id);
+            console.log(response,'Data Detail')
+            this.data = response.body.data
+            this.total_data = response?.body?.count ?? 0
+        } catch (e) {
+            console.error(e);
+        }
+    }
     
     async getDataBySuperior() {
         try {

src/store/transaction.js

@@ -84,7 +84,7 @@ export class Transaction {
         try {
             console.log("Top up")
             const response = await http.get(`/transaction/history-deposit?page=${this.pageHistoryTopUp}&user-destination=${id}`);
-            
+            console.log(response,"data")
             this.dataHistoryTopUp = response.body.data ?? []
             this.total_dataHistoryTopUp = response?.body?.count ?? 0
         } catch (e) {