Config Menu

src/pages/Membership/DetailUser.js

@@ -1,20 +1,67 @@
-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";
-import {useParams} from "react-router-dom";
+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, DownloadOutlined } from "@ant-design/icons";
+import { format, parseISO } from "date-fns";
+import { ModalLoaderContext } from "../../utils/modal";
+import { useParams } from "react-router-dom";
 
-const {Title, Text} = Typography;
+const { Title, Text } = Typography;
 
 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,129 +70,96 @@ 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}/>
+      <BreadcumbComponent data={routeData} />
       <Card>
         <Title strong>Detail User</Title>
-        <Row style={{marginBottom: 20}}>
+        <Row style={{ marginBottom: 20 }}>
           <Col lg={12} xs={24}>
             <Row>
               <Col span={12}>
                 <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')
-              }}>
-                <FilterOutlined/>
+              <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>
           </Col>
         </Row>
-        <div/>
+        <div />
       </Card>
     </div>
-  )
+  );
 });