Config Page

src/pages/Product/Category.js

@@ -50,13 +50,13 @@ export const Category = observer(() => {
       <BreadcumbComponent data={routeData} />
       <Card>
         <Row style={{ marginBottom: 20 }}>
-          <Col span={12}>
+          {/* <Col span={12}>
             <Button>
               <FilterOutlined />
               Filter
             </Button>
-          </Col>
-          <Col span={12} style={{ textAlign: "right" }}>
+          </Col> */}
+          <Col span={24} style={{ textAlign: "right" }}>
             {/* <Search
               placeholder="input search text"
               style={{

src/pages/Product/ProductDetail.js

@@ -1,17 +1,19 @@
-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 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";
 
-const {Title, Text} = Typography;
+const { Title, Text } = Typography;
 
 export const ProductDetail = observer(() => {
   const store = useStore();
+  const { id } = useParams();
   const modalLoader = useContext(ModalLoaderContext);
 
   const routeData = [
@@ -21,11 +23,11 @@ export const ProductDetail = observer(() => {
     },
     {
       route: LINKS.PRODUCT,
-      name: <span style={{fontWeight: "bold"}}>Product</span>,
+      name: <span style={{ fontWeight: "bold" }}>Product</span>,
     },
     {
       route: LINKS.PRODUCT_DETAIL,
-      name: <span style={{fontWeight: 'bold'}}>Product Detail</span>,
+      name: <span style={{ fontWeight: "bold" }}>Product Detail</span>,
     },
   ];
 
@@ -33,89 +35,121 @@ export const ProductDetail = observer(() => {
     (async () => {
       modalLoader.setLoading(true);
       await Promise.allSettled([
-        store.authentication.getProfile(),
-        store.transaction.getDataHistoryTransaction(),
+        //store.authentication.getProfile(),
+        store.product.getDetail(id),
+        store.product.getDetailProduct(id),
       ]);
       modalLoader.setLoading(false);
-    })()
+    })();
   }, []);
 
+  //console.log(id)
   const columns = [
     {
-      title: 'Markup Price',
-      dataIndex: 'mark_up_price',
-      key: 'mark_up_price',
-      width: '20%',
+      title: "Markup Price",
+      dataIndex: "mark_up_price",
+      key: "mark_up_price",
+      width: "20%",
+      render: (text) =>
+        new Intl.NumberFormat("id-ID", {
+          style: "currency",
+          currency: "IDR",
+        }).format(text),
     },
     {
-      title: 'Name',
-      dataIndex: 'name',
-      key: 'name',
-      width: '50%',
+      title: "Price",
+      dataIndex: "price",
+      key: "price",
+      width: "50%",
+      render: (text) =>
+        new Intl.NumberFormat("id-ID", {
+          style: "currency",
+          currency: "IDR",
+        }).format(text),
     },
     {
-      title: 'Transaction Date',
-      dataIndex: 'created_at',
-      key: 'created_at',
+      title: "Transaction Date",
+      dataIndex: "startDate",
+      key: "startDate",
       render: (text, record) => {
         return (
-          <Text>{format(parseISO(record.created_at), 'dd MMMM yyyy HH:mm')}</Text>
-        )
+          <Text>{format(parseISO(record.startDate), "dd MMMM yyyy")}</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;
+  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>Product Detail</Title>
-        <Row style={{marginBottom: 20}}>
+        <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>
+                <Text>{store.product.dataDetailProduct.code}</Text>
               </Col>
               <Col span={12}>
-                <Text strong>Produk</Text>
+                <Text strong>Nama Produk</Text>
               </Col>
-              <Col span={12}>
-                <Text>{store.authentication.profileData?.userDetail?.phone_number}</Text>
+              <Col span={10}>
+                <Text>{store.product.dataDetailProduct.name}</Text>
               </Col>
               <Col span={12}>
                 <Text strong>Harga Beli</Text>
               </Col>
               <Col span={12}>
-                <Text>{store.authentication.profileData?.username}</Text>
+                <Text>
+                  {new Intl.NumberFormat("id-ID", {
+                    style: "currency",
+                    currency: "IDR",
+                  }).format(store.product.dataDetailProduct.basePrice)}
+                </Text>
               </Col>
               <Col span={12}>
                 <Text strong>Harga Jual</Text>
               </Col>
               <Col span={12}>
-                <Text>{store.authentication.profileData.roles?.name}</Text>
+                <Text>
+                  {new Intl.NumberFormat("id-ID", {
+                    style: "currency",
+                    currency: "IDR",
+                  }).format(store.product.dataDetailProduct.price)}
+                </Text>
+              </Col>
+              <Col span={12}>
+                <Text strong>Supplier</Text>
+              </Col>
+              <Col span={12}>
+                <Text>{store.product.dataDetailProduct.supplier.name}</Text>
               </Col>
               <Col span={12}>
                 <Text strong>Status</Text>
               </Col>
               <Col span={12}>
-                <Text>{store.authentication.profileData.superior?.username}</Text>
+                <Text>{store.product.dataDetailProduct.status}</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>
@@ -124,29 +158,31 @@ export const ProductDetail = observer(() => {
                 <Text style={styleSaldoContent}>{store.authentication.profileData?.wallet}</Text>
               </Col>
             </Row>
-          </Col>
+          </Col> */}
         </Row>
         <Row>
           <Col span={24}>
             <div>
-              <Title strong level={3}>History User Transaction</Title>
+              <Title strong level={3}>
+                Product Price History
+              </Title>
 
-              <Button style={{marginBottom: '1rem'}} onClick={() => {
+              {/* <Button style={{marginBottom: '1rem'}} onClick={() => {
                 console.log('clicked filter')
               }}>
                 <FilterOutlined/>
                 Filter
-              </Button>
+              </Button> */}
               <Table
                 columns={columns}
-                dataSource={store.transaction.dataHistoryTransaction}
+                dataSource={store.product.dataDetail}
                 bordered
               />
             </div>
           </Col>
         </Row>
-        <div/>
+        <div />
       </Card>
     </div>
-  )
+  );
 });

src/pages/Product/Subcategory.js

@@ -54,13 +54,13 @@ export const Subcategory = observer(() => {
       <BreadcumbComponent data={routeData}/>
       <Card>
         <Row style={{marginBottom: 20}}>
-          <Col span={12}>
-            {/* <Button>
+          {/* <Col span={12}>
+            <Button>
               <FilterOutlined />
               Filter
-            </Button> */}
-          </Col>
-          <Col span={12} style={{textAlign: "right"}}>
+            </Button>
+          </Col> */}
+          <Col span={24} style={{textAlign: "right"}}>
             {/* <Search
               placeholder="input search text"
               style={{