Mobile responsive

src/component/SupplierComponent.js

@@ -1,5 +1,16 @@
 import React, { useContext, useState } from "react";
-import {Button, Form, Input, message, Modal, Space, Table, Tag} from "antd";
+import {
+  Button,
+  Form,
+  Input,
+  message,
+  Modal,
+  Space,
+  Table,
+  Tag,
+  List,
+  Divider,
+} from "antd";
 import { observer } from "mobx-react-lite";
 import { ExclamationCircleOutlined } from "@ant-design/icons";
 import { useHistory } from "react-router-dom";
@@ -73,7 +84,7 @@ export const SupplierComponent = observer((props) => {
         new Intl.NumberFormat("id-ID", {
           style: "currency",
           currency: "IDR",
-          }).format(text)
+        }).format(text),
     },
     {
       title: "Saldo di System",
@@ -84,7 +95,7 @@ export const SupplierComponent = observer((props) => {
         new Intl.NumberFormat("id-ID", {
           style: "currency",
           currency: "IDR",
-          }).format(text)
+        }).format(text),
     },
     {
       title: "Status",
@@ -190,6 +201,7 @@ export const SupplierComponent = observer((props) => {
 
   return (
     <div>
+      {store.ui.mediaQuery.isDesktop && (
         <Table
           style={{ textAlign: "center" }}
           columns={columns}
@@ -211,6 +223,99 @@ export const SupplierComponent = observer((props) => {
             modalLoader.setLoading(false);
           }}
         />
+      )}
+      {store.ui.mediaQuery.isMobile && (
+        <List
+          itemLayout="horizontal"
+          position={"top"}
+          pagination={{
+            onChange: async (page) => {
+              store.supplier.pageSize = page.pageSize;
+              store.supplier.page = page.current;
+              modalLoader.setLoading(true);
+              await store.supplier.getData();
+              modalLoader.setLoading(false);
+            },
+            pageSize: store.supplier.pageSize,
+            total: store.supplier.total_data,
+            current: store.supplier.page,
+            style: { marginBottom: "1rem", marginRight: "1rem" },
+          }}
+          dataSource={store.supplier.data}
+          style={{ padding: 0 }}
+          renderItem={(item) => {
+            return (
+              <div>
+                <List.Item
+                  key={item.id}
+                  style={{
+                    backgroundColor: "#ffffff",
+                    paddingTop: 0,
+                    paddingBottom: 0,
+                    display: "flex",
+                    flexDirection: "row",
+                    alignItems: "center",
+                    justifyContent: "center",
+                  }}
+                >
+                  <List.Item.Meta
+                    className={["cariparkir-container"].join(" ")}
+                    title={item.code}
+                    description={
+                      <div style={{}}>
+                        <p>
+                          <small>Name : {item.name}</small> <br />
+                          <small>Saldo Supplier : {item.coa.amount}</small>
+                          <br />
+                          <small>
+                            Saldo System : {item.coa_undistribute.amount}
+                          </small>
+                          <br />
+                          <Button
+                            style={{
+                              marginRight: 10,
+                            }}
+                            type={item?.status === true ? "danger" : "primary"}
+                            onClick={() => changeStatus(item?.id, item?.status)}
+                          >
+                            {item?.status === true ? "INACTIVE" : "ACTIVE"}
+                          </Button>
+                          <Button
+                            onClick={() => handleTopup(item)}
+                            style={{
+                              marginRight: 10,
+                            }}
+                          >
+                            Top Up Saldo
+                          </Button>
+                          <Button
+                            onClick={() => handleEditButton(item)}
+                            style={{
+                              marginBottom: 5,
+                            }}
+                          >
+                            Edit
+                          </Button>
+                          <Tag
+                            color={
+                              item?.status === true ? "processing" : "#E3E8EE"
+                            }
+                            style={{ color: "#4F566B" }}
+                          >
+                            {item?.status === true ? " ACTIVE" : "INACTIVE"}
+                          </Tag>
+                        </p>
+                        <p></p>
+                      </div>
+                    }
+                  />
+                </List.Item>
+                <Divider plain style={{ margin: 0 }} />
+              </div>
+            );
+          }}
+        />
+      )}
       <Modal
         visible={store.supplier.visibleModalSupplier}
         title={idData ? "Edit Supplier" : "Create a new Supplier"}

src/pages/Config/Supplier.js

@@ -75,7 +75,7 @@ export const Supplier = observer(() => {
               placeholder="input search text"
               style={{
                 width: store.ui.mediaQuery.isMobile ? 160 : 200,
-                marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
+                marginRight: store.ui.mediaQuery.isMobile ? 10 : 10,
                 marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
               }}
               onSearch={(value) => console.log(value)}