Merge branch 'develop' into 'devops-staging'

Develop

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

src/component/PartnerComponent.js

@@ -391,7 +391,7 @@ export const PartnerComponent = observer((props) => {
           )}
           {((idData && isChangePassword) || !idData) && (
             <Form.Item
-              name="password_account"
+              name="password"
               label="Password Account"
               rules={[
                 idData
@@ -418,11 +418,11 @@ export const PartnerComponent = observer((props) => {
                     },
                 {
                   pattern: /^(?:\d*)$/,
-                  message: "Value should contain just number",
+                  message: "Phone number should contain just number",
                 },
                 {
-                  pattern: /^[\d]{0,12}$/,
+                  pattern: /^[\d]{2,12}$/,
-                  message: "Value should be less than 12 character",
+                  message: "Phone number should be less than 12 character",
                 },
               ]}
             >

src/component/ProductComponent.js

@@ -129,11 +129,11 @@ export const ProductComponent = observer((props) => {
     },
   ];
   if (store.authentication.userData.role !== "Admin") columns.pop();
-  if (store.authentication.userData.role !== "Admin") delete columns[2];
+  if (store.authentication.userData.role === "Admin Partner") delete columns[2];
   if (store.authentication.userData.role === "Admin Partner") delete columns[3];
+  if (store.authentication.userData.role != "Admin Partner") delete columns[4];
   if (store.authentication.userData.role !== "Admin") delete columns[6];
   if (store.authentication.userData.role === "Admin Partner") delete columns[7];
-  if (store.authentication.userData.role === "Admin") delete columns[4];
   if (store.authentication.userData.role !== "Admin") delete columns[8];
   if (store.authentication.userData.role === "Admin Partner") delete columns[5];
 

src/pages/Home/Home.js

@@ -1,14 +1,96 @@
-import React from "react";
+import React, { useContext, useEffect } from "react";
-import { Button, PageHeader, Card, Row, Col } from "antd";
+import { Button, PageHeader, Card, Row, Col, message, Table } from "antd";
-import { store } from "../../utils/useStore";
+import { useStore } from "../../utils/useStore";
 import { observer } from "mobx-react-lite";
 import {
   DropboxOutlined,
   DollarCircleOutlined,
   BarChartOutlined,
 } from "@ant-design/icons";
+import { ModalLoaderContext } from "../../utils/modal";
 
 export const Home = observer(() => {
+  const modalLoader = useContext(ModalLoaderContext);
+  const store = useStore();
+  useEffect(() => {
+    const init = async () => {
+      try {
+        modalLoader.setLoading(true);
+        const isAdmin = store.authentication.userData.role === "Admin";
+        await getData();
+        await store.membership.getDataBySuperior();
+        await store.partner.getData();
+        await store.transaction.getDataTransaction();
+        await store.role.getData(isAdmin);
+        modalLoader.setLoading(false);
+      } catch (e) {
+        console.error(e);
+        modalLoader.setLoading(false);
+        if (e.response?.body?.message) {
+          message.error(e.response.body.message);
+          return;
+        }
+        message.error(e.message);
+      }
+    };
+
+    init();
+  }, []);
+  const getData = async () => {
+    store.authentication.userData.role === "Admin"
+      ? await store.membership.getData()
+      : await store.membership.getDataBySuperior();
+  };
+  const columns = [
+    {
+      title: "Name",
+      dataIndex: "name",
+      key: "name",
+      render: (text, record) => record?.name ?? record?.username,
+    },
+    {
+      title: "Role",
+      dataIndex: "roleName",
+      key: "role",
+    },
+    {
+      title: "Saldo",
+      dataIndex: ["coa", "amount"],
+      key: ["coa", "amount"],
+      width: "20%",
+      render: (text) =>
+        new Intl.NumberFormat("id-ID", {
+          style: "currency",
+          currency: "IDR",
+        }).format(text),
+    },
+    // {
+    //   title: "Action",
+    //   key: "action",
+    //   render: (text, record) => (
+    //     <Space size="middle">
+    //       <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);
+    //           history.push(LINKS.USER_DETAIL.replace(":id", record.id));
+    //           console.log(record.id);
+    //         }}
+    //       >
+    //         Detail
+    //       </Button>
+    //     </Space>
+    //   ),
+    // },
+  ];
   return (
     <div>
       {store.ui.mediaQuery.isDesktop && (
@@ -32,7 +114,9 @@ export const Home = observer(() => {
             <Row>
               <BarChartOutlined style={{ fontSize: 30 }} />
               <PageHeader title={<span>Total Transaksi</span>}>
-                <span>Total Transaksi : 25 Transaksi</span>
+                <p>
+                  <h4>{store.transaction.dataTransaction} Transaksi</h4>
+                </p>
               </PageHeader>
             </Row>
           </Card>
@@ -84,6 +168,78 @@ export const Home = observer(() => {
           </Card>
         </Row>
       )}
+      {store.authentication.userData.role === "Admin" &&
+        store.ui.mediaQuery.isDesktop && (
+          <Row style={{ marginLeft: 50, marginTop: 10 }}>
+            <Card
+              className={"shadow"}
+              title="Card title"
+              style={{
+                marginBottom: 30,
+                marginRight: 20,
+                borderColor: "salmon",
+                width: "47%",
+              }}
+            >
+              <Table
+                key="1"
+                hasEmpty
+                size="large"
+                columns={columns}
+                dataSource={store.membership.data}
+                bordered
+                pagination={{
+                  pageSize: store.membership.pageSize,
+                  total: store.membership.totalData,
+                  current: store.membership.page + 1,
+                  showSizeChanger: true,
+                  simple: false,
+                }}
+                onChange={async (page) => {
+                  let pageNumber = page.current;
+                  store.membership.pageSize = page.pageSize;
+                  store.membership.page = pageNumber - 1;
+                  modalLoader.setLoading(true);
+                  await getData();
+                  modalLoader.setLoading(false);
+                }}
+              />
+            </Card>
+            <Card
+              className={"shadow"}
+              title="Card title"
+              style={{
+                marginBottom: 30,
+                borderColor: "salmon",
+                width: "47%",
+              }}
+            >
+              <Table
+                key="1"
+                hasEmpty
+                size="large"
+                columns={columns}
+                dataSource={store.membership.data}
+                bordered
+                pagination={{
+                  pageSize: store.membership.pageSize,
+                  total: store.membership.totalData,
+                  current: store.membership.page + 1,
+                  showSizeChanger: true,
+                  simple: false,
+                }}
+                onChange={async (page) => {
+                  let pageNumber = page.current;
+                  store.membership.pageSize = page.pageSize;
+                  store.membership.page = pageNumber - 1;
+                  modalLoader.setLoading(true);
+                  await getData();
+                  modalLoader.setLoading(false);
+                }}
+              />
+            </Card>
+          </Row>
+        )}
       {store.ui.mediaQuery.isMobile && (
         <div style={{ marginTop: 10 }}>
           <Card
@@ -100,7 +256,9 @@ export const Home = observer(() => {
             <Row>
               <BarChartOutlined style={{ fontSize: 30 }} />
               <PageHeader title={<span>Total Transaksi</span>}>
-                <span>Total Transaksi : 25 Transaksi</span>
+                <p>
+                  <h4>{store.transaction.dataTransaction} Transaksi</h4>
+                </p>
               </PageHeader>
             </Row>
           </Card>
@@ -152,6 +310,75 @@ export const Home = observer(() => {
           </Card>
         </div>
       )}
+      {store.authentication.userData.role === "Admin" &&
+        store.ui.mediaQuery.isMobile && (
+          <Row style={{ marginLeft: 20, marginRight: 20, marginTop: 10 }}>
+            <Card
+              className={"shadow"}
+              title="Card title"
+              style={{
+                marginBottom: 10,
+                borderColor: "salmon",
+              }}
+            >
+              <Table
+                key="1"
+                hasEmpty
+                size="small"
+                columns={columns}
+                dataSource={store.membership.data}
+                bordered
+                pagination={{
+                  pageSize: store.membership.pageSize,
+                  total: store.membership.totalData,
+                  current: store.membership.page + 1,
+                  showSizeChanger: true,
+                  simple: false,
+                }}
+                onChange={async (page) => {
+                  let pageNumber = page.current;
+                  store.membership.pageSize = page.pageSize;
+                  store.membership.page = pageNumber - 1;
+                  modalLoader.setLoading(true);
+                  await getData();
+                  modalLoader.setLoading(false);
+                }}
+              />
+            </Card>
+            <Card
+              className={"shadow"}
+              title="Card title"
+              style={{
+                marginBottom: 30,
+                borderColor: "salmon",
+              }}
+            >
+              <Table
+                key="1"
+                hasEmpty
+                size="small"
+                columns={columns}
+                dataSource={store.membership.data}
+                bordered
+                pagination={{
+                  pageSize: store.membership.pageSize,
+                  total: store.membership.totalData,
+                  current: store.membership.page + 1,
+                  showSizeChanger: true,
+                  simple: false,
+                }}
+                onChange={async (page) => {
+                  let pageNumber = page.current;
+                  store.membership.pageSize = page.pageSize;
+                  store.membership.page = pageNumber - 1;
+                  modalLoader.setLoading(true);
+                  await getData();
+                  modalLoader.setLoading(false);
+                }}
+              />
+            </Card>
+          </Row>
+        )}
     </div>
   );
 });

src/pages/Membership/Membership.js

@@ -529,7 +529,7 @@ export const Membership = observer(() => {
               value={filterMembership}
             >
               {store.membership.data.map((item) => (
-                <Option value={item.name} key={item.name}>
+                <Option value={item.id} key={item.id}>
                   {item.name}
                 </Option>
               ))}

src/pages/Membership/MembershipModal.js

@@ -98,12 +98,12 @@ export const MembershipModal = ({
               },
               {
                 pattern: /^(?:\d*)$/,
-                message: "Value should contain just number",
+                message: "Phone number should contain just number",
               },
               {
                 //pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/,
-                pattern: /^[\d]{0,12}$/,
+                pattern: /^[\d]{2,12}$/,
-                message: "Value should be less than 12 character",
+                message: "Phone number should be less than 12 character",
               },
             ]}
           >

src/pages/Profile/Profile.js

@@ -66,14 +66,6 @@ export const Profile = observer(() => {
   };
 
   const handleSubmitFilter = async () => {
-    // store.product.filterSupplier = filterSupplier;
-    // store.product.filterSubCategory = filterSubCategories;
-    // modalLoader.setLoading(true);
-    // await store.product.getData();
-    // modalLoader.setLoading(false);
-    // store.transaction.visibleModalFilterTransaction = false;
-
-    console.log(form.getFieldsValue(), "Tes");
     const data = form.getFieldsValue();
     store.transaction.filterStart = data.start_date;
     store.transaction.filterEnd = data.end_date;
@@ -83,16 +75,6 @@ export const Profile = observer(() => {
     store.transaction.visibleModalFilterTransaction = 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"}
@@ -120,10 +102,10 @@ export const Profile = observer(() => {
   ];
   const columns = [
     {
-      title: "Markup Price",
+      title: "Price",
-      dataIndex: "mark_up_price",
+      dataIndex: "price",
-      key: "mark_up_price",
+      key: "price",
-      width: "20%",
+
       render: (text) =>
         new Intl.NumberFormat("id-ID", {
           style: "currency",
@@ -131,19 +113,41 @@ export const Profile = observer(() => {
         }).format(text),
     },
     {
-      title: "Name",
+      title: "Pembeli",
-      dataIndex: "name",
+      dataIndex: "buyer",
-      key: "name",
+      key: "buyer",
-      width: "50%",
+    },
+    {
+      title: "Tujuan",
+      dataIndex: "transaction_destination",
+      key: "transaction_destination",
+    },
+    {
+      title: "Kode Transaksi",
+      dataIndex: "transaction_code",
+      key: "transaction_code",
+    },
+    {
+      title: "Status",
+      dataIndex: "status",
+      key: "status",
+    },
+    {
+      title: "No Seri",
+      dataIndex: "seri_number",
+      key: "seri_number",
+    },
+    {
+      title: "IDTrx Mitra",
+      dataIndex: "partner_transaction_code",
+      key: "partner_transaction_code",
     },
     {
       title: "Transaction Date",
       dataIndex: "created_at",
       key: "created_at",
       render: (text, record) => {
-        return (
+        return <Text>{format(parseISO(record.created_at), "dd-MM-yyyy")}</Text>;
-          <Text>{format(parseISO(record.created_at), "mm:HH dd-MM-yyyy")}</Text>
-        );
       },
     },
   ];
@@ -208,7 +212,7 @@ export const Profile = observer(() => {
               </Col>
             </Row>
           </Col>
-          <Col>
+          <Col span={store.ui.mediaQuery.isMobile ? 10 : 5}>
             <Row justify={"center"}>
               <Col lg={12} xs={12}>
                 <Title strong level={3} style={styleSaldoTitle}>
@@ -226,7 +230,9 @@ export const Profile = observer(() => {
               <Col></Col>
             </Row>
           </Col>
-          <Col>
+          {store.authentication.userData.role === "Admin" ||
+            (store.authentication.userData.role === "Supervisor" && (
+              <Col span={store.ui.mediaQuery.isMobile ? 8 : 5}>
                 <Row justify={"center"}>
                   <Col lg={12} xs={12}>
                     <Title strong level={3} style={styleSaldoTitle}>
@@ -238,18 +244,19 @@ export const Profile = observer(() => {
                       {new Intl.NumberFormat("id-ID", {
                         style: "currency",
                         currency: "IDR",
-                  }).format(store.authentication.profileData?.wallet || 0)}
+                      }).format(store.authentication.profileData?.profit || 0)}
                     </Text>
                   </Col>
                   <Col></Col>
                 </Row>
               </Col>
+            ))}
         </Row>
         <Row>
           <Col span={24}>
             <div>
               <Title strong level={3}>
-                History User Transaction
+                History Transaction
               </Title>
               <Button
                 style={{ marginBottom: "1rem" }}
@@ -292,11 +299,7 @@ export const Profile = observer(() => {
       >
         <Row>
           <Col span={24}>
-            <Form
+            <Form layout="vertical" name="filter" form={form}>
-              layout="vertical"
-              name="filter"
-              form={form}
-            >
               <Form.Item
                 name="start_date"
                 label="Dari"
@@ -309,66 +312,10 @@ export const Profile = observer(() => {
                 label="Sampai"
                 rules={[{ required: true, message: "Please input Date!" }]}
               >
-                <DatePicker
+                <DatePicker style={{ width: "100%" }} />
-                  style={{ width: "100%" }}
-                  // defaultValue={moment("YYYY-MM-DD")}
-                />
               </Form.Item>
             </Form>
-            {/* <Select
-              mode={"multiple"}
-              placeholder="Choose Supplier"
-              onChange={(val) => {
-                setFilterSupplier(val);
-              }}
-              style={{ marginBottom: "20px", width: "100%" }}
-              value={filterSupplier}
-            >
-              {store.supplier.data.map((item) => (
-                <Option value={item.id} key={item.id}>
-                  {item.name}
-                </Option>
-              ))}
-            </Select> */}
           </Col>
-          {/* <Col span={24}>
-            <Title level={5} type={"secondary"} strong>
-              Filter Categories
-            </Title>
-            <Select
-              mode={"multiple"}
-              placeholder="Choose Category"
-              onChange={async (val) => handleFilterCategory(val)}
-              style={{ marginBottom: "20px", width: "100%" }}
-              value={store.product.filterCategory || []}
-            >
-              {store.category.data.map((item) => (
-                <Option value={item.id} key={item.id}>
-                  {item.name}
-                </Option>
-              ))}
-            </Select>
-          </Col>
-          <Col span={24}>
-            <Title level={5} type={"secondary"} strong>
-              Filter Sub-Categories
-            </Title>
-            <Select
-              mode={"multiple"}
-              placeholder="Choose Sub-Category"
-              onChange={(val) => {
-                setFilterSubCategories(val);
-              }}
-              style={{ marginBottom: "20px", width: "100%" }}
-              value={filterSubCategories}
-            >
-              {store.product.dataSubCategories.map((item) => (
-                <Option value={item.id} key={item.id}>
-                  {item.name}
-                </Option>
-              ))}
-            </Select>
-          </Col> */}
         </Row>
       </Modal>
     </div>

src/pages/Transaction/Product.js

@@ -115,7 +115,7 @@ export const Product = observer(() => {
             <Col key={index} xs={24} md={16} lg={8}>
               <Card
                 onClick={() => {
-                  setVisibleModalBuy(true)
+                  setVisibleModalBuy(true);
                 }}
                 hoverable
                 style={{
@@ -123,7 +123,7 @@ export const Product = observer(() => {
                   marginLeft: 10,
                   borderColor: "salmon",
                   height: 100,
-                  marginBottom: 10
+                  marginBottom: 10,
                 }}
               >
                 <span style={{ color: "black" }}>{item.product_name}</span>
@@ -162,7 +162,20 @@ export const Product = observer(() => {
                   <Form.Item
                     name="destination"
                     label="Destination"
-                      rules={[{required: true, message: "Please input Destination Number!"}]}
+                    rules={[
+                      {
+                        required: true,
+                        message: "Please input Destination Number!",
+                      },
+                      {
+                        pattern: /^(?:\d*)$/,
+                        message: "Value should contain just number",
+                      },
+                      {
+                        pattern: /^[\d]{2,12}$/,
+                        message: "Value should be less than 12 character",
+                      },
+                    ]}
                   >
                     <Input />
                   </Form.Item>

src/store/authentication.js

@@ -2,6 +2,7 @@ import {makeAutoObservable, runInAction} from "mobx";
 import {TokenUtil} from "../utils/token";
 import {http} from "../utils/http";
 
+
 export class Authentication {
   isLoggedIn = false;
   isLoginLoading = false;
@@ -53,6 +54,7 @@ export class Authentication {
   async getProfile() {
     try {
       const response = await http.get('/auth/profile');
+      console.log(response)
       this.profileData = response.body;
     } catch (e) {
       console.error(e);

src/store/membership.js

@@ -21,7 +21,7 @@ export class Membership {
 
     async getData() {
         try {
-            const response = await http.get(`/users?page=${this.page}&pageSize=${this.pageSize}&superrior=${this.filterMembership}&type=${this.filterPartner}`);
+            const response = await http.get(`/users?page=${this.page}&pageSize=${this.pageSize}&superior=${this.filterMembership}&type=${this.filterPartner}`);
             // console.log(this.filterMembership)
             // console.log(this.filterPartner)
             // console.log(response)

src/store/transaction.js

@@ -30,6 +30,7 @@ export class Transaction {
   pageSizeHistoryTopUp = 10;
   dataHistoryTopUp = [];
   total_dataHistoryTopUp = 0;
+  dataTransaction=[]
 
   //filter
   visibleModalFilterTransaction = false;
@@ -52,6 +53,19 @@ export class Transaction {
     }
   }
 
+  async getDataTransaction() {
+    try {
+      const response = await http.get(
+        `/transaction/total-order`
+      );
+      //console.log(response)
+      this.dataTransaction = response.body.data ?? [];
+      this.total_data = response?.body?.count ?? 0;
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
   async getDataSubCategories() {
     try {
       const response = await http.get(