Report analysis mockup

src/views/SimproV2/CreatedProyek/ReportAnalysis.js

@@ -1,18 +1,164 @@
-import React from 'react'
-import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import React, {useState} from 'react'
+import { Modal, ModalHeader, ModalBody, ModalFooter, Card, CardHeader, CardBody, Table } from 'reactstrap';
+import { TabContent, TabPane, Nav, NavItem, NavLink, Row, Col, Input } from 'reactstrap';
 import { Button } from 'reactstrap';
 import 'antd/dist/antd.css';
 import './style.css'
 
 
   const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog }) => {
+  const [activeTab, setActiveTab] = useState('1');
+  const [search, setSearch] = useState('');
+  const toggle = (tab) => {
+    if (activeTab !== tab) {
+      setActiveTab(tab);
+    }
+  };
+
+  const handleSearch = (e) => {
+    const value = e.target.value;
+    setSearch(value);
+  };
 
   return (
     <>
       <Modal size="xl" isOpen={openDialog} toggle={toggleDialog}>
         <ModalHeader className="capitalize" toggle={closeDialog}>Project</ModalHeader>
         <ModalBody>
-          <div>Report Analysis</div>
+          <div>
+            <Nav tabs>
+              <NavItem>
+                <NavLink
+                  className={activeTab === '1' ? "active" : null}
+                  onClick={() => {
+                    toggle('1');
+                  }}
+                >
+                  Activity
+                </NavLink>
+              </NavItem>
+              <NavItem>
+                <NavLink
+                  className={activeTab === '2' ? "active" : null}
+                  onClick={() => {
+                    toggle('2');
+                  }}
+                >
+                  Human Resource
+                </NavLink>
+              </NavItem>
+            </Nav>
+            <TabContent activeTab={activeTab}>
+              <TabPane tabId="1">
+                <Card>
+                  <CardHeader>
+                    <Row>
+                      <Col>
+                        <Input
+                          type="text"
+                          name="search"
+                          id="search"
+                          placeholder={`Search Project Name`}
+                          style={{ width: 200 }}
+                        />
+                      </Col>
+                    </Row>
+                  </CardHeader>
+                  <CardBody>
+                    <div style={{ textAlign: 'center' }}>
+                      <h1>
+                        Hello World
+                      </h1>
+                    </div>
+                    <Table>
+                      <thead>
+                        <tr>
+                          <th>#</th>
+                          <th>First Name</th>
+                          <th>Last Name</th>
+                          <th>Username</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <th scope="row">1</th>
+                          <td>Mark</td>
+                          <td>Otto</td>
+                          <td>@mdo</td>
+                        </tr>
+                        <tr>
+                          <th scope="row">2</th>
+                          <td>Jacob</td>
+                          <td>Thornton</td>
+                          <td>@fat</td>
+                        </tr>
+                        <tr>
+                          <th scope="row">3</th>
+                          <td>Larry</td>
+                          <td>the Bird</td>
+                          <td>@twitter</td>
+                        </tr>
+                      </tbody>
+                    </Table>
+                  </CardBody>
+                </Card>
+              </TabPane>
+              <TabPane tabId="2">
+                <Card>
+                  <CardHeader>
+                    <Row>
+                      <Col>
+                        <Input type="select" name="select" id="exampleSelect" style={{ width: 200 }}>
+                          <option>1</option>
+                          <option>2</option>
+                          <option>3</option>
+                          <option>4</option>
+                          <option>5</option>
+                        </Input>
+                      </Col>
+                    </Row>
+                  </CardHeader>
+                  <CardBody>
+                    <div style={{ textAlign: 'center' }}>
+                      <h1>
+                        Hello World
+                      </h1>
+                    </div>
+                    <Table>
+                      <thead>
+                        <tr>
+                          <th>#</th>
+                          <th>First Name</th>
+                          <th>Last Name</th>
+                          <th>Username</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <th scope="row">1</th>
+                          <td>Mark</td>
+                          <td>Otto</td>
+                          <td>@mdo</td>
+                        </tr>
+                        <tr>
+                          <th scope="row">2</th>
+                          <td>Jacob</td>
+                          <td>Thornton</td>
+                          <td>@fat</td>
+                        </tr>
+                        <tr>
+                          <th scope="row">3</th>
+                          <td>Larry</td>
+                          <td>the Bird</td>
+                          <td>@twitter</td>
+                        </tr>
+                      </tbody>
+                    </Table>
+                  </CardBody>
+                </Card>
+              </TabPane>
+            </TabContent>
+          </div>
         </ModalBody>
         <ModalFooter>
           <Button color="primary" onClick={closeDialog}>Close</Button>