feat: update supplier status

src/component/SupplierComponent.js

@@ -51,6 +51,11 @@ export const SupplierComponent = observer((props) => {
     setIdData(data.id);
   };
 
+  const changeStatus = (id, isActive) => {
+    const status = isActive ? "inactive" : "active"
+    store.supplier.changeStatus(id, status)
+  }
+
   const columns = [
     {
       title: "Name",
@@ -69,7 +74,8 @@ export const SupplierComponent = observer((props) => {
       render: (text, record) => (
         <Tag
           color={record?.status === true ? "processing" : "#E3E8EE"}
-          style={{ color: "#4F566B" }}
+          style={{ color: "#4F566B", cursor: 'pointer' }}
+          onClick={() => changeStatus(record?.id, record?.status)}
         >
           {record?.status === true ? " ACTIVE" : "INACTIVE"}
         </Tag>

src/pages/Payback/Payback.js

@@ -32,24 +32,28 @@ export const Payback = observer(() => {
 
     const dummyData = [
         {
+            key: '1',
             id: 1,
             name: "John Doe",
             picture: "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
             amount: "Rp. 1.000.000",
         },
         {
+            key: '2',
             id: 1,
             name: "John Doe",
             picture: "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
             amount: "Rp. 1.000.000",
         },
         {
+            key: '3',
             id: 1,
             name: "John Doe",
             picture: "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
             amount: "Rp. 1.000.000",
         },
         {
+            key: '4',Z
             id: 1,
             name: "John Doe",
             picture: "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",

src/pages/Product/Product.js

@@ -32,6 +32,7 @@ export const Product = observer(() => {
     const handleChangeTabPane = async (key) => {
         store.product.filterCategory = key;
         console.log(key);
+        await store.product.getData()
     };
 
     const routeData = [

src/store/product.js

@@ -27,8 +27,14 @@ export class Product {
     async getData() {
         const response = await http.get(`/product/by-categories?categories=${this.filterCategory}&page=${this.page}&pageSize=${this.pageSize}`);
 
-        this.data = response.body.data ?? []
+        this.data = response.body.data.map((item, idx) => {
+            item.key = idx;
+            return item
+        }) ?? []
+        
         this.total_data = response.body.total_data ?? 0
+
+        console.log(response.body.data, this.filterCategory);
     }
 
     async getDataSubCategories() {

src/store/supplier.js

@@ -48,6 +48,12 @@ export class Supplier {
         await this.getData();
         return response;
     }
+
+    async changeStatus(id, status) {
+        const response = await http.get(`/users/supplier/${id}/${status}`);
+        await this.getData();
+        return response;
+    }
 }