Tambah Fitur

src/pages/Membership/DetailUser.js

@@ -13,9 +13,11 @@ import {
   Tag,
   Divider,
   Image,
-  Avatar,
+  Modal,
+  Form,
+  DatePicker,
 } from "antd";
-import { UserOutlined } from "@ant-design/icons";
+import { UserOutlined, FilterOutlined } from "@ant-design/icons";
 import { BreadcumbComponent } from "../../component/BreadcumbComponent";
 import { LINKS } from "../../routes/app";
 import { useStore } from "../../utils/useStore";
@@ -25,16 +27,21 @@ import { ModalLoaderContext } from "../../utils/modal";
 import { useParams } from "react-router-dom";
 import { appConfig } from "../../config/app";
 import { MembershipModal } from "./MembershipModal";
+import moment from "moment";
 
 const { Title, Text } = Typography;
 const { TabPane } = Tabs;
 export const DetailUser = observer(() => {
   const store = useStore();
+  const [form] = Form.useForm();
   const modalLoader = useContext(ModalLoaderContext);
   const { id } = useParams();
   const [visibleModal, setVisibleModal] = useState(false);
   const [initialData, setInitialData] = useState({});
   const [confirmLoading, setConfirmLoading] = useState(false);
+  const [filterStart, setFilterStart] = useState([]);
+  const [filterEnd, setFilterEnd] = useState([]);
+  const [visibleHis, setVisibleHis] = useState(true);
 
   useEffect(() => {
     (async () => {
@@ -178,11 +185,15 @@ export const DetailUser = observer(() => {
   ];
 
   const column = [
+    {
+      title: "Nama Produk",
+      dataIndex: "name",
+      key: "name",
+    },
     {
       title: "Price",
       dataIndex: "price",
       key: "price",
-
       render: (text) =>
         new Intl.NumberFormat("id-ID", {
           style: "currency",
@@ -242,8 +253,13 @@ export const DetailUser = observer(() => {
       title: "Tanggal Transaksi",
       dataIndex: "created_at",
       key: "created_at",
+      width: "15%",
       render: (text, record) => {
-        return <Text>{format(parseISO(record.created_at), "dd-MM-yyyy")}</Text>;
+        return (
+          <Text>
+            {format(parseISO(record.created_at), "dd-MM-yyyy HH:mm:ss")}
+          </Text>
+        );
       },
     },
     {
@@ -298,7 +314,79 @@ export const DetailUser = observer(() => {
     store.authentication.dataProfit.userDetail?.image_identity,
     "detail"
   );
-  console.log(store.authentication.listImage, "detail gambar");
+
+  const handleRemoveFilter = async () => {
+    store.transaction.filterStart = null;
+    store.transaction.filterEnd = null;
+    form.resetFields();
+    setFilterStart([]);
+    setFilterEnd([]);
+    //await store.transaction.getDetailHistoryTransaction();
+    await store.transaction.getDetailHistoryTransaction(
+      store.authentication.dataProfit.id
+    );
+    store.transaction.visibleModalFilterTransaction = false;
+  };
+
+  const handleCancelFilter = async () => {
+    store.transaction.filterStart = null;
+    //form.resetFields();
+    store.transaction.filterEnd = null;
+    store.transaction.visibleModalFilterTransaction = false;
+    //await store.transaction.getDetailHistoryTransaction();
+    await store.transaction.getDetailHistoryTransaction(
+      store.authentication.dataProfit.id
+    );
+  };
+
+  const handleSubmitFilter = async () => {
+    const data = form.getFieldsValue();
+    console.log(data.start_date);
+    console.log(data.end_date);
+
+    const awal = (store.transaction.filterStart = moment(
+      data.start_date
+    ).format("YYYY-MM-DD HH:mm:ss"));
+    const akhir = (store.transaction.filterEnd = moment(data.end_date).format(
+      "YYYY-MM-DD HH:mm:ss"
+    ));
+    console.log(awal);
+    console.log(akhir);
+    console.log(store.authentication.dataProfit.id, "id auth");
+    console.log(store.membership.dataDetail.id, "id member");
+    modalLoader.setLoading(true);
+    await store.transaction.getDetailHistoryTransaction(
+      store.authentication.dataProfit.id
+    );
+    modalLoader.setLoading(false);
+    //form.resetFields();
+    store.transaction.visibleModalFilterTransaction = false;
+  };
+  const footerLayoutFilter = [
+    <Button
+      key={"remove"}
+      onClick={handleRemoveFilter}
+      style={{
+        backgroundColor: "#e74e5e",
+        color: "#fff",
+      }}
+    >
+      Remove Filter
+    </Button>,
+    <Button key={"cancel"} onClick={handleCancelFilter}>
+      Cancel
+    </Button>,
+    <Button
+      key={"submit"}
+      onClick={handleSubmitFilter}
+      style={{
+        backgroundColor: "#4e79e7",
+        color: "#fff",
+      }}
+    >
+      Apply
+    </Button>,
+  ];
   return (
     <div className={["ppob-container"].join(" ")}>
       <BreadcumbComponent
@@ -646,30 +734,42 @@ export const DetailUser = observer(() => {
               </TabPane>
               <TabPane tab="History Transaction" key="2">
                 {store.ui.mediaQuery.isDesktop && (
-                  <Table
+                  <div>
-                    key="1"
+                    <Button
-                    hasEmpty
+                      style={{ marginBottom: "1rem", marginLeft: 5 }}
-                    columns={column}
+                      onClick={() => {
-                    dataSource={
+                        store.transaction.visibleModalFilterTransaction = true;
-                      store.transaction.dataDetailHistoryTransactionDetailUser
+                      }}
-                    }
+                    >
-                    bordered
+                      <FilterOutlined />
-                    pagination={{
+                      Filter
-                      pageSize: store.transaction.pageSize,
+                    </Button>
-                      total: store.transaction.total_data,
+                    <Table
-                      current: store.transaction.page + 1,
+                      key="1"
-                      showSizeChanger: true,
+                      hasEmpty
-                      simple: false,
+                      scroll={{ x: 1300 }}
-                    }}
+                      columns={column}
-                    onChange={async (page) => {
+                      dataSource={
-                      let pageNumber = page.current;
+                        store.transaction.dataDetailHistoryTransactionDetailUser
-                      store.transaction.pageSize = page.pageSize;
+                      }
-                      store.transaction.page = pageNumber - 1;
+                      bordered
-                      modalLoader.setLoading(true);
+                      pagination={{
-                      await getData();
+                        pageSize: store.transaction.pageSize,
-                      modalLoader.setLoading(false);
+                        total: store.transaction.total_data,
-                    }}
+                        current: store.transaction.page + 1,
-                  />
+                        showSizeChanger: true,
+                        simple: false,
+                      }}
+                      onChange={async (page) => {
+                        let pageNumber = page.current;
+                        store.transaction.pageSize = page.pageSize;
+                        store.transaction.page = pageNumber - 1;
+                        modalLoader.setLoading(true);
+                        await getData();
+                        modalLoader.setLoading(false);
+                      }}
+                    />
+                  </div>
                 )}
 
                 {store.ui.mediaQuery.isMobile && (
@@ -790,6 +890,39 @@ export const DetailUser = observer(() => {
           setVisibleModal(false);
         }}
       />
+      <Modal
+        visible={store.transaction.visibleModalFilterTransaction}
+        title={"Filter"}
+        footer={footerLayoutFilter}
+        onCancel={async () => {
+          //form.resetFields();
+          store.transaction.filterStart = null;
+          store.transaction.filterEnd = null;
+          store.transaction.visibleModalFilterTransaction = false;
+          await store.transaction.getDetailHistoryTransaction();
+        }}
+      >
+        <Row>
+          <Col span={24}>
+            <Form layout="vertical" name="filter" form={form}>
+              <Form.Item
+                name="start_date"
+                label="Dari"
+                rules={[{ required: true, message: "Please input Date!" }]}
+              >
+                <DatePicker style={{ width: "100%" }} />
+              </Form.Item>
+              <Form.Item
+                name="end_date"
+                label="Sampai"
+                rules={[{ required: true, message: "Please input Date!" }]}
+              >
+                <DatePicker style={{ width: "100%" }} />
+              </Form.Item>
+            </Form>
+          </Col>
+        </Row>
+      </Modal>
     </div>
   );
 });

src/pages/Membership/Membership.js

@@ -195,6 +195,12 @@ export const Membership = observer(() => {
       key: "name",
       render: (text, record) => record?.name ?? record?.username,
     },
+    {
+      title: "Username",
+      dataIndex: "username",
+      key: "username",
+      render: (text, record) => record?.name ?? record?.username,
+    },
     {
       title: "Role",
       dataIndex: ["roles", "name"],

src/pages/Profile/Profile.js

@@ -128,6 +128,11 @@ export const Profile = observer(() => {
     </Button>,
   ];
   const columns = [
+    {
+      title: "Name Produk",
+      dataIndex: "name",
+      key: "name",
+    },
     {
       title: "Price",
       dataIndex: "price",
@@ -142,6 +147,7 @@ export const Profile = observer(() => {
       title: "Pembeli",
       dataIndex: "buyer",
       key: "buyer",
+      width: "10%",
     },
     {
       title: "Tujuan",
@@ -196,9 +202,13 @@ export const Profile = observer(() => {
       title: "Tanggal Transaksi",
       dataIndex: "created_at",
       key: "created_at",
-
+      width: "15%",
       render: (text, record) => {
-        return <Text>{format(parseISO(record.created_at), "dd-MM-yyyy")}</Text>;
+        return (
+          <Text>
+            {format(parseISO(record.created_at), "dd-MM-yyyy HH:mm:ss")}
+          </Text>
+        );
       },
     },
   ];

src/store/transaction.js

@@ -143,7 +143,7 @@ export class Transaction {
 
   async getDetailHistoryTransaction(id) {
     try {
-      const response = await http.get(`/transaction/history-user/${id}?page=${this.page}&pageSize=${this.pageSize}&start=${this.filterStartDetailUser}&end=${this.filterEndDetailUser}`);
+      const response = await http.get(`/transaction/history-user/${id}?page=${this.page}&pageSize=${this.pageSize}&start=${this.filterStart}&end=${this.filterEnd}`);
       console.log(response,'Data Trans');
       this.dataDetailHistoryTransactionDetailUser = response.body.data ?? [];
       this.total_data = response?.body?.count ?? 0;