Mobile responsive

src/component/SupplierComponent.js

@@ -1,12 +1,23 @@
-import React, {useContext, useState} from "react";
+import React, { useContext, useState } from "react";
-import {Button, Form, Input, message, Modal, Space, Table, Tag} from "antd";
+import {
-import {observer} from "mobx-react-lite";
+  Button,
-import {ExclamationCircleOutlined} from "@ant-design/icons";
+  Form,
-import {useHistory} from "react-router-dom";
+  Input,
-import {useStore} from "../utils/useStore";
+  message,
-import {LINKS} from "../routes/app";
+  Modal,
-import {TopupsaldoModal} from "./TopupsaldoModal";
+  Space,
-import {ModalLoaderContext} from "../utils/modal";
+  Table,
+  Tag,
+  List,
+  Divider,
+} from "antd";
+import { observer } from "mobx-react-lite";
+import { ExclamationCircleOutlined } from "@ant-design/icons";
+import { useHistory } from "react-router-dom";
+import { useStore } from "../utils/useStore";
+import { LINKS } from "../routes/app";
+import { TopupsaldoModal } from "./TopupsaldoModal";
+import { ModalLoaderContext } from "../utils/modal";
 
 export const SupplierComponent = observer((props) => {
   const store = useStore();
@@ -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",
@@ -94,7 +105,7 @@ export const SupplierComponent = observer((props) => {
       render: (text, record) => (
         <Tag
           color={record?.status === true ? "processing" : "#E3E8EE"}
-          style={{color: "#4F566B"}}
+          style={{ color: "#4F566B" }}
         >
           {record?.status === true ? " ACTIVE" : "INACTIVE"}
         </Tag>
@@ -137,7 +148,7 @@ export const SupplierComponent = observer((props) => {
   const handleDelete = (id) => {
     Modal.confirm({
       title: "Are you sure delete this record?",
-      icon: <ExclamationCircleOutlined/>,
+      icon: <ExclamationCircleOutlined />,
       okText: "Yes",
       okType: "primary",
       cancelText: "Cancel",
@@ -190,8 +201,9 @@ export const SupplierComponent = observer((props) => {
 
   return (
     <div>
+      {store.ui.mediaQuery.isDesktop && (
         <Table
-        style={{textAlign: "center"}}
+          style={{ textAlign: "center" }}
           columns={columns}
           dataSource={store.supplier.data}
           bordered
@@ -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"}
@@ -237,22 +342,22 @@ export const SupplierComponent = observer((props) => {
           <Form.Item
             name="name"
             label="Name"
-            rules={[{required: true, message: "Please input name!"}]}
+            rules={[{ required: true, message: "Please input name!" }]}
           >
-            <Input/>
+            <Input />
           </Form.Item>
           {!idData && (
             <Form.Item
               name="code"
               label="Kode"
-              rules={[{required: true, message: "Please input kode!"}]}
+              rules={[{ required: true, message: "Please input kode!" }]}
             >
-              <Input/>
+              <Input />
             </Form.Item>
           )}
         </Form>
       </Modal>
-      <TopupsaldoModal code={store.supplier.code}/>
+      <TopupsaldoModal code={store.supplier.code} />
     </div>
   );
 });

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)}