20 changed files with 498 additions and 105 deletions
@ -0,0 +1,293 @@ |
|||||||
|
import React, {useState, useEffect} from 'react' |
||||||
|
import { Modal, ModalHeader, ModalBody, ModalFooter, Card, CardHeader, CardBody } from 'reactstrap'; |
||||||
|
import { TabContent, TabPane, Nav, NavItem, NavLink, Row, Col, Input } from 'reactstrap'; |
||||||
|
import { Button } from 'reactstrap'; |
||||||
|
import axios from "../../../const/interceptorApi"; |
||||||
|
import { |
||||||
|
NotificationManager, |
||||||
|
} from "react-notifications"; |
||||||
|
import { BASE_SIMPRO_LUMEN } from "../../../const/ApiConst"; |
||||||
|
import 'antd/dist/antd.css'; |
||||||
|
import './style.css' |
||||||
|
import { Select, Table } from 'antd'; |
||||||
|
const { Option } = Select |
||||||
|
|
||||||
|
const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) => { |
||||||
|
const token = localStorage.getItem("token"); |
||||||
|
const [activeTab, setActiveTab] = useState('1'); |
||||||
|
const [search, setSearch] = useState(''); |
||||||
|
const [avgActivity, setAvgActivity] = useState(0); |
||||||
|
const [dataTable, setDatatable] = useState([]); |
||||||
|
const [dataTableActivityToHr, setDataTableActivityToHr] = useState([]); |
||||||
|
const [hrList, setHrList] = useState([]); |
||||||
|
const [selectedHr, setSelectedHr] = useState(null); |
||||||
|
|
||||||
|
const toggle = (tab) => { |
||||||
|
if (activeTab !== tab) { |
||||||
|
setActiveTab(tab); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const HEADER = { |
||||||
|
headers: { |
||||||
|
"Content-Type": "application/json", |
||||||
|
Authorization: `Bearer ${token}`, |
||||||
|
}, |
||||||
|
}; |
||||||
|
|
||||||
|
const columns = [ |
||||||
|
{title: "Activity", dataIndex: "name", key: "name"}, |
||||||
|
{title: "Gantt", dataIndex: "name_version", key: "name_version"}, |
||||||
|
{title: "Assign HR", dataIndex: "user_name", key: "user_name"}, |
||||||
|
{title: "Progress (%)", dataIndex: "persentase_progress", key: "persentase_progress"}, |
||||||
|
] |
||||||
|
|
||||||
|
const columnActivityToHr = [ |
||||||
|
{title: "Activity", dataIndex: "join_third_name", key: "join_third_name"}, |
||||||
|
{title: "Human Resource", dataIndex: "join_second_name", key: "join_second_name"}, |
||||||
|
{title: "Report Date", dataIndex: "report_date", key: "report_date"}, |
||||||
|
{title: "Volume Actual", dataIndex: "qty", key: "qty"}, |
||||||
|
{title: "Volume Planned", dataIndex: "join_first_qty_planning", key: "join_first_qty_planning"}, |
||||||
|
{title: "Description", dataIndex: "description", key: "description"} |
||||||
|
] |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (search) { |
||||||
|
getDataActivity() |
||||||
|
} |
||||||
|
}, [search]); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (selectedHr) { |
||||||
|
getDataActivityToHr() |
||||||
|
} |
||||||
|
}, [selectedHr]); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
getDataHr() |
||||||
|
}, []); |
||||||
|
|
||||||
|
const handleSearch = (e) => { |
||||||
|
const value = e.target.value; |
||||||
|
setSearch(value); |
||||||
|
}; |
||||||
|
|
||||||
|
const getDataHr = async () => { |
||||||
|
const result = await axios |
||||||
|
.get(`${BASE_SIMPRO_LUMEN}/human-resource/list`, HEADER) |
||||||
|
.then((res) => res) |
||||||
|
.catch((error) => error.response); |
||||||
|
|
||||||
|
if (result && result.data && result.data.code == 200) { |
||||||
|
let dataRes = result.data.data || []; |
||||||
|
setHrList(dataRes); |
||||||
|
} else { |
||||||
|
NotificationManager.error("Gagal Mengambil Data!!", "Failed"); |
||||||
|
} |
||||||
|
} |
||||||
|
const getDataActivityToHr = async () => { |
||||||
|
setAvgActivity(0); |
||||||
|
let sum = 0; |
||||||
|
const payload = { |
||||||
|
columns: [ |
||||||
|
{ |
||||||
|
name: "user_id", |
||||||
|
logic_operator: "=", |
||||||
|
value: selectedHr, |
||||||
|
operator: "AND", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "proyek_id", |
||||||
|
logic_operator: "=", |
||||||
|
value: projectId, |
||||||
|
table_name: "m_activity", |
||||||
|
operator: "AND", |
||||||
|
} |
||||||
|
], |
||||||
|
joins: [ |
||||||
|
{ |
||||||
|
name: "assign_material_to_activity", |
||||||
|
column_join: "assign_material_id", |
||||||
|
column_results: ["qty_planning"] |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "m_users", |
||||||
|
column_join: "user_id", |
||||||
|
column_results: ["name"] |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "m_activity", |
||||||
|
column_join: "activity_id", |
||||||
|
column_results: ["name", "persentase_progress"] |
||||||
|
} |
||||||
|
], |
||||||
|
orders: { columns: ["id"], ascending: false }, |
||||||
|
paging: { start: 0, length: -1 }, |
||||||
|
}; |
||||||
|
|
||||||
|
const result = await axios |
||||||
|
.post(`${BASE_SIMPRO_LUMEN}/report-activity-material/search`, payload, HEADER) |
||||||
|
.then((res) => res) |
||||||
|
.catch((error) => error.response); |
||||||
|
|
||||||
|
if (result && result.data && result.data.code == 200) { |
||||||
|
let dataRes = result.data.data || []; |
||||||
|
dataRes.forEach(element => { |
||||||
|
element.join_third_persentase_progress ? sum += parseInt(element.join_third_persentase_progress) : sum += 0; |
||||||
|
}); |
||||||
|
setAvgActivity(sum / dataRes.length); |
||||||
|
setDataTableActivityToHr(dataRes); |
||||||
|
} else { |
||||||
|
NotificationManager.error("Gagal Mengambil Data!!", "Failed"); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const getDataActivity = async () => { |
||||||
|
setAvgActivity(0); |
||||||
|
let sum = 0; |
||||||
|
const payload = { |
||||||
|
columns: [ |
||||||
|
{ |
||||||
|
name: "name", |
||||||
|
logic_operator: "ilike", |
||||||
|
value: search, |
||||||
|
operator: "AND", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "proyek_id", |
||||||
|
logic_operator: "=", |
||||||
|
value: projectId, |
||||||
|
operator: "AND", |
||||||
|
}, |
||||||
|
], |
||||||
|
orders: { columns: ["id"], ascending: false }, |
||||||
|
paging: { start: 0, length: -1 }, |
||||||
|
}; |
||||||
|
|
||||||
|
const result = await axios |
||||||
|
.post(`${BASE_SIMPRO_LUMEN}/activity/search-analysis`, payload, HEADER) |
||||||
|
.then((res) => res) |
||||||
|
.catch((error) => error.response); |
||||||
|
|
||||||
|
if (result && result.data && result.data.code == 200) { |
||||||
|
let dataRes = result.data.data || []; |
||||||
|
|
||||||
|
dataRes.forEach(element => { |
||||||
|
element.persentase_progress ? sum += parseInt(element.persentase_progress) : sum += 0; |
||||||
|
}); |
||||||
|
setAvgActivity(sum / dataRes.length); |
||||||
|
setDatatable(dataRes); |
||||||
|
} else { |
||||||
|
NotificationManager.error("Gagal Mengambil Data!!", "Failed"); |
||||||
|
} |
||||||
|
}; |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<Modal size="xl" isOpen={openDialog} toggle={toggleDialog}> |
||||||
|
<ModalHeader className="capitalize" toggle={closeDialog}>Project</ModalHeader> |
||||||
|
<ModalBody> |
||||||
|
<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 |
||||||
|
onChange={handleSearch} |
||||||
|
value={search} |
||||||
|
type="text" |
||||||
|
name="search" |
||||||
|
id="search" |
||||||
|
placeholder={`Search Activity Name`} |
||||||
|
style={{ width: 200 }} |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</CardHeader> |
||||||
|
<CardBody> |
||||||
|
<div style={{ textAlign: 'center' }}> |
||||||
|
<h1> |
||||||
|
{ |
||||||
|
search && avgActivity ? `Activity ${search} adalah ${avgActivity.toFixed(2)} %` : null |
||||||
|
} |
||||||
|
</h1> |
||||||
|
</div> |
||||||
|
<Table |
||||||
|
size="small" |
||||||
|
columns={columns} |
||||||
|
dataSource={dataTable} |
||||||
|
pagination={false} |
||||||
|
rowKey={"id"} |
||||||
|
/> |
||||||
|
</CardBody> |
||||||
|
</Card> |
||||||
|
</TabPane> |
||||||
|
<TabPane tabId="2"> |
||||||
|
<Card> |
||||||
|
<CardHeader> |
||||||
|
<Row> |
||||||
|
<Col> |
||||||
|
<Select showSearch value={selectedHr} onChange={(val) => setSelectedHr(val)} placeholder="Select Human Resource" filterOption={(input, option) => |
||||||
|
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 |
||||||
|
} style={{ width: '100%' }}> |
||||||
|
{hrList && hrList.map(res => ( |
||||||
|
<Option key={res.id} value={res.id}>{`${res.name}`}</Option> |
||||||
|
))} |
||||||
|
</Select> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</CardHeader> |
||||||
|
<CardBody> |
||||||
|
<div style={{ textAlign: 'center' }}> |
||||||
|
<h1> |
||||||
|
{ |
||||||
|
selectedHr && avgActivity ? `Activity user ini adalah ${avgActivity.toFixed(2)} %` : null |
||||||
|
} |
||||||
|
</h1> |
||||||
|
</div> |
||||||
|
<Table |
||||||
|
size="small" |
||||||
|
columns={columnActivityToHr} |
||||||
|
dataSource={dataTableActivityToHr} |
||||||
|
pagination={false} |
||||||
|
rowKey={"id"} |
||||||
|
/> |
||||||
|
</CardBody> |
||||||
|
</Card> |
||||||
|
</TabPane> |
||||||
|
</TabContent> |
||||||
|
</div> |
||||||
|
</ModalBody> |
||||||
|
<ModalFooter> |
||||||
|
<Button color="primary" onClick={closeDialog}>Close</Button> |
||||||
|
</ModalFooter> |
||||||
|
</Modal> |
||||||
|
</> |
||||||
|
) |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
export default ReportAnalysis; |
||||||
Loading…
Reference in new issue