Add missing classes

web/admin/src/connection/components/ConnectionTab.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import {
+  Row,
+  Col,
+  Space,
+} from 'antd';
+import IceHrmProData from './IceHrmProData';
+import SystemData from './SystemData';
+
+function ConnectionTab(props) {
+  const { employeeCount, systemData } = props;
+  return (
+    <Space direction="vertical" style={{ width: '100%' }}>
+      {employeeCount.isIceHrmPro
+      &&
+      <Row>
+        <Col span={8}>
+          <IceHrmProData {...employeeCount}/>
+        </Col>
+        <Col span={8}/>
+        <Col span={8}/>
+      </Row>
+      }
+      <SystemData {...systemData}/>
+    </Space>
+  );
+}
+
+export default ConnectionTab;

web/admin/src/connection/components/IceHrmProData.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import {
+  Statistic,
+  Row,
+  Col,
+  Button,
+  Progress, Space,
+} from 'antd';
+
+const dayjs = require('dayjs');
+
+function IceHrmProData(props) {
+  const { count, allowed, validUntil, licenseId } = props;
+  return (
+    <>
+      <Row gutter={16}>
+        <Col span={12}>
+          <Statistic title="Number of Employees" value={`${count} / ${allowed}`} />
+          <Space />
+          <Progress type="circle" percent={parseInt((count * 100) / allowed, 10)} width={80} />
+        </Col>
+        <Col span={12}>
+          <Statistic title="License Valid Until" value={dayjs(validUntil).format('MMM D, YYYY')}/>
+          <Button style={{ marginTop: 16 }} type="primary" onClick={() => {
+            window.open(`https://icehrm.com/renew-icehrmpro-license/${licenseId}`, '_blank');
+          }}>
+            Renew
+          </Button>
+        </Col>
+      </Row>
+    </>
+  );
+}
+
+export default IceHrmProData;

web/admin/src/connection/components/SystemData.js

@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+import {
+  Table,
+  Typography,
+  Button,
+  Modal,
+  Alert, Space,Card,
+} from 'antd';
+import { CopyOutlined } from "@ant-design/icons";
+const { Link } = Typography;
+
+function SystemData(props) {
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const { data, issues } = props;
+  const columns = [
+    {
+      title: 'Name',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: 'Value',
+      dataIndex: 'value',
+      key: 'value',
+    },
+  ];
+
+  const showModal = () => {
+    setIsModalVisible(true);
+  };
+
+  const handleOk = () => {
+    setIsModalVisible(false);
+  };
+
+  const handleCancel = () => {
+    setIsModalVisible(false);
+  };
+
+  return (
+    <Space direction="vertical" style={{ width: '100%' }}>
+      { issues.length > 0 &&
+        <Card title="System Issues">
+          <Space direction="vertical" style={{width: '100%'}}>
+            {issues.map((item) => {
+              return (<Space>
+                  <Alert
+                    message={item.message}
+                    type={item.type}
+                    showIcon
+                  >
+                  </Alert>
+                  {item.link &&
+                  <Button onClick={() => {
+                    window.open(item.link, '_blank');
+                  }}>
+                    {item.linkText}
+                  </Button>
+                  }
+
+                </Space>
+              );
+            })}
+          </Space>
+        </Card>
+      }
+      <Card title="System Report">
+        <Table columns={columns} dataSource={data} />
+        <Button type="primary" icon={<CopyOutlined />} onClick={showModal}>
+          Copy System Report
+        </Button>
+      </Card>
+      <Modal title="System Data" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
+        {data.map((item) => (<p>{`${item.name}:${item.value}`}</p>))}
+      </Modal>
+    </Space>
+  );
+}
+
+export default SystemData;