fix: responsive layout

package.json

@@ -22,6 +22,7 @@
     "camelcase": "^6.2.0",
     "case-sensitive-paths-webpack-plugin": "2.4.0",
     "css-loader": "4.3.0",
+    "date-fns": "^2.27.0",
     "dotenv": "8.2.0",
     "dotenv-expand": "5.1.0",
     "eslint": "^7.28.0",
@@ -61,7 +62,7 @@
     "react-dev-utils": "^11.0.4",
     "react-dom": "^17.0.2",
     "react-refresh": "^0.8.3",
-    "react-responsive": "^8.2.0",
+    "react-responsive": "^9.0.0-beta.5",
     "react-router-dom": "^5.2.0",
     "react-router-transition": "^2.1.0",
     "resolve": "1.20.0",

src/index.css

@@ -24,11 +24,11 @@ code {
     border-color: #2D9CDB !important;
 }
 
-.ant-card {
+/*.ant-card {*/
-    margin-bottom: 30px !important;
+/*    margin-bottom: 30px !important;*/
-    width: 1000px;
+/*    width: 1000px;*/
-    height: auto;
+/*    height: auto;*/
-}
+/*}*/
 
 .ant-table-cell {
     text-align: center !important;

src/pages/App/DesktopLayout.js

@@ -6,11 +6,13 @@ import {CalendarOutlined, HomeOutlined, MenuOutlined, UserOutlined,} from "@ant-
 import {AppRoute} from "../../routes/app";
 import {useStore} from "../../utils/useStore";
 import {observer} from "mobx-react-lite";
+import {useMediaQuery} from "react-responsive";
 
 const {Text, Paragraph} = Typography;
 const {Header, Content, Sider} = Layout;
 
 export const DesktopLayout = observer(() => {
+    const xl = useMediaQuery({minWidth: 1024});
     const store = useStore();
     const [clicked, setClicked] = useState(false);
 
@@ -20,10 +22,12 @@ export const DesktopLayout = observer(() => {
             className={"transparent"}
             hasSider={store.ui.mediaQuery.isDesktop}
             style={{
-                paddingLeft: 0,
+                paddingLeft: xl ? "calc(70vw - 1024px)" : "0",
                 display: "flex",
-                width: "100vw",
+                // minWidth: 1024,
-                height: "100vh",
+                width: "100%",
+                height: "100%",
+                position: "relative",
             }}
         >
             {store.ui.mediaQuery.isDesktop && <Sider

src/pages/Membership/Membership.js

@@ -1,10 +1,11 @@
 import React, {useEffect, useState} from "react";
-import {Button, Card, Col, Input, message, Modal, Row, Space, Table, Tag} from "antd";
+import {Button, Card, Col, Divider, Input, List, message, Modal, Row, Space, Table, Tag} from "antd";
 import {useStore} from "../../utils/useStore";
 import {observer} from "mobx-react-lite";
 import {ExclamationCircleOutlined, FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
 import {MembershipModal} from "./MembershipModal";
 import {BreadcumbComponent} from "../../component/BreadcumbComponent";
+import {format} from "date-fns";
 
 const {Search} = Input;
 
@@ -38,8 +39,8 @@ export const Membership = observer(() => {
     },
     {
       title: "Username",
-      dataIndex: "username",
+      dataIndex: "name",
-      key: "username",
+      key: "name",
     },
     {
       title: "Status",
@@ -155,22 +156,90 @@ export const Membership = observer(() => {
                 </Button>
               </Col>
             </Row>
-            <Table
+
-                style={{textAlign: "center"}}
+            {store.ui.mediaQuery.isDesktop && (
-                columns={columns}
+                <Table
-                dataSource={store.membership.data}
+                    key="1"
-                bordered
+                    hasEmpty
-                pagination={{
+                    size={"small"}
-                  total: store.membership.total_data,
+                    columns={columns}
-                  current: store.membership.page,
+                    dataSource={store.membership.data}
-                  pageSize: store.membership.pageSize,
+                    bordered
-                  simple: true
+                    pagination={{
-                }} onChange={(page) => {
+                      total: store.membership.total_data,
-              store.membership.pageSize = page.pageSize;
+                      current: store.membership.page,
-              store.membership.page = page.current;
+                      pageSize: store.membership.pageSize,
-              store.membership.getData();
+                      simple: true
-            }} current={store.membership.page}
+                    }}
-                loading={store.membership.pageSize}/>
+                    onChange={(page) => {
+                      store.membership.pageSize = page.pageSize;
+                      store.membership.page = page.current;
+                      store.membership.getData();
+                    }}
+                    current={store.membership.page}
+                    loading={store.membership.pageSize}
+                />)}
+
+            {store.ui.mediaQuery.isMobile && (
+                <List
+                    itemLayout="horizontal"
+                    position={"top"}
+                    pagination={{
+                      onChange: (page) => {
+                        store.membership.pageSize = page.pageSize;
+                        store.membership.page = page.current;
+                        store.membership.getData();
+                      },
+                      pageSize: store.membership.pageSize,
+                      total: store.membership.total_data,
+                      current: store.membership.page,
+                      style: {marginBottom: '1rem', marginRight: '1rem'}
+                    }}
+                    dataSource={store.membership.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.name}
+                                  description={
+                                    <div style={{}}>
+                                      <p>
+                                        <small>Email : {item.email}</small> <br/>
+                                      </p>
+                                    </div>
+                                  }
+                              />
+                              <div style={{marginRight: 16}}>
+                                <p
+                                    style={{
+                                      fontSize: 9,
+                                      margin: 0,
+                                    }}
+                                >
+                                  {format(new Date(item.created_at), "dd-MM-yyyy")}
+                                </p>
+                              </div>
+                            </List.Item>
+                            <Divider plain style={{margin: 0}}/>
+                          </div>
+                      );
+                    }}
+                />
+            )}
           </div>
         </Card>
         <MembershipModal visible={visibleModal}

yarn.lock

@@ -4384,6 +4384,11 @@ date-fns@^2.15.0:
   resolved "https://registry.npmjs.org/date-fns/-/date-fns-2.17.0.tgz"
   integrity sha512-ZEhqxUtEZeGgg9eHNSOAJ8O9xqSgiJdrL0lzSSfMF54x6KXWJiOH/xntSJ9YomJPrYH/p08t6gWjGWq1SDJlSA==
 
+date-fns@^2.27.0:
+  version "2.27.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.27.0.tgz#e1ff3c3ddbbab8a2eaadbb6106be2929a5a2d92b"
+  integrity sha512-sj+J0Mo2p2X1e306MHq282WS4/A8Pz/95GIFcsPNMPMZVI3EUrAdSv90al1k+p74WGLCruMXk23bfEDZa71X9Q==
+
 debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz"
@@ -10383,15 +10388,15 @@ react-refresh@^0.8.3:
   resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz"
   integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
 
-react-responsive@^8.2.0:
+react-responsive@^9.0.0-beta.5:
-  version "8.2.0"
+  version "9.0.0-beta.5"
-  resolved "https://registry.npmjs.org/react-responsive/-/react-responsive-8.2.0.tgz"
+  resolved "https://registry.yarnpkg.com/react-responsive/-/react-responsive-9.0.0-beta.5.tgz#94b6eba0d089c4977d5353188a4d5a744392cbe3"
-  integrity sha512-iagCqVrw4QSjhxKp3I/YK6+ODkWY6G+YPElvdYKiUUbywwh9Ds0M7r26Fj2/7dWFFbOpcGnJE6uE7aMck8j5Qg==
+  integrity sha512-Zvikc/28FsabQ4caLP1wIQlRPXBelYMct6dnUEwTRI4P7jH5d9x8RAMb1SbAZ0IdZGQHQ06aSRvhhg/tvqXktA==
   dependencies:
     hyphenate-style-name "^1.0.0"
     matchmediaquery "^0.3.0"
     prop-types "^15.6.1"
-    shallow-equal "^1.1.0"
+    shallow-equal "^1.2.1"
 
 react-router-dom@^5.2.0:
   version "5.2.0"
@@ -11137,9 +11142,9 @@ sha.js@^2.4.0, sha.js@^2.4.8:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
-shallow-equal@^1.1.0:
+shallow-equal@^1.2.1:
   version "1.2.1"
-  resolved "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz"
+  resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.2.1.tgz#4c16abfa56043aa20d050324efa68940b0da79da"
   integrity sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==
 
 shallowequal@^1.1.0: